@charset "utf-8";
/* CSS Document */

/* ================================================================================
-----------------------------------------------------------------------------------
	section#description
-----------------------------------------------------------------------------------
================================================================================ */

section#description {
	padding: 79px 0 0 0;
	background: #fff;
	overflow: hidden;
}

section#description > div {
	width: auto;
	position: relative;
}

section#description > div > h2 {
	width: auto;
	height: 0;
	padding: 82px 0 0 0;
	margin: 0 auto 25px auto;
	background: url(../../img/index/h2.svg) center top no-repeat;
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 8000;
}

/* =================================================================
	div#chara
================================================================= */

div#chara > ul {
	width: 100%;
	height: /*297px*/380px;
	margin: 0 auto;
	transition: all .2s;
	position: relative;
}

div#chara > ul.comp {
	height: 750px;
}

div#chara > ul > li {
	width: 100%;
	bottom: 0;
	position: absolute;	
}

div#chara > ul > li img.btn {
	cursor: pointer;
}

div#chara > ul > li:nth-of-type(1) {	height: 248px;	margin: 0 0 49px 0;	}
div#chara > ul > li:nth-of-type(2) {	height: 339px;	margin: 0 0 48px 0;	opacity: 0; display: none;	}
div#chara > ul > li:nth-of-type(3) {	height: 682px;	margin: 0 0 63px 0;	opacity: 0; display: none;	}

div#chara > ul > li > img {
	left: 50%;
	position: absolute;
}

div#chara > ul > li > img.cloud {
	bottom: 50%;
}

div#chara > ul > li:nth-of-type(1) > img:nth-of-type(1) {	margin: 0 0 0 -8%;	bottom: 0;	}
div#chara > ul > li:nth-of-type(1) > img:nth-of-type(2) {	margin: 0 0 0 86px;		bottom: 92px;	}
div#chara > ul > li:nth-of-type(2) > img:nth-of-type(1) {	margin: 0 0 0 -15.5%;	bottom: 0;	}
div#chara > ul > li:nth-of-type(3) > img:nth-of-type(1) {	margin: 0 0 0 -240px;	bottom: 154px;	}

div#chara > ul > li > ul {
	width: 480px;
	height: 138px;
	margin: 0 0 0 -240px;
	left: 50%;
	bottom: 0;
	position: absolute;
}

div#chara > ul > li > ul > li {
	width: 140px;
	height: 100%;
	position: absolute;
	top: 0;
}

div#chara > ul > li > ul > li:nth-of-type(1) {	left: 0px;		}
div#chara > ul > li > ul > li:nth-of-type(2) {	left: 170px;	}
div#chara > ul > li > ul > li:nth-of-type(3) {	left: 340px;	}

div#chara > ul > li > ul > li > img {
	width: 100%;
	margin: -50% 0 0 -50%;
	top: 50%;
	left: 50%;
	position: absolute;
}

/* ================================================================================
-----------------------------------------------------------------------------------
	section#about
-----------------------------------------------------------------------------------
================================================================================ */

section#about {
	height: 0;
	overflow: hidden;
}

section#about > div {
	padding: 50px 0 43px 0;
	background: url(../../../img/common/section_bg.gif) center center repeat;
	position: relative;
}

section#about > div > div {
	height: 0;
	padding: 1197px 0 0 0;
	background: url(../../img/index/comment.png) center top no-repeat;
	display: block;
	overflow: hidden;
}