/*chart*/
#chart h1#ttl{background-image: url(../img/chart.svg); background-size:19%;}
#chart h2{
  background: url(../img/chart.svg) no-repeat 4% bottom;
  background-size:16%;
}

#chart #contents{padding:2em 0;}
#chart .diagram{ position:relative; margin:1.5em auto; background:url(../chart/img/chart6.png) no-repeat 0 0;}
#chart #contents.chart2 .diagram{background:url(../chart/img/chart3.png?3) no-repeat 0 0;}
#chart #contents.chart3 .diagram{background:url(../chart/img/chart5.png) 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(197,23,32,0.6) 0%,rgba(197,23,32,0) 100%); border-radius:28px;}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:242px; height:284px;}
#chart .diagram ul li.sz-m a img {width:218px; height:255px;}
#chart .diagram ul li.sz-s a img {width:195px; height:230px;}
#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.ishiko {left:61px; top:97px;}
#chart ul li.haneo {left:426px; top:97px;}
#chart ul li.wataro {left:85px; top:455px;}
#chart ul li.oba {left:426px; top:455px;}
#chart ul li.shiozaki {left:96px; top:770px;}
#chart ul li.taisuke {left:725px; top:150px;}
#chart ul li.yuuno {left:725px; top:455px;}

.clickiinfo{font-size:120%; font-weight:600; text-align:right; padding:0 3% 1% 0 !important;}

@media all and (min-width: 768px) {
#chart .diagram,#chart #contents.chart2 .diagram,#chart #contents.chart3 .diagram{ width:920px; height:1039px; background-size:cover;}
}
@media all and (max-width: 767px) {
#chart h1#ttl{
background-position:12% bottom;
background-size:26%;
}
#chart h2{
background-position:3% bottom;
background-size:26%;
}
#chart #contents{padding:5% 0;}
#chart .diagram,#chart #contents.chart2 .diagram,#chart #contents.chart3 .diagram{margin:1% auto 2%; overflow:hidden; width:94%; height:0; padding:106.190074906% 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:3vw;}
.clickiinfo{font-size:2.6vw; text-align:right; padding:2% 3% 0 0 !important;}
}


/*popup*/
#cast_dt {text-align:left; background-color:#e06361;}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0; position: relative;}
#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:right 0; background-size: contain;}
#cast_dt h1#ishiko span.castname {background-image: url(./img/ishiko.png);}
#cast_dt h1#haneo span.castname {background-image: url(./img/haneo.png);}
#cast_dt h1#oba span.castname {background-image: url(./img/oba.png);}
#cast_dt h1#shiozaki span.castname {background-image: url(./img/shiozaki.png);}
#cast_dt h1#wataro span.castname {background-image: url(./img/wataro.png);}
#cast_dt h1#taisuke span.castname {background-image: url(./img/taisuke.png);}
#cast_dt h1#yuuno span.castname {background-image: url(./img/yuuno.png);}

#cast_dt .prof {width:100%;}
#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 span.ph_ishiko {
background-image:url(./img/arimura.png),url(./img/ishiko.svg);
background-repeat:no-repeat,no-repeat;
background-position:center bottom,left 0 top 30%;
background-size:cover,14%;}
#cast_dt .photo span.ph_haneo {
background-image:url(./img/nakamura.png),url(./img/haneo.svg);
background-repeat:no-repeat,no-repeat;
background-position:center bottom,left 0 top 30%;
background-size:cover,14%;}

#cast_dt .photo span.ph_oba {background-image: url(./img/akaso.png);}
#cast_dt .photo span.ph_oba2 {background-image: url(./img/akaso2.png);}
#cast_dt .photo span.ph_shiozaki {background-image: url(./img/oda.png);}
#cast_dt .photo span.ph_wataro {background-image: url(./img/sada.png);}
#cast_dt .photo span.ph_taisuke {background-image: url(./img/ogata.png);}
#cast_dt .photo span.ph_yuuno {background-image: url(./img/megumi.png);}
#cast_dt .prof p span.f85{line-height:150% !important; display:inline-block; padding:.5em 0 0;}

#cast_dt {position:absolute;left:50%; z-index:10001 !important;}
#cast_dt .btn-w-close a{display:block; width:160px; height:40px; background:url(./img/close.svg) no-repeat 0 0; 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; height:520px;}
#cast_dt #mainbox::before {
  content:'';
  width:60%;
  height:23%;
  top:0;
  left:0;
  position: absolute;
  background: url(../img/stripe.png) repeat 0 0;
  background-size:15px;
z-index:-2; 
}
#cast_dt #mainbox::after {
  content:'';
  width:75%;
  height:96%;
  bottom:0;
  right:0;
  position: absolute;
  background-color:#f4e4d5;
border-radius:36px 0 0 0;
z-index:-1; 
}
#cast_dt h1 {width:70%; margin-left:auto; padding:1.2em 0 .35em;}
#cast_dt h1 {border-bottom:4px dotted #c51720; z-index:1; }
#cast_dt .prof{width:60%; margin-left:auto; position: relative;  z-index:2;}
#cast_dt .prof p{word-break: break-all; font-size:100%; line-height:160%; padding:1.7em 1.5em 1.5em 0; width:82%; margin-left:auto; position: relative;}
#cast_dt p.ovtxt {margin-top:1.5em; padding:.2em 1.6em .2em 0; height:280px; overflow-x: hidden; overflow-y:scroll; border-right:none;}
.ovtxt::-webkit-scrollbar{width:3px; background:none;}
.ovtxt::-webkit-scrollbar-track {background:none;}
.ovtxt::-webkit-scrollbar-corner {display: none;}
.ovtxt::-webkit-scrollbar-thumb {background:#c51720; border-radius:20px;}
#cast_dt .photo {width:350px; height:450px; position:absolute; left:0; bottom:0; z-index:1;}
#cast_dt .photo::before {
  content:'';
  width:100%;
  height:80%;
  bottom:0;
  left:0;
  position: absolute;
  background-color:#e06361;
border-radius:0 36px 0 0;
z-index:-1; 
}
#cast_dt .btn-w-close{position:absolute;right:3%; bottom:3%; z-index:10;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; margin-top:0 !important;}
#cast_dt #mainbox {margin:0 auto; padding:3% 0 0;}
#cast_dt #mainbox::before {
  content:'';
  width:60%;
  height:15%;
  top:0;
  left:0;
  position: absolute;
  background: url(../img/stripe.png) repeat 0 0;
  background-size:4%;
z-index:-2; 
}
#cast_dt #mainbox::after {
  content:'';
  width:95%;
  height:75%;
  top:1%;
  right:0;
  position: absolute;
background: url(../img/bg.png) repeat 0 0;
background-size:25%;
border-radius:5vw 0 0 0;
z-index:-2; 
}

#cast_dt h1 {width:92%; margin:1.5% 0 0 auto; padding:0 0 3% 0; position: relative;}
#cast_dt h1::before {
  content:'';
  width:100%;
  position: absolute;
border-top:4px dotted #c51720; 
  bottom:0;
  right:0;
}
#cast_dt h1#ishiko::before,#cast_dt h1#oba::before {width:93%;}
#cast_dt h1#wataro::before {width:86%;}
#cast_dt h1 span.castname{height:0; padding:15.8% 0 0 0; background-size: contain;}
#cast_dt .photo {width:78%; margin:0; position: relative;}
#cast_dt .photo::before {
  content:'';
  width:100%;
  height:85%;
  bottom:0;
  left:0;
  position: absolute;
  background-color:#e06361;
border-radius:0 5vw 0 0;
z-index:-1; 
}
#cast_dt .photo span{position: relative; height:0; padding:129.115853659% 0 0;}
#cast_dt .photo span.ph_ishiko {
background-position:center bottom,left 0 top 40%;
background-size:cover,14%;
}
#cast_dt .photo span.ph_haneo {
background-position:center bottom,left 0 top 40%;
background-size:cover,14%;
}
#cast_dt .photo span img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .prof {width:96%; margin:0 0 0; padding:5% 0 5%; background-color:#f4e4d5; border-radius:0 5vw 5vw 0;}
#cast_dt .prof p {font-size:100%; font-size:3.8vw; line-height:165%; padding:0; width:88%; margin:0 0 0 7%;}
#cast_dt .btn-w-close a{background:url(./img/close2.svg) no-repeat 0 0; background-size: contain; width:32%; height:0; padding:8% 0 0; margin:5% auto 4%;}
}
.alt {position:absolute;top:-5000px;left:-9999px;}
