/* theme-baby.css — ベビー撮影（baby）テーマ層
   依存：global.css / components.css / menu.css / menu-shared.css（この順で読み込み＝後勝ち）
   読み込み条件：functions.php で is_page_template('_menu.php') かつ post_slug === 'baby'
   役割：共通骨格 menu-shared.css（寒色デフォルト基調）の上に、ベビーの
        「やさしいコーラル×クリーム（水色をさし色）」配色＋セクション別の地紋を per-slug で重ねる。
   方針：七五三(theme-753)と同じ"セレクタ再定義方式"。色と地紋のみを変更し、構造・文言・
        コンポーネント・JS・JSON-LD・アンカーナビのガラス挙動には一切触れない。
   配色/柄の経緯（2026-06-04 オーナー）：
     ① 第一印象は暖色（アンカーナビ＝コーラル）。当初の水色主色から暖色リードへ。
     ② コーラルは"少し強い"→ muted/淡めの優しいコーラルへ調整。
     ③ 柄は場所ごとに変える：中間CTA＝雲／料金後CTA＝星／撮影の流れ＝千鳥（薄イエロー和柄）／緊急性＝星（枠star・白）。
   配色の更新（2026-07-11 オーナー判断）：
     ・さし色の「水色（--nb-mizu 系）」を全廃し、料金後CTAセクションを薄イエロー＋アンバーの星へ変更。
       他メニューが「メイン色＋さし色1」なのに baby だけ寒色の水色を足して色数が多かったため、
       暖色2軸（コーラル×アンバー）に整理。区切り線グラデ・料金カードアイコンの水色循環も暖色化。
   ================================================================ */

/* ── 配色トークン（やさしいコーラル主色・アンバー(イエロー)をさし色・茶グレー文字）
   2026-07-11 オーナー判断で寒色の水色(--nb-mizu 系)を全廃＝暖色2軸(コーラル×アンバー)に統一 ── */
.nb__page {
  --nb-coral:      #ecaa9c;  /* やさしいコーラル（淡め）：装飾/活性ドット/帯/カード上辺 */
  --nb-coral-deep: #9e5850;  /* 深コーラル：ナビ/見出し/バッジ/文字（旧#a85f56=cream4.39:1でAA微割れ→cream4.91:1・白文字5.3:1・2026-07-21） */
  --nb-coral-lt:   #fdf4f1;  /* 淡コーラル背景 */
  --nb-coral-lt2:  #f9e3dc;  /* 淡コーラル背景（濃）グラデ用 */
  --nb-yellow-lt:  #fdf6e0;  /* 薄イエロー背景（千鳥・料金後CTAセクション） */
  --nb-yellow-lt2: #f7ead0;  /* 薄イエロー背景（濃）グラデ用 */
  --nb-amber:      #c99a4a;  /* 千鳥/星の色（和の差し色・薄イエロー上で視認） */
  --nb-text-warm:  #5a4a44;  /* 本文色（茶グレー・淡背景で7:1前後） */
}

/* セクション区切り線：コーラル→アンバーのやさしいグラデ（主色→さし色／暖色2軸に統一・2026-07-11 オーナー判断で水色を廃止） */
.nb__page .jm__hdiv {
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--nb-coral), var(--nb-amber));
}
.nb__flow-detail .jm__hdiv,
.nb__chapter--cta .jm__hdiv {
  background: linear-gradient(90deg, rgba(201, 154, 74, .85), rgba(168, 95, 86, .7));
}
/* 料金 主役カードのバッジ：深コーラル背景（白文字 4.8:1+） */
.nb__page .nb__price-badge { background: var(--nb-coral-deep); }

/* ① 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-coral-deep); }
.nb__page .nb__hero-jrn-sub { color: var(--nb-text-warm); }
.nb__page .nb__hero-jrn-label { color: var(--nb-coral-deep); }
.nb__page .nb__hero-jrn-title { color: var(--nb-text-warm); }
.nb__page .nb__hero-jrn-dot { background: #ffffff; border-color: var(--nb-coral-deep); }
.nb__page .nb__hero-jrn-dot svg { stroke: var(--nb-coral-deep); }
.nb__page .nb__hero-jrn-dot--active { background: var(--nb-coral); border-color: var(--nb-coral); }
.nb__page .nb__hero-jrn-dot--active svg { stroke: #ffffff; }
.nb__page .nb__hero-jrn-step:not(:last-child)::before { background: rgba(168, 95, 86, .3); }
@media (max-width: 767px) {
  .nb__page .nb__hero-jrn-steps::before { background: rgba(168, 95, 86, .3); }
  .nb__page .nb__hero-jrn-dot { background: #ffffff; }
  .nb__page .nb__hero-jrn-dot--active { background: var(--nb-coral); }
}

/* ② 中間CTA：淡コーラルグラデ＋雲の地紋 */
.nb__page .nb__mid-cta { background: linear-gradient(160deg, var(--nb-coral-lt) 0%, var(--nb-coral-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：淡イエローグラデ（さし色）＋星の地紋（2026-07-11 水色→薄イエローに変更＝暖色2軸に統一） */
.nb__page .nb__price-after-cta { background: linear-gradient(160deg, var(--nb-yellow-lt) 0%, var(--nb-yellow-lt2) 100%); }
.nb__page .nb__price-after-cta::before { background: var(--nb-coral); width: 56px; height: 2px; }
.nb__page .nb__price-after-cta-en { color: var(--nb-coral-deep); opacity: 1; }
.nb__page .nb__price-after-cta-title { color: var(--charcoal); }
.nb__page .nb__price-after-cta-title em { color: var(--nb-coral-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-yellow-lt) 0%, var(--nb-yellow-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-coral-deep); color: var(--nb-coral-deep); }
.nb__page .nb__flow-dl-phase { color: var(--nb-coral-deep); 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-coral-deep); background: var(--warm-white); border-color: rgba(168, 95, 86, .26); }
.nb__page .nb__flow-dl-item:not(:last-child)::after { background: linear-gradient(to bottom, rgba(201, 154, 74, .5), rgba(201, 154, 74, .12)); }
.nb__page .nb__flow-dl-qa { background: var(--warm-white); border: 1px solid rgba(168, 95, 86, .18); }
.nb__page .nb__flow-dl-qa-q { color: var(--nb-coral-deep); }
.nb__page .nb__flow-dl-qa-a { color: var(--nb-text-warm); }
/* 「当日の目安」ブロック（CH6冒頭）＝明地テーマの上書き。罫線と余白で組む（カード化・角丸影・一辺色バーなし）。 */
.nb__page .nb__flow-est-heading { color: var(--nb-coral-deep); border-bottom-color: color-mix(in srgb, var(--nb-coral-deep) 32%, transparent); }
.nb__page .nb__flow-est-row { border-bottom-color: color-mix(in srgb, var(--nb-coral-deep) 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); }

.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); }

/* ⑤ 緊急性ブロック：深コーラル赤グラデ（白文字維持・AA）＋星（枠star・白）の地紋 */
.nb__page .nb__urgency { background: linear-gradient(135deg, #a85240 0%, #82392d 100%); }
.nb__page .nb__urgency-text { color: rgba(255, 255, 255, .92); }

/* ⑥ 最終CTA overlay：コーラル茶の暗色（背景写真の上に重ねる） */
.nb__page .nb__cta-bg-overlay { background: linear-gradient(to bottom, rgba(120, 60, 50, .5) 0%, rgba(52, 26, 22, .82) 100%); }

/* ⑦ 比較表ヘッダー（ch1）：コーラルグラデ（白文字・当店列も白で明示） */
.nb__page .nb__compare-thead { background: linear-gradient(135deg, var(--nb-coral) 0%, var(--nb-coral-deep) 100%); }
.nb__page .nb__compare-col--us { color: #ffffff !important; }
/* 比較表セル：他社✗は攻撃色を出さず暖灰。当店○は深コーラルで温かく強調 */
.nb__page .nb__yn--no   { color: #6f6259; }
.nb__page .nb__yn--cond { color: #786a5a; }
.nb__page .nb__compare-cell--us .nb__yn--yes { color: var(--nb-coral-deep); }
.nb__page .nb__compare-cell:not(.nb__compare-cell--us) .nb__yn--yes { color: var(--gold-dk); }

/* ⑧ 定義ボックス（AIO）：金縦線→淡コーラルの小札へ（テキストは不変） */
.nb__page .nb__definition {
  border-left: none;
  border: 1px solid var(--nb-coral-lt2);
  border-radius: 12px;
  background: linear-gradient(165deg, var(--nb-coral-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-coral-deep);
  display: inline-flex;
  align-items: center;
}
.nb__page .nb__definition-label::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px; margin-right: 8px;
  background-color: var(--nb-coral-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C13.5 9 15 10.5 22 12 C15 13.5 13.5 15 12 22 C10.5 15 9 13.5 2 12 C9 10.5 10.5 9 12 2 Z'/%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%3Cpath d='M12 2 C13.5 9 15 10.5 22 12 C15 13.5 13.5 15 12 22 C10.5 15 9 13.5 2 12 C9 10.5 10.5 9 12 2 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nb__page .nb__definition-text strong { color: var(--nb-coral-deep); }

/* ⑨ 料金カード画像未登録時のアイコン背景：プラン別にコーラル／アンバーを循環（2026-07-11 水色→アンバーに変更＝暖色統一） */
.nb__page .nb__price-card-media--icon { background: linear-gradient(160deg, var(--nb-coral-lt) 0%, var(--warm-white) 100%); }
.nb__page .nb__price-card-media--icon svg { color: var(--nb-coral-deep); opacity: .9; }
.nb__page .nb__price-plans .nb__price-card:nth-child(2) .nb__price-card-media--icon { background: linear-gradient(160deg, var(--nb-yellow-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-amber); }
.nb__page .nb__price-plans .nb__price-card:nth-child(3) .nb__price-card-media--icon { background: linear-gradient(160deg, var(--nb-coral-lt2) 0%, var(--warm-white) 100%); }
.nb__page .nb__price-plans .nb__price-card:nth-child(4) .nb__price-card-media--icon svg { color: var(--nb-amber); }

/* ⑩ CH5 なぜカードの大数字：深コーラルでAA確保 */
.nb__page .nb__why-val { color: var(--nb-coral-deep); }

/* ⑪ 章見出しラベル：小さな星を添える（明朝・深コーラル） */
.nb__page .jm__marker-label {
  font-family: var(--jp);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--nb-coral-deep);
}
.nb__page .jm__marker-label::before {
  content: '';
  display: inline-block;
  width: 13px; height: 13px; margin-right: 7px; vertical-align: -1px;
  background-color: var(--nb-coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C13.5 9 15 10.5 22 12 C15 13.5 13.5 15 12 22 C10.5 15 9 13.5 2 12 C9 10.5 10.5 9 12 2 Z'/%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%3Cpath d='M12 2 C13.5 9 15 10.5 22 12 C15 13.5 13.5 15 12 22 C10.5 15 9 13.5 2 12 C9 10.5 10.5 9 12 2 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nb__page .nb__chapter--cta .jm__marker-label { color: var(--nb-coral); }
.nb__page .nb__chapter--cta .jm__marker-label::before { background-color: var(--nb-coral); }
.nb__page .nb__hero-card-en { color: var(--nb-coral); }


/* ⑬ 注意ボックス（CH4 お宮参り案内）：淡コーラルトーン */
.nb__page .nb__price-note-box { background: var(--nb-coral-lt); border-color: rgba(168, 95, 86, .18); color: var(--nb-text-warm); }

/* ⑭ 写真帯overlay：コーラル茶の暖色暗色（白クォートの可読性確保） */
.nb__page .nb__photo-band-overlay { background: linear-gradient(180deg, rgba(120, 60, 50, .18) 0%, rgba(120, 60, 50, .6) 100%); }

/* ⑮ アンカーナビ：コーラル基調＝第一印象を暖色に（色のみ上書き＝ガラス構造/JS/sticky-glass-spec は不可触）。
   深コーラル #a85f56 は白文字/コーラル背景いずれもコントラスト4.5:1+。 */
.nb__page .nb__page-nav:not(.is-stuck) { background-color: var(--nb-coral-deep); }
.nb__page .nb__page-nav.is-stuck .nb__page-nav-link.is-current {
  color: var(--nb-coral-deep);
  border-bottom-color: var(--nb-coral-deep);
  background: rgba(168, 95, 86, .10);
}
@media (hover: hover) and (pointer: fine) {
  .nb__page .nb__page-nav.is-stuck .nb__page-nav-link:hover {
    color: var(--nb-coral-deep);
    border-bottom-color: var(--nb-coral-deep);
  }
  .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-coral-deep); }
.nb__page .nb__page-nav:not(.is-stuck) .nb__page-nav-link:focus-visible { outline-color: #fff; }

/* ═══════════════════════════════════════════════
   背景の柄（地紋）：セクションごとに違うモチーフ（七五三の和柄あしらいに相当）。
   中間CTA＝雲／料金後CTA＝星／撮影の流れ＝千鳥（和柄・薄イエロー上）／緊急性＝星（枠star・白）。
   pointer-events:none＋低opacity。本文(-inner / >* / -body)は 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; inset: 0;
  background: url("../../img/menu/baby/tile-cloud-mid.svg") 0 0 / 300px 300px repeat;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
/* 料金後CTA：星（アンバー・薄イエロー背景に合わせる／2026-07-11 水色から変更） */
.nb__page .nb__price-after-cta { position: relative; overflow: hidden; }
.nb__page .nb__price-after-cta-inner { position: relative; z-index: 1; }
.nb__page .nb__price-after-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: url("../../img/menu/baby/tile-star-price.svg") 0 0 / 300px 300px repeat;
  opacity: .15;
  pointer-events: none;
  z-index: 0;
}
/* 撮影の流れ：千鳥（和柄・アンバー／薄イエロー背景）。波千鳥風に向きを反転して散らす。 */
.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; inset: 0;
  background: url("../../img/menu/baby/tile-chidori-flow.svg") 0 0 / 300px 300px repeat;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
/* HERO直下ジャーニー：5点星（コーラル）。料金後CTAの4点きらきら星とは別デザイン。クリーム背景にうっすら。 */
.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/baby/tile-star5-hero.svg") 0 0 / 300px 300px repeat;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

/* 緊急性：星（枠star・白／暗背景に明色で） */
.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; inset: 0;
  background: url("../../img/menu/baby/tile-star-urgency.svg") 0 0 / 300px 300px repeat;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}

/* 専用写真が無い間のヒーロー背景：緊急性ブロックと同じテーマ色暗版グラデで統一（写真が来たら hero に実パスを設定） */
.nb__page .nb__hero--noimg .nb__hero-bg { background: linear-gradient(135deg, #a85240 0%, #82392d 100%); }