@charset "UTF-8";

#sp_box {
	display:none;
}

#open_menu {
	display:none;
}

@media only screen and (max-width:1024px) {
	/* 共通スマートフォンメニュー */
	#sp_box {
		display:block;
	}

	#spicon {
		position:fixed;
		top:22px;
		right:16px;
		display:flex;
		flex-direction:column;
		gap:3px;
		width:32px;
		min-height:31px;
		padding:0;
		color:#353736;
		border:0;
		background-color:transparent;
		cursor:pointer;
		z-index:10020;
	}

	#spicon span {
		display:block;
		width:26px;
		margin-left:1px;
		border-bottom:4px solid #353736;
		transition:300ms ease-in-out;
	}

	#spicon b {
		display:block;
		width:100%;
		font-family:"HGMaruGothicMPRO", "vdl-v7marugothic", sans-serif;
		font-size:7px;
		font-weight:400;
		text-align:center;
	}

	#spicon.m_active span:nth-child(1) {
		transform:translateY(7px) rotate(45deg);
	}

	#spicon.m_active span:nth-child(2) {
		opacity:0;
	}

	#spicon.m_active span:nth-child(3) {
		transform:translateY(-7px) rotate(-45deg);
	}

	#spicon.m_active b {
		display:none;
	}

	#open_menu {
		position:fixed;
		top:0;
		left:0;
		display:block;
		width:100%;
		height:100vh;
		padding-top:82px;
		overflow-y:auto;
		opacity:0;
		visibility:hidden;
		pointer-events:none;
		background-color:#f0f7fc;
		transition:300ms ease-in-out;
		z-index:10000;
	}

	#open_menu.is_open {
		opacity:1;
		visibility:visible;
		pointer-events:auto;
	}

	#center_box {
		width:100%;
		min-height:100%;
	}

	.sp_menu_head {
		padding:14px 6%;
		background-color:#fff;
	}

	.sp_menu_address {
		margin:0;
		font-size:14px;
		text-align:center;
	}

	.sp_menu_quick {
		display:grid;
		grid-template-columns:repeat(2,1fr);
		margin:0;
		background-color:#fff;
	}

	.sp_menu_quick li {
		border-top:1px solid #d8d8d9;
		border-right:1px solid #d8d8d9;
	}

	.sp_menu_quick_end {
		border-right:0;
	}

	.sp_menu_quick a {
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:56px;
		font-size:17px;
		font-weight:500;
		transition:300ms ease-in-out;
	}

	.sp_menu_quick a:hover {
		color:#fff;
		background-color:#0d89d4;
	}

	.sp_menu_body {
		width:88%;
		margin-left:auto;
		margin-right:auto;
		padding:28px 0 24px;
	}

	.sp_menu_group {
		padding:0 0 18px;
	}

	.sp_menu_title {
		font-size:19px;
		font-weight:500;
	}

	.sp_menu_title a {
		display:block;
		padding:6px 0;
	}

	.sp_menu_group ul {
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:8px 20px;
		margin:8px 0 0;
		padding-left:18px;
	}

	.sp_menu_group li {
		position:relative;
		padding-left:13px;
		font-size:15px;
	}

	.sp_menu_group li:before {
		content:"";
		position:absolute;
		top:9px;
		left:0;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-left:7px solid #0d89d4;
	}

	.sp_menu_group a {
		display:block;
		padding:4px 0;
		white-space:nowrap;
	}

	.sp_menu_single {
		font-size:19px;
		font-weight:500;
		border-top:1px solid #d8d8d9;
	}

	.sp_menu_single a {
		display:block;
		padding:13px 0;
	}

	.sp_menu_bottom {
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:12px;
		margin:22px 0 0;
	}

	.sp_menu_bottom a {
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:48px;
		padding:8px;
		font-size:16px;
		border:2px solid #0d89d4;
		background-color:#fff;
		transition:300ms ease-in-out;
	}

	.sp_menu_bottom a:hover {
		color:#fff;
		background-color:#0d89d4;
	}

	.sp_menu_close {
		margin-top:25px;
	}

	.sp_menu_close button {
		display:block;
		width:100%;
		padding:10px;
		font-size:16px;
		color:#fff;
		border:0;
		background-color:#808080;
		cursor:pointer;
	}

	body.menu_open {
		overflow:hidden;
	}
}

@media only screen and (max-width:768px) {
	#spicon {
		top:17px;
		gap:4px;
		width:40px;
		min-height:39px;
	}

	#spicon span {
		width:34px;
		margin-left:3px;
	}

	#spicon b {
		font-size:9px;
	}

	#spicon.m_active span:nth-child(1) {
		transform:translateY(8px) rotate(45deg);
	}

	#spicon.m_active span:nth-child(3) {
		transform:translateY(-8px) rotate(-45deg);
	}

	#open_menu {
		padding-top:73px;
	}

	.sp_menu_group ul {
		grid-template-columns:1fr;
	}
}