/* /case/ 症状詳細。templates/main/case.mjs に対応。 実測（capture/compare/case__bleeding-gums・case__bad-breath-concerns 2026-09-18 再測）: PC 1280: ヘッダー下 ≈120 でパンくず（英 18 ＋ 和 18）→ 54 → H1 40 → 100 → 「ページ内コンテンツ一覧」20 → 30 → 目次ピル 268×56（4 列基準・2 本でも同幅） → 64 → 白カード padding 96。中は ## = 左罫線 32 ＋ 点線、点線下 52 → ### = 丸ビュレット 26px オレンジ → 28 → 本文 16 行間 1.7、段落→次の ### 50 SP 393 : パンくず 16/18 → H1 28 → 56 → 一覧ラベル 20 → 24 → ピル 2 列 58 → 60 → カード padding 48 20。## 24 / ### 20 / 本文 15 841 : ヘッダー下 48 → H1 36。ピル auto-fill。カード padding 48 参照には「関連する症状」「電話 CTA」「一覧へ戻る」が無い（本文カードの直後がフッター）。電話 CTA と一覧へ戻るは content で出さない。 関連する症状は 2026-09-29 から全幅で出さない（HTML にも書かない。content/main/case.json の detail.showRelated: false）。本文カードの直後がフッター。 規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 禁止・色はトークンのみ */ /* ---------- 見出しブロック ---------- */ .case-detail-head { padding-top: 24px; padding-bottom: 56px; } @media (min-width: 768px) { .case-detail-head { padding-top: 48px; padding-bottom: 48px; } } @media (min-width: 1080px) { .case-detail-head { padding-top: 96px; padding-bottom: 64px; } } /* パンくず風ラベル（/case へ）。英字は sec-label（大文字化しない）、和文は 18px */ .case-crumb { margin-bottom: 8px; } .case-crumb-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; min-height: var(--tap); padding-block: 8px; color: var(--c-ink-soft); font-family: var(--f-round); font-size: 16px; letter-spacing: 0.06em; line-height: 1.5; } .case-crumb-link .case-crumb-en { font-size: 16px; line-height: 1.5; } .case-crumb-ja { color: var(--c-ink-soft); font-size: 16px; } @media (min-width: 768px) { .case-crumb { margin-bottom: 16px; } .case-crumb-ja { font-size: 18px; } } @media (min-width: 1080px) { .case-crumb { margin-bottom: 40px; } .case-crumb-link .case-crumb-en { font-size: 18px; } } /* H1 は SP 28 / 841 36 / PC 40（tokens の --fs-h1 は 344 でも 38 になるのでここで固定） */ .case-title { font-size: 28px; color: var(--c-orange); line-height: 1.4; } @media (min-width: 600px) { .case-title { font-size: 32px; } } @media (min-width: 768px) { .case-title { font-size: 36px; } } @media (min-width: 1080px) { .case-title { font-size: 40px; } } .case-summary { margin-top: 16px; max-width: 800px; line-height: 2; color: var(--c-ink); } /* 目次: ラベル（20 オレンジ）＋ ピル。components.css の .page-head .anchor-nav の上余白（32〜96）はラベルと二重になるので 0 に */ .case-toc { margin-top: 56px; } .case-toc-label { font-family: var(--f-round); font-size: 18px; color: var(--c-orange); letter-spacing: 0.06em; line-height: 1.5; margin-bottom: 20px; } .page-head .case-toc .anchor-nav { margin-top: 0; } .case-toc .anchor-nav ul { justify-content: flex-start; } @media (min-width: 768px) { .case-toc { margin-top: 48px; } .case-toc-label { font-size: 20px; } } @media (min-width: 1080px) { .case-toc { margin-top: 96px; } .case-toc-label { margin-bottom: 24px; } /* 参照は 4 列基準の幅（268）で 2 本でも同じ幅。本数に関係なく 25% 基準にそろえる */ .case-toc .anchor-nav li { flex: 0 1 calc(25% - 12px); min-width: 220px; } } /* ---------- 本文カード ---------- */ .case-article { padding-bottom: clamp(48px, 6vw, 96px); } .case-card { padding: 48px 20px 40px; } @media (min-width: 600px) { .case-card { padding: 48px 32px 40px; } } @media (min-width: 768px) { .case-card { padding: 48px; } } @media (min-width: 1080px) { .case-card { padding: 96px 96px 88px; } } /* ## 病名 = 左罫線（H2 32 / SP 24）＋ 点線、### = 丸ビュレット（26 / SP 20）オレンジ（見出し階層は H1 → H2 → H3 のまま、見た目だけ変える） */ .case-prose { line-height: 1.8; } .case-prose > h2 { font-size: 24px; color: var(--c-ink-deep); scroll-margin-top: 24px; margin-top: 64px; } .case-prose > h2:first-child { margin-top: 0; } .case-prose > h2::after { margin-left: -24px; margin-top: 16px; } .case-prose h3 { font-size: 20px; color: var(--c-orange); border-left: 0; padding-left: 0; margin-top: 2em; display: flex; align-items: center; gap: 10px; line-height: 1.5; } .case-prose h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-orange); flex: none; box-sizing: border-box; } .case-prose h3::after { display: none; } .case-prose h4 { color: var(--c-orange); } .case-prose p { font-size: 15px; line-height: 1.8; } .case-prose h2 + p, .case-prose h3 + p { margin-top: 1em; } .case-prose > h2 + h3 { margin-top: 1.9em; } @media (min-width: 768px) { .case-prose > h2 { font-size: 28px; margin-top: 72px; } .case-prose h3 { font-size: 22px; } .case-prose h3::before { width: 14px; height: 14px; } .case-prose p { font-size: 16px; line-height: 1.75; } } @media (min-width: 1080px) { .case-prose > h2 { font-size: 32px; margin-top: 80px; } .case-prose h3 { font-size: 26px; margin-top: 1.9em; } .case-prose h3::before { width: 14px; height: 14px; border-width: 2.5px; } .case-prose p { line-height: 1.7; } .case-prose h3 + p { margin-top: 1.7em; } } /* ---------- 自由診療（費用・治療期間/回数・リスク/副作用・税込）。insurance:false かつ入力済みのときだけ出る ---------- */ .case-selfpay { margin-top: clamp(40px, 5vw, 64px); } .case-selfpay-h { font-size: var(--fs-h3); } .case-selfpay-dl .dl-row { padding: 16px 0; } .case-selfpay-dl dt { font-size: var(--fs-body-l); color: var(--c-orange); } .case-selfpay-dl dd { color: var(--c-ink); line-height: 1.9; } .case-selfpay-list { padding-left: 1.4em; list-style: disc; } .case-selfpay-list li + li { margin-top: 0.3em; } .case-selfpay-note { margin-top: 12px; } @media (min-width: 768px) { .case-selfpay-dl .dl-row { grid-template-columns: 180px 1fr; } } /* ---------- 関連する症状（本文カードの外・カードの下。/case 一覧と同じ白いピル。見出しは読み上げ用の .sr-only だけ） ---------- Figma pc/case/01（564:4316）: カードの下端 → 120 → ピル 3 列（anchor link _btn 368×56・白・横 16）→ 165 → フッター。現行 urala.com には無い。 2026-09-29 ユーザー指示「PC の方も…今はなしで」で全幅とも HTML に出さない（content/main/case.json の detail.showRelated: false）。この節と下の 1080〜 の間隔は、 true に戻したときのために残している（1080〜 だけ表示。〜1079 は下の「関連する症状を 〜1079 で出さない」）。ピルの大きさ・文字は /case 一覧（case-index.css）と同じ値。 〜1079 の値（1 列・2 列）は 〜1079 でも出すと決めたときのために残している */ .page-case .case-pills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .page-case .case-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 15px 12px 15px 17px; background: var(--c-white); border-radius: 26px; color: var(--c-orange); font-family: var(--f-round); font-size: 13px; letter-spacing: 0.02em; line-height: 1.7; transition: transform .2s cubic-bezier(0, 0, .99, .98); } .page-case .case-pill-label { flex: 1 1 auto; min-width: 0; } .page-case .case-pill-ic { width: 18px; height: 18px; color: var(--c-orange); flex: none; } @media (hover: hover) and (pointer: fine) { .page-case .case-pill:hover { transform: translateY(-2px); } } @media (min-width: 600px) { .page-case .case-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } .page-case .case-pill { min-height: 59px; padding: 14px 21px 14px 33px; gap: 10px; border-radius: 30px; font-size: 17px; } .page-case .case-pill-ic { width: 26px; height: 26px; } } @media (min-width: 912px) { .page-case .case-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1080px) { .page-case .case-pill { min-height: 56px; padding: 12px 21px 12px 32px; border-radius: 28px; } } /* ---------- 電話 CTA ＋ 一覧へ戻る ---------- 電話カードそのもの（.case-cta-card・.case-cta-tel など）の値は components.css の「電話カード」へ移した（2026-09-30。予約の帯 c03 などほかのページでも使うため。値は同じ）。 ここに残すのは症状ページの間隔だけ。電話カードの下の文字リンク .case-cta-links は見直し案 c15（templates/main/case.mjs） */ .case-cta { padding-bottom: clamp(56px, 7vw, 120px); } .case-back { margin-top: clamp(24px, 3vw, 40px); text-align: center; } .case-back .btn { width: calc(100% - 40px); max-width: 380px; } .case-cta-links { margin-top: clamp(16px, 2vw, 24px); } @media (min-width: 768px) { .case-back .btn { width: auto; min-width: 280px; } } /* 841×701（横向き）でカード＋戻るボタンが縦に伸びすぎないよう、768〜1079 は余白を詰める（カードの内側の余白は components.css） */ @media (min-width: 768px) and (max-width: 1079px) { .case-cta { padding-bottom: 64px; } } /* 1280〜: 本文容器は原本の min(100% − 160, 1136)（一覧ページと同じ実測。tokens の 1120 は 1440 以上で 16px 足りない） */ @media (min-width: 1280px) { .page-case .container { width: min(100% - 160px, 1136px); } } /* ---------- 〜599: 参照 440/393/344 の実測に合わせる（capture/sp-compare/main__case__toothache 2026-09-24。3 幅とも同じ位置） ---------- パンくず: 英字 14px/0.18em（参照 155 幅・字高 10）＋和文 18px オレンジ（参照「症状から探す」字高 16・送り 19）を 1 行、縦は中央揃え。和文の字頭 y128・H1 の字頭 y174。 H1 → 「ページ内コンテンツ一覧」の字頭 65、ラベル → ピル 31。目次ピル: 2 列 197 幅・横の間隔 6・縦 12・高さ 56・文字 14px（左 17）・山形 22px（右 13）。 ピル下端 → 本文カード 64。カード: 角丸 16・上 48（1 つ目の罫が y553）・下 128（最後の行 → カード下端 128）。 ## = 左罫線 4×32 を 1 行目（行送り 41）の中央に、文字は罫の 16 右、行の下 16 で点線（点線は罫の左端から）。 ### = 19px・字間 0.035em（参照 送り 19.7）・丸 10px 線 3・丸 → 文字 11。本文 14px・行間 1.7・字間 0・#574D45（参照 1 行 25 字・送り 14.0）。 縦: 点線 → ### 34、### → 本文 19、本文 → 次の ### 43、本文 → 次の ## 80。 参照は本文カードの直後がフッター（カード下端 → 口 64）。電話 CTA と戻るボタンは意図的に足しているので、その下を同じ 64 にする */ @media (max-width: 599px) { .page-case .case-detail-head { padding-top: 33px; padding-bottom: 63px; } .page-case .case-crumb { margin-bottom: 10px; } .page-case .case-crumb-link { align-items: center; column-gap: 22px; } /* 2026-09-28 画素で再測（capture/ref-sp/main/case__toothache の ip393・fold344。3 語の字の範囲）: 現行 SEARCH 20〜89・by 103〜119・CASE 132〜175、和文 201〜312。 字の幅はほぼ同じ（SEARCH だけ 2 狭い）で、語の間が現行 14・13 に対して 11・10（3 ずつ狭い）、CASE → 和文も 26 に対して 24 だった（旧コメントの「字頭 20〜169・和文 201」は撮影と合わない）。 → 語の間を 0.25em（3.75px）広げ、和文との間を 20 → 22 に。直した後の実測は SEARCH 20〜87・by 102〜118・CASE 132〜174、和文 201〜311（393・344 とも。SEARCH の字幅だけ現行より 2 狭い） */ .page-case .case-crumb-link .case-crumb-en { font-size: 15px; letter-spacing: 0.16em; word-spacing: 0.25em; } .page-case .case-crumb-ja { font-size: 18px; color: var(--c-orange); letter-spacing: 0.06em; } .page-case .case-toc { margin-top: 54px; } .page-case .case-toc-label { margin-bottom: 26px; } .page-case .case-toc .anchor-nav ul { gap: 12px 6px; } /* 2026-09-26 現行（344・393・440）の DOM 実測: ピルは左右 16・文字は左 17・行高 1.7（23.8）。山形（幅 10）は短い項目ではピルの右端から 18、 長い項目では文字の箱がピル幅 − 33 まで広がり、山形は右の余白へ押し出される（右端から 1〜2）。 旧（右 13・山形の箱 22・間 2）は文字の箱が 20 狭く、344 で「ホワイトニング」「詰め物・被せ物の変色」が現行より 1 行多く折れていた */ .page-case .case-toc .anchor-pill { min-height: 56px; padding: 4px 16px 4px 17px; gap: 0; font-size: 14px; line-height: 1.7; } .page-case .case-toc .anchor-pill-label { flex: none; max-width: 100%; } .page-case .case-toc .anchor-pill .icon { width: 20px; height: 20px; margin-right: -3px; } .page-case .case-card { padding: 48px 20px 128px; border-radius: 16px; } .page-case .case-prose > h2 { position: relative; border-left: 0; padding-left: 20px; font-size: 24px; line-height: 41px; margin-top: 80px; text-wrap: wrap; } .page-case .case-prose > h2:first-child { margin-top: 0; } .page-case .case-prose > h2::before { content: ""; position: absolute; left: 0; top: 4.5px; width: 4px; height: 32px; background: var(--c-orange); } .page-case .case-prose > h2::after { margin-left: -20px; margin-top: 16px; } /* ### は 20px・字間 0（STUDIO theme-95b9ef4b の SP 値。参照「こんな症状があります」の字高 19・字頭 64〜241 = 送り 19.7。19px＋0.035em は字高 18・送り 19.3 だった）。 行の箱は従来の 28.5 のまま（縦の送りを変えない）。20px にすると字が 0.4 上がるので箱ごと 1 下げ（top 1）、丸はさらに 1 下げて字の中心にそろえる （参照: 丸 651〜660・字 647〜665。新は丸 649〜658・字 646〜663） */ .page-case .case-prose h3 { position: relative; top: 1px; font-size: 20px; letter-spacing: 0; gap: 11px; line-height: 34px; margin-top: 40.25px; } .page-case .case-prose > h2 + h3 { margin-top: 31.25px; } /* 2026-09-26 現行の DOM 実測: ### は行高 34（2 行で 68）。1 行の見出しの字の位置は旧（行の箱 28.5）と同じになるよう上下の余白を 2.75 ずつ詰めた。 2 行になる長い見出し（例 make-teeth-whiter「治療法：オフィスホワイトニング・ホームホワイトニング」）は、現行 STUDIO と同じく 丸＋文字の行を中央寄せにして文字の箱を見出しの幅いっぱい（313@393）にとる → 丸は左へ 10 はみ出し、文字は 10 右へはみ出す（カードの余白の内側）。 旧は文字の箱が 21 狭く、344 で現行より 1 行多く折れていた */ .page-case .case-prose h3 { width: fit-content; max-width: 100%; justify-content: center; } .page-case .case-prose h3 > .case-h3-t { flex: none; max-width: 100%; } .page-case .case-prose h3::before { width: 10px; height: 10px; border-width: 3px; translate: 0 1px; } /* 参照 440: 丸 10・線 3（x40〜49 の 1 行で 橙 3 ／ 白 2 ／ 橙 3） */ /* 「歯が痛い」だけ: 2 つ目以降の病名（歯髄炎・根尖性歯周炎・非歯原性疼痛）では、本文 → 次の ### が 16 広い（STUDIO の箱の下余白 56。1 つ目の病名は 40）。 参照 3 幅とも 本文の最終行 → ### の字頭 55（う蝕）／ 71（ほか）。他の症状ページの参照は全部 55 なので、このページに限る */ .page-case:is(.case-slug-toothache, .case-slug-tooth-sensitivity) .case-prose > h2 ~ h2 ~ p + h3 { margin-top: 56.25px; } /* 2026-09-26: tooth-sensitivity（知覚過敏症の段）も同じ（現行 393 で 15 広い） */ .page-case .case-prose p { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-case .case-prose h3 + p { margin-top: 16.25px; } /* 2026-09-26 現行の DOM 実測（make-silver-filling-white ほか目次の無い 19 本）: H1 → 本文カード 52（目次のあるページより 11 詰まる）、 ## の点線 → すぐ続く本文 33（### を挟まないページ。旧 1em = 14 で 19 詰まっていた） */ .page-case .case-detail-head.is-notoc { padding-bottom: 52px; } /* H1 は行高 1.7（47.6。現行 DOM 実測）。2 行に折れる題（例「歯ぎしり・食いしばりが気になる」）で 2 行目が 8.4 詰まっていた。 1 行の題の字の位置と前後の間隔は旧（行高 1.4）と同じになるよう上下の余白を 4.2 ずつ詰める */ .page-case .case-title { line-height: 1.7; margin-block: -4.2px; } .page-case .case-prose > h2 + p { margin-top: 33px; } .page-case .case-prose > p + p { margin-top: 1.7em; } /* 段落の間は 1 行空き（23.8。現行 fluoride-treatment・maternity-dental-checkup の実測。旧 1.2em は 7 詰まっていた） */ .page-case .case-cta { padding-bottom: 91px; } .page-case .case-article { padding-bottom: 89px; } /* 2026-09-26 現行を最後までスクロールして出現アニメを終えた状態（静止状態）で実測: 本文カードの下端 → 口の上端 67（344/393/440。旧 48 はフッターの margin-top −26 と足して 26 に詰まっていた） */ } /* ---------- 関連する症状を 〜1079 で出さない（detail.showRelated が true のときだけ当たる。今は当たる要素が無い） ---------- 経緯: 2026-09-29 朝「現状のサイトとレイアウト違う」で 〜1079 を現行 urala.com どおり本文カードの直後がフッターにし（この規則）、 同日夕「PC の方も…今はなしで」で全幅とも HTML に書かないことにした（templates/main/case.mjs。見えないリンクを残さないため）。 この規則は showRelated を true に戻したとき朝の形（1080〜 だけピル）になるよう残している。ただしその形は 〜1079 で見えないリンクが HTML に残る。 戻すときに 〜1079 でも出すと決めたら、この規則を消す（〜1079 のピルの値は上の「関連する症状」の節。ピルの下 → 口の間隔は未調整） */ @media (max-width: 1079px) { .page-case .case-related { display: none; } } /* ---------- 1080〜: Figma pc/case/01（564:4316・1366 幅。症状 83 ページ共通の型）に合わせる（2026-09-25） ---------- 縦の並び（1366 実測。ヘッダー 89 の直下から）: パンくず y200（英字 16px/1.7・字間 25% Roboto ＋ 20 ＋ 和文 20px/1.7・字間 6%。どちらもオレンジ #E56300、縦は中央揃え）→ 27 → H1 40px/1.7・字間 6%・オレンジ・左揃え → 40 →（Figma はリード文 16px/2.2。content に要約が無いので、ここに現行の「ページ内コンテンツ一覧」を置く）→ 80 → 本文カード: 白・角丸 16・上下 80・左右 96（1366 で本文 944 幅） ## = 32px/1.7（PC/h2 #271200）＋ 左罫 4×54（見出しの行だけ。点線までは伸ばさない）、罫の左端 → 字 20、見出し → 16 → 点線（本文幅いっぱい） 点線 → ### 46 ／ 点線 → 本文 52。### = 26px/1.7・字間 6%・オレンジ（PC/h3）、左に丸 14（線 3・#E56300）→ 12 → 字 ### → 本文 24、本文 16px/1.7・字間 0・#574D45（PC/p）→ 次の ### 40、病名のまとまりの間 80 → カード下端 → 口の上端 120（2026-09-29。現行 urala.com の 1366〜1920 の実測 120 と、Figma の「カードの 120 下に次の部品」に合わせる。 Figma はそこに anchor link を 1 行置き、その 165 下がフッター＝関連する症状のピル。ピルは同日から出さない）。フッターの margin-top 64 と足す 目次ピル（Figma の anchor link _btn 482:3173 をそのまま使う）: 3 列 368×56・横 16・縦 20、白・角丸 100、左 32／右 18、17px・字間 2%、下向きの山形 13×7（32 の枠の中央） */ /* 600〜: パンくず・H1・目次ピル・本文カードの中の書体と間隔。現行 urala.com（STUDIO）は 541 から上が PC と同じ書体で、 Figma pc/case/01 とも同じ値（2026-09-28 に 600 / 673 / 841 / 968 / 1079 を実測）。旧は 1080〜 だけで、600〜1079 は ## 28・### 22・本文 16px/1.75 と一回り小さかった */ @media (min-width: 600px) { .page-case .case-crumb-link { align-items: center; gap: 4px 20px; } .page-case .case-crumb-link .case-crumb-en { font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; color: var(--c-orange); } .page-case .case-crumb-ja { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); } .page-case .case-title { font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; } .page-case .case-toc-label { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; margin-bottom: 24px; } .page-case .case-toc .anchor-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .page-case .case-toc .anchor-nav li { min-width: 0; } /* 山形: 24 枠の 12×6 を 26px で描くと 13×6.5。Figma の 32 枠の中央（右端から 18 + 16 = 34）に置くため右の余白は 21 */ .page-case .case-toc .anchor-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 .case-toc .anchor-pill .icon { width: 26px; height: 26px; } .page-case .case-card { border-radius: 16px; } .page-case .case-prose > h2 { position: relative; border-left: 0; padding-left: 20px; margin-top: 80px; font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); } .page-case .case-prose > h2:first-child { margin-top: 0; } .page-case .case-prose > h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 17px; width: 4px; background: var(--c-orange); } /* 17 = 点線の上 16 ＋ 線 1 */ .page-case .case-prose > h2::after { margin-top: 16px; margin-left: -20px; } .page-case .case-prose > h2 + h3 { margin-top: 46px; } .page-case .case-prose > h2 + p { margin-top: 52px; } .page-case .case-prose h3 { margin-top: 40px; gap: 12px; font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; } .page-case .case-prose h3::before { width: 14px; height: 14px; border-width: 3px; } .page-case .case-prose h3 + p { margin-top: 24px; } .page-case .case-prose p { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } } /* 600〜1079: 現行 urala.com の実測（2026-09-28。下まで送って出現アニメを終えてから）。 〜911: 左右 40・本文カード 上下 80 左右 40・本文 14px/1.7。912〜: 左右 56・カード 左右 72・本文 16px/1.7（1080〜 と同じ）。 縦: 和文パンくずの箱 y200（main の上端 90 ＋ 102 ＋ リンクの上 8）→ 16（912〜 は 20）→ H1 → 80 →「ページ内コンテンツ一覧」→ 24 → 目次ピル 2 列（縦横 16。912〜 は 1 本 38.9% 幅で左寄せ） → 64 → 本文カード（目次の無いページは H1 → 80 → カード）。カードの下端 → 口の上端 64（現行。912〜 は 84） */ @media (min-width: 600px) and (max-width: 1079px) { .page-case #main { --gutter: 40px; } .page-case .case-detail-head { padding-top: 102px; padding-bottom: 64px; } .page-case .case-detail-head.is-notoc { padding-bottom: 80px; } .page-case .case-crumb { margin-bottom: 16px; } .page-case .case-toc { margin-top: 80px; } .page-case .case-card { padding: 80px 40px 160px; } /* 下は 160: 現行は最後の行の下端 → カードの下端 163（600/841/968。SP の 128 と同じく STUDIO の箱の余白 80 が足されている） */ .page-case .case-prose p { font-size: 14px; } /* カードの下端 → 口の上端 64（フッター側の上の余白 14 と足す） */ .page-case .case-article { padding-bottom: 50px; } /* ### は字間 0（現行の 673・841 の実測。1080〜 は Figma PC/h3 の 6% のまま）。旧 6% は「こんな症状があります」が現行より 16 広く、 841 で「治療法：オフィスホワイトニング・ホームホワイトニング」（make-teeth-whiter）が現行の 1 行に対して 2 行に折れていた */ .page-case .case-prose h3 { letter-spacing: 0; } /* 丸＋文字の行は 〜599 と同じく中央寄せで、文字の箱を本文の幅いっぱいにとる（現行 STUDIO の組み。長い見出しでは丸が左へ、文字の箱が右へ同じだけはみ出す。 現行 673 の make-teeth-whiter の 2 行の見出しは字頭 x93＝本文の左端 80 より 13 右・丸は左へ 13 はみ出す） */ .page-case .case-prose h3 { width: fit-content; max-width: 100%; justify-content: center; } .page-case .case-prose h3 > .case-h3-t { flex: none; max-width: 100%; } /* 点線 → すぐ続く ### は 48（現行 673・841 の実測。旧 46 で病名のまとまりごとに 2 ずつ上へずれ、4 つ目で 8 ずれていた） */ .page-case .case-prose > h2 + h3 { margin-top: 48px; } } @media (min-width: 912px) and (max-width: 1079px) { .page-case #main { --gutter: 56px; } .page-case .case-crumb { margin-bottom: 20px; } .page-case .case-toc .anchor-nav ul { grid-template-columns: repeat(2, 38.9%); } .page-case .case-card { padding: 80px 72px 160px; } .page-case .case-prose p { font-size: 16px; } .page-case .case-article { padding-bottom: 70px; } /* カード → 口の上端 84 */ } @media (min-width: 1080px) { .page-case .case-detail-head { padding-top: 103px; padding-bottom: 80px; } /* パンくずのリンクは上下 8 の当たり判定 → 和文の字の箱の上端が 89 + 103 + 8 = 200 */ .page-case .case-crumb { margin-bottom: 19px; } /* 和文の箱の下端 234 → リンクの下 8 → 19 → H1 の箱 261 */ .page-case .case-toc { margin-top: 40px; } .page-case .case-toc .anchor-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; } /* 本文カードの下端 → 口の上端 120（フッターの margin-top 64 と足す）。2026-09-29 に現行 urala.com を実測: toothache の 1366・1440・1920、 bad-breath-concerns・make-teeth-whiter の 1440 で 120（toothache の 1280 は 142・1180 は 167 と狭いほど広がるが、Figma の 1366 に合わせて一定）。旧 101（＝165）は関連する症状のピルが無いときの値で、画面に出たことは無かった */ .page-case .case-article { padding-bottom: 56px; } /* 関連する症状（detail.showRelated が true のときだけ HTML に出る）: Figma のカードの下端 → 120 → ピル → 165 → フッター。 上の 120 は本文カードの下の 56 に 64 を足す（2026-09-29 まではカード側に has-related を付けて切り替えていた。印を無くしてこの 1 行に） */ .page-case .case-related { padding-top: 64px; padding-bottom: 101px; } .page-case .case-card { padding: 80px 96px; } } /* ============ 演出（docs/MOTION.md。属性は templates/main/case.mjs）============ html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。動かすのは opacity / translate / scale / clip-path だけ。 本文の段落は動かさない（読むのを邪魔しない）。動くのは 見出しブロック・本文カード（1 枚ごと）・## の帯・### の丸（関連する症状のピルも出すときは動く。今は detail.showRelated: false で出ない）。 */ /* 本文カード: 読み込み時に下から現れる（見出しブロックの 0.2 秒後）。カードに data-mo を付けると中の見出しが一度に再生されるので CSS だけで */ @keyframes ml-card { from { opacity: 0; translate: 0 32px; } } html.mo .case-card { animation: ml-card calc(var(--mo-dur) * 1.1) var(--mo-ease) 200ms backwards; } /* ## 病名（bar）: 帯ごと上から下へ描かれる。点線（::after）は左へ 24px はみ出すので、描く範囲を左 32px まで広げる（motion.css の既定は −2%） */ @keyframes ml-prose-bar { from { clip-path: polygon(-32px -20%, calc(100% + 8px) -20%, calc(100% + 8px) -20%, -32px -20%); translate: 0 calc(var(--mo-dist) * .5); } to { clip-path: polygon(-32px -20%, calc(100% + 8px) -20%, calc(100% + 8px) 130%, -32px 130%); translate: 0 0; } } html.mo .case-prose > h2[data-mo="bar"].is-in { animation-name: ml-prose-bar; } /* ### 丸ビュレット（ml-bullet）: 題が 12px 上がって現れ、0.12 秒後に丸（::before）が小さく弾む */ @keyframes ml-bullet-h { from { opacity: 0; translate: 0 12px; } } @keyframes ml-bullet-dot { from { opacity: 0; scale: .2; } } html.mo .case-prose h3[data-mo="ml-bullet"].is-in { animation-name: ml-bullet-h; animation-duration: calc(var(--mo-dur) * .8); } html.mo .case-prose h3[data-mo="ml-bullet"].is-in::before { animation: ml-bullet-dot calc(var(--mo-dur) * .7) var(--mo-ease-pop) calc(var(--mo-d, 0ms) + 120ms) backwards; } /* ピルの文字は 2 行目に 1〜2 字だけ残る折り返しを避ける（関連する症状。今は出さない。一覧 /case は case-index.css の .case-pill-label） */ .page-case .case-pill-label { text-wrap: pretty; }