/*chart*/
#chart .diagram{ position:relative; margin:0 auto 1em; background:url(../chart/img/chart.jpg?7) 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(25,25,102,0.8);*/ border-radius:100px 100px 0 0;}
#chart .diagram ul li.sz-m a{border-radius:90px 90px 0 0;}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:232px; height:276px;}
#chart .diagram ul li.sz-m a img {width:200px; height:238px;}

#chart ul li.makoto {left:325px; top:410px;}
#chart ul li.kotaro {left:636px; top:200px;}
#chart ul li.yuki {left:8px; top:200px;}
#chart ul li.ritsu {left:325px; top:33px;}
#chart ul li.kae {left:21px; top:522px;}
#chart ul li.taro {left:347px; top:849px;}
#chart ul li.chigusa {left:347px; top:1129px;}
#chart ul li.mio {left:658px; top:806px;}
#chart ul li.anri {left:21px; top:849px;}
#chart ul li.rui {left:21px; top:1129px;}
#chart ul li.konno {left:658px; top:522px;}

@media all and (min-width: 768px) {
#chart .diagram{ width:920px; height:1371px; background-size:cover;}
}
@media all and (max-width: 767px) {
#chart .diagram,#chart #contents.chart1 .diagram{margin:0 auto 2%; overflow:hidden; width:96%; height:0; padding:143.04% 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:10vw 10vw 0 0;}
#chart .diagram ul li.sz-m a{border-radius:9vw 9vw 0 0;}
}


/*popup*/
#cast_dt {text-align:left; background-color:#e86da5;
background: linear-gradient(90deg,#ef8bb6 0%, #ef8bb6 5%, #e86da5 5%, #e86da5 100%);
}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0; position: relative;
background-image:url(./img/title.svg),url(../img/top/kira2.svg);
background-repeat:no-repeat,no-repeat;
background-position:2px 0,8% 8%;
background-size:auto 100%,60px;
}
#cast_dt h1 span.castname{ width:99%; height:80px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position:right 0; background-size: contain; background-color:rgba(25,25,102,0);}
#cast_dt h1#makoto span.castname {background-image: url(./img/makoto.png?1);}
#cast_dt h1#kotaro span.castname {background-image: url(./img/kotaro.png);}
#cast_dt h1#yuki span.castname {background-image: url(./img/yuki.png);}
#cast_dt h1#ritsu span.castname {background-image: url(./img/ritsu.png);}
#cast_dt h1#kae span.castname {background-image: url(./img/kae.png);}
#cast_dt h1#taro span.castname {background-image: url(./img/taro.png);}
#cast_dt h1#chigusa span.castname {background-image: url(./img/chigusa.png);}
#cast_dt h1#mio span.castname {background-image: url(./img/mio.png);}
#cast_dt h1#anri span.castname {background-image: url(./img/anri.png);}
#cast_dt h1#rui span.castname {background-image: url(./img/rui.png);}
#cast_dt h1#konno span.castname {background-image: url(./img/ai.png);}

#cast_dt .prof {width:100%;}
#cast_dt .photo span{background-repeat: no-repeat; background-position:center top; background-size: cover; z-index:1; display:block; width:100%; height:100%;}
#cast_dt .photo span.ph_makoto {background-image: url(./img/ph_makoto.png);}
#cast_dt .photo span.ph_kotaro {background-image: url(./img/ph_kotaro.png);}
#cast_dt .photo span.ph_yuki {background-image: url(./img/ph_yuki.png);}
#cast_dt .photo span.ph_ritsu {background-image: url(./img/ph_ritsu.png);}
#cast_dt .photo span.ph_kae {background-image: url(./img/ph_kae.png);}
#cast_dt .photo span.ph_taro {background-image: url(./img/ph_taro.png);}
#cast_dt .photo span.ph_chigusa {background-image: url(./img/ph_chigusa.png);}
#cast_dt .photo span.ph_mio {background-image: url(./img/ph_mio.png);}
#cast_dt .photo span.ph_anri {background-image: url(./img/ph_anri.png);}
#cast_dt .photo span.ph_rui {background-image: url(./img/ph_rui.png);}
#cast_dt .photo span.ph_ai {background-image: url(./img/ph_ai.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:500px; margin-left:-350px;}
#cast_dt #mainbox {margin:0 auto; height:500px;
background-image:url(./img/title.svg),url(../img/top/kira2.svg);
background-position:2px center,8% 8%;
background-size:auto 96%,60px;
}
#cast_dt #mainbox::after {
  content:'';
  width:75%;
  height:96%;
  bottom:0;
  right:0;
  position: absolute;
  background-color:#fffde8;
border-radius:80px 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 #66bf97; 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:110%; line-height:160%; padding:1.7em 1.5em 1.5em 0; width:90%; 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:370px; height:450px; position:absolute; left:0; bottom:0; z-index:1;}
#cast_dt .photo span.ph_kotaro {background-position:right 14px top 0;}
#cast_dt .photo span.ph_ai {background-position:right 30px top 20px;}
#cast_dt .photo span.ph_rui {background-position:right 18px top 0;}
/*#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%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%; margin-top:0 !important;
background: linear-gradient(90deg,#ef8bb6 0%, #ef8bb6 8%, #e86da5 8%, #e86da5 100%);
}
#cast_dt #mainbox {margin:0 auto; padding:3% 0 0;
background-image:url(./img/title.svg),url(../img/top/kira.svg);
background-position:0 1%,right 5% top 18%;
background-size:7%,15%;
}

#cast_dt h1 {width:96%; margin:0 0 0 auto; padding:2% 0 3% 0; position: relative; background-color:#fffde8; border-radius:5vw 0 0 5vw;}
#cast_dt h1::before {
  content:'';
  width:96%;
  position: absolute;
border-top:2px dotted #66bf97; 
  bottom:7%;
  right:0;
}
#cast_dt h1 span.castname{width:96%; height:0; padding:15.8% 0 0 0; background-size: contain; margin:0 0 0 auto;}
#cast_dt .photo {width:78%; margin:0 auto; position: relative;}
#cast_dt .photo::before {
  content:'';
  width:88%;
  height:80%;
  bottom:0;
  left:0; right:0;
  margin:auto;
  position: absolute;
  border:1px solid #fdf58c;
  border-bottom:none;
border-radius:30vw 30vw 0 0;
z-index:-1; 
}
#cast_dt .photo span{position: relative; height:0; padding:129.115853659% 0 0;}
#cast_dt .photo span img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .photo span.ph_ai,#cast_dt .photo span.ph_rui {background-size: contain; background-position:center bottom;}

#cast_dt .prof {width:96%; margin:0 0 0; padding:5% 0 5%; background-color:#fffde8; 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/close.svg) no-repeat 0 0; background-size: contain; width:32%; height:0; padding:8% 0 0; margin:5% auto 5%;}
}
.alt {position:absolute;top:-5000px;left:-9999px;}