/* ---------------------------------------------------------------
	start max 850px
--------------------------------------------------------------- */

@media screen and ( max-width: 850px ) {
	
	body {
		padding: 50px 0 0;
	}
	
	
/* --------------- header --------------- */
	
	#header {
		height: 50px;
	}

	
	.col_header a.logo {
		width: 54.4%;
		max-width: 300px;
	}
	
	.navi_header {
		width: 45.6%;
		position: relative;
		z-index: 0;
	}
	
	.navi_header .sp_toggle {
		width: 100vw;
		max-width: 450px;
		background-color: rgba(85,181,52,0.9);
		display: none;
		position: absolute;
		top: 50px;
		right: 0;
	}
	
	.navi_header .sp_toggle a {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 8px 10px;
		color: #fff;
		text-align: left;
		border-bottom: solid 1px rgba(255,255,255,0.3);
		display: block;
	}
	
	.navi_header a.btn_reserve {
		width: 110px;
	}
	
	#menubtn {
		width: 50px;
		height: 50px;
		magin: 0;
		padding: 0;
		display: block;
		position: relative;
		z-index: 0;
	}
	
	#menubtn span {
		width: 30px;
		height: 2px;
		margin: 0;
		padding: 0;
		background-color: #55b534;
		display: inline-block;
		position: absolute;
		left: 10px;
	}
	
	#menubtn span:first-child {
		top: 12px;
		-webkit-animation: btn-bar01 .75s forwards;
		animation: btn-bar01 .75s forwards;
	}
	
	@-webkit-keyframes btn-bar01 {
		0% {
			-webkit-transform: translateY(12px) rotate(45deg);
		}
		50% {
			-webkit-transform: translateY(12px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes btn-bar01 {
		0% {
			transform: translateY(12px) rotate(45deg);
		}
		50% {
			transform: translateY(12px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	
	.col_header #menubtn span:nth-child(2) {
		top: 24px;
		transition: all .25s .25s;
		opacity: 1;
	}
	
	.col_header #menubtn span:nth-child(3) {
		top: 36px;
		-webkit-animation: btn-bar03 .75s forwards;
		animation: btn-bar03 .75s forwards;
	}
	
	@-webkit-keyframes btn-bar03 {
		0% {
			-webkit-transform: translateY(-12px) rotate(-45deg);
		}
		50% {
			-webkit-transform: translateY(-12px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes btn-bar03 {
		0% {
			transform: translateY(-12px) rotate(-45deg);
		}
		50% {
			transform: translateY(-12px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	
	#menubtn.open span:nth-of-type(1) {
		-webkit-animation: active-btn-bar01 .75s forwards;
		animation: active-btn-bar01 .75s forwards;
	}
	@-webkit-keyframes active-btn-bar01 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}
		50% {
			-webkit-transform: translateY(12px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(12px) rotate(45deg);
		}
	}
	@keyframes active-btn-bar01 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(12px) rotate(0);
		}
		100% {
			transform: translateY(12px) rotate(45deg);
		}
	}
	#menubtn.open span:nth-of-type(2) {
		opacity: 0;
	}
	#menubtn.open span:nth-of-type(3) {
		-webkit-animation: active-btn-bar03 .75s forwards;
		animation: active-btn-bar03 .75s forwards;
	}
	@-webkit-keyframes active-btn-bar03 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}
		50% {
			-webkit-transform: translateY(-12px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(-12px) rotate(-45deg);
		}
	}
	@keyframes active-btn-bar03 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(-12px) rotate(0);
		}
		100% {
			transform: translateY(-12px) rotate(-45deg);
		}
	}
	
	
	
/* --------------- footer --------------- */
	


	
/* --------------- common --------------- */
	
	
	
	
	
	
	
	
	
	

/* ---------------------------------------------------------------
	end max 850px
--------------------------------------------------------------- */