/*
 * メニューと料金ページ — washoku-demos の MenuPage.tsx を忠実移植。
 * スマホは積み上げリスト、PCは料金表という2系統のDOMを出し分ける（元実装と同じ）。
 */
.apm-page {
	--aps-shell: var(--color-shell, #fffcfc);
	--aps-shell-2: var(--color-shell-2, #fdf1f0);
	--aps-ink: var(--color-ink, #1c1a17);
	--aps-sumi: var(--color-sumi, #2b2426);
	--aps-stone: var(--color-stone, #6f6669);
	--aps-gold: var(--color-gold, #b83a4e);
	--aps-gold-deep: var(--color-gold-deep, #932b3d);
	--aps-sage: var(--color-sage, #9a9096);
	--aps-line: var(--color-line, #f6e3e1);
	--aps-mincho: var(--font-mincho, "Shippori Mincho", serif);
	--aps-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
	--aps-quint: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: var(--font-sans, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
	color: var(--aps-sumi);
	font-size: 0.9375rem;
	line-height: 1.9;
}

.apm-page .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.apm-head { max-width: 48rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .apm-head { margin-bottom: 4rem; } }
.apm-lead { margin: 1.75rem 0 0; font-size: 0.9375rem; line-height: 2; color: var(--aps-stone); }

/* ---------- カテゴリ固定ナビ ---------- */
.apm-nav {
	position: sticky;
	top: var(--salon-header-offset, 4.5rem);
	z-index: 30;
	border-top: 1px solid var(--aps-line);
	border-bottom: 1px solid var(--aps-line);
	background: color-mix(in srgb, var(--aps-shell) 90%, transparent);
	backdrop-filter: blur(16px);
	transition: top 500ms var(--aps-quint);
}
.apm-nav__inner {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	padding-block: 1rem;
	scrollbar-width: none;
}
.apm-nav__inner::-webkit-scrollbar { display: none; }
.apm-nav a {
	position: relative;
	flex-shrink: 0;
	display: inline-block;
	padding-bottom: 2px;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--aps-sumi);
	text-decoration: none;
}
.apm-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--aps-quint); }
.apm-nav a:hover { color: var(--aps-gold); }
.apm-nav a:hover::after { transform: scaleX(1); }

.apm-body { padding-block: 4rem; }
@media (min-width: 768px) { .apm-body { padding-block: 6rem; } }

/* ---------- カテゴリ ---------- */
.apm-category { scroll-margin-top: 9rem; }
.apm-category + .apm-category { margin-top: 5rem; }
@media (min-width: 768px) { .apm-category + .apm-category { margin-top: 7rem; } }
.apm-category__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; row-gap: 0.25rem; }
.apm-category__title { font-family: var(--aps-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0; }

/* ---------- スマホ: 積み上げリスト ---------- */
.apm-stack { margin-top: 2rem; border-top: 1px solid var(--aps-sumi); }
@media (min-width: 768px) { .apm-stack { display: none; } }
.apm-stack__item { border-bottom: 1px solid var(--aps-line); padding-block: 1.5rem; }
.apm-stack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.apm-stack__head h3 { margin: 0; font-size: 0.9375rem; font-weight: 400; color: var(--aps-sumi); }
.apm-stack__head .dur { margin: 0; flex-shrink: 0; white-space: nowrap; font-size: 0.75rem; color: var(--aps-stone); }
.apm-stack__desc { margin: 0.375rem 0 0; font-size: 0.75rem; line-height: 1.625; color: var(--aps-stone); }
.apm-badges { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; column-gap: 0.75rem; font-size: 0.6875rem; }
.apm-badges .idle { color: var(--aps-gold); }
.apm-badges .fills { color: var(--aps-sage); }
.apm-stack__prices { margin: 1rem 0 0; }
.apm-stack__prices > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--aps-line); padding-block: 0.5rem; }
.apm-stack__prices dt { font-size: 0.75rem; color: var(--aps-stone); }
.apm-stack__prices dt .sub { margin-left: 0.5rem; font-size: 0.6875rem; opacity: 0.6; }
.apm-stack__prices dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--aps-sumi); }

/* ---------- PC: 料金表 ---------- */
.apm-table-wrap { display: none; margin-top: 2rem; overflow-x: auto; }
@media (min-width: 768px) { .apm-table-wrap { display: block; } }
.apm-table { width: 100%; min-width: 44rem; border-collapse: collapse; text-align: left; }
.apm-table thead tr { border-bottom: 1px solid var(--aps-sumi); }
.apm-table th[scope="col"] { padding: 0.75rem 0.75rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--aps-stone); text-align: right; }
.apm-table th[scope="col"].apm-table__menu-col { text-align: left; padding-left: 0; }
.apm-table th[scope="col"]:last-child { text-align: right; }
.apm-table th[scope="col"] .sub { display: block; font-size: 0.625rem; font-weight: 400; opacity: 0.6; }
.apm-table tbody tr { border-bottom: 1px solid var(--aps-line); vertical-align: top; }
.apm-table th[scope="row"] { padding: 1.25rem 1rem 1.25rem 0; text-align: left; font-weight: 400; }
.apm-table th[scope="row"] .name { display: block; font-size: 0.9375rem; color: var(--aps-sumi); }
.apm-table th[scope="row"] .desc { display: block; margin-top: 0.375rem; max-width: 20rem; font-size: 0.75rem; line-height: 1.625; color: var(--aps-stone); }
.apm-table th[scope="row"] .flat-chip { display: inline-block; margin-top: 0.5rem; border: 1px solid var(--aps-line); padding: 0.125rem 0.5rem; font-size: 0.625rem; letter-spacing: 0.06em; color: var(--aps-stone); }
.apm-table td { padding: 1.25rem 0.75rem; text-align: right; font-size: 0.875rem; color: var(--aps-sumi); }
.apm-table td.tnum { font-variant-numeric: tabular-nums; }
.apm-table__dur { white-space: nowrap; font-size: 0.8125rem; color: var(--aps-stone); }
.apm-table__dur .idle { display: block; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--aps-gold); }
.apm-table__dur .fills { display: block; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--aps-sage); }

/* ---------- 所要時間についての説明ボックス ---------- */
.apm-explain { margin-top: 6rem; border: 1px solid color-mix(in srgb, var(--aps-gold) 40%, transparent); background: var(--aps-shell-2); padding: 2rem; }
@media (min-width: 768px) { .apm-explain { margin-top: 8rem; padding: 3rem; } }
.apm-explain__title { font-family: var(--aps-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 1rem 0 0; }
.apm-explain__body { margin: 1.25rem 0 0; max-width: 48rem; font-size: 0.875rem; line-height: 2; color: var(--aps-stone); }
.apm-explain__example { margin-top: 2rem; max-width: 42rem; border-top: 1px solid var(--aps-line); padding-top: 1.5rem; }
.apm-explain__example .label { margin: 0; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--aps-sumi); }
.apm-explain__example dl { margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.8125rem; }
.apm-explain__example dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.apm-explain__example dt { color: var(--aps-stone); }
.apm-explain__example dt.strong { color: var(--aps-sumi); }
.apm-explain__example dd { margin: 0; font-variant-numeric: tabular-nums; }
.apm-explain__example dd.strike { color: var(--aps-stone); text-decoration: line-through; }
.apm-explain__example dd.gold { color: var(--aps-gold); }
.apm-explain__example .note { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--aps-stone); }
.apm-explain .apm-btn { margin-top: 2.25rem; }

/* ---------- 指名料 / 割引 ---------- */
.apm-section { margin-top: 6rem; scroll-margin-top: 9rem; }
@media (min-width: 768px) { .apm-section { margin-top: 8rem; } }
.apm-section__lead { margin: 1.25rem 0 0; max-width: 42rem; font-size: 0.875rem; line-height: 2; color: var(--aps-stone); }

.apm-rank-grid { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .apm-rank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .apm-rank-grid { grid-template-columns: repeat(4, 1fr); } }
.apm-rank-card { border: 1px solid var(--aps-line); padding: 1.5rem; }
.apm-rank-card__fee { margin: 1rem 0 0; font-size: 1.5rem; color: var(--aps-sumi); line-height: 1.3333; }
.apm-rank-card__members { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--aps-stone); }

.apm-discount-grid { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .apm-discount-grid { grid-template-columns: repeat(2, 1fr); } }
.apm-discount-card { border: 1px solid var(--aps-line); background: var(--aps-shell-2); padding: 2rem; }
.apm-discount-card__title { font-family: var(--aps-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0.75rem 0 0; }
.apm-discount-card__rate { margin: 1.25rem 0 0; font-variant-numeric: tabular-nums; font-size: 1.875rem; line-height: 1.2; color: var(--aps-sumi); }
.apm-discount-card__rate span { font-size: 1rem; }
.apm-discount-card__body { margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 2; color: var(--aps-stone); }

.apm-tax-note { margin: 2rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--aps-stone); }

/* ---------- ボタン ---------- */
.apm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
	min-height: 3.25rem; padding-inline: 2rem;
	font-family: inherit; font-size: 0.8125rem; letter-spacing: 0.16em;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: all 400ms var(--aps-quint);
}
.apm-btn--solid { background: var(--aps-sumi); color: var(--aps-shell); }
.apm-btn--solid:hover { background: var(--aps-gold-deep); }
.apm-btn--gold { background: var(--aps-gold); color: #fff; }
.apm-btn--gold:hover { background: var(--aps-gold-deep); }
.apm-btn--outline-light { border-color: var(--aps-sumi); color: var(--aps-sumi); }
.apm-btn--outline-light:hover { background: var(--aps-sumi); color: var(--aps-shell); }

/*
 * 最下部のCTA帯。元実装は bg-ink + tone-soft の組み合わせで、
 * 実際には「淡いピンクの地に濃い文字」に反転して出る（黒帯ではない）。
 */
.apm-cta { background: var(--color-ink, #fbe7e5); }
.apm-cta__inner { padding-block: 5rem; text-align: center; }
@media (min-width: 768px) { .apm-cta__inner { padding-block: 6rem; } }
.apm-cta__title { font-family: var(--aps-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0; color: var(--color-shell, #2b2426); }
.apm-cta__buttons { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }