/*popup*/
#cast_dt {text-align:left; background:url(../img/bg.jpg);
box-shadow:8px 8px rgba(153,137,41,0.2);
border:4px solid #fff;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0;}

#cast_dt h1 {width:100%; margin:0 auto .6em; padding:.4em 0 0; background:none;}
#cast_dt h1{position:relative; z-index:2;}
#cast_dt h1:before{background-color:rgba(254,231,1,0.75);
  content: '';
  position: absolute;
  top:28%;
  left:0;
  width:100%;
  height:78%;
  transform: rotate(-1deg);
  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#hiyori span.castname { background-image: url(../img/chart/hiyori.png);}
#cast_dt h1#natsume span.castname { background-image: url(../img/chart/natsume.png);}
#cast_dt h1#sakota span.castname { background-image: url(../img/chart/sakota.png);}
#cast_dt h1#takahira span.castname { background-image: url(../img/chart/takahira.png);}
#cast_dt h1#todo span.castname { background-image: url(../img/chart/todo.png);}
#cast_dt h1#date span.castname { background-image: url(../img/chart/date.png);}
#cast_dt h1#sugioka span.castname { background-image: url(../img/chart/sugioka.png);}
#cast_dt h1#segawa span.castname { background-image: url(../img/chart/segawa.png);}
#cast_dt h1#harada span.castname { background-image: url(../img/chart/harada.png);}
#cast_dt h1#araki span.castname { background-image: url(../img/chart/araki.png?1);}
#cast_dt h1#makino span.castname { background-image: url(../img/chart/makino.png);}
#cast_dt h1#mamiya span.castname { background-image: url(../img/chart/mamiya.png);}

#cast_dt .prof {width:100%;}
#cast_dt .prof h2{box-shadow:5px 5px rgba(153,137,41,0.2); background-color:rgba(247,237,17,0.8); color:#004fa3; font-weight:bold; line-height:130%; font-size:110%; display:inline-block; padding:.2em .5em; margin:0 1em 0;}
#cast_dt .prof p{background:url(../img/chart/note.png); padding:1.2em 1.1em 0; margin:-.5em 0 0 0;}
#cast_dt .photo {background-repeat: no-repeat; background-position:center center; background-size: cover; border:4px solid #111; box-shadow:8px 8px rgba(153,137,41,0.2);}


#cast_dt #mainbox .ph_hiyori {background-image: url(../img/chart/takahata.jpg);}
#cast_dt #mainbox .ph_natsume {background-image: url(../img/chart/nishijima.jpg);}
#cast_dt #mainbox .ph_sakota {background-image: url(../img/chart/kakuno.jpg);}
#cast_dt #mainbox .ph_takahira {background-image: url(../img/chart/kohinata.jpg);}
#cast_dt #mainbox .ph_todo {background-image: url(../img/chart/noguchi.jpg);}
#cast_dt #mainbox .ph_date {background-image: url(../img/chart/kondo.jpg);}
#cast_dt #mainbox .ph_sugioka {background-image: url(../img/chart/nishida.jpg);}
#cast_dt #mainbox .ph_segawa {background-image: url(../img/chart/ryusei.jpg);}
#cast_dt #mainbox .ph_segawa2 {background-image: url(../img/chart/ryusei2.jpg);}
#cast_dt #mainbox .ph_harada {background-image: url(../img/chart/kimura.jpg);}
#cast_dt #mainbox .ph_araki {background-image: url(../img/chart/toda.jpg);}
#cast_dt #mainbox .ph_makino {background-image: url(../img/chart/mizuhashi.jpg);}
#cast_dt #mainbox .ph_mamiya {background-image: url(../img/chart/imai.jpg);}

#cast_dt {position:absolute;left:50%; z-index:5800 !important;}
#cast_dt .btn-w-close a{display:block; width:110px; height:35px; background:url(../img/chart/close.png) no-repeat; margin:.5em 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:.5em auto 0;
width:calc(96% - 320px);}
#cast_dt .photo {width:280px; height:360px; padding:0; margin:0 0 0 35px;}
#cast_dt .prof p{height:308px; font-size:96%; line-height:160%; border-left:8px solid rgba(153,137,41,0.2);}
#cast_dt .btn-w-close{position:absolute;right:10px; bottom:8px;}
#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%; border:3px solid #fff;}
#cast_dt #mainbox {margin:2px auto; padding:0 0 .5em;}
#cast_dt .btn-w-close a{margin:2em auto 0; width:100px; height:30px;}
#cast_dt h1 {width:100%; margin:0 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:0 .6em 0;}
#cast_dt .photo {width:60%; height:0; padding:75% 0 0; margin:0 auto; position: relative; border:3px solid #111;}
#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:0 auto; padding:4% 0;}
#cast_dt .prof p {font-size:100%; font-size:3.4vw; line-height:165%; padding:1.2em 1.2em .8em;}
}