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

#contents {
	position: relative;
}

#chara_box {
	width: 1020px;
	height: 720px;
/*	margin: -42px 0 0 -20px;*/
	margin: 0px 0 0 -20px;
	position: relative;
}
#chara_list li {
	width: 1020px;
	height: 720px;
	position: absolute;
	top: 0;
	left: 0;
}

#chara_list li p {
	position: absolute;
	top: 0;
	left: 0;
	
	opacity: 0;
	filter: alpha(opacity=0);
}

#chara_list li p.main{
	left:612px;
	top: 0;
}
#chara_list li p.face1{
	left: 405px;
	top: 146px;
}
#chara_list li p.face2{
	left: 504px;
	top: 319px;
}
#chara_list li p.back{
	left: 390px;
	top: 491px;
}
#chara_list li p.text{
	left: 131px;
	top: 226px;
}

#chara_thumb {
	position: absolute;
	top: 52px;
	left: 35px;
	z-index:10;
}
#chara_thumb li {
	float: left;
	cursor: pointer;
	position: relative;
}
#chara_thumb li img {
	transition: opacity 0.2s linear;
}
#chara_thumb li img:hover {
	opacity: 0.7;
}
#chara_thumb li p img:hover {
	opacity: 1;
}
#chara_thumb li p{
	position: absolute;
	width: 0;
	height: 0;
	left: 36px;
	top: 78px;
}
#chara_thumb li p.top{
	top: 0px;
}

#btn_prev {
	position: absolute;
	top: 368px;
	left: 16px;
	cursor: pointer;
	z-index:10;
}

#btn_next {
	position: absolute;
	top: 368px;
	right: 16px;
	cursor: pointer;
	z-index:10;
}

#btn_prev img, #btn_next img {
	transition: opacity 0.2s linear;
}
#btn_prev .hover_off, #btn_next .hover_off {
	opacity: 1;
	filter: alpha(opacity=100);
}
#btn_prev .hover_on, #btn_next .hover_on {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
#btn_prev:hover .hover_off, #btn_next:hover .hover_off {
	opacity: 0;
	filter: alpha(opacity=0);
}
#btn_prev:hover .hover_on, #btn_next:hover .hover_on {
	opacity: 1;
	filter: alpha(opacity=100);
}


#btn_prev.none, #btn_next.none {
	display: none;
}