/* theme-pet.css — ペットフォト（pet）テーマ層
   依存：global.css / components.css / menu.css / menu-shared.css（この順で読み込み＝後勝ち）
   読み込み条件：functions.php で is_page_template('_menu.php') かつ post_slug === 'pet'
   役割：共通骨格 menu-shared.css（寒色デフォルト基調）の上に per-slug の配色＋柄を重ねる。
        .nb__page スコープで詳細度を上げて骨格を上書き（他メニューは menu-shared のみ＝非影響）。
   配色コンセプト：草原と散歩のセージグリーン × ハニー黄 ― 親しみとぬくもりのペットフォト
   ※配色は配色リサーチWorkflow（Web検索＋WCAG AA敵対検証・2026-06-04）で確定。deep色は白背景4.5:1以上、
     urgency暗背景は白文字4.5:1以上を満たす。family/baby/753/20th と一目で見分く色相。
   ================================================================ */

/* ── 配色トークン（accent＝メイン／sub＝さし色） ── */
.nb__page {
  --nb-terra:      #c08552;   /* メインアクセント（線・装飾・帯・主役バッジ） */
  --nb-terra-deep: #8a4f24;   /* 濃アクセント：明背景の文字/アイコン（白4.5:1+） */
  --nb-terra-lt:   #fbf5ec;   /* 淡アクセント背景 */
  --nb-terra-lt2:  #f3e6d2;   /* 淡アクセント背景（濃）グラデ用 */
  --nb-cha:        #a87a52;   /* さし色 */
  --nb-cha-deep:   #6d4a28;   /* 濃さし色：文字用（白4.5:1+） */
  --nb-cha-lt:     #f7f1ea;   /* 淡さし色背景 */
  --nb-cha-lt2:    #ebdfcf;   /* 淡さし色背景（濃）グラデ用 */
  --nb-text-warm:  #473825;   /* 本文色（淡背景で4.5:1+） */
}

/* セクション区切り線：accent→sub のグラデ */
.nb__page .jm__hdiv { width: 44px; height: 2px; background: linear-gradient(90deg, var(--nb-terra), var(--nb-cha)); }
.nb__flow-detail .jm__hdiv,
.nb__chapter--cta .jm__hdiv { background: linear-gradient(90deg, rgba(192, 133, 82, .85), rgba(109, 74, 40, .7)); }
/* 料金 主役カードのバッジ：濃アクセント背景（白文字） */
.nb__page .nb__price-badge { background: var(--nb-terra-deep); }

/* ① HERO直下ジャーニー：クリーム背景＋accentドット */
.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-terra-deep); }
.nb__page .nb__hero-jrn-sub { color: var(--nb-text-warm); }
.nb__page .nb__hero-jrn-label { color: var(--nb-terra-deep); }
.nb__page .nb__hero-jrn-title { color: var(--nb-text-warm); }
.nb__page .nb__hero-jrn-dot { background: #ffffff; border-color: var(--nb-terra-deep); }
.nb__page .nb__hero-jrn-dot svg { stroke: var(--nb-terra-deep); }
.nb__page .nb__hero-jrn-dot--active { background: var(--nb-terra); border-color: var(--nb-terra); }
.nb__page .nb__hero-jrn-dot--active svg { stroke: #ffffff; }
.nb__page .nb__hero-jrn-step:not(:last-child)::before { background: rgba(138, 79, 36, .35); }
@media (max-width: 767px) {
  .nb__page .nb__hero-jrn-steps::before { background: rgba(138, 79, 36, .35); }
  .nb__page .nb__hero-jrn-dot { background: #ffffff; }
  .nb__page .nb__hero-jrn-dot--active { background: var(--nb-terra); }
}

/* ② 中間CTA：淡accentグラデ */
.nb__page .nb__mid-cta { background: linear-gradient(160deg, var(--nb-terra-lt) 0%, var(--nb-terra-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：淡subグラデ（さし色） */
.nb__page .nb__price-after-cta { background: linear-gradient(160deg, var(--nb-cha-lt) 0%, var(--nb-cha-lt2) 100%); }
.nb__page .nb__price-after-cta::before { background: var(--nb-terra); width: 56px; height: 2px; }
.nb__page .nb__price-after-cta-en { color: var(--nb-terra-deep); opacity: 1; }
.nb__page .nb__price-after-cta-title { color: var(--charcoal); }
.nb__page .nb__price-after-cta-title em { color: var(--nb-terra-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); }

/* ④ 撮影の流れ：淡accentグラデ */
.nb__page .nb__flow-detail { background: linear-gradient(180deg, var(--nb-terra-lt) 0%, var(--nb-terra-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-terra-deep); color: var(--nb-terra-deep); }
.nb__page .nb__flow-dl-phase { color: var(--nb-terra-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-terra-deep); background: var(--warm-white); border-color: rgba(138, 79, 36, .26); }
.nb__page .nb__flow-dl-item:not(:last-child)::after { background: linear-gradient(to bottom, rgba(138, 79, 36, .5), rgba(138, 79, 36, .1)); }
.nb__page .nb__flow-dl-qa { background: var(--warm-white); border: 1px solid rgba(138, 79, 36, .18); }
.nb__page .nb__flow-dl-qa-q { color: var(--nb-terra-deep); }
.nb__page .nb__flow-dl-qa-a { color: var(--nb-text-warm); }
/* 「当日の目安」ブロック（CH6冒頭）＝明地テーマの上書き。罫線と余白で組む（カード化・角丸影・一辺色バーなし）。 */
.nb__page .nb__flow-est-heading { color: var(--nb-terra-deep); border-bottom-color: color-mix(in srgb, var(--nb-terra-deep) 32%, transparent); }
.nb__page .nb__flow-est-row { border-bottom-color: color-mix(in srgb, var(--nb-terra-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） */
.nb__page .nb__urgency { background: linear-gradient(135deg, #683f1d 0%, #472c14 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(50, 78, 56, .45) 0%, rgba(22, 38, 26, .82) 100%); }

/* ⑦ 比較表ヘッダー（ch1）：accentグラデ（白文字） */
.nb__page .nb__compare-thead { background: linear-gradient(135deg, var(--nb-terra) 0%, var(--nb-terra-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-terra-deep); }
.nb__page .nb__compare-cell:not(.nb__compare-cell--us) .nb__yn--yes { color: var(--gold-dk); }

/* ⑧ 定義ボックス（AIO）：淡accentの小札 */
.nb__page .nb__definition {
  border-left: none; border: 1px solid var(--nb-terra-lt2); border-radius: 12px;
  background: linear-gradient(165deg, var(--nb-terra-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-terra-deep); display: inline-flex; align-items: center;
}
.nb__page .nb__definition-label::before {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  background-color: var(--nb-terra-deep);
  -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='12' r='9'/%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='12' r='9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nb__page .nb__definition-text strong { color: var(--nb-terra-deep); }

/* ⑨ 料金カード画像未登録時のアイコン背景：プラン別に accent／sub を循環 */
.nb__page .nb__price-card-media--icon { background: linear-gradient(160deg, var(--nb-terra-lt) 0%, var(--warm-white) 100%); }
.nb__page .nb__price-card-media--icon svg { color: var(--nb-terra-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-cha-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-cha-deep); }
.nb__page .nb__price-plans .nb__price-card:nth-child(3) .nb__price-card-media--icon { background: linear-gradient(160deg, var(--nb-terra-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-cha-deep); }

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

/* ⑪ 章見出しラベル：丸ドットを添える（明朝・濃accent） */
.nb__page .jm__marker-label { font-family: var(--jp); font-size: .82rem; letter-spacing: .08em; color: var(--nb-terra-deep); }
.nb__page .jm__marker-label::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px;
  background-color: var(--nb-terra);
  -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='12' r='9'/%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='12' r='9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nb__page .nb__chapter--cta .jm__marker-label { color: var(--nb-terra); }
.nb__page .nb__chapter--cta .jm__marker-label::before { background-color: var(--nb-terra); }
.nb__page .nb__hero-card-en { color: var(--nb-terra); }


/* ⑬ 注意ボックス（CH4 案内）：淡accentトーン */
.nb__page .nb__price-note-box { background: var(--nb-terra-lt); border-color: rgba(138, 79, 36, .18); color: var(--nb-text-warm); }

/* ⑭ 写真帯overlay：暗色（白クォートの可読性確保） */
.nb__page .nb__photo-band-overlay { background: linear-gradient(180deg, rgba(50, 78, 56, .45) 0%, rgba(22, 38, 26, .82) 100%); }

/* ⑮ アンカーナビ：クリーム背景＋濃キャラメル文字（オーナー要望「クリーム色にして」を淡背景＋濃文字で実現。
   白文字を保つ濃背景だとクリームにできないため、文字色を濃キャラメルに反転。背景#f7ead6×文字#8a4f24＝5.49:1 でAA達成。
   ガラス構造/JS/sticky-glass-spec は不可触＝is-stuck時は共通骨格のガラスのまま） */
.nb__page .nb__page-nav:not(.is-stuck) { background-color: #f7ead6; border-bottom-color: rgba(138, 79, 36, .18); }
.nb__page .nb__page-nav:not(.is-stuck) .nb__page-nav-link { color: var(--nb-terra-deep); }
.nb__page .nb__page-nav:not(.is-stuck) .nb__page-nav-link.is-current { border-bottom-color: var(--nb-terra-deep); }
.nb__page .nb__page-nav.is-stuck .nb__page-nav-link.is-current {
  color: var(--nb-terra-deep); border-bottom-color: var(--nb-terra-deep); background: rgba(138, 79, 36, .10);
}
@media (hover: hover) and (pointer: fine) {
  .nb__page .nb__page-nav.is-stuck .nb__page-nav-link:hover { color: var(--nb-terra-deep); border-bottom-color: var(--nb-terra-deep); }
  .nb__page .nb__page-nav:not(.is-stuck) .nb__page-nav-link:hover { color: var(--nb-terra-deep); border-bottom-color: var(--nb-terra-deep); }
}
.nb__page .nb__page-nav-link:focus-visible { outline-color: var(--nb-terra-deep); }


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

/* ═══════════════
   肉球柄（地紋）：オーナー指示で「1セクションにつき1種類・各セクションは別の柄・結構小さめ・ランダム配置/角度・結構薄め・固まらせず散らばらせる」。
   素材は提供3種（paw=線画／paw2=塗り／paw3=足あと5個セット）を表示順で循環＝隣接セクションは必ず別種。
     ① hero下=線画(tile1・SPはtile1-spで小さく数増)／② 中間CTA=塗り(tile2)／③ 料金後=足あと(tile3・SPはtile3-spで数増)／④ 流れ=線画(tile4・小さく数増・薄め)／⑤ 緊急性=③料金後の柄をそっくり流用(tile3/SP tile3-sp・濃さ0.14・色だけ白)。
   各タイルは python で グリッドジッター散布（各セルに1個＋ランダムオフセット＝偏り/柄消失を根絶）。
   肉球は約28〜38px(SPジャーニー30px)・足あとは約60px・角度0〜360°ランダム。色は background-color で管理（緊急性のみ白）。本文 z-index:1。
═══════════════ */
/* ① hero下：線画 paw を均一散布（茶） */
.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;
  -webkit-mask: url("../../img/menu/pet/paw-tile1.svg") 0 0 / 520px 520px repeat;
          mask: url("../../img/menu/pet/paw-tile1.svg") 0 0 / 520px 520px repeat;
  background-color: var(--nb-terra-deep); opacity: 0.12; pointer-events: none; z-index: 0;
}
/* SP：柄が文字と被るため、少し小さく(38→30px)・数を増やし(grid5=25→tile1-sp=grid6=36個)・ランダム配置。PCはtile1のまま。オーナーFB */
@media (max-width: 768px) {
  .nb__page .nb__hero-jrn::after {
    -webkit-mask-image: url("../../img/menu/pet/paw-tile1-sp.svg");
            mask-image: url("../../img/menu/pet/paw-tile1-sp.svg");
  }
}
/* ② 中間CTA：塗り paw2 を均一散布（茶） */
.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;
  -webkit-mask: url("../../img/menu/pet/paw-tile2.svg") 0 0 / 520px 520px repeat;
          mask: url("../../img/menu/pet/paw-tile2.svg") 0 0 / 520px 520px repeat;
  background-color: var(--nb-terra-deep); opacity: 0.11; pointer-events: none; z-index: 0;
}
/* ③ 料金後CTA：足あと paw3 を均一散布（茶） */
.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;
  -webkit-mask: url("../../img/menu/pet/paw-tile3.svg") 0 0 / 520px 520px repeat;
          mask: url("../../img/menu/pet/paw-tile3.svg") 0 0 / 520px 520px repeat;
  background-color: var(--nb-terra-deep); opacity: 0.14; pointer-events: none; z-index: 0;
}
/* SP：足あとの大きさ(60px)はPCと同じまま、数をもっと増やす（grid3=9個 → tile3-sp=grid6=36個）。オーナーFB */
@media (max-width: 768px) {
  .nb__page .nb__price-after-cta::after {
    -webkit-mask-image: url("../../img/menu/pet/paw-tile3-sp.svg");
            mask-image: url("../../img/menu/pet/paw-tile3-sp.svg");
  }
}
/* ④ 撮影の流れ：線画 paw を均一散布（茶）。オーナーFB＝サイズを小さく(28px)・数を増やし(grid7=49個)・濃さを結構薄め(0.16→0.10)。PC/SP共通 */
.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;
  -webkit-mask: url("../../img/menu/pet/paw-tile4.svg") 0 0 / 520px 520px repeat;
          mask: url("../../img/menu/pet/paw-tile4.svg") 0 0 / 520px 520px repeat;
  background-color: var(--nb-terra-deep); opacity: 0.10; pointer-events: none; z-index: 0;
}
/* ⑤ 緊急性：料金後CTA(③)の柄をそっくりそのまま使う（オーナーFB）。柄=足あとtile3（PC60px・grid3=9個）/SP=tile3-spに差し替え・濃さ0.14＝料金後と同一。
   暗背景のため色だけ白に（茶のままだと背景に埋もれて見えないため）。tile5は不要化＝デッド削除済み。 */
.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;
  -webkit-mask: url("../../img/menu/pet/paw-tile3.svg") 0 0 / 520px 520px repeat;
          mask: url("../../img/menu/pet/paw-tile3.svg") 0 0 / 520px 520px repeat;
  background-color: #ffffff; opacity: 0.14; pointer-events: none; z-index: 0;
}
/* SP：料金後と同じく数を増やしたタイルに差し替え（料金後とそっくり同じ挙動） */
@media (max-width: 768px) {
  .nb__page .nb__urgency::after {
    -webkit-mask-image: url("../../img/menu/pet/paw-tile3-sp.svg");
            mask-image: url("../../img/menu/pet/paw-tile3-sp.svg");
  }
}