/* theme-753.css — 七五三（753-photo）テーマ層
   依存：global.css / components.css / menu.css / menu-shared.css（この順で読み込み＝後勝ち）
   読み込み条件：functions.php で is_page_template('_menu.php') かつ post_slug === '753-photo'
   役割：共通骨格 menu-shared.css（寒色デフォルト基調）の上に、七五三の和色暖色化・
        料金タブ（1人用/きょうだい用）・和花あしらいを per-slug で重ねる。
        .nb__page スコープで詳細度を上げて骨格を上書き（20th は menu-shared のみ＝非影響）。
   由来：旧 menu-753.css のうち、menu-shared.css（旧 menu-20th.css）との差分のみを切り出し。
        現出力を一切変えないため、暖色層は元の記述（セレクタ再定義方式）をそのまま移設。
   ================================================================ */

/* ── 共通骨格との差分①：CTAボタンの字間。
      骨格 .nb__cta-line は letter-spacing .08em。七五三は Skia 豆腐化対策（.04em 以下）で .02em。
      menu-shared の後に読まれるこの上書きが後勝ち（同詳細度）＝旧 menu-753.css L119 と同値。 ── */
.nb__cta-line { letter-spacing: .02em; }

/* ── 共通骨格との差分②以降：和色変数・暖色テーマ層（旧 menu-753.css から移設） ── */
/* 料金タブ（1人用 / きょうだい用）の「地」は menu-shared.css に移設済み（2026-07-11・
   /price/ の七五三タブでも同じ見た目を再現するため全メニュー共通の骨格層へ）。
   ここには 753 固有の朱色アクセントのみ残す（下の「料金タブ アクティブ：文字を朱赤に」）。 */


/* ═══════════════════════════════════════════════
   七五三 配色アクセント（和色・標準）
   共通骨格（クリーム×チャコール×ゴールド）は維持し、
   七五三の和色を差し色として要所に添える。写真館の品位優先で単色基調・
   派手グラデは避け、被布の伝統色＝朱赤を見出し装飾／バッジ／タブに。
   ※アンカーナビ（.nb__page-nav-link）は components.css 管轄のため触らない。
═══════════════════════════════════════════════ */
.nb__page {
  --nb-shu:    #d6543e;  /* 朱色（鮮やか・被布/神社の朱。テラコッタ寄り#c2685aから赤鮮やかに調整） */
  --nb-wakaba: #8ba888;  /* 若草 */
  --nb-sakura: #d99aa6;  /* 桜 */
}
/* セクション区切り線：朱赤→ゴールドのグラデで七五三らしい華やぎ */
.nb__page .jm__hdiv {
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--nb-shu), var(--gold));
}
/* 暗背景セクション（撮影の流れ・CTA）は朱を淡めに重ねて馴染ませる */
.nb__flow-detail .jm__hdiv,
.nb__chapter--cta .jm__hdiv {
  background: linear-gradient(90deg, rgba(194, 104, 90, .85), rgba(184, 151, 90, .7));
}
/* 料金 主役カードのバッジ：朱赤背景（★人気No.1を引き立てる） */
.nb__page .nb__price-badge {
  background: var(--nb-shu);
}
/* 料金タブ アクティブ：文字を濃朱に（鮮朱#d6543eは白背景4.04:1でAA割れ→濃朱5.85:1・2026-07-21） */
.nb__price-tab.is-active {
  color: var(--nb-shu-deep);
}
/* ═══════════════════════════════════════════════
   七五三 デザイン強化：黒/寒色セクションの暖色化（成人式との差別化）
   成人式そっくりの charcoal(黒)・indigo(青) のセクション群を、七五三の
   温かい和色（淡桜・淡若草・朱）に。白文字は明背景で読めるよう濃色トークンへ。
   文字 = --nb-text-warm(#5a4a44 全背景7:1) / 強調 = 濃朱#a8453a・濃桜#a85268・濃若草#4f6b4d（白背景4.5:1+）。
═══════════════════════════════════════════════ */
.nb__page {
  --nb-shu-deep:   #b03f2a;  /* 濃朱：明背景の文字/アイコン用（鮮やか朱の濃い版・白背景5:1+） */
  --nb-sakura-dk:  #a85268;  /* 濃桜：文字用 */
  --nb-wakaba-dk:  #4f6b4d;  /* 濃若草：文字/ステップ番号用（5:1+） */
  --nb-text-warm:  #5a4a44;  /* 温かい本文色（全和色背景で7:1前後） */
  --nb-sakura-lt:  #fdf0f3;  /* 淡桜背景 */
  --nb-sakura-lt2: #f6dde3;  /* 淡桜背景（濃）グラデ用 */
  --nb-wakaba-lt:  #eef5ee;  /* 淡若草背景 */
  --nb-wakaba-lt2: #e0ebdf;  /* 淡若草背景（濃）グラデ用 */
}
/* ① HERO直下ジャーニー：黒→淡桜の明るい流れ図に（白文字→濃色） */
.nb__page .nb__hero-jrn { background: var(--cream); border-top: 1px solid var(--light-gray); }
.nb__page .nb__hero-jrn-h2 { color: var(--charcoal); }
.nb__page .nb__hero-jrn-h2 em { color: var(--nb-shu-deep); }
.nb__page .nb__hero-jrn-sub { color: var(--nb-text-warm); }
.nb__page .nb__hero-jrn-label { color: var(--nb-shu-deep); }
.nb__page .nb__hero-jrn-title { color: var(--nb-text-warm); }
.nb__page .nb__hero-jrn-dot { background: #ffffff; border-color: var(--nb-sakura-dk); }
.nb__page .nb__hero-jrn-dot svg { stroke: var(--nb-shu-deep); }
.nb__page .nb__hero-jrn-dot--active { background: var(--nb-shu); border-color: var(--nb-shu); }
.nb__page .nb__hero-jrn-dot--active svg { stroke: #ffffff; }
.nb__page .nb__hero-jrn-step:not(:last-child)::before { background: rgba(168, 82, 104, .3); }
@media (max-width: 767px) {
  .nb__page .nb__hero-jrn-steps::before { background: rgba(168, 82, 104, .3); }
  .nb__page .nb__hero-jrn-dot { background: #ffffff; }
  /* 活性ドット（1つ目=TODAY）は朱赤を再指定。これが無いと上の白指定で潰れ、白アイコンが白背景に溶けて空に見える */
  .nb__page .nb__hero-jrn-dot--active { background: var(--nb-shu); }
}

/* ② 中間CTA：黒→淡桜グラデ（白文字→濃色） */
.nb__page .nb__mid-cta { background: linear-gradient(160deg, var(--nb-sakura-lt) 0%, var(--nb-sakura-lt2) 100%); }
.nb__page .nb__mid-cta-title { color: var(--charcoal); }
.nb__page .nb__mid-cta-sub { color: var(--nb-text-warm); text-shadow: none; }
.nb__page .nb__mid-cta-example { color: var(--nb-text-warm) !important; text-shadow: none; }

/* ③ 料金後CTA：黒→淡桜グラデ（白文字・ゴールド→濃色・朱） */
.nb__page .nb__price-after-cta { background: linear-gradient(160deg, var(--nb-sakura-lt) 0%, var(--nb-sakura-lt2) 100%); }
.nb__page .nb__price-after-cta::before { background: var(--nb-shu); width: 56px; height: 2px; }
.nb__page .nb__price-after-cta-en { color: var(--nb-shu-deep); opacity: 1; }
.nb__page .nb__price-after-cta-title { color: var(--charcoal); }
.nb__page .nb__price-after-cta-title em { color: var(--nb-shu-deep); }
.nb__page .nb__price-after-cta-desc { color: var(--nb-text-warm); }
.nb__page .nb__price-after-cta-note { color: var(--nb-text-warm); }

/* ④ 撮影の流れ（flow-detail）：黒→淡若草グラデ（白文字・ゴールド→濃若草/濃色） */
.nb__page .nb__flow-detail { background: linear-gradient(180deg, var(--nb-wakaba-lt) 0%, var(--nb-wakaba-lt2) 100%); }
.nb__page .nb__flow-detail .jm__sec-h2 { color: var(--charcoal); }
.nb__page .nb__flow-detail .jm__sec-sub { color: var(--nb-text-warm); }
.nb__page .nb__flow-dl-dot { background: #ffffff; border-color: var(--nb-wakaba-dk); color: var(--nb-wakaba-dk); }
.nb__page .nb__flow-dl-phase { color: var(--nb-wakaba-dk); opacity: 1; }
.nb__page .nb__flow-dl-title { color: var(--charcoal); }
.nb__page .nb__flow-dl-desc { color: var(--nb-text-warm); }
.nb__page .nb__flow-dl-cost { color: var(--nb-wakaba-dk); background: rgba(79, 107, 77, .08); border-color: rgba(79, 107, 77, .28); }
.nb__page .nb__flow-dl-item:not(:last-child)::after { background: linear-gradient(to bottom, rgba(79, 107, 77, .5), rgba(79, 107, 77, .1)); }
.nb__page .nb__flow-dl-qa { background: rgba(79, 107, 77, .06); }
.nb__page .nb__flow-dl-qa-q { color: var(--nb-wakaba-dk); }
.nb__page .nb__flow-dl-qa-a { color: var(--nb-text-warm); }
/* 「当日の目安」ブロック（CH6冒頭）＝明地テーマの上書き。罫線と余白で組む（カード化・角丸影・一辺色バーなし）。 */
.nb__page .nb__flow-est-heading { color: var(--nb-wakaba-dk); border-bottom-color: color-mix(in srgb, var(--nb-wakaba-dk) 32%, transparent); }
.nb__page .nb__flow-est-row { border-bottom-color: color-mix(in srgb, var(--nb-wakaba-dk) 16%, transparent); }
.nb__page .nb__flow-est-label { color: var(--nb-text-warm); }
.nb__page .nb__flow-est-val { color: var(--charcoal); }
.nb__page .nb__flow-est-note { color: var(--nb-text-warm); }

/* flow-detail の .line-cta-btn は L1321 で暗背景用アウトライン緑。明背景でも緑文字は視認可のため維持（将来編集時の相互参照用コメント） */

/* ⑤ 緊急性ブロック：青(indigo)→桜濃〜朱茶の暖色グラデ（白文字維持・AA） */
.nb__page .nb__urgency { background: linear-gradient(135deg, #8a4a52 0%, #6f3a42 100%); }

/* ⑥ 最終CTA overlay：青み→朱茶の暖色に（背景画像は753ヒーローへ別途差替） */
.nb__page .nb__cta-bg-overlay { background: linear-gradient(to bottom, rgba(120, 60, 70, .5) 0%, rgba(48, 28, 32, .82) 100%); }

/* ⑦ 衣装コレクション（furi-wrap・画像登録時に表示）：黒帯→淡桜帯 */
.nb__page .furi-wrap { background: linear-gradient(160deg, var(--nb-sakura-lt2) 0%, #efd8de 100%); }
.nb__page .furi-header p { color: var(--nb-text-warm); }
/* 帯を明るくしたため、components.css の暗地用 .text-cta 切替（--gold-lt）を明るい地用へ戻す */
.nb__page .furi-wrap .lbl-gold { color: var(--gold-dk); }
.nb__page .furi-wrap .text-cta { color: var(--gold-dk); box-shadow: 4px 4px 0 rgba(184,151,90,.10); }
.nb__page .furi-wrap .text-cta::before { border-color: rgba(184,151,90,.24); }
.nb__page .furi-wrap .text-cta:hover { color: var(--gold-lt); background: rgba(184,151,90,.045); box-shadow: 2px 2px 0 rgba(184,151,90,.14); }

/* ⑧ 比較表ヘッダー（ch1）：黒→朱赤グラデ（白文字・当店列も白で明示） */
.nb__page .nb__compare-thead { background: linear-gradient(135deg, var(--nb-shu) 0%, var(--nb-shu-deep) 100%); }
.nb__page .nb__compare-col--us { color: #ffffff !important; }

/* ═══════════════════════════════════════════════
   七五三 和花あしらい（⑤控えめ和装飾）：子供らしい梅の花を章見出しに
   .jm__marker は flex gap:16px のため、梅は marker-label の ::before に置いて
   gap の影響を1要素内に閉じる（検証指摘の余白崩れ回避）。色は濃桜で全背景4.5:1+。
═══════════════════════════════════════════════ */
.nb__page .jm__marker-label::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  background-color: var(--nb-sakura-dk);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='3.4'/%3E%3Ccircle cx='18.6' cy='9.8' r='3.4'/%3E%3Ccircle cx='16.1' cy='17.8' r='3.4'/%3E%3Ccircle cx='7.9' cy='17.8' r='3.4'/%3E%3Ccircle cx='5.4' cy='9.8' r='3.4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='3.4'/%3E%3Ccircle cx='18.6' cy='9.8' r='3.4'/%3E%3Ccircle cx='16.1' cy='17.8' r='3.4'/%3E%3Ccircle cx='7.9' cy='17.8' r='3.4'/%3E%3Ccircle cx='5.4' cy='9.8' r='3.4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 暗背景が残る最終CTA（#chapter9）章ラベルだけは梅を淡桜で（朱だと沈む） */
.nb__page .nb__chapter--cta .jm__marker-label::before { background-color: var(--nb-sakura); }

/* ═══════════════════════════════════════════════
   CH4 独立CTA（.nb__furi-cta-wrap / .nb__furi-cta-btn）は全メニュー共通の骨格として
   menu-shared.css へ移動（2026-06-04）。家族写真など card3_cta=false の新メニューでも
   装飾されるように。753 は menu-shared を読み込むため見た目は不変。
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   花装飾（和モチーフ）の展開（2026-05-31 オーナー選択）。
   料金後CTA＝桜散らし／中間CTA＝梅／緊急性＝立涌／ジャーニー＝波千鳥（2026-07-21 亀甲から差し替え）。被らないよう各所でモチーフを変更。
   pointer-events:none＋低opacity＋本文 z-index:1 で可読性維持。
   最終CTA(#chapter9)・写真帯は写真背景のため装飾なし。
═══════════════════════════════════════════════ */
.nb__page .nb__price-after-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: auto; height: auto;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cdefs%3E%3Cg id='pt'%3E%3Cpath d='M0 -2 C-2.6 -4 -3.6 -7.5 -2.3 -10 C-1.6 -11.3 -0.6 -9.6 0 -8.4 C0.6 -9.6 1.6 -11.3 2.3 -10 C3.6 -7.5 2.6 -4 0 -2 Z'/%3E%3C/g%3E%3Cg id='bl'%3E%3Cuse href='%23pt'/%3E%3Cuse href='%23pt' transform='rotate(72)'/%3E%3Cuse href='%23pt' transform='rotate(144)'/%3E%3Cuse href='%23pt' transform='rotate(216)'/%3E%3Cuse href='%23pt' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23a85268'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23c77f8d'%3E%3Cuse href='%23bl' transform='translate(42 42) scale(1.5) rotate(15)'/%3E%3Cuse href='%23bl' transform='translate(182 32) scale(0.95) rotate(-25)'/%3E%3Cuse href='%23bl' transform='translate(112 92) scale(1.15) rotate(40)'/%3E%3Cuse href='%23bl' transform='translate(210 118) scale(1.6) rotate(10)'/%3E%3Cuse href='%23bl' transform='translate(58 142) scale(1.05) rotate(-15)'/%3E%3Cuse href='%23bl' transform='translate(150 162) scale(0.82) rotate(30)'/%3E%3Cuse href='%23bl' transform='translate(22 104) scale(0.72) rotate(60)'/%3E%3Cuse href='%23bl' transform='translate(120 28) scale(0.6) rotate(5)'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  opacity: .15;
  pointer-events: none;
  z-index: 0;
}
.nb__page .nb__price-after-cta-inner { position: relative; z-index: 1; }

/* 中間CTA：梅（枝＋花）。淡桜グラデ背景に濃いめ。 */
.nb__page .nb__mid-cta { position: relative; overflow: hidden; }
.nb__page .nb__mid-cta > * { position: relative; z-index: 1; }
.nb__page .nb__mid-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130'%3E%3Cdefs%3E%3Cg id='um'%3E%3Ccircle cx='0' cy='-6.2' r='3.6'/%3E%3Ccircle cx='5.9' cy='-1.9' r='3.6'/%3E%3Ccircle cx='3.6' cy='5' r='3.6'/%3E%3Ccircle cx='-3.6' cy='5' r='3.6'/%3E%3Ccircle cx='-5.9' cy='-1.9' r='3.6'/%3E%3Ccircle r='2' fill='%23d6543e'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M196 8 Q150 30 120 56 Q92 80 70 122' fill='none' stroke='%23b8975a' stroke-width='1.6' opacity='0.6'/%3E%3Cg fill='%23a85268'%3E%3Cuse href='%23um' transform='translate(186 16) scale(1.5) rotate(20)'/%3E%3Cuse href='%23um' transform='translate(150 34) scale(1.1) rotate(-20)'/%3E%3Cuse href='%23um' transform='translate(118 58) scale(1.35) rotate(35)'/%3E%3Cuse href='%23um' transform='translate(88 86) scale(0.95) rotate(10)'/%3E%3Cuse href='%23um' transform='translate(68 116) scale(1.15) rotate(-30)'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  opacity: .11;
  pointer-events: none;
  z-index: 0;
}

/* 緊急性：立涌（たてわく）。えんじ背景に明色の縦曲線（円の連続を避け、集合体恐怖症に配慮）。 */
.nb__page .nb__urgency { position: relative; overflow: hidden; }
.nb__page .nb__urgency-body,
.nb__page .nb__urgency-badge { position: relative; z-index: 1; }
.nb__page .nb__urgency::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 80'%3E%3Cg fill='none' stroke='%23e6bcc4' stroke-width='1.3'%3E%3Cpath d='M14 0 Q3 20 14 40 Q25 60 14 80'/%3E%3Cpath d='M34 0 Q45 20 34 40 Q23 60 34 80'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 48px 80px repeat;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}

/* HERO直下ジャーニー：波千鳥（オーナー素材 namichidori2.svg 由来）。千鳥＝「千の福を取る」勝運、
   波と千鳥＝荒波を共に越える＝家族の絆。七五三に好相性の吉祥柄。
   派生 namichidori-aka.svg ＝ 青背景と飛沫（cls-3）を除去し、鳥を朱 #a85268・波線を同色 opacity .55 に
   染めたもの（svgo -p 1 済み・元 namichidori2.svg は削除済み＝git履歴が記録。20th 青海波と同方式）。
   ★2026-07-21 オーナーFB：初代の亀甲（自作data URI六角格子）から差し替え・7案比較で波千鳥「案H＝原寸cover」選定。
   他所（桜/梅/立涌/麻の葉）とモチーフ重複なし。本文は z-index:1 で前面。 */
.nb__page .nb__hero-jrn { position: relative; overflow: hidden; }
.nb__page .nb__hero-jrn > * { position: relative; z-index: 1; }
.nb__page .nb__hero-jrn::after {
  content: '';
  position: absolute; inset: 0;
  background: url("../../img/menu/753/namichidori-aka.svg") center / cover no-repeat;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}

/* 撮影の流れ（flow-detail）：麻の葉あしらい。「子がすくすく育つ＝成長祈願」の代表文様で七五三に好相性。
   三角格子＋各三角の重心スポークで六芒星が連続する正調の敷き詰め文様（40×69.282 を縦横 repeat）。
   若草グラデ背景に濃若草・極細線で上品に。立涌(緊急性)・梅(中間CTA)・桜(料金後CTA)とモチーフ重複なし。本文(-inner)は z-index:1 で前面・可読性維持。 */
.nb__page .nb__flow-detail { position: relative; overflow: hidden; }
.nb__page .nb__flow-detail-inner { position: relative; z-index: 1; }
.nb__page .nb__flow-detail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 69.282'%3E%3Cg fill='none' stroke='%234f6b4d' stroke-width='0.8'%3E%3Cpath d='M0 0 L40 0'/%3E%3Cpath d='M0 69.282 L40 69.282'/%3E%3Cpath d='M-20 34.641 L20 34.641'/%3E%3Cpath d='M20 34.641 L60 34.641'/%3E%3Cpath d='M0 0 L20 34.641'/%3E%3Cpath d='M40 0 L20 34.641'/%3E%3Cpath d='M0 0 L-20 34.641'/%3E%3Cpath d='M40 0 L60 34.641'/%3E%3Cpath d='M20 34.641 L0 69.282'/%3E%3Cpath d='M20 34.641 L40 69.282'/%3E%3Cpath d='M-20 34.641 L0 69.282'/%3E%3Cpath d='M60 34.641 L40 69.282'/%3E%3Cpath d='M20 11.547 L0 0'/%3E%3Cpath d='M20 11.547 L40 0'/%3E%3Cpath d='M20 11.547 L20 34.641'/%3E%3Cpath d='M0 23.094 L0 0'/%3E%3Cpath d='M0 23.094 L20 34.641'/%3E%3Cpath d='M0 23.094 L-20 34.641'/%3E%3Cpath d='M40 23.094 L40 0'/%3E%3Cpath d='M40 23.094 L60 34.641'/%3E%3Cpath d='M40 23.094 L20 34.641'/%3E%3Cpath d='M20 57.736 L20 34.641'/%3E%3Cpath d='M20 57.736 L0 69.282'/%3E%3Cpath d='M20 57.736 L40 69.282'/%3E%3Cpath d='M0 46.188 L-20 34.641'/%3E%3Cpath d='M0 46.188 L20 34.641'/%3E%3Cpath d='M0 46.188 L0 69.282'/%3E%3Cpath d='M40 46.188 L20 34.641'/%3E%3Cpath d='M40 46.188 L60 34.641'/%3E%3Cpath d='M40 46.188 L40 69.282'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 110.85px repeat;
  opacity: .07; /* .12は文字と競って濃い（オーナー指摘 2026-07-21）＝気配程度へ */
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════
   七五三 デザイン監査 反映（2026-05-30 多角評価ワークフロー）
   「成人式テンプレ流用感」の表現要因を七五三トーンへ。戦略装置（比較表・
   信頼バッジ・定義ボックス・料金）の構造・文言・AIO論理は一切不変。色/装飾のみ。
   .nb__page スコープ。global/components/アンカーナビは不可触。
═══════════════════════════════════════════════ */

/* B1 比較表：他社✗の攻撃的な赤(#c0392b)をやめ、当店○を温かく引き立てる品位ある対比へ。
   表の構造・✓✗△・AIO比較引用性は不変。写真館が他社を煽らない見せ方にするだけ。 */
.nb__page .nb__yn--no   { color: #6f6259; }                                   /* 他社✗：暖灰（AA 4.5:1・攻撃色は出さない） */
.nb__page .nb__yn--cond { color: #786a5a; }                                   /* △：暖灰（cream 4.86:1・奇数行 4.70:1＝AA達成。旧#7d7060は4.47/4.32でAA未達だった・2026-07-06） */
.nb__page .nb__compare-cell--us .nb__yn--yes { color: var(--nb-wakaba-dk); }  /* 当店○：若草で"肯定の積み上げ"を温かく強調 */

/* B2 定義ボックス（AIO）：金の縦線＋英字uppercaseの"規約書"感を、淡桜の和小札へ。
   定義・数値・主語のテキストは一字も変えない（AIO引用源を維持）。枠と見出しの体裁のみ和へ。 */
.nb__page .nb__definition {
  border-left: none;
  border: 1px solid var(--nb-sakura-lt2);
  border-radius: 12px;
  background: linear-gradient(165deg, var(--nb-sakura-lt) 0%, var(--warm-white) 70%);
}
.nb__page .nb__definition-label {
  font-family: var(--jp);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--nb-sakura-dk);
  display: inline-flex;
  align-items: center;
}
.nb__page .nb__definition-label::before {
  content: '';
  display: inline-block;
  width: 15px; height: 15px; margin-right: 8px;
  background-color: var(--nb-sakura-dk);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='3.4'/%3E%3Ccircle cx='18.6' cy='9.8' r='3.4'/%3E%3Ccircle cx='16.1' cy='17.8' r='3.4'/%3E%3Ccircle cx='7.9' cy='17.8' r='3.4'/%3E%3Ccircle cx='5.4' cy='9.8' r='3.4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='3.4'/%3E%3Ccircle cx='18.6' cy='9.8' r='3.4'/%3E%3Ccircle cx='16.1' cy='17.8' r='3.4'/%3E%3Ccircle cx='7.9' cy='17.8' r='3.4'/%3E%3Ccircle cx='5.4' cy='9.8' r='3.4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nb__page .nb__definition-text strong { color: var(--nb-shu-deep); }

/* B3 料金カード：画像未登録時の"同一の雲アイコン4連"がテンプレ感の元。
   背景を和色グラデにし、プラン別に色を循環させて4枚を一目で識別（構造・価格・バッジは不変）。 */
.nb__page .nb__price-card-media--icon {
  background: linear-gradient(160deg, var(--nb-sakura-lt) 0%, var(--warm-white) 100%);
}
.nb__page .nb__price-card-media--icon svg { color: var(--nb-sakura-dk); opacity: .9; }
.nb__page .nb__price-plans .nb__price-card:nth-child(2) .nb__price-card-media--icon { background: linear-gradient(160deg, var(--nb-wakaba-lt) 0%, var(--warm-white) 100%); }
.nb__page .nb__price-plans .nb__price-card:nth-child(2) .nb__price-card-media--icon svg { color: var(--nb-wakaba-dk); }
.nb__page .nb__price-plans .nb__price-card:nth-child(3) .nb__price-card-media--icon { background: linear-gradient(160deg, rgba(184,151,90,.16) 0%, var(--warm-white) 100%); }
.nb__page .nb__price-plans .nb__price-card:nth-child(3) .nb__price-card-media--icon svg { color: var(--gold-dk); }
.nb__page .nb__price-plans .nb__price-card:nth-child(4) .nb__price-card-media--icon svg { color: var(--nb-shu-deep); }

/* B4 装飾英字：和の世界観に馴染ませる。字句は構造装置として残し、色だけ和色へ寄せて
   「英字の振りかけ感」を抑える。For Your Case は L1611 で対応済み。 */
.nb__page .nb__hero-card-en { color: var(--nb-sakura); }                       /* Shichi-Go-San：暗背景HEROなので明るい桜で映えさせる */
.nb__page .jm__marker-label { font-family: var(--jp); font-size: .82rem; letter-spacing: .08em; color: var(--nb-sakura-dk); }  /* 和章題（漢数字＋章名）＝明朝・濃桜で梅花と統一 */
.nb__page .nb__chapter--cta .jm__marker-label { color: var(--nb-sakura); }     /* 暗背景の最終CTAだけは明るい桜（濃桜は沈む） */

/* B5 信頼バッジの線デザインは menu.css に一本化（全メニュー共通・トップ統一）。
   かつて七五三だけ桜グラデのセパレータを当てていたが、ページ間の不統一になるため撤去。
   （※従来この指定は L1051 の `!important` に負けて非適用＝デッドコードだった） */

/* B6 写真帯overlay：黒帯→朱茶の暖色へ（最終CTA L1636 と同方式。白クォートの可読性は下端.6で確保）。
   あわせて章見出しの梅花を 13→15px に微増（控えめ強化）。 */
.nb__page .nb__photo-band-overlay { background: linear-gradient(180deg, rgba(90,50,55,.18) 0%, rgba(120,60,70,.6) 100%); }
.nb__page .jm__marker-label::before { width: 15px; height: 15px; }

/* アンカーナビ：ゴールド基調→朱（七五三の和・オーナー指定）。
   ガラス構造・is-stuck判定・JS挙動・@media分岐は components.css のまま不可触（sticky-glass-spec 凍結）。
   色だけ .nb__page で上書き＝20th非影響。状態クラス(is-current)は @media 外で定義（spec L101 準拠）。
   濃朱 #b03f2a は白文字/朱背景いずれもコントラスト 4.5:1+ を確保。 */
.nb__page .nb__page-nav:not(.is-stuck) { background-color: var(--nb-shu-deep); }
.nb__page .nb__page-nav.is-stuck .nb__page-nav-link.is-current {
  color: var(--nb-shu-deep);
  border-bottom-color: var(--nb-shu-deep);
  background: rgba(176,63,42,.10);
}
@media (hover: hover) and (pointer: fine) {
  /* is-stuck（白ガラス背景）：朱ホバーで可視 */
  .nb__page .nb__page-nav.is-stuck .nb__page-nav-link:hover {
    color: var(--nb-shu-deep);
    border-bottom-color: var(--nb-shu-deep);
  }
  /* 非stuck（朱背景）：白ホバー（朱文字on朱背景＝同化・不可視の事故を回避。オーナー実機指摘 2026-05-31） */
  .nb__page .nb__page-nav:not(.is-stuck) .nb__page-nav-link:hover {
    color: #fff;
    border-bottom-color: #fff;
  }
}
.nb__page .nb__page-nav-link:focus-visible { outline-color: var(--nb-shu-deep); }

/* ═══════════════════════════════════════════════
   QA監査 反映（2026-05-31）：a11y・コントラスト・和トーン仕上げ
   .nb__page スコープ＝753のみ。20th/global非影響。
═══════════════════════════════════════════════ */
/* アンカーナビ非stuck（朱背景）時のフォーカスリングは朱だと同化＝不可視。白に出し分け（#fff on #b03f2a=5.85:1） */
.nb__page .nb__page-nav:not(.is-stuck) .nb__page-nav-link:focus-visible { outline-color: #fff; }
/* CH5 なぜカードの大数字：gold(#B8975A 2.76:1)→濃朱(5.66:1)でAA確保 */
.nb__page .nb__why-val { color: var(--nb-shu-deep); }
/* 「3・5・7」の中黒：数字が英字フォント(Cormorant)・中黒は日本語フォントのフォールバックで上にずれるため、
   中黒を span化して数字の縦中央へ揃える（小さめ＋middle）。 */
.nb__page .nb__why-val-mid { font-size: .5em; vertical-align: middle; margin: 0 .04em; }
/* 緊急性ブロック本文：白62%→92%（暗朱茶背景でAA。背景も#8a4a52→#6f3a42に暗色化済み） */
.nb__page .nb__urgency-text { color: rgba(255,255,255,.92); }
/* 比較表 他社列の○：gold(2.67:1)→gold-dk でUI可読性（当店列の○は若草のまま） */
.nb__page .nb__compare-cell:not(.nb__compare-cell--us) .nb__yn--yes { color: var(--gold-dk); }
/* 注意ボックス：成人式由来の藍(rgba(30,45,90))→淡桜の和トーン（753のみ・20th非影響） */
.nb__page .nb__price-note-box { background: var(--nb-sakura-lt); border-color: rgba(168,82,104,.18); color: var(--nb-text-warm); }

/* CH6 撮影の流れ：薄緑背景が一色で見づらいので、枠（cost「LINEでのやり取り」等／qa「コピペ例文」）を
   白背景にしてメリハリを出し、CTAボタンは塗りLINE緑にして薄緑背景と区別（オーナー指摘 2026-05-31）。 */
.nb__page .nb__flow-dl-qa { background: var(--warm-white); border: 1px solid rgba(79,107,77,.18); }
.nb__page .nb__flow-dl-cost { background: var(--warm-white); }
.nb__page .nb__flow-detail .line-cta-btn {
  background: #06C755; /* LINE公式ブランド色（オーナー確定・2026-07-09） */
  color: #fff;
  border: .5px solid rgba(255,255,255,.45);
  box-shadow: inset 1px 1px 1.8px rgba(255,255,255,.5), 0 4px 14px rgba(0,0,0,.12);
}
.nb__page .nb__flow-detail .line-cta-btn:hover { background: #05b34c; /* LINE公式hover（2026-07-09） */ color: #fff; border-color: rgba(255,255,255,.6); }