@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 .ver1 a{
	width:176px;
	height:206px;
	}
.Chart .chartImg .ver2 a{
	width:122px;
	height:152px;
	}
	
.Chart .c1{ top:20px; left:203px;}
.Chart .c2{ top:50px; left:9px;}
.Chart .c3{ top:360px; left:19px;}
.Chart .c4{ top:360px; left:159px;}
.Chart .c5{ top:460px; left:439px;}
.Chart .c6{ top:530px; left:19px;}
.Chart .c7{ top:530px; left:159px;}
.Chart .c8{ top:530px; left:299px;}
.Chart .c9{ top:260px; left:307px;}
.Chart .c10{ top:260px; left:439px;}
.Chart .c11{ top:90px; left:417px;}



@media all and (min-width: 768px) {
.Chart .chartImg{
	width:580px;
	height:830px;
	}
.Chart .nocontxt img{
	width:580px;
	height:830px;
	margin:0;
	padding:0;
	}
.Chart #leftBox h1{
	background-image:url(../img/chart_ti.png);
	background-position:center center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	}
}
@media all and (max-width: 767px) {
.Chart .chartImg {
	background-size:cover;
	height:0;
	padding-top:143.103%;
	}
.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;
	}
	
#c_no1 .cPhoto{ background-image:url(../chart/img/chara_p1.jpg);}
#c_no2 .cPhoto{ background-image:url(../chart/img/chara_p2.jpg);}
#c_no3 .cPhoto{ background-image:url(../chart/img/chara_p3.jpg);}
#c_no4 .cPhoto{ background-image:url(../chart/img/chara_p4.jpg);}
#c_no5 .cPhoto{ background-image:url(../chart/img/chara_p5.jpg);}
#c_no6 .cPhoto{ background-image:url(../chart/img/chara_p6.jpg);}
#c_no7 .cPhoto{ background-image:url(../chart/img/chara_p7.jpg);}
#c_no8 .cPhoto{ background-image:url(../chart/img/chara_p8.jpg);}
#c_no9 .cPhoto{ background-image:url(../chart/img/chara_p9.jpg);}
#c_no10 .cPhoto{ background-image:url(../chart/img/chara_p10.jpg);}
#c_no11 .cPhoto{ background-image:url(../chart/img/chara_p11.jpg);}

@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 {
	background:url(../img/chara_bg.jpg) no-repeat;
	position:relative;
	padding:30px;
}
.Chara #textArea{
	width:300px;
	height:380px;
	float:left;
	}
.Chara #textArea h2{
	height:100px;
	display:block;
	margin-bottom:20px;
	text-indent:-9999px;
	}
	
#c_no1  #textArea h2{background:url(../chart/img/chara_t1.png) no-repeat;height:125px !important;}
#c_no2  #textArea h2{background:url(../chart/img/chara_t2.png) no-repeat;}
#c_no3  #textArea h2{background:url(../chart/img/chara_t3.png) no-repeat;}
#c_no4  #textArea h2{background:url(../chart/img/chara_t4.png) no-repeat;}
#c_no5  #textArea h2{background:url(../chart/img/chara_t5.png) no-repeat;}
#c_no6  #textArea h2{background:url(../chart/img/chara_t6.png) no-repeat;}
#c_no7  #textArea h2{background:url(../chart/img/chara_t7.png) no-repeat;}
#c_no8  #textArea h2{background:url(../chart/img/chara_t8.png) no-repeat;}
#c_no9  #textArea h2{background:url(../chart/img/chara_t9.png) no-repeat;}
#c_no10  #textArea h2{background:url(../chart/img/chara_t10.png) no-repeat;}
#c_no11  #textArea h2{background:url(../chart/img/chara_t11.png) no-repeat;}

.Chara #textArea p.mainText{
	font-size:85%;
	line-height:180%;
	padding:0 5px ;
	margin-bottom:30px;
}
.Chara .cPhoto{
	float:left;
	width:290px;
	height:380px;
	margin-right:20px;
	text-indent:-9999px;
	}
.Chara ul#btnSet{
	width:93px;
	list-style:none;
	}
.Chara #prevbt,.Chara #nextbt{
	float:left;
	}
.Chara #prevbt{
	margin-right:1px;
	}
.Chara #prevbt a,.Chara #nextbt a{ 
	width:46px;
	height:46px;
	display:block;
	}
.Chara #prevbt a{ 
	background:url(../img/chara_parts.jpg) no-repeat;
	}
.Chara #nextbt a{ 
	background:url(../img/chara_parts.jpg) -46px 0 no-repeat;
	}
.Chara #closebt{ 
	position:absolute;
	top:0;
	right:-46px;
	}
.Chara #closebt a{ 
	width:46px; 
	height:46px;
	display:block;
	background:url(../img/chara_parts.jpg) -92px 0 no-repeat;
	}
}
@media all and (max-width: 767px) {
.Chara {
	width:100%;
	z-index:5200;
	position:absolute;
}
.Chara #container2 #mainBox {
	width:85%;
	padding:20px 0 10px;
	margin:20px auto;
	background:url(../img/chara_bg.jpg);
}
.Chara #textArea{
	width:85%;
	margin:0 auto 10px;
	}
.Chara #textArea h2{
	font-size:140%;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:#684e40;
	line-height:120%;
	margin-bottom:10px;
	font-weight:normal;
	text-align:center;
	}
.Chara #textArea h2 span{
	display:block;
	}
.Chara #textArea .sub{
	font-size:60% !important;
	line-height:140% !important;
	color:#684e40;
	}
.Chara #textArea .name{
	font-size:60% !important;
	line-height:140% !important;
	color:#a9724a;
	}
.Chara #textArea p.mainText{
	font-size:85%;
	line-height:180%;
	margin-bottom:20px;
}
.Chara .cPhoto{
	width:60%;
	height:0;
	padding-top:76%;
	background-size:cover;
	text-indent:-9999px;
	margin:0 auto 20px;
	}

.Chara ul#btnSet{
	width:69px;
	list-style:none;
	margin:0 auto 20px;
	}
.Chara #prevbt{
	float:left;
	}
.Chara #nextbt{
	float:right;
	}
.Chara #prevbt{
	margin-right:1px;
	}
.Chara #prevbt a,.Chara #nextbt a{ 
	width:34px;
	height:34px;
	display:block;
	background-size:cover;
	}
.Chara #prevbt a{ 
	background-image:url(../img/chara_parts.jpg) ;
	background-position:top left;
	}
.Chara #nextbt a{ 
	background-image:url(../img/chara_parts.jpg) ;
	background-position:top center;
	}
.Chara #closebt a{ 
	margin:0 auto;
	width:34px; 
	height:34px;
	display:block;
	background-image:url(../img/chara_parts.jpg);
	background-position:top right;
	background-size:cover;
	}
}