.wlp-menu-toggle { display: none; }

@media (max-width: 780px) {
	body.wlp-menu-open { overflow: hidden; }

	.wlp-header {
		z-index: 70;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.wlp-header .wlp-brand {
		position: relative;
		z-index: 72;
	}

	.wlp-menu-toggle {
		position: relative;
		z-index: 72;
		display: grid;
		grid-template-columns: 28px auto;
		grid-template-rows: 8px 8px;
		gap: 4px 8px;
		align-items: center;
		justify-self: end;
		padding: 8px 2px;
		color: #171713;
		border: 0;
		background: transparent;
		font: 400 1rem var(--mono);
		cursor: pointer;
	}

	.wlp-menu-toggle i {
		position: relative;
		display: block;
		grid-column: 1;
		width: 28px;
		height: 2px;
		background: currentColor;
		transition: transform .25s var(--ease);
	}

	.wlp-menu-toggle span {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.wlp-menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(6px) rotate(45deg); }
	.wlp-menu-toggle[aria-expanded="true"] i:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

	.wlp-nav {
		position: fixed;
		z-index: 70;
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 100vw;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: 112px 26px 38px;
		overflow-y: auto;
		background: #ffdda2;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-16px);
		transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
	}

	.wlp-menu-open .wlp-header {
		background: #ffdda2;
	}

	.wlp-menu-open .wlp-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.wlp-nav ul,
	.wlp-nav-list {
		display: grid;
		gap: 2px;
		margin: 0 auto;
		padding: 0;
		max-width: 440px;
		border: 0;
		list-style: none;
	}

	.wlp-nav li { margin: 0; padding: 0; }

	.wlp-nav a,
	.wlp-nav-list a {
		display: grid;
		gap: 7px;
		min-height: 98px;
		padding: 17px 12px;
		place-content: center;
		color: #161612;
		border: 1px solid rgba(255,255,255,.85);
		border-radius: 20px;
		font: 400 1.55rem var(--mono);
		letter-spacing: .05em;
		text-align: center;
		text-decoration: none;
	}

	.wlp-nav a small { display: none; }
	.wlp-nav a::after { font: 500 .76rem var(--body); letter-spacing: .03em; }
	.wlp-nav li:nth-child(1) a { background: #fa7d93; }
	.wlp-nav li:nth-child(1) a::after { content: "コンセプト"; }
	.wlp-nav li:nth-child(2) a { background: #43cec1; }
	.wlp-nav li:nth-child(2) a::after { content: "ロケーション"; }
	.wlp-nav li:nth-child(3) a { background: #ff9f50; }
	.wlp-nav li:nth-child(3) a::after { content: "撮影実績"; }
	.wlp-nav li:nth-child(4) a { background: #0da0d3; }
	.wlp-nav li:nth-child(4) a::after { content: "プラン"; }
	.wlp-nav li:nth-child(5) a { background: #95c431; }
	.wlp-nav li:nth-child(5) a::after { content: "撮影までの流れ"; }
	.wlp-nav li:nth-child(6) a { background: #ffdb2b; }
	.wlp-nav li:nth-child(6) a::after { content: "よくあるご質問"; }
	.wlp-nav li:nth-child(7) a { background: #aa92c0; }
	.wlp-nav li:nth-child(7) a::after { content: "お問い合わせ"; }

	.wlp-line--header { display: none; }
}