/*	header
============================== */
#title_sp { width: 100%; height: 0; padding-top: 23%; position: relative;}
#title_fadein { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}
#title_all { width: 100%; max-width: 900px; margin: 1em auto;}
#title_all a { width: 100%; height: 100%; display: block; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; position: relative; z-index: 200;}
#logo_sp { width: 60%;}
#logo_sp #logo { width: 100%; height: 0; padding-top: 24%; padding-top: -webkit-calc(300 / 1250 * 100%); padding-top: calc(300 / 1250 * 100%); background-repeat: no-repeat; background-size: contain;}
#onair_sp { width: 30%;}
#onair_sp #onair { width: 100%; height: 0; padding-top: 23.80952381%; padding-top: -webkit-calc(100 / 420 * 100%); padding-top: calc(100 / 420 * 100%); background-repeat: no-repeat; background-size: contain;}
/*for_W480-*/
@media all and (min-width: 480px) { 
#title_sp { padding-top: 21%;}
}
/*for_W640-*/
@media all and (min-width: 640px) { 
#title_sp { padding-top: 19%;}
}
/*for_W1000-*/
@media all and (min-width: 1000px) { 
#title_sp { padding-top: 0; height: 180px;}
#title_all { margin: 1.5em auto 1em auto;}
}

/*	contents
============================== */
.unit { padding: 2em 0;}
.nkm { box-sizing: border-box; width: 95%; max-width: 1080px; margin: 0 auto; background-color: rgba(239, 159, 151, .3); padding: 1em 0;}
/*backnumber*/
#backnumber_bace { width: 95%; max-width: 1080px; margin: 0 auto; background-color: rgba(239, 159, 151, .3); border-radius: 0 0 30px 30px;}
#backnumber { box-sizing: border-box; width: 100%; margin: 0 auto; background-color: rgba(255, 255, 255, .4); padding: 2em 0; border-radius: 0 0 30px 30px; border-top: 1px dashed rgba(87, 53, 2, .8);}
#backnumber h3 { width: 50%; max-width: 300px; margin: 0 auto 1em auto;}
#backnumber h3 .img { display: block; width: 100%; height: 0; padding-top: 20%; padding-top: -webkit-calc(100 / 500 * 100%); padding-top: calc(100 / 500 * 100%); background-repeat: no-repeat; background-size: contain;}
#backnumber ul { width: 98%; max-width: 480px; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#backnumber li { width: 45%; margin: 0 2% 1em 2%;}
/*for_W768-*/
@media all and (min-width: 768px) { 
#backnumber ul { max-width: 1000px;}
#backnumber li { width: 18%; margin: 0 .9% 1em .9%;}
}

/*	modal
============================== */
.modal { display: none; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000000; background: rgba(62, 105, 135, .95); color: rgba(0, 0, 0, 1);}
.modal__bg { height: 100vh; position: absolute; width: 100%;}
.modal__content { box-sizing: border-box; width: 90%; height: 70%; max-width: 900px; background: rgba(255, 255, 255, 1); padding: 0 1em; position: absolute; top: 47%; left: 50%; transform: translate(-50%,-50%); line-height: 160%; overflow-y: scroll; overflow-y: auto;}
#rei_cont, #arata_cont, #master_cont { max-width: 400px; max-height: 640px; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%); line-height: 100%; padding: 0; background: rgba(145, 5, 4, 0);}
.js-modal-open, .js-modal-close { cursor: pointer;}
.modal .close_btn { width: 50px; height: 50px; position: absolute; top: 10px; right: 10px;}
.modal .close_btn::before, .close_btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 50px; background: rgba(255, 255, 255, 1);}
.modal .close_btn::before { transform: translate(-50%,-50%) rotate(45deg);}
.modal .close_btn::after { transform: translate(-50%,-50%) rotate(-45deg);}
/*modal_img*/
.modal__content .imgall, .modal__content .txtall { width: 100%;}
.modal__content .imgsp0 { width: 100%; height: 0; padding-top: 100%; position: relative;}
.modal__content .imgsp { width: 100%; height: 100%; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-background-position: top center; background-position: top center; position: absolute; top: 0; left: 0;}
.modal__content .imgsp2 { opacity: 0; -webkit-animation: fadeInOut2 10000ms linear 3000ms infinite normal; animation: fadeInOut2 10000ms linear 3000ms infinite normal;}
.modal__content .imgsp3 { opacity: 0; -webkit-animation: fadeInOut 10000ms linear 6000ms infinite normal; animation: fadeInOut 10000ms linear 6000ms infinite normal;}
/*fadeinout*/
@-webkit-keyframes fadeInOut { 0% { opacity: 0;} 20% { opacity: 0;} 30% { opacity: 1;} 60% { opacity: 1;} 70% { opacity: 0;} 100% { opacity: 0;}}
@keyframes fadeInOut { 0% { opacity: 0;} 20% { opacity: 0;} 30% { opacity: 1;} 60% { opacity: 1;} 70% { opacity: 0;} 100% { opacity: 0;}}
@-webkit-keyframes fadeInOut2 { 0% { opacity: 0;} 20% { opacity: 0;} 35% { opacity: 1;} 60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 0;}}
@keyframes fadeInOut2 { 0% { opacity: 0;} 20% { opacity: 0;} 35% { opacity: 1;} 60% { opacity: 1;} 80% { opacity: 0;} 100% { opacity: 0;}}
/*modal_txt*/
.modal__content .namesp { color: rgba(255, 255, 255, 1); padding: 1em 0; text-align: center; font-size: 130%;}
.modal__content .infosp { background: rgba(16, 80, 125, .75); color: rgba(255, 255, 255, 1); padding: .75em; font-size: 100%; line-height: 160%;}

/*for_W768-*/
@media screen and (min-width: 768px) {
.modal__content { height: 80%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%);}
#rei_cont, #arata_cont, #master_cont { max-width: 700px; max-height: 500px; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}

.modal__content .imgall { width: 40%; flex-basis: 40%;}
.modal__content .txtall { width: 58%; flex-basis: 58%;}

.modal__content .imgsp0 { width: 100%; height: 0; padding-top: 140%;}
.modal__content .namesp { text-align: left; font-size: 140%;}
.modal__content .infosp { padding: 1.5em; line-height: 170%;}
}
/*for_W1000-*/
@media screen and (min-width: 1000px) {
#rei_cont, #arata_cont, #master_cont { max-width: 900px; max-height: 600px;}
}
/*for_W1200-*/
@media screen and (min-width: 1200px) {
#rei_cont, #arata_cont, #master_cont { max-width: 1000px; max-height: 600px;}
}