/* ==========================================================================
   BANNAI美容クリニック LP（モバイル版・全文フルバージョン）
   FV＋Case01は style.css のコンポーネントをそのまま流用。
   ここでは、その先の全セクション用コンポーネントを追加する。
   ==========================================================================

   ---- タイポグラフィ一覧（フォント名／ウェイト／サイズ） ----
   以降のセクションもすべてこの一覧に沿って実装する。個別のpx値は
   ベタ書きせず、必ず --fs-1〜--fs-6 のトークンを使うこと。

   role                          | font-family        | weight | size(token)
   -------------------------------|--------------------|--------|------------
   セクション見出し(h2)            | Shippori Mincho    | 500    | --fs-5 (32px)
   カード内見出し(h3) / 比較見出し(h4)| Shippori Mincho   | 500    | --fs-3 (18px)
   強調コピー(.lp-big, 数値ハイライト)| Shippori Mincho   | 500    | --fs-4 (24px)
   英字ラベル(.lp-eyebrow)         | Noto Sans JP       | 500    | --fs-1 (14px)
   リード文(.lp-lead) / CTAボタン  | Noto Sans JP       | 400/500| --fs-2 (16px)
   本文(.lp-card p, 比較文など)    | Noto Sans JP       | 400    | --fs-2 (16px)
   カードラベル(.lp-card__label)   | Noto Sans JP       | 500    | --fs-1 (14px)
   注記・キャプション・データ数値   | Noto Sans JP       | 400    | --fs-1 (14px)
   （例外）Case01タイトル画像・英字ロゴ(Cormorant Garamond)は
   先方支給の画像内 or ワンオフ装飾のため対象外。症例写真のキャプション等、
   写真に直接添える極小文字はレイアウト上やむを得ずこの一覧より小さくなる
   ことがある（先方確認済み）。
   ========================================================================== */

/* ---- 共通セクション枠 ---- */
.lp-section {
  padding: 32px 12px;
}

/* セクションの境目を常に示す罫線。
   背景色が同じセクションが連続しても、ここで区切りがわかる */
section {
  border-top: 1px solid rgba(184, 150, 90, 0.28);
}

section:first-of-type {
  border-top: none;
}

.lp-section--dark {
  background: var(--espresso);
  color: var(--ivory);
  /* 暗い背景の上でも見えるよう、区切り線は明るいゴールドに */
  border-top-color: rgba(233, 206, 156, 0.3);
}

/* 暗い背景セクションが連続する箇所は、区切り線を太くして強調する */
.lp-section--dark + .lp-section--dark {
  border-top-width: 3px;
  border-top-color: rgba(233, 206, 156, 0.5);
}

.lp-section--dark h2,
.lp-section--dark h3 {
  color: var(--white);
}

.lp-section--soft {
  background: #FBF7EE;
}

/* 複数セクションを1つの「章」としてまとめる場合、章の内部の区切り線は消す
   （章の外との境目だけに罫線を残し、章の中は一続きに見せる）。
   区切り線だけでなく、章の中の継ぎ目の余白も外側の余白の半分に詰める */
.lp-section--grouped {
  border-top: none;
  padding-top: 16px;
}

.lp-section:has(+ .lp-section--grouped) {
  padding-bottom: 16px;
}

/* 章ごとに背景色を変え、「ここから別の章に入った」がひと目で分かるようにする。
   章の中の暗い背景セクション（.lp-section--dark）は、それ自体がすでに強い
   アクセントになっているため、ここでは上書きしない。 */
.lp-chapter-bg-1 {
  background: #FBF7EE;
}

/* シルク背景は章の最初のセクションだけに敷き、下端で#FBF7EE（次セクションの
   .lp-section--softと同じ色）へグラデーションでなじませる。同じ画像をセクションが
   変わるたびに繰り返すと継ぎ目が目立つため、章の2つ目以降のセクションでは
   このクラスを付けず、素の.lp-section--softの単色に任せる。 */
.lp-chapter-bg-2 {
  background-color: #FBF7EE;
  background-image:
    linear-gradient(to bottom, rgba(251, 247, 238, 0) 0%, rgba(251, 247, 238, 0) 55%, #FBF7EE 100%),
    url("assets/sp_base_drape_BE.png");
  background-size: 100% 100%, cover;
  background-position: center, top center;
  background-repeat: no-repeat, no-repeat;
}

.lp-chapter-bg-3 {
  background: #FFFFFF;
}

.lp-chapter-bg-4 {
  background: #EFE7DA;
}

/* ---- 章タイトル（大見出し）----
   複数セクションにまたがる大きな話のかたまりの冒頭にだけ置く、一番大きい見出し。
   章の中の個々の話は、これまで通り.lp-eyebrow＋.lp-h2（小見出し）で表現する。 */
.lp-chapter-eyebrow {
  display: block;
  text-align: center;
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 8px;
}

.lp-chapter-title {
  font-family: var(--font-mincho);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.4;
  color: var(--espresso);
  text-align: center;
  margin: 0 0 20px;
}

.lp-section--dark .lp-chapter-title {
  color: var(--white);
}

/* 先方書き出しの章タイトル画像版。.lp-chapter-eyebrow＋.lp-chapter-titleの
   テキスト版の代わりに使う。.lp-sectionの左右パディング(12px)分を打ち消して
   画面幅ぴったりの高さいっぱいに敷く。 */
.lp-chapter-title-img {
  display: block;
  width: calc(100% + 24px);
  max-width: none;
  margin: 16px -12px 20px;
}

/* セクション冒頭がこの画像の場合、.lp-sectionの上パディング分はほぼ打ち消しつつ、
   少しだけ余白を残す（完全に画面端フラットにはしない） */
.lp-section > .lp-chapter-title-img:first-child {
  margin-top: 0;
}

/* 吹き出し見出しがセクションの先頭に来る場合も、章タイトル画像と同じく
   セクション自体の上パディングだけに任せ、吹き出し自身の上マージンは重ねない
   （前のセクションのpadding-bottomと合わさって余白が過大になるのを防ぐ） */
.lp-section > .lp-eyebrow-plain:first-child {
  margin-top: 0;
}

/* 茶色い吹き出し（下向き三角つき）の英字ラベル。
   幅はテキストに合わせて縮み、中央に自動配置される。 */
.lp-eyebrow {
  position: relative;
  display: table;
  margin: 0 auto 18px;
  text-align: center;
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--espresso);
  border: none;
  border-radius: 6px;
  padding: 6px 16px 8px;
}

.lp-eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--espresso);
}

/* 暗い背景セクションでは、背景と同化しないようゴールドの吹き出しに切り替える */
.lp-section--dark .lp-eyebrow {
  color: var(--espresso);
  background: var(--gold);
  font-weight: 700;
}

.lp-section--dark .lp-eyebrow::after {
  border-top-color: var(--gold);
}

.lp-h2 {
  font-family: var(--font-mincho);
  /* 「脂肪を入れる場所と、美しく見せる場所は違います。」と同じサイズ・ウェイトに統一 */
  font-size: clamp(var(--fs-3), 5.6vw, var(--fs-4));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--espresso);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 10px;
}

.lp-section--dark .lp-h2 {
  color: var(--white);
}

/* ---- 画像＋テキストの2カラム（PC幅のみ）----
   画像は未支給のため、赤みのあるピンクのプレースホルダーを表示する。
   クライアントがフリー素材を見つけたら、.lp-media-row__media内の
   div（プレースホルダー）を<img>タグに差し替えるだけでよい。
   モバイル幅では画像を上・テキストを下に積む1カラム表示のまま。 */
.lp-media-row__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #FF6B92;
  border: 2px dashed #C23A63;
  border-radius: 0;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lp-media-row__media.lp-media-row__media--auto {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
}

.lp-media-row__media.lp-media-row__media--auto img {
  height: auto;
  object-fit: contain;
}

.lp-media-row__media::before {
  content: "PHOTO";
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 0 12px;
}

/* data-filename指定がある場合は、そのファイル名をプレースホルダー内に表示する
   （後で同じファイル名で画像を保存すれば、そのまま差し込める） */
.lp-media-row__media[data-filename]::before {
  content: attr(data-filename);
}

.lp-media-row + .lp-media-row {
  margin-top: 40px;
}

.lp-media-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 実写が入っている場合は、ピンクのプレースホルダー背景・枠・PHOTO文字を消す */
.lp-media-row__media:has(img) {
  background: none;
  border: none;
}

.lp-media-row__media:has(img)::before {
  content: none;
}

@media (min-width: 1024px) {
  .lp-media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
  }

  .lp-media-row__media {
    margin-bottom: 0;
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }

  /* 画像に対してテキストを広めに取りたい場合の修飾クラス */
  .lp-media-row--text-wide {
    grid-template-columns: 2fr 3fr;
  }

  /* 画像を右側に置きたい場合はこの修飾クラスを追加する */
  .lp-media-row--reverse .lp-media-row__media {
    order: 2;
  }
}

.lp-lead {
  font-size: var(--fs-1);
  line-height: 1.75;
  color: var(--espresso);
  text-align: justify;
}

/* 「脂肪豊胸のゴールと成功の定義」セクションはリード文も中央揃え */
#goal-and-success .lp-lead {
  text-align: center;
}

.lp-section--dark .lp-lead {
  color: var(--ivory);
  opacity: 0.92;
}

.lp-thought {
  font-size: var(--fs-2);
  font-style: normal;
  color: var(--gold);
  background: rgba(184, 150, 90, 0.1);
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
  line-height: 1.7;
}

.lp-section--dark .lp-thought {
  background: rgba(255, 255, 255, 0.08);
  color: #E9CE9C;
}

.lp-note {
  font-size: 13px;
  color: var(--espresso);
  opacity: 0.8;
  line-height: 1.8;
  margin-top: 14px;
}

.lp-section--dark .lp-note {
  color: var(--ivory);
  opacity: 0.65;
}

.lp-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: var(--espresso);
  margin: 28px 0 8px;
  object-fit: cover;
}

/* 実写を挿入する場合、4:3固定だと上下がトリミングされて注釈が切れることがあるため、
   画像本来の縦横比のまま表示する（余白が出ないよう幅いっぱいに敷く） */
.lp-photo--auto {
  aspect-ratio: auto;
  height: auto;
  background: none;
}

.lp-section--dark .lp-photo {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-photo-caption {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.75;
  line-height: 1.6;
}

.lp-section--dark .lp-photo-caption {
  color: var(--ivory);
  opacity: 0.8;
}

/* .lp-promise-cardはセクションがdark（暗い背景）でも、カード自体は常に白背景。
   上の.lp-section--dark用の「暗い背景の上に乗る」配色（薄い白枠・アイボリー文字）を
   そのまま適用すると、白いカードの上で写真枠や注記がほぼ見えなくなってしまうため、
   通常（明るい背景用）の配色に戻す */
.lp-promise-card .lp-photo {
  background: var(--espresso);
  border: none;
}

.lp-promise-card .lp-photo-caption {
  color: var(--espresso);
  opacity: 0.75;
}

/* ---- カード ---- */
.lp-card {
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 0;
  padding: 28px 24px;
  margin-top: 14px;
}

.lp-section--dark .lp-card {
  background: var(--white);
  border-color: var(--gold);
}

.lp-card__label {
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 6px;
}

/* .lp-media-row内では左揃えの文章に合わせ、見出しの目印らしく下に細い線を添える */
.lp-media-row__body .lp-card__label {
  display: inline-block;
  text-align: left;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  margin-bottom: 10px;
}

/* .lp-media-row__body内の見出し・本文のサイズと余白を統一する */
.lp-media-row__body h3 {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.5;
  margin-bottom: 14px;
}

.lp-media-row__body p {
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
}

.lp-media-row__body p strong {
  color: var(--gold);
  font-weight: inherit;
}

.lp-card h3 {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--espresso);
  text-align: center;
  margin-bottom: 8px;
}

.lp-section--dark .lp-card h3 {
  color: var(--espresso);
}

.lp-card p {
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
  text-align: center;
}

.lp-section--dark .lp-card p {
  color: var(--espresso);
  opacity: 1;
}

/* ---- 用語/数値ハイライト ---- */
.lp-big {
  font-family: var(--font-mincho);
  font-size: var(--fs-4);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.6;
  margin: 10px 0;
}

.lp-section--dark .lp-big {
  color: var(--white);
}

.lp-term {
  color: var(--gold);
  font-weight: 500;
}

/* ---- POINTラベル付きの注意喚起ボックス（旧quote box） ---- */
.lp-axis-card + .lp-quote-box {
  margin-top: 24px;
}

.lp-quote-box {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 24px 28px;
  border: none;
  border-radius: 14px;
  background: rgba(184, 150, 90, 0.12);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.7;
  color: var(--espresso);
  text-align: center;
}

/* POINTボックスの中で伝えたい一番の主張だけ明朝体にする。それ以外（.lp-quote-box
   直下のテキスト・pのメモ書きなど）はゴシック体・fs-1で統一する */
.lp-quote-box strong {
  display: block;
  font-family: var(--font-mincho);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 4px 0;
}

/* POINTボックスの直後に見出しが来ると詰まって見えるため、上に余白を足す */
.lp-quote-box + .lp-h2 {
  margin-top: 28px;
}

.lp-quote-box__label {
  display: block;
  font-family: "Poppins", var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 6px;
}

.lp-section--dark .lp-quote-box {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--ivory);
}

/* ---- 枠なし・中央揃えの英字ラベル ---- */
/* .lp-eyebrowと同じ、茶色い吹き出し（下向き三角つき）に統一 */
.lp-eyebrow-plain {
  position: relative;
  display: table;
  margin: 40px auto 40px;
  text-align: center;
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--espresso);
  border-radius: 6px;
  padding: 2px 16px 2px;
}

.lp-eyebrow-plain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--espresso);
}

.lp-section--dark .lp-eyebrow-plain {
  color: var(--espresso);
  background: var(--gold);
  font-weight: 700;
}

.lp-section--dark .lp-eyebrow-plain::after {
  border-top-color: var(--gold);
}

/* .lp-h2--compact は基本の.lp-h2と同じサイズ・ウェイトになったため、
   このモディファイアは現在何も上書きしない（HTML側のクラスは残っていても無害）。 */

/* 見出し直下の短いゴールドの区切り線 */
.lp-h2--divider::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 10px auto 0;
  background: var(--gold);
}

.lp-h3-standalone {
  font-family: var(--font-mincho);
  font-size: clamp(var(--fs-3), 5.6vw, var(--fs-4));
  font-weight: 600;
  line-height: 1.55;
  color: var(--espresso);
  text-align: center;
  margin: 20px 0 16px;
}

/* ---- レッスンカード（01／02のような番号付き解説） ---- */
.lp-lesson-grid {
  display: grid;
  gap: 12px;
}

/* 先方から届いた完成デザイン画像（見出し・本文・写真すべて込み）を
   そのまま並べて差し込む版。alt属性に本文と同内容を入れて読み上げ・検索対応を補っている。 */
.lp-lesson-grid--image {
  gap: 16px;
}

.lp-lesson-image {
  display: block;
  width: 100%;
  height: auto;
}

.lp-lesson-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 18px;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  text-align: left;
}

/* 実写差し替え前提のプレースホルダー番号。
   先方から装飾フォント（Snell Roundhand想定）で書き出した画像が届いたら、
   このテキストの代わりに img を差し込む。 */
.lp-lesson-num {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  position: relative;
  padding-bottom: 10px;
}

.lp-lesson-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.lp-lesson-heading {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 8px;
}

.lp-lesson-text {
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
}

.lp-lesson-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 12px;
}

/* ---- セクション間の短い縦区切り線 ---- */
.lp-divider-vertical {
  width: 1px;
  height: 20px;
  margin: 18px auto 0;
  background: var(--gold);
}

/* ---- 3D DATA：数値ストリップ ---- */
.lp-evidence-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.lp-evidence-cell {
  background: var(--white);
  border: 1px solid rgba(184, 150, 90, 0.4);
  border-radius: 0;
  padding: 18px 16px;
  text-align: center;
}

.lp-evidence-label {
  display: block;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.7;
}

.lp-evidence-value {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-4);
  font-weight: 500;
  color: var(--gold);
  margin: 4px 0 2px;
}

.lp-evidence-result {
  display: block;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.75;
}

/* ---- SVG図解 ---- */
.lp-diagram-figure {
  margin: 18px 0;
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 16px;
  padding: 24px 16px;
}

.lp-diagram-cap {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 10px;
}

.lp-diagram-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.85;
  margin-bottom: 8px;
}

.lp-diagram-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 凡例の線を、図の中の点線・実線と同じ色・スタイルにして対応関係を分かりやすくする */
.lp-diagram-legend__line {
  display: inline-block;
  width: 22px;
  border-top-style: solid;
}

.lp-diagram-legend__line--dashed {
  border-top-width: 2px;
  border-top-color: #a8977b;
  border-top-style: dashed;
}

.lp-diagram-legend__line--solid {
  border-top-width: 3px;
  border-top-color: var(--espresso);
}

.lp-diagram-wrap {
  background: none;
  border: none;
  padding: 0;
}

.lp-diagram-wrap + .lp-diagram-wrap {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(42, 35, 29, 0.12);
}

.lp-diagram-svg-cap {
  text-align: center;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.7;
  margin-top: 4px;
}

/* ---- データが示した4つの関係（散布図アコーディオン）：
   開閉の見た目・挙動はFAQ／症例集の丸チェブロンアイコンに合わせる ---- */
.lp-evidence {
  margin-top: 20px;
  border-radius: 10px;
  border: 1px solid rgba(42, 35, 29, 0.12);
  background: var(--white);
  overflow: hidden;
}

.lp-evidence summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lp-evidence summary::-webkit-details-marker {
  display: none;
}

.lp-evidence[open] summary {
  border-bottom: 1px solid rgba(42, 35, 29, 0.1);
}

.lp-evidence summary i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-style: normal;
  transition: transform 0.2s ease;
}

.lp-evidence summary i svg {
  width: 18px;
  height: 18px;
}

.lp-evidence[open] summary i {
  transform: rotate(180deg);
}

.lp-evidence-body {
  padding: 16px;
}

.lp-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.lp-evidence-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(42, 35, 29, 0.08);
}

@media (min-width: 1024px) {
  .lp-evidence-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 変化の4段階 ミニリスト ---- */
.lp-levels {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.lp-level {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 10px;
  padding: 16px 18px;
}

.lp-level--peak {
  background: var(--espresso);
  border-color: var(--espresso);
}

.lp-level--peak .lp-level__title,
.lp-level--peak .lp-level__no {
  color: var(--white);
}

.lp-level--peak .lp-level__body {
  color: var(--ivory);
  opacity: 0.9;
}

/* PC幅だけで改行させたい箇所用（スマホでは改行しない） */
.lp-br-pc {
  display: none;
}

.lp-level__no {
  font-family: var(--font-mincho);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
  padding-top: 2px;
}

.lp-level__title {
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.4;
  margin-bottom: 3px;
}

.lp-level__body {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.75;
  line-height: 1.6;
}

/* ---- 2カラム比較 ---- */
.lp-compare {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.lp-compare > div {
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 0;
  padding: 16px;
}

.lp-compare--img img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-compare h4 {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 6px;
}

.lp-compare p {
  font-size: var(--fs-1);
  line-height: 1.75;
  color: var(--espresso);
}

.lp-warning {
  background: #FBF3DE;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--espresso);
  margin-top: 40px;
}

/* ---- 因果ステップ（横スクロール） ---- */
/* 6項目を「流れ」ではなく並列の図解として見せる、矢印なしの2列グリッド */
/* チェックリスト風：文章幅に合わせた1枚のリスト。下の.lp-dual-cardと見た目が
   かぶらないよう、白＋枠ではなくアイボリー地の塗りつぶしで質感を変える */
.lp-causal-scroll {
  display: block;
  max-width: 680px;
  margin: 24px auto;
  background: var(--ivory);
  border: none;
  padding: 16px 24px;
}

.lp-causal-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(184, 150, 90, 0.4);
  border-radius: 0;
  padding: 14px 0;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  text-align: left;
  line-height: 1.5;
}

.lp-causal-step:last-child {
  border-bottom: none;
}

/* 左側のシンプルなチェックアイコン */
.lp-causal-step::before {
  content: "✓";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.lp-section--dark .lp-causal-scroll {
  background: rgba(255, 255, 255, 0.06);
}

.lp-section--dark .lp-causal-step {
  color: var(--ivory);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* ---- デュアル評価（3D／エコー） ---- */
.lp-dual-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.lp-dual-grid--img img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-dual-card {
  background: var(--white);
  color: var(--espresso);
  border: 1px solid var(--gold);
  border-radius: 0;
  padding: 20px;
}

.lp-dual-card span {
  display: block;
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 6px;
}

.lp-dual-card strong {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  margin-bottom: 6px;
}

.lp-dual-card p {
  font-size: var(--fs-1);
  line-height: 1.7;
  opacity: 1;
}

/* ---- 成功の3軸 / equation ---- */
.lp-axis-grid {
  display: grid;
  gap: 36px;
  margin: 16px 0;
}

.lp-axis-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid rgba(42, 35, 29, 0.2);
  border-radius: 10px;
  padding: 28px 20px 20px;
}

#beyond-retention .lp-axis-card + .lp-axis-card {
  margin-top: 16px;
}

.lp-axis-card h3 {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--gold);
  text-align: center;
}

.lp-axis-card > p {
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
  text-align: justify;
}

.lp-axis-no {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 6px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-family: "Poppins", var(--font-sans);
  font-size: var(--fs-3);
  font-weight: 400;
  margin-bottom: 8px;
}

/* 各カード末尾の結論行（例：「安全であること」）を、本文と見分けやすくする */
.lp-axis-card .lp-big {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--gold);
  background: rgba(184, 150, 90, 0.12);
  border-left: 3px solid var(--gold);
  padding: 8px 12px;
  margin-top: 12px;
}

.lp-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mincho);
  font-size: var(--fs-2);
  color: var(--espresso);
  margin-top: 16px;
}

.lp-equation span {
  padding: 6px 12px;
  border: 1px solid var(--gold);
  border-radius: 999px;
}

/* ---- 最終セクション：院長の署名（画像そのまま） ---- */
.lp-final-signature-img {
  display: block;
  width: min(100%, 340px);
  height: auto;
  margin: 0 auto 24px;
}

/* ---- 最終セクション：情報パートと後押しパートを分ける区切り線 ---- */
.lp-final-divider {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 48px auto 32px;
}

/* ---- ミッションバンド ---- */
.lp-mission-band {
  width: fit-content;
  max-width: 100%;
  background: rgba(184, 150, 90, 0.12);
  border-radius: 0;
  padding: 24px 28px;
  margin: 16px auto;
  text-align: center;
}

.lp-mission-band strong {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.6;
}

/* ダーク背景セクション内では、囲みボックスをやめて文字だけ白で見せる */
.lp-section--dark .lp-mission-band {
  background: none;
  padding: 0;
}

.lp-section--dark .lp-mission-band strong,
.lp-section--dark .lp-mission-band p {
  color: var(--ivory);
}

/* ---- 症例ギャラリー（accordion） ---- */
.lp-case-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin: 14px 0;
  -webkit-overflow-scrolling: touch;
}

.lp-case-nav a {
  flex: 0 0 auto;
  background: var(--espresso);
  color: var(--ivory);
  font-size: var(--fs-1);
  padding: 7px 14px;
  border-radius: 999px;
}

.lp-case {
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 0;
  margin-top: 12px;
  overflow: hidden;
}

.lp-case > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "badge icon"
    "title icon";
  align-items: center;
  row-gap: 10px;
  column-gap: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lp-case > summary:hover {
  background: rgba(184, 150, 90, 0.08);
}

/* 開いている間は、タイトル行全体をゴールド地に白抜き文字へ切り替える */
.lp-case[open] > summary {
  background: var(--gold);
}

.lp-case[open] > summary:hover {
  background: var(--gold);
}

.lp-case > summary::-webkit-details-marker {
  display: none;
}

.lp-case > summary .lp-case-no {
  grid-area: badge;
  justify-self: start;
  display: inline-block;
  font-family: "Poppins", var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(184, 150, 90, 0.12);
  padding: 2px 25px;
  border-radius: 999px;
  white-space: nowrap;
}

.lp-case > summary strong {
  grid-area: title;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.5;
}

.lp-case[open] > summary strong {
  color: var(--white);
}

.lp-case[open] > summary .lp-case-no {
  color: var(--gold);
  background: var(--white);
}

/* 「写真を見る」の代わりに、開閉が一目で分かるアイコンボタンを表示する */
.lp-case > summary i {
  grid-area: icon;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-style: normal;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lp-case > summary i svg {
  width: 18px;
  height: 18px;
}

.lp-case[open] > summary i {
  background: var(--white);
  border-color: var(--white);
  color: var(--gold);
  transform: rotate(180deg);
}

.lp-case-body {
  padding: 16px 16px 20px;
  background: var(--ivory-soft, var(--ivory));
  border-top: 1px solid rgba(184, 150, 90, 0.35);
}

.lp-case-body p {
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
  margin-bottom: 10px;
}

.lp-case-photos {
  display: grid;
  gap: 8px;
}

.lp-case-photos.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.lp-case-photos.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.lp-case-photos figure {
  margin: 0;
}

.lp-case-photos .lp-photo {
  margin: 0;
  aspect-ratio: 1 / 1;
}

.lp-case-photos figcaption {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.7;
  margin-top: 4px;
  text-align: center;
}

/* ---- 治療内容・費用・リスク 開示（details in details） ---- */
.lp-disclosure {
  margin-top: 14px;
  border-top: 1px dashed rgba(42, 35, 29, 0.2);
  padding-top: 14px;
}

.lp-disclosure summary {
  display: inline-block;
  /* タイプスケール最小のfs-1よりさらに下げたいUI文字のための例外指定 */
  font-size: 13px;
  font-weight: 400;
  color: var(--gold);
  background: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  list-style: none;
}

.lp-disclosure summary::-webkit-details-marker {
  display: none;
}

.lp-disclosure summary::before {
  content: "＋ ";
}

.lp-disclosure[open] summary::before {
  content: "－ ";
}

.lp-disclosure-body {
  margin-top: 8px;
  padding: 16px;
  background: #FBF7EE;
  border-radius: 0;
  /* タイプスケール最小のfs-1よりさらに1段階下げる */
  font-size: 13px;
  line-height: 1.8;
  color: var(--espresso);
}

.lp-disclosure-body span {
  display: block;
  margin: 3px 0;
}

.lp-disclosure-body strong {
  color: var(--espresso);
  font-weight: 700;
}

.lp-disclosure-body a {
  color: var(--gold);
  text-decoration: underline;
}

/* ---- 約束カード ---- */
/* カード自体の見た目は成功の3軸カード（.lp-axis-card）と揃える */
.lp-promise-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid rgba(42, 35, 29, 0.2);
  border-radius: 10px;
  overflow: visible;
  margin-top: 28px;
}

/* 画像見出し（丸いエンブレム）がカード上辺からはみ出すため、
   スマホ幅でも前のカードとぶつからないよう十分な余白を確保する
   （PC版と同じ余白量に揃える） */
#beauty-rules .lp-promise-card,
#question3 .lp-promise-card {
  margin-top: 100px;
}

.lp-promise-head {
  background: var(--gold);
  color: var(--espresso);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-weight: 700;
}

/* 画像で見出しを用意した場合：ゴールドの帯をやめ、上部中央に画像だけ配置する */
/* 画像見出しは、丸いエンブレム部分がカードの上辺に半分乗るように
   絶対配置で真上へずらす（成功の3軸カードの番号バッジと同じ考え方） */
.lp-promise-head--image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-33.333%);
  background: none;
  padding: 0;
  z-index: 2;
}

/* 美乳ルールの見出し画像は約束カードのものより縦長（円の下の文字が2行分長い）ため、
   同じ%指定だと円のはみ出し量が大きく見えてしまう。見た目の突き出し量を
   約束カードと揃えるため、この画像だけ低めの%にする */
#beauty-rules .lp-promise-head--image {
  transform: translateY(-27%);
}

.lp-promise-head--image img {
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;
}

.lp-promise-head span {
  font-size: var(--fs-1);
  letter-spacing: 0.06em;
}

.lp-promise-head strong {
  font-size: var(--fs-1);
}

.lp-promise-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 150px 20px 20px;
}

/* 美乳ルールの見出し画像は約束カードより縦長（下の文字が2行）で、
   画像の中の文字と本文の見出しが被っていたため、上の余白を広げる。
   スマホ幅は画像そのものも大きく表示されるため、さらに広めに確保する */
#beauty-rules .lp-promise-body {
  padding-top: 230px;
}

.lp-promise-metric {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.7;
  margin-bottom: 8px;
}

/* 「術直後」などのタイミング表記を楕円バッジにして視認性を上げる */
.lp-promise-tag {
  display: table;
  background: var(--espresso);
  color: #fff;
  opacity: 1;
  border-radius: 999px;
  padding: 2px 25px;
  margin: 0 auto 4px;
}

.lp-promise-metric b {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-4);
  font-weight: 500;
  color: var(--gold);
  text-align: center;
  opacity: 1;
}

.lp-promise-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--espresso);
  line-height: 1.5;
  margin-top: 30px;
  margin-bottom: 8px;
}

.lp-promise-body p {
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
}

.lp-guarantee-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.lp-guarantee-metrics span {
  background: rgba(184, 150, 90, 0.14);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: var(--fs-1);
  color: var(--espresso);
}

/* 約束カード内の写真は正方形・小さめにして、テキストと横並びにする */
.lp-promise-media {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 10px 0;
}

.lp-promise-media__photo {
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.lp-promise-media__photo .lp-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  margin: 0;
}

.lp-promise-media__text {
  flex: 1;
  min-width: 0;
}

.lp-promise-media__text p {
  margin: 0;
}

.lp-promise-media__text .lp-photo-caption {
  margin-top: 4px;
}

/* 成功の3軸カードの結論行（.lp-axis-card .lp-big）と同じ見た目に統一 */
.lp-promise-note {
  margin-top: 20px;
  padding: 10px 12px 18px;
  background: rgba(184, 150, 90, 0.12);
  border-radius: 0;
  border-left: 3px solid var(--gold);
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.7;
  color: var(--gold);
  opacity: 1;
}

/* ---- CTAバンド（モニター募集） ---- */
.lp-cta-band {
  text-align: center;
}

.lp-cta-band .lp-h2 {
  margin-bottom: 12px;
}

.lp-question-pair {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.lp-question-pair div {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 16px 18px;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--ivory);
}

.lp-cta-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.lp-btn-outline {
  display: block;
  padding: 14px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  background: var(--white);
  color: var(--espresso);
  font-family: var(--font-mincho);
  font-size: var(--fs-2);
  font-weight: 600;
  text-align: center;
}

.lp-contact-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.lp-contact-row a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 10px;
}

.lp-contact-row span {
  font-size: var(--fs-1);
  color: var(--gold);
  font-weight: 600;
}

.lp-contact-row b {
  font-size: var(--fs-1);
  color: var(--espresso);
  font-weight: 600;
}

/* ---- 分類サマリー（1.0〜3.0） ---- */
.lp-classify-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.lp-classify-card {
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 0;
  padding: 18px 14px;
  text-align: center;
}

.lp-classify-card.current {
  background: var(--espresso);
  border-color: var(--espresso);
}

.lp-classify-card.current b,
.lp-classify-card.current strong,
.lp-classify-card.current span {
  color: var(--white);
}

.lp-classify-card b {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-4);
  color: var(--gold);
}

.lp-classify-card strong {
  display: block;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  margin: 4px 0 2px;
}

.lp-classify-card span {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.7;
}

/* ---- テーブル（横スクロール） ---- */
.lp-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 14px;
  border-radius: 0;
  border: 1px solid rgba(42, 35, 29, 0.12);
}

.lp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--fs-1);
}

.lp-table th,
.lp-table td {
  padding: 10px 12px;
  border: 1px solid rgba(42, 35, 29, 0.1);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.lp-table thead th {
  background: var(--espresso);
  color: var(--white);
  font-weight: 500;
}

.lp-table tbody th {
  background: #FBF7EE;
  color: var(--espresso);
  font-weight: 500;
  white-space: nowrap;
}

.lp-table .main {
  background: rgba(184, 150, 90, 0.1);
}

.lp-table thead .main {
  background: var(--gold);
  color: var(--espresso);
}

.lp-table-hint {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.6;
  margin-top: 6px;
}

/* ---- 不安・選ぶ基準の比較 ----
   スマホ：1項目＝1カードの縦積み（従来の見た目を<table>で再現、data-labelを
   見出しとして表示）。PC：横スクロールさせず、1枚の表としてそのまま見せる
   （フォントを小さめにして帯幅に収める） */
.lp-anxiety-table-wrap {
  margin-top: 14px;
}

.lp-anxiety-table {
  width: 100%;
  border-collapse: collapse;
}

.lp-anxiety-table thead {
  display: none;
}

.lp-anxiety-table tr {
  display: block;
  border: 1px solid #6A6562;
  background: var(--white);
  margin-bottom: 14px;
  overflow: hidden;
}

.lp-anxiety-table td {
  display: block;
  border: none;
  padding: 8px 14px;
}

.lp-anxiety-table td + td {
  border-top: 1px solid #6A6562;
}

.lp-anxiety-table td[data-label="不安・避けたい失敗"] {
  background: #6A6562;
  color: var(--white);
  font-family: var(--font-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  padding: 12px 14px;
}

.lp-anxiety-table td:not([data-label="不安・避けたい失敗"])::before {
  content: attr(data-label);
  display: block;
  width: fit-content;
  font-size: 14px;
  font-weight: 600;
  color: var(--espresso);
  background: rgba(184, 150, 90, 0.16);
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.lp-anxiety-table td:not([data-label="不安・避けたい失敗"]) {
  font-size: 14px;
  line-height: 1.7;
  color: var(--espresso);
}

.lp-anxiety-table td strong {
  color: var(--gold);
  font-weight: inherit;
}

/* ---- チェックリスト ---- */
/* チェックリストの全体の見た目は.lp-causal-scrollと揃え、
   チェック部分だけ実際に押せるチェックボックスにする */
.lp-checklist {
  display: block;
  max-width: 680px;
  margin: 40px auto;
  background: var(--ivory);
  border: none;
  padding: 16px 24px;
}

.lp-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(184, 150, 90, 0.4);
  border-radius: 0;
  padding: 14px 0;
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--espresso);
}

.lp-checklist label:last-child {
  border-bottom: none;
}

.lp-checklist input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 3px;
  border-radius: 4px;
  border: 1.5px solid var(--gold);
  background: var(--white);
  cursor: pointer;
}

.lp-checklist input[type="checkbox"]:checked {
  background: var(--gold);
}

.lp-checklist input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

/* ---- フロー（施術の流れ） ---- */
/* 施術の流れ：番号が上端にまたがる角丸カード＋下に続く三角で01〜05をつなぐ */
.lp-flow {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 24px;
}

.lp-flow-card {
  position: relative;
  background: var(--white);
  border-radius: 0;
  padding: 28px 20px 22px;
  text-align: center;
}

.lp-flow-card__no {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--espresso);
  font-family: var(--font-en-serif);
  font-weight: 700;
  font-size: var(--fs-3);
}

.lp-flow-card h3 {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 6px;
}

.lp-flow-card p {
  font-size: var(--fs-1);
  line-height: 1.75;
  color: var(--espresso);
  opacity: 0.8;
  text-align: justify;
}

.lp-flow-card:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 7px solid var(--gold);
}

/* ---- 医師プロフィール ---- */

.lp-doctor-manifesto {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--gold);
  line-height: 1.6;
  margin-bottom: 12px;
}

.lp-doctor-name {
  font-family: var(--font-mincho);
  font-size: var(--fs-5);
  font-weight: 500;
  color: var(--espresso);
}

.lp-doctor-title {
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.75;
  line-height: 1.7;
  margin: 6px 0 14px;
}

.lp-doctor-story {
  background: var(--espresso);
  color: var(--ivory);
  border-radius: 0;
  padding: 22px;
  margin: 16px 0;
}

.lp-doctor-story-main {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  line-height: 1.8;
}

.lp-media-row__body .lp-doctor-story-main {
  color: var(--white);
}

.lp-doctor-story-sub {
  font-size: var(--fs-1);
  line-height: 1.8;
  opacity: 0.85;
  margin-top: 10px;
}

.lp-media-row__body .lp-doctor-story-sub {
  color: var(--ivory);
}

.lp-doctor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.lp-doctor-stats article {
  background: #FBF7EE;
  border-radius: 0;
  padding: 16px 10px;
  text-align: center;
}

.lp-doctor-stats strong {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-2);
  color: var(--espresso);
}

.lp-doctor-stats span {
  display: block;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.65;
  margin-top: 3px;
}

.lp-doctor-pledge {
  margin-top: 16px;
  padding: 18px;
  background: rgba(184, 150, 90, 0.12);
  border-radius: 0;
  font-size: var(--fs-1);
  line-height: 1.85;
  color: var(--espresso);
}

.lp-doctor-line {
  margin-top: 14px;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.6;
  line-height: 1.9;
}

/* ---- メディア掲載 ---- */
.lp-media-grid {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.lp-media-grid article {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 0;
  padding: 14px 16px;
}

.lp-media-grid span {
  font-size: var(--fs-1);
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}

.lp-media-grid strong {
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.5;
}

.lp-text-link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--gold);
  text-decoration: underline;
}

/* 中央揃え・角丸四角のボタン風リンク */
.lp-text-link--btn {
  display: table;
  margin: 12px auto 0;
  padding: 10px 24px;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  color: var(--espresso);
  text-decoration: none;
  font-weight: 600;
}

/* ---- 料金 ---- */
.lp-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.lp-price-card {
  background: var(--white);
  border: 1px solid rgba(42, 35, 29, 0.12);
  border-radius: 0;
  padding: 18px;
}

.lp-price-card span {
  font-size: var(--fs-1);
  color: var(--gold);
  font-weight: 500;
}

.lp-price-card h3 {
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  margin: 4px 0 8px;
  line-height: 1.5;
}

.lp-price-card strong {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--espresso);
}

.lp-price-card small {
  display: block;
  font-size: var(--fs-1);
  color: var(--espresso);
  opacity: 0.6;
  margin-top: 4px;
}

.lp-price-notes {
  margin-top: 14px;
  padding: 14px;
  background: #FBF7EE;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
}

/* ---- リスク（可視・アコーディオンにしない） ---- */
/* 白い箱の中に、チェックリストと同じ見た目（アイボリー地・チェック丸）のリストを収める */
.lp-risk-box {
  margin: 16px 0 0;
  background: var(--white);
  border-radius: 14px;
  padding: 24px;
}

.lp-risk-list {
  max-width: 680px;
  margin: 0 auto;
  background: var(--ivory);
  padding: 4px 24px;
}

.lp-risk-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(184, 150, 90, 0.4);
  font-size: var(--fs-1);
  line-height: 1.8;
  color: var(--espresso);
}

.lp-risk-list li:last-child {
  border-bottom: none;
}

.lp-risk-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- アクセス ---- */
.lp-section--access {
  background: #F3EAD9;
}

.lp-access-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 16px;
}

.lp-access-card {
  padding: 22px 0;
  font-size: var(--fs-1);
  line-height: 1.9;
  color: var(--espresso);
  text-align: center;
}

.lp-access-logo {
  display: block;
  height: 32px;
  width: auto;
  margin: 0 auto 14px;
}

.lp-access-card strong {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--espresso);
  margin-bottom: 8px;
}

.lp-access-card p {
  margin: 0 0 4px;
}

.lp-access-card .lp-text-link--btn {
  margin-top: 12px;
}

.lp-access-map {
  border-radius: 12px;
  overflow: hidden;
  min-height: 240px;
}

.lp-access-map iframe {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  display: block;
}

@media (min-width: 1024px) {
  .lp-access-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .lp-access-map {
    min-height: 320px;
  }

  .lp-access-map iframe {
    min-height: 320px;
  }
}

/* ---- FAQ ---- */
.lp-faq {
  margin-top: 14px;
  border-radius: 10px;
  border: 1px solid rgba(42, 35, 29, 0.12);
  background: var(--white);
  overflow: hidden;
}

.lp-faq + .lp-faq {
  margin-top: 10px;
}

.lp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--espresso);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

.lp-faq summary::before {
  content: "Q.";
  flex-shrink: 0;
  color: var(--gold);
  font-family: var(--font-mincho);
  font-weight: 700;
}

.lp-faq-q {
  flex: 1;
}

.lp-faq summary i {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-style: normal;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lp-faq summary i svg {
  width: 18px;
  height: 18px;
}

.lp-faq[open] summary i {
  transform: rotate(180deg);
}

.lp-faq[open] summary {
  border-bottom: 1px solid rgba(42, 35, 29, 0.1);
}

.lp-faq p {
  padding: 12px 16px 16px;
  font-size: var(--fs-1);
  line-height: 1.85;
  color: var(--espresso);
  opacity: 0.85;
}

/* ---- 最終CTA ---- */
.lp-final-title {
  font-family: var(--font-mincho);
  font-size: var(--fs-6);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--espresso);
  text-align: center;
  margin: 14px 0;
}

.lp-section--dark .lp-final-title {
  color: var(--white);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.lp-fit-check {
  margin-top: 24px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 0;
}

.lp-fit-check h3 {
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--espresso);
  text-align: center;
  margin-bottom: 14px;
}

.lp-section--dark .lp-fit-check {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.lp-section--dark .lp-fit-check h3 {
  color: var(--white);
}

.lp-fit-cols {
  display: grid;
  gap: 12px;
}

.lp-fit-mini {
  background: var(--ivory);
  border-radius: 0;
  padding: 16px 18px;
}

.lp-fit-mini strong {
  display: block;
  font-size: var(--fs-1);
  color: var(--gold);
  margin-bottom: 6px;
}

.lp-fit-mini ul,
.lp-fit-mini p {
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.85;
  padding-left: 1.1em;
}

.lp-section--dark .lp-fit-mini {
  background: rgba(255, 255, 255, 0.16);
}

.lp-section--dark .lp-fit-mini ul,
.lp-section--dark .lp-fit-mini p {
  color: var(--ivory);
}

.lp-fit-mini p {
  padding-left: 0;
}

.lp-fit-summary {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  color: var(--gold);
  line-height: 1.7;
}

.lp-final-emotion {
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  line-height: 1.9;
  color: var(--ivory);
  opacity: 0.9;
  margin: 0 0 12px;
}

.lp-final-emotion strong {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--fs-4);
  font-weight: 500;
  color: var(--gold);
}

/* ---- footer ---- */
.lp-footer {
  background: var(--espresso);
  color: rgba(246, 241, 231, 0.6);
  text-align: center;
  font-size: var(--fs-1);
  line-height: 1.8;
  padding: 24px 12px 90px;
}

/* ---- スクロールヒントリンク ---- */
.lp-scroll-hook {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-mincho);
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--gold);
}

/* ---- 区切り（次の問いへのブリッジ） ---- */
.lp-bridge {
  font-size: var(--fs-1);
  /* opacityではなくrgbaで薄くする。opacityだと中のstrongまで薄まり、
     図解キャプション（.lp-diagram-cap）と同じ言い回しの箇所で
     文字の濃さ・太さがちぐはぐに見えるため */
  color: rgba(42, 35, 29, 0.8);
  line-height: 1.8;
  margin-top: 10px;
}

/* 強調部分は.lp-term（美乳ルールなど）と同じゴールドに揃える。
   今後、本文中の強調はこのゴールドを標準として使う方針 */
.lp-bridge strong {
  color: var(--gold);
  font-weight: 500;
}

/* 下乳・外乳・高さ・バージスラインの4用語イラスト */
.lp-diagram-illustration {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
}

.lp-section--dark .lp-bridge {
  color: rgba(246, 241, 231, 0.8);
}

.lp-section--dark .lp-bridge strong {
  color: var(--gold);
}

/* ==========================================================================
   PC・タブレット対応：コンテンツ幅バンド＋横並びグリッド化＋余白の統一
   ------------------------------------------------------------------------
   注意：.lp-section／.lp-h2／.lp-lead等の元の定義はこのファイル内にあり、
   style.cssより後に読み込まれる。PC用の上書きは、必ずこのファイルの
   （元の定義より後の）ここに書くこと（cssカスケードの詳細度が同じ場合、
   「後に読み込まれるこちらのファイル」が常に勝つため）。

   幅の基準は2種類だけに統一する（参考：bellmonaclinic.com/special/の
   余白・幅の使い方）：
   　・帯幅  1160px …… セクション全体／カード・グリッド・横並び写真など
   　・文章幅 680px  …… 見出し・リード文・本文・単独カードなど「読ませる」要素
   これ以外の半端な幅（420/640/720/760/800/900/1280pxなど）は使わない。
   グリッド・横並び写真は「帯」の中に収まるので追加のmax-widthは指定しない
   （.lp-sectionのpaddingで既に1160に収まっているため）。

   先方支給のスマホ解像度画像（章タイトル画像・3Dデータ図解）だけは例外。
   帯まで引き伸ばすとぼやけるので、当面は控えめな固定幅にとどめる。
   PC専用に書き出し直す場合の目安サイズは、このファイル末尾のコメント参照。
   ========================================================================== */
@media (min-width: 1024px) {
  /* ---- コンテンツ帯：1160px ---- */
  .lp-section,
  .lp-footer {
    padding-left: max(24px, calc((100% - 1160px) / 2));
    padding-right: max(24px, calc((100% - 1160px) / 2));
  }

  /* スマホ幅では改行させたいが、PC幅では1行で見せたい箇所用の改行 */
  .lp-br-sp {
    display: none;
  }

  .lp-br-pc {
    display: inline;
  }

  /* ---- セクション同士・見出しと本文の間の余白を統一して広げる ---- */
  .lp-section {
    padding-bottom: 88px;
  }
  .lp-section:has(+ .lp-section--grouped) {
    padding-bottom: 44px;
  }
  .lp-chapter-eyebrow,
  .lp-eyebrow,
  .lp-eyebrow-plain {
    margin-bottom: 20px;
  }
  .lp-eyebrow-plain {
    margin-bottom: 40px;
  }
  .lp-h2 {
    margin-bottom: 24px;
  }
  .lp-lead {
    margin-bottom: 28px;
  }
  /* 「自然なバストが大きくなる方向を...」は前後の余白が広すぎるので、
     このセクションだけ少し詰める */
  #beauty-rules .lp-lead {
    margin-top: 0;
    margin-bottom: 12px;
  }
  .lp-card,
  .lp-mission-band,
  .lp-quote-box,
  .lp-thought,
  .lp-dual-grid {
    margin-top: 36px;
  }
  .lp-note {
    margin-top: 36px;
  }

  /* 症例集セクションの注記だけ、上の余白が不自然に広く見えるための例外調整
     （#all-publication-cases自体は確定済みだが、ここだけ余白のみ例外で詰める） */
  #all-publication-cases .lp-note {
    margin-top: 10px;
  }

  .lp-question-banner {
    margin-bottom: 36px;
  }

  /* POINTボックスは文章幅（680px）に揃えて中央寄せし、中の文章は明朝体にする。
     下の余白も他要素と合わせて詰める。見た目（背景色・枠なし）も
     .lp-mission-bandの標準スタイルに統一する（見出し下の囲みボックスは
     すべてこの見た目に揃える方針） */
  .lp-quote-box {
    width: 1160px;
    max-width: 100%;
    margin-bottom: 0;
    padding: 32px 48px;
    background: rgba(184, 150, 90, 0.12);
    border: none;
  }

  /* ミッションバンドはPOINTボックス（.lp-quote-box）と全く同じ見た目に統一：
     幅・パディング・角丸・枠なし・クリーム背景。暗いセクションだけは、
     同じクリーム系でも読みやすいよう不透明度を上げた地色にする */
  .lp-mission-band {
    width: 1160px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 48px;
    border: none;
    background: rgba(184, 150, 90, 0.12);
  }
  .lp-mission-band strong,
  .lp-mission-band p {
    color: var(--espresso);
  }

  /* ダーク背景セクションでは囲みボックスをやめて、文字だけ白で見せる */
  .lp-section--dark .lp-mission-band {
    background: none;
    padding: 0;
  }
  .lp-section--dark .lp-mission-band strong,
  .lp-section--dark .lp-mission-band p {
    color: var(--ivory);
  }

  /* ---- 見出しは680pxの固定文章幅を使わず、テキスト自身の幅に合わせて可変させる
     （短い見出しが不要に折り返されるのを防ぐ。長い見出しは900px上限で折り返す） ---- */
  .lp-h2 {
    width: fit-content;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-lead,
  .lp-bridge,
  .lp-note,
  .lp-thought {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 見出しの手動改行（<br>）はスマホの行数調整用なので、PCでは無効化し、
     680px幅の中で自然に折り返す（短い見出しは1行表示になってよい） */
  .lp-h2 br {
    display: none;
  }

  .lp-quote-box + .lp-h2 {
    margin-top: 40px;
  }

  /* 章タイトル画像：先方支給のスマホ解像度画像を暫定利用中。
     PC専用画像に差し替える場合は、このファイル末尾の目安サイズ参照 */
  .lp-chapter-title-img {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 症例ギャラリーの写真は「文章幅」のコンパクトなカードに収める */
  .lp-case-body {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 谷間・デコルテのレッスン画像（S1_Lesson01/02.jpg）は2枚1組。
     帯（1160px）の中で左右に並べる（追加のmax-widthは指定しない） */
  .lp-lesson-grid--image {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* 3Dデータの図解：PC専用の横並び4分割画像（PC_diagram-4data.png／
     PC_diagram-4eye.png、<picture>で出し分け）に差し替え済みのため、
     帯に近い幅まで広げて4項目を横一列で見せる */
  .lp-diagram-illustration {
    max-width: 1000px;
    margin-top: 36px;
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
  }

  /* このセクションはリード文・説明文(.lp-bridge)・4分割イラスト・
     図解カードが詰まって見えるので、PCでは要素間の余白を広めに取る */
  .lp-bridge {
    margin-top: 36px;
  }
  .lp-diagram-figure {
    margin-top: 36px;
  }

  /* 「横から見ると／正面から見ると」のSVG図解2枚は、PCでは横並びにする。
     下の4分割イラスト（.lp-diagram-illustration、幅1000px）と中心・幅を
     揃え、2枚のカードは高さも揃える（align-items:stretch） */
  .lp-diagram-figure {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
  }
  .lp-diagram-figure > :not(.lp-diagram-wrap) {
    grid-column: 1 / -1;
  }
  .lp-diagram-wrap + .lp-diagram-wrap {
    margin-top: 0;
    padding-top: 0;
    padding-left: 32px;
    border-top: none;
    border-left: 1px solid rgba(42, 35, 29, 0.12);
  }
  .lp-diagram-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  /* 2枚の図解でSVGの高さが違っても、下のキャプションの位置を揃える */
  .lp-diagram-svg-cap {
    margin-top: auto;
    padding-top: 8px;
  }
  .lp-diagram-wrap svg {
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  /* グループ化されていない単独の.lp-card（5D注入法のカニューレ、
     大量注入リスクのヒストグラムなど）は「文章幅」に収める */
  /* 5D注入法のカニューレ写真・大量注入リスクのヒストグラムは、写真を
     大きく見せたいカードなので、帯幅（1160px）いっぱいまで広げる
     （追加のmax-widthは指定しない＝.lp-sectionの帯にそのまま従う） */

  /* 最終CTA・モニター募集バンドは「文章幅」に統一。
     医師プロフィールは.lp-media-row（画像＋本文の2カラム）を導入したため、
     この一律680px指定からは外し、下の個別ルールに揺だねる。
     FVと同じ画像ボタン2つの並び（.fv-pc__ctas）は680pxに収まらないため、
     こちらも対象から外し、帯幅（1160px）いっぱいを使わせる */
  #final > :not(.fv-pc__ctas):not(.lp-final-letter),
  #monitor > :not(.fv-pc__ctas) {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 医師プロフィールの.lp-media-rowは帯幅（1160px）いっぱいに広げ、
     その下の統計・誓い・経歴だけを「文章幅」に揃える */
  #doctor > .lp-doctor-stats,
  #doctor > .lp-doctor-pledge,
  #doctor > .lp-doctor-line {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* .lp-photoはwidth:100%+aspect-ratio指定のプレースホルダーのため、
     上の680px一律指定のままだと縦に間延びしてしまう。個別に上限を絞る */
  #final > .lp-photo {
    max-width: 480px;
  }

  /* ---- 美乳ルール3原則（#beauty-rules）：バラ置きの.lp-cardを3カラム化 ---- */
  #beauty-rules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    row-gap: 0;
    align-items: stretch;
    /* CSSグラデーションは安っぽく見えるためやめ、質感のある背景写真に変更。
       写真の上に控えめな暗いグラデーションを重ね、白文字の可読性を確保する */
    background-image:
      linear-gradient(rgba(20, 12, 6, 0.55), rgba(20, 12, 6, 0.7)),
      url("assets/bg-br-01.jpg");
    background-size: cover;
    background-position: center;
  }
  #beauty-rules > :not(.lp-promise-card) {
    grid-column: 1 / -1;
  }
  /* Gridはmarginを相殺しないため、画像の下マージンと重複する分を消す */
  #beauty-rules .lp-eyebrow-plain {
    margin-top: 0;
  }
  /* カード上辺からはみ出す丸いエンブレムが、上のブリッジ文とくっつかないよう
     カードの上に少し余白を足す（#question3も同じくGrid化＋画像見出しなので
     同じ理由で同じ余白が必要） */
  #beauty-rules .lp-promise-card,
  #question3 .lp-promise-card {
    margin-top: 100px;
  }
  .lp-promise-head--image img {
    width: 80%;
  }
  #beauty-rules .lp-promise-body {
    padding-top: 145px;
  }

  /* beyond-retentionは、ブラウン背景の使用箇所を減らす方針により明るいセクションへ
     変更したため、ここでの暗い質感背景の上書きは廃止した。
     #monitor・#flow（施術の流れ）・#final（院長より）は元の質感背景に戻している。
     #finalは#flowと同じ画像で章としての一体感を出す。
     #question3（PROMISE｜当院の約束）は、直後の#monitorも同じ「PROMISE」の
     続きなので、同じ背景画像を使って一つの章に見えるようにする。 */
  #monitor,
  #question3 {
    background-image:
      linear-gradient(rgba(20, 12, 6, 0.55), rgba(20, 12, 6, 0.72)),
      url("assets/bg-br-06.jpg");
    background-size: cover;
    background-position: center;
  }
  #flow,
  #final {
    background-image:
      linear-gradient(rgba(20, 12, 6, 0.6), rgba(20, 12, 6, 0.72)),
      url("assets/bg-br-02.jpg");
    background-size: cover;
    background-position: center;
  }

  /* 明るいセクションのうち、単調になりやすい2箇所にごく控えめな質感を
     重ねる（アイボリーと強くブレンドして、本文の邪魔にならない程度に） */
  #generation-comparison {
    background-image:
      linear-gradient(rgba(246, 241, 231, 0.92), rgba(246, 241, 231, 0.92)),
      url("assets/bg-soft-01.jpeg");
    background-size: cover;
    background-position: center;
  }
  #media {
    background-image:
      linear-gradient(rgba(251, 247, 238, 0.9), rgba(251, 247, 238, 0.9)),
      url("assets/bg-soft-02.jpeg");
    background-size: cover;
    background-position: center;
  }

  /* カードの見た目自体は.lp-promise-cardの共通スタイルに揃えたので、
     ここでは写真の位置だけ下寄せにして3枚の高さ差を吸収する */
  #beauty-rules .lp-promise-card .lp-photo {
    margin-top: auto;
  }

  /* ---- 定着率を超えた脂肪豊胸3.0（#beyond-retention）：3枚の.lp-axis-cardを3カラム化 ---- */
  #beyond-retention {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
  }
  #beyond-retention > :not(.lp-axis-card) {
    grid-column: 1 / -1;
  }
  #beyond-retention .lp-axis-card + .lp-axis-card {
    margin-top: 0;
  }

  /* ---- 当院の約束（#question3）：3枚の.lp-promise-cardを3カラム化・縦長カードに戻す ---- */
  #question3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    row-gap: 0;
    align-items: stretch;
  }
  #question3 .lp-eyebrow-plain {
    margin-top: 0;
  }
  #question3 .lp-lead {
    margin-top: 0;
  }
  #question3 > :not(.lp-promise-card) {
    grid-column: 1 / -1;
  }
  .lp-promise-note {
    margin-top: auto;
  }

  /* ---- 脂肪豊胸1.0〜3.0（4項目）：2列→4列 ---- */
  .lp-classify-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* ---- 不安・選ぶ基準の比較：PCでは横スクロールさせず、1枚の表として
     帯幅（1160px）にきっちり収める。文字を小さめ（13px）にして、
     table-layout:fixedで折り返しに任せる ---- */
  .lp-anxiety-table-wrap {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #6A6562;
    border-radius: 10px;
    overflow: hidden;
  }
  .lp-anxiety-table {
    table-layout: fixed;
  }
  .lp-anxiety-table thead {
    display: table-header-group;
  }
  .lp-anxiety-table tr {
    display: table-row;
    border: none;
    margin-bottom: 0;
  }
  .lp-anxiety-table th,
  .lp-anxiety-table td {
    display: table-cell;
    border: 1px solid #6A6562;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    vertical-align: top;
  }
  .lp-anxiety-table th:nth-child(1),
  .lp-anxiety-table td:nth-child(1) {
    width: 15%;
  }
  .lp-anxiety-table th:nth-child(2),
  .lp-anxiety-table td:nth-child(2),
  .lp-anxiety-table th:nth-child(3),
  .lp-anxiety-table td:nth-child(3),
  .lp-anxiety-table th:nth-child(4),
  .lp-anxiety-table td:nth-child(4) {
    width: 28.33%;
  }
  .lp-anxiety-table thead th {
    background: #6A6562;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
  }
  .lp-anxiety-table td[data-label="不安・避けたい失敗"] {
    background: #FBF7EE;
    color: var(--espresso);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
  }
  .lp-anxiety-table td:not([data-label="不安・避けたい失敗"])::before {
    content: none;
  }

  /* ---- メディア掲載（15件）：1列→3列 ---- */
  .lp-media-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* ---- 成功の3軸（3枚）：1列→3列。結論行はカード下部の同じ位置に揃える ---- */
  .lp-axis-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .lp-axis-card .lp-big {
    margin-top: auto;
  }

  /* タイトルが1行のカードと2行のカードが混在しても、本文の書き出し位置が
     揃うよう、見出しの高さを2行分で固定する（3枚とも同じ.lp-axis-cardが対象） */
  .lp-axis-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--fs-3) * 1.5 * 2);
  }

  /* ---- 料金（6プラン）：2列→3列 ---- */
  .lp-price-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* ---- 大量注入のリスク（3D評価／エコー、2枚）：1列→2列 ---- */
  .lp-dual-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* ---- 施術の流れ：縦積みのタイムラインのまま、文章幅に収める
     （下向き矢印の接続デザインのため、横並びグリッド化はしない） ---- */
  .lp-flow {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- FAQ：横スクロール事故防止のため単カラムのまま、文章幅に収める ---- */
  .lp-section:has(> .lp-faq) > .lp-faq {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- POINTボックス：文字を中央揃えに ---- */
  .lp-quote-box {
    text-align: center;
  }

  /* ---- 美乳ルール1・2・3の写真キャプション：中央揃え＋ゴールド文字に ---- */
  #beauty-rules .lp-promise-card .lp-photo-caption {
    text-align: center;
    color: var(--gold);
  }

  /* ---- 変化の4段階（LEVEL1〜4）：縦積み→横並び4カード ----
     「LEVEL n」「タイトル」「本文」の3段を、サブグリッドで4枚のカード
     すべてに共通の行として扱う。行の高さはその行の中で一番背の高い
     カードに揃うので、タイトルの行数が違っても本文の書き出し位置が
     自動的に揃う（min-heightの手動計算に頼らない） */
  .lp-levels {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 16px;
  }
  .lp-level {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    text-align: center;
  }
  .lp-level__content {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / span 2;
  }
  .lp-level__title {
    font-weight: 700;
    align-self: start;
    justify-self: center;
  }
  .lp-level__body {
    text-align: justify;
  }

  /* ---- シリコン vs 脂肪：1列→2列 ---- */
  .lp-compare {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- 見出しの太さを一段階落とす（600→500、700→600） ---- */
  .lp-h2,
  .lp-h3-standalone,
  .lp-chapter-title {
    font-weight: 500;
    margin: 30px auto;
  
  }

  /* ---- 症例ギャラリー：PCでは2枚ずつ横並び（スマホは1枚ずつのまま） ---- */
  #all-publication-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
  }
  #all-publication-cases > :not(.lp-case) {
    grid-column: 1 / -1;
  }

  /* ---- モニター募集の質問文：枠を外し、問いかけの雰囲気を出す ---- */
  .lp-question-pair {
    gap: 14px;
  }
  .lp-question-pair div {
    background: transparent;
    border: none;
    border-left: 3px solid var(--gold);
    border-radius: 0 10px 10px 0;
    font-family: var(--font-mincho);
    font-size: var(--fs-2);
    padding: 10px 16px;
  }

  /* ---- まず相談する／電話で相談／LINEで相談：FVボタン風の見た目に
     （新しい画像が届くまでのCSS仮実装） ---- */
  .lp-btn-outline {
    background: var(--white);
    border-width: 2px;
    padding: 16px 12px;
    font-size: var(--fs-3);
    box-shadow: 0 6px 16px rgba(42, 35, 29, 0.12);
  }
  .lp-contact-row a {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 14px 16px;
    border: none;
  }
  .lp-contact-row a:first-child {
    background: var(--gold);
  }
  .lp-contact-row a:first-child span,
  .lp-contact-row a:first-child b {
    color: var(--espresso);
  }
  .lp-contact-row a:last-child {
    background: #06C755;
  }
  .lp-contact-row a:last-child span,
  .lp-contact-row a:last-child b {
    color: var(--white);
  }
  .lp-contact-row span,
  .lp-contact-row b {
    font-size: var(--fs-2);
  }

  /* ---- モニター審査に応募するボタン：FVで使った画像ボタンを再利用し、
     テキスト幅程度のサイズに収める（テキストは読み上げ用に残し、
     視覚的には画像に置き換える） ---- */
  .btn--primary {
    width: 320px;
    aspect-ratio: 750 / 123;
    max-width: 100%;
    padding: 0;
    background-image: url("assets/cv-button-monitor.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    box-shadow: none;
  }
  .btn--primary .btn__main {
    visibility: hidden;
  }
  .lp-cta-pair .btn--primary,
  p > .btn--primary {
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- 脂肪豊胸1.0〜3.0の比較表：文字を少し小さくし、帯幅いっぱいまで
     使えるようにして横スクロールが起きにくいようにする ---- */
  .lp-disclosure {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-table {
    font-size: 13px;
  }

  /* ---- 6つの質問チェックリスト：中央寄せ ---- */
  .lp-checklist {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- 最終セクション：院長からの手紙風カード（白背景・文章幅） ---- */
.lp-final-letter {
  max-width: 1160px;
  margin: 24px auto 0;
  background: var(--white);
  border-radius: 14px;
  padding: 48px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.lp-final-letter__inner {
  max-width: 680px;
  margin: 0 auto;
}

.lp-final-letter .lp-mission-band {
  background: none;
  padding: 0;
  width: auto;
}

.lp-final-letter .lp-mission-band strong,
.lp-final-letter .lp-mission-band p {
  color: var(--espresso);
}

.lp-final-letter .lp-h2 {
  color: var(--espresso);
  font-family: var(--font-mincho);
  font-size: var(--fs-3);
  font-weight: 500;
  letter-spacing: normal;
}

.lp-final-letter .lp-final-title {
  color: var(--espresso);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 32px 0;
}

.lp-final-letter .lp-lead {
  color: var(--espresso);
  opacity: 1;
  font-size: 16px;
  line-height: 1.9;
  text-align: left;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.7em,
    rgba(184, 150, 90, 0.35) 1.7em,
    rgba(184, 150, 90, 0.35) calc(1.7em + 1px),
    transparent calc(1.7em + 1px),
    transparent 1.9em
  );
}

/* ==========================================================================
   PC用画像を新規に書き出す場合の目安サイズ
   ------------------------------------------------------------------------
   スマホ用（変更なし・従来通り）：
   　表示幅 351px（.lp-sectionの左右padding 12pxを引いた幅）
   　書き出し推奨：700〜750px（2倍解像度）
   PC用（新規）：
   　・帯いっぱいに使う横並び画像（例：4つのイラストを横1列に並べた版）
   　　表示幅 1160px　書き出し推奨：2320px（2倍解像度）
   　・単体の説明画像・写真など、本文と同じ幅で収めたいもの
   　　表示幅  680px　書き出し推奨：1360px（2倍解像度）
   PC専用画像が届いたら、<picture>タグで
   　<source media="(min-width: 1024px)" srcset="assets/pc/xxx.png">
   のようにモバイル画像と出し分ける形に差し替える（このコメントは
   実装時の備忘のため、現時点でHTMLは変更していない）。
   ========================================================================== */