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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 999;
	.header {
		background-color:#FFFFFF;
		.header_inner {
			display:grid;
			grid-template-columns:90px 1fr 280px;
			padding-left:40px;
			grid-column-gap:30px;
			align-items:center;
			#menu {
				display: contents;
			}
			.menu-gmenu-container {
				.menu {
					display:flex;
					font-size:1.5rem;
					justify-content:end;
					align-items:center;
					column-gap:2em;
					& > li {
						a {
							letter-spacing:.02em;
							display:grid;
							justify-items:center;
							grid-row-gap:.33em;
							.font_en {
								font-size:1.3rem;
								color:var(--color_main);
							}
						}
						&.current-menu-item {
							& > a {
								color:var(--color_main);
							}
						}
					}
				}
			}
			.header_btn {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				font-size:1.4rem;
				li {
					a {
						display:grid;
						align-content:center;
						justify-items:center;
						grid-row-gap:.66em;
						height:90px;
						color:#FFFFFF;
						font-size:1.3rem;
						letter-spacing:.1em;
						.font_en {
							font-size:1.8rem;
							letter-spacing:.03em;
							font-weight:300;
						}
					}
					&.members{
						a {
							background-color:var(--color_def);
						}
					}
					&.contact {
						a {
							background-color:var(--color_main);
						}
					}
				}
			}
		}
	}
}


@media (hover:hover) {	
}

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

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

	#header {
		.header {
			.header_inner {
				grid-template-columns:90px 1fr 240px;
				padding-left:30px;
				.menu-gmenu-container {
					.menu {
						column-gap:1.5em;
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			box-shadow:0 2px 4px rgba(0,0,0,.15);
			.header_inner {
				grid-template-columns:50px 1fr 50px;
				grid-column-gap:0;
				padding-left:20px;
				justify-content:space-between;
				height:50px;
				#menu {
					display: block;
					position:fixed;
					z-index:1;
					width:100%;
					height:calc(100vh - 50px);
					height:calc(100dvh - 50px);
					top:50px;
					left:0;
					padding-top:20px;
					background-color:#FFFFFF;
					box-shadow:0 2px 4px rgba(0,0,0,.15) inset;
					transition:.5s;
					opacity:0;
					pointer-events:none;
					overflow-y:auto;
				}
				.menu-gmenu-container {
					margin-bottom:20px;
					.menu {
						display:grid;
						grid-template-columns:1fr;
						justify-content:start;
						& > li {
							border-bottom:1px solid #efefef;
							a {
								justify-items:start;
								grid-template-columns:5em 1fr;
								align-items:center;
								justify-content:start;
								height:3.6em;
								padding:0 2em;
								.font_en {
									order:1;
								}
							}
						}
					}
				}
				.header_btn {
					grid-template-columns:repeat(2,auto);
					justify-content:end;
					li {
						a {
							font-size:1.2rem;
							height:50px;
							width:7em;
							.font_en {
								font-size:1.4rem;
							}
							.jp {
								display:none;
							}
						}
						&.members{
							a {
								background-color:var(--color_def);
							}
						}
						&.contact {
							a {
								background-color:var(--color_main);
							}
						}
					}
				}				
				.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 {
				.header {
					.header_inner {
						#menu {
							opacity: 1;
							pointer-events: all;
						}
					}
					.spbtn {
						&:hover {
							.bar {
								opacity:0;
							}
							&::before {
								top:50%;
								transform:translate(-50%,-50%) rotate(35deg);
							}
							&::after {
								top:50%;
								transform:translate(-50%,-50%) rotate(-35deg);
							}
						}
					}
				}
			}
		}
	}
}