/* ============================================================
   page.css — A案「鍵と光」だけに必要な差分
   前提: ../_base/tokens.css → ../_base/base.css → 本ファイルの順に読む

   🚨 このファイルのルール（_base を継承）
   - 無彩色を1つも書かない（すべて tokens.css の変数を経由する）
   - カードに box-shadow を書かない
   - 外部参照（@import / url()）を書かない
   - 8pxグリッド（4/8/12/16/24/32/40/48/64/80）から外れた値を書かない
   - _base にある指定を上書きし直さない。足りない分だけをここに書く

   2026-09-15 実施者ご指定の改訂（17項目）を反映。
   削除したブロック：ヒーローのCTA群 / よくある3例(.case) / 1回の訪問の流れ(.care)
   / 初回打ち合わせ(.meeting, .voice) / エリア(.area, .regist)
   ============================================================ */

/* ── 0. 写真の上に置く文字の色（テーマで反転させない） ──
   🚨 ヒーローは実写を全面に敷き、その上に文字を重ねる。
      --ink / --anchor はダークテーマで明色へ反転するため、
      「明るい浜辺の写真の上に明るい文字」になって読めなくなる。
      写真は反転しないので、ここだけ固定値のトークンを持つ。
      （--on-scrim が「暗い帯の上は常に明色」を担うのと同じ考え方の裏返し） */
:root {
  --hero-ink:  #2E4257;                      /* --anchor のライト値と同値・反転しない */
  --hero-ink-2:#1F3040;                      /* --anchor-deep のライト値と同値 */
  /* 🚨 2026-09-17 実施者ご指定で「右側にうすく白をかけない」＝ --hero-veil は廃止。
     代わりに、文字そのものの縁だけを白く起こす（写真には面をかけない）。
     浜辺の写真のいちばん暗い画素の上でも文字が読めるのは、この縁のおかげ。
     ぼかし（backdrop-filter）は実施者ご要望どおり使っていない。 */
  --hero-halo: rgba(251, 250, 248, .92);
  /* 🚨 2026-09-22 実施者ご指摘（3度目）「右側がぼやけて見える」。
     原因は色の精度ではなく手法そのもの＝写真の続きをグラデーションで
     作っている限り、それは定義上「ぼけた面」になる。作り物をやめ、
     紙の面をまっすぐ置く。--paper と同値だがテーマで反転させない。 */
  --hero-panel: #FBFAF8;
}

/* ── 0a. ボタンの色（2026-09-17 実施者ご指定：ピンク＝料金／グリーン＝相談）──
   🚨 テーマで反転させない固定値。白文字とのコントラストを満たす濃さだけを使う。
      --btn-pink  #B5507A 対 --btn-on = 4.71:1
      --btn-green #4E7A5C 対 --btn-on = 4.86:1
      （これより淡くすると 4.5:1 を割る。淡くしたいときは文字を濃色へ変えること） */
:root {
  --btn-pink:       #B5507A;
  --btn-pink-deep:  #A8486F;
  --btn-green:      #4E7A5C;
  --btn-green-deep: #477354;
  --btn-on:         #FBFAF8;   /* --paper のライト値と同値。純白(#FFF)は無彩色なので使わない */

  /* ── 2026-09-21 実施者ご指定の配色 ───────────────────────
     🚨 ここに並ぶ値は【テーマで反転しない】。淡い面・鮮やかな面の上の文字は
        必ずセットの ...-ink を使う（--ink を使うとダークで面だけ明るいまま
        文字が白に反転して読めなくなる）。
     🚨 塗りボタンの白文字は 4.5:1 が要る（16px/18px 太字は WCAG の「大きな文字」
        ではない）。ご指示のコーラル #F9684D は 2.83:1 なので、
        いちばん明るい端でも 4.5 を超える濃さに寄せた（実測値は下記）。
       --btn-coral      #CC4426 対 --btn-on = 4.55:1  ← グラデの明るい側
       --btn-coral-deep #B93A1D 対 --btn-on = 5.46:1
       --btn-green      #4E7A5C 対 --btn-on = 4.72:1（従来のまま＝ご指示どおり）
       --btn-green-deep #446D4E 対 --btn-on = 5.40:1 */
  --btn-coral:      #CC4426;
  --btn-coral-deep: #B93A1D;

  /* キャンペーン帯：白 → 薄いピンク（ご提供イメージ図どおり） */
  --camp-from: #FEFCFB;   /* 🚨 純白(#FFF)は無彩色なので使わない（§0a の決めごと） */
  --camp-to:   #FBE9EC;
  --camp-line: #F2C9D0;
  --camp-ink:  #2F3A42;   /* 対 --camp-panel 10.34:1 */
  /* 2026-09-23（第6便）実施者ご提供のイメージ図から実測した3色。
     🚨 イメージ図そのままの色は白文字で 3.01:1（帯）・淡ピンク地で 2.70:1（無料）
        しか出ず、当社の下限 4.5 に届かない。同じ色相のまま明るさだけ落として使う。
        「無料！」は 32〜40px の太字＝WCAG の「大きな文字」なので 3.0 が下限
        （大きな文字の規定を browser.test.js の B1 に入れた。ゆるめたのではなく
        規定どおりに測り直した）。 */
  --camp-panel:   #FDEEEF;  /* 欄全体の淡いピンク（イメージ図 実測 #FDEEEF） */
  --camp-band:    #CB3D54;  /* 見出しの濃いピンク帯。対 --camp-on-band 4.58:1 */
  --camp-on-band: #FDF7F8;  /* 帯の上の文字。🚨 #fff は使わない */
  --camp-zero:    #E8586F;  /* 「無料！」の明るいピンク。対 --camp-panel 3.08:1 */
  --camp-pink: #A8446C;   /* 2026-09-23 このページでは未使用・他案が参照。*/ /* 対 --camp-to 4.85:1・対 白 5.66:1（見出しと「無料！」）
                             🚨 #B5507A（ボタンのピンク）は薄ピンクの面の上では 4.09:1 で不足。
                                面が変われば文字色も測り直す */

  /* 料金シミュレーション：明るいレモンクリーム（ご提供イメージ図どおり） */
  --calc-bg:        #FDF6D9;
  --calc-line:      #E5B84E;   /* 外枠。装飾 */
  --calc-field:     #FEFCF6;   /* 入力欄の中。🚨 純白(#FFF)は使わない */
  --calc-field-line:#AD8A28;   /* 入力欄の縁。対 白 3.26:1／対 レモン 3.00:1 */
  --calc-rule:      #3E8E5A;   /* 中央の区切り線。対 レモン 3.71:1 */
  --calc-ink:       #2F3A42;   /* 対 レモン 10.73:1 */
  --calc-ink-soft:  #55636D;   /* 対 レモン 6.30:1 */
  --calc-anchor:    #2E4257;   /* 見出し・金額。対 レモン 9.53:1 */
}

/* ── 0b. 濃い面・スクリムの上に置くものの色を戻す ────────
   base.css の .icon は color:var(--anchor) 固定なので、
   濃い面の上ではアイコンが背景と同化する（実測 1.13:1）。ここで反転させる。 */

/* 🚨 スクリム帯の上の文字には --on-scrim を使う（--on-anchor ではない）。
   --on-anchor はダークで暗色に反転するため、暗いままの帯の上に暗い文字が乗って
   1.22:1 になる。この穴は A案の実測で見つかり、2026-08-21 に _base/tokens.css へ
   --on-scrim として取り込まれた。ここでは定義せず、基盤のトークンを使う。 */

.section--anchor .icon,
.cta-fixed__item--primary .icon { color: var(--on-anchor); }

/* 濃い面の中に置いた「白いカード」は、文字色を本文色へ戻す */
.section--anchor .card { color: var(--ink); }
.section--anchor .card h3 { color: var(--anchor); }
.section--anchor .card a.link-sub { color: var(--anchor); }
.section--anchor .card .muted { color: var(--ink-soft); }

.label-en--on { color: var(--on-anchor); }

/* 🚨 --focus(#1F3040) は濃紺面の上で 1.31:1 しかなく、キーボード利用者が
   フォーカス位置を見失う（WCAG 2.4.7 / 1.4.11・2026-08-28 実測）。
   --on-anchor は面と一緒に反転するので、この面の上では常に効く */
.section--anchor :focus-visible { outline-color: var(--on-anchor); }

/* ── 1. スキップリンク・ヘッダー ─────────────────
   2026-09-15 実施者ご指定のイメージ図どおりに再構成。
   ロゴ／訪問型ペットシッター／電話＋受付時間／2つのボタン／ハンバーガー */

.skip-link {
  position: absolute; left: var(--s8); top: -64px; z-index: 60;
  padding: var(--s12) var(--s16);
  background: var(--anchor); color: var(--on-anchor);
  border-radius: var(--r-card); text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s8); }

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  display: flex; align-items: center;
  gap: var(--s12) var(--s16);
  min-height: var(--header-h);
}

/* ロゴ（社長指示・2026-08-21／2026-09-15 実施者ご指定で拡大）
   ART-DIRECTION v3 §5：置き場所はヘッダー左上とフッターの2箇所だけ。
   ヒーローの主役にはしない／周囲に大きく余白／濃紺の面には置かない */
.site-head__logo {
  max-width: none;
  margin: 0;
  padding-block: var(--s8);
  flex: none;
}
.site-head__logo img { height: 56px; width: auto; display: block; }

.site-foot__logo { max-width: none; padding-bottom: var(--s8); }
.site-foot__logo img { height: 40px; width: auto; }

.site-head__tag {
  max-width: none; margin: 0;
  font-weight: var(--fw-bold);
  color: var(--ink);
  flex: none;
}

.site-head__tel {
  max-width: none; margin: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: var(--s8);
  margin-left: auto;             /* 電話から右を「操作の列」にまとめる */
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--anchor);
}
.site-head__tel a { color: var(--anchor); text-decoration: none; }
.site-head__tel a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-head__hours {
  flex-basis: 100%;
  font-weight: var(--fw-normal);
  color: var(--ink-soft);
  padding-left: var(--s24);      /* アイコン幅ぶん下げて電話番号と頭を揃える */
}

.site-head__actions { display: flex; align-items: center; gap: var(--s8); flex: none; }
.site-head__cta { flex: none; }

/* ハンバーガー（PC・スマホとも右上） */
.navbtn {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-width: 48px; min-height: 48px;
  padding: var(--s4) var(--s8);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--anchor);
  cursor: pointer;
  font: inherit;
}
.navbtn:hover { border-color: var(--line); }
.navbtn__label { color: var(--anchor); letter-spacing: .08em; }
.navbtn__close { display: none; }
.navbtn[aria-expanded="true"] .navbtn__open { display: none; }
.navbtn[aria-expanded="true"] .navbtn__close { display: block; }

/* 引き出しメニュー。JS無効のときは hidden が付かず、ヘッダー下にそのまま並ぶ */
.sitenav {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: var(--s16);
  max-height: 76svh;
  overflow-y: auto;
}
.sitenav[hidden] { display: none; }
.sitenav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: var(--grid-col-gap);
}
.sitenav__list li { max-width: none; }
.sitenav__list a {
  display: block;
  padding: var(--s12) var(--s8);
  border-bottom: 1px solid var(--line);
  color: var(--anchor);
  text-decoration: none;
  font-weight: var(--fw-bold);
}
.sitenav__list a:hover { background: var(--accent-soft); }
.sitenav__tel {
  max-width: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s8);
  margin-top: var(--s16);
  padding: 0 var(--s8);
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--anchor);
}
.sitenav__tel a { color: var(--anchor); }
.sitenav__tel .small { font-weight: var(--fw-normal); color: var(--ink-soft); }

@media (max-width: 1099px) {
  /* 幅が足りない順に畳む。電話は残す（業界で電話とフォームの両方を持つのは1社もない） */
  .site-head__actions { display: none; }
}
@media (max-width: 860px) {
  .site-head__tag { display: none; }
  .site-head__tel { font-size: var(--fs-body); }
  .site-head__hours { display: none; }   /* 受付時間はメニューの中と各所に出る */
  .site-head__logo img { height: 40px; }
  .site-foot__logo img { height: 32px; }
}
@media (max-width: 480px) {
  .navbtn__label { display: none; }
  .site-head__tel { font-size: var(--fs-small); }
}

/* ── 2. ヒーロー「鍵と光」 ─────────────────────
   🔑 2026-09-15 実施者ご指定：写真を画面いっぱいに（空まで）使い、
      文字は写真の右側に重ねる。
   🚨 重ねる文字の色は反転しないトークン（§0）を使う。
   🚨 2026-09-17 実施者ご指定：右側にうすく白をかけない＝面（ヴェール）は撤去。
      ぼかし（backdrop-filter）も使わない。写真は端から端まで素のまま見える。
      文字の可読性は --hero-halo（文字の縁だけを起こす）で担保する。 */

.hero-a { position: relative; background: var(--paper); }

.hero-a__media { position: relative; margin: 0; background: var(--accent-soft); }
.hero-a__media img {
  width: 100%;
  /* 🚨 2026-09-21 実施者ご指定：こまめを小さく・レインボーブリッジを全部見せる。
     写真は 1149x862（これ以上大きい元データは無いとご確認済み）。
     全面に切ると必ず橋の上か下が落ちるので、SPでも写真の比率そのままに出す。 */
  aspect-ratio: 1149 / 862;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.hero-a__inner { padding-top: var(--s32); padding-bottom: var(--s40); }
.hero-a__copy > * + * { margin-top: var(--s16); }

.hero-a__area {
  max-width: none;
  margin: 0;
  font-size: var(--fs-lead);       /* 2026-09-15：タイトル下の文字と同じ大きさへ */
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--anchor);
}
.hero-a__area-sub {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  color: var(--ink-soft);
}
.hero-a__title { letter-spacing: .01em; }
.hero-a__title span { display: block; }   /* 🔑 キャッチは3行（業界標準） */
@media (max-width: 360px) { .hero-a__title { font-size: 26px; } }
.hero-a__lead { color: var(--ink); }

@media (max-width: 860px) {
  .hero-a__inner { padding-top: var(--s24); padding-bottom: var(--s32); }
}
/* 🚨 タブレット縦持ち（768px）で 4/5 のままだと写真だけで960px＝
   初画面にコピーが入らない。600px から切り口を浅くする */
@media (min-width: 600px) and (max-width: 860px) {
  /* 2026-09-21：この幅でも写真は切らない（橋が切れるため）。高さは 4:3 のまま */
  .hero-a__media img { aspect-ratio: 1149 / 862; }
}

/* 🔑 2026-09-23（第6便）実施者ご指定：
     ・PC は「写真＝画面左端から横幅の約7割／文章＝右の白い面に約3割」
     ・文章は写真の上に重ねない
     ・写真の左右に大きな白い余白を作らない
     ・写真の縦横比はそのまま、こまめの体を切らない、橋も見せる

   第5便までは写真を画面の横幅いっぱい（または画面幅で contain）に置いていた
   ので、4:3 の写真と 16:9 の画面の差が、どこかに必ず「切る」か「余らせる」と
   して出ていた。7:3 にするとこの問題が消える：
     写真の箱 ＝ 横7割 × その 862/1149 ＝ 元データとまったく同じ比。
   だから cover でも切り落としが 0、余白も 0 になる。

   🚨 高さを calc(100% * …) で作ってはいけない。カスタムプロパティの中の
      100% は使われた側で解決されるので、height に使うと「親の高さの100%」に
      なる（実測：写真が 672px でなく 183px になった）。
      高さは aspect-ratio で「自分の幅から」作る。
   🚨 文字の大きさも同じ理由で % は使えない（font-size の % は親の文字の大きさ）。
      vw で置き、上限は「ヒーローが 1800px で頭打ちになる画面幅」に合わせる。 */
@media (min-width: 1000px) {
  .hero-a {
    /* 1800px で頭打ち。これ以上広いと写真が縦に伸びて右の文章が初画面から
       落ちる（1800px のとき写真は 1260x945）。頭打ち後は左右に同じ页余白が付く */
    max-width: 1800px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 70% 30%;   /* 🔑 ご指定の 7 : 3 */
    align-items: stretch;
    background: var(--paper);
  }
  .hero-a__media {
    position: relative;
    aspect-ratio: 1149 / 862;         /* 🔑 自分の幅（＝7割）から高さを決める */
    overflow: hidden;
    background: var(--accent-soft);   /* 読み込み前の下地。写真が来れば見えない */
  }
  /* 箱の比＝写真の比なので、cover でも切れない・余白も出ない。
     🚨 contain にすると丸め誤差の分だけ左右に1〜2pxの白線が出る。cover のままに */
  .hero-a__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 50%;
  }
  /* 右3割＝白い面。ここが文章の欄 */
  .hero-a__inner {
    max-width: none;
    width: 100%;
    display: flex; align-items: center;
    padding-inline: clamp(20px, 2.7vw, 48px);
    padding-block: var(--s24);
  }
  .hero-a__copy { width: 100%; margin-top: 0; }
  .hero-a__copy > * + * { margin-top: clamp(8px, 1.05vw, 19px); }
  /* 🚨 写真の上ではなくなったので、文字の縁を白く起こす必要はない。
     残しておくと、白い面の上で文字がにじんで見える。 */
  .hero-a__area,
  .hero-a__area-sub,
  .hero-a__title,
  .hero-a__lead { text-shadow: none; }
  /* 色も反転しないトークン（--hero-ink）をやめ、通常の本文色へ戻す。
     こうしないとダークテーマで「濃紺の地に濃紺の文字」になる。 */
  .hero-a__area  { color: var(--anchor); font-size: clamp(13px, 1.32vw, 24px); }
  .hero-a__area-sub { color: var(--ink-soft); font-size: clamp(11px, .90vw, 16px); }
  .hero-a__title { color: var(--anchor); font-size: clamp(22px, 2.34vw, 42px); line-height: 1.35; }
  .hero-a__lead  { color: var(--ink); font-size: clamp(13px, .93vw, 17px); }
  /* キャンペーンも欄の幅に合わせる（3割の中で折り返しが崩れないように） */
  .hero-a .campaign        { padding: 0; }
  .hero-a .campaign__name  { font-size: clamp(13px, 1.15vw, 20px); }
  .hero-a .campaign__items { font-size: clamp(12px, 1.00vw, 17px); }
  .hero-a .campaign__zero  { font-size: clamp(26px, 2.16vw, 39px); }
}

/* ヒーロー直下の1行。登録番号と保険を、スクロール前に出し切る */
.factbar {
  max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--s8) var(--s24);
  justify-content: center;
  margin: 0;
  padding: var(--s12) var(--gutter);
  background: var(--anchor);
  color: var(--on-anchor);
  text-align: center;
}

/* ── 3. セクションの見出しまわり ───────────────── */

.sec-head > * + * { margin-top: var(--s8); }
.sec-head__sub { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink); }
.imgnote { max-width: none; }

/* ── 4. 写真つきカード（SCENE / お世話内容） ─────
   実施者ご提供のイメージ図どおり、写真の下辺にアイコンを重ねる */

.grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.photocards { align-items: stretch; }
.photocard {
  display: flex; flex-direction: column;
  padding: 0 var(--s24) var(--s24);
  overflow: hidden;
}
.photocard__media {
  max-width: none;
  margin: 0 calc(-1 * var(--s24));
  position: relative;
}
.photocard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.photocard__icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  margin: calc(-1 * var(--s32)) auto var(--s8);
  position: relative;
  border-radius: var(--r-circle);
  background: var(--accent-soft);
  color: var(--anchor);
}
.photocard__icon .icon { width: 32px; height: 32px; }
.photocard__title { text-align: center; }
.photocard p, .photocard li { max-width: none; }

/* 肉球の点を模した箇条書き（イメージ図の見た目に合わせた・図形は円） */
.paws { margin-top: var(--s8); }
.paws li { position: relative; padding-left: var(--s24); }
.paws li + li { margin-top: var(--s12); }
.paws li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: var(--s12); height: var(--s12);
  border-radius: var(--r-circle);
  background: var(--accent-2);
}

/* プチサービスの4つ。アイコン＋短い語 */
.petit {
  margin-top: var(--s16);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s12); row-gap: var(--s12);
}
.petit li {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  max-width: none; text-align: center;
}
.petit .icon { width: 28px; height: 28px; }

/* 報告の帯 */
.reportband {
  display: flex; align-items: center; gap: var(--s16) var(--s24);
  flex-wrap: wrap;
  padding: var(--s24) var(--s32);
  border-radius: var(--r-card);
  background: var(--accent-soft);
}
.reportband > div { flex: 1 1 320px; }
.reportband p { max-width: none; }
.reportband__main { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--anchor); }

/* ── 5. 料金 ─────────────────────────────────── */

/* 料金表 */
.menu > * + * { margin-top: var(--s16); }
.tabs { margin-top: 0; }
.panel { padding-top: var(--s24); }
.panel[hidden] { display: none; }
.panel .pricelist + p { margin-top: var(--s16); }
.menu .pricelist { max-width: 640px; }

/* その他の費用 */
.disclose .pricelist { margin-top: var(--s16); }
.dd-note { display: block; color: var(--ink-soft); }
.notes { margin-top: var(--s16); }
.notes li { position: relative; padding-left: var(--s16); }
.notes li + li { margin-top: var(--s8); }
.notes li::before {
  content: ""; position: absolute; left: 0; top: .8em;
  width: var(--s8); height: 1px; background: var(--anchor-2);
}

/* 料金シミュレーション
   2026-09-21 実施者ご指定：明るいレモンクリーム。すごく目立たせる。
   🚨 面を固定色にしたので、中の文字・枠線もすべて固定色で書く
      （--ink / --line のままだと、ダークテーマで明るい面に明るい文字が乗る）。 */
.calc {
  display: block;
  background: var(--calc-bg);
  border: 2px solid var(--calc-line);
  border-radius: 20px;
  color: var(--calc-ink);
}
.calc > * + * { margin-top: var(--s16); }
.calc h3 { color: var(--calc-anchor); }
.calc .small, .calc .muted, .calc label { color: var(--calc-ink); }
.calc .muted { opacity: .92; }
.calc__sub { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--calc-anchor); }
.calc .input {
  background: var(--calc-field);
  border: 1px solid var(--calc-field-line);
  color: var(--calc-ink);
}
.calc .input:hover { border-color: var(--calc-rule); }
.calc .field--check input { accent-color: var(--calc-anchor); }
.calc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  column-gap: var(--grid-col-gap);
  row-gap: var(--s16);
}
/* 2026-09-28 1種類だけの計算に戻したので6項目＝3列×2段 */
@media (min-width: 900px) {
  .calc__grid { grid-template-columns: repeat(3, 1fr); }
}
.field { max-width: none; }
.field--check { justify-content: flex-end; }
.field--check label {
  display: flex; align-items: center; gap: var(--s8);
  font-weight: var(--fw-normal); font-size: var(--fs-body);
  min-height: 48px;
}
.field--check input { width: 20px; height: 20px; accent-color: var(--anchor); }

.calc__out {
  border-top: 2px solid var(--calc-rule);
  padding-top: var(--s16);
}
.calc__label { max-width: none; margin-bottom: var(--s4); }
.calc__total {
  max-width: none;
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--calc-anchor);
}
[data-price-breakdown]:empty,
[data-price-meeting]:empty,
[data-price-notes]:empty { display: none; }

/* 金額が出せない組み合わせ（猫の延長・猫で散歩のみ 等）。
   🚨 選択肢を disabled にせず、理由を読める形で出す（統括裁定） */
.calc__out.is-unavailable .calc__label {
  font-weight: var(--fw-bold);
  color: var(--calc-anchor);
}
.calc__out.is-unavailable .calc__total { font-size: var(--fs-h3); color: var(--calc-ink-soft); }
.calc__out.is-unavailable [data-price-breakdown] {
  padding: var(--s12) var(--s16);
  border-radius: var(--r-card);
  background: var(--calc-field);
  color: var(--calc-ink);
  max-width: var(--w-text);
}

/* 未確定の前提。読み飛ばされてよいが、読めなくてはいけない */
.calc__notes {
  padding-left: var(--s16);
  border-left: 2px solid var(--calc-rule);
  color: var(--calc-ink);
}

/* ── 6. オープニングキャンペーン帯 ─────────────
   2026-09-15 実施者ご指定でヒーローの中へ移した。
   期限つき：2026年11月1日以降は index.html の aside と一緒に削除する。
   🚨 淡いピンクの面（--accent-2）の上に置く文字は --ink と --anchor だけ
      （--anchor 対 --accent-2 は 7.3:1、ダークでも 6.9:1） */
/* 2026-09-21 実施者ご指定：白〜薄いピンクの角丸枠。
   🚨 面を固定色にしたので、中の文字色も固定にする（--ink はダークで白に反転する）。 */
/* 2026-09-23（第6便）実施者ご提供のイメージ図どおりに作り替え。
   欄全体＝淡いピンクの面／見出し＝少し濃いピンクの帯／「無料！」＝明るいピンク。
   🚨 帯を欄の左右いっぱいに出すため、余白は .campaign ではなく中の要素が持つ。 */
.campaign {
  padding: 0;
  background: var(--camp-panel);
  border-radius: 16px;
  overflow: hidden;
  color: var(--camp-ink);
}
.campaign > p { max-width: none; margin: 0; }
.campaign > p + p { margin-top: var(--s8); }
.campaign__tag {
  display: inline-block;
  margin-right: var(--s12);
  padding: 2px var(--s8);
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: var(--fw-bold);
  color: var(--anchor);
  border: 1px solid var(--anchor);
  border-radius: var(--r-pill);
  vertical-align: middle;
}
.campaign__name {
  font-weight: var(--fw-bold); font-size: var(--fs-body);
  color: var(--camp-on-band); background: var(--camp-band);
}
.campaign__main {
  display: flex; align-items: center; gap: var(--s8) var(--s16); flex-wrap: wrap;
  font-weight: var(--fw-bold);
  color: var(--camp-ink);
}
.campaign__items {
  display: flex; flex-direction: column;
  font-size: var(--fs-small); line-height: 1.6; flex: 1 1 200px;
}
/* 2026-09-28 1項目＝1行に固定（「通常 1,100円（税込）」が2行に割れないように） */
.campaign__item { display: block; white-space: nowrap; }
.campaign__was { color: var(--camp-ink); }
.campaign__zero {
  font-size: clamp(32px, 3.4vw, 40px);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  color: var(--camp-zero);
}
.campaign__bang { font-size: .7em; }

/* ── 7. ご予約までの流れ ─────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: var(--grid-col-gap);
  row-gap: var(--grid-row-gap);
}
.flow__item { border-top: 1px solid var(--line); padding-top: var(--s16); }
.flow__item .segments { margin-bottom: var(--s16); }
.flow__no { max-width: none; letter-spacing: .14em; color: var(--ink-soft); }
.flow__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s8);
  margin-bottom: var(--s8);
}
.flow__fee {
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  color: var(--ink-soft);
}
.flow__fee--paid {
  font-weight: var(--fw-bold);
  color: var(--anchor);
  background: var(--accent-2);
  border-radius: var(--r-pill);
  padding: var(--s4) var(--s12);
}

/* 期限つき：2026年11月1日以降は .flow__fee__now ごと削除する */
.flow__fee__now {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--anchor);
}

/* ── 8. 安心してご利用いただくために ─────────────
   2026-09-15：上に大きく4つ、下に小さく3つ（ご提供イメージ図の配置） */

.safety { display: flex; align-items: flex-start; gap: var(--s16); }
.safety > div { min-width: 0; }
.safety p, .safety h3 { max-width: none; }
.safety__icon {
  flex: none;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-circle);
  background: var(--accent-soft);
  color: var(--anchor);
}
.safety__icon .icon { width: 32px; height: 32px; }
.safety--sub .safety__icon { width: 48px; height: 48px; }
.safety--sub .safety__icon .icon { width: 24px; height: 24px; }
.card__title--sm { font-size: var(--fs-body); }

@media (max-width: 700px) {
  /* .grid--2 は常に2列。40pxパディングのカードが2つ並ぶと文字幅が残らない */
  .section--soft .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .card--roomy { padding: var(--s24); }
}

/* ── 9. FAQ ───────────────────────────────────── */

.faq .ticks { margin-top: var(--s8); }
.ticks { max-width: var(--w-text); }
.ticks li { position: relative; padding-left: var(--s24); }
.ticks li + li { margin-top: var(--s8); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 6px;
  border-left: 1px solid var(--anchor);
  border-bottom: 1px solid var(--anchor);
  transform: rotate(-45deg);
}

/* ── 10. シッター紹介 ────────────────────────── */

.sitter__name {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s4) var(--s12);
  max-width: none;
  padding: var(--s16) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sitter__who { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--anchor); }
.sitter__quals { flex-basis: 100%; }

/* ── 10-2. はじめた理由（実体験・実施者ご本人の文章） ──
   🔑 v3の核心「余白の隣には必ず強いものがある」。ここは文章が主役なので
   写真は添えるだけにし、面の色は付けない（SITTER と地続きに読ませる） */

.story {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s40);
  row-gap: var(--s24);
  align-items: start;
  margin-top: var(--s48);
  padding-top: var(--s32);
  border-top: 1px solid var(--line);
}
@media (min-width: 861px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
}
.story__title { margin-bottom: var(--s16); }
/* 2026-09-29 「でき／るだけ」「き／っかけ」のような語の途中の改行をなくす。
   keep-all＝文字の間では折り返さず、<wbr>（文節の境目）と句読点の後でだけ折り返す。
   万一1文節が枠より長くなったときだけ anywhere で割る（はみ出し防止の保険） */
.story h3, .story p { word-break: keep-all; overflow-wrap: anywhere; }
/* 🚨 本文703px対写真315pxで右に388pxの空白ができていた。
   「余白の隣には必ず強いものがある」に反するので、写真を追従させる */
.story__photo { margin: 0; }
@media (min-width: 861px) {
  .story__photo { position: sticky; top: var(--s24); }
}
.story__photo img { border-radius: var(--r-card); width: 100%; height: auto; }
.story__photo figcaption { margin-top: var(--s8); }

/* ── 11. お問い合わせ ─────────────────────────── */

/* 🚨 濃い面（.section--anchor）の上なので、文字は必ず --on-anchor 側を使う */

.contact__cols {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s40);
  row-gap: var(--s40);
  align-items: start;
}
/* 🔑 2026-09-21（第2便）：左の列をフォームと同じ高さまで伸ばす。
   これをしないと列の高さが中身ぶんしかなく、線画は下がらない（実測）。 */
@media (min-width: 860px) {
  .contact__cols { grid-template-columns: .8fr 1.2fr; align-items: stretch; }
}

.contact .contact__h3 { margin-bottom: var(--s8); font-size: var(--fs-h3); }
.contact__direct > * + .contact__h3 { margin-top: var(--s32); }
.contact__tel a, .contact__mail a { color: var(--on-anchor); text-decoration: underline; text-underline-offset: 4px; }
.contact__tel {
  max-width: none;
  font-size: clamp(24px, 5.6vw, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.contact__mail { font-size: var(--fs-lead); font-weight: var(--fw-bold); max-width: none; word-break: break-all; }

/* 🚨 320pxで横スクロールが出た実測（2026-09-15）。原因は <select> の
   min-content 幅＝最長の選択肢（「散歩のみ 40分（ご在宅の場合）」）で、
   grid item の既定 min-width:auto と合わさって列ごと広がっていた。
   グリッドの子と入力欄の双方で縮めることを許す */
.contact__cols > * { min-width: 0; }
.contact__form .input { max-width: 100%; }
.contact__form select.input { min-width: 0; text-overflow: ellipsis; }

.contact__form {
  padding: var(--s24);
  background: var(--paper);
  border-radius: var(--r-card);
  color: var(--ink);
}
.contact__form .contact__h3 { color: var(--anchor); }
.contact__form .field { margin-bottom: var(--s16); max-width: none; }
.contact__form label { color: var(--ink); }
/* 🚨 実測で見つけた穴（2026-08-28）：フォームを .card から素の div へ変えた結果、
   `.section--anchor .card a.link-sub { color: var(--anchor) }` が効かなくなり、
   白いカードの中のリンクが --on-anchor（ほぼ白）を継承して**コントラスト比1.00**になった。
   カード側でなくフォーム側で必ず塗り直す */
.contact__form a { color: var(--anchor); }
.contact__form .muted { color: var(--ink-soft); }

.req {
  display: inline-block;
  margin-left: var(--s4);
  padding: 0 var(--s8);
  font-size: var(--fs-small);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--anchor);
}
/* 🚨 ブラウザ既定の placeholder は無彩色のグレー（コントラストも不足）。
   トークンの色へ置き換える */
.input::placeholder { color: var(--ink-soft); opacity: 1; }

/* 🚨 left:-9999px は画面外へはみ出して横スクロールの温床になるので使わない。
   base.css の .visually-hidden と同じ clip-path 方式に揃える */
.hp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-status:empty { display: none; }
.form-status {
  padding: var(--s12) var(--s16);
  border-radius: var(--r-card);
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* ── 12. フッター（法定表示） ───────────────────── */

.legal__title { font-size: var(--fs-h3); margin-bottom: var(--s16); }
.legal dd { white-space: normal; text-align: right; }
/* 2026-09-28 会社名のすぐ下・少し小さく・会社名と同じ揃え（PC右／SP左） */
.legal__sub { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 480px) {
  /* 320〜480px では所在地が2列目で潰れるので1列に落とす */
  .legal { grid-template-columns: 1fr; row-gap: var(--s4); }
  .legal dd { text-align: left; padding-bottom: var(--s8); }
}

/* ── 13. 固定CTA（3枠・320pxでも折り返させない） ── */

.cta-fixed__item { padding: var(--s8) var(--s4); }
.cta-fixed__item br { display: block; }


/* ============================================================
   14. 2026-09-17 実施者ご依頼（9項目）で足したもの
   ============================================================ */

/* ── 14a. 色付きボタン（ヘッダー） ─────────────── */
/* 🚨 塗りの上は必ず白文字（--btn-on）。淡い色に変えるときは §0a の実測値を読むこと */
.btn--pink, .btn--coral, .btn--green {
  border-color: transparent;
  color: var(--btn-on);
  border-radius: var(--r-pill);
  gap: var(--s8);
}
.btn--pink  { background: var(--btn-pink); }
.btn--pink:hover  { background: var(--btn-pink-deep);  border-color: transparent; color: var(--btn-on); }

/* 2026-09-21 実施者ご指定：やわらかいグラデーション。
   🚨 グラデーションの【明るいほうの端】で 4.5:1 を満たす色しか使えない。
      文字は面の上のどこにでも乗るので、平均ではなく最も明るい端で測る。 */
.btn--coral { background: var(--btn-coral) linear-gradient(135deg, var(--btn-coral), var(--btn-coral-deep)); }
.btn--green { background: var(--btn-green) linear-gradient(135deg, var(--btn-green), var(--btn-green-deep)); }
.btn--coral:hover { background: var(--btn-coral-deep); border-color: transparent; color: var(--btn-on); }
.btn--green:hover { background: var(--btn-green-deep); border-color: transparent; color: var(--btn-on); }
.btn--coral, .btn--green { border-color: transparent; }
.btn--pink .icon, .btn--coral .icon, .btn--green .icon { color: var(--btn-on); }

/* ── 14b. ご提供イラスト（CSSマスク＝色はテーマに追随する） ──
   🚨 画像そのものに色を持たせない。alpha だけを使い、色は currentColor。
      こうしないとダークテーマで「濃紺の線が濃紺の面に乗る」＝消える。 */
.ill {
  display: block;
  width: 100%; height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* 🚨 2026-09-21：url() でファイルを指すのをやめた。
   CSS の mask-image は CORS の対象で、file:// で開くと外部ファイルを読めず
   マスクが丸ごと無効になる＝丸の中が空になる（実測。田代さんのご指摘の原因）。
   マスクは data: URI にして masks.css（自動生成）で持つ。 */
.ill--dog    { -webkit-mask-image: var(--mask-ill-dog);    mask-image: var(--mask-ill-dog); }
.ill--cat    { -webkit-mask-image: var(--mask-ill-cat);    mask-image: var(--mask-ill-cat); }
.ill--rabbit { -webkit-mask-image: var(--mask-ill-rabbit); mask-image: var(--mask-ill-rabbit); }
.ill--home   { -webkit-mask-image: var(--mask-ill-home);   mask-image: var(--mask-ill-home); }
/* 丸の中に入れるので、線画は少し小さく置く。
   🔑 2026-09-21（第2便）実施者ご指定：「こんな時にご利用ください」の
      アイコンと同じ大きさに見えるようにする。箱の大きさを同じ 32px に
      しても揃わない＝線画は箱いっぱいに描かれ、SVGアイコンは viewBox の
      内側に余白がある（実測 インク比 0.89 対 0.72）。
      「描かれた線の高さ」で合わせる＝実測で 26px。ただし線画のほうが
      線が太く、26px では小さく見えたので 29px（実描画を並べて比較）。 */
.photocard__icon .ill { width: 29px; height: 29px; }

/* ── 14c. 料金表（内容ごとにまとめ、点線でつなぐ） ── */
.plist { margin: 0; max-width: 780px; }
.plist + .plist__group { margin-top: var(--s24); }
.plist__group {
  position: relative;
  margin-bottom: var(--s12);
  padding-left: var(--s16);
  font-size: var(--fs-h3);
  color: var(--anchor);
}
.plist__group::before {
  content: "";
  position: absolute; left: 0; top: .15em; bottom: .15em;
  width: var(--s4);
  border-radius: var(--r-pill);
  background: var(--accent-2);
}
.plist__groupsub {
  margin: calc(-1 * var(--s8)) 0 var(--s12) var(--s16);
  color: var(--ink-soft);
}
.plist__row {
  display: flex; align-items: baseline;
  gap: var(--s8);
  padding-left: var(--s16);
}
.plist__row + .plist__row { margin-top: var(--s12); }
/* dt を「文字＋伸びる点線」の並びにする。点線は dt の疑似要素なので
   マークアップに空要素を足さずに済む（dl の中に span は置けない） */
.plist__row > dt {
  display: flex; align-items: baseline; gap: var(--s12);
  flex: 1 1 auto; min-width: 0; max-width: none;
}
.plist__row > dt::after {
  content: "";
  flex: 1 1 var(--s24); min-width: var(--s16);
  border-bottom: 1px dotted var(--line);
  transform: translateY(-.3em);
}
.plist__row > dd {
  flex: none; max-width: none; margin: 0;
  font-weight: var(--fw-bold);
  color: var(--anchor);
  white-space: nowrap;
}

/* その他の費用：点線ではなく1行ずつの区切り線。項目と金額も近づける */
.plist--ruled { max-width: 780px; }
.plist--ruled .plist__row {
  padding: var(--s12) var(--s8);
  border-top: 1px solid var(--line);
}
.plist--ruled .plist__row + .plist__row { margin-top: 0; }
.plist--ruled .plist__row:last-child { border-bottom: 1px solid var(--line); }
.plist--ruled .plist__row > dt::after { content: none; }
.plist--ruled .plist__row > dd { text-align: right; }

@media (max-width: 480px) {
  /* 320pxでは点線を出す余地がない。折り返して2段にする */
  .plist__row { flex-wrap: wrap; padding-left: var(--s8); }
  .plist__row > dt { flex: 1 1 100%; }
  .plist__row > dt::after { content: none; }
  .plist__row > dd { margin-left: auto; }
  .plist__group, .plist__groupsub { padding-left: var(--s12); }
}

/* ── 14d. キャンペーン（2026-09-23 第6便のイメージ図どおり） ──
   淡いピンクの欄／濃いピンクの見出し帯／明るいピンクの「無料！」。
   🚨 拡声器のイラストは実施者ご了承のうえ削除（右3割の幅に入れると窮屈）。 */
.campaign {
  display: block;
  border: 1px solid var(--camp-line);
}
.campaign__body { display: block; min-width: 0; }
/* 見出し＝帯。欄の左右いっぱいに敷く */
.campaign__name {
  display: block;
  padding: var(--s8) var(--s16);
  line-height: 1.45;
}
/* 🚨 3割の欄では帯が2行になる。何もしないと「ペーン」だけ、
   text-wrap:balance では「オー／プニング」で割れる（どちらも実測）。
   日付と名前をそれぞれ塊にして、切れ目を語の間に固定する */
.campaign__chunk { display: inline-block; }
/* 本文は帯の下。ここで初めて左右の余白を付ける */
.campaign__main {
  display: flex;
  padding: var(--s12) var(--s16) var(--s16);
}
@media (max-width: 480px) {
  /* 🔑 スマートフォンでは「無料！」を金額の下へ回す（横に並べると
     1行が詰まって、金額か無料のどちらかが読みにくくなる。実測） */
  .campaign__main { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  /* 🚨 .campaign__items は flex:1 1 200px。縦並びにすると「伸びしろ」が
     高さ方向に効いて、金額と「無料！」の間に大きな空きができる（実測） */
  .campaign__items { flex: 0 0 auto; }
  /* 🚨 375px で「…キャンペーン」の最後の3文字だけが次の行に落ちる（実測）。
     帯の文字を画面幅に合わせて少し縮め、1行に収める */
  .campaign__name { padding: var(--s8) var(--s12); font-size: clamp(13px, 3.9vw, 16px); }
  .campaign__main { padding: var(--s12) var(--s12) var(--s12); }
  .campaign__zero { font-size: clamp(30px, 9vw, 38px); }
}

/* ── 14e. お問い合わせ（イメージ図どおりに作り替え） ── */
.contact__rule {
  width: var(--s40); height: 0;
  margin: var(--s16) 0;
  border: 0; border-top: 1px solid var(--on-anchor);
  opacity: .6;
}
.contact__invite { max-width: 22em; font-weight: var(--fw-bold); }
.contact__tel, .contact__mail {
  display: flex; align-items: center; gap: var(--s12);
  margin-top: var(--s24);
}
.contact__tel .icon, .contact__mail .icon { flex: none; width: 24px; height: 24px; }
.contact__hours { margin-top: var(--s4); padding-left: var(--s32); }
.contact__reply { margin-top: var(--s24); max-width: 30em; }

/* 飾りの線画。左下にさりげなく置き、右へ流れて切れる（イメージ図どおり） */
/* 2026-09-21（第2便）：線画を下へ寄せるため、左の列を縦に伸ばす */
.contact__direct { display: flex; flex-direction: column; }
.contact__ill {
  max-width: none;
  /* 🔑 2026-09-21（第2便）実施者ご指定：もう少し下へ。
     数値で下げると画面幅ごとにずれる。左の列を縦に伸ばし、
     余った分を線画の上に寄せる（auto）＝フォームの下端に並ぶ。 */
  margin-top: auto;
  padding-top: var(--s32);
  height: 168px;
  color: var(--on-anchor);
  background-color: currentColor;
  opacity: 1;
  /* 🚨 url() では file:// で消える（上の注記と同じ理由）。data: URI で持つ */
  -webkit-mask-image: var(--mask-lineart-dogcat);
          mask-image: var(--mask-lineart-dogcat);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left bottom; mask-position: left bottom;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
}
@media (max-width: 859px) {
  /* スマホでは高さを食うだけなので小さく */
  .contact__ill { height: 96px; padding-top: var(--s24); }
}

/* フォームを2グループに分ける */
.formgrp + .formgrp { margin-top: var(--s24); }
.formgrp__head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s4) var(--s12);
  max-width: none;
  margin-bottom: var(--s16);
}
.formgrp__num {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-circle);
  background: var(--accent-2);
  color: var(--anchor);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  transform: translateY(.15em);
}
.formgrp__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--anchor); }
.formgrp__note { color: var(--ink-soft); }

/* 🔑 PCは2列、スマホは1列。auto-fit なので幅で自動的に切り替わる
   （フォームの列そのものが狭いときも1列へ落ちる） */
.formgrp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: var(--s24);
}
.formgrp__grid > * { min-width: 0; }
.field--full { grid-column: 1 / -1; }

.formnote { margin-top: var(--s8); }
.formnote > * + * { margin-top: var(--s8); }
.formsend { margin-top: var(--s24); text-align: center; }
.btn--send { width: auto; min-width: min(100%, 320px); }


/* ════════════════════════════════════════════════════════════
   2026-10-05（第10便）田代さん①〜③・ライト固定（apply_20261005.py）
   ════════════════════════════════════════════════════════════ */

/* ④ ライト固定。tokens.css の :root{color-scheme:light dark} を上書き */
:root { color-scheme: light; }

/* ① ヘッダーの犬の線画。電話番号のすぐ右・ボタンの手前 */
.site-head__call {
  flex: none;
  max-width: none;
  margin: 0 var(--s8) 0 calc(var(--s4) * -1);
  height: 50px;
  aspect-ratio: 3.7440;
  color: var(--anchor);               /* 電話番号と同じ濃紺 */
  background-color: currentColor;
  -webkit-mask-image: var(--mask-head-call);
          mask-image: var(--mask-head-call);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* 線画が入っても電話のアイコンが番号の上へ回り込まない／電話の箱を中身の幅に詰める
   （flex-wrap のままだと受付時間の行ぶん横に広がり、線画が電話から離れる＝実測 313px） */
.site-head__tel { flex: none; display: grid; grid-template-columns: auto auto; justify-content: start; }
.site-head__tel .site-head__hours { grid-column: 1 / -1; }
.site-head__tel a { white-space: nowrap; }
/* ② 見出し下の説明文は「1文＝1行」で読ませる（PC） */
#scene .sec-head__sub { max-width: none; }
/* 幅が足りないときは、ボタンより先に線画を畳む（電話とボタンを優先） */
@media (max-width: 1439px) {
  .site-head__call { height: 40px; margin-right: 0; }
}
/* 1340px未満は「訪問型ペットシッター」の添え書きを先に畳む（ロゴに社名がある） */
@media (max-width: 1339px) {
  .site-head__tag { display: none; }
}
@media (max-width: 1179px) {
  .site-head__call { display: none; }
}

/* ③ お問い合わせ：誘い文を外した分、電話番号を主役に */
.contact__tel { font-size: clamp(28px, 3vw, 44px); margin-top: var(--s32); line-height: 1.2; letter-spacing: .01em; }
.contact__tel .icon { width: 32px; height: 32px; }
.contact__hours { font-size: var(--fs-body); padding-left: 44px; }
.contact .contact__rule { margin-bottom: var(--s8); }

/* 吹き出し。線画の上・左の列の下寄せ（線画と一緒に下へ） */
.contact__call {
  max-width: none;
  margin-top: auto;                    /* 余白は吹き出しの上に寄せる */
  padding-top: var(--s32);
  position: relative;
}
.contact__call a {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s16);
  padding: var(--s16) var(--s32) var(--s16) var(--s16);
  border-radius: 999px;
  background: #FBF6E9;                 /* 淡いクリーム。濃紺の面の上で目に留まる */
  color: var(--anchor);
  text-decoration: none;
  /* 影は付けない（AD規約・audit.py §3）。濃紺の面とクリームの対比だけで目に留める */
}
.contact__call a:hover { background: #FFF9EC; }
/* しっぽ（下の犬猫を指す） */
.contact__call a::after {
  content: "";
  position: absolute; left: 22%; bottom: -15px;
  width: 26px; height: 18px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}
/* 左上の「ピカッ」3本線（イメージ図どおりの黄色・飾り） */
.contact__call-spark {
  position: absolute; left: -22px; top: calc(var(--s32) - 22px);
  width: 34px; height: 34px;
  pointer-events: none;
}
@media (max-width: 859px) { .contact__call-spark { left: -14px; top: calc(var(--s24) - 20px); width: 28px; height: 28px; } }
.contact__call-icon {
  flex: none;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #6FAE4F;
  color: #FBFAF8;
}
.contact__call-icon svg { width: 30px; height: 30px; }
.contact__call-text {
  display: flex; flex-direction: column;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  font-size: clamp(17px, 1.6vw, 22px);
}
.contact__call-text strong { color: #2B7A3A; font-weight: var(--fw-bold); }
/* 吹き出しがあるので、線画は上の余白を詰めて吹き出しに寄せる */
.contact__call + .contact__ill { margin-top: var(--s8); padding-top: 0; }
@media (max-width: 859px) {
  .contact__call { padding-top: var(--s24); }
  .contact__call-icon { width: 46px; height: 46px; }
  .contact__call a { padding: var(--s12) var(--s24) var(--s12) var(--s12); gap: var(--s12); }
}

/* ============================================================
   2026-10-07 実施者ご指定（第7便）
   ============================================================ */

/* ① ヒーローの説明文：文字の間では折り返さず、<wbr>（意味の切れ目）と句読点の後でだけ折り返す。
   「ペットシッター」は .nobr で必ず一塊（keep-all は Safari も対応。auto-phrase は Safari 非対応なので使わない） */
.hero-a__lead { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
.nobr { white-space: nowrap; }
/* 2026-10-07 実施者ご指定（検証後の調整）：「訪問型のペットシッターです。」「ごはんとトイレとお散歩を。」は
   それぞれ一塊（名詞句・並列を割らない）。どちらも14字以内なので320px幅でも収まる */
.phrase { display: inline-block; white-space: nowrap; }
/* 2026-10-07 実施者ご指定（再調整）：「ご自宅にうかがう、」は全幅で一塊（スマホで「ご自宅に／うかがう」と割れないように）。
   1文目の「です。」の後は <br> で必ず改行し、2文目は新しい行から始める */
.phrase-narrow { display: inline-block; white-space: nowrap; }

/* ② ご予約までの3段階：棒 → 肉球3つ（ご提供イメージ図 flow_mock どおり、細い罫線の下に等間隔） */
.segments--paw {
  display: flex; align-items: center;
  column-gap: clamp(28px, 3.2vw, 44px);
  padding-left: var(--s4);
  margin-bottom: var(--s12);
}
.segments--paw .paw {
  flex: none;
  width: 26px; height: 26px;
  color: var(--paw-rest, #C5D1DB);          /* これからの段階＝淡い青 */
}
.segments--paw .paw.is-done { color: var(--paw-done, #35475B); }  /* 済んだ段階＝濃紺 */

/* ③ 2行固定の見出し（各片の中では折り返さない） */
.title-2l > span { display: block; white-space: nowrap; }

/* ④ よくあるご質問：先頭の肉球。文字より少し小さく、1行目の高さの中央に置く。
   質問文は別の箱なので、2行目以降も肉球の右に揃う（ぶら下げ） */
.faq summary .faq__paw {
  flex: none; align-self: flex-start;
  width: .9375em; height: .9375em;          /* 2026-10-07 実施者ご指定：文字(16px)より少し小さい15px */
  margin-left: 4px;                          /* 2026-10-07 実施者ご指定：faq_mock どおり少し字下げ */
  margin-top: calc((1.9em - .9375em) / 2);   /* 1lh 非対応ブラウザ用 */
  margin-top: calc((1lh - .9375em) / 2);
  color: var(--paw-faq, #D59897);
}
.faq summary .faq__q { min-width: 0; }
.faq summary { gap: 14px; }   /* 2026-10-07 実施者ご指定：肉球と文字の間に適度な余白（文字16pxに対し14px） */

/* ⑤ 公式Instagram：PCは左に文字・右に投稿画像、スマホは縦積み */
.insta { display: grid; gap: var(--s32); align-items: center; }
@media (min-width: 769px) {
  .insta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s48); }
}
.insta__title { display: flex; align-items: center; gap: .35em; }
.insta__glyph { flex: none; width: .9em; height: .9em; }
.insta__lead { word-break: keep-all; overflow-wrap: break-word; }
.insta__post {
  display: block;
  width: min(100%, 280px);
  border-radius: var(--r-card, 12px);
  overflow: hidden;
  border: 1px solid var(--line);
}
.insta__post img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.insta__post:hover { border-color: var(--anchor); }
/* 2026-10-07 実施者ご指定（再調整）：スマホは投稿画像を中央に、PCは少しだけ大きく（吹き出しの文字が読めるように） */
@media (max-width: 768px) { .insta__post { margin-inline: auto; width: min(100%, 320px); } }
/* 769〜999px は2カラムの auto 列で 100% が潰れる（実測2px）ので幅を固定 */
@media (min-width: 769px) { .insta__post { width: 280px; } }
@media (min-width: 1000px) { .insta__post { width: 320px; } }

/* 2026-10-07 実施者ご指定（検証後の調整）：PCの肉球はイメージ図 flow_mock に寄せて少し大きく・間隔広め・少し字下げ */
@media (min-width: 1024px) {
  .segments--paw { column-gap: 52px; padding-left: 10px; }
  .segments--paw .paw { width: 30px; height: 30px; }
}

/* ⑥ 吹き出し：見た目だけ少し上へ（top＝周りの配置に影響しない）。線画の位置・大きさは不変 */
.contact__call { top: -14px; }   /* ピカッの3本線ごと上へ */
.contact__call-text strong { word-break: keep-all; }
/* 文言が長くなった分、2行に収まるよう字の大きさの上限だけ控えめに（PC 22→19px・スマホは幅に比例） */
.contact__call-text { font-size: clamp(16px, 1.45vw, 19px); }
@media (max-width: 859px) { .contact__call-text { font-size: min(17px, 4vw); } }
@media (max-width: 420px) { .contact__call a { padding-right: var(--s16); } }
/* 2026-10-07 実施者ご指定（検証後の調整）：吹き出しはテーマで反転しない（常にクリームの面＋紺の文字） */
.contact__call a { color: #2E4257; }
/* ダークでは面が明るい青になるので、吹き出しの縁に紺の線を足して輪郭を出す（ライトでは面と同色＝見た目不変） */
:root[data-theme="dark"] .contact__call a { outline: 2px solid #2E4257; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact__call a { outline: 2px solid #2E4257; } }
/* 1カラム（〜859px）では上へずらすと直前の段落に食い込むので、ずらさず吹き出しの上下を詰めて下端だけ14px上げる
   （上端＝元の位置・犬の頭との間＝PCと同じく広がる・線画の位置は不変） */
@media (max-width: 859px) {
  .contact__call { top: 0; padding-bottom: 14px; }   /* 詰めた14pxは吹き出しの下へ＝箱の高さ不変で線画は動かない */
  .contact__call a { padding-top: 5px; padding-bottom: 5px; }
}
/* 328px以下は元の文言が3行だった（実測）。文言が2行になって縮んだ1行分（22.8px）も下に足し、線画を元の位置に保つ */
@media (max-width: 328px) { .contact__call { padding-bottom: 36.8px; } }

/* 肉球の色（ダークテーマ）：濃紺は明るい側へ、淡色は暗い面で見える控えめな色へ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paw-done: #A9C4D6; --paw-rest: #6B7F90; --paw-faq: #D9A3A2; }
}
:root[data-theme="dark"] { --paw-done: #A9C4D6; --paw-rest: #6B7F90; --paw-faq: #D9A3A2; }   /* 2026-10-07：淡色も暗い面で3:1以上 */

/* ── トップ末尾のリンク欄（#guide）だけに効く（2026-10-21）。既存の見た目は変えない ── */
@media (max-width: 639px) {
  #guide .grid--2 { grid-template-columns: minmax(0, 1fr); }
}
#guide .ticks li a { display: inline-block; padding-block: 10px; }