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

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

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

								clearFix

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


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

							テキスト画像代替

------------------------------------------------------------------------------*/
#leadingSection h2,
#leadingSection p,
#platformInfoSection p,
#storySection p,
#portalInfoSection p,
#attentionBanner p
{
	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: #000000;
	color: #ffffff;
	font-family: "ヒラギノ角ゴ Pro", Osaka, "メイリオ", "ＭＳ ゴシック",sans-serif;
	font-size: 100%;
	text-align: left;
	line-height: 1;
}


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

								#mainSection

------------------------------------------------------------------------------*/
#mainSection{
	position: relative;
	z-index: 10;
	visibility: hidden;
	width: 100%; height: 1524px;
	overflow : hidden;
	background: #000000 url(../../images/common/bg.jpg) no-repeat scroll center top;
}


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

								#contentWrapper

------------------------------------------------------------------------------*/
#contentWrapper{
	position: relative;
	width: 1037px;
	margin: 0 auto;
}


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

								#mainVisual

------------------------------------------------------------------------------*/
#mainVisual{
	position: absolute;
	top: 9px; left: 0px;
	z-index: 10;
}

#mainVisualFrame{
	position: absolute;
	top: 0px; left: 0px;
}

#mainVisual:after{
	position: absolute;
	top: 0px; left: 0px;
	display: block;
	width: 1037px; height: 531px;
	background: url(../../images/common/blank.png) repeat scroll left top;
	content: ".";
	text-indent: -10000px;
}

#mainVisualHolder{
	display: block;
	width: 1037px; height: 531px;
	background: url(../../images/common/main_visual.jpg) no-repeat scroll left top;
}
/*
#mainVisualHolder:after{
	display: block;
	width: 1037px; height: 531px;
	background: url(../../images/common/main_visual.jpg) no-repeat scroll left top;
	content: ".";
	text-indent: -10000px;
}*/



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

								#titleLogo

------------------------------------------------------------------------------*/
#titleLogo{
	position: absolute;
	top: 500px; left: 10px;
	overflow: visible;
	z-index: 100;
}

#titleLogo img{
	position: relative;
}

#titleLogo:after,
#titleLogo span{
	position: absolute;
	top: 0px; left: 0px;
	display: block;
	width: 570px; height: 195px;
	background: url(../../images/common/blank.png) repeat scroll left top;
	content: ".";
	text-indent: -10000px;
}


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

								#leadingSection

------------------------------------------------------------------------------*/
#leadingSection{
	position: absolute;
	top: 690px; left: 60px;
}

#leadingSection h2{
	width: 536px; height: 108px;
	background: url(../../images/common/leading.png) no-repeat scroll 0px 0px;
}

#leadingSection p{
	width: 536px; height: 120px;
	background: url(../../images/common/leading.png) no-repeat scroll 0px -112px;
}


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

								.normalFrame

------------------------------------------------------------------------------*/
.normalFrame{
	border: 4px solid #ffffff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
	background-color: #000000;
}

.normalFrameThin{
	border: 3px solid #ffffff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	background-color: #000000;
}

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

								#ssSection

------------------------------------------------------------------------------*/
#ssSection{
	display:inline-block;
	/*width:330px;*/ height:193px;
	position:absolute;
	top:663px; left:632px;
	/*padding:1px;*/
}

#ssSection a{
	position: relative;
	float: left;
	width: 107px; height: 191px;
	padding: 1px;
	margin-right: 2px;
	background-color: #000000;
	/*margin-right: 3px;*/
	/*padding: 1px solid #000000;*/
	/*cursor: pointer;*/
}
/*
#ssSection a img{
	display: block;
	margin: 1px;
}
*/
/*------------------------------------------------------------------------------

								#platformInfoSection

------------------------------------------------------------------------------*/
#platformInfoSection{
	position:absolute;
	top:880px; left:633px;
	width: 328px; height: 52px;
	background:url(../../images/common/platform_info_v2.png) no-repeat scroll 0px 0px;
}

#distDate{
	width:328px; height:23px;
}

#platform{
	width:328px; height:27px;
}


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

								#guidelineSection

------------------------------------------------------------------------------*/
#guidelineSection{
	position: absolute;
	top: 968px; left: 0;
	width: 100%;
	text-align: center;
}
#guidelineSection img{
	transition: opacity 0.3s;
}
#guidelineSection img:hover{
	opacity: 0.8;
}

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

								#storySection

------------------------------------------------------------------------------*/
#storySection{
	position: absolute;
	top: 1058px; left: 69px;
	width: 892px; height: 230px;
}

#storySection p{
	position: relative;
	top: 26px;
	width: 533px; height: 173px;
	margin: 0 auto;
	background: url(../../images/common/story.jpg) no-repeat scroll 0px 0px;
}


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

								#portalInfoSection

------------------------------------------------------------------------------*/
#portalInfoSection{
	position:absolute;
	top:1337px; left:61px;
}

#portalInfoSection a{
	display:block;
	width:924px; height:126px;
	position:relative;
}

#bannerPortalOvImage{
	position: absolute;
	top: 0px; left: 0px;
}

/*
#portalInfoSection a:after{
	position: absolute;
	top: 0px; left: 0px;
	display: block;
	width: 901px; height: 71px;
	background: url(../../images/common/blank.png) repeat scroll left top;
	content: ".";
	text-indent: -10000px;
}
*/

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

								#mainSectionOverlapLayer

------------------------------------------------------------------------------*/
#mainSectionOverlapLayer{
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #000000;
	z-index: 10000;
}

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

								#overlapContainer

------------------------------------------------------------------------------*/
#overlapContainer{
	position: fixed;
	top: 0px; left: 0px;
	display: none;
	width: 100%; height: 100%;
	z-index: 30000;/*above the header*/
}

#overlapContainer .container{
	position: relative;
	top: 0px; left: 0px;
	text-align: center;
}

#overlapContainer .bg{
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	background: #000000;
}

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

								#loadingContainer

------------------------------------------------------------------------------*/
#loadingContainer{
	position: fixed;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	z-index: 1000;
	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;
	visibility: hidden;
}

#loadingTextLoading span{
	display : block;
	width: 57px; height: 60px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll 0px -91px;
}

#loadingTextComplete{
	position: absolute;
	top: 50%; left: 50%;
	width: 57px; height: 60px;
	margin-top: -47px; margin-left: -53px;
	visibility: hidden;
}

#loadingTextComplete span{
	display : block;
	width: 57px; height: 60px;
	background: url(../../images/common/loading_sprite.png) no-repeat scroll -57px -91px;
}

#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: #000000;
	border-top: 1px solid #666666;
}

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



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

								#appBannerSectionTop

------------------------------------------------------------------------------*/
#appBannerSectionTop{
	width:410px;
	position:absolute;
	top:565px; left:598px;
	text-align:center;
}

#appBannerSectionTop a{
	margin:0 1px 0 0;
}



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

								#attentionBanner

------------------------------------------------------------------------------*/
#attentionBanner{
	width:392px; height:32px;
	position:absolute;
	top:615px; left:598px;
}

#attentionBanner p{
	width:392px; height:32px;
	position: relative;
	top:0;
	margin: 0 auto;
	background: url(../../images/common/attention.png) no-repeat scroll 0px 0px;
}