/* =====================================================================
   EXP-156 新LP案B(動線テスト) — 追加スタイル
   構成 = 現行LPの殻(c-header / s-concept FV / s-trust-badge / c-footer・theme CSS)
          ＋ 中身=LP-Bの動線(lp-worry/lp-fair/lp-point/lp-cta/lp-plans)
   色味 = LP-Bのトンマナに合わせる(桜色#d16373 × 茶#95732c × 金#a57f56 × ティール / 生成り#fffbfb)。
          動線部品は dist/yuen-lp-b.css(LP-B配色+YUEN写真フィット)で描画。
   ここでは「コンセプト見出し / 料金プラン / トラストバッジのトンマナ / ページ枠」を上書き/追加。
   フォントは維持(明朝=游明朝/Shippori・ブランド=Cinzel・ゴシック=Zen Kaku)。
   ===================================================================== */

:root {
  --yf-ink: #4a3f28;     /* 本文(濃オリーブブラウン) */
  --yf-bg: #fffbfb;      /* ウォームホワイト */
  --yf-pink: #d16373;    /* ローズ(CTA枠・強調) */
  --yf-rose-d: #943a47;  /* 濃ローズ */
  --yf-brown: #95732c;   /* 見出し強調 */
  --yf-gold: #a57f56;    /* ゴールド */
  --yf-pinkbg: #eddcdc;  /* セクション淡桜 */
  --yf-cream: #f7f3ee;   /* クリーム */
  --yf-mincho: "游明朝体", "YuMincho", "Yu Mincho", "Shippori Mincho", serif;
  --yf-brand: "Cinzel", "游明朝体", serif;
  --yf-gothic: "Zen Kaku Gothic New", sans-serif;
}

/* ---- ページ枠：FV＋動線を SP幅(480px)で中央寄せ。PCは左右に素な余白 ---- */
.yf-page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--yf-bg);
  overflow-x: clip;            /* 子のはみ出し(fairのティール三角=width200% 等)を列幅で切る */
}
/* ---- 動線カラム：lp-worry__bridge(absolute)の基準＋背景 ----------------
   原本は .lp__content{overflow:hidden} で width:200% のティール三角を切っていた。
   v2は3ゾーン枠を外したので、ここで overflow-x:clip して横はみ出し(横スクロール)を防ぐ。
   ※ clip は縦をスクロール化しない(hiddenと違い point の影/重なりを潰さない)。 */
.yf-flow {
  position: relative;
  background: var(--yf-bg);
  overflow-x: clip;
}
.lp--yuenflow { width: 100%; }

/* ===================== ヘッダー：上スクロール時のみ表示 ===============
   現行は position:fixed の追従ヘッダー。JS(.yf-hide トグル)と連動し、
   下スクロール/最上部では隠し、上スクロールでのみ現す。FVのインパクトを最大化。 */
body.lp-b .c-header { transition: transform .35s ease; will-change: transform; }
body.lp-b .c-header.yf-hide { transform: translateY(-100%); }
/* FVをページ最上部から見せる(固定ヘッダー分の上余白40pxを詰める) */
body.lp-b .mainContents { margin-top: 0; }
/* FV(s-concept)上部の固定ヘッダー回避用 padding-top:60px はヘッダー非表示で不要 → 0 */
body.lp-b .s-concept_inner { padding-top: 0; }

/* ===================== コンセプト見出し（fairを流用） =================== */
/* 既存 .lp-fair__title-sub はロゴ画像前提のためテキスト用に上書き。
   ※ padding-top は原本の100px(お悩み三角＋「そんなあなたに」を避ける余白)を維持。 */
/* 正式ロゴ(ヘッダー)に準拠: サービスの正式表記としてフォント/字間/配置を合わせる。
   ワードマーク = Cinzel・weight400・letter-spacing .1em・ネイビー#01073a
   日本語補足   = Noto Serif JP・weight400・letter-spacing .16em・ネイビー#01073a
   中央寄せの縦ロックアップ(補足→ワードマークを近接配置)。両フォントはテーマCSSの@font-faceで供給。 */
.lp--yuenflow .lp-fair__head { gap: 4px; }
.lp--yuenflow .lp-fair__title-sub {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.4;
  color: #01073a;
  text-align: center;
}
.lp--yuenflow .lp-fair__title {
  font-family: "Cinzel", serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.4;
  color: #01073a;
  text-align: center;
  margin-top: 4px;
  text-shadow: none;
}
.lp-fair__lead {
  margin-top: 14px;
  font-family: var(--yf-mincho);
  font-size: 13px;                /* 14→13: 「カメラマンのいない、…完全貸切スタジオ。」を1行に(福田指示) */
  line-height: 2;
  letter-spacing: .4px;          /* 1px→.4px: 1行に収める */
  text-align: center;
  color: var(--yf-ink);
  white-space: nowrap;           /* <br>区切りの各文を必ず1行に(内部折返し防止) */
}

/* ---- コンセプト下のフォトスライダー --------------------------------------
   現行LPギャラリー画像(×2)を、画像間に横マージンを取ってシームレス無限スクロール。
   原本の styling-slide(0→-100%) を yf-marquee(0→-50% = 1コピー分)に差し替え、
   トラックは2コピーで継ぎ目なくループ。 */
.lp--yuenflow .lp-fair__slider { padding-bottom: 44px; }
.lp--yuenflow .lp-fair__slider-frame { overflow: hidden; }
.lp--yuenflow .lp-fair__track {
  min-width: max-content;
  width: max-content;
  animation: yf-marquee 30s linear infinite;
}
.lp--yuenflow .lp-fair__slide {
  width: auto;
  margin-right: 12px;            /* 画像同士を引っ付けず横マージン */
}
.lp.lp--yuenflow .lp-fair__slide img {
  width: 132px;
  height: auto;
  aspect-ratio: 2 / 3;            /* ギャラリーと同じ縦長2:3(画像と同比=トリミングなし) */
  object-fit: cover;
  object-position: center 30%;    /* ギャラリーと同じ寄せ */
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(74,63,40,.14);
}
@keyframes yf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===================== 料金プラン =================================== */
.lp-plans {
  padding: 44px 16px 36px;
  background: linear-gradient(180deg, var(--yf-cream), var(--yf-pinkbg));
}
.lp-plans__head-sub {
  font-family: var(--yf-gothic);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--yf-ink);
}
.lp-plans__list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-plans__item {
  position: relative;
  background: #fff;
  border: 1px solid #e7ddd3;
  border-radius: 10px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(74,63,40,.07);
}
.lp-plans__item--popular {
  border: 2px solid var(--yf-gold);
  box-shadow: 0 8px 24px rgba(168,132,47,.2);
}
/* 和装LP方式: カード背景は白のまま、プラン別の「枠線色」で差別化。
   名前/スペックも枠線色に合わせる(白地なので高コントラスト=可読性◎)。 */
body.lp-b .lp-plans__item { background: #fff; }
body.lp-b .lp-plans__item--light { border: 1.5px solid #3f7a86; }                /* 青緑(ティール系) */
body.lp-b .lp-plans__item--light .lp-plans__name,
body.lp-b .lp-plans__item--light .lp-plans__price-num { color: #2f6875; }
body.lp-b .lp-plans__item--light .lp-plans__spec { color: #2f6875; background: #eef4f5; }
body.lp-b .lp-plans__item--standard { border: 1.5px solid #c45b72; }             /* ローズ */
body.lp-b .lp-plans__item--standard .lp-plans__name,
body.lp-b .lp-plans__item--standard .lp-plans__price-num { color: #b04b62; }
body.lp-b .lp-plans__item--standard .lp-plans__spec { color: #b04b62; background: #faeef1; }
body.lp-b .lp-plans__item--premium { border: 2px solid #b08a3a; }                /* 金(本命・太め) */
body.lp-b .lp-plans__item--premium .lp-plans__name,
body.lp-b .lp-plans__item--premium .lp-plans__price-num { color: #a07c2c; }
body.lp-b .lp-plans__item--premium .lp-plans__spec { color: #a07c2c; background: #f5edda; }
.lp-plans__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yf-pink);
  color: #fff;
  font-family: var(--yf-gothic);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 18px;
  border-radius: 100px;
  white-space: nowrap;
}
.lp-plans__name {
  font-family: var(--yf-brand);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--yf-brown);
}
.lp-plans__price {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  color: var(--yf-rose-d);
}
.lp-plans__price-num {
  font-family: var(--yf-mincho);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
}
.lp-plans__price-unit {
  font-family: var(--yf-gothic);
  font-size: 14px;
  font-weight: 500;
  color: var(--yf-ink);
}
.lp-plans__price-unit small { font-size: 11px; }
.lp-plans__spec {
  margin-top: 12px;
  display: inline-block;
  font-family: var(--yf-gothic);
  font-size: 12.5px;
  letter-spacing: .5px;
  color: var(--yf-brown);
  background: var(--yf-cream);
  border-radius: 100px;
  padding: 6px 14px;
}
.lp-plans__desc {
  margin-top: 12px;
  font-family: var(--yf-mincho);
  font-size: 13.5px;
  line-height: 1.85;
  letter-spacing: .5px;
  color: var(--yf-ink);
}
/* プラン対象者キャプション(現行LP s-plan-1__tableTitle_caption 移植・名前の下) */
.lp-plans__caption {
  margin-top: 6px;
  font-family: var(--yf-gothic);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .3px;
  color: #6f6450;
}
/* 持ち込みOK注記(現行LP s-plan-1__tableTitle_bringown 移植・spec の下。現行のオレンジは新LP配色の温かみある琥珀へ) */
.lp-plans__bringown {
  margin-top: 9px;
  font-family: var(--yf-gothic);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #a87a4e;
}
.lp-plans__notes {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-plans__notes p {
  font-family: var(--yf-gothic);
  font-size: 10.5px;
  line-height: 1.7;
  color: rgba(74,63,40,.6);
  text-align: center;
}

/* ===================== 先輩カップルの声(voices) =====================
   LP-Bの lp-voice は JS(Swiper)前提でトラックを overflow:hidden で静的表示。
   v2は app.js 非読込のため、JS不要の CSS scroll-snap 横スワイプに置換(全件閲覧可)。 */
/* 地色: 旧くすんだピンク #eddcdc は白カード+白見出しが浮いて不調和 →
   LP-Bの基調(白×温クリーム×ゴールド・ピンク不使用/頻出 #f4efe3)に合わせ
   温かいクリームへ。白カードが映え、上下の白セクション(plans/report)と柔らかく区切れる。 */
body.lp-b .lp-voice.lp-bg--pink { background-color: #f4efe3; }
/* 見出し「Real Voice」は地色がピンク前提の白文字 → クリーム地で読めるゴールドへ */
body.lp-b .lp-voice .lp-sect-en { color: var(--yf-gold); }
.lp--yuenflow .lp-voice__list {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lp--yuenflow .lp-voice__list::-webkit-scrollbar { display: none; }
.lp--yuenflow .lp-voice__item { scroll-snap-align: center; }
/* ページネーションはスクロール外(.lp-voice 直下)へ移動済み → 固定・中央表示(カードと一緒に流れない) */
body.lp-b .lp-voice__list { padding-bottom: 8px; }
body.lp-b .lp-voice__pagination { position: static; transform: none; left: auto; bottom: auto; margin-top: 14px; }
/* レビューコメント: 実GBP全文は長大でカードが伸び不揃いに → 行数制限で高さを揃える(続きはGoogleで読める)。
   店舗LP=動的GBP全文ゆえ特に効く。TOP静的レビューにも同様に適用(短文ゆえ実害なし)。 */
body.lp-b .lp-voice__item-comment {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* レビューサマリー サブ行「うち○○店は N件」= メイン(洋装3店合算)の下に控えめ表示。
   口コミの少ない店舗でも 3店合算をメイン訴求し、自店件数は誠実にサブ表記。 */
body.lp-b .lp-voice__summary-sub { margin-top: 5px; font-size: 12px; color: #9a8f80; letter-spacing: .02em; }

/* ===================== 関連コラム(s-related-columns・店舗LP) を新LPトンマナへ統一 =====================
   現行の s-related-columns デザイン(濃色見出し/角丸/navy枠ボタン)が新LP(明朝/温色/#e7ddd3カード)と不調和 →
   yf-report カードと同系の 白カード+#e7ddd3枠+柔らかい影、見出しは lp-sect-title 準拠、ボタンはゴールド枠ピルへ。 */
body.lp-b .s-related-columns { padding: 42px 0 40px; background: var(--yf-bg); }
body.lp-b .s-related-columns__container { max-width: 680px; margin: 0 auto; padding: 0 16px; }
body.lp-b .s-related-columns__title {
  font-family: var(--yf-mincho); font-size: 22px; font-weight: 500; line-height: 1.5;
  letter-spacing: 1.1px; color: var(--yf-ink); text-align: center;
}
body.lp-b .s-related-columns__title::after {
  content: ""; display: block; width: 28px; height: 1px; margin: 14px auto 0; background: var(--yf-gold);
}
body.lp-b .s-related-columns__grid { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
body.lp-b .s-related-columns__item {
  display: flex; align-items: center; gap: 13px; padding: 10px; text-decoration: none;
  background: #fff; border: 1px solid #e7ddd3; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(74, 63, 40, .08);
}
body.lp-b .s-related-columns__thumb {
  flex: 0 0 108px; width: 108px; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--yf-cream);
}
body.lp-b .s-related-columns__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.lp-b .s-related-columns__item-title { margin: 0; flex: 1; }
body.lp-b .s-related-columns__item-title span {
  font-family: var(--yf-mincho); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--yf-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.lp-b .s-related-columns__more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content;
  margin: 26px auto 0; padding: 11px 30px; text-decoration: none;
  font-family: var(--yf-gothic); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--yf-brown); border: 1px solid var(--yf-gold); border-radius: 999px; background: #fff;
}
body.lp-b .s-related-columns__more svg { width: 15px; height: 15px; stroke: var(--yf-brown); }

/* ===================== 駅別ルート動画(yf-access__routes・店舗LPのみ) を新トンマナで =====================
   現行店舗LP studio-access.php の駅別道順YouTube動画を 各店舗LPのアクセスに温存。<details>折畳・16:9埋込。
   🔴 TOPには付けない(店舗別動画は各店LPのみ・TOPは静的4店access+店舗LPへの内部リンク)。 */
body.lp-b .yf-access__routes { margin-top: 16px; border-top: 1px solid #e7ddd3; }
body.lp-b .yf-access__routes-summary {
  display: flex; align-items: center; gap: 8px; padding: 14px 2px; cursor: pointer; list-style: none;
  font-family: var(--yf-mincho); font-size: 14px; color: var(--yf-brown); letter-spacing: .03em;
}
body.lp-b .yf-access__routes-summary > span:first-child { flex: 1; }
body.lp-b .yf-access__routes-summary::-webkit-details-marker { display: none; }
body.lp-b .yf-access__routes-summary::after { content: "＋"; font-size: 15px; color: var(--yf-gold); }
body.lp-b .yf-access__routes[open] .yf-access__routes-summary::after { content: "−"; }
body.lp-b .yf-access__routes-count { font-family: var(--yf-gothic); font-size: 11.5px; color: var(--yf-gold); }
body.lp-b .yf-access__routes-list { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 12px; }
body.lp-b .yf-access__route-label { font-family: var(--yf-mincho); font-size: 13.5px; font-weight: 500; color: var(--yf-ink); margin-bottom: 8px; }
body.lp-b .yf-access__route-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid #e7ddd3;
}
body.lp-b .yf-access__route-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ===================== アクセス(yf-access・地図+店舗) ================= */
.yf-access { padding: 40px 16px 36px; background: var(--yf-bg); }
.yf-access .lp-heading { margin: 0; }
.yf-access__list { margin-top: 24px; display: flex; flex-direction: column; gap: 30px; }
.yf-access__name {
  font-family: var(--yf-mincho);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--yf-brown);
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #efe7dc;
}
.yf-access__map {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e7ddd3;
}
.yf-access__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.yf-access__addr {
  margin-top: 14px;
  font-family: var(--yf-gothic);
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--yf-ink);
  text-align: center;
}
.yf-access__trans {
  margin-top: 8px;
  font-family: var(--yf-gothic);
  font-size: 11.5px;
  line-height: 1.85;
  color: rgba(74,63,40,.72);
  text-align: center;
}
.yf-access__link {
  display: block;
  text-align: center;          /* 左寄り → 中央寄せ(住所/交通と揃える) */
  margin-top: 12px;
  font-family: var(--yf-gothic);
  font-size: 12px;
  font-weight: 600;
  color: var(--yf-pink);
}

/* FAQ「もっと見る」トグル + FAQページ誘導 */
body.lp-b .yf-faq-more {
  display: block;
  margin: 20px auto 0;
  padding: 12px 32px;
  font-family: var(--yf-gothic);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--yf-brown);
  background: #fff;
  border: 1px solid var(--yf-gold);
  border-radius: 100px;
  cursor: pointer;
}
body.lp-b .yf-faq-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--yf-gothic);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--yf-pink);
}

/* 4理由テキスト内の店舗名リンク(→アクセスへ) */
body.lp-b .lp-point__item-text a.yf-store-link {
  color: var(--yf-rose-d);
  font-family: var(--yf-gothic);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===================== 体験レポート(yf-report・横スライド・コンパクト) ===== */
.yf-report { padding: 40px 0 36px; background: var(--yf-bg); }
/* 地色設計(LP-B の zebra=白×クリーム交互):
   plans(クリーム→ピンク)→ voices #f4efe3 → report 温アイボリー → flow クリーム → faq 白 → access 白。
   report カードは白+枠+影で淡い地でも映え、flow カード(白+ピンク枠・影なし)はクリーム地でくっきり映える。 */
body.lp-b .yf-report { background: #faf6ee; }      /* 温かいアイボリー(白よりわずかに暖色・クリーム系) */
body.lp-b .lp-flow { background: #fcf9f3; }         /* report(#faf6ee)とfaq(白)の中間=薄いアイボリー(福田指示) */

/* フォトギャラリー(新規・3×3=9枚+Instagram導線・福田指示2026-06-27)。体験レポートの下・新トンマナ・cream地 */
body.lp-b .yf-gallery { padding: 40px 16px 38px; background: #f4efe3; }
body.lp-b .yf-gallery__lead { margin-top: 6px; text-align: center; font-family: var(--yf-mincho); font-size: 13px; letter-spacing: .08em; color: var(--yf-ink); }
body.lp-b .yf-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 18px; }
body.lp-b .yf-gallery__item { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: #e6dcd8; }  /* 2:3ポートレート=実写(720x1080)に合わせ正方形クロップしない */
body.lp-b .yf-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.lp-b .yf-gallery__ig {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: 290px; margin: 22px auto 0; padding: 13px 20px;
  border-radius: 100px; background: var(--yf-rose-d); color: #fff;
  font-family: var(--yf-gothic); font-size: 13px; letter-spacing: .06em; text-decoration: none;
}
body.lp-b .yf-gallery__ig-icon { flex: 0 0 auto; }

/* ハンバーガーメニュー(ドロワー)を新LPトンマナに(福田指示2026-06-27):
   旧=白パネル/Noto Serif JP/navy #01073a/左右30の330px → クリーム全幅・游明朝・ink・LP内アンカー+予約CTA。 */
/* ===== ハンバーガーメニュー(ドロワー)を新LPトンマナに =====
   🔴 PC幅では c-header__nav が position:static のデスクトップ用インラインナビになり
   (ハンバーガーは display:none)、閉じていても表示される。そこに私のドロワー上書き
   (cream + min-height:100vh)が乗ると cream の巨大箱が右上に出る「白カバー」事故になっていた
   (2026-06-28 福田報告)。→ SP幅(480px)中央寄せのLPなので「全幅で常にハンバーガー + 全画面
   ドロワー」に統一。閉=非表示 / 開(#menu-btn:checked)だけ cream 全画面で表示。 */
body.lp-b .c-header-inner {
  opacity: 1 !important;                               /* 半透明(0.9)解除=ヘッダー/ドロワーを単色に */
  width: auto !important; max-width: 480px !important; margin: 0 auto !important;  /* LP(480px)に揃え中央寄せ */
  position: relative !important;                       /* ハンバーガー(absolute)の基準を inner に */
}
body.lp-b .c-header__navOpen { display: flex !important; }   /* PCの display:none を解除=常時ハンバーガー */
body.lp-b .c-header__nav { display: none !important; }       /* 閉=隠す(モバイルscaleY0/PC staticの両方を無効化=白カバー防止) */
body.lp-b #menu-btn:checked ~ .c-header__nav {
  display: flex !important;
  position: fixed !important; inset: 0 !important;           /* 全幅でも全画面オーバーレイ */
  width: auto !important; height: auto !important; min-height: 100vh !important;  /* 🔴 min-height必須(inset:0+height:autoだけだと112pxに潰れる) */
  margin: 0 !important;                                                          /* 本番のmargin-topで70px下がる事故を防ぐ */
  flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 0;
  padding: 64px 28px 48px !important;
  background-color: #fffbfb !important;
  box-shadow: 0 10px 26px rgba(74, 63, 40, .12);
  transform: none !important; z-index: 200 !important; overflow-y: auto !important;
}
body.lp-b #menu-btn:checked ~ .c-header__nav .c-header__navList {
  width: 100% !important; max-width: 282px; margin: 0 auto !important;
  border-bottom: 1px solid rgba(74, 63, 40, .10);
}
body.lp-b #menu-btn:checked ~ .c-header__nav .c-header__navList a {
  display: block; width: 100%; padding: 15px 4px;
  font-family: var(--yf-mincho) !important; font-size: 15px !important; font-weight: 500 !important;
  color: var(--yf-ink) !important; letter-spacing: .12em; text-align: center;
}
body.lp-b #menu-btn:checked ~ .c-header__nav .c-header__navList.-instagram { border-bottom: 0; margin-top: 16px !important; }
body.lp-b #menu-btn:checked ~ .c-header__nav .c-header__navList.-instagram a { display: inline-flex; width: auto; padding: 6px; }
body.lp-b #menu-btn:checked ~ .c-header__nav .c-header__navList--reserve { border-bottom: 0; margin-top: 20px !important; }
body.lp-b #menu-btn:checked ~ .c-header__nav .c-header__navList--reserve a {
  padding: 14px !important; border-radius: 100px; background: var(--yf-pink) !important; color: #fff !important;
  font-family: var(--yf-gothic) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: .08em;
}
/* メニューを最前面に + 開いている間は追従CTAを隠す(全画面ドロワーを完全に覆い、下端の覗きをなくす) */
body.lp-b .c-header { z-index: 9999 !important; }
body.lp-b:has(#menu-btn:checked) .c-cta { display: none !important; }
/* 🔴 c-header に transform があり、position:fixed のメニューの基準が viewport でなく c-header(h100px)
   になってメニューが c-header の箱に閉じ込められていた。開いている間だけ transform を解除して
   viewport 基準の真の全画面に戻す(閉じれば元に戻る=ヘッダー位置は無影響)。 */
body.lp-b:has(#menu-btn:checked) .c-header,
body.lp-b:has(#menu-btn:checked) .c-header-inner {
  transform: none !important; will-change: auto !important; filter: none !important;  /* containing block を作る要素を全て解除 */
}
/* top:0 のドロワーがヘッダーのロゴ/IG/×(閉じる)を覆うので、それらを最前面に出す(×を常に押せる) */
body.lp-b .c-header__logo, body.lp-b .c-header__sns { position: relative !important; z-index: 300 !important; }
body.lp-b .c-header__navOpen { z-index: 300 !important; }

/* ===== PC(≥1024px): ヘッダーを「左サイドバー」に(サイドバー型(PC)) =====
   ナビを左ガターに寄せ、SP幅(480px)のLPを中央に置く。🔴 新LP(body.lp-b)+PC幅のみ。
   モバイル(≤1023px)は上のハンバーガー+全画面ドロワーのまま(この@media外なので不変)。
   既存LP/コラム/他ページは body.lp-b も yuen-flow-v2.css も持たないので一切無影響。 */
@media (min-width: 1024px) {
  /* 左右の余白(ガター)背景 = グレー#ededf1 → 暖色のアイボリーに(福田指示) */
  body.lp-b, body.lp-b main, body.lp-b .mainContents { background-color: #efe8dd !important; }
  /* ヘッダー全体 → 左ガターの縦サイドバー(固定・LP左端のすぐ左に寄せる) */
  body.lp-b .c-header {
    position: fixed !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: 0 !important;
    width: calc((100vw - 480px) / 2) !important; min-width: 210px !important;
    z-index: 50 !important;   /* height:100vh は外す→ top:0+bottom:0 で高さ確定。JSがフッター手前で bottom をクランプ */
    background: transparent !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    padding: 0 38px 0 16px !important; overflow-y: auto !important;
    transform: none !important;
  }
  body.lp-b .c-header-inner {
    position: static !important; opacity: 1 !important;
    width: auto !important; max-width: 210px !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 26px !important;
    background: transparent !important;
  }
  /* ロゴ(最上部・中央) */
  body.lp-b .c-header__logo { position: static !important; z-index: auto !important; }
  body.lp-b .c-header__logo a { text-align: center !important; }
  /* ハンバーガー/チェックボックス/ヘッダーIG は非表示(サイドバー常時表示・IGはナビ内に有り) */
  body.lp-b .c-header__navOpen, body.lp-b #menu-btn, body.lp-b .c-header__sns { display: none !important; }
  /* ナビ = 縦リスト(ドロワーでなくサイドバーの一部として常時表示) */
  body.lp-b .c-header__nav {
    display: flex !important; position: static !important; inset: auto !important;
    flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important;
    width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important; transform: none !important; overflow: visible !important;
  }
  body.lp-b .c-header__navList { width: auto !important; max-width: none !important; margin: 0 !important; border-bottom: 0 !important; }
  body.lp-b .c-header__navList a {
    display: block !important; width: auto !important; padding: 8px 4px !important;
    font-family: var(--yf-mincho) !important; font-size: 14px !important; font-weight: 500 !important;
    color: var(--yf-ink) !important; letter-spacing: .1em !important; text-align: center !important; white-space: nowrap !important;
  }
  body.lp-b .c-header__navList--reserve { margin-top: 16px !important; }
  body.lp-b .c-header__navList--reserve a {
    padding: 11px 24px !important; border-radius: 100px !important;
    background: var(--yf-pink) !important; color: #fff !important;
    font-family: var(--yf-gothic) !important; font-size: 13px !important; letter-spacing: .06em !important;
  }
  body.lp-b .c-header__navList.-instagram { margin-top: 12px !important; }
  body.lp-b .c-header__navList.-instagram a { display: inline-flex !important; width: auto !important; padding: 6px !important; }
}
.yf-report .lp-heading { margin: 0 16px; gap: 8px; }
.yf-report__caption { font-family: var(--yf-gothic); font-size: 12.5px; letter-spacing: .08em; color: var(--yf-pink); }
.yf-report__list {
  position: relative;
  margin-top: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.yf-report__list::-webkit-scrollbar { display: none; }
.yf-report__track { display: flex; gap: 12px; padding: 4px 16px 6px; }
.yf-report__item {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 230px;
  display: block;
  background: #fff;
  border: 1px solid #e7ddd3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(74,63,40,.08);
}
.yf-report__thumb { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.yf-report__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yf-report__body { padding: 11px 13px 13px; }
.yf-report__cap { font-family: var(--yf-gothic); font-size: 10.5px; letter-spacing: .02em; color: var(--yf-rose-d); }
.yf-report__title {
  margin-top: 5px;
  font-family: var(--yf-mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--yf-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yf-report__more { display: inline-block; margin-top: 8px; font-family: var(--yf-gothic); font-size: 11.5px; font-weight: 600; color: var(--yf-pink); }
.yf-report__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.yf-report__pagination span { width: 6px; height: 6px; border-radius: 50%; background: rgba(74,63,40,.22); transition: background .2s; }
.yf-report__pagination span.is-active { background: var(--yf-pink); }

/* ===================== 関連サービス(yf-related・大きめカード・横スライダー・オートプレイ) =====
   現行 s-about-nagi(和装) + s-gift(ギフト) を「関連サービス」として、体験レポートより大きいカードで。
   アクセス→最後のCTAの後(フッター直前)。地色は温アイボリーで締める。 */
body.lp-b .yf-related { background: #ffffff; }   /* アクセス(#fffbfb)よりさらに白い純白(福田指示) */
.yf-related { padding: 42px 0 44px; }
.yf-related .lp-heading { margin: 0 16px; gap: 6px; }
.yf-related__sub {
  margin-top: 2px; text-align: center;
  font-family: var(--yf-mincho); font-size: 12.5px; letter-spacing: .06em; color: var(--yf-ink);
}
.yf-related__list {
  position: relative;
  margin-top: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.yf-related__list::-webkit-scrollbar { display: none; }
.yf-related__track { display: flex; gap: 16px; padding: 6px 24px 10px; align-items: flex-start; }
.yf-related__item {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 300px;                 /* 体験レポート(230px)より大きめ */
  display: block;
  background: #fff;
  border: 1px solid #e7ddd3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(74,63,40,.12);
}
/* カード高さを統一するため、サムネ枠を固定アスペクト比(4:5 縦長)にし object-fit:cover で中央クロップ。
   元画像の比率がバラバラ(nagi 1:1 / maternity 4:5 / gift 縦長)でも全カードの高さが揃う(福田指示・高さ統一)。
   カード全体の高さは JS の infiniteCarousel が track に align-items:stretch を当てて完全一致させる。 */
.yf-related__thumb { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f4efe9; }
.yf-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yf-related__body { padding: 18px 20px 20px; }
.yf-related__label {
  font-family: var(--yf-gothic); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: var(--yf-gold);
}
.yf-related__title {
  margin-top: 7px;
  font-family: var(--yf-mincho);
  font-size: 22px; font-weight: 600; letter-spacing: .05em; line-height: 1.3;
  color: var(--yf-ink);
  word-break: keep-all;        /* 「YUEN WEDDING ギフトカード」を単語境界(YUEN WEDDING／ギフトカード)で改行し「ギフ/トカード」割れを防ぐ */
  overflow-wrap: anywhere;     /* 万一カード幅を超える長い語は折り返す保険 */
}
.yf-related__desc {
  margin-top: 9px;
  font-family: var(--yf-mincho); font-size: 13px; line-height: 1.85;
  letter-spacing: .3px; color: var(--yf-ink);
}
.yf-related__more {
  display: inline-block; margin-top: 14px;
  font-family: var(--yf-gothic); font-size: 12.5px; font-weight: 600;
  color: var(--yf-rose-d);
}
.yf-related__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.yf-related__pagination span { width: 7px; height: 7px; border-radius: 50%; background: rgba(74,63,40,.22); transition: background .2s; }
.yf-related__pagination span.is-active { background: var(--yf-gold); }

/* FAQ 質問・回答のフォントを全体トンマナ(ゴシック・通常字間)へ → 可読性UP
   原本は 游明朝+letter-spacing:2.4px で間延びして読みづらいため。 */
body.lp-b .lp-faq__q {
  font-family: var(--yf-gothic);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.65;
  color: var(--yf-ink);
}
/* FAQ(lp-faq)回答ボックス: 現行の複合HTML(リスト/見出し/価格)を読めるよう整える */
body.lp-b .lp-faq__a-box {
  display: block;
  font-family: var(--yf-gothic);
  font-size: 12.5px;
  letter-spacing: .02em;
  line-height: 1.9;
  color: var(--yf-ink);
}
body.lp-b .lp-faq__a-box ul { list-style: none; margin: 6px 0; padding: 0; }
body.lp-b .lp-faq__a-box li { margin: 2px 0; }
body.lp-b .lp-faq__a-box h3 { font-size: 12px; font-weight: 600; margin: 9px 0 4px; color: var(--yf-brown); letter-spacing: .04em; }
body.lp-b .lp-faq__a-box p { margin: 4px 0; }
body.lp-b .lp-faq__a-box a { color: var(--yf-pink); text-decoration: underline; }
body.lp-b .lp-faq__a-box strong { font-weight: 700; }
body.lp-b .lp-faq__a-box .price { color: var(--yf-rose-d); font-weight: 700; }
/* レビュー要約＋星(Googleクチコミの視覚表示のみ・schema無し=EXP-110/113準拠) */
.lp-voice__summary {
  margin: 12px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.lp-voice__summary-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-voice__summary-rating .yf-stars { font-size: 18px; }
.lp-voice__summary-rating strong {
  font-family: var(--yf-brand);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--yf-rose-d);
}
.lp-voice__summary-count {
  font-family: var(--yf-gothic);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--yf-ink);
}
.yf-stars { color: #f5b50a; letter-spacing: 1px; }

/* ===================== ご利用の流れ(flow) ===========================
   ギャラリー画像は縦長2:3 → flowのサムネは原本どおり 127×86 のランドスケープにcrop。 */
.lp.lp--yuenflow .lp-flow__item-head img {
  width: 127px;
  height: 86px;
  object-fit: cover;
  object-position: center;       /* イラスト(アイソメ)は中央寄せが自然(写真用 center 30% から変更) */
  background: #fffdf9;           /* イラスト地色と同じウォームアイボリー(端の段差防止) */
}
/* item-head: 画像高さに対しテキストを縦中央そろえ(既定 align-items:flex-end の上書き・福田指示) */
.lp.lp--yuenflow .lp-flow__item-head {
  align-items: center;
  gap: 12px;                     /* 16→12: ラベル幅を確保(04のはみ出し対策) */
}
/* ステップ内の小さな注記(※前のご予約の方と… 等) */
.lp.lp--yuenflow .lp-flow__item-note {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.65;
  letter-spacing: .3px;
  color: #8a7f6c;
}
/* ステップ ラベルの行数統一(福田指示): 所要時間(：X分)を小さく + 全ステップ1行に揃える */
body.lp-b .lp-flow__item-label {
  white-space: nowrap;           /* 04「データのお渡し・決済：10分」を1行に(はみ出し防止と両立=下記でフィット確認) */
  font-size: 14px;               /* 04(最長)がカード内に収まるサイズ(実測でフィット確認済) */
  letter-spacing: .2px;
}
body.lp-b .lp-flow__item-no {
  margin-right: 5px;             /* 番号と本文の間隔(詰めて幅節約) */
}
body.lp-b .lp-flow__item-dur {
  font-size: 11px;               /* 所要時間は小さく(タイトルを主役に) */
  font-weight: 400;
  letter-spacing: 0;
  color: #8a7f6c;
  margin-left: 1px;
}

/* ===================== プラン注釈(ポイント/注意点/背景色見本) =========
   現行LPの s-plan-1__notice をトンマナ調整(白カード×茶見出し×明朝)してプラン下に。 */
.yf-notice {
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.yf-notice__block {
  background: #fff;
  border: 1px solid #e7ddd3;
  border-radius: 10px;
  padding: 16px 16px 18px;
}
.yf-notice__title {
  font-family: var(--yf-mincho);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--yf-brown);
  text-align: center;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 1px solid #efe7dc;
}
.yf-notice__desc {
  font-family: var(--yf-gothic);
  font-size: 12px;
  line-height: 1.95;
  letter-spacing: .02em;
  color: var(--yf-ink);
  text-align: justify;
}
.yf-notice__swatches {
  margin-top: 12px;
  display: flex;
  flex-wrap: nowrap;              /* 9色を1行に収める */
  justify-content: center;
  gap: 4px;
}
.yf-swatch-link { flex: 1 1 0; min-width: 0; line-height: 0; }
.yf-swatch {
  width: 100%;                    /* 列幅に合わせ自動縮小(=1行に必ず収まる) */
  height: auto;
  aspect-ratio: 1;
  max-width: 34px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  border: 1px solid #e1d8cd;
}
.yf-swatch.-white { border-color: #cfcfcf; }

/* ===================== 追従CTA(c-cta) ==============================
   現行LPの追従CTAを表示。右ボタンの色を #d16373(ローズ)に。固定バー分の下余白を確保。 */
body.lp-b .c-cta .c-cta-inner .c-cta__button.-right { background-color: #d16373; }
body.lp-b { padding-bottom: 5.2rem; }       /* c-cta(高さ約4.94rem)に重ならない下余白 */
body.lp-b .lp-cta--last { padding-bottom: 44px; }
/* 社内検討スタンプは追従CTAの上に逃がす */
body.lp-b .yuenflow-stamp { bottom: 88px; }

/* ===================== トラストバッジ トンマナ調整 ===================
   現行LPのレイアウト/位置/改行/サイズ/構造は一切変えず、
   フォント・文字色・太さ・背景色のみ 下部動線(=原本配色)のトンマナへ寄せる。
   ※ font-size / letter-spacing / line-height / margin / padding は上書きしない */
body.lp-b .s-trust-badge { background-color: var(--yf-bg); }                 /* 白 → ウォームホワイト */
body.lp-b .s-trust-badge__label { font-family: var(--yf-mincho); color: var(--yf-ink); font-weight: 400; }
body.lp-b .s-trust-badge__label strong { font-family: var(--yf-brand); color: var(--yf-brown); font-weight: 500; }  /* 4 / 200 → Cinzel 茶 */
body.lp-b .s-trust-badge__price-from { font-family: var(--yf-gothic); color: var(--yf-brown); font-weight: 500; }   /* セルフフォトウェディング → 茶ゴシック */
body.lp-b .s-trust-badge__price-amount { font-family: var(--yf-brand); color: var(--yf-pink); font-weight: 600; }   /* ¥24,800 → ローズ */
body.lp-b .s-trust-badge__price-tax { font-family: var(--yf-gothic); color: var(--yf-brown); font-weight: 400; }
body.lp-b .s-trust-badge__divider { background-color: var(--yf-rose-d); opacity: .35; }
body.lp-b .s-trust-badge__nav-item { font-family: var(--yf-gothic); color: var(--yf-ink); font-weight: 500; border-color: rgba(209,99,115,.35); flex: 0 0 auto; white-space: nowrap; }
body.lp-b .s-trust-badge__nav-item:hover, body.lp-b .s-trust-badge__nav-item:active { background-color: var(--yf-pink); color: #fff; border-color: var(--yf-pink); }
/* クイックリンク5つを 3+2 の2列に(福田指示): flex-wrap + 中央寄せ。max-width で3つ目までで1行が埋まり4つ目が折返す。 */
body.lp-b .s-trust-badge__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 8px;
  max-width: 330px;
  margin: 0 auto;
}

/* ===================== 追従CTAから開くモーダル(LINE/予約) ============
   既存の発火条件(js-line/js-reserve のクリック)は不変。デザインのみ新LPトンマナ(ボトムシート)。
   yf-modal* は新LP固有クラスのため A/B 安全(body lock のみ body.lp-b スコープ)。 */
body.lp-b.yf-modal-open { overflow: hidden; }
.yf-modal-overlay { position: fixed; inset: 0; background: rgba(74,63,40,.55); z-index: 1000; }
.yf-modal { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.yf-modal[aria-hidden="true"] { display: none; }
.yf-modal__panel {
  position: relative;
  width: 100%;
  max-width: 360px;            /* 現行LP同様・画面中央のカード */
  max-height: 86vh;
  overflow-y: auto;
  background: var(--yf-bg);
  border-radius: 16px;
  padding: 30px 22px 28px;
  box-shadow: 0 14px 44px rgba(0,0,0,.28);
  animation: yf-modal-pop .25s ease;
}
@keyframes yf-modal-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.yf-modal__note { margin-top: 16px; font-family: var(--yf-gothic); font-size: 11px; line-height: 1.8; color: rgba(74,63,40,.7); text-align: center; }
.yf-modal__inline-link { color: #06C755; font-weight: 600; text-decoration: underline; }
.yf-modal__store small { font-weight: 400; font-size: 11px; color: rgba(74,63,40,.6); margin-left: 2px; }
.yf-modal__close {
  position: absolute; top: 14px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(74,63,40,.08);
}
.yf-modal__close::before, .yf-modal__close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 1.5px; background: var(--yf-ink);
}
.yf-modal__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.yf-modal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.yf-modal__en { text-align: center; font-family: var(--yf-brand); font-size: 12px; letter-spacing: .2em; color: var(--yf-gold); }
.yf-modal__title { text-align: center; font-family: var(--yf-mincho); font-size: 20px; font-weight: 600; color: var(--yf-brown); margin-top: 4px; }
.yf-modal__lead { text-align: center; font-family: var(--yf-gothic); font-size: 12.5px; line-height: 1.9; color: var(--yf-ink); margin-top: 14px; }
.yf-modal__line-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; height: 52px; border-radius: 10px;
  background: #06C755; color: #fff; font-family: var(--yf-gothic); font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.yf-modal__line-btn img { width: 22px; height: 22px; }
.yf-modal__stores { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.yf-modal__store {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 10px;
  background: #fff; border: 1px solid #e7ddd3;
  font-family: var(--yf-mincho); font-size: 15px; color: var(--yf-ink);
}
.yf-modal__store-arrow { width: 8px; height: 8px; border-top: 1.5px solid var(--yf-pink); border-right: 1.5px solid var(--yf-pink); transform: rotate(45deg); }

/* ===================== 社内検討用スタンプ =========================== */
body.lp-b .yuenflow-stamp {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  background: rgba(74,63,40,.82);
  color: #fff;
  font-family: var(--yf-gothic);
  font-size: 11px;
  letter-spacing: .5px;
  padding: 5px 12px;
  border-radius: 100px;
  pointer-events: none;
}

/* ===================== 導入部(お悩み)装飾の YUEN独自化 (EXP-156・2026-06-27・福田指示) =====
   元は外部CDNから装飾SVGを直接ホットリンクしていた。
   = ①トレードドレスの完コピ ②競合CDNへの外部依存 ③CG-J10リスク。
   → 撤去し、YUEN独自のCSS描画装飾へ置換。ティール地#a1c1c9・レイアウト・配色ベースは維持
     (=LP-B配色はベースに残し、装飾"形状"だけを一か所差別化する第一歩)。
   全行 body.lp-b スコープ=variant A 非干渉。 */

/* 🔴 お悩みセクション全面リデザイン(EXP-156・2026-06-27・福田指示):
   従来案の「2×3グリッド+円バッジ+点線下線+白ピル見出し+フォーク」を撤廃し、
   YUEN独自の「気持ちの吹き出し(思考の吹き出し=末尾に連なる丸)」縦1列リストへ。
   訴求連動の長め文案(analysis/APPEAL-MESSAGING-NOTES.md #4)。色味は現状維持(後で調整)。
   HTML側(assembler v2)= .lp-worry__q(Qアイコン)+ .lp-worry__txt(長文) 構造。 */

/* 見出し: 白ピル → ミニマル明朝(ピル撤廃・タイトル/EN下/短い罫線) */
body.lp-b .lp-worry .lp-heading {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
body.lp-b .lp-worry__title {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-family: var(--yf-mincho);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: normal;
}
body.lp-b .lp-worry__title::after { display: none; }   /* 汗アイコン撤去 */
body.lp-b .lp-worry__sub {
  font-family: var(--yf-brand);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .26em;
  color: rgba(255, 255, 255, .9);
}
body.lp-b .lp-worry .lp-heading::after {
  width: 34px;
  height: 1px;
  margin: 3px auto 0;
  background-color: rgba(255, 255, 255, .6);
  background-image: none;
}

/* リスト: 2×3グリッド → 縦1列(末尾ドット分の余白を gap で確保) */
body.lp-b .lp-worry__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* base の align-items:center を打消し=各吹き出しを横幅いっぱいに */
  gap: 27px;                     /* 吹き出し間を少しだけ広げる(福田指示2026-06-27・末尾ドット分込み) */
  padding: 22px 0 0;
}

/* 各お悩み: 白カード+円バッジ → 気持ちの吹き出し(角丸 + 末尾の連なる丸=右デフォルト/偶数だけ左) */
body.lp-b .lp-worry__item {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 16px;
  border-radius: 16px;
  filter: none;
  box-shadow: 0 2px 10px rgba(48, 104, 117, .13);
}
body.lp-b .lp-worry__item::before {        /* 末尾ドット大(右デフォルト) */
  top: auto;
  left: auto;
  right: 26px;
  bottom: -7px;
  transform: none;
  width: 10px;
  height: 10px;
  background-color: #fff;
  background-image: none;
  border: 0;
  border-radius: 50%;
}
body.lp-b .lp-worry__item::after {         /* 末尾ドット小(右デフォルト) */
  content: "";
  position: absolute;
  top: auto;
  left: auto;
  right: 19px;
  bottom: -16px;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
}
/* 末尾ドットは全て右揃え(福田指示2026-06-27=偶奇交互をやめる) */

/* 6つ目の吹き出しがfair(白)と融合して見えない問題の対処:
   ティール地に下余白を足し、「そんなおふたりに」ブリッジを in-flow のティール塊化して
   お悩み→fair までティールを連続させる(6つ目を独立した吹き出しに+末尾ドット/ブリッジ可視化)。 */
body.lp-b .lp-worry { padding-bottom: 22px; }
/* ノッチを「ブリッジ自身の clip-path 下端」で表現(福田指示2026-06-27):
   旧 .lp-fair::before の teal三角を廃止し、ブリッジ下端を V字にクリップ。
   → teal-teal境界が物理的に消える=ノッチ境界の白線が原理的に出ない。
   ノッチの「翼」に覗くのは親 .yf-flow の地色 #fffbfb(=fairと同色)なので自然に繋がる。 */
body.lp-b .lp-worry__bridge {
  position: static;
  margin-top: -1px;              /* お悩みティールと1px重ね(上側の継ぎ目も消す) */
  background-color: #a1c1c9;
  padding: 12px 16px 46px;       /* 文言は上(全幅部)、下46px がノッチ領域(下42px を V字クリップ) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 50% 100%, 0 calc(100% - 42px));
}
/* フォーク \ / を撤去(独自装飾・差別化) */
body.lp-b .lp-worry__bridge-text::before,
body.lp-b .lp-worry__bridge-text::after { display: none; }
/* 旧ノッチ(.lp-fair::before の teal三角)は廃止 */
body.lp-b .lp-fair::before { display: none; }
/* fair は普通に後続。白コンテンツ(YUEN WEDDING)をノッチ点の少し下=近くに詰める(LP-B位置) */
body.lp-b .lp-fair {
  margin-top: 0;
  padding-top: 18px;
}

/* Qアイコン(? を柔らかい丸に・番号01/02を置換) */
body.lp-b .lp-worry__q {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #eaf1f2;
  color: #5e8893;
  font-family: var(--yf-mincho);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
/* お悩み本文(長文・左寄せ) */
body.lp-b .lp-worry__txt {
  flex: 1;
  min-width: 0;                  /* flex行内で本文を折り返させる(これが無いと1行のまま吹き出しが横溢れ) */
  width: auto;
  padding-bottom: 0;
  text-align: left;
  white-space: normal;           /* base の white-space:nowrap を打消し(これが無いと1行で溢れる) */
  border-bottom: 0;              /* base の点線下線(独自装飾)を撤去 */
  font-family: var(--yf-mincho);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .2px;
  color: #4a463d;
}

/* ===================== 外部CDNアセット差し替え② 描画中3点 (EXP-156・2026-06-27・v2) =====
   dist/yuen-lp-b.css 側で 外部CDNの url() は全て none に purge 済。実描画される3点を
   YUEN独自のCSS描画装飾へ置換(全行 body.lp-b スコープ=variant A 非干渉)。
   色味(ローズ#c28d8b 等)はLP-Bベースのまま=形状だけ自作。 */

/* (a) 4理由タイトル両脇の矢印(ic-arrow-white・汎用シンボル)→ 小さな白いダイヤ(CSS) */
body.lp-b .lp-point__title::before,
body.lp-b .lp-point__title::after {
  background: #fff;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* (b) FAQ開閉の矢印(ic-arrow-pink・汎用シンボル)→ CSS描画シェブロン(is-activeで上向き) */
body.lp-b .lp-faq__q-btn::after {
  background: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #c77f88;
  border-bottom: 1.5px solid #c77f88;
  transform: translateY(-70%) rotate(45deg);
}
body.lp-b .lp-faq__q-btn.is-active::after {
  rotate: 0deg;
  transform: translateY(-25%) rotate(-135deg);
}

/* (c) 4理由カードの旗(flag-point=従来デザイン)→ D4: 白タグ(ローズ天線)+「選ばれる/理由」+明朝番号
   福田選択=LP-Bの秀逸な白タグ構造ベース・白地で可読・文言は従来案と変えて「選ばれる理由」。
   ::before=白タグ+ラベル(右に番号スペース) / ::after=明朝番号(タグ右側へ重ねる)。 */
body.lp-b .lp-point__item-img::before {
  content: "選ばれる\A理由";
  white-space: pre;
  background: #fff;
  border: none;
  border-top: 2.5px solid #c28d8b;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 9px rgba(74, 63, 40, .17);
  width: auto;
  height: auto;
  top: 11px;
  left: 11px;
  padding: 5px 42px 6px 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .03em;
  color: #a8847f;
  text-align: left;
  display: block;
}
body.lp-b .lp-point__item-img::after {
  content: counter(item-counter, decimal-leading-zero);
  top: 16px;
  left: 56px;
  width: auto;
  height: auto;
  display: block;
  padding: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 22px;
  color: #9d545b;
  line-height: 1;
}

/* ===================== 色味スキーム C「ダスティ青」(福田選択2026-06-27) =====================
   鮮やかさ/明度は維持し色相のみ若干調整。お悩み(teal)+4理由(pink/rose)。
   🔴 色と構造の分離: 構造側の既定色(ティール #a1c1c9 / ローズ #c28d8b / 淡桜 #eddcdc 等)を
      この1ブロックが上書きする。今後の色調整は原則ここだけ触る。 */
body.lp-b .lp-worry,
body.lp-b .lp-worry__bridge { background-color: #9dbdcd; }            /* お悩み地: ティールをやや青寄り */
body.lp-b .lp-worry__q { background-color: #e8eef4; color: #59839e; }  /* Qアイコン */
body.lp-b .lp-point.lp-bg--pink { background-color: #ecdce1; }         /* 4理由地: 淡桜をやや青み */
body.lp-b .lp-point { border-top-color: #c08a91; }
body.lp-b .lp-point__title { background-color: #c08a91; }             /* ローズ帯をやや藤に */
body.lp-b .lp-point__item-img::before { border-top-color: #c08a91; }  /* 番号ラベルの上線 */
body.lp-b .lp-pink,
body.lp-b .lp-point__item-text .lp-pink { color: #cf6678; }           /* 強調ローズ */

/* 4理由: ストーリーを見出し直下「リード文」に出す(福田 案A・文字量バランス改善2026-06-27)。
   核ストーリーはここで語り、各理由カードは均等な短文に=読みやすく。 */
body.lp-b .lp-point__lead {
  display: block;
  max-width: 312px;
  margin: 2px auto 26px;
  text-align: left;
  font-family: var(--yf-mincho);
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: .3px;
  color: #38322a;                /* 淡桜地で読みやすいよう本文を濃いめに(福田指摘の可読性改善) */
}
/* 4理由は淡桜地のため、強調ローズ #cf6678 が薄く沈みがち→ピンク地で読める深ローズに
   (point内のみ。白地の他セクションの .lp-pink は #cf6678 のまま) */
body.lp-b .lp-point .lp-pink { color: #c4356a; }   /* #a8455a→#c4356a: 淡桜地で強調がより鮮やかに目立つよう(福田) */
/* カード本文を lp-fair__lead 相当に縮小=カード数が多いのでセクションを短縮(福田2026-06-28)。
   font-familyは変えずサイズ/行間のみ(14→13px・1.8→1.75・.7→.4px)。 */
body.lp-b .lp-point__item-text { font-size: 13px; line-height: 1.75; letter-spacing: .4px; }
/* 🔴 強調(lp-pink=「当日すべて込み」や数字¥24,800等)は dist で Hiraginoゴシックを明示指定され
   本文と別フォントになっていた(違和感+数字フォールバックの真因)。本文と同フォントに統一(inherit)し、
   差は「太さ+色」で付ける。数字も本文フォントが担当しフォールバック解消。 */
/* 🔴 強調(lp-pink)が dist で Hiraginoゴシックを明示指定され本文(游明朝)と別フォント=違和感+数字
   フォールバックの真因。point だけでなく flow(.lp-flow__item-desc)・about(.lp-about__desc)にも有り→
   .lp-pink 全体を本文フォントに統一(inherit)+太字(600)で差別化。色は既存のまま(福田2026-06-28)。 */
body.lp-b .lp-pink { font-family: inherit; font-weight: 700; }   /* 600→700: 本文(400)との差をはっきり(福田) */
/* 🔴 理由カードが前後で「かぶる」(福田): 真因= `.lp-point__list > li + li { margin-top: -45px }`
   (スタックドカード設計の負マージン)+ 上向き影(0 -8px)+ 下余白70px。
   → 負マージンを正の余白に + 全周のふんわり影 + 下余白を詰めて独立カードに(カード群も短縮)。 */
body.lp-b .lp-point__list > li + li { margin-top: 14px; }
/* ===== 画像なしバリアント(body.lp-noimg): 選ばれる理由カードを画像無しで先行調整(福田2026-06-28)。
   デザイナーの差込画像が用意できるまで、別URLで画像なしデザインのすり合わせ→リリースを目指す。
   画像(img)を隠す。番号バッジは「カード上端に少しはみ出す横ピル(選ばれる理由 0X・1行)」に=
   見出し枠の無駄な高さを無くしカードを短く(福田2026-06-28)。🔴 画像版(body.lp-b のみ)のバッジは一切変えない。 ===== */
body.lp-noimg .lp-point__item-img img { display: none !important; }
body.lp-noimg .lp-point__item { position: relative !important; padding-top: 22px !important; }
body.lp-noimg .lp-point__item-img {
  position: static !important; aspect-ratio: auto !important;
  height: 0 !important; min-height: 0 !important; margin: 0 !important;
  background: transparent !important; width: 100% !important; overflow: visible !important;
}
/* ::before を「選ばれる理由 0X」の1行ピルに(改行をやめる)。カード(position:relative)基準で上端からはみ出す */
body.lp-noimg .lp-point__item-img::before {
  content: "選ばれる理由 " counter(item-counter, decimal-leading-zero) !important;
  position: absolute !important; top: -11px !important; left: 18px !important;
  white-space: nowrap !important; width: auto !important; height: auto !important;
  background: #fff !important; border: 1.5px solid #c08a91 !important; border-radius: 100px !important;
  padding: 5px 15px !important;
  font-family: var(--yf-gothic) !important; font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; color: #a8455a !important; line-height: 1.2 !important;
  box-shadow: 0 2px 7px rgba(74, 63, 40, .12) !important;
}
body.lp-noimg .lp-point__item-img::after { display: none !important; }
body.lp-b .lp-point__item {
  padding-bottom: 24px;                             /* 70px→24px: スタック前提の余白を詰める=短縮 */
  box-shadow: 0 4px 16px rgba(45, 32, 5, .10);      /* 上向き影→全周のふんわり影=独立カード */
}

/* ===== 現行 #reserve / #line モーダルを新デザイン(中央カード)に作り替え(福田) =====
   現行は5クラスの深いセレクタ(.c-reserve.is-open .c-reserve_inner .c-reserve_textbox .c-reserve_cta .c-reserve_ctaButton)
   ゆえ !important で確実に新デザインへ。#reserve仕組み(is-open+hash→reservation_popup計測)は温存。 */
body.lp-b .c-reserve_bg { background: rgba(74,63,40,.55) !important; }
body.lp-b .c-reserve_inner { position: relative !important; max-width: 360px !important; max-height: 86vh !important; overflow-y: auto !important; background: var(--yf-bg) !important; border-radius: 16px !important; padding: 34px 22px 28px !important; box-shadow: 0 14px 44px rgba(0,0,0,.28) !important; }
body.lp-b .c-reserve_closeButton { position: absolute !important; top: 14px !important; right: 16px !important; width: 28px !important; height: 28px !important; min-width: 0 !important; border-radius: 50% !important; background: rgba(74,63,40,.08) !important; font-size: 0 !important; color: transparent !important; border: 0 !important; padding: 0 !important; }
body.lp-b .c-reserve_closeButton::before, body.lp-b .c-reserve_closeButton::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 13px !important; height: 1.5px !important; background: var(--yf-ink) !important; }
body.lp-b .c-reserve_closeButton::before { transform: translate(-50%,-50%) rotate(45deg) !important; }
body.lp-b .c-reserve_closeButton::after { transform: translate(-50%,-50%) rotate(-45deg) !important; }
body.lp-b .c-reserve_title { text-align: center !important; font-family: var(--yf-mincho) !important; font-size: 20px !important; font-weight: 600 !important; color: var(--yf-brown) !important; }
body.lp-b .c-reserve_description { text-align: center !important; font-family: var(--yf-gothic) !important; font-size: 12.5px !important; line-height: 1.9 !important; color: var(--yf-ink) !important; }
body.lp-b .c-reserve_cta { margin-top: 18px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
body.lp-b .c-reserve_ctaButton { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; min-width: 0 !important; text-align: left !important; padding: 15px 16px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid #e7ddd3 !important; font-family: var(--yf-mincho) !important; font-size: 15px !important; color: var(--yf-ink) !important; }
body.lp-b .c-reserve_ctaButton::after { content: "" !important; width: 8px !important; height: 8px !important; border-top: 1.5px solid var(--yf-pink) !important; border-right: 1.5px solid var(--yf-pink) !important; border-left: 0 !important; border-bottom: 0 !important; transform: rotate(45deg) !important; flex-shrink: 0 !important; }
body.lp-b .c-reserve_ctaButton_text { display: block !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: .04em !important; line-height: 1.4 !important; }
body.lp-b .c-reserve_ctaButton_text small { font-weight: 400 !important; font-size: 11px !important; color: rgba(74,63,40,.6) !important; margin-left: 4px !important; }

/* ===== 入籍記念・メモリアルオプション(lp-memorial・新LPトンマナ・画像なし) ===== */
body.lp-b .lp-memorial__lead { max-width: 640px; margin: 16px auto 0; padding: 0 22px; text-align: center; font-family: var(--yf-gothic); font-size: 13px; line-height: 2; color: var(--yf-ink); }
body.lp-b .lp-memorial__list { max-width: 600px; margin: 22px auto 0; padding: 0 22px; display: flex; flex-direction: column; gap: 10px; list-style: none; }
body.lp-b .lp-memorial__list li { background: var(--yf-bg); border: 1px solid #e7ddd3; border-radius: 10px; padding: 14px 16px; }
body.lp-b .lp-memorial__label { display: block; font-family: var(--yf-mincho); font-size: 15px; font-weight: 600; color: var(--yf-brown); }
body.lp-b .lp-memorial__text { display: block; margin-top: 5px; font-family: var(--yf-gothic); font-size: 11.5px; line-height: 1.8; color: rgba(74,63,40,.72); }
body.lp-b .lp-memorial__cta { margin: 22px auto 0; padding: 0 22px; max-width: 600px; text-align: center; }
body.lp-b .lp-memorial__cta-link { display: inline-flex; align-items: center; gap: 6px; padding: 13px 28px; border: 1px solid var(--yf-gold); border-radius: 999px; font-family: var(--yf-mincho); font-size: 14px; color: var(--yf-brown); background: #fff; }

/* 入籍memorial: 点々(lp-section-border)除去に伴う余白 + ヘッダー回避スクロール + 注意点リンク */
body.lp-b .lp-memorial { margin: 52px 0 8px; scroll-margin-top: 84px; }
body.lp-b .yf-notice__link { color: var(--yf-pink); font-weight: 600; text-decoration: underline; white-space: nowrap; }