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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	padding-top:20px;
	width:100%;
	z-index: 99;
	.header {
		width:calc(100% - 60px);
		max-width:1100px;
		height:100px;
		margin:0 auto;
		border-radius:10px;
		box-shadow:0 3px 6px rgba(0,0,0,.15);
		padding:20px;
		background:url(../img/common/header.png) no-repeat center bottom/100% 5px #FFFFFF;
		.header_inner {
			display:grid;
			grid-template-columns:140px 1fr auto auto;
			grid-column-gap:20px;
			align-items:center;
			padding-top:5px;
			.logo {
				img {
					display:block;
					transform:translateY(-5px);
				}
			}
			#menu {
				display: contents;
			}
			.menu-gmenu-container {
				.menu {
					display:flex;
					font-size: min(1.1vw,1.2rem);
					justify-content:end;
					align-items:center;
					column-gap:2em;
					& > li {
						position:relative;
						& > a {
							position:relative;
							display:grid;
							grid-row-gap:.5em;
							font-weight:600;
							.font_en {
								font-size:min(1.3vw,1.6rem);
								letter-spacing:.05em;
							}
							&::before {
								content:'';
								width:5px;
								height:5px;
								background-color:var(--color_active);
								border-radius:50%;
								display:block;
								position:absolute;
								left:50%;
								bottom:-1em;
								transform:translate(-50%,.0);
								transition:.3s;
								opacity:0;
								pointer-events:none;
							}
						}
						&.current-menu-item {
							& > a {
								color:var(--color_active);
								&::before {
									opacity:1;
								}
							}
						}
						&.menu-item-has-children {
							position:relative;
							& > a {
								grid-template-columns:1fr auto;
								grid-column-gap:.5em;
								&::after {
									content:'';
									grid-area:1/2/3/3;
									align-self:center;
									width:.5em;
									height:.5em;
									border-right:2px solid #000000;
									border-bottom:2px solid #000000;
									transform:rotate(45deg);
									transition:.3s;
								}
							}
							.sub-menu {
								position:absolute;
								z-index:1;
								left:0;
								bottom:auto;
								padding-top:2em;
								display:grid;
								opacity:0;
								pointer-events:none;
								transform:translateY(-20px);
								li {
									box-shadow:0 3px 6px rgba(0,0,0,.15);
									border-bottom:2px solid var(--color_def);
									a {
										min-width:180px;
										display:grid;
										grid-template-columns:1fr 1.5em;
										grid-column-gap:1em;
										align-items:center;
										font-size:1.5rem;
										white-space:nowrap;
										height:3em;
										padding:0 1em;
										background-color:#FFFFFF;
										color:#777777;
										&::after {
											content:'';
											height:100%;
											background:url(../img/common/arrow_right_black.png) no-repeat center center/contain;
										}
									}
								}
							}
						}
					}
				}
			}
			.sns {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:center;
				grid-column-gap:8px;
				a {
					img {
						display:block;
						width:20px;
					}
				}
			}
			.header_btn {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:center;
				grid-column-gap:10px;
				.hbtn {
					width:160px;
					height:50px;
					font-size:1.2rem;
					font-weight:600;
					color:#FFFFFF;
					display:grid;
					grid-template-columns:1.66em auto;
					grid-column-gap:.66em;
					align-items:center;
					justify-content:center;
					border-radius:25px;
					background: #0A259A;
					background: linear-gradient(to right bottom, rgba(10, 37, 154, 1) 0%, rgba(66, 191, 236, 1) 100%);
					& > span {
						display:grid;
						grid-row-gap:.4em;
						.font_en {
							font-size:1.6rem;
							letter-spacing:.05em;
						}
					}
					&:last-child {
						background: #F47325;
						background: linear-gradient(to right ,rgba(244, 115, 37, 1) 0%, rgba(251, 194, 38, 1) 70%, rgba(246, 169, 77, 1) 100%);
					}
				}
				.menu-item-has-children {
					position:relative;
					.sub-menu {
						position:absolute;
						z-index:1;
						padding-top:.5em;
						left:0;
						bottom:auto;
						display:grid;
						opacity:0;
						pointer-events:none;
						transform:translateY(-20px);
						li {
							box-shadow:0 3px 6px rgba(0,0,0,.15);
							border-bottom:2px solid #0A259A;
							border-image:  linear-gradient(to right, rgba(10, 37, 154, 1) 0%, rgba(66, 191, 236, 1) 100%) 1;
							position:relative;
							a {
								min-width:180px;
								display:grid;
								grid-template-columns:1fr 1.5em;
								grid-column-gap:1em;
								align-items:center;
								font-size:1.5rem;
								white-space:nowrap;
								height:3em;
								padding:0 1em;
								background-color:#FFFFFF;
								color:#777777;
								&::after {
									content:'';
									height:100%;
									background:url(../img/common/arrow_right_black.png) no-repeat center center/contain;
								}
								&::before {
									content:'';
									display:block;
									background: linear-gradient(to right, rgba(10, 37, 154, 1) 0%, rgba(66, 191, 236, 1) 100%);
									position:absolute;
									z-index:-1;
									top:0;
									left:0;
									width:100%;
									height:100%;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (hover:hover) {

#header {
	.header {
		.header_inner {
			.menu-gmenu-container {
				.menu {
					& > li {
						&:hover {
							& > a  {
								opacity:1;
								color:var(--color_active);
								&::before {
									opacity:1;
								}
							}
						}
						&.menu-item-has-children {
							& > a {
								&::after {
									transition:.3s;
								}
								&:hover {
									&::after {
										border-color:var(--color_active);
									}
								}
							}
							&:hover {
								.sub-menu {
									opacity:1;
									transform:translateY(0);
									pointer-events:all;
								}
							}
							.sub-menu {
								transition:.3s;
								li {
									a {
										&::after {
											transition:.3s;
											transform-origin:left center;
										}
										&:hover {
											color:var(--color_active);
											opacity:1;
											&::after {
												transform:scaleX(1.2);
											}
										}
									}
								}
							}
						}
					}
				}
			}
			.header_btn {
				.hbtn {
					&:hover {
						opacity:1;
						filter:brightness(1.2);
					}
				}
				.menu-item-has-children {
					&:hover {
						.sub-menu {
							opacity:1;
							transform:translateY(0);
							pointer-events:all;
						}
					}
					.sub-menu {
						transition:.3s;
						li {
							a {
								&::after {
									transition:.3s;
									transform-origin:left center;
								}
								&:hover {
									color:#FFFFFF;
									background-color:transparent;
									opacity:1;
									&::after {
										transform:scaleX(1.2);
										-webkit-filter: brightness(0) invert(1);
										filter: brightness(0) invert(1);
									}
								}
							}
						}
					}
				}
			}
			.spbtn {
				&:hover {
					.bar {
						&::before {
							transform:translateY(-2px);
						}
						&::after {
							transform:translateY(2px);
						}
					}
				}
			}
		}
	}
}
	
}

@media screen and (min-width:1025px) {

	#header {
		.header {
			.header_inner {
				.menu-gmenu-container {
					.menu {
						& > li {
							&.menu-item-has-children {
								.sub-menu {
									display: grid!important;
								}
							}
						}
					}
				}
				.header_btn {
					.menu-item-has-children {
						.sub-menu {
							display:grid!important;
						}
					}
				}
			}
		}
	}

}

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

	#header {
		padding-top:0;
		.header {
			width:100%;
			border-radius:0;
			height:70px;
			padding:10px 20px;
			.header_inner {
				grid-template-columns:100px 40px;
				justify-content:space-between;
				#menu {
					transition: .3s;
					display: block;
					position:fixed;
					pointer-events:none;
					opacity:0;
					z-index:99;
					top:65px;
					left:0;
					height:calc(100vh - 65px);
					height:calc(100dvh - 65px);
					width:100%;
					padding:30px 20px 50px;
					background-color:#FFFFFF;
				}
				.menu-gmenu-container {
					margin-bottom:25px;
					.menu {
						display:grid;
						font-size: 1.2rem;
						justify-content:unset;
						max-width:400px;
						margin:0 auto;
						& > li {
							& > a {
								display:grid;
								grid-row-gap:.5em;
								font-weight:600;
								padding:1.5em .5em;
								border-bottom:1px solid #cccccc;
								.font_en {
									font-size:1.6rem;
								}
								&::before {
									content:none!important;
								}
							}
							&.current-menu-item {
								& > a {
									color:var(--color_active);
									&::before {
										opacity:1;
									}
								}
							}
							&.menu-item-has-children {
								.sub-menu {
									position:relative;
									opacity:1!important;
									pointer-events:all!important;
									transform:translateY(0)!important;
									padding-top:0;
									grid-row-gap:0px;
									display: none;
									li {
										box-shadow:none;
										border-bottom:1px solid #cccccc;
										a {
											grid-template-columns:1fr 2em;
											font-size:1.4rem;
											height:3.4em;
											padding:0 .5em;
											&::after {
												transform:scaleX(1)!important;
											}
										}
									}
								}
								&.open {
									& > a {
										&::after {
											transform:rotate(-135deg);
										}
									}
								}
							}
						}
					}
				}
				.sns {
					margin-bottom:25px;
				}
				.header_btn {
					grid-template-columns:1fr;
					grid-row-gap:10px;
					max-width:350px;
					margin:0 auto;
					.hbtn {
						width:100%;
						height:60px;
						font-size:1.2rem;
						grid-column-gap:1em;
						border-radius:30px;
					}
					.menu-item-has-children {
						display:contents;
						.sub-menu {
							display:none;
							position:relative;
							opacity:1;
							pointer-events:all;
							transform:translateY(0);
							padding:0 0 15px;
							li {
								box-shadow:none;
							}
						}
					}
				}
				.spbtn {
					cursor:pointer;
					height:40px;
					position:relative;
					display:grid;
					justify-items:center;
					align-content:center;
					grid-row-gap:3px;
					.bar {
						width:26px;
						height:16px;
						position:relative;
						&::before,&::after {
							content:'';
							display:block;
							width:100%;
							height:2px;
							background-color:#F78E00;
							transition:.3s;
							position:absolute;
							left:0;
							top:0;
						}
						&::after {
							top:auto;
							bottom:0;
						}
						span {
							width:100%;
							height:2px;
							background-color:#F78E00;
							transition:.3s;
							position:absolute;
							left:0;
							top:50%;
							transform:translateY(-50%);
						}
					}
					.txt {
						font-size:1.0rem;
						letter-spacing:.1em;
						.open {
							display:none;
						}
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				.header {
					background:#FFFFFF;
					box-shadow:none;
					#menu {
						pointer-events: all;
						opacity: 1;
					}
					.spbtn {
						&:hover {
							.bar {
								span {
									opacity:0;
								}
								&::before {
									top:50%;
									left:50%;
									transform:translate(-50%,-50%) rotate(15deg);
								}
								&::after {
									bottom:50%;
									left:50%;
									transform:translate(-50%,50%) rotate(-15deg);
								}
							}
						}
						.bar {
							span {
								opacity:0;
							}
							&::before {
								top:50%;
								left:50%;
								transform:translate(-50%,-50%) rotate(25deg);
							}
							&::after {
								bottom:50%;
								left:50%;
								transform:translate(-50%,50%) rotate(-25deg);
							}
						}
						.txt {
							.close {
								display:none;
							}
							.open {
								display:block;
							}
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			height:50px;
			padding:0 10px;
			.header_inner {
				grid-template-columns:70px 40px;
				.logo {
					img {
						transform: translateY(-2px);
					}
				}
				#menu {
					top:45px;
					height:calc(100vh - 45px);
					height:calc(100dvh - 45px);
				}
			}
		}
	}

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