/*------------------------------------------------------------------------------
								INTRO
------------------------------------------------------------------------------*/
#contents-wrapper {
	padding-bottom:60px;
}
.main-img {
	width: 100%;
	height: 0px;
	padding-top: 80%;
	position: relative;
}
#main-img-box {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left:0px;
	background: url("../../img/chara/main2.jpg") no-repeat center center / cover;
}
#main-img-box.act2 {
	left:0%;
}
#main-img-box.act1 {
	left:0%;
}
#main-img-box.act3 {
	left:0%;
}

.chara-navi {
	display: none;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
#contents-wrapper {
	padding-bottom:12vw;
}
.main-img {
	padding-top: 160%;
	overflow: hidden;
}
#main-img-box {
	width: 187.5%;
	height: 100%;
	position: absolute;
	top:0px;
}
#main-img-box.act2 {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	left:-43.75%;
}
#main-img-box.act1 {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	left:0%;
}
#main-img-box.act3 {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	left:-87.5%;
}
.chara-navi {
display: block;
	position: absolute;
	width: 150px;
	height: 150px;
	top:50%;
	margin-top: -75px;
	-webkit-border-radius:75px;
	-moz-border-radius:75px;
	border-radius:75px;
}
#navi-left {
	left:-75px;
	text-align: right;
	background: #000000 url("../../img/chara/left-b.png") no-repeat right 10px center;
}
#navi-left.act {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity:1;
}
#navi-left.act-none {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity:0;
}
#navi-right {
	right:-75px;
	text-align: left;
	background: #000000 url("../../img/chara/right-b.png") no-repeat left 10px center;
}
#navi-right.act {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity:1;
}
#navi-right.act-none {
	-webkit-transition: all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity:0;
}
.chara-navi a {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}

/*------------------------------------------------------------------------------
								INTRO
------------------------------------------------------------------------------*/
}
@media print{
}