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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	background-color: #FFFFFF;
	.header {
		width:calc(100% - 60px);
		margin:0 auto;
		.header_inner {
			height:80px;
			display:grid;
			grid-template-columns:1fr auto;
			grid-column-gap:24px;
			align-items:center;
			.logo {
				a {
					font-size:2.0rem;
					letter-spacing:.05em;
					display:grid;
					grid-template-columns:50px 1fr;
					align-items:center;
					grid-column-gap:.33em;
				}
			}
			#spmenu {
				display:contents;
			}
			.menu-gmenu-container {
				.menu {
					display:flex;
					font-size:1.6rem;
					justify-content:end;
					align-items:center;
					column-gap:1.5em;
					& > li {
						& > a {
							display:grid;
							position:relative;
							&::before {
								content:'';
								display:block;
								background-color:var(--color_sub);
								width:0;
								height:2px;
								position:absolute;
								bottom:-.5em;
								left:50%;
								transform:translateX(-50%);
							}
						}
						&.contact {
							a {
								display:grid;
								grid-template-columns:repeat(2,auto);
								align-items:center;
								grid-column-gap:.33em;
								height:2.4em;
								padding:0 1.2em;
								background-color:#D97736;
								color:var(--color_white);
								&::after {
									content:'';
									width:1.2em;
									height:1em;
									background:url(../img/common/icon_mail.svg) no-repeat center center/contain;
									grid-area:1/1/2/2;
									transform:translateY(.1em);
								}
								&::before {
									content:none;
								}
							}
						}
						&:has(ul) {
							& > a {
								grid-template-columns:repeat(2,auto);
								align-items:center;
								justify-content:center;
								grid-column-gap:.33em;
								&::after {
									content:'';
									width:.4em;
									height:.4em;
									border-right:2px solid;
									border-bottom:2px solid;
									border-color:var(--color_def);
									transform:translateY(.1em) rotate(45deg);
								}
							}
						}
						&.current-menu-item {
							& > a {
								&::before {
									width:min(80%, 2em);
								}
							}
						}
					}
					.sub-menu {
						position:absolute;
						display:grid;
						grid-row-gap:1px;
						padding-top:1.33em;
						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;
							}
						}
					}
				}
			}
		}
	}
}


@media (hover:hover) {

	#header {
		.header {
			.header_inner {
				.menu-gmenu-container {
					.menu {
						& > li {
							& > a  {
								&:hover {
									opacity:1;
									transform:translateY(.1em);
								}
							}
							&.contact {
								a {
									&:hover {
										color:var(--color_white);
										filter:brightness(1.2);
										transform:none;
									}
								}
							}
							&.menu-item-has-children {
								.sub-menu {
									transition:.3s;
									li {
										a {
										   &:hover {
											   opacity:1;
											   background-color:var(--color_main);
											   color:#FFFFFF;
										   }
										}
									}
								}
								&:hover {
									.sub-menu {
										transform:translateY(0);
										opacity:1;
										pointer-events:all;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@media (hover:none) {

	#header {
		.header {
			.header_inner {
				.menu-gmenu-container {
					.menu {
						& > li {
							&.menu-item-has-children {
								& > a {
									&::after {
										transition:.3s;
									}
								}
								.sub-menu {
									transition:.3s;
								}
								&.open {
									& > a {
										&::after {
											transform:translateY(.1em) rotate(-135deg);
										}
									}
									.sub-menu {
										transform:translateY(0);
										opacity:1;
										pointer-events:all;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

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

	#header {
		.header {
			width:calc(100% - 50px);
			.header_inner {
				grid-column-gap:15px;
				.logo {
					a {
						font-size:1.8rem;
						grid-template-columns:40px 1fr;
					}
				}
				.menu-gmenu-container {
					.menu {
						font-size:1.5rem;
						column-gap:1em;
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			width:calc(100% - 20px);
			.header_inner {
				height:50px;
				grid-template-columns:1fr 50px;
				.logo {
					a {
						font-size:1.6rem;
						grid-template-columns:40px 1fr;
						transition: .3s;
					}
				}
				#spmenu {
					display:block;
					position: fixed;
					box-shadow:0 2px 4px rgba(0,0,0,.15) inset;
					left: 0;
					top:50px;
					z-index: 90;
					background-color:var(--color_white);
					width:100%;
					height:calc(100vh - 50px);
					height:calc(100dvh - 50px);
					padding:30px;
					overflow:auto;
					opacity: 0;
					pointer-events: none;
					transition: .3s;
				}
				.menu-gmenu-container {
					max-width:360px;
					margin:0 auto;
					.menu {
						font-size:1.6rem;
						display:grid;
						grid-template-columns:1fr;
						& > li {
							border-bottom:2px solid #efefef;
							& > a {
								display:grid;
								position:relative;
								height:3em;
								align-items:center;
								padding:0 1em;
								&::before {
									content:none;
								}
							}
							&.contact {
								border:none;
								margin-top:30px;
								a {
									font-size:2.0rem;
									max-width:240px;
									margin:0 auto;
								}
							}
							&:has(ul) {
								& > a {
									justify-content:space-between;
									&::after {
										content:'';
										width:.4em;
										height:.4em;
										border-right:2px solid;
										border-bottom:2px solid;
										border-color:var(--color_def);
										transform:translateY(.1em) rotate(45deg);
									}
								}
							}
							&.current-menu-item {
								& > a {
									&::before {
										width:min(80%, 2em);
									}
								}
							}
							&.menu-item-has-children {
								& > a {
									&::after {
										transition:.3s;
									}
								}
								.sub-menu {
									transition:.3s;
								}
								&.open {
									& > a {
										&::after {
											transform:translateY(.1em) rotate(-135deg);
										}
									}
									.sub-menu {
										transform:translateY(0);
										opacity:1;
										pointer-events:all;
										height:calc(9em + 6px);
									}
								}
							}
						}
						.sub-menu {
							position:relative;
							grid-row-gap:0;
							padding-top:0;
							transform:translateY(0);
							opacity:1;
							font-size:1.4rem;
							height:0;
							overflow:hidden;
							li {
								box-shadow:none;
								border-top:2px solid #efefef;
								a {
									background-color:#fafafa;
									padding-left:2em;
								}
							}
						}
					}
				}	
				.spbtn {
					cursor:pointer;
					height:40px;
					position:relative;
					&::before,&::after {
						content:'';
						display:block;
						width:50%;
						height:2px;
						background-color:var(--color_main);
						transition:.3s;
						position:absolute;
						left:50%;
						top:30%;
						transform:translate(-50%,-50%) rotate(0deg);
					}
					&::after {
						top:70%;
					}
					.bar {
						display:block;
						width:50%;
						height:2px;
						background-color:var(--color_main);
						transition:.3s;
						position:absolute;
						left:25%;
						top:50%;
						transform:translateY(-50%);
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				background-color: #FFFFFF;
				.header {
					.header_inner {
						.logo {
							a {
								color:var(--color_def);
							}
						}
						#spmenu {
							opacity: 1;
							pointer-events: all;
						}
						.menu-gmenu-container {
							.menu {
								& > li {
									&:not(.contact) {
										& > a {
											color:var(--color_def);
										}
									}
									&:has(ul) {
										& > a {
											&::after {
												border-color:var(--color_def);
											}
										}
									}
								}
							}
						}
					}
					.spbtn {
						.bar {
							opacity:0;
							background-color:var(--color_main);
						}
						&::before {
							top:50%;
							transform:translate(-50%,-50%) rotate(35deg);
							background-color:var(--color_main);
						}
						&::after {
							top:50%;
							transform:translate(-50%,-50%) rotate(-35deg);
							background-color:var(--color_main);
						}
					}
				}
			}
		}
	}
	
}