/* chart */
.chart #mainArea{padding-bottom:20px;}
.chart .pBox img.cover{position:absolute;top:0;left:0;width:900px;height:1300px;}
.chart .pBox {position:relative;text-align:left;background:url(../img/chart/chart.png) center top no-repeat;}
.chart .pBox  ul {list-style-type:none;}
.chart .pBox  ul li {position:absolute;}
.chart .pBox  ul li a {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
.chart .pBox  ul li a {display:block;text-decoration:none;}
.chart .pBox  ul li a:hover {background:#000;opacity:0.1;}
.chart .pBox  ul li.btn1 a{width:210px;height:260px;}
.chart .pBox  ul li.btn2 a,.btn19 a{width:180px;height:220px;}
.chart .pBox  ul li.btn3 a,.btn11 a,.btn20 a,.btn21 a,.btn22 a,.btn24 a,.btn25 a{width:140px;height:175px;}
.chart .pBox  ul li.btn4 a,.btn5 a,.btn6 a,.btn7 a,.btn8 a,.btn9 a,.btn10 a,.btn12 a
,.btn13 a,.btn14 a,.btn15 a,.btn16 a,.btn17 a,.btn18 a,.btn23 a{width:100px;height:130px;}
.chart .pBox  ul li.btn1{top:530px;left:345px;}
.chart .pBox  ul li.btn2{top:30px;left:670px;}
.chart .pBox  ul li.btn3{top:290px;left:518px;}
.chart .pBox  ul li.btn4{top:1000px;left:340px;}
.chart .pBox  ul li.btn5{top:1000px;left:750px;}
.chart .pBox  ul li.btn6{top:1140px;left:750px;}
.chart .pBox  ul li.btn7{top:1000px;left:477px;}
.chart .pBox  ul li.btn8{top:1000px;left:613px;}
.chart .pBox  ul li.btn9{top:1140px;left:477px;}
.chart .pBox  ul li.btn10{top:1140px;left:613px;}
.chart .pBox  ul li.btn11{top:740px;left:640px;}
.chart .pBox  ul li.btn12{top:1140px;left:340px;}
.chart .pBox  ul li.btn13{top:520px;left:50px;}
.chart .pBox  ul li.btn14{top:660px;left:50px;}
.chart .pBox  ul li.btn15{top:800px;left:50px;}
.chart .pBox  ul li.btn16{top:60px;left:264px;}
.chart .pBox  ul li.btn17{top:60px;left:536px;}
.chart .pBox  ul li.btn18{top:60px;left:400px;}
.chart .pBox  ul li.btn19{top:30px;left:50px;}
.chart .pBox  ul li.btn20{top:290px;left:243px;}
.chart .pBox  ul li.btn21{top:290px;left:730px;}
.chart .pBox  ul li.btn22{top:540px;left:640px;}
.chart .pBox  ul li.btn23{top:660px;left:205px;}
.chart .pBox  ul li.btn24{top:805px;left:382px;}
.chart .pBox  ul li.btn25{top:290px;left:30px;}

@media all and (min-width: 768px) {
.chart .pBox {width:900px;height:1300px;margin:20px auto 0;}
.chart .txt{font-size:90%;margin:20px auto 0;text-align:center;}
}
@media all and (max-width: 767px) {
.chart .pBox  {width:95%;height:0;padding-top:133%;margin:0 auto;background-size: contain;}
.chart .pBox  img {position: absolute;left:0;top:0;width:100%;height:100%;}
.chart .txt{font-size:70%;margin:1em auto 0;text-align:center;}
}

/*///////////////// character ////////////////*/
.charaBox h1{font-weight:bold;color:#fff;}
.charaBox h1{text-align:center;padding:0.5em 0;background:url(../img/bg_red.png) #990000;}
.charaBox h1 span{display:block;}
.bx-wop {z-index:9999; !important }
.bx-wop {text-align:left; position:absolute;left:50%;}
.chara .btn-w-close a{display:block; background:url(../img/chart/close.png) no-repeat;background-size: cover;}
.chara .btn-w-close a{cursor:pointer;}
  .cast1 .charaBox .photo{background:url(../img/chart/cast1.jpg) no-repeat;background-size: cover;}
  .cast2 .charaBox .photo{background:url(../img/chart/cast2.jpg) no-repeat;background-size: cover;}
  .cast3 .charaBox .photo{background:url(../img/chart/cast3.jpg) no-repeat;background-size: cover;}
  .cast4 .charaBox .photo{background:url(../img/chart/cast4.jpg) no-repeat;background-size: cover;}
  .cast5 .charaBox .photo{background:url(../img/chart/cast5.jpg) no-repeat;background-size: cover;}
  .cast6 .charaBox .photo{background:url(../img/chart/cast6.jpg) no-repeat;background-size: cover;}
  .cast7 .charaBox .photo{background:url(../img/chart/cast7.jpg) no-repeat;background-size: cover;}
  .cast8 .charaBox .photo{background:url(../img/chart/cast8.jpg) no-repeat;background-size: cover;}
  .cast9 .charaBox .photo{background:url(../img/chart/cast9.jpg) no-repeat;background-size: cover;}
  .cast10 .charaBox .photo{background:url(../img/chart/cast10.jpg) no-repeat;background-size: cover;}
  .cast11 .charaBox .photo{background:url(../img/chart/cast11.jpg) no-repeat;background-size: cover;}
  .cast12 .charaBox .photo{background:url(../img/chart/cast12.jpg) no-repeat;background-size: cover;}
  .cast13 .charaBox .photo{background:url(../img/chart/cast13.jpg) no-repeat;background-size: cover;}
  .cast14 .charaBox .photo{background:url(../img/chart/cast14.jpg) no-repeat;background-size: cover;}
  .cast15 .charaBox .photo{background:url(../img/chart/cast15.jpg) no-repeat;background-size: cover;}
  .cast16 .charaBox .photo{background:url(../img/chart/cast16.jpg) no-repeat;background-size: cover;}
  .cast17 .charaBox .photo{background:url(../img/chart/cast17.jpg) no-repeat;background-size: cover;}
  .cast18 .charaBox .photo{background:url(../img/chart/cast18.jpg) no-repeat;background-size: cover;}
  .cast19 .charaBox .photo{background:url(../img/chart/cast19.jpg) no-repeat;background-size: cover;}
  .cast20 .charaBox .photo{background:url(../img/chart/cast20.jpg) no-repeat;background-size: cover;}
  .cast21 .charaBox .photo{background:url(../img/chart/cast21.jpg) no-repeat;background-size: cover;}
  .cast22 .charaBox .photo{background:url(../img/chart/cast22.jpg) no-repeat;background-size: cover;}
  .cast23 .charaBox .photo{background:url(../img/chart/cast23.jpg) no-repeat;background-size: cover;}
  .cast24 .charaBox .photo{background:url(../img/chart/cast24.jpg) no-repeat;background-size: cover;}
  .cast25 .charaBox .photo{background:url(../img/chart/cast25.jpg) no-repeat;background-size: cover;}

@media all and (min-width: 768px) {
.bx-wop {background:url(../img/bg_black.png) #a27e23;order:solid 1px #000;border-radius:10px;}
.chara .btn-w-close a{position:absolute;bottom:20px;right:45%;width:40px; height:40px;}
  .bx-wop {width:580px;margin-left:-300px;}
.charaBox{width:560px; margin:10px auto;padding-bottom:20px;overflow:hidden;background:#f1ebdf;border-radius:5px;}
.charaBox h1{font-size:140%;line-height:140%;}
.charaBox .photo{ display:block; width:225px;height:300px;margin:10px auto;}
.charaBox .txt{width:500px;  font-size:110%;line-height:200%;padding:0 10px;margin:0 auto 50px;}
.charaBox .name{font-size:150%;margin-bottom:0.2em;color:#f1ebdf;}
}

@media all and (max-width: 767px) {
.chara .bx-w-chara {background:url(../img/bg_black.png) #000;order:solid 1px #000;border-radius:10px;}
.chara .btn-w-close a{position:absolute;bottom:1.2em;right:45%;width:30px; height:30px;}
  .bx-wop {width:100%;margin-left:-50%;}
.chara .bx-w-chara{padding:0.5em;}
.charaBox{width:90%;margin:0 auto;padding:1em 1em 3em;overflow:hidden;background:#f1ebdf;border-radius:5px;}
.charaBox h1{font-size:100%;line-height:140%;}
.charaBox .photo{ display:block; width:180px;height:240px;margin:1em auto; }
.charaBox .txt{width:95%;font-size:90%;line-height:160%;margin:0 auto 1em;}
.charaBox .name{font-size:140%;margin-bottom:0.2em;color:#f1ebdf;}
}