/* /case 症状から探す（一覧）。templates/main/case-index.mjs に対応。
   2026-09-28 新しい形（ユーザー確定）: ① ヒーロー・H1・リード → ② 問いと答え（#case-ask。「② 問いと答え」の節）→ ③ 主なお悩み（#case-all。見出し → キーワード欄 → 14 のまとまり）→ ④ 本文 3 段落 → 下部ナビ。
   ピル・本文の字の大きさは下の現行の実測のまま。まとまりの見出し（h3 左罫線）は 4 見出しのときの H2（24 / 32 / 32）より一回り小さい 22 / 28 / 28（② ③ の見出し 24 / 30 / 32 より下に見せるため）。
   実測（capture/compare/case 2026-09-18 再測）:
     PC 1280: ヘッダー下 30 → 写真 1080×360（容器 1120 より左右 20 内側）→ ラベル＋H1 40 → リード 24 中央 → 本文 800 幅 16px 行間 2.2
              → 左罫線 H2 32 ＋ 点線 → 罫線下 36 → リンクピル 3 列 高さ 58 縦横 gap 20 → グループ間 160 → 下部ナビまで 104
     SP 344 : 写真 3:2 → H1 28 → リード 20 → 本文 14 行間 2.1 → H2 24（1 行に収める）→ ピル 1 列 gap 10 → グループ間 80 → 下部ナビまで 80
     841    : 参照は SP 写真（3:2 で 505px）。2026-09-29 から同じく 3:2（以前は 16:9 に下寄せで切り抜いていた）。ピル 2 列
   ブレークポイント: 〜599 1 列 / 600〜911 2 列 / 912〜 3 列（2026-09-28 現行の実測。600〜1079 の書体と余白は「600〜1079」の節）。
   規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 禁止・色はトークンのみ */

/* ---------- ヒーロー写真（角丸＋波形は画像に焼き込み済み・背景は透過） ---------- */
.case-hero { padding-top: 4px; }
.case-hero picture { display: block; }
.case-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1843 / 1226; object-fit: cover; object-position: center bottom; }
/* 768〜: 旧は SP 画像を 16:9 の箱に下寄せで入れていた。今は 768〜911 を下の規則で 3:2 に戻し、912〜 は PC 画像なので、この 16:9 はどの幅でも効いていない（1080〜 に触れないよう消さずに残す） */
@media (min-width: 768px) {
  .case-hero { padding-top: 8px; }
  .case-hero-img { aspect-ratio: 16 / 9; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
/* 768〜911: 2026-09-29 から現行どおり SP 画像を 3:2 のまま全部見せる（841 で 761×506。角丸・波形は画像に焼き込み）。
   旧は 841×701 で見出しを 1 画面目に残すため 16:9 に下寄せで切り抜いていた（761×428・上の角を CSS で丸める）が、ユーザー指示「現状のサイトとレイアウト違う」で現行に戻した */
@media (min-width: 768px) and (max-width: 911px) {
  .case-hero-img { aspect-ratio: 1843 / 1226; border-radius: 0; }
}
/* 1080〜: PC 画像（3:1 波形）。参照は容器より左右 20 内側・ヘッダーとの間 30 */
@media (min-width: 1080px) {
  .case-hero { padding-top: 30px; }
  .case-hero .container { padding-inline: 20px; }
  .case-hero-img { aspect-ratio: 2340 / 772; border-radius: 0; }
}
/* 1280〜（原本 urala.com を 1280/1440/1920 で実測 2026-09-20）:
   本文容器は min(100% − 160, 1136)（1280: 80〜1200 ／ 1440: 152〜1288 ／ 1920: 392〜1528）。tokens の --container 1120 は 1440 以上で 16px 足りない。
   ヒーロー写真は容器と別に min(100vw − 200, 1170)（1280: 100〜1180 ／ 1440: 135〜1304 ／ 1920: 375〜1544）。1280 では容器より 20 内側、1440〜 では 17 外側 */
@media (min-width: 1280px) {
  .page-case-index .container { width: min(100% - 160px, 1136px); }
  /* 2026-09-25 Figma pc/case catch（482:290）: 1366 で写真 1170×386・左 98（= 100vw − 196）。旧実測の 100vw − 200 は 1366 で 1166 だった */
  .page-case-index .case-hero .container { width: min(100vw - 196px, 1170px); padding-inline: 0; }
}

/* ---------- 見出しブロック（写真の直下） ---------- */
.case-head { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(40px, 5vw, 80px); }
.case-head .sec-head { gap: 4px; }
/* H1 は SP 28 / PC 40（tokens の --fs-h1 は 344 でも 38 になり参照より大きいので、ここで実測値に固定） */
.case-head h1.sec-title { font-size: 28px; }
@media (min-width: 600px) { .case-head h1.sec-title { font-size: 32px; } }
@media (min-width: 768px) { .case-head { padding-top: 24px; padding-bottom: 64px; } .case-head h1.sec-title { font-size: 36px; } }
@media (min-width: 1080px) { .case-head { padding-top: 28px; padding-bottom: 80px; } .case-head h1.sec-title { font-size: 40px; } }

/* ---------- リード（①）と本文 3 段落（④。一覧の後ろ）（幅 800・行間 2.1） ---------- */
.case-intro { padding-bottom: 72px; }
.case-lead { text-align: left; line-height: 1.8; letter-spacing: 0.02em; }
.case-outro { padding-top: 96px; }
.case-body { font-size: var(--fs-body); line-height: 2.1; letter-spacing: 0.02em; color: var(--c-ink); }
.case-body p + p { margin-top: 0; }
@media (min-width: 768px) { .case-lead { text-align: center; margin-inline: auto; max-width: 760px; } .case-body { font-size: 16px; line-height: 2.2; } }
@media (min-width: 1080px) { .case-intro { padding-bottom: 96px; } .case-outro { padding-top: 110px; } }

/* ② ③ の見出し（中央。どちらも h2）: SP 24 / 600〜 30 / 1080〜 32。H1（28 / 40 / 40）より小さく、まとまりの h3（22 / 28 / 28）より大きく */
.case-sec-title { font-family: var(--f-round); font-weight: 500; font-size: 24px; line-height: 1.6; letter-spacing: 0.06em; color: var(--c-ink-deep); text-align: center; margin: 0 0 20px; text-wrap: balance; }
@media (min-width: 600px) { .case-sec-title { font-size: 30px; margin-bottom: 28px; } }
@media (min-width: 1080px) { .case-sec-title { font-size: 32px; margin-bottom: 32px; } }
.case-ask, .case-all, .case-find, .case-group { scroll-margin-top: 24px; }
.case-all { padding-top: 88px; }
@media (min-width: 600px) { .case-all { padding-top: 104px; } }
@media (min-width: 1080px) { .case-all { padding-top: 120px; } }

/* ---------- ③ の 14 のまとまり（h3 左罫線＋点線＋ピル） ---------- */
.case-groups { padding-bottom: 0; }
.case-group { position: relative; }
.case-group + .case-group { margin-top: 80px; }
/* メニューの /case#worries01〜04 の着地点（まとまりの頭。高さ 0） */
.case-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 24px; }
.case-group .bar-head { font-size: 22px; margin-bottom: 20px; }
.case-group-rule { margin-bottom: 30px; }
@media (min-width: 768px) { .case-group .bar-head { font-size: 28px; margin-bottom: 20px; } .case-group-rule { margin-bottom: 32px; } }
@media (min-width: 1080px) { .case-group .bar-head { font-size: 28px; margin-bottom: 22px; } .case-group-rule { margin-bottom: 36px; } }

/* リンクピル: 白・高さ 58・角丸 29・左 32px（SP 20）・文字 16（SP 14）オレンジ・右に chevron 20px */
.page-case-index .case-pills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.page-case-index .case-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 16px 10px 20px; background: var(--c-white); border-radius: 29px; color: var(--c-orange); font-family: var(--f-round); font-size: 14px; letter-spacing: 0.02em; line-height: 1.5; transition: transform .2s cubic-bezier(0, 0, .99, .98); }
.page-case-index .case-pill-label { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.page-case-index .case-pill-ic { width: 20px; height: 20px; color: var(--c-orange); flex: none; }
@media (hover: hover) and (pointer: fine) { .page-case-index .case-pill:hover { transform: translateY(-2px); } }
@media (min-width: 600px) {
  .page-case-index .case-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .page-case-index .case-pill { font-size: 14px; padding-left: 20px; }
}
/* 768〜1079（展開した折りたたみ）: 2 列のまま文字 16・左 24（841 で 1 列 約 380px。最長ラベル 15 字が 1 行に入る） */
@media (min-width: 768px) {
  .page-case-index .case-pills { gap: 16px; }
  .page-case-index .case-pill { font-size: 16px; padding: 10px 20px 10px 24px; }
}
@media (min-width: 1080px) {
  .page-case-index .case-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .page-case-index .case-pill { padding: 10px 24px 10px 32px; }
}

/* ---------- 下部ナビ 4 カード（フッター直前。部品は components.css の .bnav） ---------- */
.case-bnav { padding-top: 80px; padding-bottom: clamp(48px, 6vw, 96px); }
@media (min-width: 768px) { .case-bnav { padding-top: 96px; } }
/* 1080〜: 参照はカード下端から口の上端まで 62（フッター側の margin-top 64 で足りる）→ 下余白 0 */
@media (min-width: 1080px) { .case-bnav { padding-top: 104px; padding-bottom: 0; } }

/* ---------- 〜599: 参照 440/393/344 の実測に合わせる（capture/sp-compare/main__case 2026-09-24。3 幅とも同じ値） ----------
   写真: 上端 y88（新 84）→ padding-top 8。見出し: 写真の下端 → 英字の字頭 15〜16、英字は 15px/0.23em（参照「SEARCH by CASE」177 幅・字高 11。
   Inter 14px/0.16em だと 152 幅）、中央寄せの字間補正なし（参照の中心は W/2 − 1.7）、英字の字頭 → H1 の字頭 28、H1 の字の下端 → リードの字頭 83。
   リード 19.5px・行送り 34.5（440 で 1 行 20 字）。本文 13px・行送り 28.6・#271200・1 行 29 字（字間 0.055em）。リード → 本文 69、本文 → H2 の罫 105。
   H2: 左罫線は 4×32 を 1 行目（行送り 41）の中央に、文字は罫の 16 右、罫 → 点線 22、点線 → ピル 32。グループ間はピル下端 → 罫の上端 84（2026-09-26 静止状態で再測。旧「1 → 2 だけ 165」は出現アニメ前の写り）。
   ピル: 高さ 52・間隔 16・文字 13px（左 17）・山形 18px（右 12）。下部ナビ: 170 高・角丸 8・アイコン 80・文字 18px・右下の四角 32×30（角丸なし）・山形 15px。
   ナビ下端 → 口の上端 107（2026-09-26 静止状態で再測。フッターの margin-top −26 と合わせて 129） */
@media (max-width: 599px) {
  .page-case-index .case-hero { padding-top: 8px; }
  /* 2 周目: リード・本文の字頭が参照より 3 上（440/344: 506 / 503・644 / 641）→ 下余白 63 → 66。
     英字は 16px・字間 0.22em・行の箱 25.5（参照 440「SEARCH by CASE」129〜306・字高 16。15px/0.23em は 133〜302・字高 14） */
  /* 2026-09-29 現行（390 WebKit・344）の計算値に合わせ直し: 英字 16px/22.4・字間 0.25em・字下げ 0.25em（字の範囲 x105 幅 183。旧 16px/25.5・0.22em・字下げ 0 は x110 幅 174）、
     リード 20px/34・字間なし（旧 19.5px/34.5・0.02em）、本文 13px・字間 0.06em（0.78px。旧 0.055em）。英字の行の箱が 3.1 低くなるぶん、見出しの上を 8 → 10・H1 の上を −7 → −6 にして字の位置を保つ */
  .page-case-index .case-head { padding-top: 10px; padding-bottom: 66px; }
  .page-case-index .case-head .sec-head.center .sec-label { font-size: 16px; line-height: 22.4px; letter-spacing: 0.25em; text-indent: 0.25em; }   /* 共通の body.area-main .sec-head.center .sec-label（0,4,1）より強く */
  .page-case-index .case-head .sec-head > .sec-label + * { margin-top: -6px; }
  .page-case-index .case-lead { font-size: 20px; line-height: 34px; letter-spacing: normal; }
  .page-case-index .case-body { font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-case-index .case-intro { padding-bottom: 64px; }
  .page-case-index .case-outro { padding-top: 88px; }

  .page-case-index .case-group + .case-group { margin-top: 80px; }
  /* 旧: 1 → 2 だけ 160（9/24 の参照撮影は出現アニメ前で、画面外の要素が 80 下にずれて写っていた。2026-09-26 現行を最後までスクロールして出現アニメを終えた状態（静止状態）で実測: どのグループ間も 80） */
  .page-case-index .case-group .bar-head { position: relative; border-left: 0; padding-left: 20px; font-size: 22px; line-height: 38px; margin-bottom: 16px; text-wrap: wrap; }
  .page-case-index .case-group .bar-head::before { content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 30px; background: var(--c-orange); }
  .page-case-index .case-group .case-group-rule { margin-bottom: 32px; }

  .page-case-index .case-pills { gap: 16px; }
  /* 2 周目: ピルは 13px・行送り 1.7（22.1）＋上下 15 = 52.1。参照の送りは 68.08（40 本で 2655）、新は 68 ちょうどで 40 本目が 3 上がっていた */
  .page-case-index .case-pill { min-height: 52px; padding: 15px 12px 15px 17px; border-radius: 26px; font-size: 13px; line-height: 1.7; }
  .page-case-index .case-pill-ic { width: 18px; height: 18px; }

  .page-case-index .case-bnav { padding-top: 80px; padding-bottom: 129px; }   /* 2026-09-26 現行を最後までスクロールして出現アニメを終えた状態（静止状態）で実測: ナビ下端 → 口の上端 107（393。旧 50 は 28 で詰まっていた。フッターの margin-top −26 と足す） */
  /* 下部ナビのカード・アイコン・文字・橙ボタンは components.css の共通値（〜599）に任せる（旧 margin-top 3 は文字が 3 下がっていた） */
}

/* ---------- 600〜1079: 現行 urala.com の実測に合わせる（2026-09-28。673 / 841 / 968 を下まで送って出現アニメを終えてから測った） ----------
   現行（STUDIO）は 541 から上が PC と同じ書体・大きさで、910 までは左右 40・一覧 2 列・SP 写真、912 からは左右 56・一覧 3 列・PC 写真（3:1 波形）。
   旧（768〜1079 は H1 36・見出し 28・ピル 16px・リード 22 前後、600〜767 はピル 14px）は現行より一回り小さく、下部ナビのアイコンも 64 で現行 99×73 の 2/3 だった。
   縦の並び（3 幅とも同じ）: 写真の上端 120（main の上端 90 から 30）→ 20 → 英字 18px/25.2・字間 0.25em → 0 → H1 40px/68・字間 0.06em → 72
     → リード 26px/1.7・中央・最大 710 → 36 → 本文 16px/2.2・字間 0.06em・最大 804 → 80（ここにキーワード欄を挟む）→ 見出し 32px/1.7（左罫 4 ＋ 16）→ 16 → 点線 → 32 → ピル
     ピル: 高さ 59・角丸いっぱい・左 33・17px/1.7・字間 0.02em、縦 20・横 16。グループ間 80。最後のピル → 下部ナビ 104
     下部ナビ: 高さ 218・角丸 16・上 48・アイコン 99×73・文字 20px/1.7（アイコンの 8 下）、〜911 は 2 列（間 20）、912〜 は 4 列（間 16）。
   768〜911 の写真は現行どおり SP 写真の 3:2（841 で 506 高。2026-09-29 に 16:9 の切り抜きから戻した） */
@media (min-width: 600px) and (max-width: 1079px) {
  .page-case-index #main { --gutter: 40px; }
  .page-case-index .case-hero { padding-top: 30px; }
  .page-case-index .case-head { padding-top: 20px; padding-bottom: 72px; }
  .page-case-index .case-head .sec-head { gap: 0; }
  .page-case-index .case-head .sec-head.center .sec-label { font-size: 18px; line-height: 25.2px; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-case-index .case-head .sec-head > .sec-label + * { margin-top: 0; }
  .page-case-index .case-head h1.sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }

  .page-case-index .case-intro { padding-bottom: 80px; }
  .page-case-index .case-intro .container-read, .page-case-index .case-outro .container-read { width: min(100% - var(--gutter) * 2, 804px); }
  /* 行は均さず、文節でも折らない（現行どおり 1 行目を最大 710 まで詰める。841 で 1 行目「…気になる症状から適切な」幅 702。旧 balance＋auto-phrase は 572 に縮んでいた） */
  .page-case-index .case-lead { max-width: 710px; margin-inline: auto; text-align: center; font-size: 26px; line-height: 1.7; letter-spacing: normal; text-wrap: wrap; word-break: normal; }
  .page-case-index .case-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-case-index .case-outro { padding-top: 104px; }
  .page-case-index .case-find-box { margin-bottom: 80px; }

  .page-case-index .case-group + .case-group { margin-top: 80px; }
  .page-case-index .case-group .bar-head { padding-left: 16px; margin-bottom: 16px; font-size: 28px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-case-index .case-group .case-group-rule { margin-bottom: 32px; }
  .page-case-index .case-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .page-case-index .case-pill { min-height: 59px; padding: 14px 21px 14px 33px; gap: 10px; border-radius: 30px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; }
  .page-case-index .case-pill-ic { width: 26px; height: 26px; }
  .page-case-index .case-pill-seen { width: 22px; height: 22px; }
  .page-case-index .case-pill-seen .icon { width: 15px; height: 15px; }

  .page-case-index .case-bnav { padding-top: 104px; padding-bottom: 106px; }   /* 下部ナビの下端 → 口の上端 120（現行 673/841。968 は 124）。フッター側の上の余白 14 と足す */
  .page-case-index .bnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .page-case-index .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 48px 12px 0; border-radius: 16px; }
  .page-case-index .bnav-ic { width: 99px; height: 73px; }
  .page-case-index .bnav-label { margin-top: 8px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-case-index .bnav-btn { width: 44px; height: 40px; border-radius: 4px 0 16px 0; }
}
@media (min-width: 912px) and (max-width: 1079px) {
  .page-case-index #main { --gutter: 56px; }
  .page-case-index .case-hero-img { aspect-ratio: 2340 / 772; border-radius: 0; }
  .page-case-index .case-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-case-index .bnav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- 1080〜: Figma pc/case（490:1687・1366 幅）に合わせる（2026-09-25） ----------
   縦の並び（1366 実測。ヘッダー 89 の直下から）:
     写真 y151（ヘッダー下 62）1170×386 → 20 → 英字ラベル 18px/1.7・字間 25%（Roboto）→ 0 → H1 40px/1.7・字間 6% → 75
     → リード 26px/1.7・字間 6%・中央（PC/h3 オレンジ）→ 37 → 本文 804 幅 16px/2.2・字間 6% #271200（PC/p-リード文用）→ 96
     → グループ: 見出し 32px/1.7（PC/h2 #271200）＋左罫 4×54（罫の左端 → 字 20）→ 16 → 点線 → 32 → リンクピル
       ピル（anchor link _btn 482:3173）: 3 列 368×56・横 16・縦 20、白・角丸 100、左 32／右 18、17px・字間 2%（PC/p_big）オレンジ、右に 32 の枠＋山形 13×7
     → グループ間 80（ピル下端 → 次の見出し）→ 最後のピル → 下部ナビ 105 → 下部ナビ → フッター（口の上端）126（フッターの margin-top 64 と足す） */
@media (min-width: 1080px) {
  .page-case-index .case-hero { padding-top: 62px; }
  .page-case-index .case-head { padding-top: 20px; padding-bottom: 75px; }
  .page-case-index .case-head .sec-head { gap: 0; }
  .page-case-index .case-head .sec-label { font-size: 18px; line-height: 1.7; letter-spacing: 0.25em; }
  .page-case-index .case-head h1.sec-title { font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; }

  .page-case-index .case-intro { padding-bottom: 96px; }
  .page-case-index .case-intro .container-read, .page-case-index .case-outro .container-read { width: min(100% - var(--gutter) * 2, 804px); }
  .page-case-index .case-lead { max-width: none; font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; text-wrap: balance; word-break: auto-phrase; }   /* 2 行を文節で折る（Figma のリードは読点の後で改行した 2 行） */
  .page-case-index .case-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-case-index .case-outro { padding-top: 110px; }

  .page-case-index .case-group + .case-group { margin-top: 80px; }
  .page-case-index .case-group .bar-head { padding-left: 16px; margin-bottom: 16px; font-size: 28px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-case-index .case-group .case-group-rule { margin-bottom: 32px; }

  .page-case-index .case-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  /* 山形: 24 枠の 6×12 を 26px で描くと 6.5×13。Figma の 32 枠の中央（右端から 18 + 16 = 34）に置くため右の余白は 21 */
  .page-case-index .case-pill { min-height: 56px; padding: 12px 21px 12px 32px; gap: 10px; border-radius: 28px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; }
  .page-case-index .case-pill-ic { width: 26px; height: 26px; }

  .page-case-index .case-bnav { padding-top: 105px; padding-bottom: 62px; }
  /* 下部ナビ（Figma pc/case の Page Link 503:4086。about.css・one-minute.css と同じ合わせ込み）: 272×218・角丸 16、アイコン上 51・100×72、
     文字 20px/1.7・字間 6%（上 137）、右下の橙 44×40。2026-09-25 現行照合で、このページだけ components.css の既定（212 高・アイコン 64・文字 18）のままだった */
  .page-case-index .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 51px 12px 0; border-radius: 16px; }
  .page-case-index .bnav-ic { width: 100px; height: 72px; }
  .page-case-index .bnav-label { margin-top: 14px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-case-index .bnav-btn { width: 44px; height: 40px; border-radius: 4px 0 16px 0; }
}

/* ============ ② 問いと答え（#case-ask。assets/js/case-index.js の 4)）============
   2026-09-29 作り直し（ユーザー指示「急にバッと展開されるので違和感がある。枠組みを作って、その中で簡単に調べられるような表示に」）。
   旧: タイルを押すと下に答えのピルがいきなり全部並び、1440 で枠が 427 → 1577（歯 42 件）、390 で 440 → 3512 に一瞬で伸びていた。
   新: 白い枠 .case-ask-frame 1 つ（細い線 --c-line・角丸 24。左右・上端の色帯は使わない）の中で「1 どこ → 2 どうなって → 答え」が完結する。
   1080〜: 2 列。左 .case-ask-side に 1 の場所タイル 9 個（3×3）と 2 の困りごと 11 個（どちらも畳まない）、右に答えの欄 .case-ask-result。
           右の欄は contain: size で左の列の高さに合わせ、中の .case-ask-scroll だけを縦に送る（選んでも枠の大きさは変わらない）。
           送れる印はスクロールバーではなく下端のぼかし（.is-more。base.css の決まりでバーは隠す。目次のシートと同じ見せ方）。
   〜1079: 縦に積む。選ぶと 1 のタイルは「✓ 歯 ×」の 1 行に畳み、2 と答えが開く（.case-fold の grid-template-rows 0fr ⇄ 1fr を 0.26 秒）。
           答えは先頭 6 件（9 件以上のとき）＋「残り N 件を見る」。押すとその場で開く（高さは case-index.js が 0.26 秒で動かす）。
   動きは html.mo の下だけ（reduce・JS なし・検査用のブラウザでは即時）。:hover は (hover: hover) and (pointer: fine) の中だけ。 */
.case-ask-box { margin: 0; }
.case-ask-frame { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-l); padding: 20px 12px 22px; }
@media (min-width: 360px) { .case-ask-frame { padding: 22px 16px 24px; } }
@media (min-width: 600px) { .case-ask-frame { padding: 32px 28px 34px; } }

/* 1・2 の見出し（左寄せ。番号は橙の丸） */
.case-ask-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--f-round); font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: 0.06em; color: var(--c-ink-deep); }
.case-ask-h:focus { outline: none; }
.case-ask-no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); font-family: var(--f-en); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: 0; }
@media (min-width: 600px) { .case-ask-h { font-size: 22px; margin-bottom: 18px; } .case-ask-no { width: 32px; height: 32px; font-size: 17px; } }

/* 畳む箱（〜1079）。中身は .case-fold-in。外へ 6px はみ出してよい余白（フォーカスの枠・ピルの光）を margin と padding で持つ */
.case-fold { display: grid; grid-template-rows: 1fr; }
.case-fold > .case-fold-in { min-width: 0; min-height: 0; overflow: clip; margin: -6px; padding: 6px; }
.case-fold.is-shut { grid-template-rows: 0fr; }
.case-fold.is-shut > .case-fold-in { visibility: hidden; }
/* 動かすのは html.mo の下だけ: 行の高さ 0.26 秒＋中身の不透明度（reduce・JS の演出なしでは即時で、透明な物を残さない） */
html.mo .case-fold { transition: grid-template-rows .26s cubic-bezier(.4, 0, .2, 1); }
html.mo .case-fold > .case-fold-in { transition: opacity .22s ease .04s, visibility 0s linear 0s; }
html.mo .case-fold.is-shut > .case-fold-in { opacity: 0; transition: opacity .16s ease, visibility 0s linear .26s; }
@media (prefers-reduced-motion: reduce) { .case-fold, .case-fold > .case-fold-in { transition: none !important; } }

/* 1 場所タイル: 薄い地（--c-cream）・角丸 16・絵の下に名前（〜767）。名前は「・」の後でだけ折る（.case-tile-seg） */
.case-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.case-tiles > li { display: flex; min-width: 0; }
.case-tile { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; min-height: 88px; padding: 10px 2px; border: 0; border-radius: var(--r-m); background: var(--c-cream); color: var(--c-ink-deep); font-family: var(--f-round); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; text-align: center; cursor: pointer; transition: transform .2s cubic-bezier(0, 0, .99, .98), box-shadow .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.case-tile:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.case-tile-ic { flex: none; display: block; width: 48px; aspect-ratio: 272 / 238; }
.case-tile-ic svg, .case-tile-ic img { display: block; width: 100%; height: 100%; }
.case-tile-label { display: block; min-width: 0; }
.case-tile-seg { display: inline-block; }
/* 選んだタイル: 橙の枠（内側 2px）＋薄いピーチの地＋左上に ✓（色だけに頼らない） */
.case-tile[aria-pressed="true"] { background: var(--c-peach-soft); box-shadow: inset 0 0 0 2px var(--c-orange); }
.case-tile-mk { position: absolute; top: 6px; left: 6px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); }
.case-tile-mk .icon { width: 15px; height: 15px; }
.case-tile[aria-pressed="true"] .case-tile-mk { display: inline-flex; }
@media (min-width: 360px) {
  .case-tiles { gap: 8px; }
  .case-tile { min-height: 96px; font-size: 14px; }
  .case-tile-ic { width: 56px; }
}
@media (min-width: 600px) {
  .case-tiles { gap: 10px; }
  .case-tile { min-height: 116px; padding: 12px 6px; gap: 6px; font-size: 16px; }
  .case-tile-ic { width: 68px; }
}
/* 768〜: 絵の左・名前の右の横長（841×701 で 1 の高さを抑える）。1 マス 202 以上なので「インプラント」も 1 行 */
@media (min-width: 768px) {
  .case-tile { flex-direction: row; justify-content: flex-start; min-height: 76px; padding: 8px 10px 8px 12px; gap: 10px; text-align: left; font-size: 17px; }
  .case-tile-ic { width: 56px; }
}
/* 1080〜: 左の列（1080 で 514・1440 で 594）の 3 列。1 マス 164 以上 */
@media (min-width: 1080px) {
  .case-tiles { gap: 10px; }
  .case-tile { min-height: 68px; padding: 8px 8px 8px 10px; gap: 8px; font-size: 15px; }
  .case-tile-ic { width: 46px; }
}
@media (min-width: 1280px) {
  .case-tile { font-size: 16px; padding-left: 12px; gap: 10px; }
  .case-tile-ic { width: 52px; }
}

/* 選んだ後の 1 行（〜1079 だけ。場所・困りごと。押すと選び直し） */
.case-pick-row { display: flex; margin: 0; padding-bottom: 4px; }
.case-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 6px 14px 6px 8px; border: 0; border-radius: var(--r-pill); background: var(--c-orange); color: var(--c-white); font-family: var(--f-round); font-weight: 500; font-size: 16px; line-height: 1.4; letter-spacing: 0.04em; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.case-pick:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.case-pick-mk { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-white); color: var(--c-orange); }
.case-pick-mk .icon { width: 20px; height: 20px; }
.case-pick-label { min-width: 0; }
.case-pick-x { flex: none; display: inline-flex; width: 22px; height: 22px; margin-left: 4px; }
.case-pick-x .icon { width: 100%; height: 100%; }
@media (min-width: 600px) { .case-pick { min-height: 52px; font-size: 17px; padding-right: 18px; } }

/* 2 どうなっていますか（困りごと）: 白地・橙の枠の丸いボタンを左から折り返す（横スクロールにしない）。いまの場所で 0 件のものは出さない（どの幅でも） */
.case-ask-trouble { padding-top: 22px; }
.case-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.case-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 5px 6px 5px 14px; border: 1.5px solid var(--c-orange); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-orange); font-family: var(--f-round); font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: 0.02em; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; }
.case-chip:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.case-chip-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--c-peach-soft); font-family: var(--f-en); font-size: 13px; letter-spacing: 0; color: var(--c-orange); }
.case-chip[aria-pressed="true"] { background: var(--c-orange); color: var(--c-white); }
.case-chip[aria-pressed="true"] .case-chip-n { background: var(--c-white); }
.case-chip-label { min-width: 0; }
/* いまの場所で 0 件の困りごとは出さない（唇なら 11 個中 8 個が 0 件）。Tab でも止まらない（display:none。button も disabled）。
   2026-09-29 ユーザー指示「PC でも選べる困りごとだけ」で 1080〜 もこれに（以前の 1080〜 は薄くして「0」と残し、並びと枠の高さを保っていた。
   今の 1080〜 は欄の高さを下の .case-chips-sizer で保ち、増減の動きは case-index.js の flipChips） */
.case-chips > li.is-zero { display: none; }
/* 1080〜 の 2 の欄の高さの型（case-index.js の makeSizer が作る 11 個全部の写し。見えない・読み上げない・押せない）。〜1079 は使わない */
.case-chips-sizer { display: none; }
.case-chip-ghost { position: absolute; margin: 0; pointer-events: none; }   /* 消えるボタンの写し（1080〜 だけ作る。流れに入れない） */
/* 〜599: 13px・余白を詰める（390 で 8 段 → 7 段）。2 列の格子も試したが、344 で「生えてこな/い」「検診を受けた/い」と語の途中で折れたのでやめた */
@media (max-width: 599px) {
  .case-chip { gap: 5px; padding: 5px 5px 5px 12px; font-size: 13px; letter-spacing: 0.01em; }
  .case-chip-n { min-width: 24px; height: 24px; font-size: 12px; }
}
@media (min-width: 600px) {
  .case-ask-trouble { padding-top: 30px; }
  .case-chips { gap: 10px 8px; }
  .case-chip { min-height: 48px; padding: 6px 8px 6px 18px; font-size: 16px; }
}

/* 答え（〜1079 は 2 の下、1080〜 は右の列）: 薄いピーチの面に、③ と同じ白いピル */
.case-ask-result { margin-top: 20px; padding: 16px 12px 18px; background: var(--c-peach-soft); border-radius: var(--r-m); }   /* 上の間は margin（畳んだとき一緒に 0 になる。.case-fold-in の padding だと残る） */
.case-ask-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0 0 12px; padding-left: 4px; font-family: var(--f-round); font-weight: 500; font-size: 15px; line-height: 1.6; letter-spacing: 0.04em; color: var(--c-ink-deep); }
.case-ask-count-n { white-space: nowrap; }
.case-ask-count-n[hidden] { display: none; }
.case-ask-n { font-family: var(--f-en); font-weight: 500; font-size: 24px; letter-spacing: 0; color: var(--c-orange); margin-right: 2px; }
.case-ask-scroll { position: relative; }
/* 〜1079: 先頭 6 件だけ（.is-short の間）。「残り N 件を見る」で残りを出す */
.case-ask-hits.is-short > li.is-extra { display: none; }
.case-ask-more, .case-ask-tolist { display: flex; justify-content: center; margin: 14px 0 0; }
.case-ask-more[hidden], .case-ask-tolist[hidden], .case-ask-hits[hidden] { display: none; }
.page-case-index .case-ask-more-btn, .page-case-index .case-ask-all { min-height: 48px; padding: 8px 48px 8px 28px; font-size: 15px; cursor: pointer; }
.page-case-index .case-ask-more-btn .btn-arrow, .page-case-index .case-ask-all .btn-arrow { right: 20px; }
.case-ask-tolist:first-child, .case-ask-hits[hidden] + .case-ask-tolist { margin-top: 0; }
/* 〜1079 の「すべて」で困りごとがまだのとき（.is-intro）: 面は出さず ③ への案内だけ（代表的な症状の並びは 1080〜 の右の欄だけ） */
@media (max-width: 1079px) {
  .case-ask-result.is-intro { padding: 0; background: none; }
  .case-ask-result.is-intro .case-ask-count, .case-ask-result.is-intro .case-ask-scroll { display: none; }
}
@keyframes case-swap { from { opacity: 0; translate: 0 6px; } }
html.mo .case-ask-hits.is-swap { animation: case-swap .24s var(--mo-ease) backwards; }
@media (min-width: 600px) {
  .case-ask-result { margin-top: 28px; padding: 22px 20px 24px; }
  .case-ask-count { font-size: 16px; }
  .case-ask-n { font-size: 26px; }
}

/* ---------- 1080〜: 2 列。左に 1・2（畳まない）、右に答えの欄（左の高さに合わせて固定・中で送る） ---------- */
@media (min-width: 1080px) {
  .case-ask-frame { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: stretch; padding: 36px 36px 36px 40px; }
  .case-ask-h { font-size: 20px; margin-bottom: 16px; }
  .case-ask-no { width: 30px; height: 30px; font-size: 16px; }
  .case-ask-box [data-fold^="pick-"] { display: none; }
  /* 畳む箱は常に開いたまま（html.mo の下の is-shut より強く） */
  .case-ask-box .case-fold, .case-ask-box .case-fold.is-shut { grid-template-rows: 1fr; }
  .case-ask-box .case-fold > .case-fold-in, html.mo .case-ask-box .case-fold.is-shut > .case-fold-in { visibility: visible; opacity: 1; overflow: visible; margin: 0; padding: 0; }
  html.mo .case-ask-box .case-fold, html.mo .case-ask-box .case-fold > .case-fold-in, html.mo .case-ask-box .case-fold.is-shut > .case-fold-in { transition: none; }
  .case-ask-trouble { padding-top: 28px; }
  .case-chips { gap: 8px 6px; }
  .case-chip { min-height: 44px; padding: 5px 6px 5px 14px; font-size: 15px; }
  /* 2 の欄: 見える並び（.case-chips）と 11 個全部の写し（.case-chips-sizer。visibility: hidden）を同じ升に重ね、高さは写しで決める
     ＝ 0 件の困りごとを隠して並びが短くなっても、白い枠の高さ（1080 で 618・1280〜 で 632）と右の欄の位置は変わらない。
     見える並びは上に寄せる（伸ばすと折り返しの行の間が広がる）。消えるボタンの写し .case-chip-ghost は前の位置に 0.14 秒だけ重ねる（case-index.js） */
  .case-fold[data-fold="chips"] > .case-fold-in { display: grid; position: relative; }
  .case-fold[data-fold="chips"] .case-chips { grid-area: 1 / 1; align-self: start; }
  .case-chips-sizer { display: flex; grid-area: 1 / 1; visibility: hidden; pointer-events: none; }

  /* 右の列: 自分の中身では高さを決めない（contain: size）→ 行の高さ＝左の列 */
  .case-fold[data-fold="result"] { contain: size; min-height: 420px; }
  .case-fold[data-fold="result"] > .case-fold-in { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .case-ask-result { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-top: 0; padding: 22px 10px 18px 18px; border-radius: var(--r-m); }
  .case-ask-count { flex: none; margin: 0 8px 10px 0; font-size: 16px; }
  .case-ask-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: auto; margin: 0 0 0 -6px; padding: 6px 12px 6px 6px; }
  .page-case-index .case-ask-hits { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .page-case-index .case-ask-hits .case-pill { min-height: 52px; padding: 10px 16px 10px 22px; font-size: 16px; }
  .page-case-index .case-ask-hits .case-pill-ic { width: 22px; height: 22px; }
  .page-case-index .case-ask-hits .case-pill.is-back::after { border-radius: 31px; }
  .case-ask-hits.is-short > li.is-extra { display: list-item; }
  .case-ask-more { display: none; }
  .case-ask-tolist { flex: none; margin-top: 12px; padding-right: 8px; }
  /* 下へ続くときだけ下端をぼかす（押す邪魔はしない。一番下まで送ると消える） */
  .case-ask-scroll::after { content: ""; position: sticky; bottom: -6px; z-index: 1; display: block; height: 44px; margin: -44px -12px -6px -6px; background: linear-gradient(transparent, var(--c-peach-soft) 85%); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
  .case-ask-scroll.is-more::after { opacity: 1; }
}
@media (min-width: 1280px) {
  .case-ask-frame { padding: 40px 40px 40px 44px; gap: 44px; }
  .case-ask-h { font-size: 22px; }
  .case-ask-result { padding: 24px 12px 20px 22px; }
  .case-ask-count { font-size: 17px; }
  .case-ask-n { font-size: 28px; }
  .page-case-index .case-ask-hits .case-pill { font-size: 17px; }
}

@media (hover: hover) and (pointer: fine) {
  .case-tile:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow); }
  .case-tile[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--c-orange), var(--lift-shadow); }
  .case-chip:not(:disabled):hover { background: var(--c-orange); color: var(--c-white); }
  .case-chip:not(:disabled):hover .case-chip-n { background: var(--c-white); }
  .case-pick:hover { background: var(--c-orange-3); }
}

/* ============ 演出（docs/MOTION.md。属性は templates/main/case-index.mjs）============
   html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。動かすのは opacity / translate / scale / clip-path だけ。
   ヒーロー写真（ml-window）: 角丸の窓が内側から開き、写真は 1.08 → 1 にゆっくり落ち着く。枠（picture）は html.mo の間 overflow:clip（静止の見た目は同じ）。
   グループ見出し（bar）・点線（wipe）・ピル（stagger up）・下部ナビは components の既定のまま */
@keyframes ml-window { from { opacity: 0; clip-path: inset(7% 6% 7% 6% round 48px); } 35% { opacity: 1; } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes ml-settle { from { scale: 1.08; } }
html.mo .case-hero picture[data-mo="ml-window"] { overflow: clip; }
html.mo .case-hero picture[data-mo="ml-window"].is-in { animation-name: ml-window; animation-duration: calc(var(--mo-dur) * 1.8); }
/* 写真の角丸・波形は画像に焼き込み（透過）なので、拡大は窓と同じ時間で終える（窓の clip が外れた後に拡大が残ると角が四角く見える） */
html.mo .case-hero picture[data-mo="ml-window"].is-in img { animation: ml-settle calc(var(--mo-dur) * 1.8) var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* ============ キーワードで探す・閲覧済みの印・戻ったときの光（assets/js/case-index.js）============
   .case-find-box は hidden で書き出し、case-index.js が外す（JS が無いときは一覧だけ）。#case-search の外枠は右下の目次のリンク先なので常にある。
   入力欄は 16px（iOS が入力時に拡大しない大きさ）・高さ 56・タップ標的は 44 以上。:hover は hover.css と同じく (hover: hover) and (pointer: fine) の中だけ。
   結果は薄いピーチの面に同じ白いピル（列数は一覧と同じ 1 / 2 / 3 列）。色帯は使わない */
.case-find { scroll-margin-top: 24px; }
.case-find-box { margin-bottom: 56px; }
.case-find-title { font-family: var(--f-round); font-weight: 500; font-size: 18px; line-height: 1.6; letter-spacing: 0.06em; color: var(--c-ink-deep); text-align: center; margin-bottom: 12px; }
.case-find-form { max-width: 640px; margin-inline: auto; }
.case-find-field { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 4px 0 18px; background: var(--c-white); border: 2px solid var(--c-orange); border-radius: var(--r-pill); transition: box-shadow .2s ease; }
.case-find-field:focus-within { box-shadow: 0 0 0 4px var(--c-peach); }
.case-find-ic { flex: none; width: 22px; height: 22px; color: var(--c-orange); }
.case-find-input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 6px; border: 0; border-radius: 0; background: transparent; font-family: var(--f-body); font-size: 16px; letter-spacing: 0.02em; color: var(--c-ink-deep); -webkit-appearance: none; appearance: none; outline: none; }
.case-find-input::placeholder { color: var(--c-ink-soft); opacity: .72; }
.case-find-input::-webkit-search-cancel-button, .case-find-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.case-find-clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-ink-soft); cursor: pointer; }
.case-find-clear[hidden] { display: none; }
.case-find-clear .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .case-find-clear:hover { background: var(--c-peach-soft); color: var(--c-orange); } }

/* 閲覧済みの件数と「印を消す」（印が 1 つ以上あるときだけ） */
.case-find-seen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; max-width: 640px; margin: 8px auto 0; font-size: 13px; line-height: 1.6; color: var(--c-ink-soft); }
.case-find-seen[hidden] { display: none; }
.case-find-seen-txt { display: inline-flex; align-items: center; gap: 6px; }
.case-find-reset { min-height: 44px; padding: 0 8px; border: 0; background: transparent; font-family: var(--f-body); font-size: 13px; color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .case-find-reset:hover { text-decoration: none; } }

/* 結果 */
.case-find-result { margin-top: 20px; padding: 20px 16px 24px; background: var(--c-peach-soft); border-radius: var(--r-l); }
.case-find-result[hidden] { display: none; }
.case-find-count { font-family: var(--f-round); font-size: 15px; line-height: 1.7; letter-spacing: 0.04em; color: var(--c-ink-deep); text-align: center; overflow-wrap: anywhere; margin-bottom: 16px; }
.case-find-count-tail { display: inline-block; }   /* 「検索結果 N 件」を 1 かたまりで折り返す */
.case-find-none { display: flex; justify-content: center; }
.case-find-none[hidden] { display: none; }
.page-case-index .case-find-chat { min-height: 52px; padding: 10px 52px 10px 36px; font-size: 16px; }
.page-case-index .case-find-chat .btn-arrow { right: 22px; }
/* 急ぎ（強い痛み・顔の腫れ・止まらない出血・ぶつけた）のときだけ: 結果の上に電話 */
.case-find-urgent { max-width: 640px; margin: 0 auto 16px; padding: 16px 18px; background: var(--c-white); border-radius: var(--r-m); font-size: 14px; line-height: 1.75; color: var(--c-ink); }
.case-find-urgent[hidden], .case-find-breath[hidden] { display: none; }
.case-find-urgent-title { font-family: var(--f-round); font-size: 16px; color: var(--c-orange); margin-bottom: 4px; }
.case-find-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 20px; border: 2px solid var(--c-orange); border-radius: var(--r-pill); font-family: var(--f-en); font-size: 18px; letter-spacing: 0.04em; color: var(--c-orange); }
.case-find-tel-ic { width: 18px; height: 18px; }
.case-find-breath { margin-top: 8px; font-size: 13px; color: var(--c-ink-deep); }

@media (min-width: 768px) {
  .case-find-box { margin-bottom: 72px; }
  .case-find-title { font-size: 20px; }
  .case-find-result { margin-top: 24px; padding: 24px 24px 28px; }
  .case-find-count { font-size: 16px; }
}
@media (min-width: 1080px) {
  .case-find-box { margin-bottom: 88px; }
  .case-find-title { font-size: 22px; margin-bottom: 16px; }
  .case-find-result { padding: 32px 32px 36px; }
  .case-find-count { font-size: 17px; margin-bottom: 20px; }
}

/* 閲覧済みの印: 左に小さなチェック（薄いピーチの丸）＋文字をオレンジから焦げ茶へ。読み上げは .sr-only の「（閲覧済み）」 */
.page-case-index .case-pill { position: relative; }
.page-case-index .case-pill-seen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -4px; border-radius: 50%; background: var(--c-peach-soft); color: var(--c-orange); }
.page-case-index .case-pill-seen .icon { width: 14px; height: 14px; }
/* 丸の中のチェックは動かさない。hover.css の「.case-pill:hover .icon（右の山形を 3px 右へ）」がこの印の svg にも掛かり、
   押した瞬間（ポインタがピルの上にある間）だけ印が丸の右へ 3px ずれていた（1080〜 の丸 22 で中心の差 3.4px）。戻った後はポインタが外れているので中央に見えていた。
   (0,4,0) で hover.css の (0,3,0) より強くする。印の絵そのものの中心は case-index.js の CHECK（縦横とも 24 枠の中央 12）で合わせてある */
.page-case-index .case-pill .case-pill-seen .icon { transform: none; transition: none; }
.page-case-index .case-pill.is-seen { color: var(--c-ink-soft); }
.page-case-index .case-pill.is-seen .case-pill-ic { color: var(--c-peach); }
.case-find-seen-mk { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-white); color: var(--c-orange); }
.case-find-seen-mk .icon { width: 12px; height: 12px; }
@media (max-width: 599px) { .page-case-index .case-pill-seen { width: 18px; height: 18px; } .page-case-index .case-pill-seen .icon { width: 12px; height: 12px; } }
@media (min-width: 1080px) { .page-case-index .case-pill-seen { width: 22px; height: 22px; } .page-case-index .case-pill-seen .icon { width: 15px; height: 15px; } }

/* 戻ったとき: さっき押したピルの周りを 2 秒ほど、やわらかく 2 回光らせる（動かすのは ::after の opacity だけ。reduce では光らせず位置だけ） */
@keyframes case-back-glow { 0% { opacity: 0; } 22% { opacity: 1; } 50% { opacity: .35; } 74% { opacity: 1; } 100% { opacity: 0; } }
.page-case-index .case-pill.is-back::after { content: ""; position: absolute; inset: -5px; border-radius: 34px; box-shadow: 0 0 0 3px var(--c-orange-3), 0 0 14px 3px var(--c-peach); opacity: 0; pointer-events: none; animation: case-back-glow 2s ease-in-out forwards; }
@media (max-width: 599px) { .page-case-index .case-pill.is-back::after { border-radius: 31px; } }
@media (min-width: 1080px) { .page-case-index .case-pill.is-back::after { border-radius: 33px; } }
@media (prefers-reduced-motion: reduce) { .page-case-index .case-pill.is-back::after { content: none; animation: none; } }

/* 右下の目次（shell の .fab-sheet）: 3 行目からは ③ 主なお悩みの中の 14 のまとまり（case-index.mjs の fabMenu の並び: ② → ③ → 14）。一段下げて小さく */
.page-case-index .fab-sheet-list li:nth-child(n+3) a { padding-left: 16px; font-size: 14px; min-height: 48px; }
/* 右下の丸がページの一番下（shell の html.fab-end）で横 1 列に並ぶとき、/case だけ「目次」の丸があって 3 つになり、
   900〜1079 ではフッターの「採用サイトへ」の右下に 4〜7px 重なっていた（tools/dev/fab-end-overlap.mjs の 968×1080）。
   768〜1079 は目次の丸だけ電話の丸の上（右の列の 2 段目）に置き、開いたシートはその上から出す。〜767 は 3 つ並んでも重ならない（344・390 で確認）のでそのまま */
@media (min-width: 768px) and (max-width: 1079px) {
  html.fab-end body.page-case-index .fab-toc-btn { right: var(--fab-r); bottom: calc(var(--fab-b) + var(--fab-step)); }
  html.fab-end body.page-case-index .fab-sheet { --fab-sheet-b: calc(var(--fab-b) + 2 * var(--fab-step)); }
}
/* 〜1079（丸を縦に積む幅）: ② が画面にある間とそれより上にいる間は目次の丸を出さない（さがす・電話の 2 つだけ）。
   隠すのが既定（html.case-toc-wait。case-index.mjs の本文の頭の script が付ける＝読み込み直後に一瞬出てから消えない）で、② を過ぎたら case-index.js の 5) が html.case-ask-past を付けて出す。
   丸 3 つの縦積み（60＋12＋60＋12＋60＝218）が 393 で「親知らず」「あご」の名前・「におい・乾き」のチップ・答えのピルの山形に載り、押すと丸に当たっていた（2026-09-28 照合）。
   841×701 でも右の列のタイル（すべて）の右端に載るので、縦積みの幅は全部同じにする。1080〜 は丸が画面の右下の角に横並びで、中身の外の余白に載る。
   シートを開いている間（html.fab-toc-open）は × 閉じる の丸なので隠さない。JS が無いときは印が付かないので出たまま */
@media (max-width: 1079px) {
  html.case-toc-wait:not(.case-ask-past):not(.fab-toc-open) body.page-case-index .fab-toc-btn { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* 目次のシートがまだ下へ続くとき（.is-more。case-index.js の 5)）: 下端に白のぼかしを重ねて「続きがある」と見せる（押す邪魔はしない）。
   ぼかしはシートの中で下に貼り付く（sticky）。一番下まで送ると .is-more が外れて消える＝最後の項目は隠れない */
.page-case-index .fab-sheet::after { content: ""; position: sticky; bottom: -10px; z-index: 1; display: block; height: 56px; margin: -56px -16px 0 -20px; background: linear-gradient(transparent, var(--c-white) 80%); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.page-case-index .fab-sheet.is-more::after { opacity: 1; }

/* ---------- 下部 CTA の見直し案（docs/CTA.md・templates/main/_cta.mjs。旗がオフのときは要素が無い） ----------
   c03 予約の帯 .case-rsv: 本文 3 段落の直後（本文の節は下の余白が 0 なので、帯の上に間をとる。帯の下 → 4 カードは .case-bnav の上の余白のまま）。
   c06「チャットで聞く」.case-chat: 帯の下（帯が無ければ本文の下） */
.page-case-index .case-rsv { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 0; }
.page-case-index .case-chat { padding-top: clamp(32px, 4vw, 48px); }