/*chart*/
#chart #contents{padding:2em 0;}
nav ul#tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
nav ul#tab li{width:40%; margin:0 .5em 2em; }
nav ul#tab li a{display: block; letter-spacing:.05em; text-decoration: none; padding:1em 0; color:#fff; font-size:150%; font-weight:bold; text-align:center; transition: .5s ;}
nav ul#tab li.tab_spd a{ color:#063784; border:2px solid #063784; color:#063784;}
nav ul#tab li.tab_spd a:hover{background-color:#063784; color:#fff;}
nav ul#tab li.tab_orgd a{background-color:#ca0915; color:#fff; border:2px solid #ca0915;}
#chart #contents.chart_sp nav ul#tab li.tab_spd a{background-color:#063784; color:#fff;}
#chart #contents.chart_sp nav ul#tab li.tab_orgd a{background:none !important; color:#ca0915;}
#chart #contents.chart_sp nav ul#tab li.tab_orgd a:hover{background:#ca0915 !important; color:#fff;}

#chart .diagram{ position:relative; margin:.5em auto 1em; background:url(../chart/img/chart.png?2) no-repeat 0 0;}
#chart .diagram2{ position:relative; margin:.5em auto 1em; background:url(../chart/img/chart_sp.png?2) no-repeat 0 0;}
#chart .diagram ul,#chart .diagram ul li,#chart .diagram2 ul,#chart .diagram2 ul li {position: absolute;}
#chart .diagram ul li a,#chart .diagram2 ul li a{ display: block; text-decoration: none; overflow: hidden; text-indent: 100%; white-space: nowrap;
background:linear-gradient(to top, rgba(16,42,101,0.6) 0%,rgba(16,42,101,0) 100%);}
#chart .diagram ul li a img,#chart .diagram2 ul li a img {display:block;}
#chart .diagram ul li.sz-m a img {width:154px; height:186px;}
#chart .diagram2 ul li.sz-m a img {width:136px; height:167px;}

#chart .diagram ul li a,#chart .diagram2 ul li a {
filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
transition: 0.3s;}
#chart .diagram ul li a:hover,#chart .diagram2 ul li a:hover { filter: alpha(opacity=100); -moz-opacity:100; opacity:100;}

#chart .diagram ul li.kota {left:496px; top:141px;}
#chart .diagram ul li.nao {left:268px; top:141px;}
#chart .diagram ul li.hina {left:478px; top:428px;}
#chart .diagram ul li.natsume {left:287px; top:427px;}
#chart .diagram ul li.motoichi {left:142px; top:708px;}
#chart .diagram ul li.jiro {left:325px; top:708px;}
#chart .diagram ul li.juan {left:507px; top:708px;}
#chart .diagram ul li.suzuka {left:29px; top:1015px;}
#chart .diagram ul li.chiaki {left:325px; top:1015px;}
#chart .diagram ul li.haruto {left:507px; top:1015px;}
#chart .diagram ul li.mariko {left:29px; top:141px;}
#chart .diagram ul li.shusei {left:29px; top:427px;}
#chart .diagram ul li.azusa {left:736px; top:142px;}
#chart .diagram ul li.mikio {left:736px; top:427px;}
#chart .diagram ul li.suguru {left:736px; top:708px;}

#chart .diagram2 ul li.kota {left:530px; top:121px;}
#chart .diagram2 ul li.nao {left:341px; top:121px;}
#chart .diagram2 ul li.hina {left:531px; top:373px;}
#chart .diagram2 ul li.natsume {left:341px; top:373px;}
#chart .diagram2 ul li.motoichi {left:246px; top:620px;}
#chart .diagram2 ul li.jiro {left:402px; top:620px;}
#chart .diagram2 ul li.juan {left:557px; top:620px;}
#chart .diagram2 ul li.chiaki {left:397px; top:890px;}
#chart .diagram2 ul li.haruto {left:557px; top:890px;}
#chart .diagram2 ul li.azusa {left:758px; top:121px;}
#chart .diagram2 ul li.mikio {left:758px; top:373px;}
#chart .diagram2 ul li.suguru {left:758px; top:620px;}
#chart .diagram2 ul li.aoto {left:46px; top:121px;}
#chart .diagram2 ul li.kamata {left:46px; top:373px;}
#chart .diagram2 ul li.shusei {left:46px; top:620px;}

p.notice{text-align:center; padding:1.8em 0 .5em; font-size:110%;} 

@media all and (min-width: 768px) {
#chart .diagram{ width:920px; height:1225px; background-size:cover;}
#chart .diagram2{ width:920px; height:1078px; background-size:cover;}
}
@media all and (max-width: 767px) {
#chart #contents{padding:4% 0;}
#chart .diagram{margin:0 auto .5em; overflow:hidden; width:96%; height:0; padding:127.776% 0 0; background-size: cover;}
#chart .diagram2{margin:0 auto .5em; overflow:hidden; width:96%; height:0; padding:112.460236887% 0 0; background-size: cover;}
#chart .diagram ul,#chart .diagram2 ul {position: absolute; left:0; top:0; width:100%; height:100%;}
nav ul#tab li{width:45%; margin:0 1% 5%;}
nav ul#tab li a{font-size:5vw; padding:8% 0;}
p.notice{padding:4% 0 1%; font-size:3vw;} 
}

/*popup*/
#cast_dt {text-align:left;  background: url(../img/bg2.png); border:2px solid #ca0915; position: relative;}
#cast_dt:before{
content:'';
position: absolute;
border-bottom:400px solid rgba(16,42,101,0.06);
border-left:400px solid transparent;
bottom:0;
right:0;
z-index:-1;
}
#cast_dt #mainbox {width:100%; height:auto; margin:0 auto; padding:0;}

#cast_dt h1 {width:92%; margin:0 auto;border-bottom:2px solid #ca0915; padding:1em .1em .3em; color:#ca0915; font-size:200%; line-height:140%;
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 600;
font-style: normal;}
#cast_dt h1 span.charaname{letter-spacing:-.1em; text-align:center;}
#cast_dt h1 span.castname{font-size:80%; border:1px solid #ca0915; padding:.1em .2em; line-height:100%; display:inline-block; margin:0 0 0 .7em;}
#cast_dt h1#juan span.charaname{letter-spacing:-.2em;}
#cast_dt h1#juan span.castname{letter-spacing:-.1em;}
/*#cast_dt h1 span.castname{ width:500px; height:82px; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; background-size:contain;}*/

#cast_dt .prof {width:100%;}
#cast_dt .prof p{padding:.5em;}
#cast_dt .photo {background-repeat: no-repeat; background-position:center center; background-size: cover;  border:3px solid #fff; box-shadow:10px 10px #ca0915;}

#cast_dt #mainbox .ph_kota {background-image: url(./img/ph_kota.jpg);}
#cast_dt #mainbox .ph_nao {background-image: url(./img/ph_nao.jpg);}
#cast_dt #mainbox .ph_hina {background-image: url(./img/ph_hina.jpg?1);}
#cast_dt #mainbox .ph_natsume {background-image: url(./img/ph_natsume.jpg);}
#cast_dt #mainbox .ph_motoichi {background-image: url(./img/ph_motoichi.jpg);}
#cast_dt #mainbox .ph_jiro {background-image: url(./img/ph_jiro.jpg);}
#cast_dt #mainbox .ph_juan {background-image: url(./img/ph_juan.jpg);}

#cast_dt #mainbox .ph_suzuka {background-image: url(./img/ph_suzuka.jpg);}
#cast_dt #mainbox .ph_chiaki {background-image: url(./img/ph_chiaki.jpg);}
#cast_dt #mainbox .ph_haruto {background-image: url(./img/ph_haruto.jpg);}

#cast_dt #mainbox .ph_mariko {background-image: url(./img/ph_mariko.jpg);}
#cast_dt #mainbox .ph_shusei {background-image: url(./img/ph_shusei.jpg);}

#cast_dt #mainbox .ph_azusa {background-image: url(./img/ph_azusa.jpg);}
#cast_dt #mainbox .ph_mikio {background-image: url(./img/ph_mikio.jpg);}
#cast_dt #mainbox .ph_suguru {background-image: url(./img/ph_suguru.jpg);}

#cast_dt #mainbox .ph_aoto {background-image: url(./img/ph_aoto.jpg);}
#cast_dt #mainbox .ph_kamata {background-image: url(./img/ph_kamata.jpg);}

#cast_dt {position:absolute;left:50%; z-index:5800 !important;}
#cast_dt .btn-w-close a{ width:130px; height:41px; background:url(./img/close.png) no-repeat; background-size:contain; margin:0 auto; cursor:pointer; display:block;}


[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.3em;
    letter-spacing:0;
    text-align:center;
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 600;
font-style: normal;
}

@media all and (min-width: 768px) {
#cast_dt {width:750px; height:545px; margin-left:-350px;}
#cast_dt #mainbox {margin:4% auto 0;}
#cast_dt .prof{width:49.5%; margin-left:auto; position:relative; padding:2% 4% 0 0;
/*width:calc(98% - 330px);*/}

#cast_dt .prof p{font-size:105%; line-height:170%; word-break: break-all;}
#cast_dt .photo {width:300px; height:354px; position:absolute; left:5.5%;}
#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 .btn-w-close{position:absolute;right:4%; bottom:5%;}
}

@media all and (max-width: 767px) {
#cast_dt {width:100%; margin-left:-50%;}
#cast_dt:before{
border-bottom:90vw solid rgba(16,42,101,0.06);
border-left:90vw solid transparent;
}
#cast_dt #mainbox {margin:0 auto; padding:0; width:98%;}
#cast_dt h1 {width:95%; margin:0 auto; padding:6% 0 1.5% .5%; font-size:6vw;}
#cast_dt h1#juan{font-size:5.7vw;}
#cast_dt h1#suguru span.charaname,#cast_dt h1#azusa span.charaname{letter-spacing:0;}
#cast_dt .photo {width:65%; height:0; padding:76.6% 0 0; margin:4% auto 5%; position: relative;}
#cast_dt .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#cast_dt .photo .engsub{font-size:8vw; left:-8%;}
#cast_dt .prof {width:100%; margin:1em auto; padding: 0 5%;}
#cast_dt .prof p {font-size:100%; font-size:3.8vw; line-height:165%; padding:0 0 .5em;
line-break: strict;
overflow-wrap: break-word;
word-wrap: break-word;}
#cast_dt .btn-w-close a{width:22%; height:0; padding:7% 0 0; margin:4% auto;}
}
.alt {position:absolute;top:-5000px;left:-9999px;}