@charset "UTF-8";
/*
 chart.css（ファイル名変更可）
 本サイト各ページ用CSS
*/

body .ntv-wrapper{
background: url(../images/chart/bg.jpg) center top / cover no-repeat fixed;
}

/* chart-inner
========================================== */
.chart-inner{
	background-color: rgba(255,255,255,0.7);
	border-radius: 20px;
	box-sizing: border-box;
	padding: 20px 10px 80px 10px;
	margin: 0 auto 50px auto;
}

.chart-inner h2{
	background-size:contain !important;
}

.chart-inner .d-box-title{
	width: 171px;
	height: 0;
	padding-top: 5.71%;/* 56/980*100 */
	display: block;
	text-indent: -9999px;
	background: url(../images/chart/title.png) no-repeat center top;
	margin: 3% auto 5% auto;
}
.chart-inner .chart-box-body{
	margin-top: 58px;
	text-align:center;
}
.chart-inner .chart-box-body img{
	height: auto;
	vertical-align: bottom;
}

.chart-inner .chart-box-body.c_img img{
	width: 92.04%;/*求める要素の幅÷親要素のコンテンツ幅×100%*/
	height: auto;
	vertical-align: bottom;
}

.chart-inner .chart-box-body.c_img{
	text-align:center;
	margin: 0 auto 11.01% auto;/*100/908*100*/
	position: relative;
}
.chart-inner .chart-box-body.c_img a{
	display: block;
	position: absolute;
	text-indent: -9999px;
	height: 0;
}
.chart-inner .chart-box-body.c_img a[href*=nishino]{
	width: 25.2%; /* 247/980*100 */
    padding-top: 35.71%; /* 350/980*100 */
    top: 41.4%;
    left: 37.44%;/* 367/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=kubota]{
	width: 25.2%; /* 247/980*100 */
    padding-top: 35.71%; /* 350/980*100 */
    top: 41.4%;
    left: 66.83%;/* 655/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=ooyama]{
	width: 25.2%; /* 247/980*100 */
    padding-top: 35.71%; /* 350/980*100 */
    top: 41.4%;
    left: 7.857%;/* 77/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=isshiki]{
	width: 17.65%; /* 173/980*100 */
    padding-top: 23.4%; /* 230/980*100 */
    top: 15.14%; /* 192(位置)/1268(height)*100 */
    left: 35.51%;/* 348/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=matsuoka]{
	width: 17.65%; /* 173/980*100 */
    padding-top: 23.4%; /* 230/980*100 */
    top: 15.14%; /* 192/1268*100 */
    left: 12.95%;/* 127/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=shiota]{
	width: 17.65%; /* 173/980*100 */
    padding-top: 23.4%; /* 230/980*100 */
    top: 76.18%; /* 966/1268*100 */
    left: 73.06%;/* 716/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=komori]{
	width: 17.65%; /* 173/980*100 */
    padding-top: 23.4%; /* 230/980*100 */
    top: 81.30%; /* 1031/1268*100 */
    left: 33.97%;/* 333/980*100 */
}
.chart-inner .chart-box-body.c_img a[href*=ueda]{
	width: 25.2%; /* 247/980*100 */
    padding-top: 35.71%; /* 350/980*100 */
    top: 0.07%; /* 1/1268*100 */
    left: 67.95%;/* 666/980*100 */
}

.chart-inner .chart-box-body.c_img_02 a{
}

body .chart-inner .chart-box-body.c_img_02 a[href*=nishino]{
	width: 25.2%; /* 247/980*100 */
    padding-top:  25.2%; /* 247/980*100 */
    top: 41.89%; /* 494/1179*100 */
    left: 37.95%;/* 372/980*100 */
}
body .chart-inner .chart-box-body.c_img_02 a[href*=kubota]{
	width: 25.2%; /* 247/980*100 */
    padding-top:  25.2%; /* 247/980*100 */
    top: 41.89%; /* 494/1179*100 */
    left: 68.87%;/* 675/980*100 */
}
body .chart-inner .chart-box-body.c_img_02 a[href*=ooyama]{
	width: 25.2%; /* 247/980*100 */
    padding-top:  25.2%; /* 247/980*100 */
    top: 41.89%; /* 494/1179*100 */
    left: 8.163%;/* 80/980*100 */
}
body .chart-inner .chart-box-body.c_img_02 a[href*=isshiki]{
	width: 17.65%; /* 173/980*100 */
    padding-top: 17.65%; /* 173/980*100 */
    top: 10.17%; /* 120/1179*100 */
    left: 34.59%;/* 339/980*100 */
}
body .chart-inner .chart-box-body.c_img_02 a[href*=matsuoka]{
	width: 17.65%; /* 173/980*100 */
    padding-top: 17.65%; /* 173/980*100 */
    top: 10.17%; /* 120/1179*100 */
    left: 8.571%;/* 84/980*100 */
}
body .chart-inner .chart-box-body.c_img_02 a[href*=komori]{
	width: 17.34%; /* 170/980*100 */
    padding-top: 17.34%; /* 170/980*100 */
    top: 76.33%; /* 900/1179*100 */
    left: 14.28%;/* 140/980*100 */
}
body .chart-inner .chart-box-body.c_img_02 a[href*=ueda]{
	width: 25.2%; /* 247/980*100 */
    padding-top: 25.2%; /* 247/980*100 */
    top: 0.84%; /* 10/1179*100 */
    left: 68.36%;/* 670/980*100 */
}



.chart-inner .chart-box-body.cast{
	padding: 30px;
	font-size: 1.8rem;
	margin-top: 55px;
	display: flex;
}

.chart-inner .cast{
	border-top: 1px dashed #666666;
	paading: 3.77% 0;
	margin: 0 0 0.51% 0;
	border-bottom: 1px dashed #666666;
}

.chart-inner .chart-box-body-left{
	width: 205px;
	margin-right: 40px;
}
.chart-inner .chart-box-body-right{
	line-height: 1.8;
	letter-spacing: 1px;
	width: 680px;
}
.chart-inner .chart-cast{
	margin-bottom: 20px;
	font-weight: bold;
    font-size: 2.6rem;
	color: #005495;
	text-align: left;
	letter-spacing: 10px;
	
}
.chart-inner .chart-cast span.chara-name{
    font-size: 5rem;
	color: #210000;
	padding: 0 3% 0 0;
	margin: 0 5% 0 0;
	letter-spacing: 20px;
	border-right: 1px solid #210000;
	vertical-align: middle;
}

.chart-inner .chart-cast span.cast-name{
	letter-spacing: 5px;
	vertical-align: middle;
}
.chart-inner .chart-cast em{
    font-size: 1.2rem;
	letter-spacing: 1px;
}

.chart-inner .chart-txt{
	text-align: left;
	font-weight: bold;
}


.chart-inner .chart-c_comment{
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
}
.chart-inner .chart-c_comment span{
    font-weight: bold;
}
.chart-inner .chart-c_comment:before{
    display: block;
    content: '';
    width: 80%;
    height: 1px;
    background: #fd428d;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}


#tab_title{
	margin: 30px auto;
	width: 100%;
}

#tab_title li {
	width: 48%;
	height: auto;
	padding: 2% 0 2% 0;
	display: inline-block;
	cursor: pointer;
	background-color: #000000;
}
 #tab_title li p {
	color: #FFFFFF;
	text-align: center;
}
 #tab_title li:nth-child(1){
	margin: 0 1.5% 0 1%;
}
 #tab_title li:nth-child(2){
}

 #tab_title li.on:nth-child(1),
 #tab_title li:hover:nth-child(1){
	background-color: #B80003;
}
 #tab_title li.on:nth-child(2),
 #tab_title li:hover:nth-child(2){
	background-color: #B80003;
}

 #tab_list li{
	display: none;
}
 #tab_list li:nth-child(2){
	display: block;
}







#switch{
    display: none;
}

.switch-title{
	width: 100%;
	margin: 0 auto;
}
#change-btn img{
	cursor: pointer;
	width: 33.33%;/*100/300*100*/
}
#change-btn img:hover{
	opacity: 0.6;
}

#change-btn{
	float: right;
	width: 30%;
}

.clearboth{
	clear: both;

}

.chart-part
{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	margin: 0 2% 0 0;
	width: 68%;
	float: right;
	text-align: right;
}

.chart-part img{
	text-align: right;
	width: 77.94%;
}

.chart-part div
{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
}

.chart-part div.part-title div{
/*	font-family: "Shin Go DeBold";
	transform: rotate(0.05deg);
	font-size: 3rem;
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
*/
}


.chart-part .real-part
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.chart-part .manga-part
{
    position: absolute;
    width: 100%;
    height: 100%;
}

#switch:checked ~ .switch-title .chart-part{
    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -ms-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}


.switch-title .chart-part .part-title .manga-part
{
    -webkit-transform: rotateX( 180deg );
    -moz-transform: rotateX( 180deg );
    -ms-transform: rotateX( 180deg );
    transform: rotateX( 180deg );
}



.flip-boards{ position: relative; padding-top: 2%;	}
.flip-boards .board
{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.flip-boards .board div
{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
	z-index:1;
}
.flip-boards .board .front
{
    position: absolute;
    width: 100%;
    height: 100%;
}


.flip-boards .board .flipped
{
    position: absolute;
    width: 100%;
    height: 100%;
}

#switch:checked ~ .flip-boards .board.left{
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

#switch:checked ~ .flip-boards .board.left a{
}

#switch:checked ~ .flip-boards .board.left a.front-links{
	display: none;
}


.flip-boards .board.left:hover
{
}
.flip-boards .board.left .flipped
{
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

/*
#switch:checked ~ #chart-list{
	display: none;
}
#switch:checked ~ #chart-list02{
	padding-top: 136.8%;
	display: block;
}
*/


#chart-list{
	padding-top: 136.8%;
}

#switch:checked ~ #chart-list{
	padding-top: 127.8%;
}

#chart-list02{
	display: none;
}


/* ---------------------------------
 SP用
--------------------------------- */
@media only screen and (max-width: 600px) {
	.chart-inner{
        padding: 4.6875% 3.125% 8.25%;
    }
    .chart-inner .d-box-title{
	width: 100% !important;
	height: auto !important;
    }

    .chart-inner .chart-box-body{
    	margin-top: 1.5625%;
    }
    .chart-inner .chart-box-body.cast{
    	margin-top: 3.125%;
    	display: block;
    	font-size: 1.6rem;
		padding: 20px;
    }
    .chart-inner .chart-box-body-left{
    	width: 100%;
    	text-align: center;
    	margin-right: 0;
    	margin-bottom: 1.5625%;
    }
    .chart-inner .chart-box-body-left img{
    	max-width: 205px;
    }
    .chart-inner .chart-box-body-right{
    	width: 100%;
    }
    .chart-inner .chart-cast{
		margin-bottom: 3.125%;
		text-align: center;
	}

.chart-inner .chart-cast span.chara-name{
	font-size: 3.5rem;
	border-right: none;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

    .chart-inner .chart-cast span{
	}
    .chart-inner .chart-cast span:first-of-type{
    }
	
	.chart-inner .chart-cast span.cast-name{
		display: block;
	}
    .chart-inner .chart-cast em{
        font-size: 1.2rem;
        margin-right: 0;
    }

    .chart-inner #isshiki .chart-cast em{
		display: block;
    }


	#change{
		padding: 3% 0 3% 0;
	}

	#change p{
		font-size: 1.5rem;
	}

#change-btn {
	width: 25%;
}

#change-btn img{
	cursor: pointer;
	width: 46.66%;/*70/150*100*/
}

.chart-part{
	width: 73%;
}

.chart-part img{
	text-align: right;
	width: 88.35%;/*387/438*100*/
}



}

/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {


}

/* ----------------------------------
 SP 〜 tablet　（〜992px）
----------------------------------- */
@media screen and (max-width: 992px) {
  body .ntv-wrapper{
    background: none;
  }
  body .ntv-wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/chart/bg.jpg) center/cover no-repeat;
    -webkit-background-size: cover;
	z-index: -1;
  }
}

/* ---------------------------------
 iPad用
--------------------------------- */

  body.iPad .ntv-wrapper{
    background: none;
  }
  body.iPad .ntv-wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/chart/bg.jpg) center/cover no-repeat;
    -webkit-background-size: cover;
	z-index: -1;
  }


/* ---------------------------------
 tablet FONT用
--------------------------------- */
@media screen and (min-width : 601px){

}

@media screen and (max-width: 800px) {
	.chart-inner .chart-cast span.cast-name{
		display: block;
	}

}