/* ===============================
   menu-nav: ページ内メインナビゲーション
   =============================== */

.menu-page .menu-nav {
	background: transparent;
}

.menu-page .menu-nav__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.menu-page .menu-nav__link {
	display: flex;
	min-width: 0;
	min-height: var(--space-9);
	align-items: center;
	justify-content: center;
	padding-inline: var(--space-1);
	color: var(--color-sub);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	transition: color var(--duration-disclosure, 220ms) ease;
}

.menu-page .menu-nav__label {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding-block: var(--space-1);
	white-space: nowrap;
}

.menu-page .menu-nav__label::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--duration-disclosure, 220ms) ease;
}

.menu-page .menu-nav__link:hover,
.menu-page .menu-nav__link:focus-visible {
	color: var(--color-primary);
}

.menu-page .menu-nav__link[aria-current="location"] {
	color: var(--color-primary);
}

.menu-page .menu-nav__link[aria-current="location"] .menu-nav__label::after {
	transform: scaleX(1);
}

.menu-page .menu-nav__link:hover .menu-nav__label::after,
.menu-page .menu-nav__link:focus-visible .menu-nav__label::after {
	transform: scaleX(1);
}

@media (min-width: 768px) {
	.menu-page .menu-nav {
		padding-block: var(--space-7);
	}

	.menu-page .menu-nav__list {
		width: min(66%, 880px);
		margin-inline: auto;
	}

	.menu-page .menu-nav__link {
		min-height: var(--space-9);
		padding-inline: var(--space-3);
		font-size: var(--fs-page-lead);
		letter-spacing: 0.1em;
	}
}

/* 768〜863pxでは66%の幅に3項目が収まらず、「コース料理」が枠からはみ出して隣と続いて見える。
   文字サイズは変えず、この帯だけ一覧の幅に下限を設ける。 */
@media (min-width: 768px) and (max-width: 1023px) {
	.menu-page .menu-nav__list {
		width: max(66%, calc(var(--space-13) * 4));
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-page .menu-nav__link,
	.menu-page .menu-nav__label::after {
		transition-duration: 0.01ms;
	}
}