@charset "UTF-8";

/* ========================================
	common
======================================== */
body {
	background: url(../common/bg_card.jpg) repeat center top;
}

#gnavi ul {
	background: url(../common/bg_gnavi03.png) no-repeat 347px 16px;
}

#deco-corner01 {
	position: absolute;
	top: 48px;
	left: 515px;
	z-index: 30;
}
#deco-corner02 {
	position: absolute;
	top: 68px;
	left: 503px;
	z-index: 30;
}
#deco-corner03 {
	position: absolute;
	top: 518px;
	left: 35px;
	z-index: 0;
}
.js-on #deco-corner01 div,
.js-on #deco-corner02 div,
.js-on #deco-corner03 div {
	display: none;
}

/* ========================================
	.story
======================================== */
.story {
	margin: 0 0 44px;
}
.movie {
	margin-top: 17px;
	margin-left: -3px;
	margin-bottom: 20px;
	width: 403px;
	height: 267px;
	background: url(../story_character/images/bg_movie.png) no-repeat left top;
	padding: 23px 24px 0;
}

/* ========================================
	.character
======================================== */
.character {
	margin: 0 0 -12px;
}
.chara-slide {
	height: 715px;
	overflow: hidden;
}
#slide-area,
.bx-wrapper {
	float: left;
	width: 465px;
	height: 715px;
}

.chara-slide .pager {
	float: right;
	width: 364px;
}
.chara-slide .pager .label-b {
	margin: 18px 0 0;
}
.chara-slide .pager-list li {
	float: left;
	cursor: pointer;
}
.chara-slide .pager-list li a.active {
	position: relative;
	display: block;
}
.chara-slide .pager-list li a.active .layer {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 115px;
	height: 115px;
	background: url(../story_character/images/pager_chara_layer.png) no-repeat left top;
}