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

/**
HEADER
**/
#header {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	.header {
		padding:10px 30px;
		.header_inner {
			background-color:#FFFFFF;
			min-height:60px;
			border-radius:30px;
			display:grid;
			grid-template-columns:180px 1fr auto;
			padding:8px 8px 8px 30px;
			grid-column-gap:50px;
			align-items:center;
			box-shadow:0 0 10px rgba(0,0,0,.1);
			.menu-gmenu-container {
				.menu {
					display:flex;
					font-size:1.6rem;
					justify-content:end;
					align-items:center;
					column-gap:3em;
					 li {
						&.parent {
							 a {
								display:grid;
								grid-template-columns:repeat(2,auto);
								align-items:center;
								grid-column-gap:.5em;
								&::after {
									content:'';
									width:.33em;
									height:.33em;
									border-right:2px solid #000000;
									border-bottom:2px solid #000000;
									transform:rotate(45deg);
									transition:.3s;
								}
								&.open {
									color:#F388A6;
									&::after {
										transform:rotate(-135deg);
									}
								}
							}
						}
						&.current-menu-item {
							& a {
								color:#F388A6;
							}
						}
					}
				}
			}
			.menu-mmenu-container {
				overflow:hidden;
				grid-area:2/1/3/4;
				margin-right:80px;
				/* height:210px; */
				justify-self:end;
				padding-top: 40px;
				margin-top: -20px;
				transition:.5s;
				height:0;
				opacity:0;
				padding:0;
				&.open {
					height:210px;
					padding-top:40px;
					opacity:1;
				}
				.menu {
					display:flex;
					font-size:1.4rem;
					justify-content:end;
					column-gap:2em;
					 li {
						a {
							display:grid;
							justify-items:center;
							grid-row-gap:.66em;
							.text {
								display:grid;
								grid-template-columns:repeat(2,auto);
								align-items:center;
								justify-content:center;
								grid-column-gap:.33em;
								line-height:1.5;
								text-align:center;
								&::after {
									content:'';
									width:1em;
									height:1em;
									background:url(../img/common/arrow_white_pink.png) no-repeat center center/contain;
								}
							}
							&::before {
								content:'';
								display:block;
								width:200px;
								aspect-ratio:20/11;
								background:url(../img/common/menu1.png) no-repeat center center/contain;
							}
						}
						&.current-menu-item {
							& a {
								color:#F388A6;
							}
						}
						 &:nth-child(2) {
							 a {
								 &::before {
									background:url(../img/common/menu2.png) no-repeat center center/contain;
								 }
							 }
						 }
						 &:nth-child(3) {
							 a {
								 &::before {
									background:url(../img/common/menu3.png) no-repeat center center/contain;
								 }
							 }
						 }
					}
				}
			}
			.contact {
				font-size:1.6rem;
				background-color:#7ABB3F;
				color:#FFFFFF;
				height:44px;
				padding:0 1.33em;
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:center;
				grid-column-gap:.66em;
				border-radius:22px;
			}
		}
	}
}


@media (hover:hover) {

	#header {
		.header {
			.header_inner {
				.menu-gmenu-container {
					.menu {
						 li {
							 a {
								 &:hover {
									color:#F388A6;
									 opacity:1;
								 }
							 }
						}
					}
				}
				.menu-mmenu-container {
					.menu {
						 li {
							a {
								&:hover {
									color:#F388A6;
									opacity:1;
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

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

	#header {
		.header {
			padding:10px 20px;
			.header_inner {
				grid-template-columns:150px 1fr auto;
				grid-column-gap:30px;
				.menu-gmenu-container {
					.menu {
						column-gap:2em;
					}
				}
				.menu-mmenu-container {
					margin-right:30px;
				}
			}
		}
	}
	
}

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


	#header {
		.header {
			padding:10px;
			.header_inner {
				min-height:50px;
				border-radius:25px;
				grid-template-columns:140px 1fr 34px;
				padding:0 10px 0 20px;
				grid-column-gap:5px;
				.menu-gmenu-container {
					display:none;
				}
				.menu-mmenu-container {
					display:none;
				}
				.contact {
					height:34px;
					width:34px;
					grid-template-columns:1fr;
					padding:0;
					align-items:center;
					border-radius:17px;
					justify-self:end;
					img {
						width:18px;
						margin:0 auto;
					}
					span {
						display:none;
					}
				}			
				.spbtn {
					cursor:pointer;
					height:34px;
					position:relative;
					&::before,&::after {
						content:'';
						display:block;
						width:60%;
						height:2px;
						background-color:#7ABB3F;
						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:#7ABB3F;
						transition:.3s;
						position:absolute;
						left:20%;
						top:50%;
						transform:translateY(-50%);
					}
				}
			}
		}
	}

	.spmenu {
		position:fixed;
		background-color:#FFFFFF;
		left:0;
		top:0;
		width:100%;
		height:100vh;
		height:100dvh;
		padding:80px 20px 50px;
		z-index:98;
		opacity:0;
		pointer-events:none;
		transition:.5s;
		overflow-y:auto;
		.menu {
			display:grid;
			font-size:1.6rem;
			max-width:330px;
			margin:0 auto;
			li {
				border-bottom:2px dotted #cccccc;
				a {
					display:grid;
					grid-template-columns:1fr auto;
					align-items:center;
					justify-content:start;
					grid-column-gap:.33em;
					line-height:1.3;
					min-height:3em;
					padding:.33em;
					&::after {
						content:'';
						width:1em;
						height:1em;
						background:url(../img/common/arrow_white_pink.png) no-repeat center center/contain;
					}
				}
				.sub-menu {
					font-size:1.4rem;
					li {
						border-bottom:none;
						border-top:2px dotted #FFFFFF;
					}
					a {
						padding-left:1.5em;
						min-height:3.2em;
						background-color:#f5f5f5;
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				.header {
					.header_inner {
						box-shadow:0 3px 6px rgba(0,0,0,.15);
					}
					.spbtn {
						&:hover {
							.bar {
								opacity:0;
							}
							&::before {
								top:50%;
								transform:translate(-50%,-50%) rotate(35deg);
							}
							&::after {
								top:50%;
								transform:translate(-50%,-50%) rotate(-35deg);
							}
						}
					}
				}
			}
			.spmenu {
				opacity:1;
				pointer-events:all;
			}
		}
	}
}