@charset "utf-8";

#open_menu {
	display:none;
}
#sp_box {
	display:none;
}
.menu_is_open {
	overflow:hidden;
}

/* ハンバーガーボタン
------------------------------------------------------------*/
#spicon {
	position:fixed;
	top:11px;
	right:4%;
	z-index:9999;
	width:58px;
	height:58px;
	padding:0;
	border:1px solid #ffffffb3;
	border-radius:0;
	background-color:#09243780;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	color:#fff;
	cursor:pointer;
}
.spicon_line {
	position:absolute;
	left:13px;
	width:30px;
	height:2px;
	background-color:#fff;
	transition:top 300ms ease, transform 300ms ease, opacity 300ms ease;
}
.spicon_line:nth-child(1) {
	top:13px;
}
.spicon_line:nth-child(2) {
	top:22px;
}
.spicon_line:nth-child(3) {
	top:31px;
}
#spicon::after {
	position:absolute;
	left:0;
	bottom:5px;
	width:100%;
	content:"MENU";
	font-size:9px;
	font-weight:500;
	line-height:1;
	letter-spacing:0.14em;
	text-align:center;
}
#spicon.m_active::after {
	content:"CLOSE";
	letter-spacing:0.08em;
}
#spicon.m_active .spicon_line:nth-child(1) {
	top:22px;
	transform:rotate(45deg);
}
#spicon.m_active .spicon_line:nth-child(2) {
	opacity:0;
}
#spicon.m_active .spicon_line:nth-child(3) {
	top:22px;
	transform:rotate(-45deg);
}
#spicon:focus-visible {
	outline:2px solid #fff;
	outline-offset:3px;
}

/* 展開メニュー
------------------------------------------------------------*/
#open_menu {
	position:fixed;
	top:0;
	left:0;
	z-index:9990;
	width:100%;
	height:100vh;
	height:100dvh;
}
#center_box {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:90px 0 50px;
	background-color:#092437;
	background-image:linear-gradient(#092437e6,#0c4c78d9),url("../images/contact_bg.webp");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	overflow-y:auto;
	overscroll-behavior:contain;
}
.sp_menu_inner {
	width:90%;
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
}
.sp_menu_head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	padding-right:80px;
	margin-bottom:45px;
}
.sp_menu_logo {
	width:45%;
	max-width:226px;
}
.sp_menu_logo_img {
	width:100%;
	height:auto;
}
.sp_menu_title {
	color:#fff;
	font-size:clamp(34px,4.4vw,54px);
	line-height:1;
	letter-spacing:0.04em;
}
.sp_nav {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	column-gap:45px;
	border-top:1px solid #ffffff66;
}
.sp_nav_item {
	border-bottom:1px solid #ffffff66;
}
.sp_nav_link {
	display:grid;
	grid-template-columns:minmax(0,1fr) auto 32px;
	align-items:center;
	column-gap:15px;
	padding:19px 0;
	color:#fff;
	text-decoration:none;
}
.sp_nav_link::after {
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border:1px solid #ffffff99;
	border-radius:50%;
	content:"›";
	font-size:20px;
	line-height:1;
	transition:background-color 200ms ease,color 200ms ease;
}
.sp_nav_link:hover {
	color:#fff;
	text-decoration:none;
}
.sp_nav_link:hover::after {
	background-color:#fff;
	color:#0c4c78;
}
.sp_nav_link:focus-visible {
	outline:2px solid #fff;
	outline-offset:4px;
}
.sp_nav_ja {
	font-size:clamp(20px,2vw,24px);
	font-weight:500;
	line-height:1.5;
	letter-spacing:0.04em;
}
.sp_nav_en {
	color:#ffffffb3;
	font-size:13px;
	line-height:1;
	letter-spacing:0.12em;
}
.sp_menu_shop {
	max-width:430px;
	margin:35px 0 0 auto;
}
.sp_menu_shop_link {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 22px;
	border:1px solid #ffffffb3;
	background-color:#0c4c78;
	color:#fff;
	text-decoration:none;
	transition:background-color 200ms ease;
}
.sp_menu_shop_link:hover {
	background-color:#092437;
	color:#fff;
	text-decoration:none;
}
.sp_menu_shop_ja {
	display:block;
	font-size:20px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:0.04em;
}
.sp_menu_shop_en {
	display:block;
	font-size:13px;
	line-height:1.4;
	letter-spacing:0.12em;
}
.sp_menu_shop_arrow {
	width:20px;
	height:auto;
	flex-shrink:0;
}

@media only screen and (max-width:1200px) {
	#sp_box {
		display:block;
	}
}

@media only screen and (max-width:768px) {
	#spicon {
		top:8px;
		width:54px;
		height:54px;
	}
	.spicon_line {
		left:12px;
		width:28px;
	}
	#center_box {
		padding:80px 0 30px;
	}
	.sp_menu_head {
		padding-right:65px;
		margin-bottom:30px;
	}
	.sp_nav {
		grid-template-columns:1fr;
		column-gap:0;
	}
	.sp_nav_link {
		padding:18px 0;
	}
	.sp_menu_shop {
		max-width:none;
		margin-top:25px;
	}
}