/*chart*/
#chart #contents{padding:1em 0;}
#chart .diagram{ position:relative; margin:1em auto 2em; background:url(./img/chart.png?9) no-repeat 0 0;}
#chart .diagram ul,#chart .diagram ul li {position: absolute;}
#chart .diagram ul li a{ display: block; text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap;
/*background-color:rgba(255,25,102,0.5);*/}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:182px; height:218px;}
#chart .diagram ul li.sz-m a img {width:160px; height:192px;}
#chart ul li.natsume {left:286px; top:22px;}
#chart ul li.hibiki {left:27px; top:22px;}
#chart ul li.shiho {left:529px; top:22px;}
#chart ul li.yukihiko {left:739px; top:48px;}
#chart ul li.umi {left:739px; top:352px;}
#chart ul li.jiro {left:0; top:326px;}
#chart ul li.daiki {left:274px; top:352px;}
#chart ul li.satoshi {left:499px; top:352px;}
#chart ul li.ruri {left:274px; top:596px;}
#chart ul li.masuo {left:499px; top:596px;}
#chart ul li.ren {left:118px; top:837px;}
#chart ul li.amane {left:310px; top:837px;}
#chart ul li.nana {left:499px; top:837px;}
#chart ul li.issei {left:267px; top:1097px;}
#chart ul li.koichi {left:468px; top:1097px;}
#chart ul li.tomiko {left:66px; top:1097px;}
#chart ul li.kochiraku {left:669px; top:1097px;}
#chart ul li.emiko {left:20px; top:596px;}
#chart ul li.taro {left:739px; top:596px;}

@media all and (min-width: 768px) {
#chart .diagram{ width:900px; height:1289px; background-size:cover;}
}
@media all and (max-width: 767px) {
#chart #contents{padding:3% 0;}
#chart .diagram{margin:.5em auto 4%; overflow:hidden; width:95%; height:0; padding:136.0875% 0 0; background-size: cover;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}
}


/*popup*/
#cast_dt {text-align:left; background-color:rgba(250,250,250,0.9);
background-image:radial-gradient(ellipse at center, rgba(255,207,0,0) 0%,rgba(255,207,0,0) 51%,rgba(255,207,0,0.5) 100%),url(../img/bg.jpg);
background-repeat:no-repeat,repeat;
background-position:0 0,0 0;
background-size:auto,500px;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0;}
#cast_dt #mainbox:before{
content: "";
width:18%;
height:30%;
position: absolute;
right:0;
top:0;
background: url(./img/ribbon.svg) no-repeat right top;
background-size:100%;
z-index:0;
}

#cast_dt h1 {background:url(../chart/img/score.svg) no-repeat 0 bottom; background-size:105%; padding:0 0 .25em .4em;}
#cast_dt h1 span.castname{width:513px; height:90px; display: block; text-indent:100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; background-size: contain; background-position:right bottom; margin:0;}
#cast_dt h1#natsume span.castname {background-image: url(./img/natsume.png);}
#cast_dt h1#hibiki span.castname {background-image: url(./img/hibiki.png?1);}
#cast_dt h1#shiho span.castname {background-image: url(./img/shiho.png?1);}
#cast_dt h1#umi span.castname {background-image: url(./img/umi.png?1);}
#cast_dt h1#jiro span.castname {background-image: url(./img/komura.png);}
#cast_dt h1#daiki span.castname {background-image: url(./img/mori.png);}
#cast_dt h1#satoshi span.castname {background-image: url(./img/furuya.png);}
#cast_dt h1#ruri span.castname {background-image: url(./img/ruri.png);}
#cast_dt h1#masuo span.castname {background-image: url(./img/kondo.png);}
#cast_dt h1#ren span.castname {background-image: url(./img/hano.png);}
#cast_dt h1#amane span.castname {background-image: url(./img/amane.png);}
#cast_dt h1#nana span.castname {background-image: url(./img/nana.png);}
#cast_dt h1#issei span.castname {background-image: url(./img/issei.png);}
#cast_dt h1#koichi span.castname {background-image: url(./img/kaburagi.png);}
#cast_dt h1#tomiko span.castname {background-image: url(./img/tomiko.png);}
#cast_dt h1#kochiraku span.castname {background-image: url(./img/kochiraku.png);}
#cast_dt h1#emiko span.castname {background-image: url(./img/emiko.png);}
#cast_dt h1#taro span.castname {background-image: url(./img/taro.png);}
#cast_dt h1#yukihiko span.castname {background-image: url(./img/yukihiko.png);}

#cast_dt .prof {width:100%;
font-family: vdl-v7gothic, sans-serif;
font-weight: 600;
font-style: normal;
}
#cast_dt .photo {background-repeat: no-repeat; background-position:left bottom; background-size: contain;}

#cast_dt #mainbox .ph_natsume {background-image: url(./img/nishijima.png);}
#cast_dt #mainbox .ph_hibiki {background-image: url(./img/ashida.png);}
#cast_dt #mainbox .ph_shiho {background-image: url(./img/ishida.png);}
#cast_dt #mainbox .ph_umi {background-image: url(./img/onishi.png);}
#cast_dt #mainbox .ph_jiro {background-image: url(./img/nishida.png);}
#cast_dt #mainbox .ph_daiki {background-image: url(./img/miyazawa.png);}
#cast_dt #mainbox .ph_satoshi {background-image: url(./img/tamaki.png);}
#cast_dt #mainbox .ph_ruri {background-image: url(./img/araki.png);}
#cast_dt #mainbox .ph_masuo {background-image: url(./img/tsuda.png);}
#cast_dt #mainbox .ph_ren {background-image: url(./img/sano.png);}
#cast_dt #mainbox .ph_amane {background-image: url(./img/touma.png);}
#cast_dt #mainbox .ph_nana {background-image: url(./img/kumada.png);}
#cast_dt #mainbox .ph_issei {background-image: url(./img/fuchigami.png);}
#cast_dt #mainbox .ph_koichi{background-image: url(./img/mitsushima.png);}
#cast_dt #mainbox .ph_tomiko{background-image: url(./img/shiraishi.png?1);}
#cast_dt #mainbox .ph_kochiraku{background-image: url(./img/ph_kochiraku.png);}
#cast_dt #mainbox .ph_emiko{background-image: url(./img/takeuchi.png);}
#cast_dt #mainbox .ph_taro{background-image: url(./img/fuwa.png);}
#cast_dt #mainbox .ph_yukihiko{background-image: url(./img/emoto.png);}

#cast_dt {position:absolute;left:50%; z-index:10001 !important;}
#cast_dt .btn-w-close a{display:block; width:160px; height:45px; background: url(./img/close.svg) no-repeat; background-size: contain; /*transform: rotate(5deg);*/ margin:0 auto;}
#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 #mainbox:after{
content: "";
width:10px;
height:100%;
position: absolute;
left:0;
top:0;
background-size:100%;
z-index:13;
}
#cast_dt h1 {width:97%; margin-left:auto; margin-top:.4em;}
#cast_dt .prof{width:55%; margin-left:auto; margin-top:1em; position: relative; padding:0 1.6em 0 0;}
#cast_dt .prof p{font-size:105%; line-height:160%; padding:1.2em; width:100%; margin-left:auto; position: relative; background-color:rgba(255,251,242,0.3); outline :1px solid rgba(127,82,45,.3); outline-offset : -5px; z-index:12;}
#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;}
#cast_dt .photo {width:450px; height:425px; position:absolute; left:0; bottom:0; z-index:11; background-position:left -30px bottom 0;}
#cast_dt .ph_emiko {background-position:left 0 bottom 0;}
#cast_dt #mainbox .ph_natsume {background-position:left -40px bottom 0;}
#cast_dt #mainbox .ph_jiro {background-position:left 0 bottom 0;}
#cast_dt .btn-w-close{position:absolute;right:3%; bottom:3%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; margin-top:0 !important;
background-size:auto,100%;
}
#cast_dt #mainbox {margin:0 auto; padding:0 0 .5em;}
#cast_dt #mainbox:before{
width:22%;
height:20%;
}
#cast_dt #mainbox.zi-1:before{
z-index:-1;
}
#cast_dt h1 {width:100%; margin:0 auto; padding:2% 0 1% 2%; background-size:130%;}
#cast_dt h1 span.castname{width:98%; height:0; padding:18% 0 0 0; background-size: contain;}
#cast_dt h1#kochiraku span.castname{width:92%; height:0; padding:18% 0 0 0; background-size: contain;}
#cast_dt .photo {width:95%; height:0; padding:95% 0 0; background-size:cover; margin:3% auto 0; position: relative;}
#cast_dt .photo:before{
  content: '';
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height:86%;
  z-index:-1;
  background-color:rgba(255,251,242,0.3);
}
#cast_dt .photo:after{
  content: '';
  position: absolute;
  bottom:0;
  left:1.5%;
  width:96.5%;
  height:84%;
  z-index:-1;
  border:1px solid rgba(127,82,45,.4); border-bottom:none;
}
#cast_dt .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .prof {width:95%; margin:0 auto 0; padding:1% 5%; position: relative; background-color:rgba(255,251,242,0.3);}
#cast_dt .prof:before,#cast_dt .prof:after{
  content: '';
  position: absolute;
  left:0; right:0; margin:auto;
  width:100%;
  height:8px;
  z-index:1;
}
#cast_dt .prof:before{
background: url(../img/line_top.png) repeat-x 0 0; background-size:contain;
  top:0;
}
#cast_dt .prof:after{
background: url(../img/line_btm.png) repeat-x 0 0; background-size:contain;
  bottom:0;
}
#cast_dt .prof p {font-size:100%; font-size:4vw; line-height:150%; padding:5% 0 5%; width:95%; margin:0 auto;}
#cast_dt .btn-w-close a{width:35%; height:0; padding:10% 0 0; margin:3.5% auto 6%;}
}
.alt {position:absolute;top:-5000px;left:-9999px;}