/* ============================================================
   EXP-167 マタニティ新LP — マタ・トンマナ override + 構造補完
   洋装 yuen-flow-v2.css の上に重ねる。body.mat-flow スコープ限定。
   🔴 maternity 新LP は maternity.css のみで main.css 非読込 → main.css 由来の
   構造(s-trust-badge の flex 等)が欠落する。和装 nagi-flow.css の構造補完+
   福田QA調整を マタ用(やわらかいローズ・FV 4:3)に翻案移植する。
   色は「やわらかいマタニティ・ローズ」で統一(洋装デコルテrose上に重ねる)。
   🔴 ハンド管理CSS(Viteビルド対象外)。npm run build 後に git 復元し個別rsync。
   ============================================================ */
body.mat-flow{
  --mat-accent:#c76b83;    /* やわらかいマタニティ・ローズ = 主アクセント */
  --mat-accent-d:#a94f68;  /* 濃ローズ = 見出し/価格 */
  --mat-gold:#c99a7e;      /* 温かいサブアクセント(ベージュローズ) */
  --mat-bg:#fbf3f4;        /* 淡いローズ = セクション地色 */
  --mat-bg2:#f6e9ec;
  --mat-ink:#4a3a3e;       /* 温かい墨(ローズ寄りチャコール) = 見出し */
}

/* --- FV: マタ実写は 1080x1350 = 4:5 縦長(和装と同比率)。枠も 4:5 にして
       object-fit:cover でもトリミングされないようにする(旧 4:3 は上下が見切れる原因) --- */
body.mat-flow .s-concept,
body.mat-flow .s-concept_inner,
body.mat-flow .s-concept_display,
body.mat-flow .s-concept_display_list,
body.mat-flow .s-concept_display_slide{ height:auto !important; aspect-ratio:auto !important; }
body.mat-flow .s-concept_display_image{
  width:100% !important; height:auto !important; aspect-ratio:4/5;
  object-fit:cover; display:block;
}

/* --- コンセプト見出し(YUEN MATERNITY = Cinzel) --- */
body.mat-flow .lp-fair__title{ font-weight:500; letter-spacing:.08em; color:var(--mat-ink); }
body.mat-flow .lp-sect-title{ color:var(--mat-ink); }
body.mat-flow .lp-fair__title-sub,
body.mat-flow .lp-sect-sub,
body.mat-flow .yf-report__caption{ color:var(--mat-gold); letter-spacing:.08em; }

/* --- ハイライト(マタ・ローズ): copy は .lp-mat を使用。洋装 .lp-pink も同色へ --- */
body.mat-flow .lp-mat,
body.mat-flow .lp-pink{ color:var(--mat-accent-d); font-weight:700; }

/* --- セクション背景(洋装の薄ピンク → やわらかい淡ローズ) --- */
body.mat-flow .lp-bg--pink{ background:var(--mat-bg); }
/* 本体左右余白(main背景)を淡ローズに(洋装の生成りでなくマタ) --- */
/* 🔴 旧テーマの main.maternity{padding-top:60/80/100px}(固定 mat-header 回避用)を
   ゼロ化。新LPは mat-header 抑制+c-header 浮遊ヘッダー(最上部で yf-hide)ゆえ
   この余白があると FV が下がり上端に隙間+見切れが出る。洋装/和装と同じく全幅化。 */
body.mat-flow main.maternity{ background-color:var(--mat-bg2) !important; padding-top:0 !important; }

/* --- 本文の word-break: 文節1単位送りで行末余白を残す auto-phrase を normal に(充填・福田QA) --- */
body.mat-flow .lp-point__item-text,
body.mat-flow .lp-flow__item-desc,
body.mat-flow .lp-flow__item-note,
body.mat-flow .lp-voice__item-comment,
body.mat-flow .lp-memorial__text{ word-break:normal; text-align:left; }

/* --- 選ばれる理由(lp-point): 左寄せ/カード余白/lead余白(福田QA) --- */
body.mat-flow .lp-point__item-text{ text-align:left; }
body.mat-flow .lp-point__item-text:has(a.yf-store-link){ text-align:left; }
/* 見出しは洋装(要素)に合わせる=中央寄せ/中太(500)。マタは理由コピーが洋装より長く
   18pxだと1行に収まらず折返す(福田「1行で収まるはずが2行」)→ 16px に微調整で大半が1行に。
   最長の「専門スタジオ」だけは自然折返し2行(旧<br>強制でなく文節境界の綺麗な折返し)。 */
body.mat-flow .lp-point__item-title{ text-align:center; font-size:16px; line-height:1.45; letter-spacing:.4px; color:var(--mat-ink); }
/* 選ばれる理由の見出しピル(lp-point__title)をマタ・ローズに */
body.mat-flow .lp-point__title{ background-color:var(--mat-accent) !important; }
/* 🔴 洋装(main.css)は `h1..h6{font-weight:inherit}` リセットで .lp-point__title が親の 400 で描画されるが、
   maternity.css にこのリセットが無く <h2 class="lp-point__title"> が browser 既定の bold(700)になり
   洋装と font感 が異なっていた(福田指摘)。洋装と同じく font-weight:400 に合わせる(他プロパティは
   yuen-lp-b 基底=Hiragino Sans 14px/letter-spacing .7px/line-height 1 をそのまま継承)。 */
body.mat-flow .lp-point__title{ font-weight:400; }
/* lead(リード文): 洋装(要素)の余白感に寄せる。下マージンを 56→36 に詰め、
   段落間は <br class="lp-lead-sep"> を display:block+margin-top で制御(旧 <br><br> の空1行は開きすぎ)。 */
body.mat-flow .lp-point__lead{ margin-top:2px; margin-bottom:36px; }
body.mat-flow .lp-point__lead br.lp-lead-sep{ display:block; content:""; margin-top:.7em; }
body.mat-flow .lp-point__item{ padding-top:16px !important; }
/* 本文内リンク(プランへ 等)=本文と区別(ローズ+下線) --- */
body.mat-flow .yf-store-link,
body.mat-flow .lp-plans__feature-link{ color:var(--mat-accent-d); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* --- 料金プラン + ご利用時のポイント: 洋装(要素)と「全く同じ実装・デザイン」に合わせる(福田指示 2026-07-16)。
   マタ独自の override(全ローズの per-plan 色 / features リスト / notice リスト)を撤去し、共有ベース
   yuen-flow-v2.css を継承する:
     ・プラン別色 = STANDARD ローズ#b04b62 / PREMIUM 金#a07c2c / LIGHT ティール#2f6875(name/price/border/spec地)
     ・lp-plans__spec(「お時間◯分 ／ 衣装」ピル)+ lp-plans__bringown(「＋…」1行)= 洋装と同一構造
     ・yf-notice__desc(「※…<br>」)+ yf-notice__swatches(背景紙9色スウォッチ)= 洋装と同一
   マタだけ色/意匠を変えたくなった時のみ、ここに body.mat-flow スコープで override を足す。 --- */
/* bringown はマタだけ複数行(パートナー衣装/シール/私服持込)。各行の間に余白を入れる
   (洋装 bringown は1行=<br>無しゆえ無影響)。<br> を display:block+margin-top で制御。 */
body.mat-flow .lp-plans__bringown br{ display:block; content:""; margin-top:.4em; }

/* ご利用時のポイント/注意点: ※注記を「ぶら下げリスト」にする(福田指示 2026-07-17)。
   洋装/和装は yf-notice__desc(<p>+<br>)ゆえ長い※行の折返しが ※ の真下に回り込む。
   マタは yf-notice__list(<ul><li>)に変え、※を ::before で置き先頭固定+本文を padding-left、
   折返し行が本文位置に揃う(=※の下に文字が回り込まない)。フォント/行間は yf-notice__desc と同値。 */
body.mat-flow .yf-notice__list{ list-style:none; margin:0; padding:0; font-family:var(--yf-gothic); font-size:12px; line-height:1.95; letter-spacing:.02em; color:var(--yf-ink); text-align:left; }
body.mat-flow .yf-notice__list li{ position:relative; padding-left:1.4em; }
body.mat-flow .yf-notice__list li::before{ content:"※"; position:absolute; left:0; top:0; }

/* --- ご利用の流れ: ラベルの nowrap はみ出し回避+説明文の余白(福田QA) --- */
body.mat-flow .lp-flow__item-label{ white-space:normal !important; padding-right:8px; }
body.mat-flow .lp-flow__item-dur{ display:inline-block; white-space:nowrap; font-size:11px; }
body.mat-flow .lp-flow__item-desc{ font-size:13px; line-height:1.75; letter-spacing:0.4px; margin-bottom:1.3em; }
body.mat-flow .lp-flow__item-note{ display:block; margin-top:1em; font-size:11.5px; line-height:1.7; }
/* 流れ内「予約ページ/公式LINE」= モーダル起動リンク(福田指示 2026-07-17)。lp-mat ローズ強調のまま
   下線+ポインタで可クリックを示す(maternity.ts が .js-maternity-reserve/line にモーダル開閉を配線)。 */
body.mat-flow .lp-flow__link{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; cursor:pointer; }

/* --- お悩み: 洋装(要素)と「全く同じ色」にする(福田指示 2026-07-16)。
   共有ベース yuen-flow-v2.css の `body.lp-b .lp-worry,.lp-worry__bridge{ background:#9dbdcd }`
   (お悩みティール=やわらかいブルー)+ `.lp-worry__q{ #e8eef4 / #59839e }` を mat-flow で
   上書きせず継承する(=洋装と自動同期。洋装の色調整がそのままマタにも反映される)。
   ※以前のローズ/ラベンダー override は撤去。マタだけ色を変えたくなった時のみここに override を足す。 --- */
/* 🔬 お悩み帯 色 A/B(EXP-167 maternity_worry_color・福田指示 2026-07-16):
   control = yousou = 上記の #9dbdcd 継承(無 override) / variant = lavender = 明るめラベンダー #b3b8da。
   出し分け body class は fv-ab-test.php(exp-maternity_worry_color-{variant})。終了時はこのブロックと
   fv-ab-test.php 登録 + maternity.ts の impression を同時に外す。 */
body.mat-flow.exp-maternity_worry_color-lavender .lp-worry,
body.mat-flow.exp-maternity_worry_color-lavender .lp-worry__bridge{ background:#b3b8da !important; }
body.mat-flow.exp-maternity_worry_color-lavender .lp-worry__q{ background:#edeef7 !important; color:#5f6499 !important; }

/* --- お客様の声: 星は落ち着いたローズゴールド/見出しは濃ローズ --- */
body.mat-flow .yf-stars{ color:#d3a15f; }
body.mat-flow .lp-voice__item-title{ color:var(--mat-accent-d); }

/* --- ベリーアート(lp-memorial 流用): ラベルをマタ・ローズ --- */
body.mat-flow .lp-memorial__label{ color:var(--mat-accent-d); }

/* --- ベリーアート(lp-belly): 元LP belly-art を新意匠で再現。作例画像+badge+説明+リスト(福田指示 2026-07-17)。
   フォトギャラリー直上に配置。BELLY ART=lp-sect-sub / お腹に飾る…=lp-sect-title(共有)。 --- */
body.mat-flow .lp-belly{ padding:44px 20px 8px; }
body.mat-flow .lp-belly__image{ display:block; width:100%; height:auto; border-radius:12px; margin:6px 0 22px; }
body.mat-flow .lp-belly__name{ font-family:var(--yf-mincho); font-weight:500; font-size:19px; color:var(--mat-ink); margin:0 0 10px; text-align:left; }
body.mat-flow .lp-belly__badge{ display:inline-block; background:var(--mat-accent); color:#fff; font-family:var(--yf-gothic); font-size:11.5px; font-weight:700; letter-spacing:1px; padding:4px 14px; border-radius:999px; margin:0 0 14px; }
body.mat-flow .lp-belly__desc{ font-size:13px; line-height:1.9; letter-spacing:.3px; color:var(--mat-ink); text-align:left; margin:0 0 14px; }
body.mat-flow .lp-belly__list{ list-style:none; margin:0; padding:0; }
body.mat-flow .lp-belly__list li{ position:relative; padding-left:1.1em; font-size:12.5px; line-height:1.85; color:var(--mat-ink); text-align:left; }
body.mat-flow .lp-belly__list li::before{ content:"・"; position:absolute; left:0; color:var(--mat-accent); }

/* --- 関連サービス: ラベル/YUENカード(洋装FV=1:1正方形)thumb正方形化 --- */
body.mat-flow .yf-related__label{ color:var(--mat-gold); }
body.mat-flow .yf-related__item--yuen .yf-related__thumb{ aspect-ratio:1/1; }
body.mat-flow .yf-related__item--yuen{ align-self:flex-start; }

/* --- ヘッダー: ロゴ画像/ハンバーガーのタップ領域確保/SNS-ハンバーガー間隔(福田QA) --- */
body.mat-flow .c-header__logoImg{ height:34px; width:auto; display:block; margin:0 auto; }
body.mat-flow .c-header__navOpen{ width:28px; height:22px; }
body.mat-flow .c-header-inner .c-header__sns{ margin-right:58px !important; }

/* ============================================================
   FAQ アコーディオン — yuen-lp-b.css の grid(0fr→1fr)方式がこの環境で開かない
   (grid-template-rows fr が is-active でも展開しない)ため、body.mat-flow では
   確実な max-height 方式に置換(grid を無効化)。JS は is-active をトグルするだけ。
   ============================================================ */
body.mat-flow .lp-faq__a{ display:block !important; grid-template-rows:none !important; max-height:0; overflow:hidden; transition:max-height .45s ease; }
body.mat-flow .lp-faq__a.is-active{ max-height:1500px; }
body.mat-flow .lp-faq__a-inner{ overflow:visible; }

/* ============================================================
   s-trust-badge 構造CSS — main.css 非読込ゆえ構造(display:flex等)欠落を
   body.mat-flow スコープで補完(色はマタ・ローズ)。和装 nagi-flow.css §P5-fix と同型。
   ============================================================ */
body.mat-flow .s-trust-badge{ width:100%; padding:16px 0 12px; background:#fffbfb; }
body.mat-flow .s-trust-badge__inner{ max-width:1000px; margin:0 auto; padding:0 20px; text-align:center; }
body.mat-flow .s-trust-badge__items{ display:flex; justify-content:center; align-items:center; gap:0; flex-wrap:wrap; }
body.mat-flow .s-trust-badge__item{ display:flex; align-items:center; padding:0 10px; }
/* ラベルは洋装(要素)に合わせて明朝(Noto Serif JP)・太さ400。マタは main.css 非読込ゆえ
   font-family/size を明示(未指定だと本文ゴシックを継承し洋装と別物に見える=福田指摘) */
body.mat-flow .s-trust-badge__label{ font-family:var(--yf-mincho); font-weight:400; font-size:11px; line-height:1.4; letter-spacing:.07em; color:var(--mat-ink); }
body.mat-flow .s-trust-badge__label strong{ font-family:var(--yf-mincho); font-weight:500; font-size:15px; letter-spacing:.05em; color:var(--mat-accent-d); }
body.mat-flow .s-trust-badge__divider{ width:1px; height:12px; background:rgba(169,79,104,.3); flex-shrink:0; }
body.mat-flow .s-trust-badge__price{ display:flex; align-items:baseline; justify-content:center; gap:4px; margin-top:8px; flex-wrap:wrap; }
body.mat-flow .s-trust-badge__price-from{ font-size:10px; letter-spacing:.12em; color:var(--mat-ink); }
body.mat-flow .s-trust-badge__price-amount{ font-size:22px; letter-spacing:.05em; line-height:1; color:var(--mat-accent-d); font-weight:600; }
body.mat-flow .s-trust-badge__price-tax{ font-size:10px; letter-spacing:.08em; color:var(--mat-ink); }
body.mat-flow .s-trust-badge__nav{ display:flex; justify-content:center; gap:8px; margin-top:22px; padding:0 4px; flex-wrap:wrap; }
body.mat-flow .s-trust-badge__nav-item{ flex:0 0 auto; font-size:11px; letter-spacing:.08em; line-height:1; color:var(--mat-ink); text-decoration:none; padding:7px 14px; border:1px solid rgba(169,79,104,.3); border-radius:20px; white-space:nowrap; transition:all .2s ease; }
body.mat-flow .s-trust-badge__nav-item:hover{ background:var(--mat-accent); color:#fff; border-color:var(--mat-accent); }
@media (min-width:1024px){
  body.mat-flow .s-trust-badge{ padding:20px 0 16px; }
  body.mat-flow .s-trust-badge__label{ font-size:12px; }
  body.mat-flow .s-trust-badge__label strong{ font-size:16px; }
  body.mat-flow .s-trust-badge__price-amount{ font-size:26px; }
  body.mat-flow .s-trust-badge__price-from, body.mat-flow .s-trust-badge__price-tax{ font-size:11px; }
}

/* ============================================================
   フォトギャラリー 2×2 化(2026-07-19 福田指示) — 掲載NG 2枚
   (mp-9682/mp-0940)削除で 6→4枚になったため、共有 yuen-flow-v2.css の
   3列(repeat(3,1fr))を body.mat-flow スコープで 2列に上書き(読込順で後勝ち)。
   洋装/和装のギャラリー(3列)には影響しない。aspect2:3 は共有定義を継承。
   ============================================================ */
body.mat-flow .yf-gallery__grid{ grid-template-columns:repeat(2, 1fr); gap:6px; }