@charset "UTF-8";


/*------------------  top  ------------------*/
body{
	min-width:100%;
}
#wrapper{
	padding-bottom:20px;
}
#content{
	margin:50px 0 0;
	height:700px;
	text-align: center;
	background:url(../img/chara/bg.jpg) center center no-repeat;
	background-size:cover;
	overflow:hidden;
}
#content .wrap{
	position:absolute;
	top:17px;
	width:1300px;
	height:615px;
	background:url(../img/chara/base.png) center center no-repeat;
}


#content .ov,
#content .fuki{
	position:absolute;
	left:0;
	top:0;
	width:100%;
}
#content li{
	position:absolute;
}
.c01{left:33px;	top:70px;}
.c02{left:222px; top:71px;}
.c03{left:109px; top:146px;}
.c04{left:109px; top:358px;}
.c05{left:48px;	top:485px;}
.c06{left:212px; top:485px;}
.c07{left:364px; top:36px;}
.c08{left:591px; top:36px;}
.c09{left:743px; top:69px;}
.c10{left:848px; top:70px;}
.c11{left:417px; top:244px;}
.c12{left:589px; top:263px;}
.c13{left:738px; top:244px;}
.c14{left:451px; top:480px;}
.c15{left:590px; top:455px;}
.c16{left:990px; top:74px;}
.c17{left:1150px; top:74px;}
.c18{left:1071px; top:262px;}
.c19{left:991px; top:435px;}
.c20{left:1149px; top:435px;}
#content li.s{ width:85px; height: 85px; border-radius:43px;}
#content li.m{ width:121px; height: 121px; border-radius:60px;}
#content li.b{ width:143px; height: 143px; border-radius:72px;}
#content .btns li{
	cursor: pointer;
}
#content .ov li{
	opacity:0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
}
#content .ov li.on{
	opacity:1;
}
#detail{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:650px;
	background:rgba(0,0,0,0.4);
}
#detail div{
	display:none;
	position:absolute;
	left:50%;
	top:50%;
}
#detail div.on{
	display:block;
}

#detail div.b{
	margin:-175px 0 0 -400px;
}

#detail div.m{
	margin:-175px 0 0 -200px;
}

#detail div.s{
	margin:-166px 0 0 -140px;
}

#detail .close{
	cursor:pointer;
	position:absolute;
	right:0;
	top:0;
}