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

/* -----------------------------------------------
 [Base]
-------------------------------------------------- */
body {
	/* IE6対策（スクロール時の表示ブレ防止） */
	background-attachment: fixed;
	height: 100%;
	background: #000;
}

/*-----------------[ document base ]-----------------*/
#document {
	width: 100%;
	/*min-width: 1060px;*/
	min-width: 1024px;
	position: relative;
	background: #000;
}
.temp #document {
	background: url(../../img/bg_temp.jpg) repeat-y center top;
}
#story #document {
	background: url(../../img/bg_story.jpg) no-repeat center 109px;
}

/*-----------------[ conainer base ]-----------------*/
.container {
	position: relative;
}
.container_inn {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

/*-----------------[ header base ]-----------------*/
#header {
	width: 100%;
	height: 260px;
	background: url(../../img/bg_header.png) no-repeat center bottom;
	/* ↓ 開発用 ↓ */
	/*border-bottom: 1px solid #77f;*/
}

/*-----------------[ logo base ]-----------------*/
#logo {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}
#logo_box {
	height: 109px;
	/* ↓ 開発用 ↓ */
	/*border-right: 1px solid #77f;
	border-left: 1px solid #77f;
	border-bottom: 1px solid #77f;*/
}

/*-----------------[ navi base ]-----------------*/
#navi {
	width: 100%;
	position: relative;
}
#navi_box {
	height: 80px;
	padding: 29px 0 0;
	/* ↓ 開発用 ↓ */
	/*border-right: 1px solid #7f7;
	border-left: 1px solid #7f7;
	border-bottom: 1px solid #7f7;*/
}

/*-----------------[ contents base ]-----------------*/
.bg_footer_splash {
	background: url(../../img/bg_footer.png) no-repeat center bottom;
}
#contents {
	width: 100%;
	margin-top: -151px;
	position: relative;
}
#contents_box {
	padding-bottom: 75px;
	/* ↓ 開発用 ↓ */
	/*border-bottom: 1px solid #f77;*/
}
#contents_box .container_inn {
	/* ↓ 開発用 ↓ */
	/*border-right: 1px solid #f77;
	border-left: 1px solid #f77;
	border-top: 1px solid #f77;
	border-bottom: 1px solid #f77;*/
}

/*-----------------[ footer base ]-----------------*/
#footer {
	width: 100%;
	position: relative;
	background: #000;
}
#footer #footer_box {
	height: 50px;
	/* ↓ 開発用 ↓ */
	/*border-right: 1px solid #77f;
	border-left: 1px solid #77f;
	border-top: 1px solid #77f;*/
}

/* -----------------------------------------------
 [Contents]
-------------------------------------------------- */
/*-----------------[ logo ]-----------------*/
#logo_box > div {
	position: absolute;
	display: none;
	z-index: 10;
}
#logo_box .logo_00 {
	top: 3px;
	left: 2px;
}
#logo_box .logo_01 {
	top: 1px;
	right: 300px;
}

/*-----------------[ navi ]-----------------*/
#navi li {
	border: none;
	outline: none;
	display: none;
	float: left;
}
#navi li a {
	height: 80px;
}

/*-----------------[ Footer ]-----------------*/
#footer .pagetop .btn {
	position:absolute;
	right: 2px;
	top: -72px;
	display: none;
}
#footer .socialArea {
	width: 600px;
	position: absolute;
	left: 20px;
	top: 17px;
}
#footer .socialArea li {
	float: left;
	margin-right: 2px;
}
#footer .bookmarkLink {
	width: 300px;
	height: 18px;
	font-size: 5px;
	position: absolute;
	left: 200px;
	top: 1px;
}
#footer .bookmarkLink .bookmark_title {
	margin-right: 4px;
}
#footer .bookmarkLink li {
	float: left;
	margin-right: 4px;
}
#footer .copyright {
	position:absolute;
	right: 7px;
	top: 18px;
}

/*-----------------[ Loading ]-----------------*/
#loading {
	width:100%;
	height:100%;
	overflow:hidden;
	background:#000 url(../../img/load.gif) no-repeat center 400px;
	left:0;
	top:0;
	z-index:9999;
	color:#FFF;
	text-align:center;
	position:absolute;
}

/*-----------------[ #story .co01 ]-----------------*/
#story .co01 {
	height: 1200px;
	position: relative;
}
#story .co01 > div {
	display: none;
	position: absolute;
}
#story .co01 .co01_img.hover {
	z-index: 50;
}
#story .co01_1 {
	top: 110px;
	left: -300px;
	z-index: 30;
}
#story .co01_2 {
	top: 145px;
	right: -300px;
	z-index: 20;
}
#story .co01_3 {
	top: 652px;
	right: -300px;
	z-index: 10;
}

/*-----------------[ #story .co02 ]-----------------*/
#story .co02 {
	height: 546px;
	margin-top: -180px;
	padding-left: 52px;
	display: block;
}
#story .co02 > div {
	display: none;
	top: 0;
	left: 0;
}

/*-----------------[ #tokucho .co01 ]-----------------*/
#tokucho .co01 {
	height: 2746px;
	padding-top: 77px;
	padding-bottom: 200px;
	position: relative;
}
#tokucho .co01 > div {
	margin: 28px 0 0 27px;
	display: none;
}
#tokucho .co01 > div:first-child {
	margin-top: 0;
}

/*-----------------[ #spec .co01 ]-----------------*/
#spec .co01 {
	height: 816px;
}
#spec .co01 > div {
	display: none;
}
#spec .co01_1 {
	padding-top: 37px;
	padding-left: 10px;
}

/*-----------------[ #game_flow ]-----------------*/
#game_flow .lnav {
	width: 100%;
	height: 77px;
	margin-top: 53px;
}
#game_flow .lnav_inn {
	width: 515px;
	height: 77px;
	margin: 0 auto;
	padding-left: 55px;
	background: url(../../img/flow_lnav_bg.png) no-repeat;
	position: relative;
	top: -77px;
	display: none;
}
#game_flow .lnav li {
	margin: 14px 20px 0 0;
	float: left;
	cursor: pointer;
	position: relative;
	top: -86px;
	display: none;
}

/*-----------------[ #game_flow .co01 ]-----------------*/
#game_flow .co01 {
	height: 658px;
	padding-top: 30px;
	padding-bottom: 110px;
	position: relative;
}
#game_flow .co01 > div {
	display: none;
}
#game_flow .co01 .co01_1 {
	width: 872px;
	margin: 0 auto;
}
#game_flow .co01 .co01_2 {
	position: absolute;
	top: 178px;
	left: 263px;
}
#game_flow .co01 .co01_3 {
	position: absolute;
	top: 162px;
	left: 485px;
}
#game_flow .co01 .co01_4 {
	position: absolute;
	top: 109px;
	left: 689px;
}
#game_flow .co01 .co01_img {
	cursor: pointer;
}

/*-----------------[ #game_flow .co02 ]-----------------*/
#game_flow .co02 {
	height: 745px;
	padding-bottom: 110px;
	position: relative;
	display: none;
}
#game_flow .co02 > div {
	margin: 16px 0 0;
	text-align: center;
}
#game_flow .co02 > div:first-child {
	margin-top: 3px;
}
#game_flow .co02 > div.co02_1 {
	margin-left: -2px;
}

/*-----------------[ #game_flow .co03 ]-----------------*/
#game_flow .co03 {
	height: 1933px;
	padding-bottom: 110px;
	position: relative;
	display: none;
}
#game_flow .co03 > div {
	margin: 16px 0 0;
	text-align: center;
}
#game_flow .co03 > div:first-child {
	margin-top: 3px;
}

/*-----------------[ #game_flow .co04 ]-----------------*/
#game_flow .co04 {
	height: 745px;
	position: relative;
	display: none;
}
#game_flow .co04 > div {
	margin: 16px 0 0;
	text-align: center;
}
#game_flow .co04 > div:first-child {
	margin-top: 3px;
}
#game_flow .co04 > div.co04_1 {
	margin-left: -2px;
}

/*-----------------[ #effect .co01 ]-----------------*/
#effect .co01 {
	height: 3271px;
	padding-top: 77px;
	padding-bottom: 110px;
	position: relative;
}
#effect .co01 > div {
	margin: 28px 0 0 0;
	display: none;
}
#effect .co01 > div:first-child {
	margin-top: 0;
}
#effect .co01 > div.co01_3 {
	margin-top: 23px;
}
#effect .co01 > div.co01_4 {
	margin-top: 15px;
}

/*-----------------[ #guide .co01 ]-----------------*/
#guide .co01 {
	height: 1322px;
	padding-top: 77px;
	padding-bottom: 140px;
	position: relative;
}
#guide .co01 > div {
	margin: 28px 0 0 0;
	text-align: center;
	display: none;
}
#guide .co01 > div:first-child {
	margin-top: 0;
}

/*-----------------[ #download .co01 ]-----------------*/
#download .co01 {
	height: 569px;
	padding-top: 77px;
	padding-bottom: 90px;
	position: relative;
}
#download .co01_title {
	text-align: center;
	display: none;
}
#download .co01 ul {
	width: 660px;
	margin: 0 auto;
	text-align: center;
}
#download .co01 ul:first-child {
	width: 825px;
}
#download .co01 li {
	margin: 60px 6px 0;
	float: left;
	text-align: center;
	display: none;
}
#download .box_icon {
	width: 128px;
	height: 128px;
	margin: 0 auto;
	padding: 6px;
	display: block;
	background: url(../../img/twitter_icon_shadow.png) no-repeat;
}
#download .box_icon:hover img {
	opacity: .8;
}
#download .box_title {
	margin-top: 5px;
}