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

	CSS2.0 & 2.1 & 3 Document
	
	for only common base styles

------------------------------------------------*/
/*------------------------------------------------------------------------------

								clearFix
								
------------------------------------------------------------------------------*/
#globalNav ul:after
{
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	content: ".";
}


/*------------------------------------------------------------------------------

							テキスト画像代替
							
------------------------------------------------------------------------------*/
#globalNav li a,
#globalNav li a span,
#headingContainer h2,
a.backButton
{
	display: block;
	margin: 0;
	padding: 0;
	text-indent: -10000px;
	text-decoration: none;
	text-align: left;
/*\*/
	overflow: hidden;
/* */
}

/*------------------------------------------------------------------------------

							選択時
							
------------------------------------------------------------------------------*/
*::selection{
	background: transparent;
}
*::-moz-selection {
	background: transparent;
}

/*------------------------------------------------------------------------------

								html
								
------------------------------------------------------------------------------*/
html{
	width: 100%; height: 100%;
}

/*------------------------------------------------------------------------------

								body
								
------------------------------------------------------------------------------*/
body{
	width: 100%; min-width: 1037px;
	background-color: #ffffff;
	color: #000000;
	font-family: "ヒラギノ角ゴ Pro", Osaka, "メイリオ", "ＭＳ ゴシック",sans-serif;
	font-size: 100%;
	text-align: left;
	line-height: 1;
}


/*------------------------------------------------------------------------------

								#mainSection
								
------------------------------------------------------------------------------*/
#mainSection{
	position: relative;
	top: 0px; left: 0px;
	z-index: 10;
	visibility: hidden;
	width: 100%;
	padding-bottom: 1.5em;
	overflow : hidden;
	zoom: 1;
}


/*------------------------------------------------------------------------------

								#bgContainer
								
------------------------------------------------------------------------------*/
#bgContainer{
	position: absolute;
	top: 0px; left: 0px;
	z-index: 1;
	/*visibility: hidden;*/
	width: 100%; height: 100%;
	background: #3f4032 url(../../images/common/dq8_bg.jpg) no-repeat fixed center top;
	background-size: 2000px 1600px;
}

#bgContainer div{
	width: 100%; height: 100%;
	background: #3f4032 url(../../images/common/dq8_bg_blur.jpg) no-repeat fixed center top;
	background-size: 2000px 1600px;
}

/*------------------------------------------------------------------------------

								#contentWrapper
								
------------------------------------------------------------------------------*/
#contentWrapper{
	position: relative;
	z-index: 10;
	width: 920px; /*min-height: 700px;*/
	margin: 0 auto;
}

/*------------------------------------------------------------------------------

								#siteID
								
------------------------------------------------------------------------------*/
#siteID{
	position: absolute;
	top: 410px; left: 50%;
	z-index: 1000;
	width: 483px; height: 287px;
	margin-left: -242px;
	cursor: pointer;
}

#siteID a{
	display: block;
	width: 100%; height: 100%;
}

#siteID.active{
	cursor: default;
}

#siteID.active a{
	cursor: default;
}

#siteID img{
	position: relative;
	top: 0px; left: 0px;
}

/*------------------------------------------------------------------------------

								#globalNav
								
------------------------------------------------------------------------------*/
#globalNav{
	position: absolute;
	top: 10px; left: 0px;
	z-index: 200;
	width: 916px; height: 84px;
}

#globalNav ul{
	width: 916px; height: 84px;
}

#globalNav li{
	float: left;
	height: 85px;
}

#globalNav li a{
	width: 100%; height: 100%;
}

#globalNav li a span{
	visibility: hidden;
	width: 100%; height: 100%;
	cursor: pointer;
}

#globalNav li.prologue{
	width: 197px;
}

#globalNav li.prologue a{
	background: url(../../images/common/global_nav.png) no-repeat scroll 0px 0px;
}

#globalNav li.prologue a span{
	background: url(../../images/common/global_nav.png) no-repeat scroll 0px -84px;
}

#globalNav li.characters{
	width: 174px;
}

#globalNav li.characters a{
	background: url(../../images/common/global_nav.png) no-repeat scroll -197px 0px;
}

#globalNav li.characters a span{
	background: url(../../images/common/global_nav.png) no-repeat scroll -197px -84px;
}

#globalNav li.about{
	width: 174px;
}

#globalNav li.about a{
	background: url(../../images/common/global_nav.png) no-repeat scroll -371px 0px;
}

#globalNav li.about a span{
	background: url(../../images/common/global_nav.png) no-repeat scroll -371px -84px;
}

#globalNav li.system{
	width: 174px;
}

#globalNav li.system a{
	background: url(../../images/common/global_nav.png) no-repeat scroll -545px 0px;
}

#globalNav li.system a span{
	background: url(../../images/common/global_nav.png) no-repeat scroll -545px -84px;
}

#globalNav li.movie{
	width: 197px;
}

#globalNav li.movie a{
	background: url(../../images/common/global_nav.png) no-repeat scroll -719px 0px;
}

#globalNav li.movie a span{
	background: url(../../images/common/global_nav.png) no-repeat scroll -719px -84px;
}


/*------------------------------------------------------------------------------
									subNav
------------------------------------------------------------------------------*/
#globalNav ul ul{
	display: none;
	width: 100%; height: 84px;
}

#globalNav li li{
	float: left;
	width 100%; height: 85px;
}

#globalNav li li a{
	width: 100%; height: 100%;
}

/*------------------------------------------------------------------------------

								#mainContent
								
------------------------------------------------------------------------------*/
#mainContent{
	position: relative;
	top: 100px;
	z-index: 100;
	margin-bottom: 200px;
}

/*------------------------------------------------------------------------------

								#contentFrame
								
------------------------------------------------------------------------------*/
#contentFrame{
	position: relative;
	top: 40px; left: 40px;
	width: 832px;
}

span#contentFrameTL{
	position: absolute;
	top: -40px; left: -40px;
	display: block;
	width: 40px; height: 40px;
}

span#contentFrameTOP{
	position: absolute;
	top: -40px; left: 0px;
	display: block;
	width: 100%; height: 40px;
}

span#contentFrameTR{
	position: absolute;
	top: -40px; right: -40px;
	display: block;
	width: 40px; height: 40px;
}

span#contentFrameRIGHT{
	position: absolute;
	top: 0px; right: -40px;
	display: block;
	width: 40px; height: 100%;
}

span#contentFrameBR{
	position: absolute;
	bottom: 6px; right: -40px;
	display: block;
	width: 40px; height: 40px;
}

span#contentFrameBOTTOM{
	position: absolute;
	bottom: 6px; left: 0px;
	display: block;
	width: 100%; height: 40px;
}

span#contentFrameBL{
	position: absolute;
	bottom: 6px; left: -40px;
	display: block;
	width: 40px; height: 40px;
}

span#contentFrameLEFT{
	position: absolute;
	top: 0px; left: -40px;
	display: block;
	width: 40px; height: 100%;
}

span#contentFrameTOP_bold{
	position: absolute;
	top: -47px; left: -32px;
	display: block;
	width: 100%; height: 16px;
	visibility: hidden;
}

span#contentFrameBOTTOM_bold{
	position: absolute;
	bottom: 1px; left: -32px;
	display: block;
	width: 100%; height: 16px;
	visibility: hidden;
}

span#contentFrameBallTL{
	position: absolute;
	top: -55px; left: -55px;
	display: block;
	width: 32px; height: 32px;
	visibility: hidden;
}

span#contentFrameBallTR{
	position: absolute;
	top: -56px; right: -47px;
	display: block;
	width: 32px; height: 32px;
	visibility: hidden;
}


span#contentFrameBallBR{
	position: absolute;
	bottom: -1px; right: -47px;
	display: block;
	width: 32px; height: 32px;
	visibility: hidden;
}


span#contentFrameBallBL{
	position: absolute;
	bottom: -1px; left: -55px;
	display: block;
	width: 32px; height: 32px;
	visibility: hidden;
}

span#contentFrameEdgeTL{
	position: absolute;
	top: -35px; left: -34px;
	display: block;
	width: 16px; height: 16px;
}

span#contentFrameEdgeTR{
	position: absolute;
	top: -35px; right: -34px;
	display: block;
	width: 16px; height: 16px;
}

span#contentFrameEdgeBR{
	position: absolute;
	bottom: 12px; right: -34px;
	display: block;
	width: 16px; height: 16px;
}

span#contentFrameEdgeBL{
	position: absolute;
	bottom: 12px; left: -34px;
	display: block;
	width: 16px; height: 16px;
}



/*------------------------------------------------------------------------------

								#contentContainer
								
------------------------------------------------------------------------------*/
#contentContainer{
	position: relative;
	top: -25px; left: -20px;
	width: 873px; height: 440px;
	overflow: hidden;
	background: url(../../images/common/content_bg.jpg) repeat-y scroll left top;
}



/*------------------------------------------------------------------------------

								#headingContainer
								
------------------------------------------------------------------------------*/
#headingContainer{
	position: absolute;
	top: -55px; left: 50%;
	margin-left: -127px;
	width: 255px; height: 46px;
	background: url(../../images/common/heading_frame.png) no-repeat scroll left top;
	visibility : hidden;
}

#headingContainer div{
	position: relative;
	top: 6px;
	width: 100%; height: 34px;
	overflow: hidden;
}

#headingContainer div div{
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: auto;
	overflow: visible;
}

#headingContainer h2{
	width: 236px; height: 34px;
	background-image: url(../../images/common/heading_sprite.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
}

#headingContainer h2.prologue{
	background-position: 0px -6px;
}

#headingContainer h2.characters{
	background-position: 0px -48px;
}

#headingContainer h2.about{
	background-position: 0px -91px;
}

#headingContainer h2.system{
	background-position: 0px -133px;
}

#headingContainer h2.trailer{
	background-position: 0px -174px;
}

#headingContainer h2.movie{
	background-position: 0px -215px;
}

#headingContainer h2.playMovie{
	background-position: 0px -257px;
}


/*------------------------------------------------------------------------------

								#informationSection
								
------------------------------------------------------------------------------*/
#informationSection{
	position: absolute;
	bottom: 0px; left: 0px;
	z-index: 300;
	width: 100%;
	padding: 10px 0px 8px 0px;
	background: url(../../images/common/info_section_bg.png) repeat scroll left top;
}

#informationSection p{
	text-align: center;
	font-size: 80%;
	color: #ffffff;
	line-height: 1.2;
}


/*------------------------------------------------------------------------------

								a.backButton
								
------------------------------------------------------------------------------*/
a.backButton{
	width: 155px; height: 35px;
	margin: 0 auto;
	background: url(../../images/common/back_button.png) repeat scroll 0px 0px;
}

a.backButton:hover,
a.backButton:active{
	background: url(../../images/common/back_button.png) repeat scroll 0px -35px;
}

/*------------------------------------------------------------------------------

								#loadingContainer
								
------------------------------------------------------------------------------*/
#loadingContainer{
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #ffffff;
	z-index: 10000;
	text-align: center;
}

#loadingBody{
	position: absolute;
	top: 50%; left: 50%;
	width: 106px; height: 94px;
	margin-top: -47px; margin-left: -53px;
	overflow: hidden;
	visibility: hidden;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

#loadingBody div{
	position: absolute;
	top: 50%; left: 50%;
	width: 106px; height: 94px;
	margin-top: -47px; margin-left: -53px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll 0px 0px;
}

#loadingTextLoading{
	position: absolute;
	top: 50%; left: 50%;
	width: 57px; height: 60px;
	margin-top: -47px; margin-left: -53px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll 0px -91px;
	visibility: hidden;
}

#loadingTextComplete{
	position: absolute;
	top: 50%; left: 50%;
	width: 57px; height: 60px;
	margin-top: -47px; margin-left: -53px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll -57px -91px;
	visibility: hidden;
}

#leftEye{
	position: absolute;
	top: 59px; left: 29px;
	width: 20px; height: 20px;
}

#leftEye span{
	position: absolute;
	top: 50%; left: 50%;
	display: block;
	width: 7px; height: 6px;
	margin-top: -3px;
	margin-left: -3px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll -123px -97px;
}

#rightEye{
	position: absolute;
	top: 59px; left: 53px;
	width: 20px; height: 20px;
}

#rightEye span{
	position: absolute;
	top: 50%; left: 50%;
	display: block;
	width: 7px; height: 6px;
	margin-top: -3px;
	margin-left: -3px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll -123px -97px;
}

#loadingContainer .ball{
	font-size: 70%;
}




/*------------------------------------------------------------------------------

								#appBannerSection
								
------------------------------------------------------------------------------*/
#appBannerSection{
	padding: 10px 0px;
	text-align: center;
	background-color: #ffffff;
	border-top: 1px solid #666666;
}

#appBannerSection a{
	margin: 0px 10px;
}

#appBannerSection a.appStoreBanner{
	position: relative;
	top: -3px;
}