@charset "utf-8";

.spMenu {
	position: fixed;
	z-index: 3000;
	top: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - 85px);
	background-color: #FAF0E0;
	display: none;
}
.spMenu__navList {
	border-top: 1px solid #ddd;
	margin-bottom: 24px;
}
.spMenu .header__navItem > a {
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
}

/* bodyに「SP用メニューが開いている」というクラスが付与されているとき、bodyのスクロールを無効化 */
.is-spMenuActive {
	overflow: hidden;
	position: relative;
	height: 100vh;
}
.is-spMenuActive::before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 2999;
	backdrop-filter:blur(8px);
}

/* =========================
	@media 768px
========================= */
@media screen and (max-width:768px) {
	.spMenu {
		max-width: 100%;
		height: auto;
        border-radius: 0 0 20px 20px;
    	box-shadow: 0 4px 6px rgba(0,0,0,0.2);    
	}

	.spMenu > .l-container {
		padding: 30px 20px;
	}
}