body{
	background-color: transparent;
	color: #000000;
}

/*------------------------------------------------------------------------------------------
 * Chara 
-------------------------------------------------------------------------------------------*/
#Chara{
	width: 840px;
	height: 380px;
	background: url(../images/chara/chara_bg.png) left top no-repeat;
	position: relative;
	margin: 233px 0 0 10px;
}

#Chara .info{
	display: none;
	position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
}

#Chara .info .name{
	position: absolute;
}
#Chara .info .txt{
	position: absolute;
}
#Chara .info .img01{
	position: absolute;
}
#Chara .info .img02{
	position: absolute;
}

#Chara ul{
	width: 455px;
	left: 50%; top: 337px;
	position: absolute;
	margin-left: -227px;
	z-index: 20;
}

#Chara ul li{
	float: left;
	margin-left: 5px;
}

#Chara ul li.first{
	margin-left: 0;
}

#Chara #Prev{
	position: absolute; left: 50%; top: 167px;
	margin-left: -430px;
}
#Chara #Next{
	position: absolute; left: 50%; top: 167px;
	margin-left: 384px;
}

#Chara #Close{
	position: absolute; right: 32px; top: 0;
}

#Chara01 .name{left: 441px;top: 89px;}
#Chara01 .txt{left: 441px; top: 151px;}
#Chara01 .img01{
	width: 445px;
	height: 572px;
	left: 65px; bottom: 39px;;
	background: url(../images/chara/chara01.png) left top no-repeat;
}

#Chara02 .name{left: 91px; top: 115px;}
#Chara02 .txt{left: 93px; top: 176px;}
#Chara02 .img01{
	width: 417px;
	height: 338px;
	left: 418px; top: 13px;
	background: url(../images/chara/chara02.png) left top no-repeat;
}

#Chara02 .img02{
	width: 417px;
	height: 338px;
	left: 418px; top: 13px;
	background: url(../images/chara/chara02b.png) left top no-repeat;
}

#Chara03 .name{left: 91px; top: 96px;}
#Chara03 .txt{left: 93px; top: 157px;}
#Chara03 .img01{
	width: 380px;
	height: 277px;
	left: 408px; top: 50px;
	background: url(../images/chara/chara03.png) left top no-repeat;
}
#Chara03 .img02{
	width: 380px;
	height: 277px;
	left: 408px; top: 50px;
	background: url(../images/chara/chara03b.png) left top no-repeat;
}


#Chara04 .name{left: 91px; top: 96px;}
#Chara04 .txt{left: 93px; top: 158px;}
#Chara04 .img01{
	width: 342px;
	height: 360px;
	left: 432px; top: -40px;
	background: url(../images/chara/chara04.png) left top no-repeat;
}

#Chara05 .name{left: 90px; top: 96px;}
#Chara05 .txt{left: 93px; top: 158px;}
#Chara05 .img01{
	width: 350px;
	height: 280px;
	left: 465px; top: 50px;
	background: url(../images/chara/chara05.png) left top no-repeat;
}

#Chara06 .name{left: 90px; top: 90px;}
#Chara06 .txt{left: 93px; top: 158px;}
#Chara06 .img01{
	width: 360px;
	height: 221px;
	left: 452px; top: 79px;
	background: url(../images/chara/chara06.png) left top no-repeat;
}

#Chara07 .name{left: 91px; top: 84px;}
#Chara07 .txt{left: 93px; top: 135px;}
#Chara07 .img01{
	width: 329px;
	height: 296px;
	left: 471px; top: 31px;
	background: url(../images/chara/chara07.png) left top no-repeat;
}
/*------------------------------------------------------------------------------------------
 * Ehon 
-------------------------------------------------------------------------------------------*/
 #Ehon{
	width: 880px;
	height: 620px;
	background: url(../images/chara/ehon_bg.png) center top no-repeat;
	text-align: center;
	position: relative;
}

#Ehon h1{
	padding-top: 61px;
}

#Ehon  .left{
	width: 264px;
	float: left;
	margin: 24px 0 0 146px;
}

#Ehon .right{
	width: 280px;
	float: right;
	margin: 24px 142px 0 0;
}

#Ehon .btn{
	margin-top: 12px;
}

#Ehon .txt{
	margin-top: 20px;
}

#Ehon #Close{
	position: absolute; right: 20px; top: 20px;
}