/* ==========================================================================
   page-menu.css — MENU（PC 269:188／SP 269:376）
   レイアウトは spec-responsive.md「MENU」。メニュー表は components.css の .c-menu-list
   ========================================================================== */

.p-menu-sec {
	padding-block: 80px;
	background: var(--color-bg-base);
}

.p-menu-sec--mid {
	background: var(--color-bg-mid); /* REPEATER・OPTION（FB No.15） */
}

/* 行間：リード文・本文＝1.9／説明文・注記＝1.8／メニュー名・小見出し＝1.6（FB No.12） */
.p-menu-sec__lead {
	max-width: 900px;
	margin: 28px auto 0;
	line-height: 1.9;
	text-wrap: pretty;
}

/* NEW CUSTOMER・REPEATER の一番下（注記の下）の写真（10/12 FB No.82・夜 No.86 で位置を移動。
   Figma の枠は PC 1120×560・SP 342×171 の 2:1。注記との間は SP 28px／PC 56px） */
.p-menu-sec__photo {
	aspect-ratio: 2 / 1;
	margin-top: 28px;
	overflow: hidden;
}

.p-menu-sec__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-menu-sec .c-menu-list {
	margin-top: 28px;
}

.p-menu-sec__notes {
	margin-top: 28px;
	color: var(--color-muted);
	font-size: var(--fs-note);
	line-height: 1.8;
	letter-spacing: 0;
	text-align: left; /* 注記は左寄せ（FB No.18） */
}

@media (min-width: 768px) {
	.p-menu-sec {
		padding-block: var(--space-section);
	}

	/* SP は見出し・リードとも左寄せ（Figma SP x24）。TAB 以上は中央 */
	.p-menu-sec__lead {
		margin-top: var(--space-block);
		text-align: center;
	}

	.p-menu-sec__photo {
		margin-top: var(--space-block);
	}

	.p-menu-sec .c-menu-list {
		margin-top: var(--space-block);
	}

	.p-menu-sec__notes {
		margin-top: var(--space-block);
	}
}

/* ---- オープン記念価格のバナー（10/12 No.54。Figma PC 851:1200／SP 851:1211。期間・割引額は設定から）
   10/13 FB No.102：押せない要素なので、ブラウンのベタ塗り×白文字をやめ、薄い地（accent-tint）＋左にブラウンの線（4px・Figma の値）＋ブラウンの太字。
   SP は全幅・中央揃えの2行（全角スペースの位置で改行） ---- */
.p-menu-banner {
	margin: 28px 0 0;
	padding: 10px 16px;
	border-left: 4px solid var(--color-brand);
	border-radius: var(--radius-badge);
	background: var(--color-accent-tint);
	color: var(--color-brand);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: center;
}

/* ---- 選べるパーツケア（Figma 734:1192／739:1193）：見出し → 説明 → パーツの数ごとのカード ---- */
.p-menu-parts {
	margin-top: 28px;
}

.p-menu-parts__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.p-menu-parts__name {
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
}

.p-menu-parts__text {
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: 0;
}

.p-menu-parts__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 14px;
}

.p-menu-parts__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	padding: 20px;
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: 0 2px 5px rgb(26 23 20 / 0.06);
	line-height: normal;
}

.p-menu-parts__count,
.p-menu-parts__time {
	font-size: 13px;
	letter-spacing: 0;
}

.p-menu-parts__regular {
	color: var(--color-muted);
	font-family: var(--ff-en);
	font-size: var(--fs-note);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.p-menu-parts__price {
	font-family: var(--ff-en);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.p-menu-banner {
		width: fit-content;
		max-width: 100%;
		margin: var(--space-block) auto 0;
		font-size: var(--fs-label);
	}

	.p-menu-parts {
		margin-top: var(--space-block);
	}

	.p-menu-parts__head {
		gap: 16px;
	}

	.p-menu-parts__text {
		font-size: var(--fs-label);
	}

	.p-menu-parts__list {
		margin-top: 16px;
	}

	.p-menu-parts__card {
		gap: 8px;
		padding: 24px;
	}

	.p-menu-parts__price {
		font-size: 22px;
	}
}

@media (min-width: 1100px) {
	.p-menu-parts__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---- VIP（Figma 743:1142／743:1202） ---- */
.p-menu-vip {
	background: var(--color-brand); /* FB No.15。見出しは .c-sec-heading--on-dark */
}

.p-menu-vip .p-menu-sec__lead {
	color: var(--color-white);
}

.p-menu-vip__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 28px;
}

.p-menu-vip__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
	padding: 28px 24px;
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: 0 2px 5px rgb(26 23 20 / 0.06);
}

/* 「VIPルーム」／内容（80%）の2行。王冠は1行目の中央にそろえる（FB No.31・34。SP 20px／PC 25px） */
.p-menu-vip__name {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 7px;
	font-family: var(--ff-sans);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.p-menu-vip__crown {
	grid-row: 1;
	width: 20px;
	height: 20px;
	margin-top: calc((1.5em - 20px) / 2);
}

.p-menu-vip__name-main,
.p-menu-vip__name-sub {
	grid-column: 2;
}

.p-menu-vip__name-sub {
	font-size: 0.8em;
}

.p-menu-vip__regular {
	color: var(--color-muted);
	font-size: var(--fs-note);
	line-height: 1.9;
}

.p-menu-vip__regular + .p-menu-vip__price {
	margin-top: -12px;
}

.p-menu-vip__price {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--ff-en);
	font-size: 24px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.02em;
}

.p-menu-vip__time {
	padding-top: 2px;
	font-family: var(--ff-sans);
	font-size: var(--fs-label);
	font-weight: 400;
	letter-spacing: 0;
}

.p-menu-vip__text {
	font-size: var(--fs-label);
	line-height: 1.8;
	letter-spacing: 0;
}

.p-menu-vip__steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-menu-vip__group dt {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
}

.p-menu-vip__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* 施術のバッジは字間なし（Figma 743:1157〜：「ホットタオル」6文字＝72px。10/13 の4つが PC で1行に収まる） */
.p-menu-vip__chips .c-badge {
	padding: 5px 12px;
	line-height: normal;
	letter-spacing: 0;
	white-space: normal;
}

.p-menu-vip__note {
	margin-top: 28px;
	color: var(--color-white);
	font-size: var(--fs-note);
	line-height: 1.9;
}

@media (min-width: 768px) {
	.p-menu-vip__list {
		margin-top: var(--space-block);
	}

	.p-menu-vip__card {
		gap: 20px;
		padding: 40px;
	}

	.p-menu-vip__name {
		column-gap: 9px;
		font-size: 22px;
	}

	.p-menu-vip__crown {
		width: 25px;
		height: 25px;
		margin-top: calc((1.5em - 25px) / 2);
	}

	.p-menu-vip__regular + .p-menu-vip__price {
		margin-top: -16px;
	}

	.p-menu-vip__price {
		gap: 10px;
		font-size: 27px;
	}

	.p-menu-vip__note {
		margin-top: var(--space-block);
		text-align: center;
	}
}

@media (min-width: 1100px) {
	.p-menu-vip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

/* ---- オプション（Figma PC 744:1146／SP 799:1212） ----
   表は SP でも PC と同じ大きさ（幅792）のまま、横にスライドして見せる（FB No.19）。列は「オプション／単品／メニューに追加」 */
.p-menu-option-wrap {
	margin-top: 28px;
}

.p-menu-option-wrap .c-hscroll-indicator {
	gap: 28px;
	margin-top: 28px;
}

.p-menu-option-scroll {
	position: relative; /* 中の読み上げ用の文字（position: absolute）もこの中に閉じ込め、ページを横に広げない */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.p-menu-option {
	width: 100%;
	min-width: 792px;
	border-collapse: collapse;
}

.p-menu-option th,
.p-menu-option td {
	padding: 24px 16px 24px 0;
	border-bottom: 1px solid var(--color-line-weak);
	text-align: left; /* 金額も左揃え（9/30 荒川さん FB） */
	vertical-align: top;
}

.p-menu-option :is(th, td):not(:first-child) {
	width: 23.5%; /* 170＋間隔16（Figma） */
}

.p-menu-option thead th {
	padding-block: 0 12px;
	border-bottom-color: var(--color-line-strong);
	color: var(--color-muted);
	font-size: 13px; /* SP も 13px（FB No.19） */
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0;
	white-space: nowrap;
}

.p-menu-option tbody th {
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.6;
}

.p-menu-option td {
	font-family: var(--ff-en);
	font-size: 20px; /* Jost Medium 20px（FB No.14） */
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.02em;
}

.p-menu-option td span[aria-hidden] {
	color: var(--color-muted);
}

/* 道具・薬剤の写真（Figma 745:1142／799:1241） */
.p-menu-option-photos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 28px;
}

.p-menu-option-photos li {
	aspect-ratio: 3 / 2; /* 10/12 FB No.68（PC 546×364・SP 342×228） */
	overflow: hidden;
}

.p-menu-option-photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* OPTION のリード文：SP は行間 1.8（FB No.19）、768px からは他と同じ 1.9 */
.p-menu-sec__lead--option {
	line-height: 1.8;
}

@media (min-width: 768px) {
	.p-menu-sec__lead--option {
		line-height: 1.9;
	}

	.p-menu-option-wrap {
		margin-top: var(--space-block);
	}

	.p-menu-option {
		max-width: 792px;
		margin-inline: auto;
	}

	.p-menu-option-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
		margin-top: var(--space-block);
	}

}

/* ---- ご利用にあたって（Figma 05 269:343） ---- */
.p-menu-visit {
	background: var(--color-bg-divider);
}

.p-menu-visit__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 32px;
}

.p-menu-visit__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 24px;
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.p-menu-visit__title {
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

/* 段落が複数ある項目（キャンセルポリシー。Figma 280:12：段落間 10px） */
.p-menu-visit__body p + p {
	margin-top: 10px;
}

.p-menu-visit__item .c-tbd {
	margin-inline: 2px;
}

@media (min-width: 768px) {
	.p-menu-visit__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: var(--space-block);
	}

	.p-menu-visit__item {
		padding: 32px;
	}
}