@charset "UTF-8";
/*
 * sp_header.css
 */ 
@media screen and (max-width:767px){
	html,body{
		overflow:visible;
	}
	html.fix,body.fix{
		overflow:hidden;
	}
	.wrapper{
		position: relative;
	}
	header #sp_nav{
		position: fixed;
		right:0;
		top:0;
		width:100%;
		height:100%;
		background-color:#9b8c69;
	}
	#menu_btn{
		position:absolute;
		right:5%;
		top:25px;
		width:30px;
		height:26px;
		box-sizing: border-box;
		z-index: 100;
	}
	#menu_btn span {
		position: absolute;
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		right: 0;
		width: 100%;
		height: 4px;
		background-color: #9b8c69;
	}
	#menu_btn.active span {
		background-color: #ffffff;
	}
	#menu_btn span:nth-of-type(1) {
		top: 0;
	}
	#menu_btn span:nth-of-type(2) {
		top: 11px;
	}
	#menu_btn span:nth-of-type(3) {
		bottom: 0;
	}
	#menu_btn span:nth-of-type(1) {
		-webkit-animation: menu-bar01 .75s forwards;
		animation: menu-bar01 .75s forwards;
	}
	@-webkit-keyframes menu-bar01 {
		0% {
			-webkit-transform: translateY(11px) rotate(45deg);
		}
		50% {
			-webkit-transform: translateY(11px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar01 {
		0% {
			transform: translateY(11px) rotate(45deg);
		}
		50% {
			transform: translateY(11px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	#menu_btn span:nth-of-type(2) {
		transition: all .25s .25s;
		opacity: 1;
	}
	#menu_btn span:nth-of-type(3) {
		-webkit-animation: menu-bar02 .75s forwards;
		animation: menu-bar02 .75s forwards;
	}
	@-webkit-keyframes menu-bar02 {
		0% {
			-webkit-transform: translateY(-11px) rotate(-45deg);
		}
		50% {
			-webkit-transform: translateY(-11px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar02 {
		0% {
			transform: translateY(-11px) rotate(-45deg);
		}
		50% {
			transform: translateY(-11px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	#menu_btn.active span:nth-of-type(1) {
		-webkit-animation: active-menu-bar01 .75s forwards;
		animation: active-menu-bar01 .75s forwards;
	}
	@-webkit-keyframes active-menu-bar01 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}
		50% {
			-webkit-transform: translateY(11px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(11px) rotate(45deg);
		}
	}
	@keyframes active-menu-bar01 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(11px) rotate(0);
		}
		100% {
			transform: translateY(11px) rotate(45deg);
		}
	}
	#menu_btn.active span:nth-of-type(2) {
		opacity: 0;
	}
	#menu_btn.active span:nth-of-type(3) {
		-webkit-animation: active-menu-bar03 .75s forwards;
		animation: active-menu-bar03 .75s forwards;
	}
	@-webkit-keyframes active-menu-bar03 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}
		50% {
			-webkit-transform: translateY(-11px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(-11px) rotate(-45deg);
		}
	}
	@keyframes active-menu-bar03 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(-11px) rotate(0);
		}
		100% {
			transform: translateY(-11px) rotate(-45deg);
		}
	}
	#sp_nav{
		padding-top:30%;
		z-index:10;
		text-align:center;
	}
	#sp_nav li{
		margin-bottom:35px;
	}
	#sp_nav li a{
		font-size:143%;
		color:#ffffff;
		text-decoration:none;
	}
	#sp_nav li a span{
		font-size:86%;
	}
}