/*==============================
        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;
			font-size:1.8rem;
			grid-template-columns:auto 1fr auto;
			grid-column-gap:1.5em;
			align-items:center;
			.logo {
				a {
					font-size:2.8rem;
					font-weight:700;
				}
			}
			#spmenu {
				display:contents;
			}
			.menu-gmenu-container {
				.menu {
					display:flex;
					justify-content:end;
					align-items:center;
					column-gap:1.3em;
					& > li {
						& > a {
							display:grid;
							position:relative;
							font-weight: 600;
							&::before {
								content:'';
								display:block;
								background-color:var(--color_def);
								width:0;
								max-width:80%;
								height:2px;
								position:absolute;
								bottom:-.75em;
								left:50%;
								transform:translateX(-50%);
								transition:.3s;
							}
						}
						&.nobd.current-menu-item {
							& > a {
								&::before {
									width:0;
								}
							}
						}
						&: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:3em;
								}
							}
						}
					}
					.sub-menu {
						position:absolute;
						display:grid;
						grid-row-gap:1px;
						padding-top:1.33em;
						pointer-events:none;
						transform:translateY(20px);
						opacity:0;
						font-size:1.6rem;
						min-width:auto;
						li {
							box-shadow:0 2px 4px rgba(0,0,0,.15);
							overflow:hidden;
							&:first-child {
								border-radius:.5em .5em 0 0;
							}
							&:last-child {
								border-radius:0 0 .5em .5em;
							}
							a {
								display:grid;
								padding:0 1em;
								min-width:12em;
								align-items:center;
								white-space:nowrap;
								height:3em;
								background-color:#FFFFFF;
							}
						}
					}
				}
			}
			.hcontact {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				align-items:center;
				grid-column-gap:.66em;
				a {
					background-color:var(--color_main);
					color:var(--color_white);
					border:1px solid var(--color_main);
					display:grid;
					grid-template-columns:repeat(2,auto);
					align-items:center;
					grid-column-gap:.5em;
					height:2.2em;
					padding:0 .5em .1em;
					border-radius:6px;
					font-weight: 600;
					img {
						width:1em;
					}
					&.tel {
						background-color:var(--color_sub);
						border-color:var(--color_sub);
						img {
							width:.75em;
						}
					}
				}
			}
		}
	}
}


@media (hover:hover) {

	#header {
		.header {
			.header_inner {
				.menu-gmenu-container {
					.menu {
						& > li {
							& > a  {
								&:hover {
									opacity:1;
									transform:translateY(.1em);
									&::before {
										width:3em;
									}
								}
							}
							&.nobd {
								& > a  {
									&:hover {
										&::before {
											width:3em;
										}
									}
								}
							}
							&.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;
									}
								}
							}
						}
					}
				}
				.hcontact {
					li {
						a {
							img {
								transition: .3s;
							}
							&:hover {
								opacity:1;
								color:var(--color_main);
								border-color:var(--color_main);
								background-color: var(--color_bg1);
								img {
									filter: var(--color_main_f);
								}
							}
							&.tel {
								&:hover {
									color:var(--color_sub);
									border-color:var(--color_sub);
									background-color: var(--color_bg2);
									img {
										filter: var(--color_sub_f);
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@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:1250px) {

	#header {
		.header {
			.header_inner {
				font-size:min(1.5vw,1.8rem);
				grid-column-gap:1.0em;
				.logo {
					a {
						font-size:min(2.2vw,2.8rem);
					}
				}
				#spmenu {
					display:contents;
				}
				.menu-gmenu-container {
					.menu {
						column-gap:1em;
						.sub-menu {
							font-size:min(1.4vw,1.6rem);
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			width:calc(100% - 50px);
			.header_inner {
				font-size:1.7rem;
				grid-template-columns:1fr auto;
				align-content:center;
				grid-row-gap:15px;
				height:100px;
				.logo {
					a {
						font-size:2.2rem;
					}
				}
				.menu-gmenu-container {
					grid-area:2/1/3/3;
					.menu {
						.sub-menu {
							font-size:1.5rem;
						}
					}
				}
			}
		}
	}
	
}

@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:2.0rem;
					}
				}
				#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 20px;
					.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;
								}
							}
							&: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);
									}
								}
							}
							&.menu-item-has-children {
								& > a {
									&::after {
										transition:.3s;
									}
								}
								&.open {
									& > a {
										&::after {
											transform:translateY(.1em) rotate(-135deg);
										}
									}
									.sub-menu {
										li {
											height:3em;
										}
									}
								}
							}
						}
						.sub-menu {
							position:relative;
							grid-row-gap:0;
							padding-top:0;
							transform:translateY(0);
							opacity:1;
							font-size:1.4rem;
							pointer-events:auto;
							li {
								box-shadow:none;
								overflow:hidden;
								height:0;
								border:none;
								transition:.3s;
								&:first-child,&:last-child {
									border-radius:0;
								}
								a {
									background-color:#fafafa;
									box-shadow:0 2px 0px rgba(0,0,0,.066) inset;
									padding-left:2em;
								}
							}
						}
					}
				}	
				.hcontact {
					max-width:360px;
					margin:0 auto;
					li {
						a {
							font-size:2.0rem;
							grid-template-columns:repeat(2,auto);
							justify-content:center;
						}
					}
				}
				.spbtn {
					cursor:pointer;
					height:40px;
					position:relative;
					&::before,&::after {
						content:'';
						display:block;
						width:50%;
						height:2px;
						background-color:var(--color_sub);
						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_sub);
						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;
						}
					}
					.spbtn {
						.bar {
							opacity:0;
						}
						&::before {
							top:50%;
							transform:translate(-50%,-50%) rotate(35deg);
						}
						&::after {
							top:50%;
							transform:translate(-50%,-50%) rotate(-35deg);
						}
					}
				}
			}
		}
	}
	
}