#chart .diagram{ position:relative; margin:.5em 0 2em 0; background:url(../img/chart/chart.png?5) no-repeat 0 0;}
#chart .diagram.member{background:url(../img/chart/member.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(-140deg, rgba(254,141,1,0.6) 0%, rgba(255,166,29,0.6) 55%, rgba(255,211,78,0.6) 100%);}
#chart .diagram ul li a img {display:block;}
#chart .diagram ul li.sz-l a img {width:220px; height:270px;}
#chart .diagram ul li.sz-m a img {width:190px; height:240px;}
#chart .diagram ul li.sz-s a img {width:150px; height:200px;}
#chart .diagram ul li.sz-a a img {width:159px; height:68px;}
#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.mikoto {left:114px; top:291px;}
#chart ul li.sara {left:431px; top:291px;}
#chart ul li.ren {left:72px; top:627px;}
#chart ul li.ai {left:334px; top:627px;}
#chart ul li.rizu {left:688px; top:627px;}
#chart ul li.aoba {left:620px; top:938px;}
#chart ul li.kougami {left:227px; top:10px;}
#chart ul li.isobe {left:400px; top:10px;}
#chart ul li.ueda {left:570px; top:10px;}
#chart ul li.abe {left:743px; top:10px;}
#chart ul li.takagi {left:768px; top:392px;}
#chart ul li.harada {left:112px; top:938px;}
#chart ul li.endo {left:344px; top:938px;}
#chart ul li.member {left:38px; top:173px;}

#chart .castlist h3{width:403px;height:35px; margin:3% 0 1%; background-repeat: no-repeat; background-position:0 0;}
#chart .castlist p{margin:0 0 1em auto; padding:.5em 0 0; line-height:180%;}
#chart .prof{width:60%; /*background-color:rgba(255,255,255,0.7);*/ margin:8% 0 0 4%;}
#chart .photo {background-repeat: no-repeat; background-position:center center; background-size: cover; box-shadow:12px 12px rgba(158,95,11,0.2); background-color:rgba(255,255,255,0.25); position:relative; z-index:1;}

#chart h3.mikoto {background-image: url(../img/chart/mikoto.png);}
#chart .photo.fukushi {background-image: url(../img/chart/fukushi.jpg);}
#chart h3.sara {background-image: url(../img/chart/sara.png);}
#chart .photo.nanao {background-image: url(../img/chart/nanao.jpg);}
#chart h3.ren {background-image: url(../img/chart/ren.png);}
#chart .photo.kiritani {background-image: url(../img/chart/kiritani.jpg);}
#chart h3.ai {background-image: url(../img/chart/ai.png);}
#chart .photo.yokohama {background-image: url(../img/chart/yokohama.jpg);}
#chart h3.rizu {background-image: url(../img/chart/rizu.png);}
#chart .photo.aso {background-image: url(../img/chart/aso.jpg?2);}
#chart h3.aoba {background-image: url(../img/chart/aoba.png);}
#chart .photo.sato {background-image: url(../img/chart/sato.jpg);}
#chart h3.kougami {background-image: url(../img/chart/kougami.png);}
#chart .photo.miura {background-image: url(../img/chart/miura.jpg);}
#chart h3.isobe {background-image: url(../img/chart/isobe.png);}
#chart .photo.nishimura {background-image: url(../img/chart/nishimura.jpg);}
#chart h3.ueda {background-image: url(../img/chart/ueda.png);}
#chart .photo.ito {background-image: url(../img/chart/ito.jpg);}
#chart h3.abe {background-image: url(../img/chart/abe.png);}
#chart .photo.sekimizu {background-image: url(../img/chart/sekimizu.jpg);}
#chart h3.takagi {background-image: url(../img/chart/takagi.png);}
#chart .photo.nishio {background-image: url(../img/chart/nishio.jpg);}
#chart h3.endo {background-image: url(../img/chart/endo.png);}
#chart .photo.suzuki {background-image: url(../img/chart/suzuki.jpg);}
#chart h3.harada {background-image: url(../img/chart/harada.png);}
#chart .photo.hashimoto {background-image: url(../img/chart/hashimoto.jpg);}

#chart .diagram.member ul{display:none;}

@media all and (min-width: 768px) {
#chart .diagram{ width:940px; height:1414px;}
#chart .diagram.member{ width:941px; height:1056px;}
#chart .photo{display: inline-block; vertical-align:top; width:240px; height:300px;}
#chart .prof{display: inline-block;}
#chart .castlist p{min-height:230px;}
#chart .castlist {width:92%; margin:2em 0 5em auto; text-align:left; padding:0 0 3%; position:relative;
background-image:linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),linear-gradient(-140deg, rgba(254,108,1,0.6) 0%, rgba(255,166,29,0.6) 65%, rgba(255,211,78,0.6) 100%);
background-repeat:no-repeat,no-repeat;
background-size:85% 80%,94% 90%;
background-position:right 25% top 70%,right bottom;}
#chart .castlist:before{
content: "";
width:15%;
height:50%;
background-color:rgba(253,214,77,0.8);
position: absolute;
left:-12px;
top:-12px;
}
}

@media all and (max-width: 767px) {
#chart .castlist{width:100%; padding:0 0 .5em; margin:0 auto 15%;}
#chart .castlist {
background-image:linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),linear-gradient(-140deg, rgba(254,108,1,0.6) 0%, rgba(255,166,29,0.6) 65%, rgba(255,211,78,0.6) 100%);
background-repeat:no-repeat,no-repeat;
background-size:90% 60%,100% 80%;
background-position:center bottom 8%,right bottom;}
#chart .photo{margin:0 auto 3%; width:58%; height:0; padding:72.5% 0 0; position: relative;}
#chart .photo img{position:absolute;left:0;top:0; width:100%; height:100%;}
#chart .prof{width:80%; margin:0 auto; padding:2% 0;}
#chart .castlist h3{width:100%;height:0; margin:2% 0 1%; padding:8.5% 0 0; background-size:contain;}
#chart .castlist p{padding:.5em 0; font-size:3.4vw;}

#chart .diagram{margin:0; overflow:hidden; width:100%; height:0; padding:150.425531915% 0 0; background-size: cover;}
#chart .diagram.member{width:100%; height:0; padding:112.221041445% 0 0; background-size: cover;}
#chart .diagram ul {position: absolute; left:0; top:0; width:100%; height:100%;}
}