/*popup*/
#cast_dt {text-align:left;}
#cast_dt #mainbox {width:92%; height:auto; margin:0 auto; padding:0;}

#cast_dt h1 {width:100%; margin:0 auto .4em; padding:.5em 0 0;}

#cast_dt h1 span.castname{ width:666px; height:86px; margin:0 auto; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: center 0; background-size:cover;}
#cast_dt h1#oto span.castname { background-image: url(../img/chart/oto.png);}
#cast_dt h1#haruto span.castname { background-image: url(../img/chart/haruto.png);}
#cast_dt h1#tenma span.castname { background-image: url(../img/chart/tenma.png);}
#cast_dt h1#kaito span.castname { background-image: url(../img/chart/kaito.png);}
#cast_dt h1#megumi span.castname { background-image: url(../img/chart/megumi.png);}
#cast_dt h1#airi span.castname { background-image: url(../img/chart/airi.png);}
#cast_dt h1#issa span.castname { background-image: url(../img/chart/issa.png);}
#cast_dt h1#sugimaru span.castname { background-image: url(../img/chart/sugimaru.png);}
#cast_dt h1#arisa span.castname { background-image: url(../img/chart/arisa.png);}
#cast_dt h1#rie span.castname { background-image: url(../img/chart/rie.png);}
#cast_dt h1#iwao span.castname { background-image: url(../img/chart/iwao.png);}
#cast_dt h1#yukie span.castname { background-image: url(../img/chart/yukie.png);}
#cast_dt h1#jin span.castname { background-image: url(../img/chart/jin.png);}
#cast_dt h1#makoto span.castname { background-image: url(../img/chart/makoto.png);}

#cast_dt .prof {width:54%; padding:6% 1.4em 0; border-radius:10px; background-color:rgba(255,255,255,0.6); box-shadow:2px 3px 10px rgba(10,10,10,0.1);
background-image:url(../img/chart/onmt.png); background-size: 20%; background-repeat:no-repeat; background-position:center top 3.5%;}
#cast_dt .photo {background-repeat: no-repeat; background-position: 0 0; background-size: cover;}
#cast_dt #mainbox .ovtxt {height:220px; overflow-x: hidden; overflow-y:scroll;}

#cast_dt #mainbox .ph_oto {background-image: url(../img/chart/sugisaki.png);}
#cast_dt #mainbox .ph_haruto {background-image: url(../img/chart/hirano.png);}
#cast_dt #mainbox .ph_tenma {background-image: url(../img/chart/nakagawa.png);}
#cast_dt #mainbox .ph_kaito {background-image: url(../img/chart/hamada.png);}
#cast_dt #mainbox .ph_megumi {background-image: url(../img/chart/iitoyo.png);}
#cast_dt #mainbox .ph_airi {background-image: url(../img/chart/imada.png);}
#cast_dt #mainbox .ph_issa {background-image: url(../img/chart/suzuki.png);}
#cast_dt #mainbox .ph_sugimaru {background-image: url(../img/chart/nakata.png);}
#cast_dt #mainbox .ph_arisa {background-image: url(../img/chart/kinami.png);}
#cast_dt #mainbox .ph_rie {background-image: url(../img/chart/takaoka.png);}
#cast_dt #mainbox .ph_iwao {background-image: url(../img/chart/takido.png);}
#cast_dt #mainbox .ph_yukie {background-image: url(../img/chart/kikuchi.png);}
#cast_dt #mainbox .ph_jin {background-image: url(../img/chart/kashima.png);}
#cast_dt #mainbox .ph_makoto {background-image: url(../img/chart/sorimachi.png);}


#cast_dt {position:absolute;left:50%; z-index:5800 !important;}
#cast_dt .btn-w-close a{display:block; width:160px; height:44px; background:url(../img/chart/close.png) no-repeat; margin:.2em 0 0 auto; background-size: contain;}
#cast_dt .btn-w-close a{cursor:pointer;}

@media all and (min-width: 768px) {
#cast_dt {width:750px; height:545px; margin-left:-350px; background-image:url(../img/chart/bg.jpg);
background: linear-gradient(120deg, rgba(253,212,86,.3) 0%,rgba(255,245,160,.4) 30%,rgba(255,255,238,.4) 50%,rgba(255,245,160,.4) 70%,rgba(253,212,86,.3) 100%),url(../img/chart/bg.jpg);
}
#cast_dt #mainbox {margin:0 auto}
#cast_dt .prof{height:365px;}
#cast_dt .photo {width:298px; height:370px; padding:0; margin:0;}
#cast_dt #mainbox p {font-size:97%; line-height:1.6;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; box-shadow: 0px 0px 30px 2px rgba(10,10,10,0.1);
background: linear-gradient(120deg, rgba(253,212,86,.3) 0%,rgba(255,245,160,.4) 30%,rgba(255,255,238,.4) 50%,rgba(255,245,160,.4) 70%,rgba(253,212,86,.3) 100%),url(../img/chart/bg.jpg);
background-size:100%;
}
#cast_dt #mainbox {margin:2px auto; padding:0 0 1em;}
#cast_dt .btn-w-close a{width:120px; height:33px;  margin:.5em auto 0;}
#cast_dt h1 {width:100%; margin:0 auto 2%; padding:2% 0 0 0;}
#cast_dt h1 span.castname{ width:100%; height:0; padding:17% 0 0;}

#cast_dt .photo {width:65%; height:0; padding:80.7046% 0 0; margin:0 auto; position: relative;}
#cast_dt .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .photo,#cast_dt .prof {float:none;}
#cast_dt .prof {background-size:18%; width:98%; margin:.8em auto 0; padding:7% 5% 5%; border-radius:8px;}
#cast_dt #mainbox p {font-size:98%; font-size:3.2vw; line-height:1.55; padding:2.5% 0 0;}
}