/* ===============================
   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-main);
}

.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;
	}
}

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