/*chart*/
#chart #contents{padding:1em 0;}
#chart .diagram{ position:relative; margin:1em auto; background:url(../chart/img/chart.png?5) 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,255,102,0.5);*/}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:235px; height:256px;}
#chart .diagram ul li.sz-m a img {width:200px; height:220px;}
#chart ul li.sayako {left:355px; top:165px;}
#chart ul li.taku {left:30px; top:165px;}
#chart ul li.kiina {left:81px; top:520px;}
#chart ul li.marin {left:672px; top:625px;}
#chart ul li.ryunosuke {left:368px; top:778px;}
#chart ul li.sumika {left:368px; top:520px;}
#chart ul li.kanta {left:81px; top:778px;}
#chart ul li.mako {left:672px; top:22px;}
#chart ul li.hinata {left:670px; top:295px;}

@media all and (min-width: 768px) {
#chart .diagram{ width:920px; height:1097px; background-size:cover;}
}
@media all and (max-width: 767px) {
#chart #contents{padding:3% 0;}
#chart .diagram{margin:0 auto .5em; overflow:hidden; width:95%; height:0; padding:113.313888889% 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:url(./img/myharu.svg),url(./img/dotc.svg),url(../img/top/cir1.svg),url(./img/bg.png);
background-repeat:no-repeat,no-repeat,no-repeat,repeat;
background-position:0 0,50% 0,right -80px bottom -80px,0 0;
background-size:auto 80%,250px,350px,500px;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0; }

#cast_dt h1 {background:none;}
#cast_dt h1 span.castname{ width:100%; height:140px; 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;}
#cast_dt h1#sayako span.castname {background-image: url(./img/sayako.png);}
#cast_dt h1#taku span.castname {background-image: url(./img/taku.png);}
#cast_dt h1#kiina span.castname {background-image: url(./img/kiina.png);}
#cast_dt h1#marin span.castname {background-image: url(./img/marin.png);}
#cast_dt h1#ryunosuke span.castname {background-image: url(./img/ryunosuke.png);}
#cast_dt h1#sumika span.castname {background-image: url(./img/sumika.png);}
#cast_dt h1#kanta span.castname {background-image: url(./img/kanta.png);}
#cast_dt h1#mako span.castname {background-image: url(./img/mako.png);}
#cast_dt h1#hinata span.castname {background-image: url(./img/hinata.png);}

#cast_dt .prof {width:100%;
font-family: "zen-maru-gothic", sans-serif;
font-weight: 600;
font-style: normal;
}
#cast_dt .photo {background-repeat: no-repeat; background-position:left bottom; background-size: cover;}

#cast_dt #mainbox .ph_sayako {background-image: url(./img/ph_sayako.png?2);}
#cast_dt #mainbox .ph_taku {background-image: url(./img/ph_taku.png);}
#cast_dt #mainbox .ph_kiina {background-image: url(./img/ph_kiina.png);}
#cast_dt #mainbox .ph_marin {background-image: url(./img/ph_marin.png);}
#cast_dt #mainbox .ph_ryunosuke {background-image: url(./img/ph_ryunosuke.png);}
#cast_dt #mainbox .ph_sumika {background-image: url(./img/ph_sumika.png);}
#cast_dt #mainbox .ph_kanta {background-image: url(./img/ph_kanta.png);}
#cast_dt #mainbox .ph_mako {background-image: url(./img/ph_mako.png);}
#cast_dt #mainbox .ph_hinata {background-image: url(./img/ph_hinata.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:500px; margin-left:-350px;}
#cast_dt #mainbox {margin:0 auto;}
#cast_dt h1 {width:62%; margin-left:auto; margin-top:.5em;}
#cast_dt h1 span.castname{ width:100%;}
#cast_dt .prof{width:60%; margin-left:auto; margin-top:1.8em; position: relative;}
#cast_dt .prof:before{
content: "";
width:60%;
height:10px;
position: absolute;
left: 0;
bottom: 0;
background:url(../img/top/wave.svg) repeat-x 0 0;
background-size:contain;
}
#cast_dt .prof p{font-size:105%; line-height:160%; padding:1.8em 1.8em 1.8em 0; width:82%; margin-left:auto; position: relative;}
#cast_dt .prof p:before{
content: "";
width:60%;
height:10px;
position: absolute;
right: 0;
top: 0;
background:url(../img/top/wave.svg) repeat-x 0 0;
background-size:contain;
}
#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:460px; height:467px; position:absolute; left:0; bottom:0; z-index:11;}
#cast_dt .btn-w-close{position:absolute;right:4%; bottom:4%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; margin-top:0 !important;
background-position:0 50%,5% 5%,right -40% bottom -20%,0 0;
background-size:auto 50%,45%,70%,100%;
}
#cast_dt #mainbox {margin:0 auto; padding:0 0 .5em;}
#cast_dt h1 {width:100%; margin:0 auto; padding:2% 0 0 0;}
#cast_dt h1 span.castname{height:0; padding:28% 0 0 0; background-size: contain;}
#cast_dt .photo {width:75%; height:0; padding:95% 0 0; margin:-1em auto 4%; position: relative; border-radius:4vw;}
#cast_dt .photo:before{
  content: '';
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height:85%;
  z-index:-1;
  background-color:#c5f1ff;
  background-color:rgba(197,241,255,0.7); border-radius:4vw;
}
#cast_dt .photo:after{
  content: '';
  position: absolute;
  bottom:-1.5%;
  right:-2%;
  width:100%;
  height:85%;
  z-index:-1;
  border:1px solid #000; border-radius:4vw;
}
#cast_dt .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .prof {width:100%; margin:6% auto 0; padding:0 5%; position: relative;}
#cast_dt .prof p {font-size:100%; font-size:4vw; line-height:150%; padding:5% 0 5%; width:95%; margin:0 auto;}
#cast_dt .prof:before,#cast_dt .prof:after{
content: "";
width:60%;
height:2.3vw;
position: absolute;
background:url(../img/top/wave.svg) repeat-x 0 0;
background-size:contain;
}
#cast_dt .prof:before{
right: 0;
top: 0;
}
#cast_dt .prof:after{
left: 0;
bottom: 0;
}
#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;}