/* ============================================================
   コスメサロン美 カスタムLP（ブロック版）共通スタイル
   固定ページ「HOME」「メニュー表」の中身は WordPress 標準ブロックで
   組んであり、装飾はすべてこのファイルが担当する。
   ページ本文にはCSS・style属性を書かない。

   設計方針（編集で壊れないこと優先）
     - 子孫セレクタ中心。`>` の連鎖と :nth-child への依存を避ける
       （例外は表の列指定のみ。列は増減しても崩れずデフォルト表示になる）
     - セクションは core/group 1枚（.csb-sec）。1つ壊れても他に波及しない
     - ブロックを増やす・減らす・並べ替えても成立する指定にする
   ============================================================ */

.csb-lp {
	--csb-bg: #fdfdfd;
	--csb-ink: #3a4654;
	--csb-ink-strong: #2c3a4c;
	--csb-ink-muted: #7c8797;
	--csb-navy: #33506e;
	--csb-navy-soft: #5b7492;
	--csb-silver: #cfdce6;
	--csb-hair: rgba(51, 80, 110, 0.14);
	--csb-line: #00804a;
	--csb-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
	--csb-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;

	/* ── 余白の基準（ここだけ直せばページ全体の余白が変わる） ──
	   --csb-sec-gap  … 隣り合うセクションの「間にできる余白の合計」。
	                    各セクションはこの半分ずつを上下に持つので、
	                    隣接しても余白が二重にならない。
	   --csb-gap-lg   … 小見出し（h3）の前
	   --csb-gap-md   … 画像・リスト・ボタン・囲みボックスの前
	   --csb-gap-sm   … 段落の前
	   いずれも clamp() で スマホ→PC を連続的に変えている（画面幅で分岐しない）。 */
	--csb-sec-gap: clamp(72px, 9vw, 120px);
	--csb-sec-pad-x: clamp(20px, 4vw, 32px);
	--csb-gap-lg: clamp(40px, 5vw, 64px);
	--csb-gap-md: clamp(26px, 3.2vw, 42px);
	--csb-gap-sm: clamp(16px, 1.8vw, 22px);

	font-family: var(--csb-sans);
	font-size: 15px;
	line-height: 2;
	color: var(--csb-ink);
	background: var(--csb-bg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
.csb-lp img { max-width: 100%; height: auto; }
.csb-lp a { color: inherit; }
/* 背景画像として敷く画像だけは「枠いっぱい」にするため上の指定から除外する */
.csb-lp .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ───────── ヒーロー（SWELL「フルワイド」ブロック） ─────────
   背景画像はフルワイドブロックが CSS background として敷く。
   店主は編集画面のブロック設定から画像の差し替え・オーバーレイの
   色/不透明度を変更できる（本文にHTML・CSSは書かない）。
   文字色は白。オーバーレイ rgba(27,42,58,.65) により、画像が
   まっ白な部分でも白文字とのコントラスト比 4.72:1（WCAG AA 4.5:1 以上）を確保。 */
.csb-lp .swell-block-fullWide {
	margin-top: 0;
	margin-bottom: 0;
}
/* SWELL既定の「フルワイド直下の子要素に margin-bottom:2em」を打ち消す
   （ヒーロー直後に余白が二重に出るため） */
.csb-lp .swell-block-fullWide__inner > * { margin-bottom: 0; }
/* ヒーローの見た目（文字色・高さ）は、通常セクションの指定に必ず勝つよう
   ファイル末尾の「ヒーローの中身」でまとめて指定している。 */

/* ───────── セクション（core/group 1枚 = 1セクション） ─────────
   上下に「セクション間余白の半分」ずつを持たせる。こうすると
   セクションが隣り合っても合計はつねに --csb-sec-gap になり、
   余白が加算されて画面の1/3が空く…という現象が起きない。
   margin の相殺（collapse）には一切依存していない。 */
.csb-lp .csb-sec {
	padding-top: calc(var(--csb-sec-gap) / 2);
	padding-bottom: calc(var(--csb-sec-gap) / 2);
	padding-left: var(--csb-sec-pad-x);
	padding-right: var(--csb-sec-pad-x);
	position: relative;
}
.csb-lp .csb-sec--tone-a { background: linear-gradient(180deg, #fdfdfd 0%, #f3f7fa 55%, #fdfdfd 100%); }
.csb-lp .csb-sec--tone-b { background: linear-gradient(180deg, #f7fafc 0%, #fdfdfd 100%); }
.csb-lp .csb-sec--tone-c { background: linear-gradient(180deg, #fdfdfd 0%, #eef4f8 60%, #f7fafc 100%); }
.csb-lp .csb-sec--final {
	background:
		radial-gradient(50% 60% at 15% 20%, rgba(206, 222, 234, 0.5), transparent 65%),
		radial-gradient(45% 55% at 88% 75%, rgba(190, 211, 228, 0.45), transparent 65%),
		#fdfdfd;
}

/* セクション内の共通コンテンツ幅。ブロックの種類が増えても効くよう
   要素の並び順ではなくブロック側のクラス名で指定する。 */
.csb-lp .csb-sec .wp-block-heading,
.csb-lp .csb-sec p,
.csb-lp .csb-sec .wp-block-list,
.csb-lp .csb-sec .wp-block-buttons,
.csb-lp .csb-sec .wp-block-image,
.csb-lp .csb-sec .wp-block-table,
.csb-lp .csb-sec .wp-block-group,
.csb-lp .csb-sec .csb-map,
.csb-lp .csb-sec .p-postListWrap {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
.csb-lp .csb-sec--menu .wp-block-table,
.csb-lp .csb-sec--access .wp-block-table,
.csb-lp .csb-sec .p-postListWrap { max-width: 1040px; }

/* ───────── 見出し ───────── */
.csb-lp .csb-sec h1,
.csb-lp .csb-sec h2,
.csb-lp .csb-sec h3,
.csb-lp .csb-sec h4 {
	font-family: var(--csb-serif);
	font-weight: 400;
	color: var(--csb-ink-strong);
	text-align: center;
	letter-spacing: 0.12em;
	line-height: 1.9;
}
.csb-lp .csb-sec h1 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	letter-spacing: 0.14em;
	margin-top: var(--csb-gap-sm);
	margin-bottom: 0;
}
.csb-lp .csb-sec h2 {
	font-size: clamp(1.35rem, 2.5vw, 1.95rem);
	margin-top: 0;
	margin-bottom: 0;
}
.csb-lp .csb-sec h3 {
	font-size: 1.12rem;
	font-weight: 500;
	margin-top: var(--csb-gap-lg);
	margin-bottom: 0;
}
.csb-lp .csb-sec h3::after {
	content: "";
	display: block;
	width: 30px;
	height: 1px;
	margin: 14px auto 0;
	background: var(--csb-silver);
}
.csb-lp .csb-sec h4 {
	font-size: 1rem;
	font-weight: 500;
	margin-top: var(--csb-gap-md);
	margin-bottom: 0;
}

/* ───────── 本文 ───────── */
.csb-lp .csb-sec p {
	margin-top: var(--csb-gap-sm);
	margin-bottom: 0;
	max-width: 34em;
	text-align: center;
	font-size: 0.93rem;
	letter-spacing: 0.04em;
}
.csb-lp .csb-sec .csb-lede {
	margin-top: var(--csb-gap-sm);
	color: var(--csb-ink-muted);
}
.csb-lp .csb-sec .csb-note {
	margin-top: var(--csb-gap-sm);
	font-size: 0.84rem;
	color: var(--csb-ink-muted);
}
.csb-lp .csb-sec .csb-quote {
	margin-top: var(--csb-gap-md);
	font-family: var(--csb-serif);
	font-size: 1rem;
	line-height: 2.4;
	letter-spacing: 0.06em;
	color: var(--csb-ink-strong);
}
.csb-lp .csb-sec .csb-eyebrow {
	margin: 0 auto;
	font-family: var(--csb-serif);
	font-size: 0.76rem;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	color: var(--csb-navy);
}
.csb-lp .csb-sec .csb-hero-lede {
	margin-top: var(--csb-gap-sm);
	color: var(--csb-ink-muted);
	font-size: 0.94rem;
}
.csb-lp .csb-sec .csb-price-lead {
	margin-top: var(--csb-gap-sm);
	font-family: var(--csb-serif);
	font-size: 1rem;
	letter-spacing: 0.12em;
	color: var(--csb-navy);
}
.csb-lp .csb-sec .csb-price-lead strong {
	font-size: 1.9rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	margin: 0 0.12em;
}
.csb-lp .csb-sec .csb-tax-note {
	margin-top: var(--csb-gap-sm);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--csb-navy-soft);
}

/* ───────── 画像 ───────── */
.csb-lp .csb-sec .wp-block-image { margin-top: var(--csb-gap-md); margin-bottom: 0; }
.csb-lp .csb-sec .wp-block-image img { display: block; width: 100%; }
.csb-lp .csb-sec .csb-img-wide img { aspect-ratio: 16 / 7; object-fit: cover; }
.csb-lp .csb-sec .csb-img-band img { aspect-ratio: 19 / 6; object-fit: cover; }
@media (max-width: 860px) {
	.csb-lp .csb-sec .csb-img-wide img { aspect-ratio: 4 / 3; }
	.csb-lp .csb-sec .csb-img-band img { aspect-ratio: 2 / 1; }
}

/* ───────── ボタン（core/buttons） ───────── */
.csb-lp .csb-sec .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: var(--csb-gap-md);
	margin-bottom: 0;
}
.csb-lp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 32px;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.csb-lp .csb-btn--line .wp-block-button__link {
	background: var(--csb-line);
	color: #ffffff;
	box-shadow: 0 8px 22px rgba(0, 128, 74, 0.18);
}
.csb-lp .csb-btn--line .wp-block-button__link:hover { background: #069158; }
.csb-lp .csb-btn--tel .wp-block-button__link {
	background: rgba(255, 255, 255, 0.7);
	color: var(--csb-navy);
	border: 1px solid var(--csb-navy);
}
.csb-lp .csb-btn--tel .wp-block-button__link:hover { background: var(--csb-navy); color: #ffffff; }

/* ───────── リスト（core/list） ───────── */
.csb-lp .csb-sec .wp-block-list {
	margin-top: var(--csb-gap-md);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.csb-lp .csb-sec .wp-block-list li {
	padding: 20px 8px;
	border-bottom: 1px solid var(--csb-hair);
	font-size: 0.93rem;
	letter-spacing: 0.04em;
	list-style: none;
}
.csb-lp .csb-sec .wp-block-list li strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--csb-serif);
	font-size: 1.04rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--csb-ink-strong);
}
/* 番号つきリスト（施術の流れ）は番号を見せる */
.csb-lp .csb-sec ol.wp-block-list { counter-reset: csb-step; }
.csb-lp .csb-sec ol.wp-block-list li { counter-increment: csb-step; }
.csb-lp .csb-sec ol.wp-block-list li strong::before {
	content: counter(csb-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	border: 1px solid var(--csb-silver);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	font-family: var(--csb-serif);
	font-size: 0.86rem;
	color: var(--csb-navy);
	vertical-align: middle;
}
.csb-lp .csb-sec ol.wp-block-list li strong { display: inline-flex; align-items: center; }

/* ───────── 料金表（core/table + className="csb-menu-table"） ───────── */
.csb-lp .csb-sec .csb-menu-table { margin-top: var(--csb-gap-md); margin-bottom: 0; }
.csb-lp .csb-menu-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.csb-lp .csb-menu-table th,
.csb-lp .csb-menu-table td { border: 0; }
.csb-lp .csb-menu-table thead th {
	padding: 0 10px 12px;
	border-bottom: 1px solid var(--csb-navy-soft);
	font-family: var(--csb-serif);
	font-weight: 500;
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	color: var(--csb-navy-soft);
	text-align: left;
	background: none;
}
.csb-lp .csb-menu-table tbody td {
	padding: 28px 10px;
	border-bottom: 1px solid var(--csb-hair);
	vertical-align: top;
	text-align: left;
	font-size: 0.86rem;
	line-height: 2;
	color: var(--csb-ink-muted);
}
.csb-lp .csb-menu-table tbody td strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--csb-serif);
	font-weight: 500;
	font-size: 1.08rem;
	letter-spacing: 0.1em;
	line-height: 1.7;
	color: var(--csb-ink-strong);
}
/* 2列目=料金 / 3列目=回数券・条件（列を足しても崩れず既定表示になる） */
.csb-lp .csb-menu-table thead th:nth-child(2),
.csb-lp .csb-menu-table thead th:nth-child(3) { text-align: right; }
.csb-lp .csb-menu-table tbody td:nth-child(2) {
	width: 20%;
	text-align: right;
	white-space: nowrap;
	font-family: var(--csb-serif);
	font-size: 1.4rem;
	color: var(--csb-navy);
}
.csb-lp .csb-menu-table tbody td:nth-child(3) {
	width: 25%;
	text-align: right;
	color: var(--csb-ink);
}
.csb-lp .csb-menu-table tbody td:nth-child(3) strong {
	display: inline-block;
	margin-bottom: 6px;
	padding: 4px 14px;
	border: 1px solid rgba(91, 116, 146, 0.32);
	border-radius: 999px;
	background: rgba(91, 116, 146, 0.13);
	font-family: var(--csb-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--csb-navy);
}

/* ───────── 店舗情報テーブル ───────── */
.csb-lp .csb-sec .csb-info-table { margin-top: var(--csb-gap-md); margin-bottom: 0; max-width: 720px; }
.csb-lp .csb-info-table table { width: 100%; border-collapse: collapse; }
.csb-lp .csb-info-table td {
	padding: 18px 12px;
	border: 0;
	border-bottom: 1px solid var(--csb-hair);
	font-size: 0.93rem;
	letter-spacing: 0.04em;
	vertical-align: top;
}
.csb-lp .csb-info-table td:first-child {
	width: 30%;
	font-family: var(--csb-serif);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	color: var(--csb-navy-soft);
	text-align: right;
}

/* ───────── 囲みボックス（core/group + className="csb-box"） ─────────
   注意: 中の見出し・段落は「セクション用の余白」ではなくボックス用の余白を使う。
   セレクタは .csb-sec を含めて詳細度を上げてある（.csb-lp .csb-box h3 だと
   .csb-lp .csb-sec h3 と同じ詳細度になり、記述順しだいで負けて
   枠の上半分が空く、という不具合が起きるため）。 */
.csb-lp .csb-sec .csb-box {
	margin-top: var(--csb-gap-md);
	margin-bottom: 0;
	padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
	border: 1px solid var(--csb-hair);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.75);
	max-width: 40em;
}
.csb-lp .csb-sec .csb-box h3 {
	margin-top: 0;
	font-size: 1.04rem;
}
.csb-lp .csb-sec .csb-box p { margin-top: var(--csb-gap-sm); }
.csb-lp .csb-sec .csb-box > :first-child { margin-top: 0; }

/* ───────── コラムカード（SWELL投稿リスト）の微調整 ───────── */
.csb-lp .csb-sec .p-postListWrap { margin-top: 48px; }
.csb-lp .p-postList__title { font-family: var(--csb-serif); line-height: 1.8; }
.csb-lp .p-postList__times { display: none; }

/* ───────── スマホ ───────── */
@media (max-width: 860px) {
	/* 見出し・画像の上余白は clamp() で画面幅に連動させているので、
	   ここで幅ごとに上書きしない（上書きすると .csb-box 内の見出しにも
	   効いてしまい、枠の上半分が空く不具合の原因になる）。 */

	/* 料金表は1メニュー1カードに組み替える */
	.csb-lp .csb-menu-table table,
	.csb-lp .csb-menu-table tbody,
	.csb-lp .csb-menu-table tr,
	.csb-lp .csb-menu-table td { display: block; width: 100%; }
	.csb-lp .csb-menu-table thead { display: none; }
	.csb-lp .csb-menu-table tbody tr {
		padding: 26px 0 28px;
		border-bottom: 1px solid var(--csb-hair);
	}
	.csb-lp .csb-menu-table tbody td {
		padding: 0;
		border-bottom: 0;
		text-align: center;
	}
	.csb-lp .csb-menu-table tbody td strong { text-align: center; }
	.csb-lp .csb-menu-table tbody td:nth-child(2) {
		width: 100%;
		margin-top: 12px;
		text-align: center;
		font-size: 1.5rem;
	}
	.csb-lp .csb-menu-table tbody td:nth-child(3) {
		width: 100%;
		margin-top: 8px;
		text-align: center;
	}
	/* 「他のメニューと組み合わせて…」等の注記バッジ。
	   スマホではセルが全幅になるため、バッジのうしろに続く文章が
	   同じ行に並んで画面外にはみ出す。バッジを独立した行にする。 */
	.csb-lp .csb-menu-table tbody td:nth-child(3) strong {
		display: block;
		width: fit-content;
		max-width: 100%;
		margin: 0 auto 8px;
	}

	/* 店舗情報テーブルも縦積みに */
	.csb-lp .csb-info-table table,
	.csb-lp .csb-info-table tbody,
	.csb-lp .csb-info-table tr,
	.csb-lp .csb-info-table td { display: block; width: 100%; }
	.csb-lp .csb-info-table tbody tr { padding: 14px 0; border-bottom: 1px solid var(--csb-hair); }
	.csb-lp .csb-info-table td { padding: 0; border-bottom: 0; text-align: center; }
	.csb-lp .csb-info-table td:first-child { width: 100%; text-align: center; margin-bottom: 2px; }
}

/* ───────── ヒーローの中身 ─────────
   ヒーローは背面が暗いオーバーレイなので、文字は白に反転させる。
   セレクタは .csb-sec.csb-sec--hero（クラス2枚重ね）で、
   前述の「通常セクションの文字色」より必ず詳細度が高くなるようにしてある。 */
.csb-lp .csb-sec.csb-sec--hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(76vh, 600px);
}
@media (min-width: 768px) {
	.csb-lp .csb-sec.csb-sec--hero { min-height: min(78vh, 700px); }
}
.csb-lp .csb-sec.csb-sec--hero h1,
.csb-lp .csb-sec.csb-sec--hero h2,
.csb-lp .csb-sec.csb-sec--hero h3,
.csb-lp .csb-sec.csb-sec--hero p,
.csb-lp .csb-sec.csb-sec--hero .csb-eyebrow,
.csb-lp .csb-sec.csb-sec--hero .csb-hero-lede,
.csb-lp .csb-sec.csb-sec--hero .csb-note,
.csb-lp .csb-sec.csb-sec--hero .csb-price-lead,
.csb-lp .csb-sec.csb-sec--hero .csb-price-lead strong {
	color: #ffffff;
}
.csb-lp .csb-sec.csb-sec--hero h3::after { background: rgba(255, 255, 255, 0.65); }
/* 電話ボタンは背面が暗いので白ベタにする（半透明のままだと文字が沈む） */
.csb-lp .csb-sec.csb-sec--hero .csb-btn--tel .wp-block-button__link {
	background: #ffffff;
	border-color: #ffffff;
	color: #23394f;
}
.csb-lp .csb-sec.csb-sec--hero .csb-btn--tel .wp-block-button__link:hover {
	background: #dde7ef;
	color: #23394f;
}