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

/**
HEADER
**/

#header {
	/* position:sticky; */
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	/* background-color:#FFFFFF; */
	/* box-shadow: 0 2px 4px rgba(0,0,0,.15); */
	.header {
		padding-top:20px;
		.header_inner {
			height:80px;
			width:calc(100% - 60px);
			max-width:1250px;
			background-color:#FFFFFF;
			margin:0 auto;
			padding:0 30px;
			display:grid;
			grid-template-columns:130px 1fr auto;
			align-items:center;
			grid-column-gap:30px;
			box-shadow:0 3px 6px rgba(0,0,0,.16);
			.menu_wrap {
				display: contents;
			}
            div[class^="menu-gmenu-"] {
				justify-self:end;
				.menu {
					display:flex;
					align-items:center;
					justify-content:center;
					column-gap:min(1.2vw,1.5em);
					& > li {
						position:relative;
						& > a {
							font-size:1.5rem;
							font-weight:500;
							position:relative;
							&::after {
								content:'';
								display:block;
								width:0;
								height:2px;
								background-color:var(--color_main);
								position:absolute;
								left:50%;
								transform:translateX(-50%);
								bottom:-.5em;
							}
						}
						&.current-menu-item {
							&:not(.menu-item-type-custom) {
								& > a {
									color:var(--color_main);
									&::after {
										width:100%;
									}
								}
							}
						}
					}
				}
			}
            div[class^="menu-gmenu-en"] {
				.menu {
					& > li {
						& > a {
							font-size:min(1.1vw,1.5rem);
						}
					}
				}
			}
            div[class^="menu-gmenu-zh"] {
				.menu {
					column-gap:min(.8vw,1em);
					& > li {
						& > a {
							font-size:min(1vw,1.3rem);
						}
					}
				}
			}
			.header_link {
				display:flex;
				align-items:center;
				column-gap:15px;
				.btn {
					font-size:1.4rem;
					font-weight:500;
					height:48px;
					padding:0 1.2em;
					display:grid;
					grid-template-columns:repeat(2,auto);
					grid-column-gap:.5em;
					align-items:center;
					justify-content:center;
					img {
						width:1.75em;
					}
					&.recruit {
						background-color:var(--color_main);
						color:#FFFFFF;
					}
					&.contact {
						background-color:#FFFFFF;
						border:1px solid var(--color_main);
						color:var(--color_main);
					}
					&.lang {
						height:auto;
						padding:0;
						color:var(--color_main);
						grid-column-gap:.33em;
						margin-left:.5em;
						position:relative;
						display:block;
						background:url(../img/common/icon-language.svg) no-repeat center left/contain;
						padding:2px 0;
						select {
							color:var(--color_main);
							appearance: none;
							-webkit-appearance: none;
							-moz-appearance: none;
							background: none;
							border:none;
							box-sizing:border-box;
							text-indent:0;
							width: auto;
							outline:0;
							padding-left:1.5em;
						}
					}
				}
				.sns {
					display: contents;
					img {
						width:40px;
					}
				}
			}
		}
	}
}


@media screen and (min-width:1025px) {
	
	.header {
		.header_inner {
			div[class^="menu-gmenu-"] {
				.menu {
					& > li {
						& > a {
							.icon {
								display:none;
							}
						}
						.sub-menu {
							position:absolute;
							bottom:auto;
							padding-top:2em;
							left:-1em;
							transition:.3s;
							opacity:0;
							transform:translateY(-.33em);
							pointer-events:none;
							li {
								box-shadow:0 0 3px rgba(0,0,0,.33);
								a {
									white-space:nowrap;
									background-color:#FFFFFF;
									display:block;
									padding:.75em 1em;
								}
							}
							&::before {
								content:'';
								display:block;
								width:110%;
								height:5px;
								position:absolute;
								background-color:#FFFFFF;
								z-index:1;
								left:-5%;
								top:calc(2em - 5px);
							}
						}
					}
				}
			}
			div[class^="menu-gmenu-"] {
				.menu {
					& > li {
						.sub-menu {
							li {
								a {
									font-size:1.3rem;
								}
							}
						}
					}
				}
			}
		}
	}

}

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

	#header {
		.header_inner {
			div[class^="menu-gmenu-"] {
				.menu {
					& > li {
						&:hover {
							.sub-menu {
								opacity:1;
								transform:translateY(0);
								pointer-events:all;
							}
						}
						.sub-menu {
							width:16em;
							li {
								a {
									&:hover {
										color:var(--color_main);
										opacity:1;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@media (hover:hover) {

	#header {
		.header_inner {
			div[class^="menu-gmenu-"] {
				.menu {
					& > li {
						& > a {
							&:hover {
								color:var(--color_main);
								opacity:1;
								&::after {
									width:100%;
								}
							}
							&::after {
								transition-duration:.3s;
							}
						}
					}
				}
			}
			.header_link {
				a {
					transition:.3s;
					&:hover {
						filter:brightness(1.1);
					}
				}
			}
		}
	}
	
}

body {
	&.menuopen {
		overflow:hidden;
		#header {
			.header {
				.header_inner {
					.menu_wrap {
						opacity:1;
						pointer-events:all;
					}
				}
				.spbtn {
					.bar {
						&::before {
							top:50%;
							transform:translate(-50%,-50%) rotate(45deg);
						}
						&::after {
							top:50%;
							transform:translate(-50%,-50%) rotate(-45deg);
						}
						span {
							opacity:0;
						}
					}
					.txt {
						.open {
							display:block;
						}
						.close {
							display:none;
						}
					}
				}
			}
		}
	}
}

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

	#header {
		.header {
			.header_inner {
				column-gap:20px;
				padding: 0 20px;
				div[class^="menu-gmenu-"] {
					.menu {
						column-gap:min(1vw,1.5em);
						& > li {
							& > a {
								font-size:min(1.2vw,1.4rem);
							}
						}
					}
				}
	            div[class^="menu-gmenu-en"] {
					.menu {
						column-gap:min(.8vw,1em);
						& > li {
							& > a {
								font-size:min(1.2vw,1.5rem);
							}
						}
					}
				}	
	            div[class^="menu-gmenu-zh"] {
					.menu {
						column-gap:min(.8vw,1em);
						& > li {
							& > a {
								font-size:min(1.05vw,1.3rem);
							}
						}
					}
				}
				.header_link {
					column-gap:10px;
					.btn {
						padding:0 .8em;
						&.lang {
							margin-left:0em;
						}
					}
					.sns {
						img {
							width:24px;
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			.header_inner {
				height:50px;
				width:calc(100% - 40px);
				display:grid;
				grid-template-columns:120px auto;
				justify-content:space-between;
				grid-column-gap:20px;
				position:relative;
				.menu_wrap {
					display:grid;
					max-height:calc(100vh - 70px);
					max-height:calc(100dvh - 70px);
					overflow:auto;
					justify-items:center;
					padding:30px 20px;
					background-color:#FFFFFF;
					position:absolute;
					left:0;
					top:49px;
					width:100%;
					box-shadow:0 3px 6px rgba(0,0,0,.15) inset;
					text-align:center;
					transition:.5s;
					opacity:0;
					pointer-events:none;
					z-index:1;
				}
				div[class^="menu-gmenu-"] {
					justify-self:unset;
					margin:0 auto 20px;
					width:100%;
					.menu {
						display:grid;
						grid-template-columns:repeat(2,1fr);
						grid-column-gap:20px;
						align-items:start;
						width:100%;
						text-align:left;
						& > li {
							border-bottom:2px solid #cccccc;
							& > a {
								font-size:1.5rem;
								height:3em;
								align-items:center;
								display:grid;
								grid-template-columns:1fr 1em;
								padding:0 .5em;
								&::after {
									content:none;
								}
								&::before {
									content:'';
									order:1;
									height:1em;
									background:url(../img/common/icon-arrow-blue.svg) no-repeat center center/contain;
								}
							}
							&.menu-item-has-children {
								& > a {
									grid-template-columns:1fr 3em;
									padding-right:0;
									.icon {
										background:none;										
										font-size:inherit;
										position:relative;
										cursor: pointer;
										height:3em;
										box-sizing:border-box;
										&::before {
											content:'';
											display:block;
											border-right:2px solid var(--color_main);
											border-bottom:2px solid var(--color_main);
											transform-origin:center center;
											transform:rotate(45deg);
											transition:.3s;
											width:.3em;
											height:.3em;
											position:absolute;
											top:calc(50% - .15em);
											left:calc(66% - .15em);
										}
									}
									&::before {
										content:none;
									}
								}
								&.open {
									.icon {
										&::before {
											transform:rotate(-135deg);
										}
									}
								}
							}
							.sub-menu {
								display:none;
								li {
									background-color:#f5f5f5;
									margin-bottom: 2px;
									a {
										display:block;
										padding:.66em;
									}
								}
							}
						}
					}
				}
				.header_link {
					display:contents;
					.btn {
						width:100%;
						font-size:1.5rem;
						max-width:400px;
						margin:0 auto 10px;
						&.lang {
							grid-area:1/1/2/2;
							margin:0 auto 20px;
							width:auto;
						}
					}
					.sns {
						display: flex;
						justify-content:center;
						img {
							width:40px;
							margin:5px;
						}
					}
				}
				.spbtn {
					width:50px;
					height:40px;
					position:relative;
					display:grid;
					grid-template-rows:1fr auto;
					justify-items:center;
					.bar {
						width:30px;
						height:100%;
						position:relative;
						&::before,&::after {
							content:'';
							display:block;
							width:100%;
							height:3px;
							background-color:var(--color_main);
							position:absolute;
							left:50%;
							transform:translate(-50%,-50%) rotate(0deg);
							transition:.3s;
						}
						&::before {
							top:calc(50% - 7px);
						}
						&::after {
							top:calc(50% + 7px);
						}
						span {
							display:block;
							width:100%;
							height:3px;
							background-color:var(--color_main);
							position:absolute;
							left:50%;
							top:50%;
							transform:translate(-50%,-50%) rotate(0deg);
							transition:.3s;
						}
					}
					.txt {
						font-size:1.2rem;
						color:var(--color_main);
						font-weight:500;
						.open {
							display:none;
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			padding-top:10px;
			.header_inner {
				width:calc(100% - 20px);
				grid-template-columns:110px auto;
				padding: 0 5px;
				.logo {
					padding-left:10px;
				}
				div[class^="menu-gmenu-"] {
					.menu {
						grid-template-columns:1fr;
					}
				}
				.header_link {
					.btn {
						&.lang {
							margin:0 auto 10px;
						}
					}
				}
			}
		}
	}
	
}