@charset "UTF-8";


@media screen and (max-width:900px) {

	/* ======================================================================
		common
	====================================================================== */

	body {
		
	}

	.pcv {
		display: none;
	}
	.spv {
		display: block;
	}

	#contents {
		padding-top: 150px;
	}


	

	/* ======================================================================
		nav
	====================================================================== */

	.open nav {
		display: block;

		transition: opacity 2.5s;
		opacity: 1;
		visibility: visible;
	}

	.nav_close {
		position: fixed;
		top: 0;
		right: 0;
		cursor: pointer;
		pointer-events: auto;
		z-index: 150;
	}
	.open .nav_open {
		opacity: 0;
	}

	.nav_open {
		display: block;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 150;
		pointer-events: auto;
	}

	nav {
		display: none;
		width: 100%;
		height: 100%;
		max-height: 100%;

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

		background-image: none;
		background-color: rgba(0,0,0,0.8);
		z-index: 200;
		transition: opacity 2.5s;

		
		cursor: pointer;
	}

	nav .nav_list {
		width: 50%;
		margin-top: 300px;
		display: block;
		text-align: center;
	}


	nav .nav_etc {
		width: 50%;
		display: block;
		pointer-events: none;
		text-align: center;
	}

	nav .nav_logo {
		position: relative;
		left: 0px;
		top: -700px;
		pointer-events: auto;
	}

	nav .nav_bgm {
		position: relative;
		left: 0px;
		top: -15px;
	}
	nav .nav_reserve {
		position: relative;
		left: 0px;
		top: -230px;
	}

	nav img {
		background-position: 0 100%;
		background-size: 100% !important;
	}
	nav .story img { background: url( "../img/nav/story.png" ) no-repeat; width: 168px; height: 100px; }
	nav .character img { background: url( "../img/nav/character.png" ) no-repeat; width: 166px; height: 100px; }
	nav .system img { background: url( "../img/nav/system.png" ) no-repeat; width: 302px; height: 100px; }
	nav .gallery img { background: url( "../img/nav/gallery.png" ) no-repeat; width: 168px; height: 100px; }
	nav .product img { background: url( "../img/nav/product.png" ) no-repeat; width: 298px; height: 100px; }

	nav .nav_bgm img {
		width: 50%;
	}

	nav .nav_reserve img {
		width: 75%;
	}

	nav .new:after {
		background-size: 100%;
		width: 162px;
		height: 76px;
		right: -25px;
		top: -20px;
	}

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

	footer {
		margin-top: 200px;
		background-size: 100% 200%;
		font-size: 0.9em;
	}

	footer .snsicon {
		margin-bottom: 30px;
	}
	footer .snsicon img {
		width: 80px;
		height: 80px;
		transition: filter 0.3s;
	}

	footer .ps_mark {
		height: 20px;
	}
	footer .ps4logo {
		height: 17px;
	}

	/* ======================================================================
		pagetop
	====================================================================== */


}