@charset "shift_jis";

/* ========================================
	body#prologue
======================================== */
#prologue #main {
	position: relative;
	background: url(../prologue/images/bg_main01.jpg) center 0 no-repeat;
}
#prologue #main .main-wrap {
	background: url(../prologue/images/bg_main02.jpg) center 250px no-repeat;
}
#prologue #main .main-wrap02 {
	background: url(../prologue/images/bg_main03.jpg) center 486px no-repeat;
}

* html #prologue #main .main-wrap02 {
	zoom: 1;
}

#prologue #main .ttl {
	position: absolute;
	left: 50px;
	top: 29px;
}

#prologue #main #darkmoon {
	position: relative;
	height: 486px;
	overflow: hidden;
}

#prologueIntroArea #prologueFirst {
	z-index:50;
}

#prologueIntroArea .introInner {
	height: 486px;
	overflow: hidden;
}

#prologue #main #darkmoon .obake {
	position: absolute;
	right: 0;
	top: 0;
	z-index:90;
}

#prologue #main #darkmoon p.txt-darkmoon {
	position: absolute;
	top: 150px;
	left: 59px;
	background:url(../prologue/images/bg_darkmoon_txt.gif)no-repeat left top;
}

#prologue #main #darkmoon .btn {
	position: absolute;
	top: 392px;
	left: 53px;
	z-index:90;
}
#prologue #main #darkmoon .btn li {
	float: left;
}

#prologue #main #darkmoon .btn li a {
	width: 74px;
	height: 72px;
	display: block;
}

#prologue #main #darkmoon .btn li a.active img {
	visibility:hidden;
}

#prologue #main #darkmoon .btn li#prologueNum01 a.active {
	background: url(../prologue/images/btn_pro01_on.png) left top no-repeat;
}
#prologue #main #darkmoon .btn li#prologueNum02 a.active {
	background: url(../prologue/images/btn_pro02_on.png) left top no-repeat;
}
#prologue #main #darkmoon .btn li#prologueNum03 a.active {
	background: url(../prologue/images/btn_pro03_on.png) left top no-repeat;
}
#prologue #main #darkmoon .btn li#prologueNum04 a.active {
	background: url(../prologue/images/btn_pro04_on.png) left top no-repeat;
}
#prologue #main #darkmoon .btn li#prologueNum05 a.active {
	background: url(../prologue/images/btn_pro05_on.png) left top no-repeat;
}

#prologue #main #darkmoon .img-darkmoon {
	position: absolute;
	width: 542px;
	height: 341px;
	left: 397px;
	top: 128px;
	background: url(../prologue/images/bg_waku.png) left top no-repeat;
}

#prologue #main #darkmoon .img-darkmoon img {
	padding: 62px 0 0 73px;
}

#prologue #main .inner {
	height: 360px;
	padding: 34px 0 0 410px;
}

#prologue #main .request {
	width: 486px;
	height: 146px;
	margin-top: 20px;
	padding: 20px 0 0 17px;
	background: url(../prologue/images/bg_request.png) left top no-repeat;
}

#prologue #main .request dl {
	float: left;
}
#prologue #main .request dt {
	margin-bottom: 16px;
}

#prologue #main .request p {
	width: 164px;
	float: right;
	padding: 30px 11px 0 0;
}

#main #prologueIntroArea .bx-wrapper,
#main #prologueIntroArea .bx-wrapper,
#main #prologueIntroArea .bx-viewport,
#main #prologueIntroArea #prologueSlider,
#prologueIntroArea .noScriptBox,
#prologueIntroArea iframe {
	width: 960px;
	height: 486px;
}

/* ========================================
	popup
======================================== */
body#prologuePop {
	background: none;
}

body#prologuePop .introInner {
	position: relative;
}

body#prologuePop .introInner p {
	position: absolute;
}

body#prologuePop .introInner p.img-darkmoon {
	position: absolute;
	width: 542px;
	height: 341px;
	left: 397px;
	top: 128px;
	background: url(../prologue/images/bg_waku.png) left top no-repeat;
}

body#prologuePop .introInner p.img-darkmoon img {
	padding: 62px 0 0 73px;
}

body#prologuePop .introInner p.txt-darkmoon {
	top: 150px;
	left: 59px;
}

body#prologuePop #lastInner p.txt-darkmoon {
	left: 52px;
}

/* ========================================
	.pagetop
======================================== */
.pagetop {
	background: url(../prologue/images/bg_main04.jpg) center 0 no-repeat;
	margin: 0 auto;
	padding-top: 70px;
}


/* ========================================
	#footer
======================================== */
#footer .footer-inner {
	background: url(../prologue/images/bg_footer_pro.jpg) no-repeat left top;
}