/*popup*/
#cast_dt {padding:0; text-align:left;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0 0 1.5em; border:3px solid #f9ff5e; background: #d83281;}

#cast_dt h1 {width:95%; margin:1em 0 1em 1em; background-image:none !important;}

#cast_dt h1 span.castname{ width:501px; height:49px; margin:0; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; background-size: contain;}
#cast_dt h1#remi span.castname { background-image: url(../img/chart/name_remi.png);}
#cast_dt h1#kosuke span.castname { background-image: url(../img/chart/name_kosuke.png);}
#cast_dt h1#sumire span.castname { background-image: url(../img/chart/name_sumire.png);}
#cast_dt h1#sho span.castname { background-image: url(../img/chart/name_sho.png);}
#cast_dt h1#hayato span.castname { background-image: url(../img/chart/name_hayato.png);}
#cast_dt h1#takami span.castname { background-image: url(../img/chart/name_takami.png);}
#cast_dt h1#miki span.castname { background-image: url(../img/chart/name_miki.png);}
#cast_dt h1#yuu span.castname { background-image: url(../img/chart/name_yuu.png);}
#cast_dt h1#akemi span.castname { background-image: url(../img/chart/name_akemi.png);}

#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 p {padding:1em 0 0; line-height:1.5;}

#cast_dt #mainbox .ph_remi {background-image: url(../img/chart/remi.jpg);}
#cast_dt #mainbox .ph_kosuke {background-image: url(../img/chart/kosuke.jpg);}
#cast_dt #mainbox .ph_sumire {background-image: url(../img/chart/sumire.jpg);}
#cast_dt #mainbox .ph_sho {background-image: url(../img/chart/sho.jpg);}
#cast_dt #mainbox .ph_hayato {background-image: url(../img/chart/hayato.jpg);}
#cast_dt #mainbox .ph_takami {background-image: url(../img/chart/takami.jpg);}
#cast_dt #mainbox .ph_miki {background-image: url(../img/chart/miki.jpg);}
#cast_dt #mainbox .ph_yuu {background-image: url(../img/chart/yuu.jpg);}
#cast_dt #mainbox .ph_akemi {background-image: url(../img/chart/akemi.jpg);}

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

#chartnavi ul li {font-size:5.5rem; font-weight:bold; font-family:Impact,Verdana; color:#CE2C79;}
#chartnavi ul li a {color:#f9ff5e;}
#chartnavi ul li.prev { float:left; }
#chartnavi ul li.next { float:right; }


@media all and (min-width: 768px) {
#cast_dt .prof { width:58%; margin:0 1.5em 0 0;}
#cast_dt .photo {width:253px; height:297px; padding:0; margin:0 0 0 2em;}
#cast_dt {width:800px;margin-left:-430px;}
}
@media all and (max-width: 767px) {
#cast_dt #mainbox {width:95%; margin:0 auto; border:3px solid #f9ff5e;}
#cast_dt h1 {width:100%; margin:.8em auto 1em;}
#cast_dt h1 span.castname{ width:100%; height:0; padding:8.8023% 0 0; background-position: .6em 0;}
#cast_dt .photo {width:60%; height:0; padding:70.4347% 0 0; margin:0 auto;}
#cast_dt .photo,#cast_dt .prof {float:none;}
#cast_dt .prof {width:90%; margin:1em auto 0;}
#cast_dt #mainbox p {font-size:90%; line-height:1.5; padding:7px 0 0;}
#cast_dt {width:100%; margin:0 0 0 -50%;}
#cast_dt .btn-w-close a{width:90px; height:19px; margin:2em auto .5em;}
#chartnavi { width:95%; margin:0 auto;}
#chartnavi ul li {font-size:4rem;}
}