/*chart*/
#chart #contents{padding:2em 0;}
#chart .diagram{ position:relative; margin:1em auto; background:url(../chart/img/chart.png?1109) 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:linear-gradient(to top, rgba(255,255,102,0.5) 0%,rgba(255,255,102,0) 100%);*/
border-radius: 63% 37% 66% 34% / 48% 65% 35% 52%;}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:190px; height:210px;}
#chart .diagram ul li.sz-m a img {width:160px; height:170px;}
#chart .diagram ul li.sz-s a img {width:140px; height:140px;}
#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.akiha {left:230px; top:305px;}
#chart ul li.shu {left:495px; top:305px;}
#chart ul li.miharu {left:550px; top:57px;}
#chart ul li.asahi {left:740px; top:57px;}
#chart ul li.yuito {left:305px; top:57px;}
#chart ul li.hatsue {left:92px; top:57px;}
#chart ul li.satoshi {left:27px; top:350px;}
#chart ul li.akashi {left:68px; top:558px;}
#chart ul li.miyuki {left:245px; top:558px;}
#chart ul li.ayano {left:65px; top:732px;}
#chart ul li.hikari {left:243px; top:732px;}
#chart ul li.yasuhiro {left:745px; top:345px;}
#chart ul li.shoko {left:515px; top:628px;}
#chart ul li.riku {left:700px; top:575px;}

@media all and (min-width: 768px) {
#chart .diagram{ width:920px; height:1031px; 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:106.462065332% 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(251,228,205,0.9);
border:5px solid rgba(255,255,255,0.6);
background-image:url(./img/bdr.png),url(./img/bg2.png),url(./img/bg.png);
background-repeat:no-repeat,no-repeat,repeat;
background-position:0 0,right -60px bottom -40px,0 0;
background-size:35%,95%,70%;}
#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:80px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; background-size: contain;}
#cast_dt h1#akiha span.castname {background-image: url(./img/akiha.png);}
#cast_dt h1#shu span.castname {background-image: url(./img/shu.png);}
#cast_dt h1#yuito span.castname {background-image: url(./img/yuito.png);}
#cast_dt h1#miharu span.castname {background-image: url(./img/miharu.png);}
#cast_dt h1#asahi span.castname {background-image: url(./img/asahi.png);}
#cast_dt h1#hatsue span.castname {background-image: url(./img/hatsue.png);}
#cast_dt h1#yasuhiro span.castname {background-image: url(./img/yasuhiro.png);}
#cast_dt h1#shoko span.castname {background-image: url(./img/shoko.png);}
#cast_dt h1#riku span.castname {background-image: url(./img/riku.png);}
#cast_dt h1#satoshi span.castname {background-image: url(./img/satoshi.png);}
#cast_dt h1#akashi span.castname {background-image: url(./img/akashi.png);}
#cast_dt h1#miyuki span.castname {background-image: url(./img/miyuki.png);}
#cast_dt h1#ayano span.castname {background-image: url(./img/ayano.png);}
#cast_dt h1#hikari span.castname {background-image: url(./img/hikari.png);}

#cast_dt .prof {width:100%;}
#cast_dt .photo {background-repeat: no-repeat; background-position:center bottom; background-size: cover;}

#cast_dt #mainbox .ph_akiha {background-image: url(./img/ph_akiha.png);}
#cast_dt #mainbox .ph_shu {background-image: url(./img/ph_shu.png);}
#cast_dt #mainbox .ph_yuito {background-image: url(./img/ph_yuito.png);}
#cast_dt #mainbox .ph_miharu {background-image: url(./img/ph_miharu.png);}
#cast_dt #mainbox .ph_asahi {background-image: url(./img/ph_asahi.png);}
#cast_dt #mainbox .ph_hatsue {background-image: url(./img/ph_hatsue.png);}
#cast_dt #mainbox .ph_yasuhiro {background-image: url(./img/ph_yasuhiro.png);}
#cast_dt #mainbox .ph_shoko {background-image: url(./img/ph_shoko.png);}
#cast_dt #mainbox .ph_riku {background-image: url(./img/ph_riku.png);}
#cast_dt #mainbox .ph_satoshi {background-image: url(./img/ph_satoshi.png);}
#cast_dt #mainbox .ph_akashi {background-image: url(./img/ph_akashi.png);}
#cast_dt #mainbox .ph_miyuki {background-image: url(./img/ph_miyuki.png);}
#cast_dt #mainbox .ph_ayano {background-image: url(./img/ph_ayano.png);}
#cast_dt #mainbox .ph_hikari {background-image: url(./img/ph_hikari.png);}

#cast_dt {position:absolute;left:50%; z-index:10001 !important;}
#cast_dt .btn-w-close a{display:block; width:140px; height:47px; background:url(./img/close.png) 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:1.4em;}
#cast_dt h1 span.castname{ width:96%;}
#cast_dt .prof{width:60%; margin-left:auto; margin-top:1.8em; position: relative;}
#cast_dt .prof:before{
content: "";
width:50%;
height:1px;
background-color:#000;
position: absolute;
left: 0;
bottom: 0;
}
#cast_dt .prof p{font-size:105%; line-height:160%; padding:3em 2em 3em 0; width:86%; margin-left:auto; position: relative;}
#cast_dt .prof p:before{
content: "";
width:50%;
height:1px;
background-color:#000;
position: absolute;
right: 0;
top: 0;
}
#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:320px; height:392px; position:absolute; left:3.5%; bottom:8%; z-index:11;}
#cast_dt .btn-w-close{position:absolute;right:4%; bottom:8%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; margin-top:0 !important;
background-position:0 0,right -60px bottom 25%,0 0;
background-size:50%,120%,100%;}
#cast_dt #mainbox {margin:2px auto; padding:0 0 .5em;}
#cast_dt h1 {width:92%; margin:0 auto 3%; padding:3% 0 0 0;}
#cast_dt h1 span.castname{height:0; padding:18% 0 0 0; background-size: contain;}
#cast_dt .photo {width:67%; height:0; padding:82.1424148607% 0 0; margin:0 auto 4%; position: relative;}
#cast_dt .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .prof {width:98%; margin:1em auto 0; padding: 0 5%;}
#cast_dt .prof p {font-size:100%; font-size:3.8vw; line-height:165%; padding:0 0 .5em;}
#cast_dt .btn-w-close a{width:27%; height:0; padding:9% 0 0; margin:3.5% auto 6%;}
}
.alt {position:absolute;top:-5000px;left:-9999px;}
