@charset "UTF-8";

.pcv {
	display: none;
}

/* new --------------------------------------------------------------------------------- */

header .contents li.new::after {
	top: 20px;
	left: auto;
	right: auto;
}
h2.new::after {
	right: 0;
	top: 0px;
}

/* glovalnav ====================================================================== */

#nav-toggle, #nav-close {
	text-align: right;
	
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
}

header #gloval-nav {
	
	width: 100%;
	height: 100%;

	opacity: 0;
	
	position: fixed;
	top: 0;
	left: 0;

	background-color: white;
	z-index: 200;
    visibility: hidden;
}

.open header #nav-toggle {
	opacity: 0;
}

.open header #gloval-nav {
    transition: opacity 0.5s;
    opacity: 1;
	visibility: visible;
}

/* glnav メニュー項目 */
header .contents ul {
	width: 100%;
	height: 66px;
	margin: 0 auto;
	text-align: center;
}
header li {
	position: relative;
	line-height: 66px;
	margin: 0 5px 0;
	width: 100%;
}
	
header li a {
	display: inline-block;
}

/* gloval navi item --------------------------------------------------------------- */
header li a {
	height: 41px;
	margin-top: 17px;
}
header li a.top {
	width: 101px;
	background: url( ../img/nav/nav_top_sp.png );
}
header li a.about {
	width: 166px;
	background: url( ../img/nav/nav_about_sp.png );
}
header li a.story {
	width: 160px;
	background: url( ../img/nav/nav_story_sp.png );
}
header li a.character {
	width: 282px;
	background: url( ../img/nav/nav_character_sp.png );
}
header li a.system {
	width: 189px;
	background: url( ../img/nav/nav_system_sp.png );
}
header li a.gallery {
	width: 215px;
	background: url( ../img/nav/nav_gallery_sp.png );
}
header li a.product {
	width: 229px;
	background: url( ../img/nav/nav_product_sp.png );
}
header li a:hover {
	background-position: 0 100%;
}

header li.emblem {
	padding: 8px 0 0;
}


/* reserve ------------------------------------------------------------------ */

header li.reserve {
	margin-top: 40px;
}
header .reserve img {
	background-image: url( ../img/btn_reserve_sp.png?2 );
	width: 422px;
	height: 60px;
}

header a.reserve  {
}

header a.reserve  {
	background-image: url( ../img/btn_reserve_sp.png?2 );
	background-position: 0 100%;
	display: inline-block;
	width: 422px;
	height: 60px;
}

header .reserve img:hover {
	transition: opacity 0.2s;
	opacity: 0;
}

/*======================================================================
	footer
======================================================================*/

footer {
	font-size: 0.8em;
}
footer .snsicon img {
	width: 96px;
	margin: 5px;
	transition: all 0.3s;
}

footer li img {
	width: 197px;
}

footer .nippon1banner {
	width: 300px;
}