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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	padding-top:30px;
	width:100%;
	z-index: 99;
	.header {
		width:calc(100% - 60px);
		max-width:1200px;
		height:60px;
		margin:0 auto;
		border-radius:30px;
		box-shadow:0 3px 6px rgba(0,0,0,.15);
		padding:10px 10px 10px 25px;
		background-color:#FFFFFF;
		.header_inner {
			display:grid;
			grid-template-columns:80px 1fr 320px 40px;
			grid-column-gap:10px;
			align-items:center;
			.logo {
				img {
					display:block;
					max-width:80px;
				}
			}
			.menu-gmenu-container {
				.menu {
					display:flex;
					font-size:min(1.4vw,1.5rem);
					justify-content:center;
					align-items:center;
					column-gap:min(1.8vw,1.5em);
					& > li {
						position:relative;
						letter-spacing:.05em;
						& > a {
							position:relative;
							&::before {
								content:'';
								height:1px;
								background-color:var(--color_main);
								display:block;
								position:absolute;
								left:50%;
								bottom:0;
								transform:translate(-50%,.0);
								width:0;
								transition:.3s;
							}
						}
						&.current-menu-item {
							& > a {
								color:var(--color_main);
								&::before {
									color:var(--color_main);
									transform:translate(-50%,.15em);
									width:100%;
								}
							}
						}
					}
					.sub-menu {
						position:absolute;
						display:grid;
						grid-row-gap:1px;
						padding-top:1.33em;
						transition:.3s;
						pointer-events:none;
						transform:translateY(20px);
						opacity:0;
						li {
							box-shadow:0 2px 4px rgba(0,0,0,.15);
							a {
								display:grid;
								padding:0 1em;
								align-items:center;
								white-space:nowrap;
								height:3em;
								background-color:#FFFFFF;
							}
						}
					}
					.menu-item-has-children {
						&:hover {
							.sub-menu {
								transform:translateY(0);
								opacity:1;
								pointer-events:all;
							}
						}
					}
				}
			}
			.header_btn {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:10px;
				font-size:1.5rem;
				li {
					a {
						display:grid;
						grid-template-columns:1em auto;
						align-items:center;
						justify-content:center;
						grid-column-gap:.5em;
						height:2.4em;
						color:#FFFFFF;
						border-radius:1.5em;
						span {
							font-family: "M PLUS 1p", sans-serif;
						}
					}
					&.contact {
						a {
							background: #41C3AF;
							background: linear-gradient(90deg, rgba(65, 195, 175, 1) 0%, rgba(2, 162, 132, 1) 100%);
						}
					}
					&.request {
						a {
							background: #FF9900;
							background: linear-gradient(90deg,rgba(255, 153, 0, 1) 0%, rgba(255, 118, 0, 1) 100%);
						}
					}
				}
			}
			.spbtn {
				cursor:pointer;
				height:40px;
				border-radius:50%;
				box-shadow:1px 1px 2px rgba(0,0,0,.15),1px 1px 2px rgba(0,0,0,.15) inset;
				position:relative;
				.bar {
					&::before,&::after {
						content:'';
						display:block;
						width:40%;
						height:2px;
						background-color:var(--color_main);
						transition:.3s;
						position:absolute;
						left:30%;
						top:33%;
					}
					&::after {
						width:20%;
						height:2px;
						top:auto;
						bottom:33%;
					}
					span {
						width:30%;
						height:2px;
						background-color:var(--color_main);
						transition:.3s;
						position:absolute;
						left:30%;
						top:50%;
						transform:translateY(-50%);
					}
				}
			}
		}
	}
}

#menubox {
	position:fixed;
	z-index:90;
	top:0;
	left:0;
	background-color:#FFFFFF;
	width:100%;
	height:100vh;
	height:100dvh;
	padding:140px 20px 30px;
	overflow:auto;
	transition: .5s;
	opacity: 0;
	pointer-events: none;
	.menu-gmenu-container {
		max-width:900px;
		margin:0 auto;
		.menu {
			display:grid;
			grid-template-columns:repeat(2,1fr);
			grid-gap:30px;
			& > li {
				& > a {
					font-size:1.8rem;
					display:grid;
					grid-template-columns:1fr .8em;
					align-items:center;
					height:2.6em;
					padding:0 .5em;
					border-bottom:5px solid #efefef;
					&::after {
						content:'';
						height:.8em;
						background:url(../img/common/icon_arrow2.svg) no-repeat center center/contain;
					}
				}
				.sub-menu {
					background-color:#EFEFEF;
					li {
						a {
							font-size:1.6rem;
							display:grid;
							grid-template-columns:.5em 1fr .8em;
							grid-column-gap:.5em;
							align-items:center;
							height:2.6em;
							padding:0 .66em;
							border-bottom:4px solid #FFFFFF;
							&::before {
								content:'';
								height:2px;
								background-color:#999999;
							}
							&::after {
								content:'';
								height:.8em;
								background:url(../img/common/icon_arrow3.svg) no-repeat center center/contain;
							}
						}
					}
				}
			}
		}
	}
}


body {
	&.menuopen {
		#menubox {
			opacity: 1;
			pointer-events: all;
		}
		#header {
			.header {
				.spbtn {
					&:hover {
						.bar {
							span {
								opacity:0;
							}
							&::before {
								top:50%;
								width:50%;
								left:50%;
								transform:translate(-50%,-50%) rotate(35deg);
							}
							&::after {
								bottom:50%;
								width:50%;
								left:50%;
								transform:translate(-50%,50%) rotate(-35deg);
							}
						}
					}
				}
			}
		}
	}
}

@media (hover:hover) {

#header {
	.header {
		.header_inner {
			.menu-gmenu-container {
				.menu {
					& > li {
						&:hover {
							& > a  {
								opacity:1;
								color:var(--color_main);
								&::before {
									color:var(--color_main);
									transform:translate(-50%,.15em);
									width:100%;
								}
							}
						}
					}
					.sub-menu {
						li {
							a {
							   &:hover {
								   opacity:1;
								   background-color:var(--color_main);
								   color:#FFFFFF;
							   }
							}
						}
					}
				}
			}
			.header_btn {
				li {
					a {
						&:hover {
							opacity:1;
							filter:brightness(1.1);
						}
					}
				}
			}
			.spbtn {
				&:hover {
					.bar {
						&::before {
							transform:translateY(-2px);
						}
						&::after {
							transform:translateY(2px);
						}
					}
				}
			}
		}
	}
}
	
}

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

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

	#header {
		padding-top:20px;
		.header {
			width:calc(100% - 50px);
			.header_inner {
				grid-template-columns:1fr 320px 40px;
				.menu-gmenu-container {
					display:none;
				}
			}
		}
	}
	
}

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

	#header {
		padding-top:10px;
		.header {
			width:calc(100% - 20px);
			height:50px;
			padding:5px 5px 5px 20px;
			.header_inner {
				grid-template-columns:1fr 40px;
				.header_btn {
					display:none;
				}
			}
		}
	}

	#menubox {
	padding:80px 20px 30px;
		.menu-gmenu-container {
			.menu {
				grid-template-columns:1fr;
				grid-gap:0;
			}
		}
	}
	
}