/* ==========================================================================
   l-menu-sp（Figma l-menu-sp Site=Corporate 158:126）— template-parts/corporate/menu.php
   - SP の全画面メニュー。TRUSS ブルーの全画面の色面。開閉は common.js（[data-menu]・hidden）
   - PC（768px 以上）では出さない
   ========================================================================== */

.l-menu-sp {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: var(--space-2xl);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	--focus-color: var(--neutral-0);
}

.l-menu-sp[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.l-menu-sp {
		display: none !important;
	}
}

.l-menu-sp a {
	color: inherit;
	text-decoration: none;
}

.l-menu-sp__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 var(--space-sm) 0 var(--space-lg);
}

.l-menu-sp__logo img {
	width: 98px;
	height: 28px;
	object-fit: contain;
}

.l-menu-sp__close {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px; /* Figma の値 */
	width: 56px;
	height: 52px;
	padding: 0;
	color: var(--color-text-on-brand);
	background: none;
	border: 0;
	border-radius: var(--radius-md);
}

.l-menu-sp__close-icon {
	width: 26px;
	height: 26px;
}

.l-menu-sp__close-label {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	line-height: 1.4;
}

.l-menu-sp__body {
	display: flex;
	flex-direction: column;
	gap: 28px; /* Figma の値 */
	padding: var(--space-xs) var(--space-lg) 0;
}

.l-menu-sp__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding-block: var(--space-md);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	border-bottom: 1px solid var(--color-border-on-brand);
}

.l-menu-sp__item--parent {
	padding-bottom: var(--space-2xs);
	border-bottom: 0;
}

.l-menu-sp__chevron {
	width: 20px;
	height: 20px;
}

ul.l-menu-sp__sub-nav { /* foundation の ul[class] { padding: 0 } より強く */
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1px;
	padding: 0 0 var(--space-sm) var(--space-sm);
	border-bottom: 1px solid var(--color-border-on-brand);
}

.l-menu-sp__sub-item {
	display: flex;
	align-items: center;
	min-height: 44px;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.l-menu-sp__tel {
	display: flex;
	flex-direction: column;
	gap: 2px; /* Figma の値 */
}

.l-menu-sp__tel-label,
.l-menu-sp__tel-hours {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

.l-menu-sp__tel-number {
	display: inline-flex;
	align-items: center;
	gap: 6px; /* Figma の値 */
	align-self: flex-start;
	min-height: 44px;
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
}

.l-menu-sp__tel-icon {
	width: 22px;
	height: 22px;
}

.l-menu-sp__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding-block: var(--space-md);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-brand) !important;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
	--focus-color: var(--neutral-0);
}

.l-menu-sp__cta-icon {
	width: 18px;
	height: 18px;
}

.l-menu-sp__business {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.l-menu-sp__business-title {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

.l-menu-sp__business-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.l-menu-sp__business-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	min-height: 52px;
	padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	background: var(--color-bg-brand-strong);
	border-radius: var(--radius-md);
}