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

@media screen and ( max-width: 850px ) {
	
	
	
	
/* --------------- header --------------- */
	
	header {
		height: 50px;
		background-color: #fff;
		position: fixed;
	}
	
	.inner_header {
		padding: 0 0 0 10px;
	}
	
	a.logo_header {
		width: 62%;
		max-width: 220px;
		padding: 5px 0;
	}
	
	#navi {
		width: 100px;
		position: relative;
		z-index: 0;
	}
	
	#navi .navilist {
		width: 0;
		height: 100vw;
		border-bottom: none;;
		transition: all .5s ease;
		-moz-transition: all .5s ease;
		-webkit-transition: all .5s ease;
		overflow: hidden;
		position: absolute;
		top: 50px;
		right: -10px;
	}
	
	#navi.open .navilist {
		width: 300px;
		right: 0;
		transition: all .5s ease;
		-moz-transition: all .5s ease;
		-webkit-transition: all .5s ease;
	}
	
	#navi .navilist ul {
		width: 300px;
		height: auto;
		background-color: #fff;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#navi ul:before {
		content: "";
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		display: block;
		box-shadow: -4px 4px 4px 0px rgba(0,0,0,0.1);
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#navi ul li {
		padding: 0;
		border-top: solid 1px #dde5f9;
		display: block;
	}
	
	#navi ul li:last-child {
		border-bottom: solid 1px #dde5f9;
	}
	
	#navi ul li a {
		padding: 8px;
		display: block;
	}
	
	#navi a.btn_headercontact {
		width: 50px;
		height: 50px;
	}
	
	#navi a.btn_headercontact .txt {
		display: none;
	}
	
    #navi a.btn_headerrecruit {
        width: 50px;
        height: 50px;
    }

	#navi a.btn_headerrecruit .txt {
		font-size: 8px;
    }

	#navi a.btn_headerrecruit .icon {
		width: 28px;
	}
	
	#menubtn {
		width: 50px;
		height: 50px;
		margin: 0;
		padding: 0;
		display: block;
		position: relative;
		z-index: 0;
		cursor: pointer;
	}
	
	#menubtn span {
		width: 28px;
		height: 3px;
		background-color: #0b3084;
		display: block;
		position: absolute;
		left: 11px;
	}
	
	#menubtn span:nth-of-type(1) {
		top: 13px;
		-webkit-animation: menu-bar01 .75s forwards;
		animation: menu-bar01 .75s forwards;
	}

	@-webkit-keyframes menu-bar01 {
		0% {
			-webkit-transform: translateY(10px) rotate(45deg);
		}
		50% {
			-webkit-transform: translateY(10px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar01 {
		0% {
			transform: translateY(10px) rotate(45deg);
		}
		50% {
			transform: translateY(10px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}

	#menubtn span:nth-of-type(2) {
		top: 23px;
		transition: all .25s .25s;
		opacity: 1;
	}

	#menubtn span:nth-of-type(3) {
		top: 33px;
		-webkit-animation: menu-bar02 .75s forwards;
		animation: menu-bar02 .75s forwards;
	}

	@-webkit-keyframes menu-bar02 {
		0% {
			-webkit-transform: translateY(-10px) rotate(-45deg);
		}
		50% {
			-webkit-transform: translateY(-10px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar02 {
		0% {
			transform: translateY(-10px) rotate(-45deg);
		}
		50% {
			transform: translateY(-10px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}

	.active #menubtn span {
		background-color: #fff;
	}

	#menubtn.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(10px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(10px) rotate(45deg);
		}
	}
	@keyframes active-menu-bar01 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(10px) rotate(0);
		}
		100% {
			transform: translateY(10px) rotate(45deg);
		}
	}

	#menubtn.active  span:nth-of-type(2) {
		opacity: 0;
	}

	#menubtn.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(-10px) rotate(0);
		}
		100% {
			-webkit-transform: translateY(-10px) rotate(-45deg);
		}
	}
	@keyframes active-menu-bar03 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(-10px) rotate(0);
		}
		100% {
			transform: translateY(-10px) rotate(-45deg);
		}
	}
	
/* --------------- footer --------------- */
	
	
	



/* --------------- sub common --------------- */
	
	#pagettl {
		height: calc( 33.3vw + 50px );
		padding: 50px 0 0;
	}
	
	.cont_pagettl:before {
		right: calc( 100% - 14vw );
	}
	
	.cont_pagettl:after {
		left: calc( 100% - 14vw );
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}

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