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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	.header {
		width:100%;
		margin:0 auto;
		background-color:var(--color_bg);
		.header_inner {
			height:100px;
			display:grid;
			grid-template-columns:90px 1fr auto;
			grid-column-gap:20px;
			align-items:center;
			padding-left:80px;
			.logo {
				img {
					display:block;
				}
			}
			.menu_wrap {
				display: contents;
			}
			.header_menu {
				display:grid;
				justify-items:end;
				align-content:center;
				grid-row-gap:15px;
				.sns {
					display:flex;
					align-items:center;
					column-gap:8px;
					li {
						a {
							img {
								width:20px;
							}
						}
					}
				}
				.menu-gmenu-container {
					.menu {
						display:flex;
						font-size:1.6rem;
						justify-content:center;
						align-items:center;
						column-gap:1.5em;
						& > li {
							& > a {
								position:relative;
								display:grid;
								justify-items:center;
								grid-row-gap:.2em;
								font-weight:400;
								&::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;
								}
								span {
									
								}
							}
							&.current-menu-item,&.current_page_parent {
								&:not(.menu-item-object-custom) {
									& > a {
										color:var(--color_main);
										&::before {
											color:var(--color_main);
											transform:translate(-50%,.15em);
											width:100%;
										}
									}
								}
							}
							.sub-menu {
								position:absolute;
								max-width:1100px;
								padding:50px 20px 50px 280px;
								left:50%;
								transform:translate(-50%,-10px);
								bottom:auto;
								width:100vw;
								z-index:1;
								display:grid;
								grid-template-columns:repeat(4,1fr);
								grid-gap:30px 20px;
								pointer-events:none;
								opacity:0;
								transition:.3s;
								&::after {
									content:'';
									position:absolute;
									z-index:-1;
									display:block;
									width:100vw;
									height:calc(100% - 5px);
									left:50%;
									transform:translateX(-50%);
									top:5px;
									box-shadow:0 4px 4px rgba(0,0,0,.15);
									background-color: var(--color_bg);
								}
								li {
									&.subtit {
										font-size:1.5rem;
										position:absolute;
										top:50px;
										left:30px;
										a {
											pointer-events:none;
											display:grid;
											grid-row-gap:.25em;
											span {
												color:var(--color_main);
												font-size:2em;
											}
										}
									}
									&.btn {
										position:absolute;
										left:30px;
										top:8em;
										a {
											background-color: var(--color_sub);
											width: 220px;
											height: 60px;
											font-size: 1.4rem;
											padding: 0 1em 0 2em;
											color: #FFFFFF;
											display: grid;
											grid-template-columns: 1fr 4em;
											align-items: center;
											grid-column-gap: 1.5em;
											&::after {
												height:1em;
												content:'';
												background:url(../img/common/arrow-white-01.svg) no-repeat center center/contain;
											}
										}
									}
									&:has(img) {
										max-width:400px;
										a {
											.img {
												img {
													display:block;
													width:100%;
													aspect-ratio:1.8;
													object-fit:cover;
												}
											}
											& > span {
												display:grid;
												grid-template-columns:1fr 2.5em;
												grid-column-gap:.66em;
												line-height:1.3;
												align-items:center;
												font-size:1.3rem;
												padding-top:1em;
											}
										}
									}
								}
							}
						}
					}
				}
			}
			.header_btn {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				font-size:1.5rem;
				position:relative;
				z-index:2;
				li {
					a {
						display:grid;
						justify-items:center;
						align-content:center;
						grid-template-rows:1fr auto;
						grid-row-gap:.5em;
						place-items:center;
						height:100px;
						min-width:100px;
						font-size:1.3rem;
						padding:10px 5px;
						img {
							width:1.66em;
						}
						span {
							color:#FFFFFF;
							line-height:1.2;
							text-align:center;
							span {
								display:block;
							}
						}
					}
					&.contact {
						background-color:var(--color_sub);
					}
					&.tel {
						background-color:var(--color_main);
					}
				}
			}
		}
	}
	.breadcrumb {
		background-color:var(--color_sub3);
		font-size:1.2rem;
		padding:.66em 80px;
		p,a,span {
			line-height:1.3;
		}
	}
}

#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;
							}
						}
					}
				}
			}
		}
	}
}

@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%;
									}
								}
								&.menu-item-has-children {
									.sub-menu {
										pointer-events:all;
										opacity:1;
										transform:translate(-50%,0);
									}
								}
							}
							.sub-menu {
								li {
									&.btn {
										position:absolute;
										left:30px;
										top:10em;
										a {
											&::after {
												transition:.3s;
											}
											&:hover {
												opacity:1;
												filter:brightness(1.1);
												&::after {
													transform:translateX(5px);
												}
											}
										}
									}
								}
							}
						}						
					}
				}
				.header_btn {
					li {
						a {
							&:hover {
								opacity:1;
								filter:brightness(1.1);
							}
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			.header_inner {
				padding-left:30px;
			}
		}
		.breadcrumb {
			padding:.66em 30px;
		}
	}
	
}

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

	#header {
		.header {
			.header_inner {
				grid-template-columns:70px 1fr auto;
				grid-column-gap:15px;
				padding-left:20px;
				.header_menu {
					.menu-gmenu-container {
						.menu {
							font-size:min(1.6vw,1.6rem);
							column-gap:.75em;
							& > li {
								.sub-menu {
									padding:100px 20px 50px 20px;
									grid-gap:20px 15px;
									li {
										&.subtit {
											top:30px;
										}
										&.btn {
											left:260px;
											top:40px;
											a {
												width: 200px;
												height: 40px;
												padding: 0 1em 0 1.5em;
												grid-template-columns: 1fr 3em;
												grid-column-gap: .5em;
											}
										}
										&:has(img) {
											a {
												& > span {
													font-size:1.2rem;
												}
											}
										}
									}
								}
							}
						}
					}
				}
				.header_btn {
					li {
						a {
							font-size:1.2rem;
						}
					}
				}
			}
		}
		.breadcrumb {
			background-color:var(--color_sub3);
			font-size:1.2rem;
			padding:.66em 20px;
			p,a,span {
				line-height:1.3;
			}
		}
	}
	
}

@media screen and (max-width:768px) {
	
	#header {
		.header {
			.header_inner {
				height:50px;
				display:grid;
				grid-template-columns:54px 50px;
				justify-content:space-between;
				padding-left:20px;
				.menu_wrap {
					display: grid;
					align-content:start;
					position:fixed;
					z-index:98;
					top:50px;
					left:0;
					width:100%;
					height:calc(100dvh - 50px);
					height:calc(100vh - 50px);
					background-color:var(--color_bg);
					padding:30px 20px 50px;
					pointer-events:none;
					opacity:0;
					transition:.3s;
				}
				.header_menu {
					display:contents;
					.sns {
						order:2;
						justify-content:center;
						li {
							a {
								img {
									width:30px;
								}
							}
						}
					}
					.menu-gmenu-container {
						margin-bottom:20px;
						.menu {
							display:block;
							font-size:1.4rem;
							& > li {
								& > a {
									justify-items:start;
									grid-row-gap:.33em;
									padding:1.2em 0;
									border-bottom:1px solid #cccccc;
									background:url(../img/common/arrow-green-01.svg) no-repeat center right/4em auto;
									&::before {
										content:none;
									}
									span {
										font-size:1.6rem;
									}
								}
								.sub-menu {
									display:none;
								}
							}
						}
					}
				}
				.header_btn {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					font-size:1.5rem;
					margin-bottom:30px;
					li {
						a {
							grid-template-columns:repeat(2,auto);
							height:auto;
							justify-content:center;
							grid-column-gap:.66em;
							grid-row-gap:0;
							padding:1.25em 1em;
							font-size:min(3.3vw,1.2rem);
							img {
								width:1.66em;
							}
							span {
								color:#FFFFFF;
								line-height:1.2;
								text-align:left;
								br {
									display:none;
								}
								span {
									font-size:min(4vw,1.5rem);
									margin-bottom:.25em;
								}
							}
						}
					}
				}
				.spbtn {
					height:50px;
					background-color:var(--color_main);
					display:grid;
					justify-items:center;
					align-content:center;
					grid-row-gap:5px;
					grid-template-rows:1fr auto;
					padding:5px 0;
					cursor: pointer;
					.bar {
						width:20px;
						height:15px;
						position:relative;
						align-self:center;
						span {
							width:100%;
							display:block;
							position:absolute;
							height:2px;
							background-color:#FFFFFF;
							transition-duration:.3s;
							top:50%;
							left:50%;
							transform:translate(-50%,-50%);
						}
						&::before,&::after {
							content:'';
							width:100%;
							display:block;
							position:absolute;
							height:2px;
							background-color:#FFFFFF;
							transition-duration:.3s;
							left:50%;
							transform:translate(-50%,-50%) rotate(0deg);
						}
						&::before {
							top:0;
						}
						&::after {
							top:100%;
						}
					}
					.txt {
						font-size:1.1rem;
						color:#FFFFFF;
					}
				}
			}
		}
		.breadcrumb {
			font-size:1.1rem;
			padding:.5em 20px;
		}
	}
	
}


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