@charset "UTF-8";
/* -----------------------------------------------------------
   CHART
------------------------------------------------------------*/
.Chart .chartImg{
	position:relative;
	text-align:left;
	background-image:url(../img/chart.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	}
.Chart .chartImg ul{
	list-style:none;
	}
.Chart .chartImg li{
	position:absolute;
	}
.Chart .chartImg a{
	display:block;
	text-indent:-9999px;
	}
.Chart .chartImg a:hover{background-color: rgba(165,226,248,0.3);}
.Chart .chartImg .ver1 a{
	width:230px;
	height:296px;
	}
.Chart .chartImg .ver2 a{
	width:190px;
	height:250px;
	}
	
.Chart .c1{ top:66px; left:110px;}
.Chart .c2{ top:66px; left:380px;}
.Chart .c3{ top:396px; left:110px;}
.Chart .c4{ top:396px; left:380px;}
.Chart .c5{ top:810px; left:229px;}
.Chart .c6{ top:810px; left:439px;}
.Chart .c7{ top:810px; left:649px;}
.Chart .c8{ top:1170px; left:606px;}
.Chart .c9{ top:1170px; left:326px;}
.Chart .c10{ top:1170px; left:106px;}


@media all and (min-width: 768px) {
.Chart h1{
	width:980px;
	height:110px;
	margin:30px auto;
	background:url(../img/chart_parts.png) no-repeat;
	text-indent:-9999px;
	}
.Chart .chartImg{
	width:900px;
	height:1420px;
	margin:0 auto;
	}
.Chart .chartImg img{
	width:900px;
	height:1420px;
	margin:0;
	padding:0;
	}

}
@media all and (max-width: 767px) {
.Chart h1{
	width:94%;
	height:0;
	padding-top:12.12%;
	margin:10px auto 15px;
	background:url(../img/chart_parts_smp.png) no-repeat;
	text-indent:-9999px;
	background-size:cover;
	}
.Chart .chartImg {
	background-size:cover;
	height:0;
	padding-top:157.77%;
	}
.Chart .nocontxt img{
	width:100%;
	height:0;
	margin:0;
	padding:0;
	}
.Chart .chartInner {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

}


/* -----------------------------------------------------------
   CHART-CHARACTOR
------------------------------------------------------------*/
.Chara h1{
	text-indent:-9999px;
	display:none;
	}
.Chara #prevbt a:hover,.Chara #nextbt a:hover,.Chara #closebt a:hover{
	filter: alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;
	}
.Chara #container2 #mainBox {
	background-color:#fff;
	}
.Chara .cPhoto{ background-repeat:no-repeat;}

#c_no1 .cPhoto{ background-image:url(../chart/img/chara_img1.jpg);}
#c_no2 .cPhoto{ background-image:url(../chart/img/chara_img2.jpg);}
#c_no3 .cPhoto{ background-image:url(../chart/img/chara_img3.jpg);}
#c_no4 .cPhoto{ background-image:url(../chart/img/chara_img4.jpg);}
#c_no5 .cPhoto{ background-image:url(../chart/img/chara_img5.jpg);}
#c_no6 .cPhoto{ background-image:url(../chart/img/chara_img6.jpg);}
#c_no7 .cPhoto{ background-image:url(../chart/img/chara_img7.jpg);}
#c_no8 .cPhoto{ background-image:url(../chart/img/chara_img8.jpg);}
#c_no9 .cPhoto{ background-image:url(../chart/img/chara_img9.jpg);}
#c_no10 .cPhoto{ background-image:url(../chart/img/chara_img10.jpg);}

#c_no1  #textArea h2{background-image:url(../chart/img/chara_name1.png);}
#c_no2  #textArea h2{background-image:url(../chart/img/chara_name2.png);}
#c_no3  #textArea h2{background-image:url(../chart/img/chara_name3.png);}
#c_no4  #textArea h2{background-image:url(../chart/img/chara_name4.png);}
#c_no5  #textArea h2{background-image:url(../chart/img/chara_name5.png);}
#c_no6  #textArea h2{background-image:url(../chart/img/chara_name6.png);}
#c_no7  #textArea h2{background-image:url(../chart/img/chara_name7.png);}
#c_no8  #textArea h2{background-image:url(../chart/img/chara_name8.png);}
#c_no9  #textArea h2{background-image:url(../chart/img/chara_name9.png);}
#c_no10  #textArea h2{background-image:url(../chart/img/chara_name10.png);}

@media all and (min-width: 768px) {
.Chara {
	width:670px;
	margin-left:-310px;
	text-align:left;
	position:absolute;
	left:50%;
	z-index:5200;
}
.Chara #container2 #mainBox {	
	position:relative;
	padding:12px;
}
.Chara #container2 #mainBox #mainIn{
	background:url(../img/chara_bg.png) right bottom no-repeat;
	border:1px solid #059dde;
	box-sizing:border-box;
	padding-right:27px;
	}
.Chara #textArea{
	width:300px;
	float:left;
	margin:25px 20px 0 25px;
	}
.Chara #textArea h2{
	height:80px;
	display:block;
	margin-bottom:20px;
	text-indent:-9999px;
	background-repeat:no-repeat;
	}
.Chara #textArea p.mainText{
	font-size:90%;
	line-height:180%;
	padding:0 5px ;
	margin-bottom:30px;
}
.Chara .cPhoto{
	float:right;
	width:270px;
	height:340px;
	text-indent:-9999px;
	margin:27px 0;
	}
.Chara ul#btnSet{
	width:222px;
	height:17px;
	list-style:none;
	position:absolute;
	bottom:-40px;
	right:224px;
	}
.Chara #prevbt,.Chara #nextbt{
	float:left;
	}
.Chara #prevbt{
	margin-right:38px;
	}
.Chara #prevbt a,.Chara #nextbt a{ 
	width:92px;
	height:17px;
	display:block;
	}
.Chara #prevbt a{ 
	background:url(../img/chara_parts.png) no-repeat;
	}
.Chara #nextbt a{ 
	background:url(../img/chara_parts.png) -92px 0 no-repeat;
	}
.Chara #closebt{ 
	position:absolute;
	bottom:-50px;
	right:-0;
	}
.Chara #closebt a{ 
	width:30px; 
	height:30px;
	display:block;
	background:url(../img/chara_close.png) no-repeat;
	}
}
@media all and (max-width: 767px) {
.Chara {
	width:100%;
	z-index:5200;
	position:absolute;
}
.Chara #container2{
	padding:30px 0 0;
	}
.Chara #container2 #mainBox {
	width:85%;
	padding:2.5%;
	margin:20px auto 0;
	position:relative;
}
.Chara #container2 #mainBox #mainIn{
	background:url(../img/chara_bg.png) right bottom no-repeat;
	background-size:70%;
	border:1px solid #059dde;
	box-sizing:border-box;
	padding-top:20px;
	}
.Chara #textArea{
	width:85%;
	margin:0 auto 10px;
	padding-bottom:20px;
	}
.Chara #textArea h2{
	width:60%;
	height:0;
	padding-top:21.81%;
	background-size:cover;
	background-repeat:no-repeat;
	text-indent:-9999px;
	margin-bottom:5px;
	}

.Chara #textArea p.mainText{
	font-size:85%;
	line-height:1.6;
	margin-bottom:20px;
}
.Chara .cPhoto{
	width:60%;
	height:0;
	padding-top:76%;
	background-size:cover;
	text-indent:-9999px;
	margin:0 auto 10px;
	}

.Chara ul#btnSet{
	width:100%;
	list-style:none;
	position:relative;
	}
.Chara #prevbt{
	position:absolute;
	left:0;
	top:25px;
	}
.Chara #nextbt{
	position:absolute;
	right:0;
	top:25px;
	}
.Chara #prevbt a,.Chara #nextbt a{ 
	width:70px;
	height:18px;
	display:block;
	background-size:cover;
	margin-bottom:20px;
	}
.Chara #prevbt a{ 
	background-image:url(../img/chara_parts.png) ;
	background-position:top left;
	}
.Chara #nextbt a{ 
	background-image:url(../img/chara_parts.png) ;
	background-position:top right;
	}
.Chara #closebt{
	position:absolute;
	bottom:25px;
	right:25px;
	}
.Chara #closebt a{
	width:24px; 
	height:24px;
	display:block;
	background:url(../img/chara_close.png) no-repeat;
	background-size:cover;
	}
}