html, body#chara {background:#000 !important;}
#chart h1#ttl{letter-spacing:.15em;}

/*chart*/
#chart #contents{padding:2em 0 2em; background: rgba(255,255,255,.8) url(./img/bg.png) repeat 0 0; background-size:25%;}
#chart .diagram{ position:relative; margin:0 auto 1em; background:url(./img/chart.jpg?250321) 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(126,0,255,.6);*/}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:207px; height:246px;}
#chart .diagram ul li.sz-m a img {width:185px; height:222px;}
#chart .diagram ul li.sz-s a img {width:163px; height:196px;}
#chart .diagram ul li.sz-c a img {width:42px; height:245px;}
#chart .diagram ul li.sz-ss a img {width:106px; height:78px;}

#chart ul li.komugi {left:371px; top:335px;}
#chart ul li.yoshiteru {left:684px; top:335px;}
#chart ul li.takashi {left:371px; top:665px;}
#chart ul li.haruo {left:113px; top:359px;}
#chart ul li.yukinobu {left:695px; top:667px;}
#chart ul li.toru {left:695px; top:947px;}
#chart ul li.yuki {left:371px; top:946px;}
#chart ul li.susumu {left:345px; top:59px;}
#chart ul li.rikiro {left:118px; top:972px;}
#chart ul li.tomoya {left:113px; top:690px;}
#chart ul li.tadashi {left:113px; top:1226px;}
#chart ul li.kyoko {left:113px; top:1506px;}
#chart ul li.takao {left:565px; top:1252px;}
#chart ul li.makoto {left:371px; top:1252px;}
#chart ul li.shizuka {left:122px; top:59px;}
#chart ul li.natsumi {left:536px; top:59px;}
#chart ul li.mamoru {left:333px; top:1531px;}
#chart ul li.arisa {left:728px; top:59px;}
#chart ul li.tatsuo {left:68px; top:1947px;}
#chart ul li.kota {left:245px; top:1947px;}
#chart ul li.kyoichiro {left:423px; top:1947px;}
#chart ul li.manoka {left:599px; top:1947px;}
#chart ul li.ikumi {left:776px; top:1947px;}
#chart ul li.higashikayama {left:52px; top:883px;}
#chart ul li.letter {left:833px; top:1852px;}

@media all and (min-width: 992px) {
#chart .diagram{ width:1000px; height:2233px; background-size:cover;}
}
@media all and (max-width:991px) {
#chart #contents{padding:0 0 0;}
#chart .diagram{margin:0 auto 2%; overflow:hidden; width:100%; height:0; padding:223.271889401% 0 0; background-size: cover;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}
}
@media all and (max-width: 767px) {
#chart #contents{background-size:50%;}
}

/*popup*/
#cast_dt {text-align:left;
background-color:#000;
background-image:url(./img/bg2.png),url(./img/paint.svg),url(./img/bg.jpg);
background-repeat:repeat,no-repeat,no-repeat;
background-position:0 0,left -55% top 28%,0 0;
background-size:50%,75%,cover;
}
#cast_dt #mainbox {width:100%; height:100%; margin:0 auto; padding:0; position:relative;}
#cast_dt h1 {padding:0; position:relative; z-index:11;}
#cast_dt h1 span.castname{ width:100%; height:65px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position:0 0; background-size: contain; background-color:rgba(255,255,255,0);}
#cast_dt h1#komugi span.castname {background-image: url(./img/komugi.png?1);}
#cast_dt h1#yoshiteru span.castname {background-image: url(./img/yoshiteru.png?1);}
#cast_dt h1#takashi span.castname {background-image: url(./img/takashi.png?1);}
#cast_dt h1#haruo span.castname {background-image: url(./img/haruo.png?1);}
#cast_dt h1#yukinobu span.castname {background-image: url(./img/yukinobu.png?1);}
#cast_dt h1#yuki span.castname {background-image: url(./img/yuki.png?1);}
#cast_dt h1#susumu span.castname {background-image: url(./img/susumu.png?1);}
#cast_dt h1#rikiro span.castname {background-image: url(./img/rikiro.png?1);}
#cast_dt h1#tomoya span.castname {background-image: url(./img/tomoya.png?1);}
#cast_dt h1#tadashi span.castname {background-image: url(./img/tadashi.png?1);}
#cast_dt h1#kyoko span.castname {background-image: url(./img/kyoko.png?1);}
#cast_dt h1#takao span.castname {background-image: url(./img/takao.png?1);}
#cast_dt h1#makoto span.castname {background-image: url(./img/makoto.png?1);}
#cast_dt h1#shizuka span.castname {background-image: url(./img/shizuka.png?1);}
#cast_dt h1#natsumi span.castname {background-image: url(./img/natsumi.png?1);}
#cast_dt h1#mamoru span.castname {background-image: url(./img/mamoru.png?1);}
#cast_dt h1#arisa span.castname {background-image: url(./img/arisa.png?1);}
#cast_dt h1#tatsuo span.castname {background-image: url(./img/tatsuo.png?1);}
#cast_dt h1#toru span.castname {background-image: url(./img/toru.png);}
#cast_dt h1#kota span.castname {background-image: url(./img/kota.png);}
#cast_dt h1#kyoichiro span.castname {background-image: url(./img/kyoichiro.png);}
#cast_dt h1#manoka span.castname {background-image: url(./img/manoka.png);}
#cast_dt h1#ikumi span.castname {background-image: url(./img/ikumi.png);}

#cast_dt .prof {width:100%;}
#cast_dt .prof p{color:#fff;}

#cast_dt .photo{background:url(../img/bg2_50.png) repeat 0 0; background-size:200%;}
#cast_dt .photo span{background-repeat: no-repeat; background-position:0 0; background-size: cover; z-index:1; display:block; width:100%; height:100%;}
#cast_dt .photo span.ph_komugi {background-image: url(./img/ph_komugi.png);}
#cast_dt .photo span.ph_yoshiteru {background-image: url(./img/ph_yoshiteru.png);}
#cast_dt .photo span.ph_takashi {background-image: url(./img/ph_takashi.png);}
#cast_dt .photo span.ph_haruo {background-image: url(./img/ph_haruo.png);}
#cast_dt .photo span.ph_yukinobu {background-image: url(./img/ph_yukinobu.png);}
#cast_dt .photo span.ph_yuki {background-image: url(./img/ph_yuki.png);}
#cast_dt .photo span.ph_susumu {background-image: url(./img/ph_susumu.png);}
#cast_dt .photo span.ph_rikiro {background-image: url(./img/ph_rikiro.png);}
#cast_dt .photo span.ph_tomoya {background-image: url(./img/ph_tomoya.png?1);}
#cast_dt .photo span.ph_tadashi {background-image: url(./img/ph_tadashi.png);}
#cast_dt .photo span.ph_kyoko {background-image: url(./img/ph_kyoko.png);}
#cast_dt .photo span.ph_takao {background-image: url(./img/ph_takao.png);}
#cast_dt .photo span.ph_makoto {background-image: url(./img/ph_makoto.png);}
#cast_dt .photo span.ph_shizuka {background-image: url(./img/ph_shizuka.png);}
#cast_dt .photo span.ph_natsumi {background-image: url(./img/ph_natsumi.png);}
#cast_dt .photo span.ph_mamoru {background-image: url(./img/ph_mamoru.png);}
#cast_dt .photo span.ph_arisa {background-image: url(./img/ph_arisa.png);}
#cast_dt .photo span.ph_tatsuo {background-image: url(./img/ph_tatsuo2.png);}
#cast_dt .photo span.ph_toru {background-image: url(./img/ph_toru.png);}
#cast_dt .photo span.ph_kota {background-image: url(./img/ph_kota.png);}
#cast_dt .photo span.ph_kyoichiro {background-image: url(./img/ph_kyoichiro.png);}
#cast_dt .photo span.ph_manoka {background-image: url(./img/ph_manoka.png);}
#cast_dt .photo span.ph_ikumi {background-image: url(./img/ph_ikumi.png);}

#cast_dt {position:absolute;left:50%; z-index:10001 !important;}
#cast_dt .btn-w-close a,#letter a{display:block; width:135px; height:40px; background: url(./img/close.svg) no-repeat center center; background-size: contain; margin:0 auto;}
#cast_dt .btn-w-close a,#letter a{cursor:pointer;}

@media all and (min-width: 768px) {
#cast_dt {width:800px; height:500px; margin-left:-400px;}
#cast_dt.letter {width:90%; height:auto; margin-left:-45%;}
#cast_dt #mainbox {margin:0 auto; padding:2.8em 0 0 0;}
#cast_dt h1 {margin:0 0 .8em auto;
width: -webkit-calc(100% - 300px) ;
width: calc(100% - 300px);
}
#cast_dt .prof{width:56%; margin:1.25em 0 0 auto; z-index:0;}
#cast_dt .prof p{word-break: break-all; font-size:105%; line-height:170%; padding:0 1.5em 1.8em 0; width:95%; margin-left:auto;}
#cast_dt p.ovtxt {padding:0 1.6em .5em 0; height:285px; overflow-x: hidden; overflow-y:scroll; border-right:none;}
.ovtxt::-webkit-scrollbar{width:2px; background:none;}
.ovtxt::-webkit-scrollbar-track {background:none;}
.ovtxt::-webkit-scrollbar-corner {display: none;}
.ovtxt::-webkit-scrollbar-thumb {background-color:rgba(126,0,255,.7); border-radius:20px;}
#cast_dt .photo {width:340px; height:416px; 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:2%; bottom:2.5%;}
#cast_dt.letter .btn-w-close{position:absolute;right:0; left:0; bottom:2.5%; margin:auto;}
#cast_dt a.backlist{position:absolute;right:2%; bottom:5%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin:0 0 0 -50% !important;
background-position:0 0,left 90% top 0,right bottom;
background-size:100%,120%,120%;
}
#cast_dt #mainbox {margin:0 auto; padding:3% 0 0;}

#cast_dt h1 {width:92%; margin:0 0 5%; padding:2% 0 0 2%; position: relative;}
#cast_dt h1 span.castname{width:100%; height:0; padding:14% 0 0 0; background-size: contain; margin:0;}
#cast_dt .photo {width:76%; margin:3% auto 0; position: relative; border:5px solid rgba(126,0,255,.5); box-shadow:12px 12px rgba(126,0,255,.3); padding:2% 0 0; background-size:100%;}
#cast_dt .photo span{position: relative; height:0; padding:122% 0 0; background-size:100%;}
#cast_dt .photo span img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .prof {width:100%; margin:0 auto; padding:5% 0 5%; }
#cast_dt .prof p {font-size:100%; font-size:3.8vw; line-height:160%; padding:0; width:88%; margin:0 0 0 7%;}
#cast_dt .btn-w-close a{width:30%; height:0; padding:9% 0 0; margin:5% auto 5%;}
}

/*higashikayama*/
#cast_dt #mainbox.higashikayama {margin:0 auto; padding:14% 0 0;}
#cast_dt #mainbox.higashikayama h1 {margin:0 auto; font-weight:900; padding:0 0 4%; color:#fff; font-size:300%; text-align: center; width:100%; letter-spacing:.1em;}
#cast_dt #mainbox.higashikayama p {margin:0 auto; font-weight:700; line-height:160%; padding:0 4%; color:#fff; font-size:135%; text-align: center; }
ul#member{width:96%; margin:0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
ul#member li{position: relative; padding:21% 0 0; margin:0 .5% 2%;
width: -webkit-calc(100% / 6 - 1%) ;
width: calc(100% / 6 - 1%);
}
ul#member li a{display:block; position:absolute; top:0; left:0; padding:0; width:100%; height:100%; background-repeat: no-repeat; background-position:0 0; background-size:cover;} 
ul#member li a img{position:absolute;left:0;top:0; width:100%; height:100%;}

@media all and (max-width: 767px) {
#cast_dt #mainbox.higashikayama {padding:12% 0;}
#cast_dt #mainbox.higashikayama h1{font-size:8vw; padding:0 0 5%; }
#cast_dt #mainbox.higashikayama p{font-size:5vw;}
ul#member{width:90%;} 
ul#member li{padding:41% 0 0; margin:0 1% 2%;
width: -webkit-calc(100% / 3 - 2%) ;
width: calc(100% / 3 - 2%);
}
}
@media all and (min-width: 768px) {
.nobr{display: none;	} 
}
.alt {position:absolute;top:-5000px;left:-9999px;}

.letterbox{display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding:0 0 2.5%}  
.letterbox figure{width:46%; padding:61.1288888889% 0 0; background: url(./img/letter1.jpg) no-repeat 0 0; background-size:cover; position:relative; z-index:999999999 !important; margin:0 1% 5%;}
.letterbox figure:nth-child(2){background-image: url(./img/letter2.jpg);}
.letterbox figure img{position:absolute;left:0;top:0; width:100%; height:100%;}

@media all and (max-width: 767px) {
.letterbox{width:82%; height:78vh !important; overflow-x: hidden; overflow-y:scroll; margin:0 auto;}
.letterbox::-webkit-scrollbar{width:2px; background:none;}
.letterbox::-webkit-scrollbar-track {background:none;}
.letterbox::-webkit-scrollbar-corner {display: none;}
.letterbox::-webkit-scrollbar-thumb {background-color:rgba(126,0,255,.7); border-radius:20px;}
.letterbox figure{width:100%; padding:130% 0 0; margin:2%;}
}