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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	background-color:var(--color_bg);
	transition:.3s;
	&.scroll {
		background-color: rgba(255, 248, 236,.85);
	}
	.header {
		.header_inner {
			width:calc(100% - 166px);
			max-width:100%;
			margin:0 auto;
			height: 110px;
			display:grid;
			grid-template-columns:285px 1fr;
			align-items:end;
			padding-bottom:20px;
			.header_logo {
				img {
					display:block;
				}
			}
			.menu_box {
				display:grid;
				grid-auto-rows:auto 1fr;
				height:100%;
				.preschool_class {
					width:125px;
					height:50px;
					border-radius:0 0 10px 10px;
					font-size:1.4rem;
					font-weight:500;
					font-family: "dnp-shuei-mgothic-std", sans-serif;
					text-align:center;
					color:#FFFFFF;
					background-color:var(--color_sub);
					justify-self:end;
					display:grid;
					align-items:end;
					padding-block:1em;
					letter-spacing:.04em;
				}
				.menu-gmenu-container {
					justify-self:end;
					align-self:end;
					.menu {
						display:flex;
						font-size:1.6rem;
						font-weight:500;
						column-gap:2.2em;
						li {
							a {
								letter-spacing:.05em;
							}
							&.current-menu-item,&.current_page_parent {
								a {
									color:var(--color_main);
									font-weight:600;
								}
							}
						}
					}
				}
			}
			&:has(.logout) {
				position: relative;
			}
			.logout {
				position: absolute;
				z-index: 1;
				font-size: 1.4rem;
				background-color: #ff6600;
				color:#FFFFFF;
				height: 2em;
				width: 7em;
				border-radius: 1em;
				display: grid;
				align-items: center;
				justify-content: center;
				right: 150px;
				top:15px;
			}
		}
	}
}



@media (hover:hover) {

#header {
	.header {
		.spbtn {
			&:hover {
				&::before {
					transform:translateY(-5px);
				}
				&::after {
					transform:translateY(5px);
				}
			}
		}
	}
}

body {
	&.menuopen {
		#header {
			.header {
				.spbtn {
					&:hover {
						&::before {
							transform:translateY(6px) rotate(30deg);
						}
						&::after {
							transform:translateY(-6px) rotate(-30deg);
						}
					}
				}
			}
		}
	}
}
	
}

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



#header {
	.header {
		.header_inner {
			width:calc(100% - 60px);
			max-width:1200px
		}
	}
}
}

@media screen and (max-width:1024px) {
	
	#header {
		.header {
			.header_inner {
				width:calc(100% - 50px);
				height: 100px;
				grid-template-columns:30% 1fr;
				.header_logo {
					img {
						display:block;
					}
				}
				.menu_box {
					.menu-gmenu-container {
						.menu {
							font-size:min(1.8vw,1.6rem);
							column-gap:1.2em;
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		position:relative;
		background-color:#FFFFFF;
		.header {
			.header_inner {
				width:calc(100% - 40px);
				height: 65px;
				grid-template-columns:1fr;
				align-items:center;
				padding-bottom:0;
				.header_logo {
					width:180px;
				}
				.logout {
					font-size: 1.2rem;
					right: 50px;
					top:20px;
				}
			}
		}
	}

	#spmenu {
		.spbtn {
			position:fixed;
			top:10px;
			right:10px;
			z-index:999;
			cursor:pointer;
			width:46px;
			height:46px;
			border-radius:8px;
			background-color:#FFFFFF;
			&::before,&::after {
				content:'';
				display:block;
				width:46%;
				height:2px;
				background-color:var(--color_main);
				border-radius:1px;
				transition:.3s;
				position:absolute;
				left:50%;
				top:33%;
				transform:translate(-50%,-50%) rotate(0deg);
				transform-origin:center center;
			}
			&::after {
				top:67%;
			}
			span {
				width:46%;
				height:2px;
				background-color:var(--color_main);
				border-radius:1px;
				transition:.3s;
				position:absolute;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%);
			}
		}
		.spmenu {
			position:fixed;
			top:0;
			left:0;
			z-index:990;
			background-color:#FFFFFF;
			width:100%;
			height:100vh;
			height:100dvh;
			opacity:0;
			pointer-events:none;
			transition:.5s;
			display:grid;
			grid-template-rows:auto 1fr;
			overflow-y: auto;
			.menu-spmenu-container {
				width:100%;
				max-width:220px;
				margin:0 auto;
				padding:50px 0 50px;
				.menu {
					display:grid;
					font-size:1.6rem;
					grid-row-gap:2.5em;
					li {
						a {
							color:var(--color_main);
							font-weight:600;
							letter-spacing:.08em;
						}
						&.home {
							a {
								display:grid;
								grid-template-columns:repeat(2,auto);
								justify-content:start;
								align-items:center;
								grid-column-gap:.33em;
								&::before {
									content:'';
									width:50px;
									height:25px;
									background:url(../img/common/splogo.svg) no-repeat center center/contain;
								}
							}
						}
					}
				}
			}
			.preschool_class {
				display:grid;
				align-items:center;
				justify-content:center;
				width:70px;
				height:70px;
				background-color:var(--color_sub);
				border-radius:50%;
				font-size:1.3rem;
				font-weight:500;
				line-height:1.5;
				color:#FFFFFF;
				text-align:center;
				position:absolute;
				z-index:1;
				top:110px;
				left:calc(50% + 40px);
			}
			.spmenu_box {
				background-color:var(--color_main);
				padding:22px 0 50px;
                .menu_inner {
					width:100%;
					max-width:220px;
					margin:0 auto;
                    display:flex;
                    align-items:center;
                    justify-content:start;
                    column-gap:25px;
					margin-bottom:20px;
                    .instagram {
                        width:22px;
                    }
                    .recruit {
                        font-size:1.3rem;
                        color:#FFFFFF;
                        font-family: "dnp-shuei-mgothic-std", sans-serif;
                        letter-spacing:.08em;
                        width:94px;
                        height:34px;
                        border:2px solid #FFFFFF;
                        border-radius:18px;
                        display:grid;
                        align-items:center;
                        justify-content:center;
                        padding-bottom:1px;
                    }
                }
	            .contact_box {
	                display:grid;
	                grid-template-columns:1fr;
	                justify-items:center;
	                grid-row-gap:10px;
	                dl {
	                    display:grid;
	                    grid-row-gap:10px;
						justify-items:center;
						text-align:center;
	                    dt {
	                        a {
	                            font-size:1.7rem;
	                            color:#FFFFFF;
	                            font-weight:500;
	                            letter-spacing:.1em;
	                            pointer-events:none;
	                            span {
	                                font-size:2.75rem;
	                                letter-spacing:.1em;
	                            }
	                        }
	                    }
	                    dd {
	                        font-size:1.13rem;
	                        color:#FFFFFF;
	                        font-weight:500;
	                        letter-spacing:.1em;
							justify-self:start;
							&.access {
		                        font-size:1.1rem;
								a {
									color:#FFFFFF;
									letter-spacing:.05em;
								}
							}
	                    }
	                }
	                .mail {
	                    font-size:1.3rem;
	                    width:222px;
	                    height:42px;
						margin:0 auto;
	                    background-color:#FFFFFF;
	                    border-radius:21px;
	                    color:var(--color_main);
	                    font-weight:600;
	                    display:grid;
	                    align-items:center;
	                    justify-content:center;
	                    letter-spacing:.08em;
						padding-bottom:.1em;
	                }
	            }
			}
		}
	}

	body {
		&.menuopen {
			overflow:hidden;
			#spmenu {
				.spmenu {
					opacity:1;
					pointer-events:all;
				}
				.spbtn {
					&::before,&::after {
						width:56%;
						top:50%;
						transform:translate(-50%,-50%) rotate(42deg);
					}
					&::after {
						top:50%;
						transform:translate(-50%,-50%) rotate(-42deg);
					}
					span {
						opacity:0;
					}
				}
			}
		}
	}
}

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

	#spmenu {
		.spmenu {
			height:100%;
		}
	}

}