@charset "UTF-8";
/*style.css  for navi*/

/* Toggle(Button) */
#navToggle {
	display:none;
	position:fixed;/*to body*/
	right:0;
	top:0;
	width:38px;
	height:33px;
	padding:10px;
	background:#ffffff;
	text-align:center;
	cursor:pointer;
	}
	#navToggle div {
		position:relative;
		height:100%;
	}
	#navToggle span {
		display:block;
		position:absolute;
		width:100%;
		border-bottom:solid 3px #333333;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		}
	#navToggle span:nth-child(1) {top:0;}
	#navToggle span:nth-child(2) {top:10px;}
	#navToggle span:nth-child(3) {top:20px;}
	#navToggle strong {
		position:absolute;
		display:block;
		width:100%;
		bottom:-10px;
		left:0;
		color:#333333;
		font-size:1.0rem;
		text-align:center;
	}


/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
	top: 11px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
	}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
	}


/*header menu*/
	.openNav nav {
		-moz-transform: translateY(0px);
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-transition:.3s ease-in-out;
		-moz-transition:.3s ease-in-out;
		-o-transition:.3s ease-in-out;
		transition:.3s ease-in-out;
		}
	.closeNav nav {/*メニュー隠し縦位置*/
		-moz-transform: translateY(-2000px);
		-webkit-transform: translateY(-2000px);
		transform: translateY(-2000px);
		-webkit-transition:.3s ease-in-out;
		-moz-transition:.3s ease-in-out;
		-o-transition:.3s ease-in-out;
		transition:.3s ease-in-out;
		}

@media screen and (max-width: 750px) {
	.openNav nav {
		-moz-transform: translateY(0px) !important;
		-webkit-transform: translateY(0px) !important;
		transform: translateY(0px) !important;
		-webkit-transition:.3s ease-in-out;
		-moz-transition:.3s ease-in-out;
		-o-transition:.3s ease-in-out;
		transition:.3s ease-in-out;
		}
	.closeNav nav {/*メニュー出現縦位置*/
		-moz-transform: translateY(-2000px) !important;
		-webkit-transform: translateY(-2000px) !important;
		transform: translateY(-2000px) !important;
		-webkit-transition:.3s ease-in-out;
		-moz-transition:.3s ease-in-out;
		-o-transition:.3s ease-in-out;
		transition:.3s ease-in-out;
		}
}