/* ============================================================
   見出し用の丸ゴシック（2026-08-12 自前に切り替え）
   ------------------------------------------------------------
   Google Fonts から読むと、日本語は約2万字ぶんが細かく分けて配信され、
   本番の実測で705KB／56ファイルあった（太さ2種類のとき）。
   このLPが実際に使うのは1,672字だけなので、その分だけに削って
   1ファイル286KBにした。見た目は変わらない。
   作り直し: ./.venv-font/bin/python tools/build_font_subset.py
   ライセンス: SIL Open Font License 1.1（同じ場所に OFL.txt を置いてある）
   ============================================================ */
@font-face {
	font-family: "Zen Maru Gothic";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("https://otasuke-plus.com/main/lp/zen-maru-900.woff2") format("woff2");
}

/* ============================================================
   lp-pet.css — ペット探偵LP専用CSS（R2: デザイントーン全面刷新）
   ------------------------------------------------------------
   デザイン正本: reference/design_catbank.md（2026-08-09 社長指定）
   - 背景        #FDF8F1（暖色クリーム）
   - 本文文字    #35302A（暖色ダークブラウン）
   - 見出し      Zen Maru Gothic（Google Fonts。HTML側で<link>読み込み）
   - H2色        #B8560F（濃いオレンジブラウン）
   - メインCTA   #F08A3C ピル型（radius 999px）
   - 電話CTA     #2F7D6B（深緑）ピル型
   設計方針:
   - すべて .lp-pet スコープ配下に書き、賢威側と衝突させない
     （body背景のみ page-id 指定で例外。下記コメント参照）
   - 既存クラス .note01 / .voice-chat / .testimonials は再定義しない
   - 配置先: /main/lp-pet.css（新規作成方針。common-style.css へは
     追記しない。理由: common-style.css は全ページが読むため）
   - 旧FV部品（信頼バッジ .fv-badge / 3悩み .ly_point 打ち消し / 数値帯
     .fv-stats 赤帯）は 2026-08-09 社長指示で廃止したため削除済み
   ============================================================ */

/* ---- 新パレット ----
   背景クリーム  #FDF8F1
   文字         #35302A
   H2           #B8560F
   メインCTA    #F08A3C
   電話CTA      #2F7D6B
   赤強調       #E60000（本文の赤はこれ1色。2026-08-11 社長指示で明るい赤に戻した。旧: #C9351B←ff0000）
   青強調       #1565c0（本文の青はこれ1色。.em-navy / .em-blue 共通。
                旧: 深緑 #276A5A と #2A6E9E。2026-08-09に統一）
   薄ベージュ枠 #EAD9BF / 薄ベージュ地 #F7EFE2 / チップ枠 #F0C89B
------------------------------------------------- */

/* ============================================================================
   ★ 調整用のつまみ（ここだけ触ればファーストビューを微調整できます）
   ============================================================================
   数字を変えて保存 → /main/lp-pet.css に上げ直すだけで反映されます。
   迷ったら「元の値」に戻してください。

   ■ スマホ（横幅767px以下）  --fv-sp-◯◯
     zoom 写真の拡大率 / x 写真の横位置 / y 写真の縦位置
     band 人物の帯の高さ / top 文字全体の上の位置
     brand 見出しの大きさ / brand-lh 見出しの行間
     lead-s リード文の文字 / lead-ls リード文の字間
     chip-s チップの文字 / chip-pad-y,-x チップの余白 / chip-gap チップの間隔
     card-w カードの幅 / card-pad-y,-x カードの余白
     li-s 訴求の文字 / li-lh 訴求の行間 / li-gap 訴求の行の間隔
     bubble-w 吹き出しの幅 / bubble-s 文字 / bubble-lh 行間 / bubble-pad-y,-x 余白
     gap-lead,-brand,-chips,-card 各要素の下の間隔 / cta-gap CTAとの間隔

   ■ パソコン（横幅768px以上）  --fv-pc-◯◯
     スマホと同じ並び。ただし band は無く、zoom は100%より大きくしないと
     x（横位置）が効かない

   ■ 共通  --fv-◯◯
     radius 枠の角丸 / card-radius カードの角丸 / card-film カードの背景の濃さ
     bubble-radius 吹き出しの角丸 / film 文字の下の膜の濃さ
     tail-size しっぽの太さ / tail-len しっぽの長さ / tail-y,-x しっぽの位置
     note-s 下の注記の文字 / chip-note-s チップの※の文字

   ※ 下の :root の中は「1行1項目・コメントなし」にしてあります。
     DevToolsのStyles欄にそのまま貼れるようにするためです。
     複数行のコメントを混ぜると、貼ったときに一部の項目が消えます。
   ============================================================================ */
:root {
	--fv-sp-zoom: 116%;
	--fv-sp-x: 0%;
	--fv-sp-y: 20%;
	--fv-sp-band: 2px;
	--fv-sp-top: 0px;
	--fv-sp-brand: 36px;
	--fv-sp-textw: 74%;
	--fv-sp-price-s: 20px;
	--fv-sp-brand-lh: 1.3;
	--fv-sp-lead-s: 20px;
	--fv-sp-lead-ls: 0.08em;
	--fv-sp-chip-s: 12px;
	--fv-sp-chip-pad-y: 4px;
	--fv-sp-chip-pad-x: 7px;
	--fv-sp-chip-gap: 5px;
	--fv-sp-card-w: 77%;
	--fv-sp-card-pad-y: 7px;
	--fv-sp-card-pad-x: 5px;
	--fv-sp-li-s: 14px;
	--fv-sp-li-lh: 1.5;
	--fv-sp-li-gap: 0px;
	--fv-sp-bubble-w: 200px;
	--fv-sp-bubble-w-pet: 234px;
	--fv-sp-bubble-s: 16px;
	--fv-sp-bubble-lh: 1.36;
	--fv-sp-bubble-pad-y: 9px;
	--fv-sp-bubble-pad-x: 12px;
	--fv-sp-gap-lead: 12px;
	--fv-sp-gap-brand: 20px;
	--fv-sp-gap-chips: 14px;
	--fv-sp-gap-card: 16px;
	--fv-sp-cta-gap: 22px;
	--fv-pc-zoom: 124%;
	--fv-pc-x: 100%;
	--fv-pc-y: 85%;
	--fv-pc-top: 0px;
	--fv-pc-brand: 60px;
	--fv-pc-textw: 60%;
	--fv-pc-price-s: 32px;
	--fv-pc-brand-lh: 1.3;
	--fv-pc-lead-s: 20px;
	--fv-pc-lead-ls: 0.08em;
	--fv-pc-chip-s: 14px;
	--fv-pc-chip-pad-y: 5px;
	--fv-pc-chip-pad-x: 14px;
	--fv-pc-chip-gap: 8px;
	--fv-pc-card-w: 448px;
	--fv-pc-card-pad-y: 10px;
	--fv-pc-card-pad-x: 20px;
	--fv-pc-li-s: 18px;
	--fv-pc-li-lh: 1.5;
	--fv-pc-li-gap: 5px;
	--fv-pc-bubble-w: 540px;
	--fv-pc-bubble-w-pet: 580px;
	--fv-pc-bubble-s: 26px;
	--fv-pc-bubble-lh: 1.5;
	--fv-pc-bubble-pad-y: 10px;
	--fv-pc-bubble-pad-x: 15px;
	--fv-pc-gap-lead: 20px;
	--fv-pc-gap-brand: 40px;
	--fv-pc-gap-chips: 20px;
	--fv-pc-gap-card: 20px;
	--fv-pc-cta-gap: 28px;
	--fv-tail-y: 60%;
	--fv-tail-x: -14px;
	--fv-film: 1;
	--fv-radius: 20px;
	--fv-card-radius: 16px;
	--fv-card-film: 1;
	--fv-bubble-radius: 18px;
	--fv-tail-size: 10px;
	--fv-tail-len: 14px;
	--fv-note-s: 10px;
	--fv-outline-lead: 1px;
	--fv-outline-brand: 2px;
	--fv-chip-note-s: 7px;
}

/* LPページの背景。賢威がbodyに白を敷くため、LPの固定ページIDに限って
   クリームに差し替える（本体=990 / 地域版=746。他ページには影響しない） */
body.page-id-990,
body.page-id-746 {
  background: #FDF8F1;
}

.lp-pet {
  line-height: 1.9;
  font-size: 16px;
  color: #35302A;
}

.lp-pet p {
  margin: 0 0 1em;
}

.lp-pet img {
  max-width: 100%;
  height: auto;
}

/* ---- 見出し（Zen Maru Gothic） ------------------------------ */

.lp-pet h2,
.lp-pet h3,
.lp-pet h4,
.lp-pet h5 {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
}

/* 賢威側の h2 装飾との喧嘩（実測）:
   - mct-child/base.css が h2 { color:#fff !important } を持つため、
     色だけは !important で上書きしないと白文字（背景と同化）になる
   - common-style.css が h2 に radius 8px と box-shadow を敷くため明示リセット */
.lp-pet h2 {
  /* 太さ 700 → 900（2026-08-12 社長指示。特にスマホで太いほうが読みやすい）。
     Zen Maru Gothic は 700 と 900 の両方を読み込んでいるので、合成太字ではなく
     本物の900が出る（読み込みは PHP の ⑧ と build_preview.py）。 */
  /* おたすけプラス既存のH2（オレンジのグラデ帯＋白文字＋角丸）をベースに、
     角を大きく丸めて丸ゴシックにし、白の内枠と下の影で立体感を出した。
     2026-08-11: 文字下にオレンジの線を引く形（参考サイト由来）は廃止 */
  margin: 2.6em 0 1.2em;
  padding: 14px 22px;
  background: linear-gradient(135deg, #EF8212, #F6B26B);
  border: none;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 3px 0 #D9700B;
  text-align: center;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.45;
  color: #ffffff !important;
}
.lp-pet h2::after { content: none; }

@media (max-width: 767px) {
  .lp-pet h2 {
    font-size: 22px;
  }
}

/* h3/h4 も mct-child/base.css が color:#fff!important＋濃色背景を持つため
   background リセットと !important の色指定が必要 */
.lp-pet h3 {
  margin: 1.8em 0 0.8em;
  padding: 0.3em 0.1em;
  background: none;
  border: none;
  border-bottom: 3px solid #F0C89B;
  border-radius: 0;
  box-shadow: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #35302A !important;
}

.lp-pet h4 {
  margin: 1.4em 0 0.6em;
  padding: 0.15em 0.6em;
  background: none;
  border: none;
  border-left: 4px solid #F08A3C;
  border-radius: 0;
  box-shadow: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #35302A !important;
}

.lp-pet h5 {
  margin: 1.4em 0 0.5em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  /* 旧 #B8560F。2026-08-11 社長指示でイメージカラーのオレンジに統一 */
  color: #EF8519;
}

/* ---- 強調（新パレットに調和させた再配色） -------------------- */

.lp-pet .em-red {
  color: #E60000;
  font-weight: 700;
}

/* 旧: 深緑 #276A5A。2026-08-09に青 #1565c0 へ変更（黒との識別性）。
   クラス名 .em-navy は使用箇所が多いため据え置き、値だけ差し替えた。
   #1565c0 は社内の色ルール正本（seo_pipeline の color_rules.md）の青。 */
.lp-pet .em-navy {
  color: #1565c0;
  font-weight: 700;
}

/* .em-blue も同じ青に揃える（旧 #2A6E9E。青が2種類あると
   拾い読みの導線が分かれるため、本文の青は1色だけにする） */
.lp-pet .em-blue {
  color: #1565c0;
  font-weight: 700;
}

.lp-pet .em-bold {
  font-weight: 700;
}

/* ---- ブレット ---------------------------------------------- */

/* ◎ブレット（解決方法など） */
.lp-pet ul.list-check {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.lp-pet ul.list-check > li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.5em;
}
.lp-pet ul.list-check > li::before {
  content: "◎";
  position: absolute;
  left: 0;
  color: #2F7D6B;
  font-weight: 700;
}

/* ○ブレット（共感・問題提起など） */
.lp-pet ul.list-circle {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.lp-pet ul.list-circle > li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.5em;
}
.lp-pet ul.list-circle > li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: #F08A3C;
  font-weight: 700;
}

/* ●注意ブレット（業者注意） */
.lp-pet ul.list-caution {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.lp-pet ul.list-caution > li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}
.lp-pet ul.list-caution > li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #E60000;
}

/* ・プレーンリスト（自分ごと・プロに頼むと等） */
.lp-pet ul.list-plain {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.lp-pet ul.list-plain > li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.5em;
}
.lp-pet ul.list-plain > li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ---- 番号付き理由（選ばれる理由） --------------------------- */

.lp-pet .reason-item {
  margin: 1.2em 0;
  border: 2px solid #EAD9BF;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.lp-pet .reason-item > h5 {
  margin: 0;
  padding: 0.6em 0.9em;
  background: #F7EFE2;
  border-bottom: 2px solid #EAD9BF;
  color: #B8560F;
  font-size: 16px;
}
.lp-pet .reason-item > p {
  margin: 0;
  padding: 0.8em 0.9em;
  /* 本文16pxに対して少し小さく（2026-08-12 社長指示）。
     見出し帯とのメリハリが出て、7項目が一気に読めるようになる */
  font-size: 14px;
  line-height: 1.8;
}

/* ---- 手順パネル（流れ STEP1〜5） ---------------------------------
   2026-08-09 全面作り直し。賢威の .box_style / .box_style_gray /
   .box_inner への依存を切った（.box_style_title の濃いグレー背景が
   読みづらいという指摘のため）。見た目は .reason-item と同じ
   「白カード＋クリームの見出し帯＋角丸」に揃え、LPのパレットだけで組む。
   ステップ番号を目で追えるように、見出し帯の左にオレンジの太い縦棒を
   置き、パネル間はオレンジの三角（.step-arrow）でつなぐ。 */

.lp-pet .step-panel {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 2px solid #EAD9BF;
  border-radius: 14px;
  overflow: hidden;
}
.lp-pet .step-panel_title {
  margin: 0;
  padding: 0.6em 0.9em 0.6em 0.75em;
  background: #F7EFE2;
  border-bottom: 2px solid #EAD9BF;
  border-left: 6px solid #F08A3C;
  color: #B8560F;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.lp-pet .step-panel_body {
  padding: 0.85em 0.95em;
}

/* ---- 費用セクション（2026-08-12 社長指示） --------------------
   ・fee-formula: 「捜索費＋出張費＝総額」を式で見せる。
     料金の決まり方が分かりづらいという指摘への対応。
   ・fee-note   : 参考例の注意書き。大きさは --fv-note-s（10px）を
     使い回すので、コメ印と同じつまみ1つで揃う。
   ・fee-panel  : 「見つからなかった場合」「プランの選び方」。
     H3にすると料金の説明と同列に見えるため、見出しではなく
     枠にして、料金の説明を読み切った後ろへ置いた。
     .step-panel と同じ配色だが、オレンジの縦線は付けない
     （STEPの連番と混同させない）。
   -------------------------------------------------------------- */
.lp-pet .fee-formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 1.2em 0 1.6em;
	padding: 14px 10px;
	background: #fff;
	border: 2px solid #EAD9BF;
	border-radius: 14px;
}
.lp-pet .fee-formula_item {
	padding: 6px 14px;
	border-radius: 999px;
	background: #F7EFE2;
	color: #B8560F;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}
.lp-pet .fee-formula_item--total {
	background: #F08A3C;
	color: #fff;
}
.lp-pet .fee-formula_op {
	color: #B8560F;
	font-size: 17px;
	font-weight: 700;
}
.lp-pet .fee-note {
	/* 直前の②出張費の本文にくっついて見えないよう上を空ける。
	   賢威が p に margin !important を当てているので !important が要る */
	margin-top: 1.5em !important;
	font-size: var(--fv-note-s);
	line-height: 1.6;
	color: #7E7466;
}
.lp-pet .fee-panel {
	margin: 1.4em 0 0;
	padding: 0;
	background: #fff;
	border: 2px solid #EAD9BF;
	border-radius: 14px;
	overflow: hidden;
}
.lp-pet .fee-panel_title {
	margin: 0 !important;
	padding: 0.6em 0.9em;
	background: #F7EFE2;
	border-bottom: 2px solid #EAD9BF;
	color: #B8560F;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}
.lp-pet .fee-panel_body { padding: 0.85em 0.95em; }
.lp-pet .fee-panel_body > p:last-child { margin-bottom: 0 !important; }
@media (max-width: 767px) {
	.lp-pet .fee-formula { gap: 6px; padding: 12px 8px; }
	.lp-pet .fee-formula_item { padding: 5px 11px; font-size: 15px; }
	.lp-pet .fee-formula_op { font-size: 15px; }
	.lp-pet .fee-panel_title { font-size: 16px; }
}

/* パネル間の矢印。旧実装は otasuke-plus-arrow.webp（幅いっぱいの
   灰色の山形）でトーンに合わなかったため、CSSの三角に置き換えた */
.lp-pet .step-arrow {
  width: 0;
  height: 0;
  margin: 10px auto;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 14px solid #F0C89B;
}
@media (max-width: 767px) {
  .lp-pet .step-panel_title {
    font-size: 15px;
  }
}

/* ---- 商品説明パネル ----------------------------------------- */

.lp-pet .proc-panel {
  margin: 1.4em 0;
  padding: 1em 1.2em;
  background: #fff;
  border: 1px solid #EAD9BF;
  border-radius: 14px;
}
.lp-pet .proc-panel > h3:first-child {
  margin-top: 0.2em;
}

/* ---- QA（よくある質問） -------------------------------------
   2026-08-09: 賢威の dl.qa-list.accordion-list をやめ、SEOパイプラインと
   同じ details/summary の .faq-item に統一した。.faq-item の定義は
   common-style.css 側にあり（白地＋枠 #f0dcc0＋見出し帯 #FFF4E6＋
   右端の＋/−。JS不使用）、そのままLPのクリーム系トーンに合うため
   ここでは上書きしない。旧 .accordion-list dt の再配色は依存ごと削除。
   唯一の調整は、H3直後に来たときの上余白だけ。 */
.lp-pet h3 + .faq-item {
  margin-top: 0.9em;
}

/* ---- 注記 --------------------------------------------------- */
/* .note01 は既存（wp-custom-css）。ここでは再定義しない */

.lp-pet .note-small {
  /* 11px → 参考例（.fee-note＝10px）と混在して見えたため、小さい方に統一
     （2026-08-13 社長指示）。--fv-note-s のつまみ1つで全部動く */
  font-size: var(--fv-note-s);
  line-height: 1.5;
  color: #7E7466;
  display: inline-block;
}

/* ---- ピル型CTAボタン: 旧CTA（2026-08-10にcta-callへ置換） ------
   経緯: 旧CTA画像 petcta007 → 緑ピル（この定義）→ .cta-call（下の
   「電話CTA本体」）。本文の電話CTAはすべて .cta-call に置き換え済みで、
   この定義は現在未使用。 */

.lp-pet a.btn-pill,
.lp-pet a.btn-pill:visited {
  display: block;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 13px 22px;
  border-radius: 999px;
  text-align: center;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(53, 48, 42, 0.22);
}
.lp-pet a.btn-pill:hover {
  text-decoration: none;
  color: #fff;
  opacity: 0.92;
}

/* 電話CTA（深緑） */
.lp-pet a.btn-tel,
.lp-pet a.btn-tel:visited {
  background: #2F7D6B;
}
.lp-pet .btn-tel_label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.lp-pet .btn-tel_number {
  display: block;
  font-size: 27px;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .lp-pet .btn-tel_number {
    font-size: 24px;
  }
}

/* メインCTA（オレンジ。フォーム誘導などに使用） */
.lp-pet a.btn-main,
.lp-pet a.btn-main:visited {
  background: #F08A3C;
  font-size: 18px;
}

/* ---- 本文内CTAブロック -------------------------------------- */

.lp-pet .cta-tel {
  text-align: center;
  margin: 1.6em 0 0.5em;
}
.lp-pet .cta-note {
  /* コメ印はFVも本文中のCTA9箇所も同じ大きさにする（2026-08-12 社長指示）。
     つまみは --fv-note-s ひとつ。10px で iPhone 12 Pro なら1行に収まる。 */
  text-align: center;
  font-size: var(--fv-note-s);
  color: #7E7466;
  margin-bottom: 1.6em;
}
.lp-pet .cta-note a {
  color: #B8560F;
}

/* ---- 電話CTA本体（.cta-call） --------------------------------
   現行LPのCTA画像 petcta007（赤い帯＋白い本体＋バッジ3つ＋タップ誘導）
   を画像ではなくHTMLで再現したもの（2026-08-10 社長指示）。
   文言は現行画像のまま。配色だけLPパレットに調和させる
   （帯とアクセント＝LPの赤 #E60000、バッジ＝薄ベージュ系）。
   電話番号の数字表示は現行画像に無いが、PCはタップできないため
   番号を太く大きく表示する。タップ誘導の1行はSPのみ表示。 */

.lp-pet a.cta-call,
.lp-pet a.cta-call:visited {
  display: block;
  /* 枠線2px×2が幅に加算されて画面から4pxはみ出し、右の角丸が
     わずかに切れていた（2026-08-12 実測）。枠線を幅に含める */
  box-sizing: border-box;
  width: min(100%, 480px);
  margin: 0 auto;
  /* 現行LPのCTA画像（petcta007）の地色を実測して合わせた（#FEF9ED〜#FFF4E6）。
     2026-08-12 社長指示で白から変更 */
  background: #FFF6E8;
  border: 2px solid #EA420C;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(53, 48, 42, 0.22);
  text-align: center;
  text-decoration: none;
  color: #35302A;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-pet a.cta-call:hover {
  text-decoration: none;
  color: #35302A;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(53, 48, 42, 0.3);
}
.lp-pet a.cta-call:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(53, 48, 42, 0.2);
}

/* 帯見出し（現行画像の赤帯。どぎつくならないようLPの赤1色で塗る） */
.lp-pet .cta-call_band {
  display: block;
  padding: 8px 10px;
  background: #EA420C;
  color: #fff;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  /* 2026-08-12 社長指示で1.5倍（旧17px）。CTAで一番読ませたい行のため */
  font-size: 25px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* 白い本体（受付情報→バッジ→タップ誘導） */
.lp-pet .cta-call_body {
  display: block;
  padding: 12px 14px;
}
.lp-pet .cta-call_hours {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
}
.lp-pet .cta-call_number {
  display: block;
  margin: 1px 0 2px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #EA420C;
}
.lp-pet .cta-call_free {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
}
.lp-pet .cta-call_free-em {
  color: #EA420C;
}

/* バッジ3つ（即日捜索開始／捜索プラン相談可／年間実績1200件以上） */
.lp-pet .cta-call_badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 9px 0 0;
}
.lp-pet .cta-call_badge {
  /* 2026-08-12: 元のCTA画像（petcta007）に寄せて、2行＋1.5倍に（社長指示）。
     旧: 1行・12px（PC）/ 11px（SP） */
  padding: 4px 10px;
  border-radius: 999px;
  /* CTAの地色をベージュにしたことで、バッジの地色（旧 #F7EFE2）が
     背景に沈んだため白に。元のCTA画像でもバッジは地色から浮いている */
  background: #fff;
  border: 1px solid #F0C89B;
  color: #B8560F;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

/* タップ誘導（SPのみ表示）。.sp-only は display:inline のため、
   ここで block と PC非表示を明示して余白を効かせる */
.lp-pet .cta-call_tap {
  display: block;
  margin: 10px 0 0;
  font-weight: 700;
  /* 12px → 18px（1.5倍）。元のCTA画像でも枠いっぱいに大きく入っている */
  font-size: 18px;
  line-height: 1.4;
  color: #B8560F;
}
@media (min-width: 768px) {
  .lp-pet .cta-call_tap {
    display: none;
  }
}
@media (max-width: 767px) {
  .lp-pet .cta-call_band {
    font-size: 22px;   /* 1.5倍（旧15px） */
    letter-spacing: 0.02em;
  }
  .lp-pet .cta-call_number {
    font-size: 30px;
  }
  .lp-pet .cta-call_badge {
    font-size: 16.5px;   /* 1.5倍（旧11px） */
    padding: 4px 9px;
  }
}

/* ============================================================
   FV（ファーストビュー）共通
   ============================================================ */

.lp-pet .fv {
  margin: 0 0 2.2em;
  padding: 14px 0 0;
}

.lp-pet .fv-note {
  text-align: center;
  font-size: var(--fv-note-s);
  color: #7E7466;
  margin: 10px 0 0;
}
.lp-pet .fv-note a {
  color: #B8560F;
}

/* メイン画像プレースホルダ（新画像はImageGen工程で作成。新トーンに再配色）*/
.lp-pet .fv-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3EADB;
  border: 2px dashed #CDB894;
  color: #9A8A6E;
  font-size: 16px;
  font-weight: 700;
}
/* 案A: アーチ型（上が丸い写真枠） */
.lp-pet .fv-ph--arch {
  aspect-ratio: 16 / 10;
  border-radius: 170px 170px 16px 16px;
}
/* 案B: 角丸長方形 */
.lp-pet .fv-ph--round {
  aspect-ratio: 2160 / 1250;
  border-radius: 20px;
}

/* 数値チップ（8割以上を保護／対応数1200以上／最短5分で手配） */
.lp-pet .fv-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}
/* 白地×深緑（案A・案C） */
.lp-pet .fv-stats_chip {
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #2F7D6B;
  color: #2F7D6B;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
/* オレンジ塗り（案B） */
.lp-pet .fv-stats_chip--fill {
  background: #F08A3C;
  border-color: #F08A3C;
  color: #fff;
}
@media (max-width: 767px) {
  .lp-pet .fv-stats_chip {
    font-size: 12px;
    padding: 4px 10px;
  }
}

/* ---- 案A｜情緒リード型 -------------------------------------- */

.lp-pet .fv-a {
  text-align: center;
}
.lp-pet .fv-a_lead {
  display: inline-block;
  margin: 0 0 6px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #F08A3C;
}
.lp-pet .fv-a_copy {
  margin: 0 0 18px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.5;
}
.lp-pet .fv-a_copy .fv-line {
  display: block;
}
.lp-pet .fv-line--ink {
  color: #35302A;
}
.lp-pet .fv-line--orange {
  color: #B8560F;
}
.lp-pet .fv-line--red {
  color: #E60000;
}
@media (max-width: 767px) {
  .lp-pet .fv-a_lead {
    font-size: 15px;
  }
  .lp-pet .fv-a_copy {
    font-size: 24px;
  }
}
.lp-pet .fv-a .fv-ph {
  margin: 0 auto 18px;
  max-width: 620px;
}
.lp-pet .fv-a_brand {
  margin: 0 0 10px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  color: #B8560F;
}
@media (max-width: 767px) {
  .lp-pet .fv-a_brand {
    font-size: 21px;
  }
}

/* ---- 案B｜ブランド前面型 ------------------------------------ */

.lp-pet .fv-b {
  text-align: center;
}
.lp-pet .fv-b_brand {
  margin: 0 0 12px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.3;
  color: #B8560F;
}
@media (max-width: 767px) {
  .lp-pet .fv-b_brand {
    font-size: 33px;
  }
}
.lp-pet .fv-b .fv-ph {
  margin: 0 auto 16px;
  max-width: 680px;
}
.lp-pet .fv-b_truth {
  margin: 0 0 16px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.6;
}
.lp-pet .fv-b_truth .fv-line {
  display: block;
}
@media (max-width: 767px) {
  .lp-pet .fv-b_truth {
    font-size: 18px;
  }
}
.lp-pet .fv-b_cards {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
}
.lp-pet .fv-b_cards_item {
  flex: 1 1 0;
  max-width: 220px;
  padding: 12px 6px;
  background: #fff;
  border: 2px solid #F0C89B;
  border-radius: 16px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: #B8560F;
}
@media (max-width: 767px) {
  .lp-pet .fv-b_cards_item {
    font-size: 12px;
    padding: 10px 4px;
  }
}

/* ---- 案C｜写真フル背景型 ------------------------------------ */

.lp-pet .fv-c {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #F3EADB; /* 写真プレースホルダ（FV全面） */
  border: 2px dashed #CDB894;
  text-align: center;
}
.lp-pet .fv-c_ph-label {
  padding: 60px 16px 0;
  color: #9A8A6E;
  font-size: 16px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .lp-pet .fv-c_ph-label {
    padding-top: 44px;
  }
}
/* 写真の下半分に重ねるコピー面。クリームのグラデーションで文字を立たせる */
.lp-pet .fv-c_inner {
  margin-top: 120px;
  padding: 56px 16px 26px;
  background: linear-gradient(
    180deg,
    rgba(253, 248, 241, 0) 0%,
    rgba(253, 248, 241, 0.94) 34%,
    #FDF8F1 100%
  );
}
@media (max-width: 767px) {
  .lp-pet .fv-c_inner {
    margin-top: 80px;
    padding-top: 44px;
  }
}
.lp-pet .fv-c_lead {
  display: inline-block;
  margin: 0 0 6px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #B8560F;
}
.lp-pet .fv-c_brand {
  margin: 0 0 14px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.3;
  color: #35302A;
}
@media (max-width: 767px) {
  .lp-pet .fv-c_lead {
    font-size: 14px;
  }
  .lp-pet .fv-c_brand {
    font-size: 30px;
  }
}

/* ---- 案D/案E｜折衷型（fv4/fv5。部品はすべて案A/案Bの既存クラス） ----
   新規はこのコンテナ2定義のみ。中央揃えは案A/Bと同じ、
   写真の余白・最大幅は案B（.fv-b .fv-ph）と同値 */
.lp-pet .fv-d,
.lp-pet .fv-e {
  text-align: center;
}
.lp-pet .fv-d .fv-ph,
.lp-pet .fv-e .fv-ph {
  margin: 0 auto 16px;
  max-width: 680px;
}

/* ---- 案D改（fv6）｜写真フル背景×折衷型 ------------------------
   fv4（案D）の並び順に、案C（.fv-c）の全面背景方式と
   広告回収文言5つの白カードを追加した確定版。
   既存定義は変更せず、fv6専用の新規クラスのみここに追記 */

/* FV全面が写真プレースホルダ（実装は .fv-c と同方式） */
.lp-pet .fv-f {
  position: relative;
  overflow: hidden;
  border-radius: var(--fv-radius);
  /* 背景写真（スマホは縦長・PCは正方形。下のメディアクエリで出し分け）。
     写真が読めない間もトーンが崩れないよう、下に元のクリーム色を敷く */
  background-color: #F3EADB;
  background-image: url("https://otasuke-plus.com/main/lp/fv-sp.webp");
  /* cover ちょうどだと人物の顔がコピーの真ん中に来てぶつかる。
     少し拡大して右下へ寄せ、顔と文字を左右に分ける（2026-08-12 実測で決定） */
  background-size: 138% auto;
  background-position: 76% 92%;
  background-repeat: no-repeat;
  border: none;
  text-align: center;
}
@media (min-width: 768px) {
  .lp-pet .fv-f {
    background-image: url("https://otasuke-plus.com/main/lp/fv-pc.webp");
    background-size: cover;
    background-position: 62% top;
  }
}

/* プレースホルダ表記は背景の隅（右上）に小さく */
.lp-pet .fv-f_ph-label {
  position: absolute;
  top: 8px;
  right: 14px;
  margin: 0;
  color: #9A8A6E;
  font-size: 11px;
  font-weight: 700;
}
/* 写真に重ねるコピー面。グラデーション位置はpx指定にして、
   コンテンツ量が増えても文字部の可読域が変わらないようにする */
.lp-pet .fv-f_inner {
  margin-top: 170px; /* 写真が素通しで見える帯の高さ */
  /* 下の余白を厚めに取り、FVの枠と直下のCTAが詰まって見えないようにする
     （2026-08-11 社長指示） */
  padding: 48px 16px 44px;
  /* 2026-08-12: 以前は 150px から下を単色 #FDF8F1 で塗りつぶしていた
     （FVがプレースホルダの箱だった頃の名残）。背景に本物の写真が入った
     ので、写真が透ける薄い膜に変えた。下側は薄くして、右下の人物が
     見えるようにしている。 */
  /* 2026-08-12: 全面を一様に伏せると右にいる人物の顔まで白くなる。
     横方向のグラデーションにして、文字が乗る左〜中央だけを伏せ、
     人物のいる右側は素通しにする。縦方向は上端だけ軽くぼかす。 */
  background:
    linear-gradient(90deg,
      rgba(253,248,241,0.62) 0%,
      rgba(253,248,241,0.58) 38%,
      rgba(253,248,241,0.28) 66%,
      rgba(253,248,241,0.04) 86%,
      rgba(253,248,241,0.00) 100%),
    linear-gradient(180deg,
      rgba(253,248,241,0.00) 0,
      rgba(253,248,241,0.30) 46px,
      rgba(253,248,241,0.30) 100%);
}
@media (max-width: 767px) {
  /* スクロールせずにCTAまで見えるように詰める（2026-08-12 社長指示）。
     写真だけの帯 100→28px、上下の余白も圧縮 */
  .lp-pet .fv-f_inner {
    margin-top: var(--fv-sp-top);
    /* 下に「写真だけの帯」を作る。文字はすべて中央のまま、
       この帯に人物の顔が入るよう写真側を合わせる
       （2026-08-12 社長指示。文字を左右にずらさない方針）。
       帯の高さは「CTAの電話番号が1画面に収まる」上限から逆算した */
    padding: 10px 12px var(--fv-sp-band);
  }
}

/* 訴求5つ（広告回収文言）: 白の角丸カード×緑チェック。
   半透明にして背景写真をわずかに透かしつつ可読性を優先 */
.lp-pet .fv-f_points {
  /* 下地は白。--fv-card-film を1未満にすると背景写真が透ける
     （2026-08-12 社長指示で 0.84 → 1 の真っ白に。白のほうが読みやすい） */
  /* padding と border が幅に加算されて枠から20pxはみ出していた（2026-08-12） */
  box-sizing: border-box;
  width: min(100%, 540px);
  margin: 0 auto 18px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, var(--fv-card-film));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 2px solid #F0C89B;
  border-radius: var(--fv-card-radius);
  text-align: left;
}
.lp-pet .fv-f_points ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-pet .fv-f_points li {
  position: relative;
  padding-left: 1.5em;
  margin: 0 0 5px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  color: #35302A;
}
.lp-pet .fv-f_points li:last-child {
  margin-bottom: 0;
}
.lp-pet .fv-f_points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2F7D6B;
  font-weight: 900;
}
/* SP: 縦の間延び防止（行間・パディング詰め） */
@media (max-width: 767px) {
  .lp-pet .fv-f_points {
    padding: 10px 12px;
    margin-bottom: 14px;
  }
  .lp-pet .fv-f_points li {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 4px;
  }
}

/* fv6: 数値チップをSPでも横1列に＋※小目印（2026-08-09 社長指示） */
.lp-pet .fv-stats--row { flex-wrap: nowrap; }
.lp-pet .fv-stats_note {
	display: block;
	text-align: center;
	font-size: var(--fv-chip-note-s);
	font-weight: 400;
	line-height: 1.1;
	opacity: 0.55;
}
@media (max-width: 767px) {
	.lp-pet .fv-stats--row { gap: 5px; }
	.lp-pet .fv-stats--row .fv-stats_chip {
		font-size: var(--fv-sp-chip-s);
		padding: var(--fv-sp-chip-pad-y) var(--fv-sp-chip-pad-x);
		white-space: nowrap;
	}
}

/* fv6b比較用: チップ2行（2個＋1個）レイアウト */
.lp-pet .fv-stats--tworow {
	flex-wrap: wrap;
	max-width: 310px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.lp-pet .fv-stats--tworow { gap: 6px; }
	.lp-pet .fv-stats--tworow .fv-stats_chip {
		font-size: 12px;
		padding: 4px 12px;
		white-space: nowrap;
	}
}

/* ※目印はチップ内で改行して下段中央（2026-08-09 社長指示・※3は廃止） */
.lp-pet .fv-stats--row .fv-stats_chip { text-align: center; }

/* セクション間の転換矢印（旧: グレーの矢印画像）。STEPの三角より一回り大きく */
.lp-pet .step-arrow--section {
	margin: 18px auto 22px;
	border-left-width: 18px;
	border-right-width: 18px;
	border-top-width: 19px;
	border-top-color: #F0A868;
}

/* ============================================================
   Googleレビュー（FV直下）— Googleマップのクチコミ風カード
   ・外部リンクは張らない（離脱防止。2026-08-11 社長指示）
   ・長文は畳んで「続きを読む」で開く（JS不使用・checkbox＋CSS）
   ============================================================ */
.lp-pet .gmap-reviews {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	align-items: start;
	margin: 14px 0 30px;
}
.lp-pet .gmap-review {
	position: relative;
	margin: 0;
	padding: 14px 16px 12px;
	background: #F6F6F6;
	border-radius: 14px;
}
.lp-pet .gmap-review_toggle { position: absolute; opacity: 0; pointer-events: none; }
.lp-pet .gmap-review_head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.lp-pet .gmap-review_avatar {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #2F7D6B;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-pet .gmap-review_meta { display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.lp-pet .gmap-review_name { font-size: 14px; font-weight: 700; color: #35302A; }
.lp-pet .gmap-review_when { font-size: 11.5px; color: #8A8177; }
.lp-pet .gmap-review_g { flex: 0 0 auto; width: 18px; height: 18px; }
/* 2026-08-13: 星は名前の右横の空きへ移した（headの中）。1行ぶん縦が縮む */
.lp-pet .gmap-review_stars {
	flex: 0 0 auto;
	color: #FBBC05;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}
.lp-pet .gmap-review_body {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13.5px;
	line-height: 1.75;
	color: #35302A;
}
.lp-pet .gmap-review_body p { margin: 0 0 0.6em; }
.lp-pet .gmap-review_body p:last-child { margin-bottom: 0; }

/* 折りたたみ */
.lp-pet .gmap-review--clamp .gmap-review_body {
	position: relative;
	/* 2行ぶん（行間1.75 × 2 = 3.5em）。3行→2行（2026-08-13 社長指示）。
	   クチコミ欄だけで4.5画面あったため、件数を8→5、行数を3→2に詰めた */
	max-height: 3.5em;
	overflow: hidden;
}
.lp-pet .gmap-review--clamp .gmap-review_body::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2.2em;
	background: linear-gradient(rgba(246,246,246,0), #F6F6F6);
}
/* ---- クチコミ欄の詰め（2026-08-13 社長指示） -------------------
   ・本文を16pxに（本文の他の文字と同じ大きさ）
   ・アイコン・投稿者名まわりをコンパクトに
   ・PCで最後の1件が1列だけ余ったとき、中央に置く
   -------------------------------------------------------------- */
div.lp-pet .gmap-review_body { font-size: 16px !important; line-height: 1.7 !important; }
.lp-pet .gmap-review--clamp .gmap-review_body { max-height: 3.4em; }

/* 上のかたまりを小さくする。本文を大きくしたぶんをここで取り返す */
.lp-pet .gmap-review_avatar { width: 26px; height: 26px; font-size: 12px; }
.lp-pet .gmap-review_name   { font-size: 12.5px; }
.lp-pet .gmap-review_when   { font-size: 10.5px; }
.lp-pet .gmap-review_head   { gap: 7px; margin-bottom: 6px; }
.lp-pet .gmap-review_stars  { font-size: 13px; }
.lp-pet .gmap-review_g      { width: 15px; height: 15px; }
.lp-pet .gmap-review_more   { margin-top: 5px; font-size: 12px; }

@media (min-width: 768px) {
	/* 2列に並べて最後の1件だけ余ったら、その1件を中央に置く */
	.lp-pet .gmap-review:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 7px);
	}
}

.lp-pet .gmap-review_more {
	display: inline-block;
	margin-top: 8px;
	color: #6B6257;
	font-size: 13px;
	cursor: pointer;
}
.lp-pet .gmap-review_more::after { content: "続きを読む"; }
.lp-pet .gmap-review_more:hover { text-decoration: underline; }
.lp-pet .gmap-review_toggle:checked ~ .gmap-review_body { max-height: none; }
.lp-pet .gmap-review_toggle:checked ~ .gmap-review_body::after { display: none; }
.lp-pet .gmap-review_toggle:checked ~ .gmap-review_more::after { content: "閉じる"; }

@media (max-width: 767px) {
	.lp-pet .gmap-reviews { grid-template-columns: 1fr; gap: 10px; }
	.lp-pet .gmap-review { padding: 12px 13px 10px; }
	.lp-pet .gmap-review_body { font-size: 13px; }
}

/* ============================================================
   捜索の記録: 写真と動画を交互に並べる一列グリッド
   PC=5列で全10点、SP=2列（左が写真・右が動画）で4点まで＋「続きを見る」
   ============================================================ */
.lp-pet .media-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 0;
}
/* PCは横5列。DOM順はスマホの市松配置に合わせてあるので、
   PCでは order で「写真・動画・写真・動画…」の交互に並べ替える
   （3番目と4番目、7番目と8番目を入れ替えるだけ） */
@media (min-width: 768px) {
	.lp-pet .media-item:nth-child(1) { order: 1; }
	.lp-pet .media-item:nth-child(2) { order: 2; }
	.lp-pet .media-item:nth-child(3) { order: 4; }
	.lp-pet .media-item:nth-child(4) { order: 3; }
	.lp-pet .media-item:nth-child(5) { order: 5; }
	.lp-pet .media-item:nth-child(6) { order: 6; }
	.lp-pet .media-item:nth-child(7) { order: 8; }
	.lp-pet .media-item:nth-child(8) { order: 7; }
	.lp-pet .media-item:nth-child(9) { order: 9; }
	.lp-pet .media-item:nth-child(10) { order: 10; }
}
.lp-pet .media-item {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EFE7DA;
	border-radius: 10px;
	overflow: hidden;
}
.lp-pet .media-item img,
.lp-pet .media-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* PCでは全点表示。折りたたみボタンは出さない */
/* 2026-08-12: スマホでも10点すべて最初から表示する（社長判断）。
   畳んでいた理由は縦の長さだったが、実測で伸びるのは555px＝0.66画面ぶん。
   それより、隠れている動画はブラウザが再生しないため、5本のうち3本が
   誰にも見られない状態になっていたほうが損だった。 */
.lp-pet .media-more { display: none; }

@media (max-width: 767px) {
	.lp-pet .media-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================================
   他社比較表（選ばれる理由の直下・2026-08-11 新設）
   横幅が足りない端末では表だけ横スクロールさせる
   ============================================================ */
.lp-pet .cmp-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 30px;
}
.lp-pet .cmp-table {
	width: 100%;
	min-width: 520px;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	font-size: 14px;
}
.lp-pet .cmp-table th,
.lp-pet .cmp-table td {
	padding: 12px 10px;
	text-align: center;
	border-bottom: 1px solid #EFE2CE;
	vertical-align: middle;
}
.lp-pet .cmp-table thead th {
	background: #8A9A93;
	color: #fff;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	border-bottom: 0;
}
.lp-pet .cmp-table thead .cmp-corner {
	background: transparent;
	border-bottom: 0;
}
.lp-pet .cmp-table thead .cmp-own-head {
	background: #2F7D6B;
	font-size: 16px;
	border-radius: 10px 10px 0 0;
}
.lp-pet .cmp-table tbody th {
	background: #F7EFE2;
	color: #6B6257;
	font-weight: 700;
	text-align: center;
	width: 22%;
}
.lp-pet .cmp-table td.cmp-own {
	background: #FFF8EE;
	color: #B8560F;
	font-weight: 700;
	border-left: 2px solid #2F7D6B;
	border-right: 2px solid #2F7D6B;
}
.lp-pet .cmp-table tbody tr:last-child td.cmp-own {
	border-bottom: 2px solid #2F7D6B;
	border-radius: 0 0 10px 10px;
}
@media (max-width: 767px) {
	/* 横スクロールに気づかない人が多いので、SPでは4列すべてを画面内に収める */
	.lp-pet .cmp-table { font-size: 11px; min-width: 0; }
	.lp-pet .cmp-table th,
	.lp-pet .cmp-table td { padding: 9px 3px; line-height: 1.45; }
	.lp-pet .cmp-table tbody th { width: 19%; font-size: 11px; }
	.lp-pet .cmp-table thead th { font-size: 11.5px; padding: 8px 3px; }
	.lp-pet .cmp-table thead .cmp-own-head { font-size: 12.5px; }
	.lp-pet .cmp-table td.cmp-own { border-left-width: 2px; border-right-width: 2px; }
}

/* ============================================================
   セクションごとに背景をわずかに切り替えて区切りを示す
   （2026-08-11 社長指示。H2の帯は撤回し、面で分ける方式に変更）
   ・色差はごく小さく（#FDF8F1 ↔ #FFFCF7）。境目が線に見えない程度
   ・画面幅いっぱいに敷く。横スクロールが出ないよう .lp-pet で clip する
   ============================================================ */
.lp-pet { overflow-x: clip; }
.lp-pet .lp-sec { padding: 6px 0 10px; }
/* 2026-08-12 社長指示: セクションごとに背景色を変えるのはやめた。
   class は本文とCSVに残したまま、塗りだけ無くす（本文を触らずに戻せる）。
   全部が同じ地色になるので、下の余白の詰め方も全セクション共通にする。 */
.lp-pet .lp-sec--tint {
	background: transparent;
}
.lp-pet .lp-sec > h2:first-child { margin-top: 1.5em; }

/* 本番ではLPを部品（ショートコード）に割って並べるため、同じ色の .lp-sec が
   隣り合うことがある（FV・クチコミ・捜索記録・困りごとは、元は1枚だった）。
   そのままだと継ぎ目で上下の余白が二重になるので、隣り合う同色は継ぎ目を詰める。
   ローカルの1枚版と本番の組み立て版で見た目を一致させるための規則。 */
.lp-pet .lp-sec + .lp-sec { padding-top: 0; }
.lp-pet .lp-sec:has(+ .lp-sec) { padding-bottom: 0; }

/* ============================================================
   比較表: 自社列を太く・目立たせる（2026-08-11 社長指摘）
   自社列の文字が折り返して読みづらかったため列幅を配分し直す
   ============================================================ */
.lp-pet .cmp-table tbody th,
.lp-pet .cmp-table thead td.cmp-corner { width: 17%; }
.lp-pet .cmp-table thead th:nth-child(2),
.lp-pet .cmp-table tbody td:nth-child(2) { width: 33%; }
.lp-pet .cmp-table thead th:nth-child(3),
.lp-pet .cmp-table thead th:nth-child(4),
.lp-pet .cmp-table tbody td:nth-child(3),
.lp-pet .cmp-table tbody td:nth-child(4) { width: 25%; }
.lp-pet .cmp-table td.cmp-own { font-size: 15px; }
.lp-pet .cmp-table thead .cmp-own-head { font-size: 17px; }
@media (max-width: 767px) {
	.lp-pet .cmp-table tbody th { width: 16%; font-size: 10.5px; }
	.lp-pet .cmp-table thead td.cmp-corner { width: 16%; }
	.lp-pet .cmp-table thead th:nth-child(2),
	.lp-pet .cmp-table tbody td:nth-child(2) { width: 34%; }
	.lp-pet .cmp-table thead th:nth-child(3),
	.lp-pet .cmp-table thead th:nth-child(4),
	.lp-pet .cmp-table tbody td:nth-child(3),
	.lp-pet .cmp-table tbody td:nth-child(4) { width: 25%; }
	.lp-pet .cmp-table td.cmp-own { font-size: 12.5px; }
	.lp-pet .cmp-table thead .cmp-own-head { font-size: 13.5px; }
	.lp-pet .cmp-table td:nth-child(3),
	.lp-pet .cmp-table td:nth-child(4) { font-size: 10.5px; }
}


/* お客様の声の吹き出しを薄くしてLPのトンマナに合わせる（2026-08-11 社長指示）
   共通CSS(common-style.css)の .voice-chat__bubble は #FFF4E6＋枠#F5D1B4 で
   クリーム背景の上だとオレンジ寄りに浮くため、.lp-pet 内だけ淡くする。
   共通CSS自体は書き換えない（他ページに影響するため） */
.lp-pet .voice-chat__bubble {
	/* 13.5px（Googleレビューと同じ）→ 本文と同じ16px（2026-08-12 社長指示）*/
	font-size: 16px;
	line-height: 1.75;
	background-color: #FFFDF9;
	/* 旧 #EFE2CE。薄すぎて枠が見えないという指摘で一段濃く（2026-08-11） */
	border-color: #E2CBA4;
}
.lp-pet .voice-chat__bubble::before {
	border-right-color: #E2CBA4;
}


/* 折りたたみ用チェックボックスを完全に消す（2026-08-11）
   opacity:0 だけだと環境によって13pxのチェックボックスが四角い記号として
   描画されることがあるため、appearance ごと潰してサイズを0にする */
.lp-pet .gmap-review_toggle,
.lp-pet .media-toggle {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* 見出しではない情報パネル（2026-08-11 社長指示）
   FV直下のGoogleレビューと捜索記録は、SEO上の最初のH2を
   「こんなことで困っていませんか」にするため h2 をやめた。
   H2に見えないよう、セクションごと枠で囲んだカードにして、
   タイトルは左寄せ＋縦棒（＝パネルの見出し）にしている */
.lp-pet .lp-panel {
	margin: 1.6em 0 2em;
	padding: 16px 16px 18px;
	background: #FFFDF9;
	border: 2px solid #F0C89B;
	border-radius: 16px;
}
.lp-pet .lp-panel_title {
	/* 2026-08-12 社長指示で1.5〜2倍に拡大。ここはインパクトを出す場所。
	   書体は丸ゴシックのまま、太さ(900)と文字間の詰めで押し出す。
	   Zen Maru Gothic は 700/900 を読み込み済み（900は角が立って見える） */
	margin: 4px 0 14px;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	font-size: 34px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: #B8560F;
	text-align: center;
	text-shadow: 0 2px 0 rgba(240, 200, 155, 0.55);
}
/* 中央寄せ＋下に短い線（2026-08-11 社長指示。H2の帯とは別デザインで、
   パネルの見出しであることが分かる軽さにする） */
.lp-pet .lp-panel_title::after {
	content: "";
	display: block;
	width: 68px;
	height: 5px;
	margin: 0.5em auto 0;
	border-radius: 999px;
	background: #F0A868;
}
.lp-pet .lp-panel > .note-small { display: block; margin: 0 0 10px; }
.lp-pet .lp-panel .gmap-reviews { margin-top: 0; margin-bottom: 0; }
.lp-pet .lp-panel .media-block { margin-bottom: 0; }
@media (max-width: 767px) {
	.lp-pet .lp-panel { padding: 13px 12px 15px; }
	.lp-pet .lp-panel_title { font-size: 28px; }   /* 旧17px。1.5〜2倍（2026-08-12） */
}

/* レビュー本文の blockquote に、賢威が keni8-icons フォントの引用符を
   ::before/::after で付けている。フォントが読めない環境では四角い記号
   （豆腐文字）として描画されるため打ち消す（2026-08-11 社長指摘） */
.lp-pet .gmap-review_body::before,
.lp-pet .gmap-review_body::after {
	content: none !important;
	display: none !important;
}

/* H2のSP調整 */
@media (max-width: 767px) {
	/* 20px → 22px（2026-08-12）。20pxだとH3も20pxで段差が無かった。
	   22pxまでは390/430pxのどちらでも折り返しが増えない（23pxで増える） */
	.lp-pet h2 { font-size: 22px; padding: 12px 14px; border-radius: 15px; }
}

/* パネルタイトル: 2行構成に対応（1行目＝見出し、2行目＝補足） */
.lp-pet .lp-panel_title-txt { display: block; }
/* 「ここまでやるから保護できます」。18px（SP16px）→ 20px（2026-08-13 社長指示） */
.lp-pet .lp-panel_title-sub {
	display: block;
	margin-top: 6px;
	font-size: 20px;
	font-weight: 700;
	color: #6B6257;
}
@media (max-width: 767px) {
	.lp-pet .lp-panel_title-sub { font-size: 20px; }
}

/* FVの枠と直下のCTAの間隔（2026-08-11 社長指示。境目が近すぎたため）。
   .fv-cta は .fv-f（点線の枠）の外にある兄弟なので、ここにマージンを置く */
.lp-pet .fv-cta { margin-top: var(--fv-pc-cta-gap); }
.lp-pet .fv { margin-bottom: 26px; }
@media (max-width: 767px) {
	.lp-pet .fv-cta { margin-top: var(--fv-sp-cta-gap); }
}


/* ============================================================
   本番テーマ（賢威 mct/mct-child ＋ common-style.css）の打ち消し
   ------------------------------------------------------------
   2026-08-11 埼玉の下書き（page_id=893）で実測した崩れへの対処。
   テーマ側は .lp-pet h3/h4 より特異度の高いセレクタで、見出しに
   グラデ帯・グレー帯・中央寄せ・padding:0 を、本文にヒラギノW5
   （中太）を敷いてくる。LPの見た目はここで !important で固定する。
   .lp-pet の外には一切影響しない。
   ※ FAQ（.faq-item / summary）だけは common-style.css のデザインを
     そのまま使う設計（SEOパイプラインと同じ形）なので触らない。
   ============================================================ */

/* 本文の書体。既存の猫版LP（/saitama/lp_neko-tantei）と同じものにそろえる。
   ------------------------------------------------------------
   2026-08-11 に「承認済みローカル版はW3相当」という理由で
   Hiragino Kaku Gothic ProN（＝W3・標準）に上書きしていたが、
   2026-08-12 社長から「既存LPのほうが少し太くて読みやすい」と指摘。
   既存LPの実測は "ヒラギノ角ゴ ProN W5"（中太）だったので、そちらへ戻す。
   Mac以外ではどちらの書き方でも Noto Sans JP に落ちるため、
   既存LPと同じ見え方になる。 */
div.lp-pet {
	font-family: "ヒラギノ角ゴ ProN W5", "Noto Sans JP", Meiryo, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
}
div.lp-pet p { margin: 0 0 1em !important; }
div.lp-pet .reason-item > p { margin: 0 !important; }
div.lp-pet .gmap-review_body p { margin: 0 0 0.6em !important; }

/* 見出し。値は上部の定義と同一で、!important を付けて固定しただけ */
div.lp-pet h2 {
	margin: 2.6em 0 1.2em !important;
	padding: 14px 22px !important;
	background: linear-gradient(135deg, #EF8212, #F6B26B) !important;
	border: none !important;
	border-radius: 18px !important;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 3px 0 #D9700B !important;
	text-align: center !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif !important;
	font-size: 24px !important;
	font-weight: 900 !important;
	line-height: 1.45 !important;
	color: #ffffff !important;
}
div.lp-pet h2::before, div.lp-pet h2::after { content: none !important; }

div.lp-pet h3 {
	margin: 1.8em 0 0.8em !important;
	padding: 0.3em 0.1em !important;
	background: none !important;
	border: none !important;
	border-bottom: 3px solid #F0C89B !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #35302A !important;
}
div.lp-pet .proc-panel > h3:first-child { margin-top: 0.2em !important; }
div.lp-pet h3::before, div.lp-pet h3::after { content: none !important; }

div.lp-pet h4 {
	margin: 1.4em 0 0.6em !important;
	padding: 0.15em 0.6em !important;
	background: none !important;
	border: none !important;
	border-left: 4px solid #F08A3C !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #35302A !important;
}
div.lp-pet h4::before, div.lp-pet h4::after { content: none !important; }

div.lp-pet h5 {
	margin: 1.4em 0 0.5em !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	text-align: left !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #EF8519 !important;   /* 旧 #B8560F。2026-08-11 オレンジ統一 */
}
/* 選ばれる理由の見出しは帯付き。上の一般則より後に置いて勝たせる */
div.lp-pet .reason-item > h5 {
	margin: 0 !important;
	padding: 0.6em 0.9em !important;
	background: #F7EFE2 !important;
	border: none !important;
	border-bottom: 2px solid #EAD9BF !important;
	color: #B8560F !important;
	font-size: 16px !important;
}

@media (max-width: 767px) {
	div.lp-pet h2 { font-size: 22px !important; padding: 12px 14px !important; border-radius: 15px !important; }
}

/* お客様の声の本文サイズ。common-style.css 側の指定に負けないよう固定する
   （Googleレビューと同じ 13.5px。2026-08-12 社長指示） */
div.lp-pet .voice-chat__bubble {
	font-size: 16px !important;
	line-height: 1.75 !important;
}
/* 小さくするのは本文だけ。冒頭の赤い見出しは元の大きさのまま
   （2026-08-12 社長指示。ここが小さいと声の要点が拾えなくなる） */
div.lp-pet .voice-chat__bubble > .em-red,
div.lp-pet .voice-chat__bubble > .em-red strong {
	/* 本文が16pxになったので、見出しはそれより大きい17pxにする
	   （同じだと声の要点が拾えなくなる。2026-08-12） */
	font-size: 17px !important;
	line-height: 1.5 !important;
}

/* 電話アイコン（Font Awesome の <i> をやめて内蔵SVGにした。
   テーマ同梱のFAには fa-phone-alt が無く「見つからない」マークが出るため） */
div.lp-pet .cta-ic {
	width: 0.8em;
	height: 0.8em;
	fill: currentColor;
	vertical-align: -0.06em;
}

/* ============================================================
   対応エリアの市区町村リスト（2026-08-12 社長指示）
   ------------------------------------------------------------
   CSV側は「《 あ 行 》上尾市、朝霞市…<br>」の1本の span。そのままだと
   長い行が2〜3行に折り返り、どこが何行なのか分からなくなっていた。
   PHP側（otp_snip_format_area_list）で行ごとのブロックに組み直し、
   ここで「ラベルは左に固定・市区町村は1行・横スクロール」に整える。
   将来ここに各地域LPへのリンクが入っても、そのまま横に並ぶ。
   ============================================================ */
.lp-pet .area-list {
	margin: 1em 0 0.6em;
	background: #fff;
	border: 1px solid #EAD9BF;
	border-radius: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.lp-pet .area-row {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
	padding: 0.5em 0.9em;
	border-bottom: 1px dashed #F0E4D0;
	font-size: 13px;
	line-height: 1.7;
	width: max-content;
	min-width: 100%;
}
.lp-pet .area-row:last-child { border-bottom: 0; }

/* 行ラベル（あ行・か行…）。横スクロールしても左に残す */
.lp-pet .area-row_label {
	position: sticky;
	left: 0;
	z-index: 1;
	flex: 0 0 auto;
	min-width: 2.6em;
	padding: 0.1em 0.5em;
	background: #F7EFE2;
	border-radius: 6px;
	box-shadow: 6px 0 6px -6px rgba(53,48,42,0.18);
	color: #B8560F;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	text-align: center;
	white-space: nowrap;
}
.lp-pet .area-row_cities { white-space: nowrap; }

/* 《X行》の無い書き方（北海道・政令市など）は普通に折り返す */
.lp-pet .area-row--wrap { width: auto; }
.lp-pet .area-row--wrap .area-row_cities { white-space: normal; }

/* 将来ここに各地域LPへのリンクが入ったときの見え方 */
.lp-pet .area-row_cities a {
	color: #1565c0;
	text-decoration: none;
	border-bottom: 1px solid rgba(21,101,192,0.35);
}
.lp-pet .area-row_cities a:hover { border-bottom-color: #1565c0; }

.lp-pet .area-hint {
	margin: 0 0 1em !important;
	color: #8A8177;
	font-size: 11px;
	text-align: right;
}
@media (min-width: 768px) {
	/* PCでは大半が収まるので、案内文は出さない */
	.lp-pet .area-hint { display: none; }
}

/* 対応エリアの県地図が大きすぎるとリストが埋もれるので上限をつける */
/* 県の地図。max-width を px で書くと、共通の「画面幅まで」の指定
   （.lp-pet img の max-width:100%）を打ち消してしまい、スマホで
   右側が切れる。まず100%で抑えてから、PCでだけ上限をかける。 */
.lp-pet .lp-area img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	height: auto;
}
@media (min-width: 768px) {
	.lp-pet .lp-area img { max-width: 520px; }
}


/* パネル見出しを、テーマの指定に負けないよう固定する（2026-08-12） */
div.lp-pet .lp-panel_title {
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif !important;
	font-size: 34px !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;
	color: #B8560F !important;
	text-align: center !important;
}
div.lp-pet .lp-panel_title-sub {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #6B6257 !important;
}
@media (max-width: 767px) {
	div.lp-pet .lp-panel_title { font-size: 28px !important; }
	div.lp-pet .lp-panel_title-sub { font-size: 20px !important; }
}


/* ============================================================
   ファーストビューの上の余白を詰める（2026-08-12 社長指摘）
   ------------------------------------------------------------
   実測すると、隙間はLPの中ではなくテーマ側にあった。
     .keni-section_wrap の padding-top 30px
     .article-header（中身はSNSシェアのみ。LPでは不要）30px
   body.otp-lp は [lp_style] を含むページにだけ付くので、
   他のページの見た目は変わらない。
   ============================================================ */
body.otp-lp .keni-section_wrap { padding-top: 0 !important; }
body.otp-lp .article-header { display: none !important; }


/* 「No.1」の見せ方（2026-08-12 社長指示）
   ・表記は No.1（NO.1 ではない）
   ・「No.」は本文と同じ大きさ、数字の「1」だけ1.5倍
   ・No.1 全体をイタリックにして、周りの文字と質感を変える
   ※ Zen Maru Gothic にイタリックの字形は無いため、ブラウザが斜体を
     合成する（それで狙いどおりの見え方になる） */
.lp-pet .lp-panel_no1 {
	font-style: italic;
	font-weight: 900;
	color: #E8600F;
}
.lp-pet .lp-panel_no1-n {
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: 0.01em;
}
div.lp-pet .lp-panel_no1 {
	font-style: italic !important;
	font-weight: 900 !important;
	color: #E8600F !important;
}
div.lp-pet .lp-panel_no1-n { font-size: 1.5em !important; }


/* 選ばれる理由の本文サイズを、テーマの指定に負けないよう固定。
   14px → 本文と同じ16px（2026-08-12 社長指示） */
div.lp-pet .reason-item > p {
	font-size: 16px !important;
	line-height: 1.8 !important;
}


/* ============================================================
   スマホだけで改行する <br class="sp-only">（2026-08-12）
   ------------------------------------------------------------
   FVのフックは <span>猫は大声で呼ぶほど<br class="sp-only">出てきません</span>
   という書き方で、PCでは1行に戻る想定だった。ところが .sp-only を
   定義しているCSSがサイト内のどこにも無く（本番で全スタイルシートを
   走査して0件）、PCでも改行していた。ここで定義する。
   ------------------------------------------------------------
   .fv-a_copy（フックの吹き出し）だけに絞ってある。同じ br.sp-only は
   「◯◯県密着の\n猫探偵」と比較表の「おたすけ\nプラス」にもあるが、
   そちらは指示外なので今までどおりPCでも改行したままにする。
   ============================================================ */
.lp-pet .fv-a_copy br.sp-only { display: none; }
@media (max-width: 767px) {
	.lp-pet .fv-a_copy br.sp-only { display: inline; }
}

/* ペット版だけ、スマホの吹き出しを広げる（2026-08-12）
   ------------------------------------------------------------
   本文は猫版と同じだが「ペット」は「猫」より2文字長い。同じ幅だと
   「ペットが弱る前に保護します」が折り返して5行になる（社長指示は4行以内）。
   幅だけを --fv-sp-bubble-w-pet で持たせる。印は PHP の body_class が付ける。 */
@media (max-width: 767px) {
	body.otp-lp-pet .lp-pet .fv-a_copy { width: min(100%, var(--fv-sp-bubble-w-pet)); }
}
@media (min-width: 768px) {
	/* PCも同じ理由。猫版は2行、ペット版は同じ幅だと3行になる */
	body.otp-lp-pet .lp-pet .fv-a_copy { width: min(100%, var(--fv-pc-bubble-w-pet)); }
}

/* ============================================================
   ファーストビューをスマホ1画面に収める（2026-08-12 社長指示）
   ------------------------------------------------------------
   「スクロールせずにCTAまで見せたい」「文字が読みにくい」
   「人物の顔をもっと見せたい」の3点への対応。
   実測で FV全体 1007px（画面844px）だったので、約270px削る。
   ============================================================ */
@media (max-width: 767px) {
	/* 行間と余白を詰める。文字の大きさは読める範囲で少しだけ下げる */
	.lp-pet .fv-b_brand { font-size: var(--fv-sp-brand); margin-bottom: var(--fv-sp-gap-brand) !important;
	line-height: var(--fv-sp-brand-lh);
}
	/* <p> なので div.lp-pet p の !important に負ける。ここも !important で指定する */
	.lp-pet .fv-a_lead  { margin-bottom: var(--fv-sp-gap-lead) !important;
	font-size: var(--fv-sp-lead-s);
	letter-spacing: var(--fv-sp-lead-ls);
}
	.lp-pet .fv-stats   { margin-bottom: var(--fv-sp-gap-chips);
	gap: var(--fv-sp-chip-gap);
}
	.lp-pet .fv-f_points { width: var(--fv-sp-card-w); margin-bottom: var(--fv-sp-gap-card); padding: var(--fv-sp-card-pad-y) var(--fv-sp-card-pad-x); }
	.lp-pet .fv-f_points li { font-size: var(--fv-sp-li-s); line-height: var(--fv-sp-li-lh); margin-bottom: var(--fv-sp-li-gap); padding-left: 1.35em; }
	.lp-pet .fv-a_copy { font-size: var(--fv-sp-bubble-s); line-height: 1.36; margin-bottom: 0; }

	/* 背景写真。文字の下に作った帯へ、人物の顔と上半身が入るように
	   拡大率と位置を合わせる（2026-08-12） */
	.lp-pet .fv-f {
		background-size: var(--fv-sp-zoom) auto;
		background-position: var(--fv-sp-x) var(--fv-sp-y);
	}
}

/* フックのコピーを、人物から出る吹き出しにする（2026-08-12 社長指示）。
   ・下の写真をぼかして伏せるので、写真を活かしたまま文字が読める
   ・幅と左端をチェック項目のカードにそろえる（以前は中身に合わせた幅で、
     カードより左へはみ出していた）
   ・右端にしっぽを付けて、右にいる人物のほうを向かせる
   ・右側は人物のぶんだけ空ける（顔を隠さないため） */
.lp-pet .fv-a_copy {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: min(100%, 540px);
	/* テーマ打ち消し用の div.lp-pet p { margin: … !important } に
	   負けるので、ここも !important で指定する（2026-08-12） */
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 12px 16px;
	border-radius: var(--fv-bubble-radius);
	background: rgba(255, 255, 255, var(--fv-film));
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	box-shadow: 0 2px 10px rgba(53, 48, 42, 0.10);
}
/* しっぽ（人物のほうを向く三角） */
.lp-pet .fv-a_copy::after {
	content: "";
	position: absolute;
	top: var(--fv-tail-y);
	right: var(--fv-tail-x);
	width: 0;
	height: 0;
	border-top: var(--fv-tail-size) solid transparent;
	border-bottom: var(--fv-tail-size) solid transparent;
	border-left: var(--fv-tail-len) solid rgba(255, 255, 255, var(--fv-film));
	filter: drop-shadow(2px 0 3px rgba(53, 48, 42, 0.08));
}
@media (max-width: 767px) {
	/* スマホは右に人物がいるので、その幅だけ空けて左に寄せる。
	   左端はチェック項目のカードとそろう */
	/* 2026-08-12: 文字はすべて中央そろえに戻す（社長指示）。
	   人物が裏に隠れないよう、文字を左右にずらすのではなく
	   「文字の下に写真だけの帯」を作り、そこへ人物が来るよう
	   写真の拡大率と位置を合わせた。 */
	.lp-pet .fv-a_copy {
		width: min(100%, var(--fv-sp-bubble-w));
		margin-left: auto !important;
		margin-right: auto !important;
		padding: var(--fv-sp-bubble-pad-y) var(--fv-sp-bubble-pad-x);
		background: rgba(255, 255, 255, var(--fv-film));
		-webkit-backdrop-filter: blur(9px);
		backdrop-filter: blur(9px);
	line-height: var(--fv-sp-bubble-lh);
}
}
/* 袋文字（2026-08-12 社長指示）
   ------------------------------------------------------------
   旧: ぼかしただけの白い光。背景写真と色が近いと沈んで読めなかった。
   新: 白いふちを8方向に置いて文字を切り抜く。ふちの太さは
   --fv-outline-lead / --fv-outline-brand で調整できる。
   「まだ近くにいる今が勝負です」の色も #F08A3C から一段濃くした
   （背景のクリーム色と明度が近く、ふちだけでは足りなかったため）。 */
.lp-pet .fv-a_lead  { --fv-o: var(--fv-outline-lead); }
.lp-pet .fv-b_brand { --fv-o: var(--fv-outline-brand); }
.lp-pet .fv-b_brand,
.lp-pet .fv-a_lead {
	text-shadow:
		calc(var(--fv-o) * -1) calc(var(--fv-o) * -1) 0 #FFFDF9,
		0 calc(var(--fv-o) * -1) 0 #FFFDF9,
		var(--fv-o) calc(var(--fv-o) * -1) 0 #FFFDF9,
		calc(var(--fv-o) * -1) 0 0 #FFFDF9,
		var(--fv-o) 0 0 #FFFDF9,
		calc(var(--fv-o) * -1) var(--fv-o) 0 #FFFDF9,
		0 var(--fv-o) 0 #FFFDF9,
		var(--fv-o) var(--fv-o) 0 #FFFDF9,
		0 3px 12px rgba(53, 48, 42, 0.28);
}
div.lp-pet .fv-a_lead { color: #C25508 !important; }



/* ============================================================
   ファーストビューを左寄せにする（2026-08-13 社長指示）
   ------------------------------------------------------------
   背景写真を「右側に女性がペットを抱いている」ものに差し替えたので、
   文字は全部左に寄せ、文字が乗る幅を --fv-sp-textw / --fv-pc-textw で
   絞る。絞らないと文字が女性に重なる。
   写真のどこを見せるかは --fv-sp-x/y/zoom（PCは --fv-pc-*）で決める。
   ============================================================ */
div.lp-pet .fv-f,
div.lp-pet .fv-a,
div.lp-pet .fv-b { text-align: left !important; }

/* 文字の乗る列。右側の女性にかからない幅にする */
div.lp-pet .fv-a,
div.lp-pet .fv-b { width: var(--fv-sp-textw); }
@media (min-width: 768px) {
	div.lp-pet .fv-a,
	div.lp-pet .fv-b { width: var(--fv-pc-textw); }
}

/* 中の部品も左端にそろえる（それぞれ中央寄せの指定を持っている） */
div.lp-pet .fv-stats { justify-content: flex-start !important; }
div.lp-pet .fv-f_points,
div.lp-pet .fv-a_copy {
	margin-left: 0 !important;
	margin-right: auto !important;
}
div.lp-pet .fv-a_copy { text-align: left !important; }
/* しっぽは右向きだった。左寄せになったので出さない */
div.lp-pet .fv-a_copy::after { display: none; }

/* 「4,980円/h〜」。見出しの「◯◯探偵」の右横に置く（2026-08-13 社長指示）。
   大きさは --fv-sp-price-s / --fv-pc-price-s で見出しとは別に変えられる */
.lp-pet .fv-b_price {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 10px !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 900;
	font-size: var(--fv-sp-price-s);
	line-height: 1.2;
	color: #E8600F;
	--fv-o: var(--fv-outline-brand);
	text-shadow:
		calc(var(--fv-o) * -1) calc(var(--fv-o) * -1) 0 #FFFDF9,
		0 calc(var(--fv-o) * -1) 0 #FFFDF9,
		var(--fv-o) calc(var(--fv-o) * -1) 0 #FFFDF9,
		calc(var(--fv-o) * -1) 0 0 #FFFDF9,
		var(--fv-o) 0 0 #FFFDF9,
		calc(var(--fv-o) * -1) var(--fv-o) 0 #FFFDF9,
		0 var(--fv-o) 0 #FFFDF9,
		var(--fv-o) var(--fv-o) 0 #FFFDF9,
		0 3px 12px rgba(53, 48, 42, 0.28);
}
@media (min-width: 768px) {
	.lp-pet .fv-b_price { font-size: var(--fv-pc-price-s); }
}

/* 文字を伏せる膜も、左に寄せた文字の側だけ濃くする */
div.lp-pet .fv-f_inner {
	background:
		linear-gradient(90deg,
			rgba(253,248,241,0.72) 0%,
			rgba(253,248,241,0.66) 46%,
			rgba(253,248,241,0.30) 72%,
			rgba(253,248,241,0.04) 90%,
			rgba(253,248,241,0.00) 100%),
		linear-gradient(180deg, rgba(253,248,241,0.00) 0, rgba(253,248,241,0.28) 46px, rgba(253,248,241,0.28) 100%);
}

/* ============================================================
   サイトのヘッダーの調整（2026-08-12 社長指摘）
   ------------------------------------------------------------
   実測で分かったこと（スマホ幅390px）:
     ・.site-title の padding が「3.9px 10px 8px 0px」で、
       左だけ 0。だからロゴが画面の左端にくっついていた
     ・ロゴと電話番号がそれぞれ別の高さで上下に置かれていて、
       中心がそろっていない（PC実測でロゴの中心39.5px／電話27px）
   直し方: ヘッダーの中身を横並びの中央そろえにして、
   ロゴに左の余白を足す。位置を数値で指定せず「中央そろえ」に
   任せているので、電話番号の有無や幅が変わってもずれない。

   ※ この指定は body.otp-lp（＝新LPのページ）にしか効かない。
     lp-pet.css 自体が [lp_style] のあるページでしか読まれないため。
     サイト全体で直したい場合は common-style.css 側の作業になる。
   ============================================================ */
body.otp-lp .keni-header_inner {
	display: flex;
	align-items: center;          /* ロゴと電話番号の中心をそろえる */
	justify-content: space-between;
	gap: 10px;
}
body.otp-lp .site-title {
	margin: 0;
	padding-left: 18px;           /* 左端にくっついていたので離す */
	padding-right: 10px;
}
body.otp-lp .keni-header_cont {
	margin-top: 0;
	margin-bottom: 0;             /* 上下のマージンを消して中央そろえを効かせる */
}
body.otp-lp .tp-header-tel {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.2;
}
@media (max-width: 767px) {
	body.otp-lp .site-title { padding-left: 12px; }
}


/* ============================================================
   PCのファーストビューを横長にする（2026-08-12 社長指示）
   実測 1100×990（縦横比1.11）で縦に間延びし、見出しが画面の
   真ん中まで下がっていた。上下の余白を詰めて横長に寄せる。
   背景写真は正方形のままでよい（枠に合わせて上下が切れるだけ）。
   ============================================================ */
@media (min-width: 768px) {
	.lp-pet .fv-f_inner {
		margin-top: var(--fv-pc-top);
		padding: 14px 16px 20px;
	}
	.lp-pet .fv-b_brand { font-size: var(--fv-pc-brand); margin-bottom: var(--fv-pc-gap-brand) !important;
	line-height: var(--fv-pc-brand-lh);
}
	.lp-pet .fv-a_lead { margin-bottom: var(--fv-pc-gap-lead) !important; font-size: var(--fv-pc-lead-s);
	letter-spacing: var(--fv-pc-lead-ls);
}
	.lp-pet .fv-stats { margin-bottom: var(--fv-pc-gap-chips);
	gap: var(--fv-pc-chip-gap);
}
	.lp-pet .fv-f_points { width: min(100%, var(--fv-pc-card-w)); margin-bottom: var(--fv-pc-gap-card); padding: var(--fv-pc-card-pad-y) var(--fv-pc-card-pad-x); }
	.lp-pet .fv-f_points li { font-size: var(--fv-pc-li-s); line-height: var(--fv-pc-li-lh); margin-bottom: var(--fv-pc-li-gap); }
	.lp-pet .fv-a_copy { font-size: var(--fv-pc-bubble-s); padding: var(--fv-pc-bubble-pad-y) var(--fv-pc-bubble-pad-x);
	line-height: var(--fv-pc-bubble-lh);
	width: min(100%, var(--fv-pc-bubble-w));
}
	/* PCは横に余裕があるので、中央そろえのままでも人物が右に出る。
	   文字の帯は中央540px、人物はその右外（2026-08-12 社長指示で中央へ戻す） */
	/* cover のままだと横幅ぴったりになり、横位置のつまみが効かない。
	   100% auto は cover と同じ見え方で、100%より大きくすると
	   横に動かせる余地が生まれる（2026-08-12 社長要望） */
	.lp-pet .fv-f { background-size: var(--fv-pc-zoom) auto; background-position: var(--fv-pc-x) var(--fv-pc-y); }
	.lp-pet .fv-stats_chip { font-size: var(--fv-pc-chip-s); padding: var(--fv-pc-chip-pad-y) var(--fv-pc-chip-pad-x); }
}

/* ============================================================
   ヘッダーの続き（2026-08-12 社長指摘の2点目・3点目）
   ------------------------------------------------------------
   ・ロゴが小さい（スマホ実測 114×14px）ので大きくする
   ・電話番号の高さが合わない。テーマは767px未満で電話を隠す設定だが、
     実機ではGTMが出しているため、こちらの検証環境では再現できない。
     そこで「位置を絶対指定で上下中央に固定」する形にした。
     ヘッダーの中のどこに置かれていても中央にそろう。
   ============================================================ */
body.otp-lp .keni-header_wrap { position: relative; }
body.otp-lp .site-title {
	display: flex;
	align-items: center;
}
body.otp-lp .site-title > a { display: flex; align-items: center; }
body.otp-lp .site-title img {
	/* height を固定すると横幅の上限とぶつかって縦横比が崩れる（2026-08-12 社長指摘）。
	   max-height だけを与えて、幅も高さもブラウザに自動で決めさせる */
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}
@media (max-width: 767px) {
	body.otp-lp .site-title img { max-height: 30px; }   /* 旧14px。比率は保たれる */

	/* スマホのヘッダーの電話番号（2026-08-12 社長のiPhoneで判明）
	   ------------------------------------------------------------
	   賢威の smart.css が 640px以下で .keni-header_cont（PC用の置き場所）を
	   display:none にしている。スマホ用の置き場所 .sp_catch_wrapper は
	   素の中身が「県内お困りごと即対応！」で、GTMが電話リンクに差し替える
	   作りになっていた。GTMが動かない端末ではその差し替えが起きず、
	   電話番号ではなく「県内お困りごと即対応！」が出たままになる。
	   そこでLPページだけは自前の .otp-lp-hdrtel（PHPの⑪が出力）を使い、
	   GTM側の置き場所は両方とも隠す。 */
	body.otp-lp .sp_catch_wrapper { display: none !important; }
	body.otp-lp .tp-header-tel    { display: none !important; }
	body.otp-lp .otp-lp-hdrtel {
		display: flex;
		align-items: center;
		gap: 3px;
		position: absolute;
		top: 0;
		right: 52px;               /* ハンバーガーメニューを避ける */
		height: 46px;              /* 下の keni-header_inner と同じ値にする */
		margin: 0;
		z-index: 3;
		white-space: nowrap;
		font-size: 15px;
		font-weight: 700;
		color: #EF8212;
		text-decoration: none;
		line-height: 1;
	}
	body.otp-lp .otp-lp-hdrtel_ic { font-size: 13px; }
	/* ロゴの行と電話の高さをそろえる。上の height と同じ値にすること */
	body.otp-lp .keni-header_inner { min-height: 46px; align-items: center; }
}
/* PCでは自前の電話は出さない（GTMが .keni-header_cont に出すものを使う）
   注意: この「隠す」は必ず min-width で囲む。裸で書くと、上のスマホ用
   media 内の display:flex と同じ強さで後勝ちになり、スマホでも消える
   （2026-08-13 に実際に起きた。本番検証で発見） */
@media (min-width: 768px) {
	body.otp-lp .otp-lp-hdrtel { display: none; }
}
/* 絶対配置の基準。ヘッダーはページの最上部にあるので body 基準で足りる */
body.otp-lp { position: relative; }
@media (min-width: 768px) {
	body.otp-lp .site-title img { max-height: 62px; }   /* 旧55px */
}