@charset "utf-8";

@media screen and (max-width: 640px) {
	
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
	line-height: 120%;
	font-kerning: normal;
	font-size: 9px;
	background-color: #000;
	color: #d7d7d7;
	overflow: hidden;
}

a:link { color: #cccccc;}
a:visited { color: #cccccc;}
a:hover { color: #999999;}
a:active { color: #999999;}

a img { border: none;}
a { text-decoration: none;}

img {
	width: 100%;
}

/* ---------- pc only ---------- */

.pc_only {
	display: none;
}

/* ---------- common ---------- */

#chain01_l_sp, #chain02_l_sp, #chain03_l_sp, #chain04_l_sp {
	width: 50%;
	position: absolute;
	left: 0;
	top: -20px;
	z-index: 100;
}
#chain01_r_sp, #chain02_r_sp, #chain03_r_sp, #chain04_r_sp {
	width: 50%;
	position: absolute;
	right: 0;
	top: -20px;
	z-index: 11;
}
	#chain01_l_sp img, #chain01_r_sp img, #chain02_l_sp img, #chain02_r_sp img, #chain03_l_sp img, #chain03_r_sp img, #chain04_l_sp img, #chain04_r_sp img {
		width: 100%;
	}

/* ---------- main ---------- */

#main {
	width: 100%;
	background: url(../img/sp/bg_01.gif) no-repeat top center;
	background-size: 100%;
	position: relative;
}

.r_logo {
	width: 7%;
	position: absolute;
	top: 6px;
	left: 10px;
	z-index: 10000;
}

.n_logo {
	width: 32%;
	position: absolute;
	top: 10px;
	right: 4px;
	z-index: 10000;
}

#chain_fv {
	position: absolute;
	top: 10px;
	z-index: 10;
}

h1 {
	width: 80%;
	margin: 0 auto;
	padding-top: 24px;
	position: relative;
	z-index: 10000;
}

.thunder, .tv_mov, .tv_click, .tv {
	display: none;
}

.tv_sp {
	width: 80%;
	margin: 0 9%;
}

/* ---------- menu ---------- */

#menu {
	background: url(../img/menu_bg.png) repeat-x top center;
	background-size: 230%;
	margin-top: -30px;
	position: relative;
	z-index: 10000;
}

#menu ul {
	padding: 7% 0;
	width: 96%;
	margin: 0 auto;
	text-align: center;
}

	#menu ul li {
		width: 25%;
		display: table-cell;
	}
		#menu ul li img.min {
			width: 81%;
			text-align: center;
		}

/* ---------- detail ---------- */

#detail {
	background: url(../img/bg_02.jpg) no-repeat top center;
	background-size: cover;
	margin-top: -30px;
	padding: 30px 0 40px;
	position: relative;
	z-index: 10;
}

#detail_contents {
	width: 100%;
	margin: 0 auto;
}

/* ----- news ----- */

.news {
	background: url(../img/sp/news_bg.png) repeat-y;
	background-size: 100%;
	width: 100%;
}

#news_contents {
	width: 76%;
	height: 9em;
	overflow: scroll;
	padding: 0 12% 0;
}

	#news_contents dl {
		padding-bottom: 10px;
	}
	
	#news_contents dt {
		float: left;
		padding-right: 1em;
	}
	#news_contents dd {
		float: left;
	}
	
/* ----- spec ----- */

.spec {
	background: url(../img/sp/spec_bg.png) repeat-y;
	background-size: 100%;
}

#spec_contents {
	padding: 0 12%;
	position: relative;
}

.spec_img {
	width: 40%;
	float: left;
	margin-right: 2%;
}

.spec_txt {
	width: 58%;
	padding-top: 1%;
	float: left;
}

	.spec_txt dt {
		float: left;
		padding-right: 1em;
	}
	.spec_txt dd {
		margin-bottom: 4px;
	}

.spec_icon {
	width: 50%;
	padding-top: 2%;
}
	.spec_icon div {
		width: 23.5%;
		float: left;
		vertical-align: bottom;
		margin-right: 2%;
	}
		.spec_icon .min_icon {
			padding-top: 2%;
		}

/* ----- bnr ----- */

.bnr01 {
	width: 92%;
	margin: 0 3%;
}
.bnr02 {
	width: 92%;
	margin: 0 5%;
}

.bnr03 {
	float: left;
	width: 45%;
	margin-left: 3%;
}
.bnr04 {
	float: right;
	width: 45%;
	margin-right: 5%;
}


/* ---------- story ---------- */

#story {
	background: url(../img/bg_03.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
	padding-bottom: 50px;
}

#story_contents {
	width: 100%;
	margin: 0 auto;
	padding-top: 34%;
	position: relative;
}

.story_main {
	width: 90%;
	margin: 0 auto;
}

.story_copy {
	text-align: center;
	min-height: 61px;
	margin-bottom: 10px;
}

	.story_img01 p, .story_img02 p, .story_img03 p, .story_img04 p {
		letter-spacing: -1px;
		text-align: center;
		padding: 4px 0 16px;
	}
	
.story_txt {
	margin: 20px auto 0;
	width: 90%;
}
	.story_link {
		width: 40%;
		margin: 6px 0 20px;
		float: right;
	}
	
.story_img_sp {
	width: 55%;
	float: left;
}

.story_mainimg {
	width: 45%;
	padding-top: 30%;
	float: right;
}


/* ---------- quest ---------- */

#quest {
	background: url(../img/bg_04.jpg) no-repeat;
	background-size: cover;
	position: relative;
	padding-bottom: 40px;
}

#quest_contents {
	width: 100%;
	margin: 0 auto;
	padding-top: 34%;
	position: relative;
}

.quest_copy {
	width: 78%;
	margin: 0 8% 0 14%;
}

.quest_3ds {
	width: 90%;
	margin: 10px auto;
}

.quest_right {
}

.sp_select_b {
	width: 96%;
	margin: 0 auto;
}

.sp_select_t {
	width: 96%;
	margin: 0 auto;
}
	
.quest_select {
	background: url(../img/sp/quest_select_bg.png) repeat-y;
	background-size: 100%;
	width: 96%;
	margin: 0 auto;
	position: relative;
}

.quest_select:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
	.quest_select .select_a {
		width: 40%;
		float: left;
		padding-left: 8%;
	}
	.quest_select .select_b {
		width: 40%;
		float: right;
		padding-right: 8%;
	}

.quest_main {
	width: 90%;
	margin: 0 auto;
}
	.quest_main .a_tit {
		margin: 15px 0;
	}

.quest_point {
	width: 90%;
	margin: 0 auto;
}
	.a_point_tit {
		width: 64%;
		padding: 10px 0 0;
	}
	.a_point_txt {
		padding: 10px 0;
	}
	.a_point_mv {
		width: 50%;
		margin: 0 auto;
	}

/* ---------- riddle ---------- */

#riddle {
	width: 100%;
	position: relative;
}

.riddle_main_sp {
	width: 100%;
	position: absolute;
	padding-top: 72%;
	opacity: 0;
	z-index: 100000;
}

.riddle_bg {
	width: 100%;
	position: relative;
	z-index: 10;
}

/* ---------- mission ---------- */

#mission {
	background: url(../img/bg_06.jpg) no-repeat;
	background-size: cover;
	position: relative;
}

#mission_contents {
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding-top: 30%;
}

.mission_copy {
	margin: 10px auto;
}

.mission_img01 {
	width: 30%;
	position: absolute;
	top: 32%;
	right: 2%;
	z-index: 100;
}

.mission_01 {
	background: url(../img/mission_01_bg.png) no-repeat;
	background-size: 100%;
	width: 76%;
	margin-left: 4%;
}
.mission_02 {
	background: url(../img/mission_02_bg.png) no-repeat;
	background-size: 100%;
	width: 76%;
	margin-right: 4%;
	float: right;
}

	.mission_01_tit {
		width: 46%;
		text-align: center;
		padding: 4% 0 2%;
		margin: 0 auto;
	}
	.mission_02_tit {
		width: 80%;
		text-align: center;
		padding: 5% 0 2%;
		margin: 0 auto;
	}
	.mission_01_img, .mission_02_img {
		text-align: center;
		width: 80%;
		margin: 0 auto;
	}
	.mission_01_txt {
		width: 90%;
		height: 4em;
		padding-bottom: 12%;
		margin: 2% auto 0;
	}
	.mission_01_txt p {
		text-shadow: 2px 2px 3px #000;
		color: #fff;
	}
	.mission_02_txt {
		width: 86%;
		padding-bottom: 18%;
		margin: 2% auto 0;
		padding-left: 4%;
	}
	.mission_02_txt p {
		text-shadow: 2px 2px 3px #000;
		color: #fff;
	}

.mission_img02 {
	width: 26%;
	position: absolute;
	top: 70%;
	left: 1%;
}

.mission_tit {
	width: 80%;
	margin: 10px auto;
}


/* ---------- footer ---------- */

#footer p {
	text-align: center;
	padding: 10px 0;
}

#pagetop_btn {
	width: 10%;
	z-index: 100000;
	position: fixed;
	bottom: 1%;
	right: 2%;
}

/* ---------- animate ---------- */

.story_img01, .story_img02, .story_img03, .story_img04, .story_txt, .riddle_main_sp, .mission_01, .mission_02, .mission_tit, #footer {
	opacity: 0;
}


}