/*popup*/
#cast_dt {text-align:left; box-shadow:2px 15px 40px rgba(3,47,63,0.1);
/*border:4px solid #fff;*/
background-image:linear-gradient(120deg, rgba(139,209,222,0.6) 10%,rgba(249,161,202,0.5) 100%),url(../img/top/bg.jpg);
background-repeat:no-repeat,no-repeat;
background-position:0 0,0 center;
background-size:auto,cover;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0;}

#cast_dt h1 {width:100%; margin:.2em auto .5em; padding:.6em 0 0; background:none;}
#cast_dt h1{position:relative; z-index:2;}
#cast_dt h1:before{background-color:rgba(255,255,255,0.5);
  content: '';
  position: absolute;
  top:12%;
  left:12%;
  width:88%;
  height:76%;
  z-index:-1;
}

#cast_dt h1 span.castname{ width:90%; height:78px; margin:0 auto; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: 0 0;}
#cast_dt h1#yui span.castname { background-image: url(../img/chart/yui.png);}
#cast_dt h1#kotaro span.castname { background-image: url(../img/chart/kotaro.png);}
#cast_dt h1#seiji span.castname { background-image: url(../img/chart/seiji.png);}
#cast_dt h1#yae span.castname { background-image: url(../img/chart/yae.png);}
#cast_dt h1#toru span.castname { background-image: url(../img/chart/toru.png);}
#cast_dt h1#taito span.castname { background-image: url(../img/chart/taito.png);}
#cast_dt h1#kanako span.castname { background-image: url(../img/chart/kanako.png);}
#cast_dt h1#maki span.castname { background-image: url(../img/chart/maki.png);}
#cast_dt h1#kodama span.castname { background-image: url(../img/chart/kodama.png);}
#cast_dt h1#saki span.castname { background-image: url(../img/chart/saki.png);}
#cast_dt h1#shohei span.castname { background-image: url(../img/chart/shohei.png);}
#cast_dt h1#takumi span.castname { background-image: url(../img/chart/takumi.png);}
#cast_dt h1#shu span.castname { background-image: url(../img/chart/shu.png?2);}
#cast_dt h1#outan span.castname { background-image: url(../img/chart/outan.png);}
#cast_dt h1#manabu span.castname { background-image: url(../img/chart/manabu.png);}
#cast_dt h1#tomoyuki span.castname { background-image: url(../img/chart/tomoyuki.png);}

#cast_dt .prof {width:100%;}
#cast_dt .prof h2{background-color:rgba(103,184,201,0.8); color:#fff; font-weight:bold; line-height:130%; font-size:110%; display:inline-block; padding:.2em .5em;}
#cast_dt .prof p{padding:.5em;}
#cast_dt .photo {background-repeat: no-repeat; background-position:center center; background-size: cover; border:1px solid rgba(255,255,255,0.8); box-shadow:2px 15px 28px rgba(3,47,63,0.1); background-color:rgba(255,255,255,0.25);}

#cast_dt #mainbox .ph_yui {background-image: url(../img/chart/yoshitaka.png?1);}
#cast_dt #mainbox .ph_kotaro {background-image: url(../img/chart/mukai.png);}
#cast_dt #mainbox .ph_seiji {background-image: url(../img/chart/yusuke.png);}
#cast_dt #mainbox .ph_yae {background-image: url(../img/chart/uchida.png);}
#cast_dt #mainbox .ph_toru {background-image: url(../img/chart/emoto.png);}
#cast_dt #mainbox .ph_taito {background-image: url(../img/chart/izumisawa.png);}
#cast_dt #mainbox .ph_kanako {background-image: url(../img/chart/shishido.png);}
#cast_dt #mainbox .ph_maki {background-image: url(../img/chart/sasaki.png);}
#cast_dt #mainbox .ph_kodama {background-image: url(../img/chart/kaji.png);}
#cast_dt #mainbox .ph_saki {background-image: url(../img/chart/tsuihiji.png?1);}
#cast_dt #mainbox .ph_shohei {background-image: url(../img/chart/takano.png?1);}
#cast_dt #mainbox .ph_takumi {background-image: url(../img/chart/nakamaru.png);}
#cast_dt #mainbox .ph_shu {background-image: url(../img/chart/sakurada.png);}
#cast_dt #mainbox .ph_outan {background-image: url(../img/chart/eguchi.png);}
#cast_dt #mainbox .ph_manabu {background-image: url(../img/chart/kajihara.png);}
#cast_dt #mainbox .ph_tomoyuki {background-image: url(../img/chart/sakai.png);}

#cast_dt {position:absolute;left:50%; z-index:5800 !important;}
#cast_dt .btn-w-close a{display:block; width:81px; height:34px; background:url(../img/chart/close.png) no-repeat; margin:0 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:520px; margin-left:-350px;}
#cast_dt #mainbox {margin:0 auto;}
#cast_dt .prof{display:inline-block; width:50%; position:relative; margin:0 auto;
width:calc(98% - 330px);}
#cast_dt .prof:before{background-color:rgba(255,255,255,0.5);
  content: '';
  position: absolute;
  top:8%;
  left:12%;
  width:88%;
  height:100%;
  z-index:-1;
}

#cast_dt .photo {width:280px; height:360px; padding:0; margin:0 20px 0 35px;}
#cast_dt .prof p{font-size:92%; line-height:160%;}
#cast_dt .btn-w-close{position:absolute;right:4%; bottom:5%;}
#cast_dt span.ovtxt {display:inline-block; height:230px; overflow-x: hidden; overflow-y:scroll; }
.ovtxt::-webkit-scrollbar{width:4px; background:none;}
.ovtxt::-webkit-scrollbar-thumb{background:#111;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%;}
#cast_dt #mainbox {margin:2px auto; padding:0 0 .5em;}
#cast_dt .btn-w-close a{margin:3.5% auto 5%;}
#cast_dt h1 {width:100%; margin:.2em auto 2%; padding:3% 0 1.8% 0;}
#cast_dt h1:before{height:70%;}
#cast_dt h1 span.castname{ width:90%; height:0; padding:13% 0 0; background-size: contain;}
#cast_dt .prof h2{font-size:4vw; margin:-1em 0 0;}
#cast_dt .photo {width:60%; height:0; padding:75% 0 0; margin:0 auto 5%; 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 {width:90%; margin:1em auto 0; padding: 0 5% 2%; background-color:rgba(255,255,255,0.5);}
#cast_dt .prof p {font-size:100%; font-size:3.4vw; line-height:165%; padding:.4em 0 .8em;}
}