/* 猫探偵プロ｜明るい案2（白×写真全面）
   方針: 白基調。写真をヒーロー全面に敷くが、暗くせず
   「白いベール」で明るいまま可読性を確保する（明るくする方向のオーバーレイ）。
   月桂樹は廃止し、金色の猫の足跡を保護率92%の左右に置く。英字は使わない。 */
:root {
  --navy:  #14305C; /* 見出し・数字・ロゴ地。白地に13.07:1 */
  --ink:   #1E2A3A; /* 本文 */
  --muted: #5C6879; /* 注記 5.86:1 */
  --hair:  #A6B4C6; /* 1pxの罫線。白地でカード枠・ピル枠が沈まないよう濃くした（2.11:1） */
  --ylw:   #FFD84D; /* マーカーの黄色。濃紺文字で9.0:1 */
  --ylws:  #FFEA8F; /* マーカー用の淡い黄色。白地で沈まないよう濃くした */
  --gold:  #A87F14; /* 足跡の金。白地に3.68:1（非テキストの3:1基準を満たす） */
  /* CTAは淡い山吹（アプリコット）。既にある黄マーカー（--ylw）・金の足跡（--gold）と
     同じ系統なので色数が増えない。
     2026-08-19 社長指示: 濃い山吹（#E8A020）はチカチカするため #EACFA0 へ淡くした。
     ★この地に白文字は使わない（#EACFA0 に白は1.51:1）。地に乗せる文字は必ず濃紺（8.67:1）。
     ★淡くしたぶん白地との差が1.51:1しかない。この色を「面」として使う場所
       （CTAボタン・固定バー・地図の対象県）は、輪郭を --ctad の枠線で必ず取ること。
       枠線がないと白地の上で形が消える */
  --cta:   #EACFA0; /* CTA地（帯・ボタン・固定バー・タグ）。濃紺文字で8.67:1 */
  --ctad:  #8A5410; /* CTA濃色: 電話番号・強調文字・細い罫。白地6.26:1 */
  --bg:    #FFFFFF; /* 地。白 */
  --tint:  #F5F7F9; /* セクション交互の淡色。青みを弱くした（区切りが分かる程度の薄さ） */
  --bgpc:  #E9E9EB; /* PC時の外側。青みを抜いた無彩色寄りの淡いグレー */
  --col:   560px;   /* 本文カラム幅。PC（768px〜）では 640px に広げる */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: 76px; /* 下部固定バーの逃げ */
}
img { max-width: 100%; display: block; }

/* 本文カラム。PCでは外側（--bgpc）に対してここが白く浮く。
   背景を明示しないとPC時に外側の灰色が透けて「白いはずのセクションが灰色」になる */
.hd, .strip, .hero, .ctawrap, .notes, .below {
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
  background: var(--bg);
}

/* ヘッダー: 白地。タグラインは日本語 */
.hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--hair);
}
.hd_logo { width: 38px; height: 38px; flex: 0 0 auto; }
.hd_txt { display: flex; flex-direction: column; line-height: 1.25; }
.hd_txt strong { font-size: 21px; font-weight: 800; letter-spacing: .04em; color: var(--navy); }
.hd_txt span { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }

/* 帯: 濃紺地に白文字（13.07:1） */
.strip {
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 800;
  text-align: center;
  font-size: 17px;
  padding: 7px 10px;
  letter-spacing: .06em;
}

/* ヒーロー: 写真を全面背景に。暗くせず「白いベール」で明るいまま読ませる。
   ::before = 写真（フィルタなし）／::after = 白のグラデ。下ほど薄くして
   女性と猫がそのままの明るさで見えるようにする */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 0;
  min-height: 430px;
  overflow: hidden;
  background: var(--bg);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/fv-sp.webp);
  background-size: cover;
  background-position: 74% 52%;
  background-repeat: no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.93) 42%,
    rgba(255,255,255,.72) 62%,
    rgba(255,255,255,.30) 80%,
    rgba(255,255,255,.14) 100%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

/* 「迷子」のネコちゃん */
.ribbon {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
}
.ribbon_tag {
  background: var(--navy);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 1px 9px;
  border-radius: 3px;
}

/* 主訴求: 保護率92%。中央寄せ・数字は大きく。左右に金の足跡 */
.hl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--navy);
}
.paw { width: 30px; height: 30px; fill: var(--gold); flex: 0 0 auto; }
.paw--flip { transform: scaleX(-1); }
.hl_txt { font-size: 23px; font-weight: 800; letter-spacing: .02em; }
.hl_num {
  font-size: 66px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  /* 数字の足元に黄色マーカーを敷いて明るさと勢いを出す */
  background: linear-gradient(transparent 68%, var(--ylw) 68%, var(--ylw) 94%, transparent 94%);
}
.hl_unit { font-size: 30px; font-weight: 800; }
.hl_note { font-size: 10px; color: var(--muted); align-self: flex-start; margin-top: 6px; }

/* 3行見出し */
.lead {
  margin-top: 2px;
  text-align: center;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: .01em;
  color: var(--navy);
}
.lead .pref { border-bottom: 3px solid var(--ylw); padding-bottom: 1px; }
.lead .brand {
  background: linear-gradient(transparent 60%, var(--ylws) 60%);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 写真はヒーロー背景に回したため .photo は使わない */

/* データ3つ: 白いカードを並べる。数字は濃紺 */
.stats {
  list-style: none;
  display: flex;
  gap: 6px;
  width: calc(100% + 24px);
  margin: auto -12px 0;
  padding: 0 10px 10px;
}
.stat {
  flex: 1 1 0;
  padding: 5px 2px 6px;
  text-align: center;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--navy);
  border-radius: 4px;
  color: var(--navy);
}
.st_num {
  display: block;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.st_num i { font-style: normal; font-size: 15px; font-weight: 700; margin-left: 1px; }
.st_ja { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.st_ja em { font-style: normal; font-size: 8.5px; color: var(--muted); margin-left: 2px; }

/* 電話CTA（ページに5箇所: FV直下 / 他社との比較の前 / 流れの前 / よくある質問の前 / 最下部）。
   フラット単色。5箇所すべて中身は同一（文言・構造・注記まで同じ）。
   増減するときは全箇所を同時に直す */
.ctawrap { padding: 12px 16px 12px; }

a.cta-call,
a.cta-call:visited {
  display: block;
  box-sizing: border-box;
  /* 2026-08-19 社長指定: 枠4px #e4993b・角丸16px。
     幅はスマホでカラムいっぱい、PC（768px〜）では元の480pxに戻す */
  width: min(100%, 100%);
  margin: 0 auto;
  background: #FFFFFF;
  border: 4px solid #e4993b;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 768px) {
  a.cta-call,
  a.cta-call:visited { width: min(100%, 480px); }
}

/* CTAの帯。白文字は1.51:1で読めないので濃紺（8.67:1） */
.cta-call_band {
  display: block;
  padding: 7px 10px;
  background: var(--cta);
  color: var(--navy);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .04em;
  line-height: 1.4;
}

.cta-call_body { display: block; padding: 9px 14px 11px; }

.cta-call_hours { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.cta-call_number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 1px 0 2px;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ctad);
}
.cta-ic { width: 26px; height: 26px; flex: 0 0 auto; }

.cta-call_free { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.cta-call_free-em {
  color: var(--ctad);
  background: linear-gradient(transparent 62%, var(--ylws) 62%);
}

.cta-call_badges {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  margin: 8px 0 0;
}
.cta-call_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  /* 地は淡いクリーム、文字は濃紺（#FFFBEC 上で12.61:1）。
     枠を --cta にすると #FFFBEC 地に対して1.05:1でピルの形が消えるため --ctad（6.04:1） */
  background: #FFFBEC;
  border: 1px solid var(--ctad);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.cta-call_tap {
  display: block;
  margin: 8px 0 0;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ctad);
}

.cta-note {
  max-width: 480px;
  margin: 7px auto 0;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}

.notes {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.6;
  padding: 4px 16px 0;
}

/* ================= FV直下セクション =================
   短い言葉で印象づける。1ブロック1メッセージ、余白を効かせる。
   色は既存トークンのみ（白・濃紺・黄マーカー・淡い山吹）で、新色は足さない */
.below { padding: 30px 16px 6px; text-align: center; }

/* ① 欲求フック */
.below .q {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
/* ② アンサー */
.below .ans {
  margin-top: 8px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--navy);
}
.below .ans_em {
  font-size: 26px;
  background: linear-gradient(transparent 66%, var(--ylw) 66%, var(--ylw) 94%, transparent 94%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* モバイルだけで効く改行。<br class="sp-only"> と書く。
   768px以上（PC）では下の @media で display:none にして1行に戻す */
.sp-only { display: inline; }

/* 共通ブロック */
.blk {
  margin-top: 22px;
  padding: 16px 14px 14px;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--navy);
  border-radius: 6px;
  background: #FFFFFF;
}
.blk_ttl {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--navy);
}
.blk_txt {
  margin-top: 8px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink);
}
.blk_txt b { font-weight: 800; font-size: 19px; color: var(--navy); }
.blk_end {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--ctad);
}
/* 出所ラベル。論文の事実と自社の方針を混ぜないため、必ずどちらかを付ける */
.tagline { line-height: 1; }
.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.6;
  padding: 2px 11px;
  border-radius: 999px;
}
.tag--fact { background: var(--navy); color: #FFFFFF; }
.tag--own  { background: var(--cta);  color: var(--navy); } /* CTA地は濃紺文字 8.67:1 */

/* 論文の事実ブロック: 体言止めの一文＋図 */
.fact_lead {
  margin-top: 9px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--navy);
}
.fact_lead b {
  background: linear-gradient(transparent 66%, var(--ylw) 66%, var(--ylw) 94%, transparent 94%);
}

/* グラフ直下の打ち消し。34%だけを見て低いと受け取られないようにする */
.fact_after {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--navy);
  text-align: center;
}
.fact_after b {
  background: linear-gradient(transparent 66%, var(--ylw) 66%, var(--ylw) 94%, transparent 94%);
}

/* 図。論文の数値から自作したグラフ（fig-early.webp）。
   原図の転載ではないので帰属表示は不要。直下の1行は「※学術論文のデータより作成」 */
.figwrap {
  margin-top: 12px;
  padding: 10px 10px 9px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 5px;
}
.figwrap img { width: 100%; height: auto; }
.figcap {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.figsrc {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
}

/* 自社の方針ブロック */
/* 細い罫は --cta だと白地で1.51:1しか出ず線が消えるので、濃い琥珀（--ctad）を使う */
.blk--own { border-top-color: var(--ctad); }
.own_lead {
  margin-top: 9px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.own_lead b {
  font-size: 26px;
  font-weight: 800;
  color: var(--ctad);
  background: linear-gradient(transparent 68%, var(--ylw) 68%, var(--ylw) 94%, transparent 94%);
}

/* 締めのアンサー（CTAへの受け渡し） */
.ans--last { margin-top: 24px; }

/* 季節ブロックだけ淡い黄の地で差し替え位置を目立たせる */
.blk--season { background: #FFFBEC; border-top-color: var(--ctad); }

/* ================= 本文セクション =================
   方針: 情報シンプル。文章は短く、数字と見出しで読ませる。
   色は既存トークンのみ（白・濃紺・黄マーカー・淡い山吹）。新色は足さない */
/* セクションは白と淡色を交互に敷く。地色を明示するのが要点で、
   背景なし（透過）にするとPC時に外側の --bgpc が透けて白セクションが灰色になる。
   ページ内の並びは 白(CTA/FV直下) → 淡 → 白 → 淡 …… を最後まで崩さない。
   .ctawrap は常に白。CTAも「白のかたまり」として交互の数に入れて考える。
   セクションを増減するときは .sec--tint の付け外しで交互を保つこと。
   2026-08-19: スタッフ紹介（淡）を対応エリア（白）の下に足した。既存セクションの地色は動かしていない。
   ※CTAを3箇所足した結果、「CTA＋他社との比較」「捜索プランと費用＋CTA」の2箇所だけ白が続く。
     既存の地色を反転させて直すと白の連続が3箇所に増えるため、反転はしていない */
.sec {
  max-width: var(--col);
  margin: 0 auto;
  padding: 26px 16px 24px;
  background: var(--bg);
}
.sec--tint { background: var(--tint); }

.sec_h {
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--navy);
}
.sec_h::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 9px auto 0;
  background: var(--ylw);
  border-radius: 2px;
}
.sec_lead {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
}
.sec_note {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}
.sec_note a { color: var(--muted); }

.em { font-weight: 800; color: var(--ctad); }

/* データ提示: 体言止めの数字を先に、説明は下に短く */
.dat {
  margin-top: 14px;
  padding: 12px 13px 11px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-left: 4px solid var(--navy);
  border-radius: 5px;
}
.dat_txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
}
.dat_txt b {
  font-weight: 800;
  font-size: 23px;
  color: var(--navy);
  background: linear-gradient(transparent 70%, var(--ylw) 70%, var(--ylw) 95%, transparent 95%);
}
/* 数値の出典。図の下の .figsrc と同じ扱い（小さく・グレー・説明文とは独立） */
.dat_src {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
}
.dat_sub {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* 箇条書き（丸） */
.li { list-style: none; margin-top: 14px; display: grid; gap: 7px; }
.li li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}
.li li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .58em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--navy);
  border-radius: 50%;
}
/* 注意（バツ） */
.li--x li::before {
  border: 0;
  left: 2px;
  top: .5em;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--ctad) 44%, var(--ctad) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--ctad) 44%, var(--ctad) 56%, transparent 56%);
}

/* 番号つきの項目（選ばれる理由・実際に何をするのか） */
.items { margin-top: 14px; display: grid; gap: 9px; }
.item {
  padding: 12px 13px 11px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.item_h {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--navy);
}
.item_n {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  line-height: 23px;
  text-align: center;
}
.item_p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}
.item_p a { color: var(--ctad); }
.item_p b { font-weight: 800; color: var(--navy); }

/* 窓口の章のパネル（重点3本の下。最小限の説明にとどめる箱）
   新しいカードは作らず、.item の見た目を弱めた修飾だけにしてある */
.items--min { margin-top: 9px; gap: 8px; }
.items--min .item { padding: 10px 12px 9px; }
.items--min .item_h { font-size: 14.5px; }
.items--min .item_p { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* 地域別の捜索事例（市名入りの本文） */
.items--case .item_h { align-items: center; font-size: 15.5px; }
.item_city {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.item_q {
  margin-top: 9px;
  padding: 9px 11px;
  background: var(--tint);
  border-radius: 5px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
}
.item_qn {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}

@media (min-width: 768px) {
  .items--min { grid-template-columns: 1fr 1fr; }
}

/* 流れ（STEP） */
.steps { margin-top: 14px; }
.step {
  padding: 11px 13px 10px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-left: 4px solid var(--navy);
  border-radius: 5px;
}
.step_h { font-size: 15.5px; font-weight: 800; line-height: 1.5; color: var(--navy); }
.step_p { margin-top: 4px; font-size: 14px; line-height: 1.75; }
.step_ar {
  width: 0;
  height: 0;
  margin: 7px auto;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid var(--hair);
}

/* お客様の声 */
.voices { margin-top: 14px; display: grid; gap: 10px; }
.voice {
  padding: 12px 13px 11px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.voice_hd { display: flex; align-items: center; gap: 8px; }
.voice_av {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  line-height: 30px;
  text-align: center;
}
.voice_nm { font-size: 13px; font-weight: 700; line-height: 1.4; }
.voice_nm span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
/* ★は文字なので4.5:1が要る。--gold(#A87F14)は白地3.68:1で足りないため、
   同じ琥珀系の --ctad（6.26:1）にする。足跡（.paw）は非テキストなので --gold のまま */
.voice_st { margin-left: auto; color: var(--ctad); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.voice_bd { margin-top: 8px; font-size: 14px; line-height: 1.8; }

/* 自力 → 依頼 の対比パネル（選ばれる理由）。
   上段＝自力。グレーで弱く。下段＝猫探偵プロ。濃紺で強く。間の▼で差分を見せる。
   92%の数字は濃紺地に黄色（9:1）。白文字＋黄マーカーだと数字が読めなくなるため使わない */
.ba {
  margin-top: 14px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 8px;
  overflow: hidden;
}
.ba_b { padding: 12px 12px 10px; background: #E9EDF3; text-align: center; }
/* 「自力だと」は弱く見せたいが、#6E7A8A は灰地（#E9EDF3）に対して3.71:1しか出ず読めない。
   弱さは文字の大きさで付け、色は --muted（灰地に4.82:1）にする */
.ba_lbl { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--muted); letter-spacing: .04em; }
.ba_bn {
  margin-top: 1px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--muted);
}
.ba_bn i { font-style: normal; font-size: 17px; font-weight: 700; margin-left: 2px; }
.ba_src { margin-top: 3px; font-size: 10px; line-height: 1.55; color: var(--muted); } /* 旧#8590A0は灰地で2.75:1 */
/* 上段と下段のあいだの▼ */
.ba_ar { position: relative; height: 24px; background: #E9EDF3; }
.ba_ar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 16px solid var(--ctad);
}
.ba_a { padding: 13px 12px 13px; background: var(--navy); text-align: center; color: #FFFFFF; }
.ba_brand { font-size: 15.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
.ba_an { margin-top: 2px; line-height: 1.1; }
.ba_k { font-size: 19px; font-weight: 800; margin-right: 6px; vertical-align: 6px; }
.ba_an b { font-size: 50px; font-weight: 800; letter-spacing: -.02em; color: var(--ylw); }
.ba_an i { font-style: normal; font-size: 25px; font-weight: 800; color: var(--ylw); }
.ba_an em { font-style: normal; font-size: 10px; color: #BCC8D8; vertical-align: super; margin-left: 2px; }
.ba_sub { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: #C6D0DE; }

/* 成功報酬をいただかない理由。見出しを大きく、本文はその下に */
.nofee {
  margin-top: 16px;
  padding: 15px 14px 14px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--ctad);
  border-radius: 6px;
}
.nofee_h {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  color: var(--ctad);
}
.nofee_p { margin-top: 11px; font-size: 14.5px; line-height: 1.85; }
.nofee_b { font-weight: 800; color: var(--navy); }

/* 費用 */
.price {
  margin-top: 14px;
  padding: 14px 13px 12px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--navy);
  border-radius: 6px;
  text-align: center;
}
.price_ttl { font-size: 15px; font-weight: 700; color: var(--ink); }
.price_num { margin-top: 2px; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--navy); }
.price_num b {
  font-size: 44px;
  letter-spacing: -.02em;
  background: linear-gradient(transparent 68%, var(--ylw) 68%, var(--ylw) 94%, transparent 94%);
}
.price_num i { font-style: normal; font-size: 24px; }
.price_num em { font-style: normal; font-size: 10px; color: var(--muted); vertical-align: super; margin-left: 2px; }
.price_sub { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* 料金の計算式。金額の下に置き、日数で決まることを式で見せる */
.calc {
  margin-top: 10px;
  padding: 12px 13px 11px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-left: 4px solid var(--ctad);
  border-radius: 5px;
}
.calc_ttl { font-size: 13px; font-weight: 800; color: var(--ctad); letter-spacing: .04em; }
.calc_row {
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}
.calc_row b { font-size: 19px; font-weight: 800; color: var(--navy); }
.calc_f { font-weight: 600; color: var(--muted); font-size: 13.5px; }
.calc_note { margin-top: 8px; font-size: 11.5px; line-height: 1.65; color: var(--muted); }

/* 捜索事例。実在の対応事例のみ。
   画像は報告カードから写真部分だけを切り出したもの（480×600・4:5に統一）。
   横2つ×縦2つの4枚グリッドで並べる */
.cases {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.case {
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 6px;
  overflow: hidden;
}
.case img { width: 100%; height: auto; }
.case_cap {
  padding: 6px 4px 7px;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* 捜索の実写（写真・動画）。工程の説明の直下に置く。
   正方形（1080×1080）で揃っているので2列固定で破綻しない */
.mds {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
/* 素材が1点しかない工程。左に寄って余りが目立つのを避け、中央に置く */
.mds--one { grid-template-columns: minmax(0, 64%); justify-content: center; }
/* チラシは文字が入っているので、写真より大きく見せる */
.mds--doc { grid-template-columns: minmax(0, 88%); justify-content: center; }
.md {
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 5px;
  overflow: hidden;
}
.md img, .md video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  background: transparent;
}
/* チラシのような縦長の紙面。正方形に切ると読めなくなるので全体を見せる。
   比率は画像の実寸（900×1271）。auto にすると読み込み前に高さ0になり、
   スクロール時にガタつくので必ず数値で持たせる */
.md--doc img { aspect-ratio: 900 / 1271; object-fit: contain; }
/* 動画は preload="none" のため、再生するまで中身が空になる。
   空の黒枠に見えないよう、親に濃紺の地と再生マークを敷く（再生すると映像が上に描かれる） */
.md_v {
  position: relative;
  display: block;
  background: var(--navy);
}
.md_v::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-38%, -50%);
  border-left: 20px solid rgba(255,255,255,.9);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  pointer-events: none;
}
/* 再生中は再生マークを消す（映像に重なるため）。付け外しは末尾の小さなスクリプト。
   ※映像を z-index で常に手前へ出す案は取らなかった。再生前の video は中身が透明ではなく
     暗い箱として描かれるため、濃紺の地と再生マークが読み込み前から隠れてしまう */
.md_v.is-playing::after { display: none; }
.md_cap {
  padding: 6px 8px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--muted);
}
.md_tag {
  display: inline-block;
  margin-right: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cta);
  color: var(--navy); /* CTA地は濃紺文字 8.67:1 */
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: 1px;
}

/* 他社との比較。2列・記号は◎△×のみ。派手な色は使わない */
.cmp { margin-top: 14px; overflow-x: auto; }
.cmp_t {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  font-size: 13px;
  line-height: 1.5;
}
.cmp_t th, .cmp_t td {
  border: 1px solid var(--hair);
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}
.cmp_corner { border: 0 !important; background: transparent; }
.cmp_t thead th {
  background: var(--navy);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
}
/* 自社の列だけCTA地＋濃紺文字（8.67:1）。他社列の濃紺地＋白文字と役割が入れ替わって見分けが付く */
.cmp_t thead th.cmp_own { background: var(--cta); color: var(--navy); }
.cmp_t tbody th {
  background: var(--tint);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 800;
  width: 27%;
}
.cmp_t td.cmp_o { font-weight: 700; color: var(--ink); }
.cmp_t tbody td { color: var(--muted); font-size: 12.5px; }
.mk { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; }
.mk--o { color: var(--ctad); }
.mk--t { color: var(--muted); }
.mk--x { color: var(--muted); }

/* 対応エリアのパネル地図（インラインSVG。外部の地図データ・画像は使わない）。
   47都道府県を大きさの違う長方形パネルで並べ、白い枠線で区切り、地方ごとに色分けする。
   県名は黒文字＋白フチ（paint-order で縁取りを文字の下に敷く）。
   強調する県だけ .mp--me（淡い山吹＋濃い琥珀の枠線）を当てる。
   表示するのは対象県と、対象県に接している県だけ。それ以外は .mp--off で隠す
   （パネル定義そのものは他県版で使い回すため消さない）。他県版に差し替えるときに触るのは
   HTML側の viewBox と .mp--off / .mp--me / .mpt--me の位置だけで、この配色は共通で使い回す */
.map {
  margin-top: 14px;
  padding: 10px 8px 8px;
  background: #FFFFFF;
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.map_svg { display: block; width: 100%; height: auto; }

/* パネル。白い枠線が隣同士で重なって2pxの区切りになる */
.mp { stroke: #FFFFFF; stroke-width: 2; }
.mp--hok { fill: #74A9DA; } /* 北海道 */
.mp--toh { fill: #A9D3E6; } /* 東北 */
.mp--kan { fill: #92D3B0; } /* 関東 */
.mp--chu { fill: #C3DC7E; } /* 中部 */
.mp--kin { fill: #F5D96A; } /* 近畿 */
.mp--chg { fill: #F2A65A; } /* 中国 */
.mp--shi { fill: #F8C99A; } /* 四国 */
.mp--kyu { fill: #F29B87; } /* 九州 */
.mp--oki { fill: #F29B87; } /* 沖縄 */
.mp--me  { fill: var(--cta); } /* 強調する県。淡い山吹 */
/* 表示しない県（対象県に接していない県）。rect にも text にも付く */
.mp--off { display: none; }

/* 対象県以外はグレーアウトする（社長指示）。
   地方別の色は .mp--kan 等で残してあるが、この指定が後に来るので上書きされる。
   対象県だけが色を持つので、どこの県のページかが一目で分かる。
   .mp--me は下で再指定して、グレーより後ろに置く */
.mp--hok, .mp--toh, .mp--kan, .mp--chu,
.mp--kin, .mp--chg, .mp--shi, .mp--kyu, .mp--oki { fill: #D8DEE6; }
/* 淡い山吹（#EACFA0）は周囲のグレー（#D8DEE6）との差が1.11:1しかなく、白い枠線のままだと
   強調した県が浮かない。枠線を濃い琥珀（--ctad）に変えると隣のグレーに対して4.62:1になり、
   「淡い山吹の面＋濃い輪郭」で対象県だけがはっきり立つ。
   ※対象県は隣県より後ろ（最後）に描く。先に描くと隣県の白い枠線が上に乗って輪郭が消える */
.mp.mp--me { fill: var(--cta); stroke: var(--ctad); stroke-width: 2.5; }

/* 県名。白フチを文字の下に敷いて、どの色のパネルの上でも読めるようにする */
.mpt {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  text-anchor: middle;
  fill: #12202F;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.mpt--me { font-weight: 800; }

/* 想い。数字も訴求も置かない。
   読むのは猫がいなくなった直後の人なので、行間と段落の間を広く取り、
   一文は長くしても1行は <br> で短く折り、視線が止まる場所を増やす。
   段落の間（margin-top）は行間より明確に広くして、かたまりとして読めるようにする */
.hope { margin-top: 16px; }
.hope p {
  margin-top: 26px;
  font-size: 15px;
  line-height: 2.05;
  color: var(--ink);
}
.hope p:first-child { margin-top: 0; }
/* 強調する段落（「そして10日後に、見つかりました。猫は、亡くなっていました。」）。
   色と太さは他の強調と同じ濃紺＋800。前後の余白を少し広げて、単独で立たせる */
.hope_em {
  font-weight: 800;
  color: var(--navy);
  margin-top: 32px;
}
.hope_em + p { margin-top: 32px; }
/* 締めは「そんな想いで、このサービスを運営しています。」。
   静かに終わらせたいので、最後の段落の下に一息ぶんの余白を足す
   （セクション下の padding だけだと、次のCTAに詰まって見える） */
.hope p:last-child { margin-bottom: 18px; }

/* よくある質問 */
.qa { margin-top: 14px; display: grid; gap: 8px; }
.qa_it { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 6px; }
.qa_q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 11px 36px 11px 13px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
}
.qa_q::-webkit-details-marker { display: none; }
.qa_q::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg);
}
.qa_it[open] .qa_q::after { transform: translateY(-30%) rotate(-135deg); }
.qa_a { padding: 0 13px 12px; font-size: 14px; line-height: 1.8; }

/* 下部固定バー */
.fixedbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--hair);
  z-index: 10;
}
.fixedbar a {
  display: block;
  max-width: var(--col);
  margin: 0 auto;
  background: var(--cta);
  color: var(--navy); /* CTA地は濃紺文字 8.67:1 */
  /* 淡くしたぶん、地（#EACFA0）とバーの背景（ほぼ白）の差が1.44:1しかない。
     枠がないとボタンの形が消えるので --ctad で輪郭を取る（地に対して4.15:1） */
  border: 2px solid var(--ctad);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  padding: 11px 10px;
  border-radius: 999px;
}

@media (max-width: 374px) {
  .below { padding: 26px 12px 6px; }
  .below .q { font-size: 17.5px; }
  .below .ans { font-size: 19px; }
  .below .ans_em { font-size: 23px; }
  .blk { padding: 14px 11px 12px; }
  .blk_ttl { font-size: 16.5px; }
  .blk_txt { font-size: 14.5px; }
  .blk_txt b { font-size: 17.5px; }
  .blk_end { font-size: 14.5px; }
  .fact_lead { font-size: 19.5px; }
  .own_lead { font-size: 15.5px; }
  .own_lead b { font-size: 23px; }
  .sec { padding: 24px 12px 22px; }
  .sec_h { font-size: 19px; }
  .sec_lead { font-size: 14px; }
  .dat { padding: 11px 10px 10px; }
  .dat_txt { font-size: 14px; }
  .dat_txt b { font-size: 21px; }
  .dat_sub { font-size: 12.5px; }
  .li li { font-size: 14px; }
  .item_h { font-size: 15px; }
  .item_p { font-size: 13.5px; }
  .step_h { font-size: 14.5px; }
  .step_p { font-size: 13.5px; }
  .voice_bd { font-size: 13.5px; }
  .price_num b { font-size: 38px; }
  .ba_bn { font-size: 30px; }
  .ba_brand { font-size: 14.5px; }
  .ba_k { font-size: 17px; }
  .ba_an b { font-size: 43px; }
  .ba_an i { font-size: 22px; }
  .ba_sub { font-size: 11.5px; }
  .nofee_h { font-size: 18px; }
  .nofee_p { font-size: 13.5px; }
  .calc_row { font-size: 13.5px; }
  .calc_row b { font-size: 17.5px; }
  .calc_f { font-size: 12.5px; }
  .case_cap { font-size: 11.5px; }
  .md_cap { font-size: 11px; }
  .cmp_t { font-size: 12px; }
  .cmp_t th, .cmp_t td { padding: 7px 4px; }
  .cmp_t thead th { font-size: 12.5px; }
  .cmp_t tbody th { font-size: 11.5px; }
  .cmp_t tbody td { font-size: 11.5px; }
  .mk { font-size: 17px; }
  .hope p { font-size: 14px; }
  .qa_q { font-size: 13.5px; }
  .qa_a { font-size: 13.5px; }
  .strip { font-size: 15.5px; }
  .hl_num { font-size: 56px; }
  .hl_txt { font-size: 20px; }
  .hl_unit { font-size: 25px; }
  .paw { width: 25px; height: 25px; }
  .lead { font-size: 20.5px; }
  .hero { min-height: 406px; }
  .st_num { font-size: 24px; }
  .st_ja { font-size: 11px; }
  .ctawrap { padding: 10px 10px 11px; }
  .cta-call_band { font-size: 18px; }
  .cta-call_number { font-size: 27px; gap: 6px; }
  .cta-ic { width: 23px; height: 23px; }
  .cta-call_badges { gap: 4px; }
  .cta-call_badge { font-size: 13px; padding: 3px 6px; }
  .cta-call_tap { font-size: 15px; }
}

/* PC。スマホ表示（〜767px）はここまでの指定のまま変えない。
   ① 外側を無彩色寄りにして「青いページ」に見えないようにする
   ② 本文カラムを 560→640px に広げる（560はスマホ想定の幅で、PCだと細長く見える）
   ③ 白／淡色のセクションが交互に出るので、区切りはカラムの中で付く */
@media (min-width: 768px) {
  :root { --col: 640px; }
  body { background: var(--bgpc); }
  .lead { font-size: 26px; }
  .hero { min-height: 462px; }
  .hero::before { background-image: url(../images/fv-pc.webp); background-position: 78% 44%; }
  .cta-call_tap { display: none; } /* PCはタップできないため非表示 */
  .sp-only { display: none; }      /* モバイル専用の改行はPCでは入れない */
}