@charset "utf-8";

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
reset
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align:middle;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* HTML5BP:
   These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
base
*/
body {
font-family:"HiraKakuProN-W6","PhonepadTwo",Arial,sans-serif;
font-size:13px;
line-height:1.4;
background:#fff;
color:#000;
letter-spacing:-0.001em;
word-wrap:break-word;
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0, 0.5);
}
* {
	box-sizing: border-box;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
枠
*/
html, body {
	color: #333;
}
#gnHeader {
	margin-bottom: 0;
}
#gn_footer {
	padding-bottom: 57px;			/* ナビ分確保 */
}
#contentArea {
	padding: 50px 0;
	background: #fff;
	color: #ccc;
}
#contentArea img {
	width: 100%;
}
#contentArea .inner {
	margin-left: 20px;
	margin-right: 20px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
共通
*/
* {
	box-sizing: border-box;
}
#impact-ad {
	display: none;
}
.transparent {
	width: 1px;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
}
.effect {
	visibility: hidden;
	position: relative;
	}
	.effectInner {
		position: relative;
	}
.clearfix {
	zoom: 1;
}
.clearfix:after {
	content:"";
	display: block;
	clear: both;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
MAIN
*/
#main {
	width: 100%;
	position: relative;
	overflow: hidden;
	}
	#main p {
		margin-top: 35px;
		font-size: 14px;
		color: #666;
		line-height: 1.8;
		text-align: center;
	}
	@media screen and (max-width: 320px) {
		#main p {
			font-size: 14px;
		}
	}

#debut {
	margin-top: 30px;
	}
	#debut .personality {
		margin-top: 30px;
		}
		#debut .personality li {
			margin-top: 20px;
		}
	#debut .attention {
		margin-top: 15px;
		}
		#debut .attention li {
			display: inline;
			font-size: 12px;
			color: #333;
		}
	#debut #plusEquip {
		margin-top: 35px;
		}

#recommend {
	margin-top: 20px;
	padding: 25px 0;
	background: #9fa0a0;
	}
	#recommend a {
		width: 214px;
		margin: 15px auto 0;
		display: block;
	}
	#recommend ul {
		margin-top: 20px;
		}
		#recommend li {
			display: inline;
			font-size: 10px;
			color: #fff;
		}


#thanks {
	}
	#thanks a {
		width: 214px;
		margin: 30px auto 0;
		display: block;
	}

.navi {
	width: 100%;
	height: 57px;
	position: fixed;
	bottom: 0;
	background: #c7002b;
	}
	.navi li {
		width: 20%;
		border-left: 1px solid #fff;
		float: left;
		height: 57px;
		overflow: hidden;
	}
	.navi li:first-child {
		border-left: none;
		}
		.navi li a {
			width: 100%;
			height: 100%;
			display: block;
			text-align: center;
			}
			.navi li a img {
				width: auto;
				height: 100%;
				text-align: center;
			}