）
================================================================== */
.post_content .luce-steps { margin: 0 0 24px; padding-left: 1.6em; }
.post_content .luce-steps li { margin-bottom: 14px; }
.post_content .luce-steps li:last-child { margin-bottom: 0; }
/* ==================================================================
16. ご予約の3分岐
================================================================== */
.post_content .luce-reserve3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0 0 24px;
}
.post_content .luce-reserve3__col {
background: var(--luce-paper);
border: 1px solid var(--luce-line);
padding: 48px; /* A社カード 実測 */
}
.post_content .luce-reserve3__col > :last-child { margin-bottom: 0; }
/* ★3つ並びの中のボタンは、幅の下限を外す（2026-09-09 実測・修正）
.luce-btn の min-width:352px（A社の実寸）は、1本で置く場所のための値。
3列の中に入れると 1列の最小幅が 352＋左右の内側余白96 ＝448px になり、
3列で 448×3＋隙間48 ＝1,392px。入れ物（1,200px）に収まらず**画面からはみ出す**。
実測（1,139pxの実機・トップ）＝ 3列目の右端が 1,668px＝横スクロールが出ていた。
★grid の 1fr は既定で「中身より小さくならない」ため、minmax(0,1fr) と併せて直す。
★狭い画面（768px以下）では §19 が同じ指定をしている。ここはその横幅版。 */
.post_content .luce-reserve3__col .luce-btn,
.post_content .luce-plan .luce-btn,
.post_content .luce-two__col .luce-btn { min-width: 0; width: 100%; }
/* ==================================================================
17. ボタン（[luce_btn] が出す）— SPEC §5-2。A社ボタンの実測そのまま
理由: テーマのボタンは決まった場所にしか置けない。本文中に置けない。
================================================================== */
.post_content .luce-btn {
display: inline-flex;
align-items: center;
justify-content: center;
/* ★box-sizing（2026-09-09 実測・修正）: 既定の content-box のままだと
狭い画面の `width:100%`（§19）に左右の余白 24px×2 が外側へ足され、
画面を 幅375px に対し 右端381px で **はみ出していた**（トップのみ・実測）。
min-width の 352px は「A社のボタンの実寸（枠まで含む幅）」なので、
枠を含めて数える border-box の方が、元の実測とも合う。 */
box-sizing: border-box;
min-width: 352px; /* A社 実寸 */
height: 66px; /* A社 実寸 */
padding: 0 24px; /* A社の段落下余白 24px を左右の逃げに流用 */
border-radius: 48px; /* A社 実測 */
background: var(--luce-dark);
color: #ffffff; /* A社 実測 */
font-family: var(--luce-sans);
font-size: 16px; /* A社 実測 */
line-height: 28.8px;
text-decoration: none;
border: 1px solid var(--luce-dark);
}
.post_content .luce-btn--primary {
background: var(--luce-dark);
color: #ffffff;
}
.post_content .luce-btn--primary:hover {
background: var(--luce-paper);
color: var(--luce-dark);
}
.post_content .luce-btn--pending {
background: var(--luce-paper);
color: var(--luce-ink);
border: 1px dashed var(--luce-accent);
cursor: not-allowed;
}
/* ==================================================================
18. まだ決まっていない値
理由: 公開前に消えるべきもの。目で探さずに済むよう画面上で目立たせる。
★色は増やさない。A社の下地とアクセントだけで作る。
================================================================== */
/* ★.luce-todo も /
/ に付くため
p:not([class]) の対象外。行送りを本文へ揃える（design-plus.css:20 の 40px を避ける）。 */
.post_content .luce-todo {
background: var(--luce-base);
outline: 1px dashed var(--luce-accent);
line-height: 28.8px; /* A社 本文の実測 */
color: var(--luce-accent);
}
/* ==================================================================
19. 狭い画面（768px以下）— SPEC §5-4
A社は PC 11,518px / SP 11,855px＝比1.03。PCとSPで構成を変えていない。
よって1カラムに落とすだけで、数値は下げない。例外は下の3つ（SPEC §5-4 の明示）。
================================================================== */
@media (max-width: 768px) {
/* 左右の逃げ＝24px（A社の本文段落の下余白 24px を流用）。
★カードの内側（SP時 32px）より外側にあることを確かめている:
画面390pxのとき、素の段落は左から24px、カード内の文字は 24+32＝56px。
節の余白がカードの padding より内側へ入り込むことはない。 */
#about_page .about_content { padding: 50px 24px; }
/* 和文だけの見出し（span を持たない5本）
＝B社の和文中見出しの実測
ref_measured.json → Angelux.heads[1] size:28px / ls:1.4px / lh:44.8px */
#about_page .about_content .headline {
font-size: 28px; /* B社 実測 */
letter-spacing: 1.4px; /* B社 実測 */
line-height: 44.8px; /* B社 実測 */
}
/* 欧文の大見出し（span がある9本）。SPEC §5-4＝70px の約0.57倍＝40px。
★A社SPの実測は取れていないため、SPEC の指示どおり 70×0.57＝40px を使っている。
行送りは B社の中見出し 44.8px を流用（56pxのままだと40pxの文字に対して開きすぎる）。
★:has(span) は「型セレクタ1つ分」だけ詳細度が上がるため、上の .headline では
上書きできない。ここで必ず書き直す（字間も含めて明示する）。 */
#about_page .about_content .headline:has(span) {
font-size: 40px;
letter-spacing: 7px; /* A社 実測。SP でも欧文の字間は変えない */
line-height: 44.8px; /* B社 実測 */
}
.post_content .luce-plans,
.post_content .luce-steps3,
.post_content .luce-two,
.post_content .luce-reserve3,
.post_content .luce-split { grid-template-columns: 1fr; }
/* SPEC §5-4: カードの padding 48px → 32px */
.post_content .luce-card,
.post_content .luce-plan,
.post_content .luce-two__col,
.post_content .luce-reserve3__col,
.post_content .luce-promise-box,
.post_content .luce-notice { padding: 32px; }
/* SPEC §5-4: 画面幅390pxに収まらないため min-width をやめる */
.post_content .luce-btn { min-width: 0; width: 100%; }
}
/* ==================================================================
20. パソコン表示だけの追従CTA（2026-09-09）
理由: HEALのフッターバーは携帯表示のときだけ出る（親 footer.php:94 の is_mobile 判定）。
ヘッダーにボタンを置く設定も無い（テーマオプション878項目を走査済み）。
★携帯（768px以下）では出さない＝テーマのフッターバーと二重にならないようにする。
数値は設計 §3・§7 の色と、A社ボタンの実測（高さ66px・角丸48px）から流用。
================================================================== */
.luce-pcbar { display: none; }
@media (min-width: 769px) {
.luce-pcbar {
display: flex;
align-items: center;
gap: 12px;
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
padding: 12px 16px;
background: var(--luce-paper);
border: 1px solid var(--luce-line);
border-radius: 48px; /* A社ボタン 実測 */
box-shadow: 0 6px 24px rgba(45, 74, 62, 0.14);
font-family: var(--luce-sans);
max-width: 300px; /* ★2026-09-10: 広い説明文で575pxまで伸び、中央の本文カードに覆いかぶさっていた。角に収める */
}
/* ★2026-09-10: 追従バーの説明文は既定で出さない（バーが横に伸びて本文へ重なる原因だった）。
画面が十分に広い（本文640px＋左右の余白が確保できる）ときだけ添える。 */
/* 説明文は常に出さない。角の丸ボタンだけにする＝中央の本文に重ならない
（幅のある説明文を出すと、右下からでも中央600pxの本文に覆いかぶさるため）。 */
.luce-pcbar__lead { display: none; }
.luce-pcbar__tel {
font-family: var(--luce-latin);
font-size: 20px;
color: var(--luce-dark);
text-decoration: none;
white-space: nowrap; /* 電話番号は途中で切らない（書類ルールと同じ考え方） */
}
.luce-pcbar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 52px;
padding: 0 28px;
border-radius: 48px;
background: var(--luce-accent); /* アクセントは価格と予約だけに使う（設計 §3） */
color: #ffffff;
font-size: 16px;
text-decoration: none;
white-space: nowrap;
}
.luce-pcbar__btn:hover { background: var(--luce-dark); color: #ffffff; }
/* 画面が狭いパソコンでは説明文を落として、ボタンだけ残す */
@media (max-width: 1100px) {
.luce-pcbar__lead { display: none; }
}
}
/* 本文の途中に置くCTA（料金の直下・肝斑ページの末尾）。中央に置くだけ。 */
.post_content .luce-cta-inline { text-align: center; margin: 8px 0 0; }
/* ==================================================================
21. 狭い画面で15px分だけ横に動く件（2026-09-09）
★実測でここまで分かっている:
・出るのは「ご予約・ご相談」ブロック（reserve.html）が在るページだけ
（/ /kanpan/ /about/ /flow/ /access/ ＝5ページ。無いページでは出ない）
・そのブロックを display:none にすると、横スクロールが消える（390→375）
・**ただしブロックの中に、画面からはみ出している要素は1つも無い**
（最も右にある要素で right=355px、画面は375px。画像も286pxに収まっている）
・引き出しメニューを消しても変わらない＝そちらは原因ではない
★原因を特定できていないため、**切る**という対処にしている。
はみ出している要素が0件であることを測ってあるので、切っても見えるものは失われない。
★clip を使う理由: hidden と違って新しいスクロール枠を作らないので、
中の position:sticky などの挙動を壊さない。
★PCでは掛けない（PCでは横スクロールが出ていない）。
================================================================== */
@media (max-width: 768px) {
#about_page { overflow-x: clip; }
}
/* 番号カードの中の画像（施術時間の選び方）。参照サイトA社のメニュー3コースと同じ扱い＝
並列の選択肢に1枚ずつ。カードの内側余白いっぱいに置き、番号の上に来る。 */
.post_content .luce-card__img {
display: block;
width: calc(100% + 96px); /* カードの padding 48px を打ち消して端まで出す */
max-width: none; /* ★親テーマの img{max-width:100%} が幅を content 幅で止めるため外す */
margin: -48px -48px 24px; /* 上の余白も詰めて、絵から始まる形にする */
height: auto;
}
@media (max-width: 768px) {
.post_content .luce-card__img { width: calc(100% + 64px); max-width: none; margin: -32px -32px 20px; }
}
/* ==================================================================
22. ボタンの直下に置く一言（マイクロコピー）
出典＝~/.claude/skills/microcopy/SKILL.md §1・§2-1（摩擦を先に取り除く／次に何が起きるかを示す）
本文より1段落として、ボタンとの間を詰める。中央に置く。
================================================================== */
.post_content .luce-btn-note {
margin: 12px 0 0;
font-size: 14px; /* 本文16pxより1段小さく */
line-height: 28px;
color: var(--luce-ink);
text-align: center;
}
.post_content .luce-two__col .luce-btn-note { text-align: left; }
/* 空の一覧の「次の一歩」。本文と同じ体裁で中央に置く。 */
#no_post + .luce-empty-next {
margin: 12px 0 0;
font-family: var(--luce-sans);
font-size: 16px;
line-height: 28.8px;
color: var(--luce-ink);
text-align: center;
}
/* ==================================================================
23. ★見づらさの是正（2026-09-09 楠本さん指摘「レイアウトデザインが見づらい。
参考サイトをもっと踏襲しろ」）
★A社（NONREM）を**実際のブラウザで測り直した**（画面幅1420px）。
それまで当方は「内側の幅＝A社の実測1200px」を本文にも当てていたが、**読み違えだった。**
1200px は**器（サイト全体の枠）の幅**
本文の段落の幅は **624px**（16px なので 1行あたり約39字）
口コミカードの中は 352px（約22字）
当サイトは本文を1200px幅で流しており、**1行が約75字**＝A社のほぼ2倍だった。
日本語の本文で75字/行は、目が戻る先を見失う。これが「見づらい」の主因。
★節の上下余白も測り直した。
A社 concept 88px ／ menu 128px ／ voice 224px ／ effect 160px
当サイトは **50px**（B社の値）＝章の切れ目が弱く、詰まって見えていた。
直すのは2つだけ:
(1) 素の本文（段落・箇条書き・説明リスト）の幅を 640px にして中央へ
(2) 節の上下余白を 88px にする（A社の最小値）
カード・表・2列組・料金・FAQ は**1200pxのまま**（並べて見せるものなので広い方がよい）
================================================================== */
/* (1) 素の本文だけを 640px に絞る。器（.content_area）は1200pxのまま。 */
#about_page .post_content > p,
#about_page .post_content > ul:not([class]),
#about_page .post_content > ol:not([class]),
#about_page .post_content > h3,
#article .post_content > p,
#article .post_content > ul:not([class]),
#article .post_content > ol:not([class]) {
max-width: 640px; /* A社の本文 624px に合わせる（約39字/行） */
margin-left: auto;
margin-right: auto;
}
/* 中央に寄せた本文は、見出しが中央なので左揃えのままでよい（A社も本文は左揃え） */
/* (2) 節の上下余白＝A社の最小値 88px。左右は据え置き。 */
#about_page .about_content { padding: 88px 120px; }
@media (max-width: 768px) {
/* 狭い画面では 640px の制限は効かない（画面がそれより狭い）。余白だけ整える。 */
#about_page .about_content { padding: 56px 24px; }
}
/* ==================================================================
24. LP専門家の検収で出た指摘（2026-09-09・A社の実物CSSを読んだ上での指示）
★出所＝A社 page.css / module.css の実測値。当方が決めた数値は1つも無い。
================================================================== */
/* (3) 白い章でカードの輪郭が消えていた。
実測＝カードの線は #f4f0ec で、白地とのコントラスト比 約1.07:1＝ほぼ見えない。
A社は罫線を使わず影で面を立てている（page.css:466 menu-item）。同じ値を移植する。 */
.post_content .luce-card,
.post_content .luce-plan,
.post_content .luce-two__col,
.post_content .luce-reserve3__col,
.post_content .luce-promise-box {
border: none;
filter: drop-shadow(0 0 27px rgba(51, 37, 18, 0.10)); /* A社 実測 */
}
/* 注意枠だけは枠線を残す（アクセントの左線が意味を持っているため） */
/* (6) 画像が広い面に浮いて見える。A社は写真に影を入れている（実測 0 0 20px / 0.2）。 */
#about_page .about_content .image_area div img {
box-shadow: 0 0 20px rgba(51, 37, 18, 0.2);
}
/* (8) 表も本文と同じく幅を絞る。A社にLP内の表が無いため、フォーム幅860pxからの流用。 */
#about_page .post_content .luce-table,
#about_page .post_content .s_table,
#about_page .post_content .luce-scroll { max-width: 900px; margin-left: auto; margin-right: auto; }
/* (10) 最後のCTAの章だけ、下に広い床を作る（A社 menu-box 8em=128px の流用）。 */
#about_page .about_content:last-of-type { padding-bottom: 128px; }
/* ── luce-note-strong（2026-09-10 追加）────────────────────────────
戦略シート10で主軸に据えた「箇所の数では料金が変わらない」を、
本文のなかで一段だけ強く見せるための帯。
新しい色は足さず、既存のアクセント色と下地だけで作る。 */
.post_content .luce-note-strong {
background: var(--luce-base);
border-left: 3px solid var(--luce-accent);
padding: 20px 24px;
margin: 0 0 24px;
line-height: 2;
}
@media (max-width: 768px) {
.post_content .luce-note-strong { padding: 16px 18px; }
}
/* ══ 2026-09-10 実機（stg）で確認した崩れの是正 ══════════════════
楠本さん指摘「css 幅もずれている」。ブラウザ実測で3点を確認して直す。 */
/* ① ファーストビューの大見出しが、狭い画面で右端が切れ、ロゴに重なっていた。
固定の大きなフォントをやめ、画面幅に追従させる（語の途中では折らない）。 */
body.home #page_header .headline {
font-size: clamp(24px, 3.8vw, 46px);
line-height: 1.35;
padding: 0 16px;
word-break: keep-all;
overflow-wrap: anywhere;
}
body.home #page_header .sub_title {
font-size: clamp(12px, 1.5vw, 16px);
padding: 0 16px;
}
/* ② グローバルナビ（10項目）が中間の幅で2行に折れ、2行目「方へ」がバーの外へ
落ちていた。項目内では折り返さず、幅に応じて余白と字間を詰めて1行を保つ。 */
#global_menu .menu > li > a { white-space: nowrap; }
@media (max-width: 1400px) {
#global_menu .menu > li > a { padding-left: 10px; padding-right: 10px; letter-spacing: 0; font-size: 14px; }
}
@media (max-width: 1180px) {
#global_menu .menu > li > a { padding-left: 6px; padding-right: 6px; font-size: 13px; }
}
/* ③ 親テーマ heal_tcd077/header.php の .header_left_logo に、BUPURA のロゴが直書き
されている（BUPURA のテーマを複製したため）。その画像は luce 配下に無く、
ヘッダー左に「壊れた画像＋本格痩身＆小顔サロンBUPURA」と出ていた。
親テーマは触らず、child 側で隠す。正しいロゴは #header_logo（header_logo()＝ルセ）。 */
.header_left_logo { display: none !important; }
/* ==========================================================================
価格・オープン特典・モニター（2026-09-24 追加）
指示書 CC指示書_ルセリアンジュ_サイト反映.md §2・§3・§5-8
★§5-8 に沿い、全部同じ角丸カード・一語だけの色替え・矢印は使わない。
区切りは罫線で行い、色は既定の3色（濃緑 #2d4a3e／金 #b8963e／淡緑 #acbaab）に収める。
========================================================================== */
/* 特典の帯。期間の外ではそもそも出力されない（PHP側で判定） */
.luce-open-badge {
margin: 0 0 24px;
padding: 14px 18px;
background: #2d4a3e;
color: #fff;
font-size: 16px;
line-height: 1.7;
letter-spacing: .02em;
text-align: center;
border-top: 2px solid #b8963e;
border-bottom: 2px solid #b8963e;
}
/* 料金表 */
.luce-price-table th,
.luce-price-table td { vertical-align: middle; }
.luce-price-table thead th {
background: #f3f5f2;
font-size: 14px;
white-space: nowrap;
}
.luce-price-table tbody th { white-space: nowrap; }
.luce-price__now {
display: block;
font-size: 19px;
font-weight: 700;
color: #2d4a3e;
white-space: nowrap; /* 金額を行の途中で切らない */
}
.luce-price__std {
display: block;
margin-top: 2px;
font-size: 13px;
color: #6d7a70;
text-decoration: line-through;
white-space: nowrap;
}
.luce-price-table__row--recommend th,
.luce-price-table__row--recommend td { background: #fbf8f0; }
.luce-badge-recommend {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: #b8963e;
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
white-space: nowrap;
}
.luce-price-table__pending {
color: #6d7a70;
font-size: 14px;
}
.luce-saving {
margin: 14px 0 0;
font-size: 16px;
color: #2d4a3e;
}
/* モニター。囲みは1つだけ（ほかの節は罫線で区切る） */
.luce-monitor {
margin: 8px 0 20px;
padding: 26px 24px;
background: #fff;
border: 2px solid #2d4a3e;
}
.luce-monitor__head {
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid #dfe4e0;
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-weight: 700;
color: #2d4a3e;
}
.luce-monitor__price {
margin: 0 0 6px;
font-size: 16px;
line-height: 2;
}
.luce-monitor__price .luce-price__std,
.luce-monitor__price .luce-price__now { display: inline; }
.luce-monitor__price .luce-price__now {
margin-left: 10px;
font-size: 26px;
}
.luce-monitor__off {
display: inline-block;
margin-left: 10px;
padding: 2px 10px;
background: #b8963e;
color: #fff;
font-size: 14px;
white-space: nowrap;
}
.luce-monitor__unit { margin: 0 0 14px; font-size: 16px; color: #2d4a3e; }
.luce-monitor__cond { margin: 0 0 12px; padding-left: 1.2em; font-size: 16px; line-height: 1.9; }
.luce-monitor__cond li { margin-bottom: 4px; }
.luce-monitor--closed { border-color: #acbaab; }
.luce-monitor--closed .luce-monitor__head { color: #6d7a70; }
/* 携帯 */
@media screen and (max-width: 767px) {
.luce-open-badge { font-size: 16px; padding: 12px 14px; }
.luce-price__now { font-size: 17px; }
.luce-monitor { padding: 20px 16px; }
.luce-monitor__price .luce-price__now { font-size: 22px; margin-left: 0; display: block; }
.luce-monitor__off { margin-left: 0; }
}
/* ==========================================================================
ヘッダーのロゴの重なり（2026-10-02 追加）
症状: PC=ロゴ下端200px がナビ上端158px に42px食い込み「Lucélange」が隠れる。
肩書きspanがロゴと重なり「代」と「ン」だけ見える。
スマホ=ロゴのy=-6で主画像にかぶり、見出し1行目「毎朝、」が読めない。
実測: PC=ロゴ x=545.5, y=20, 189x180（下端200px）、ナビ x=0, y=158,
1280x60（上端158px）、肩書き x=535, y=24, 210x15。
スマホ=ロゴ x=100.5, y=-6, 189x180（下端174px）、肩書き x=0,
y=20.85, 390x14.3。
方針: 親テーマは触らず child 側で高さを抑える。
========================================================================== */
img.pc_logo_image.type1 {
height: 90px;
width: auto;
}
#site_desc span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media screen and (max-width: 750px) {
img.mobile_logo_image {
height: 48px;
width: auto;
}
}
/* ④ 親テーマの .footer_center_logo に、BUPURA のロゴが直書きされているため、
フッターに「壊れた画像＋本格痩身＆小顔サロンBUPURA【ブプラ】」と出ていた。
画像は luce 配下に無く404。別ブランドの画像を複製せず、child 側で隠す。
正しいルセのロゴは別要素 #footer_logo にあるため残す。 */
.footer_center_logo { display: none !important; }
/* ⑤ フッター最下部の重なりと中段ボタンの低コントラスト（2026-10-03 追加）
症状: PCで2行目のメニューが著作権表示へ重なり、右端の項目が固定予約CTAに隠れる。
中段の「空席を確認する」は明るい背景に白文字で読みにくい。
実測: 1280x900=#footer_menu 1280x61px（文字は2行・下端873.5px）、
#copyright 1280x60px（上端829.5px）、文字の重なり44px。
固定CTA 202x78px（左端1054px）と3項目が交差。
390x844=メニュー文字は6行、著作権との重なり0px、固定CTAは非表示。
ボタン文字 rgb(255,255,255)／実効背景 rgb(244,240,236)、
コントラスト比1.13:1（PC・携帯共通、4.5:1未満）。
方針: PCだけメニューを内容高に追従させ、固定CTAの幅＋右位置＋余白分を右に確保する。
中段ボタンは形・位置・文言を変えず、文字色だけ濃くする。 */
@media screen and (min-width: 769px) {
#footer_menu {
height: auto !important;
min-height: 61px;
box-sizing: border-box;
padding-right: 242px;
}
}
#footer_button a {
color: #2d4a3e !important;
}
/* ⑥ フッターメニューの語中改行と中段ボタン文字色の再修正（2026-10-03 追加）
実測: PC下限側では後読みのresponsive.cssが⑤の右余白を40pxへ戻すため、
固定CTA 202px＋右端24px＋安全間隔16px＝242pxを再確定する。
ボタンは後読みのインラインCSSが同一詳細度＋!importantで⑤を上書きしていたため、
祖先を加えて詳細度を上げ、文字色だけを指定する。 */
@media screen and (min-width: 769px) {
#footer_menu {
padding-right: 242px !important;
}
#footer_menu a {
white-space: nowrap;
}
}
#footer_top #footer_button a {
color: #2d4a3e !important;
}
|