/*==============================
        header
==============================*/
@charset "utf-8";

#header{
	position: sticky;
	top:0;
	left:0;
	z-index: 999999;
	background-color:#FFFFFF;
}
.header {
	width: 100%;
	padding-left:30px;
	display:grid;
	grid-template-columns:310px 1fr 160px;
	grid-column-gap:40px;
	align-items:center;
}

.header .menu-gmenu-container ul {
	width:100%;
	display:inline-flex;
	align-items:center;
	justify-content:flex-end;
	font-size:1.6rem;
}
.header .menu-gmenu-container li:not(:nth-last-child(-n+2)) {
	margin-right:2.0em;
}
.header .menu-gmenu-container li a {
	transition:.3s;
	color:#4c4745;
}
.header .menu-gmenu-container li.footerOnly {
	display:none;
}
.header .menu-gmenu-container li a:hover {
	color:#000000;
}

.header .contact {
	height:140px;
	background-color:#312927;
	display:grid;
	align-content:center;
	justify-items:center;
	grid-row-gap:.8em;
	font-size:1.9rem;
	letter-spacing:.05em;
	font-weight:500;
	color:#6dbfda;
	border-radius:0 0 0 4px;
	transition:.3s;
}
.header .contact::before {
	content:'';
	width:22px;
	height:17px;
	background:url(../img/common/icon_mail.png) no-repeat center center/contain;
}
.header .contact:hover {
	filter:brightness(1.2);
}


@media screen and (max-width:1080px){
	
	.header {
		padding-left:20px;
		grid-template-columns:240px 1fr 130px;
	}
	.header .menu-gmenu-container li:not(:nth-last-child(-n+2)) {
		margin-right:1.5em;
	}
	.header .contact {
		height:120px;
		font-size:1.6rem;
	}

}


@media screen and (max-width:950px){

	.header .menu-gmenu-container ul {
		font-size:1.5rem;
		display:grid;
		grid-template-columns:repeat(3,auto);
		grid-gap:.75em 2em;;
	}
	.header .menu-gmenu-container li:not(:last-child) {
		margin-right:0;
	}


}


@media screen and (max-width:768px){

	.header {
		height:50px;
		padding-left:10px;
		grid-template-columns:210px 50px;
		justify-content:space-between;
	}
	
	.header .menu-gmenu-container {
		display:none;
	}
	.header .contact {
		display:none;
	}
	
	.header .spbtn {
		width:50px;
		height:50px;
		position:relative;
		background-color:#312927;
		border-radius:0 0 0 4px;
		}
	.header .spbtn::before {
		content:'';
		display:block;
		width:44%;
		height:1px;
		background-color:#6dbfda;
		position:absolute;
		top:16px;
		left:50%;
		transition:.5s;
		transition-timing-function:ease-in-out;
		transform-origin:center center;
		transform:translateX(-50%);
	}
	.header .spbtn::after {
		content:'';
		display:block;
		width:44%;
		height:1px;
		background-color:#6dbfda;
		position:absolute;
		bottom:16px;
		left:50%;
		transition:.5s;
		transition-timing-function:ease-in-out;
		transform-origin:center center;
		transform:translateX(-50%);
	}
	.header .spbtn span {
		display:block;
		width:44%;
		height:1px;
		background-color:#6dbfda;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		transition:.5s;
		transition-timing-function:ease-in-out;
	}
	body.menuopen {
		overflow: hidden;
	}
	body.menuopen .header .spbtn::before {
		transform:translateX(-50%) rotate(45deg);
		top:24.5px;
	}
	body.menuopen .header .spbtn::after {
		transform:translateX(-50%) rotate(-45deg);
		bottom:24.5px;
	}
	body.menuopen .header .spbtn span {
		opacity:0;
		transform:translate(-50%,-50%) scaleX(0);
	}
	
	.spmenu {
		position:fixed;
		top:-105vh;
		opacity:0;
		width:100%;
		background-color:#FFFFFF;
		height:auto;
		z-index:999;
		text-align:center;
		transition:.5s;
	}
	body.menuopen .spmenu {
		opacity:1;
		top:50px;
	}
	.spmenu_inner {
		padding-bottom:30px;
	}

	.spmenu_inner .menu-gmenu-container ul {
		font-size:1.5rem;
		margin-bottom:30px;
		border-top:1px solid #e0e0e0;
	}
	.spmenu_inner .menu-gmenu-container li {
		border-bottom:1px solid #e0e0e0;
	}
	.spmenu_inner .menu-gmenu-container li.footerOnly {
		display:none;
	}
	.spmenu_inner .menu-gmenu-container li a {
		padding:0 20px;
		display:grid;
		grid-template-columns:auto auto;
		justify-content:space-between;
		align-items:center;
		height:50px;
	}
	.spmenu_inner .menu-gmenu-container li a::after {
		content:'';
		width:12px;
		height:12px;
		background:url(../img/common/icon_arrow.png) no-repeat center center/contain;
	}
	.spmenu_inner .contact {
		display:grid;
		grid-template-columns:auto auto;
		grid-column-gap:.5em;
		justify-content:center;
		align-items:center;
		width:245px;
		height:60px;
		margin:0 auto;		
		background-color:#312927;
		font-size:2.0rem;
		color:#6dbfda;
		font-weight:500;
		border-radius:5px;
	}
	.spmenu_inner .contact::before {
		content:'';
		width:1.1em;
		height:.9em;
		background:url(../img/common/icon_mail.png) no-repeat center center/contain;
	}

}