@charset "UTF-8";
@media print {.chartImg{ display: none }}

/* -----------------------------------------------------------
   CHART
------------------------------------------------------------*/
#contentsArea h1{text-indent:-9999px;}
.chartImg{
	position:relative;
	text-align:left;
	background-image:url(../img/chart.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	}
.chartImg ul{
	list-style:none;
	text-indent:-9999px;
	}
	.Chart .chartImg li{
		position:absolute;
	}
	.Chart .chartImg a{
		display:block;
		text-indent:-9999px;
	}
	.Chart .chartImg a:hover{background-color: rgba(0,0,0,0.3);}
	.Chart .chartImg .ver1 a{
		width:170px;
		height:222px;
	}
	.Chart .chartImg .ver2 a{
		width:140px;
		height:182px;
	}
	.Chart .chartImg .ver3 a{
			width:120px;
			height:162px;
	}

	.Chart .c1{ top:284px; left:361px;}
	.Chart .c2{ top:284px; left:81px;}
	.Chart .c3{ top:534px; left:141px;}
	.Chart .c4{ top:284px; left:581px;}
	.Chart .c5{ top:534px; left:581px;}
	.Chart .c6{ top:806px; left:471px;}
	.Chart .c7{ top:534px; left:361px;}
	.Chart .c8{ top:54px; left:180px;}
	.Chart .c9{ top:52px; left:784px;}
	.Chart .c10{ top:794px; left:717px;}
	.Chart .c11{ top:984px; left:717px;}
	.Chart .c12{ top:594px; left:787px;}
	.Chart .c13{ top:412px; left:796px;}
	.Chart .c14{ top:806px; left:335px;}
	.Chart .c15{ top:804px; left:27px;}
	.Chart .c16{ top:804px; left:197px;}
	.Chart .c17{ top:984px; left:117px;}
	.Chart .c18{ top:64px; left:32px;}
	.Chart .c19{ top:14px; left:581px;}
	.Chart .c20{ top:14px; left:376px;}

@media all and (min-width: 768px) {
.Chart #contentsArea .inner{
	padding:20px 0 40px;
	}
.Chart #contentsArea h1{
	display:block;
	height:240px;
	background:url(../img/chart_header.jpg) no-repeat;
	}
.chartInner{
	padding:40px 0;
	}
.chartImg{
	width:924px;
	height:1166px;
	margin:0 auto;
	}
.chartImg img{
	width:924px;
	height:1166px;
	}

}
@media all and (max-width: 767px) {
.Chart #contentsArea .inner{
	width:94%;
	margin:0 auto;
	padding:20px 0;
	}
.Chart #contentsArea h1{
	display:block;
	width:100%;
	height:0;
	padding-top:28.125%;
	background-size:cover;
	background-image:url(../img/chart_header_smp.jpg);
	}
.chartImg {
	background-size:cover;
	height:0;
	padding-top:126.19%;
	}
.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
------------------------------------------------------------*/
@media print {.Chara .cPhoto{ display: none }}
.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:#f8f8f8;
	}
.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_no11 .cPhoto{ background-image:url(../chart/img/chara_img11.jpg);}
#c_no12 .cPhoto{ background-image:url(../chart/img/chara_img12.jpg);}
#c_no13 .cPhoto{ background-image:url(../chart/img/chara_img13.jpg);}
#c_no14 .cPhoto{ background-image:url(../chart/img/chara_img14.jpg);}
#c_no15 .cPhoto{ background-image:url(../chart/img/chara_img15.jpg);}
#c_no16 .cPhoto{ background-image:url(../chart/img/chara_img16.jpg);}
#c_no17 .cPhoto{ background-image:url(../chart/img/chara_img17.jpg);}
#c_no18 .cPhoto{ background-image:url(../chart/img/chara_img18.jpg);}
#c_no19 .cPhoto{ background-image:url(../chart/img/chara_img19.jpg);}
#c_no20 .cPhoto{ background-image:url(../chart/img/chara_img20.jpg);}

.Chara #textArea h2{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #2b2b2b;
	letter-spacing: 0.04em;
}
.Chara #textArea #name{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #e4007f;
}

@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:20px;
	background:url(../img/character_bg.jpg) no-repeat;
}
.Chara #textArea{
	width:290px;
	float:left;
	margin:20px 10px 0 20px;
	}
.Chara #textArea h2{
	font-size: 200%;
	padding-bottom: 6px;
	}
.Chara #textArea h2 #age{
	font-size:60%;
}
	.Chara #textArea #name{
		font-size:120%;
		font-weight: bold;
		}
.Chara #textArea p.mainText{
	font-size:90%;
	line-height:160%;
	padding-top:10px;
	margin-bottom:30px;
}
.Chara .cPhoto{
	float:right;
	width:310px;
	height:380px;
	text-indent:-9999px;
	position: relative;
	}
.Chara .cPhoto img{
	width:310px;
	height:380px;
	position: absolute;
	top: 0;
	left: 0;
}
.Chara #closebt{
	position:absolute;
	top:0;
	right:0;
	}
.Chara #closebt a{
	width:40px;
	height:40px;
	display:block;
	background:url(../img/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 #textArea{
	width:90%;
	margin:0 auto;
	padding-bottom:20px;
	text-align: center;
	}
.Chara #textArea h2{
	font-size:150%;
	padding-bottom:6px;
	}
.Chara #textArea h2 #age{
		font-size:60%;
		}
.Chara #textArea #name{
		font-size:110%;
		font-weight: bold;
		}
.Chara #textArea p.mainText{
	font-size:85%;
	line-height:1.6;
	padding-top:5px;
	text-align: left;
}
.Chara .cPhoto{
	width:60%;
	height:0;
	padding-top:73.54%;
	background-size:cover;
	text-indent:-9999px;
	margin:10px auto 2px;
	position: relative;
	}
	.Chara .cPhoto img{
		width:100%;
		height:100%;
		position: absolute;
		}
.Chara #closebt{
	position: absolute;
	top: 0;
	right: 0;
	}
.Chara #closebt a{
	width:30px;
	height:30px;
	display:block;
	background:url(../img/close.png) no-repeat;
	background-size:cover;
	}
}