/*///////////////// chart ////////////////*/
.chart .pBox ul{display:block;background:url(../img/chart/chart.jpg?0214)  center center no-repeat;}
.chart .pBox ul li{text-indent: -9999px;}


.chart .pBox {position:relative;list-style-type:none;}
.chart .pBox{margin-bottom:0;}
.chart .pBox img{position:absolute;}
.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;background:url(/um/img/cover.png)  center center no-repeat;}

.chart .pBox ul li a:hover {background:#e9eef4;opacity:0.4;}
.chart .pBox ul li.btn1 a{width:200px;height:260px;}
.chart .pBox ul li.btn2 a,
.chart .pBox ul li.btn3 a{width:170px;height:230px;}
.chart .pBox ul li.btn4 a,
.chart .pBox ul li.btn5 a,
.chart .pBox ul li.btn6 a,
.chart .pBox ul li.btn7 a,
.chart .pBox ul li.btn8 a,
.chart .pBox ul li.btn9 a,
.chart .pBox ul li.btn10 a{width:120px;height:155px;}
.chart .pBox ul li.btn11 a,
.chart .pBox ul li.btn12 a,
.chart .pBox ul li.btn13 a{width:140px;height:175px;}

.chart .pBox ul li.btn1{top:320px;left:290px;}
.chart .pBox ul li.btn2{top:525px;left:40px;}
.chart .pBox ul li.btn3{top:233px;left:40px;}
.chart .pBox ul li.btn4{top:639px;left:330px;}
.chart .pBox ul li.btn5{top:795px;left:260px;}
.chart .pBox ul li.btn6{top:795px;left:400px;}
.chart .pBox ul li.btn7{top:65px;left:255px;}
.chart .pBox ul li.btn8{top:814px;left:66px;}
.chart .pBox ul li.btn9{top:522px;left:604px;}
.chart .pBox ul li.btn10{top:714px;left:604px;}
.chart .pBox ul li.btn11{top:45px;left:404px;}
.chart .pBox ul li.btn12{top:86px;left:608px;}
.chart .pBox ul li.btn13{top:272px;left:608px;}

.chart .pBox p.mini{text-align:center;}

@media all and (min-width: 768px) {
.chart article h2 span{display:block;width:928px;height:140px;background:url(../img/chart/title.png)  left center no-repeat;}

.chart .pBox ul{display:block;width:780px;height:1000px;}
.chart .pBox img{width:780px;height:1000px;}
.chart .pBox p.mini{font-size:80%;margin-top:10px;}


.chart .shareBox{width:880px;}
}

@media all and (max-width: 767px) {
.chart article h2 {padding:0;}
.chart article h2 span{display:block;width:100%;height:0; padding-top:25%;background:url(../img/chart/title_smp.png)  center top no-repeat;background-size:cover;}
.chart .pBox {width:98%;margin:.2em auto;padding:0;}
.chart .pBox ul{width:100%;height:0;padding-top:129%;margin:0 auto;background-size: contain;}
.chart .pBox img {position: absolute;left:0;top:0;width:100%;height:100%;}
.chart .pBox p.mini{font-size:70%;}

.chart p.shareBox{width:95%;margin:0 auto;}
}

/*///////////////// character ////////////////*/
.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.gif) 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: contain}
  .cast3 .charaBox .photo{background:url(../img/chart/cast3.jpg) no-repeat;background-size: contain}
  .cast4 .charaBox .photo{background:url(../img/chart/cast4.jpg) no-repeat;background-size: contain}
  .cast5 .charaBox .photo{background:url(../img/chart/cast5.jpg) no-repeat;background-size: contain}
  .cast6 .charaBox .photo{background:url(../img/chart/cast6.jpg) no-repeat;background-size: contain}
  .cast7 .charaBox .photo{background:url(../img/chart/cast7.jpg) no-repeat;background-size: contain}
  .cast8 .charaBox .photo{background:url(../img/chart/cast8.jpg) no-repeat;background-size: contain}
  .cast9 .charaBox .photo{background:url(../img/chart/cast9.jpg) no-repeat;background-size: contain}
  .cast10 .charaBox .photo{background:url(../img/chart/cast10.jpg?0125) no-repeat;background-size: contain}
  .cast11 .charaBox .photo{background:url(../img/chart/cast11.jpg) no-repeat;background-size: contain}
  .cast12 .charaBox .photo{background:url(../img/chart/cast12.jpg) no-repeat;background-size: contain}
  .cast13 .charaBox .photo{background:url(../img/chart/cast13.jpg) no-repeat;background-size: contain}

.bx-wop {background:#e9eef4;}
.charaBox div{padding:0;color:#315587;}
@media all and (min-width: 768px) {
.charaBox{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

	.chara .btn-w-close a{position:absolute;bottom:0;right:0;width:40px; height:40px;background:url(../img/chart/close.gif) no-repeat ;}
	.bx-wop {width:780px;margin-left:-390px;}
.charaBox{width:730px;min-height:300px;margin:15px auto;padding:10px 10px 10px 10px;overflow:hidden;border:dashed 1px #88abda;box-shadow:0px 0px 6px 3px #ffffff;}
.charaBox h1{text-indent: -9999px;width:470px;height:60px;margin-bottom:10px;}
.charaBox .photo{ display:block; width:250px;height:360px;}
.charaBox .txt{width:440px;margin:0 auto;font-size:100%;line-height:180%;}
  .cast1 .charaBox  h1{background:url(../img/chart/name1.png) no-repeat;}
  .cast2 .charaBox  h1{background:url(../img/chart/name2.png) no-repeat;}
  .cast3 .charaBox  h1{background:url(../img/chart/name3.png) no-repeat;}
  .cast4 .charaBox  h1{background:url(../img/chart/name4.png?0125) no-repeat;}
  .cast5 .charaBox  h1{background:url(../img/chart/name5.png) no-repeat;}
  .cast6 .charaBox  h1{background:url(../img/chart/name6.png) no-repeat;}
  .cast7 .charaBox  h1{background:url(../img/chart/name7.png) no-repeat;}
  .cast8 .charaBox  h1{background:url(../img/chart/name8.png) no-repeat;}
  .cast9 .charaBox  h1{background:url(../img/chart/name9.png) no-repeat;}
  .cast10 .charaBox  h1{background:url(../img/chart/name10.png) no-repeat;}
  .cast11 .charaBox  h1{background:url(../img/chart/name11.png) no-repeat;}
  .cast12 .charaBox  h1{background:url(../img/chart/name12.png) no-repeat;}
  .cast13 .charaBox  h1{background:url(../img/chart/name13.png) no-repeat;}
}


@media all and (max-width: 767px) {

.chara .btn-w-close a{position:absolute;bottom:1.8em;right:45%;width:30px; height:30px;background:url(../img/chart/close.gif) no-repeat;background-size: contain}

  .bx-wop {width:100%;margin-left:-50%;}
.chara .bx-w-chara{padding:1em;}
.charaBox{width:90%;margin:0 auto;padding:1em 1em 3em;overflow:hidden;border:dashed 1px #88abda;box-shadow:0px 0px 6px 3px #ffffff;}

.charaBox h1{text-indent: -9999px;width:100%;height:0;padding-top:24.4%;margin:0 auto;}
  .cast1 .charaBox  h1{background:url(../img/chart/name_smp1.png) no-repeat;background-size: contain}
  .cast2 .charaBox  h1{background:url(../img/chart/name_smp2.png) no-repeat;background-size: contain}
  .cast3 .charaBox  h1{background:url(../img/chart/name_smp3.png) no-repeat;background-size: contain}
  .cast4 .charaBox  h1{background:url(../img/chart/name_smp4.png?0125) no-repeat;background-size: contain}
  .cast5 .charaBox  h1{background:url(../img/chart/name_smp5.png) no-repeat;background-size: contain}
  .cast6 .charaBox  h1{background:url(../img/chart/name_smp6.png) no-repeat;background-size: contain}
  .cast7 .charaBox  h1{background:url(../img/chart/name_smp7.png) no-repeat;background-size: contain}
  .cast8 .charaBox  h1{background:url(../img/chart/name_smp8.png) no-repeat;background-size: contain}
  .cast9 .charaBox  h1{background:url(../img/chart/name_smp9.png) no-repeat;background-size: contain}
  .cast10 .charaBox  h1{background:url(../img/chart/name_smp10.png) no-repeat;background-size: contain}
  .cast11 .charaBox  h1{background:url(../img/chart/name_smp11.png) no-repeat;background-size: contain}
  .cast12 .charaBox  h1{background:url(../img/chart/name_smp12.png) no-repeat;background-size: contain}
  .cast13 .charaBox  h1{background:url(../img/chart/name_smp13.png) no-repeat;background-size: contain}

.charaBox .photo{display:block; width:60%;height:0;padding-top:86.5%;margin:1em auto;}
.charaBox .txt{width:100%;font-size:90%;line-height:160%;margin:0 auto;}
.charaBox .name{font-size:140%;margin-bottom:0.2em;}
}

/*media print*/
@media print {
.chart .pBox{display: none;}
}