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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	.header {
		border-bottom:1px solid var(--color_main);
		background-color:#FFFFFF;
		padding:15px 0;
		.header_inner {
			width:calc(100% - 60px);
			max-width:1200px;
			margin:0 auto;
			display:grid;
			grid-row-gap:20px;
			.logo {
				img {
					display:block;
					width:100%;
					max-width:300px;
				}
			}
			#menu {
				&::before {
					content:'';
					width:90px;
				}
				display:grid;
				grid-template-columns:auto 1fr auto;
				align-items:center;
				.menu-gmenu-container {
					.menu {
						display:flex;
						font-size:1.6rem;
						align-items:center;
						justify-content:center;
						column-gap:1.5em;
						li {
							a {
								display:grid;
								justify-items:center;
								grid-row-gap:.33em;
								span {
									font-family: "Oswald", sans-serif;
									font-size:1.2rem;
									font-weight:400;
									letter-spacing:.05em;
								}
							}
						}
					}
				}
				.sns {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-column-gap:10px;
					li {
						width:40px;
						img {
							display:block;
						}
						&:first-child {
							img {
								transform:scale(.9);
							}
						}
					}
				}
			}
		}
	}
}

@media (hover:hover) {

	#header {
		.header {
			.header_inner {
				.menu-gmenu-container {
					.menu {
						li {
							a {
								transition:.3s;
								&:hover {
									color:var(--color_main);
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			.header_inner {
				#menu {
					&::before {
						content:none;
					}
					grid-template-columns: 1fr auto;
					align-items:center;
				}
			}
		}
	}
		
}

@media screen and (max-width:1024px) {
	
	#header {
		.header {
			.header_inner {
				width:calc(100% - 50px);
				.logo {
					img {
						max-width:240px;
					}
				}
				#menu {
					grid-template-columns:a1fr;
					.menu-gmenu-container {
						.menu {
							font-size:1.5rem;
							column-gap:1.33em;
						}
					}
					.sns {
						position:absolute;
						right:25px;
						top:20px;
						li {
							width:30px;
						}
					}
				}
			}
		}
	}
		
}

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

	#header {
		.header {
			padding:0;
			.header_inner {
				width:100%;
				height:50px;
				padding:0 5px 0 20px;
				grid-template-columns:1fr 60px 40px;
				align-items:center;
				grid-column-gap:10px;
				.logo {
					img {
						max-width:200px;
					}
				}
				#menu {
					display:contents;
					.menu-gmenu-container {
						position:fixed;
						top:51px;
						left:0;
						width:100%;
						height: calc(100% - 50px);
						/* height:calc(100vh - 50px);
						height:calc(100dvh - 50px); */
						background-color:#FFFFFF;
						overflow-y:auto;
						padding:30px;
						transition:.5s;
						opacity:0;
						pointer-events:none;
						.menu {
							display:grid;
							width:100%;
							max-width:400px;
							margin:0 auto;
							grid-auto-columns:1fr;
							li {
								font-size:1.7rem;
								border-bottom:3px solid #efefef;
								a {
									grid-template-columns:repeat(2,auto);
									align-items:center;
									justify-content:space-between;
									padding:.75em 0;
									span {
										color:var(--color_main);
									}
								}
							}
						}
					}
					.sns {
						position:relative;
						top:auto;
						right:auto;
						grid-column-gap:5px;
						li {
							img {
								width:27.5px
							}
						}
					}
				}
				.spbtn {
					cursor:pointer;
					height:40px;
					position:relative;
					&::before,&::after {
						content:'';
						display:block;
						width:60%;
						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:60%;
						height:2px;
						background-color:var(--color_main);
						transition:.3s;
						position:absolute;
						left:20%;
						top:50%;
						transform:translateY(-50%);
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				.header {
					.header_inner {
						#menu {
							.menu-gmenu-container {
								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);
							}
						}
					}
				}
			}
		}
	}
	
}