/*chart*/
#chart #contents{padding:2em 0;}
#chart .diagram{ position:relative; margin:.5em auto; background:url(../chart/img/chart.png?6) 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; border-radius:8px;
background:linear-gradient(320deg, rgba(13,123,166,0.55) 0%,rgba(13,123,166,0) 65%);}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:191px; height:228px;}
#chart .diagram ul li.sz-m a img {width:156px; height:186px;}
#chart .diagram ul li.sz-s a img {width:128px; height:152px;}
#chart .diagram ul li a {
filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
transition: 0.3s;}
#chart .diagram ul li a:hover { filter: alpha(opacity=100); -moz-opacity:100; opacity:100;}
#chart ul li.yui {left:198px; top:298px;}
#chart ul li.naoki {left:478px; top:298px;}
#chart ul li.yuzuru {left:274px; top:600px;}
#chart ul li.masaru {left:179px; top:24px;}
#chart ul li.rio {left:480px; top:24px;}
#chart ul li.suzuka {left:705px; top:24px;}
#chart ul li.mikiko {left:28px; top:58px;}
#chart ul li.hayoung {left:3px; top:642px;}
#chart ul li.eisuke {left:705px; top:340px;}
#chart ul li.koichi {left:520px; top:642px;}
#chart ul li.nozomi {left:544px; top:857px;}
#chart ul li.kanae {left:273px; top:908px;}
#chart ul li.higuchi {left:3px; top:908px;}
#chart ul li.chiyo {left:728px; top:642px;}
#chart ul li.kinari {left:745px; top:908px;}

@media all and (min-width: 768px) {
#chart .diagram,#chart #contents.ep3 .diagram{ width:930px; height:1094px; background-size:cover;}
}
@media all and (max-width: 767px) {
#chart #contents{padding:3% 0;}
#chart .diagram,#chart #contents.ep3 .diagram{margin:1% auto 3%; overflow:hidden; width:95%; height:0; padding:111.718244804% 0 0; background-size: cover;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}
#chart .diagram ul li a{border-radius:1vw;}
}


/*popup*/
#cast_dt {text-align:left; background-color:#214364;
background-image:url(../img/bg3.png),url(../img/bg2.jpg);
background-repeat:repeat,no-repeat;
background-position:0 0,0 0;
background-size:200px,110%;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0; }

#cast_dt h1 {
background-image:linear-gradient(300deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.7) 100%); 
background-repeat:no-repeat;
background-size:70% 60%;
background-position:left bottom;
padding:.5% 0 0 2%;}
#cast_dt h1 span.castname{width:100%; height:120px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; background-size: contain;}
#cast_dt h1#yui span.castname {background-image: url(./img/yui.png);}
#cast_dt h1#naoki span.castname {background-image: url(./img/naoki.png);}
#cast_dt h1#yuzuru span.castname {background-image: url(./img/yuzuru.png);}
#cast_dt h1#masaru span.castname {background-image: url(./img/masaru.png);}
#cast_dt h1#mikiko span.castname {background-image: url(./img/mikiko.png);}
#cast_dt h1#hayoung span.castname {background-image: url(./img/hayoung.png);}
#cast_dt h1#eisuke span.castname {background-image: url(./img/eisuke.png);}
#cast_dt h1#koichi span.castname {background-image: url(./img/koichi.png);}
#cast_dt h1#nozomi span.castname {background-image: url(./img/nozomi.png);}
#cast_dt h1#kanae span.castname {background-image: url(./img/kanae.png);}
#cast_dt h1#higuchi span.castname {background-image: url(./img/higuchi.png);}
#cast_dt h1#suzuka span.castname {background-image: url(./img/suzuka.png);}
#cast_dt h1#rio span.castname {background-image: url(./img/rio.png);}
#cast_dt h1#chiyo span.castname {background-image: url(./img/chiyo.png);}
#cast_dt h1#kinari span.castname {background-image: url(./img/kinari.png);}

#cast_dt .prof{width:56.7%; margin-left:auto; position: relative;
background-image:linear-gradient(120deg, rgba(80,125,160,0.3) 0%,rgba(37,58,75,0.6) 100%); 
background-repeat:no-repeat;
background-size:100% 100%;
background-position:right top;
}
#cast_dt .prof p{font-weight:600; word-break: break-all; font-size:120%; line-height:160%; padding:2.8em 2em; width:90%; margin:5% 0 0 auto; position: relative; color:#fff;}
#cast_dt .photo span{background-repeat: no-repeat; background-position:center bottom; background-size: cover; z-index:1; display:block; width:100%; height:100%;}
#cast_dt .photo::before {
  content:'';
  width:100%;
  height:80%;
  bottom:0;
  left:0;
  position: absolute;
  background-image:linear-gradient(365deg, rgba(13,123,166,0.8) 0%,rgba(255,255,255,0.2) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 90%);
z-index:-1; 
}

#cast_dt #mainbox span.ph_yui {background-image: url(./img/inoue.png);}
#cast_dt #mainbox span.ph_naoki {background-image: url(./img/sato.png);}
#cast_dt #mainbox span.ph_yuzuru {background-image: url(./img/matsuyama.png);}
#cast_dt #mainbox span.ph_masaru {background-image: url(./img/shunputei.png);}
#cast_dt #mainbox span.ph_mikiko {background-image: url(./img/sakura.png);}
#cast_dt #mainbox span.ph_hayoung {background-image: url(./img/shim.png);}
#cast_dt #mainbox span.ph_eisuke {background-image: url(./img/arakawa.png);}
#cast_dt #mainbox span.ph_koichi {background-image: url(./img/shoji.png);}
#cast_dt #mainbox span.ph_nozomi {background-image: url(./img/hoshi.png);}
#cast_dt #mainbox span.ph_kanae {background-image: url(./img/hiraiwa.png);}
#cast_dt #mainbox span.ph_higuchi {background-image: url(./img/itakura.png);}
#cast_dt #mainbox span.ph_suzuka {background-image: url(./img/kondo.png);}
#cast_dt #mainbox span.ph_rio {background-image: url(./img/karina.png);}
#cast_dt #mainbox span.ph_chiyo {background-image: url(./img/kanno.png?1);}
#cast_dt #mainbox span.ph_kinari {background-image: url(./img/nagashima.png);}

#cast_dt {position:absolute;left:50%; z-index:10001 !important;}
#cast_dt .btn-w-close a{display:block; width:160px; height:30px; 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; /*border:1px solid rgba(255,255,255,0.3);*/}
#cast_dt #mainbox {margin:0 auto;}
#cast_dt h1 {width:100%;}
#cast_dt .photo {width:367px; height:418px; position:absolute; left:0; bottom:0; z-index:1;}
#cast_dt .btn-w-close{position:absolute;right:2%; bottom:4%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; margin-top:0 !important;
background-position:0 0,center center;
background-size:100%,cover;}
#cast_dt #mainbox {margin:0 auto; padding:1.5% 0 0;}
#cast_dt h1 {width:100%; margin:0 auto 2%; padding:0 0 .5% 1.5%;}
#cast_dt h1 span.castname{height:0; padding:21% 0 0 0; background-size: contain;}
#cast_dt .photo {width:75%; margin:0 auto; position: relative; border-radius:2.5vw;}
#cast_dt .photo span{position: relative; height:0; padding:112% 0 0; border-radius:2.5vw;}
#cast_dt .photo::before{border-radius:2.5vw; height:90%;
background-image:linear-gradient(350deg, rgba(13,123,166,0.8) 0%,rgba(255,255,255,0.2) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
box-shadow:20px 20px 20px rgba(255,255,255,0.3);}
#cast_dt .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .prof {width:100%; margin:3% auto 8%; padding:0 0;}
#cast_dt .prof p {font-size:100%; font-size:4vw; line-height:170%; padding:6.5% 6%; width:100%; margin:0 auto;}
#cast_dt .btn-w-close a{width:40%; height:0; padding:8.5% 0 0; margin:5% auto 5%;}
}
.alt {position:absolute;top:-5000px;left:-9999px;}
