@charset "utf-8";

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

								clearFix

------------------------------------------------------------------------------*/
.characterSection .characterImage:after,
.systemSection .systemImage:after,
.wrapper:after
{
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	content: ".";
}


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

							テキスト画像代替

------------------------------------------------------------------------------*/
#mainSection .body h2,
#mainSection .body dt,
#mainSection .body dd,
#platformInfo h2,
#platformInfo dt,
#platformInfo dd,
h2 span,
#storyDescription,
.characterDescription h3,
.characterDescription p,
.systemSection .systemDescription h3,
.systemSection .systemDescription p,
#featureSection h3,#featureSection p
{
	display: block;
	margin: 0;
	padding: 0;
	text-indent: -10000px;
	text-decoration: none;
	text-align: left;
/*\*/
	overflow: hidden;
/* */
}

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

							font

------------------------------------------------------------------------------*/
@font-face {
	font-family : '';

}



html{
	background-color: #ffffff;
}

body{
	height: 0px;
	overflow: hidden;
	background-color: #ffffff;
	color: #000000;
	font-family: Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif;
	font-size: 18px;
	line-height: 140%;
}

body.loaded{
	height: auto;
	overflow: visible;
}

a:link,
a:visited{
	color: #000000;
}

#dummyTopContent{
	position: absolute;
	top: 5px;
}

.wrapper{
	width: 1000px;
	margin: 0 auto;
}

#container{
	width: 100%; min-width: 1000px;
	overflow: hidden;
}

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

								#loadingContainer

------------------------------------------------------------------------------*/
#loadingContainer{
	position: fixed;
	top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #ffffff;
	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/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/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/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/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/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;
}



/*--------------------------------------------------
	#container
--------------------------------------------------*/
#container{
	/*display: none;*/
	width: 100%;
	
}


/*--------------------------------------------------
	.leftButton
--------------------------------------------------*/
.leftButton{
	position: absolute;
	top: 50%; left: 50%;
	z-index: 100;
	display: block;
	width: 80px; height: 135px;
	margin-left: -500px;
	margin-top: -55px;
	background: url(../images/left_button.png) no-repeat scroll 0px 0px;
	cursor: pointer;
}

.leftButton:hover{
	margin-left: -501px;
}

.leftButton:active{
	margin-left: -501px;
	margin-top: -54px;
}


/*--------------------------------------------------
	.rightButton
--------------------------------------------------*/
.rightButton{
	position: absolute;
	top: 50%; left: 50%;
	z-index: 100;
	display: block;
	width: 80px; height: 135px;
	margin-left: 420px;
	margin-top: -55px;
	background: url(../images/right_button.png) no-repeat scroll 0px 0px;
	cursor: pointer;
}

.rightButton:hover{
	margin-left: 421px;
}

.rightButton:active{
	margin-left: 421px;
	margin-top: -54px;
}

/*--------------------------------------------------
	#mainSection
--------------------------------------------------*/
#mainSection{
	position: relative;
	width: 100%;/* min-height: 1000px;*/
	padding-bottom: 25px;
	background: url(../images/bg_main.jpg) no-repeat scroll center top;
	background-size: cover;
}

#titleLogo{
	position: absolute;
	top: 175px; left: 50%;
	z-index: 20;
	margin-left: -250px;
}

#mainVisual{
	width: 100%; height: 475px;
	position: relative;
	/*top: -39px;*/
	z-index: 10;
	/*margin-bottom: -39px;*/
}

#mainVisual img{
	position: relative;
	top: -29px;
	display: block;
	margin: 0 auto 0 auto;
}

#lineTop{
	display: block;
	position: absolute;
	top: 0px; left: 0px;
	z-index: 10;
	width: 100%; height: 25px;
	background: url(../images/mainvisual_line_top.png) repeat-x scroll center top;
	background-size: contain;
}

#lineBottom{
	display: block;
	position: absolute;
	bottom: 0px; left: 0px;
	width: 100%; height: 45px;
	background: url(../images/mainvisual_line_bottom.png) repeat-x scroll center top;
	background-size: contain;
}

#mainSection .body{
	width: 870px; height: 176px;
	margin: 20px auto;
	background: url(../images/main_text_body_v3.png) center center / contain no-repeat scroll;
}



/*------------------------------------------------------------------------------
								#mainSection .appBannerSection
------------------------------------------------------------------------------*/
#mainSection .appBannerSection{
	padding: 10px 0px 15px 0px;
	text-align: center;
}

#mainSection .appBannerSection a{
	margin: 0px 15px;
}



/*------------------------------------------------------------------------------
								#pvLink
------------------------------------------------------------------------------*/
#pvLink{
	display: block;
	/*width: 432px; height: 296px;*/
	width: 570px; height: 359px;
	margin: 0px auto;
/*	padding-bottom: 368px;*/
	background: url(../images/pv_thumbnail.png) no-repeat scroll left top;
	background-size: contain;
}

#pvLink:hover{
	display: block;
	background: url(../images/pv_thumbnail_ov.png) no-repeat scroll left top;
	background-size: contain;
}

.guidelineSection{
	padding: 20px 0 378px;
	text-align: center;
}


/*--------------------------------------------------
	#gNav
--------------------------------------------------*/
#gNav{
	position: absolute;
	/*top: 1198px;*/
	top: 1298px; left: 50%;
	z-index: 200;
	width: 988px; height: 332px;
	margin-left: -494px;
}

#gNav.fixed{
	position: fixed;
	top: -248px;
	z-index: 200;
}

#gNav li{
	float: left;
}

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

#gNavStory{
	width: 330px; height: 331px;
	background: url(../images/global_nav_story.png) no-repeat scroll 0px 0px;
}

#gNavStory a:hover{
	background: url(../images/global_nav_story_active.png) no-repeat scroll 0px 0px;
}

#gNavSystem{
	width: 330px; height: 331px;
	background: url(../images/global_nav_system.png) no-repeat scroll 0px 0px;
}

#gNavSystem a:hover{
	background: url(../images/global_nav_system_active.png) no-repeat scroll 0px 0px;
}

#gNavFeature{
	width: 328px; height: 331px;
	background: url(../images/global_nav_feature.png) no-repeat scroll 0px 0px;
}

#gNavFeature a:hover{
	background: url(../images/global_nav_feature_active.png) no-repeat scroll 0px 0px;
}

/*--------------------------------------------------
	#platformInfo
--------------------------------------------------*/
#platformInfo{
	clear: both;
	width: 100%; height: 210px;
	background: #666666 url(../images/platform_info_text.png) no-repeat scroll center top;
	background-color:  rgba(0,0,0,0.5);
}




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

								#storySection

------------------------------------------------------------------------------*/
#storySection{
	width: 100%;
	/*padding-bottom: 100px;*/
	background: url(../images/bg_story.jpg) no-repeat scroll center top;
	background-size: cover;
}

#storySection h2{
	width: 100%; height: 87px;
	margin-bottom: 45px;
	background: url(../images/heading_bg.jpg) repeat-x scroll left top;
}

#storySection h2 span{
	width: 470px; height: 86px;
	margin: 0 auto;
	background: url(../images/haeding_story.jpg) no-repeat scroll center top;
}

#storyDescription{
	position: relative;
	z-index: 20;
	width: 948px; height: 324px;
	margin: 0px auto 0px auto;
	background: url(../images/story_text.png) no-repeat scroll center top;
}

#characterHeading{
	position: relative;
	z-index: 30;
	margin-top: 50px;
	/*margin-bottom: -50px;*/
}

#characterHeading span{
	background: url(../images/heading_character.jpg) no-repeat scroll center top !important;
	background-size: cover !important;
}


#characterSectionContainer{
	position: relative;
	width: 100%; height: 760px;
	margin-top: -55px;
	overflow: hidden;
	padding-top: 55px;
	white-space: nowrap;
}

#characterSectionContainerInner{
	position: relative;
	width: 100%; height: 660px;	
}

#characterSectionContainer .characterSection{
	position: absolute;
	top: 0; left: 0;
	/*display: inline-block;*/
	width: 100%;
}

#characterSectionContainer .characterSection:nth-child(2){
	left: 100%;
}

#characterSectionContainer .characterSection:nth-child(3){
	left: 200%;
}

#characterSectionContainer .characterSection:nth-child(4){
	left: 300%;
}

#characterSectionContainer .characterSection:nth-child(5){
	left: 400%;
}

#characterSectionContainer .characterSection:nth-child(6){
	left: 500%;
}

#characterSectionContainer .characterSection:nth-child(7){
	left: 600%;
}

.characterSection .wrapper{
	width: 810px;
}

.characterSection .characterDescription{
	position: relative;
	z-index: 30;
	width: 416px; height: 294px;
	margin-bottom: 25px;
}

.characterSection .characterImage{
	position: relative;
	z-index: 20;
	width: 445px;
}

.characterSection .characterImage a{
	position: relative;
	float: left;
	margin-right: 28px;
	border: 1px solid #ffffff;
	display: block;
	width: 192px; height: 340px;
}

.characterSection .characterImage a:after{
	content: "";
	position: absolute;
	left: 8px; bottom: 14px;
	z-index: 10;
	display: block;
	width: 48px; height: 48px;
	background: url(../images/zoom_icon.png) no-repeat scroll 0px 0px;
	text-indent: -10000px;
}

.characterSection .characterImage a img{
	display: block;
}

.characterSection .characterImage a:hover{
	border: 1px solid #bb9bee;
	background-color: #ffffff;
}

.characterSection .characterImage a:hover img{
	opacity: 0.8;
}

.characterIllust{
	position: absolute;
	z-index: 10;
}

/*------------------------------------------------------------------------------
								#heroSection
------------------------------------------------------------------------------*/
#heroSection .characterDescription{
	background: url(../images/hero_text.png) no-repeat scroll center top;
}

#heroSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -630px;
}

/*------------------------------------------------------------------------------
								#papasSection
------------------------------------------------------------------------------*/
#papasSection .characterDescription{
	width: 481px; height: 294px;
	background: url(../images/papas_text.png) no-repeat scroll center top;
}

#papasSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -630px;
}

#papasSection .characterImage{
	margin-left: 30px;
}

/*------------------------------------------------------------------------------
								#biancaSection
------------------------------------------------------------------------------*/
#biancaSection .characterDescription{
	width: 528px; height: 310px;
	background: url(../images/bianca_text.png) no-repeat scroll center top;
}

#biancaSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -650px;
}

#biancaSection .characterImage{
	margin-left: 55px;
}

/*------------------------------------------------------------------------------
								#floraSection
------------------------------------------------------------------------------*/
#floraSection .characterDescription{
	width: 466px; height: 270px;
	background: url(../images/flora_text.png) no-repeat scroll center top;
}

#floraSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -700px;
}

#floraSection .characterImage{
	margin-left: 135px;
}

/*------------------------------------------------------------------------------
								#deboraSection
------------------------------------------------------------------------------*/
#deboraSection .characterDescription{
	width: 528px; height: 310px;
	background: url(../images/debora_text.png) no-repeat scroll center top;
}

#deboraSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -650px;
}

#deboraSection .characterImage{
	margin-left: 160px;
}

/*------------------------------------------------------------------------------
								#sanchoSection
------------------------------------------------------------------------------*/
#sanchoSection .characterDescription{
	width: 418px; height: 270px;
	background: url(../images/sancho_text.png) no-repeat scroll center top;
}

#sanchoSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -680px;
}

#sanchoSection .characterImage{
	margin-left: 110px;
}

/*------------------------------------------------------------------------------
								#boyGirlSection
------------------------------------------------------------------------------*/
#boyGirlSection .characterDescription{
	width: 482px; height: 294px;
	background: url(../images/boy_girl_text.png) no-repeat scroll center top;
}

#boyGirlSection .characterIllust{
	top: -240px; left: 50%;
	margin-left: -610px;
}

#boyGirlSection .characterImage{
	margin-left: 32px;
}

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

								#systemSection

------------------------------------------------------------------------------*/
#systemSection{
	width: 100%;
	padding-bottom: 70px;
	background: url(../images/bg_story.jpg) no-repeat scroll center top;
	/*background-size: cover;*/
}

#systemSection h2{
	width: 100%; height: 87px;
	margin-bottom: 55px;
	background: url(../images/heading_bg.jpg) repeat-x scroll left top;
}

#systemSection h2 span{
	width: 470px; height: 86px;
	margin: 0 auto;
	background: url(../images/haeding_system.jpg) no-repeat scroll center top;
}

#systemSectionContainer{
	position: relative;
	width: 100%; height: 774px;
}

#systemSectionContainerInner{
	position: relative;
	width: 100%; height: 660px;	
}

#systemSectionContainerInner .systemSection{
	position: absolute;
	top: 0; left: 0;
	display: inline-block;
	width: 100%;
}

#systemSectionContainerInner .systemSection:nth-child(2){
	left: 100%;
}

#systemSectionContainerInner .systemSection:nth-child(3){
	left: 200%;
}

#systemSectionContainerInner .systemSection:nth-child(4){
	left: 300%;
}

#systemSectionContainerInner .systemSection:nth-child(5){
	left: 400%;
}

#systemSectionContainerInner .systemSection:nth-child(6){
	left: 500%;
}

#systemSectionContainerInner .systemSection:nth-child(7){
	left: 600%;
}

.systemSection .wrapper{
	width: 980px;
}

.systemSection .systemDescription{
	width: 730px; height: 262px;
	margin: 0px auto 32px auto;
}

.systemSection .systemImage{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	white-space: nowrap;
}

.systemSection .systemImage a{
	position: relative;
	display: inline-block !important;
	border: 1px solid #ffffff;
	display: block;
	width: 271px; height: 480px;
	margin: 0px 20px;
}

.systemSection .systemImage a:after{
	content: "";
	position: absolute;
	left: 8px; bottom: 14px;
	z-index: 10;
	display: block;
	width: 48px; height: 48px;
	background: url(../images/zoom_icon.png) no-repeat scroll 0px 0px;
	text-indent: -10000px;
}

.systemSection .systemImage a img{
	/*display: block;*/
	width: 271px; height: 480px;
}

.systemSection .systemImage a:hover{
	border: 1px solid #bb9bee;
	background-color: #ffffff;
}

.systemSection .systemImage a:hover img{
	opacity: 0.8;
}

/*------------------------------------------------------------------------------
								#monsterSystemSection
------------------------------------------------------------------------------*/
#monsterSystemSection{

}

#monsterSystemSection .systemDescription{
	background: url(../images/system_text.png) no-repeat scroll left top;
}

/*------------------------------------------------------------------------------
								#casinoSystemSection
------------------------------------------------------------------------------*/
#casinoSystemSection{

}

#casinoSystemSection .systemDescription{
	width: 802px;
	background: url(../images/casino_text.png) no-repeat scroll left top;
}

/*------------------------------------------------------------------------------
								#sugorokuSystemSection
------------------------------------------------------------------------------*/
#sugorokuSystemSection{

}

#sugorokuSystemSection .systemDescription{
	width: 906px;
	background: url(../images/sugoroku_text.png) no-repeat scroll left top;
}

/*------------------------------------------------------------------------------
								#slimeTouchSection
------------------------------------------------------------------------------*/
#slimeTouchSection{

}

#slimeTouchSection .systemDescription{
	width: 906px;
	background: url(../images/slime_touch_text.png) no-repeat scroll left top;
}

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

								#featureSection

------------------------------------------------------------------------------*/
#featureSection{
	width: 100%;
	padding-bottom: 80px;
	background: url(../images/bg_feature.jpg) no-repeat scroll center top;
	background-size: cover;
}

#featureSection h2{
	width: 100%; height: 87px;
	margin-bottom: 60px;
	background: url(../images/heading_bg.jpg) repeat-x scroll left top;
}

#featureSection h2 span{
	width: 470px; height: 86px;
	margin: 0 auto;
	background: url(../images/haeding_feature.jpg) no-repeat scroll center top;
}

#featureSection .wrapper{
	width: 928px;
}

#feature01{
	width: 450px; height: 294px;
	margin: 0 auto 33px auto;
	background: url(../images/feature_text_01.png) no-repeat scroll left top;
}

#feature02{
	float: left;
	width: 450px; height: 294px;
	background: url(../images/feature_text_02.png) no-repeat scroll left top;
}

#feature03{
	float: right;
	width: 450px; height: 294px;
	background: url(../images/feature_text_03.png) no-repeat scroll left top;
}


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

							#youtubeContainer

------------------------------------------------------------------------------*/
#youtubeContainer{
	position: fixed;
	top: 0px; left: 0px;
	z-index: 2000;
	display: none;
	opacity: 0;
	width: 100%; height: 100%;
}

#youtubeContainerBg{
	width: 100%; height: 100%;
	background-color: #000000;
	opacity: 0.7;
}

.youtubeVideoContainer{
	background-color: #000000;
}