@charset "UTF-8";
/*drawerMenu.css */

#spNav { display:none; }
/* 三 */
#spMenuBut { display:none; }


/*--------------------------------------------------------------
	SP　表示領域が768px以下
--------------------------------------------------------------*/
@media (max-width:768px) {

			/* 三 */
			#spMenuBut {
				display:block;
				position:fixed;
				right:0px;
				top:0px;
				width:60px;
				height:60px;
				padding:0px;
				cursor:pointer;
				/*z-index:200003; /*3*/
			}

			#spMenuBut span {
				display:block;
				position:absolute;
				width:40%;
				left:0;
				right:0;
				margin:0 auto;
				border-bottom:solid 2px rgba(100,100,100,1);
				-webkit-transition: .35s ease-in-out;
				-moz-transition: .35s ease-in-out;
				transition: .35s ease-in-out
			}

			#spMenuBut span:nth-child(1) { top:22px; }
			#spMenuBut span:nth-child(2) { top:30px; }
			#spMenuBut span:nth-child(3) { top:38px; }

			
			
			/* body */
			body { height:100%; }
			
			
			/* header */
			header { position:fixed; top:0; left:0; width:100%; z-index:200002; /*2*/ }
			


			/* nav */
			nav { 
				visibility:hidden;
				clear:both;
				position:absolute;
				left:0;
				top:-1000px;
				width:100%;
				height:100vh;
				padding:0 0 200px 0;
				-webkit-transition:.5s ease-in-out;
				-moz-transition:.5s ease-in-out;
				-o-transition:.5s ease-in-out;
				transition:.5s ease-in-out;
				z-index:200001; /*1*/
				overflow:auto;
				-webkit-overflow-scrolling: touch;
			}
			
			#spNav { display:block; }
			
			/* ====================  Click時  ==================== */
			/* 三 */
			.openNav #spMenuBut {
				/*background:#ccc;*/
			}
			
			.openNav #spMenuBut span:nth-child(1) {
				top:30px;
				-webkit-transform:rotate(-45deg);
				-moz-transform:rotate(-45deg);
				transform:rotate(-45deg)}

			.openNav #spMenuBut span:nth-child(2),
			.openNav #spMenuBut span:nth-child(3) {
				top:30px;
				-webkit-transform:rotate(45deg);
				-moz-transform:rotate(45deg);
				transform:rotate(45deg)}


			/* nav */
			.openNav nav {
				visibility:visible;
				-moz-transform: translateY(1060px);
				-webkit-transform: translateY(1060px);
				transform: translateY(1060px);
				height:100vh;
				overflow:auto;
				-webkit-overflow-scrolling: touch;
				background:rgba(255,255,255,0.95);
			}
			
			body.openNav { position:fixed; }
			body.openNav #spLogo { display:none; }

}