/* 医院サイト トップ（templates/main/home.mjs）。値は docs/design-main.md §3-1 / §2-14 の実測と capture/compare/index の見比べ（2026-09-18）。
   ブレークポイント: 〜767（2026-09-25 に旧 〜599 を 〜767 へ広げた。末尾の Figma SP/top ブロックが最終値）/ 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜（末尾の Figma pc/top ブロックが最終値）。
   規約: 100vh 禁止・center+overflow-x 併用禁止（safe center ＋ flex-start）・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止・色はトークンのみ。
   共通部品（.sec-head / .btn / .qlb / .collage / .igrid / .acc / .news-list / .tooth-tag / .oval / .smile）は components.css。ここはページ固有の並びだけ。 */

.sec-cta { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
.sec-cta .btn, .about-cta .btn, .msg-cta .btn { max-width: 100%; }
/* 〜599: 主 CTA は幅いっぱいにしない（2026-09-24 参照 440/393/344 の実測: ABOUT 315・WORRIES 264・NEWS 238・FAQ 264。3 幅とも同じ幅で中央）。
   幅・余白・矢印は components.css の 〜599 の .btn（文字幅＋左 26／右 57、最小 238）に任せ、ここは原本が最小幅より広い FAQ だけ 264 に揃える */
@media (max-width: 540px) {
  .page-home .faq-sec .sec-cta .btn { min-width: 264px; }
  /* 2 周目: 文字の位置も原本に合わせる（白い字のインクがボタンの左端・右端から 参照 ABOUT 27/59・WORRIES 27/58・NEWS 35/58・FAQ 63/74）。
     共通の 26/57（＋線 2）だと WORRIES が 274 幅（参照 264）、ABOUT が 324（参照 315）になる */
  .page-home .about-cta .btn, .page-home .worries .sec-cta .btn { padding-left: 22px; padding-right: 52px; }
  .page-home .news-sec .sec-cta .btn { padding-left: 30px; padding-right: 51px; }
  .page-home .faq-sec .sec-cta .btn { padding-left: 58px; padding-right: 67px; }
}
/* 〜599 の H2 は参照が 24px（トークン --fs-h2 は 344 で 26.9px になり「ウララ歯科クリ｜ニックの特長11選」と折れる）。
   h2 の text-wrap:balance（base.css）は和文で「解｜決」のような割れ方をするので、このページの見出しは素直な折り返しにする */
.page-home .sec-title { text-wrap: wrap; }
@media (max-width: 540px) { .page-home .sec-title { font-size: 24px; } }
/* 塗りボタンの山形 ›（ABOUT・WORRIES・NEWS・FAQ）は全幅で白（Figma SP 552:4682・PC 266:85、現行 841・390 とも白）。
   共通の部品は 1080〜 だけ白で、〜1079 は既定のピーチ（components.css の .btn-arrow）だった → このページは幅に関係なく白。ホバーの反転（hover.css）は後から読むのでそのまま勝つ。
   大きさ: 600〜767 は 〜599 と同じ 21 の箱を右 8（インク 約 7×12・右端から 16。Figma SP 8×13・右 16）、768〜1079 は 1080〜 と同じ 26 の箱を右 22（6.5×13・右端から 32。現行 841 約 7×13・右 32） */
.page-home .btn-primary > .btn-arrow { color: var(--c-white); }
/* （2026-09-29）600〜767 だけの 21 の山形は外した: 541〜1079 は現行と同じタブレットの組み（下の行の 26 の箱） */
@media (min-width: 541px) and (max-width: 1079px) { .page-home .btn-primary > .btn-arrow { right: 22px; width: 26px; height: 26px; margin-top: -13px; } }

/* ---------- ヒーロー（高さは内容分。100vh にしない） ---------- */
.hero { padding-top: 8px; }
.hero-inner { position: relative; }
/* 縦書き H1: 2 本の白帯。右→左に読むので row-reverse で 1 本目を右に。参照（pc/841/344 とも）は 2 本の上端が揃う（段差なし）。SP は写真の上に重ねる（写真左端から 24px 内側） */
.hero-title { position: absolute; z-index: 2; left: 24px; top: 4px; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 6px; margin: 0; font-size: inherit; }
.hero-line { display: block; font-size: 28px; letter-spacing: 0.06em; color: var(--c-ink-deep); }   /* 344: 10 字 × (28×1.2＋1.7) ＋ 24 = 377 < 写真 395。参照の帯は 350（字間なし） */
/* スライドショー: 全枚を重ねて CSS でクロスフェード（JS 不要）。初期は 1 枚目が見える。344 の参照は 304×395 */
.hero-photo { position: relative; border-radius: var(--r-l); aspect-ratio: 304 / 395; max-height: 560px; background: var(--c-line); overflow: clip; }
.hero-slides { position: absolute; inset: 0; }
/* n 枚 × 5 秒で 1 周。負の delay で i 枚目の位相を i×5 秒ずらす（0 秒時点で 1 枚目が不透明。途中で消える瞬間を作らない） */
.hero-slide { position: absolute; inset: 0; opacity: 0; animation: hero-fade calc(var(--n) * 5s) linear infinite; animation-delay: calc((var(--i) - var(--n)) * 5s); }
.hero-slide:first-child { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
@keyframes hero-fade { 0% { opacity: 1; } 16% { opacity: 1; } 20% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
.hero-slides[style="--n:1"] .hero-slide { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { animation: none; } .hero-slide:not(:first-child) { display: none; } }
/* 歯型バッジ 5 個: 〜767 は写真の下の横スクロール箱（先頭に必ず到達できる）。両端に ✦ */
.hero-tags { margin: 12px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter) 4px; }
.hero-tags li { flex: none; }
.hero-tags .tooth-tag-txt { padding-bottom: 12px; }
/* 〜767: 5 個を画面幅にぴったり収める固定の 1 列（横スクロールにしない。2026-09-24 ユーザー指示）。
   歯型は列幅に合わせて縮み（100:108 を保つ）、文字も vw で追従する。344 で 1 個 57px・文字 9.6px、440 で 75px・12px */
@media (max-width: 540px) {
  .hero-tags { display: grid; grid-template-columns: repeat(5, minmax(0, 112px)); justify-content: center; justify-content: safe center; gap: clamp(4px, 1.6vw, 12px); overflow: visible; }   /* 1 個の上限は PC と同じ 112（600〜767 で大きくなりすぎない）。列は縮むので溢れない */
  .hero-tags li { min-width: 0; }
  .hero-tags .tooth-tag { width: 100%; height: auto; aspect-ratio: 100 / 108; }
  .hero-tags .tooth-tag-txt { font-size: clamp(9px, 2.8vw, 15px); letter-spacing: 0; line-height: 1.25; padding-bottom: 16%; }
  .hero-tags .tooth-tag-txt strong, .hero-tags .tooth-tag-txt b { font-size: clamp(12px, 3.9vw, 20px); }
  .hero-tags .tag-sparkle { width: clamp(10px, 3vw, 16px); height: clamp(10px, 3vw, 16px); left: -6px; bottom: 30%; }
  .hero-tags .tooth-tag.has-sparkle:last-child .tag-sparkle { left: auto; right: -6px; top: 18%; bottom: auto; }
}
.hero-tags .tag-sparkle-2 { display: none; }   /* 2 つ目の ✦ は 〜599 だけ（home.mjs が最後のバッジに足す） */

/* 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-01 の実測。3 幅とも縦位置は同じ）:
   ・写真は左右 5vw（440: x22〜418 / 393: 20〜373 / 344: 17〜327）、上端 y120・高さ 420 固定（3 幅とも y120〜540）、角丸 40。ヘッダー 80 ＋ 40
   ・縦書き 2 本は画面左 44 固定（帯 40 幅・間 8: x44〜83 / 92〜131）、上端 y104（写真より 16 上）。字 28・字送り 33.6（字間 0.2em）。10 字の帯 104〜448、7 字 104〜347
   ・歯型バッジ 5 個は写真の下端に重ねる。440 は 1 個 78×75（歯型 305:293）・間 8・列 422 を画面中央（x9〜431）、中心は写真下端の 7.5 上（y495〜570）。
     原本は 393/344 でも 78 のまま左右が画面外に欠けるが、ここは 5 個とも見せる（列 = min(422, 画面幅 − 18) に比例して縮める。ユーザー指示）
   ・文字は太字 13px（2 行目の数字は 15px）、最後のバッジだけ 10px・歯型が時計回りに約 18° 傾く。✦ はオレンジで、先頭は左下に 1 つ、最後は右上に大小 2 つ
   ・バッジの列の下端 → クイックリンク上端 53（写真下端 → 楕円 83。y540 → 623） */
@media (max-width: 540px) {
  .hero { padding-top: 40px; container-type: inline-size; }
  .hero-photo { margin-inline: calc(5cqw - var(--gutter)); aspect-ratio: auto; height: 420px; max-height: none; border-radius: 40px; }
  .hero-title { top: -16px; left: 24px; gap: 8px; }
  .hero-line { font-size: 28px; line-height: 1; letter-spacing: 0.2em; padding: 8px 6px 1px; }
  .hero-tags { --tag-row: min(422px, 100cqw - 18px); position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: calc(var(--tag-row) * 8 / 422); justify-content: start;
    width: var(--tag-row); padding: 0; overflow: visible;
    margin: calc(-7.5px - var(--tag-row) * 0.088781) 0 calc(37.5px - var(--tag-row) * 0.088781) calc(50% - var(--tag-row) / 2); }   /* 0.088781 = 歯型の高さの半分 ÷ 列（78/422 × 293/305 ÷ 2）。列の箱（下の margin 込み）の下端は写真下端 ＋ 30 で一定（.hero は container-type で独立した整形文脈 → margin は相殺されない） */
  .hero-tags li { min-width: 0; }
  .hero-tags .tooth-tag { width: 100%; height: auto; aspect-ratio: 305 / 293; }
  .hero-tags .tooth-tag-txt { font-size: calc(var(--tag-row) * 13 / 422); font-weight: 700; letter-spacing: 0.04em; line-height: 1.6; padding: 0; }
  .hero-tags .tooth-tag-txt strong, .hero-tags .tooth-tag-txt b { font-size: calc(var(--tag-row) * 15 / 422); font-weight: 700; }
  .hero-tags li:last-child .tooth-tag-txt { font-size: max(8px, calc(var(--tag-row) * 10 / 422)); line-height: 1.7; }
  .hero-tags li:last-child .i-tooth-fill { transform: translate(-6%, 4.5%) rotate(18deg); }
  .hero-tags .tooth-tag-txt { position: relative; z-index: 1; }   /* 回した歯型（transform）は重ね順が上がって文字を隠すので、文字を前に出す */   /* 参照 440: 歯型の中心が枠の中心より 4.5 左・3.5 下、18° 前後で輪郭が一致 */
  /* ✦（位置と大きさは歯型の枠に対する割合。440 の実測: 先頭 12×12 の中心が枠の左 5.5・上 54.5／最後 大 16×20 の中心が左 72・上 18、小 9×13 の中心が左 79・上 30） */
  .page-home .hero-tags li .tooth-tag .tag-sparkle { display: block; color: var(--c-orange); height: auto; right: auto; bottom: auto; }
  .page-home .hero-tags li:first-child .tooth-tag .tag-sparkle { width: 18.5%; left: -2.2%; right: auto; top: 63.1%; bottom: auto; }
  .page-home .hero-tags li:last-child .tooth-tag .tag-sparkle { width: 30.8%; left: 76.9%; right: auto; top: 8%; bottom: auto; transform: scaleX(0.8); }
  .page-home .hero-tags li:last-child .tooth-tag .tag-sparkle-2 { width: 20%; left: 91.3%; top: 29.6%; transform: scaleX(0.69); }
  .page-home .quick { margin-top: 47px; }   /* 2 周目の実測: バッジ下端 y570 → 楕円の上端 623（440/393/344 とも）。53 だと 629 */
  /* クイックリンクの中（参照 440/344 の実測。楕円の上端 = 0）: アイコンは下端が +56 に揃い（インク 人物 34×42・病院 57×38・スタッフ 65×36・QA 45×35）、
     文字のインクは +64〜77。アイコンごとに縮尺が違うので幅を個別に指定する（src のファイル名で当てる。並べ替えても崩れない） */
  .page-home .home-qlb .qlb-link { justify-content: flex-start; padding: 11px 8px 8px; gap: 4px; }
  .page-home .home-qlb .qlb-ic { width: auto; height: 45px; align-items: flex-end; }
  .page-home .home-qlb .qlb-ic img { width: 45px; height: auto; }
  .page-home .home-qlb .qlb-ic img[src*="/cbf93b79."] { width: 34px; }
  .page-home .home-qlb .qlb-ic img[src*="/874d47a9."] { width: 57px; }
  .page-home .home-qlb .qlb-ic img[src*="/175dfffa."] { width: 65px; }
  .page-home .home-qlb .qlb-arrow { width: 20px; height: 20px; margin-right: -6px; }   /* 参照の矢印のインク 5×11（14px だと 4×8）・字の右端から 16 右。右の -6 で文字の中央寄せ位置を 14px のときのまま保つ */
}
/* cqw が使えないブラウザ（Safari 15 以前など）は画面幅で代用（スクロールバーの無いスマホ前提。はみ出しは 9px の余白で吸収） */
@supports not (width: 1cqw) {
  @media (max-width: 540px) { .hero-tags { --tag-row: min(422px, 100vw - 18px); } .hero-photo { margin-inline: calc(5vw - var(--gutter)); } }
}

@media (min-width: 541px) {
  .hero-photo { aspect-ratio: 4 / 3; max-height: 600px; }
  .hero-title { left: 32px; }
  .hero-line { font-size: 30px; }   /* 600: 写真 560×420 に 10 字 × (36＋1.8) ＋ 24 = 402 が収まる */
}
/* 768〜1079（展開した折りたたみ）: 参照 open841-ref-01 は写真が容器いっぱい（x 40〜800・4:3）、縦書き 2 本が写真の左上に重なり（40px 字）、
   バッジ 5 個は写真の下端に重なって中央揃え。100vh は使わない（841×701 では写真 570 ＋ ヘッダー 90 で 1 画面弱） */
@media (min-width: 541px) {
  .hero-title { left: 40px; top: -16px; gap: 10px; }
  .hero-line { font-size: 36px; letter-spacing: 0.1em; }   /* 768: 写真 704×528 に 10 字 × (43.2＋3.6) ＋ 24 = 492。参照 841 は 40px・帯 495 */
  .hero-photo { aspect-ratio: 4 / 3; max-height: 600px; border-radius: var(--r-xl); }
  .hero-tags { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; padding: 8px 24px; gap: 16px; overflow: visible; z-index: 2; justify-content: flex-start; justify-content: safe center; }
}
/* 1080〜（参照 pc1280/1440/1920-ref-01 の実測。3 幅とも同じ値）:
   写真は中央の箱に閉じ込めず「画面左 253px 〜 画面右 100px」で横いっぱい・高さ 600・角丸 40（y 132〜731。1920 で幅 1567、1280 で 928）。
   縦書き 2 本は画面左 87px 固定（帯 56 幅 × 2・間 12・上端は写真より 11 下）。
   歯型バッジ 5 個（112×121・間 10）は写真の右下に重ね、右端は写真より 18 外、下端は写真より 12 上。
   1080〜1279 は参照が無いので右だけ 80 に詰める（ヘッダーの端寄せ 40 に合わせる） */
@media (min-width: 1080px) {
  .hero { padding-top: 12px; --hero-pl: 253px; --hero-pr: 80px; }
  .hero .hero-inner { width: 100%; max-width: none; margin: 0; padding: 0 var(--hero-pr) 0 var(--hero-pl); box-sizing: border-box; display: block; }
  .hero-title { position: absolute; left: 88px; top: 11px; gap: 13px; padding: 0; }
  .hero-line { font-size: 40px; line-height: 1; letter-spacing: 0.2em; padding: 10px 8px; }   /* 帯 56 幅。参照 1920 の実測: 字の送り 48（40＋字間 8）・帯 144〜639（10 字）／144〜510（7 字）。縦書きの送りは font-size＋letter-spacing で決まる（line-height は帯の幅） */
  .hero-photo { aspect-ratio: auto; height: 600px; max-height: none; border-radius: 40px; }
  .hero-tags { left: auto; right: calc(var(--hero-pr) - 18px); bottom: 12px; padding: 8px 0; gap: 10px; }
  .hero-tags .tooth-tag { width: 112px; height: 121px; }
  .hero-tags .tooth-tag-txt { padding-bottom: 12px; }
}
@media (min-width: 1280px) { .hero { --hero-pr: 100px; } }

/* ---------- クイックリンク（部品 .qlb。SP は楕円 2 列＋1、1080〜 は白い横長バー） ---------- */
.quick { margin-top: clamp(32px, 5vw, 48px); }
@media (min-width: 541px) and (max-width: 1079px) { .quick { margin-top: 40px; } .quick .qlb-list { gap: 24px; max-width: 600px; margin-inline: auto; } }
@media (min-width: 1080px) { .quick { margin-top: 32px; } .quick .qlb-list { width: min(100%, 1020px); margin-inline: auto; } }   /* 参照: 写真下端 731 → バー上端 763（3 幅とも）。バーは 1020 中央（1920: 450〜1470） */

/* ---------- ABOUT（コラージュの中央に文章。写真は左右端に食い込む → セクションで clip。body ではない） ---------- */
.about { padding-top: clamp(72px, 9vw, 150px); }   /* 参照 pc: クイックリンク下端 → ABOUT ラベルまで 235 */
.about-text { color: var(--c-ink); font-size: var(--fs-small); word-break: auto-phrase; }   /* 折れるときは文節で（「デンタルライフパー｜トナー」にしない。対応ブラウザだけ・ほかは従来どおり） */
.about-cta { margin-top: clamp(32px, 4vw, 48px); }
.about .sec-head { margin-bottom: clamp(24px, 3vw, 48px); }
/* コラージュの写真は容器ではなくセクション（全幅）で clip する → ガター分まで画面端に食い込める */
.about .collage-about[data-allow-bleed] { overflow: visible; }
/* 〜767（参照 fold344-ref-01）: 上の 2 枚は画面端に接し（左 100×130・右 70×120）、中央の文はその下に始まる。下の 2 枚は画面端に僅かに食い込む（左 25・右 20 だけ見える）。
   文の左右に 20px を足して「ウララ歯科クリニック｜について」（10 字）で折る */
@media (max-width: 540px) {
  .about .collage-about { padding: 0; }
  .about .collage-about .collage-center { padding: 170px 20px 40px; }   /* 上の写真（130）から 40 空けて ABOUT ラベル */
  .about-text { padding-inline: 0; }
  .about .collage-about .collage-1 { left: calc(var(--gutter) * -1); top: 0; width: 100px; height: 130px; }
  .about .collage-about .collage-3 { right: calc(var(--gutter) * -1); top: 20px; width: 70px; height: 120px; }
  .about .collage-about .collage-2 { left: calc(var(--gutter) * -1 - 36px); top: 150px; bottom: auto; width: 60px; height: 100px; }
  .about .collage-about .collage-4 { right: calc(var(--gutter) * -1 - 40px); top: 160px; bottom: auto; width: 60px; height: 80px; }
}
/* 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-01 の実測。写真 4 枚は「画面中央」基準の固定位置・固定寸法で、3 幅とも同じ。狭い幅では画面端で切れる）:
   左上（人物 3 人）104×139 は中央 −179（440: x41〜145 / 344: −7〜97）。右上（女性）80×107 は中央 ＋101、上端は左上より 40 下。
   左下（診療室）71×93 は中央 −219、上端 ＋127（左上の写真の下に潜る）。右下（顕微鏡）57×76 は中央 ＋153、上端 ＋184。角丸 16。
   ABOUT ラベルは左上の写真の上端から 180、H2 は 2 行（「ウララ歯科クリニック｜について」）、本文は 13px・行送り 29・幅 300（3 幅とも同じ位置で折れる）。
   U マークは幅 184・右端が画面右 −10（440: x247〜430）。原本は左上の写真の 106 上だが、コラム（非表示）の行が無いぶん上の楕円に重なるので、
   セクション上端に置いて写真ごと 16 下げる（クイックリンク下端 → 写真 106。原本 90） */
@media (max-width: 540px) {
  .page-home .about { padding-top: 106px; }
  .page-home .about > .smile { width: 184px; left: auto; right: 10px; top: 0; }
  .page-home .about .collage-about .collage-center { max-width: 300px; margin-inline: auto; padding: 174px 0 40px; }
  .page-home .about .collage-about .collage-item { right: auto; bottom: auto; }
  .page-home .about .collage-about .collage-1 { left: calc(50% - 179px); top: 0; width: 104px; height: 139px; z-index: 1; }
  .page-home .about .collage-about .collage-4 { left: calc(50% + 101px); top: 40px; width: 80px; height: 107px; }
  .page-home .about .collage-about .collage-2 { left: calc(50% - 219px); top: 127px; width: 71px; height: 93px; }
  .page-home .about .collage-about .collage-3 { left: calc(50% + 153px); top: 184px; width: 57px; height: 76px; }
  .page-home .about .sec-head { margin-bottom: 34px; }            /* H2 2 行目の字の下端 → 本文の字の上端 55 */
  .page-home .about .sec-title { max-width: 10.8em; }             /* 10 字で折る（11 字目「に」から 2 行目） */
  .page-home .about-text { font-size: 13px; letter-spacing: 0.02em; color: var(--c-ink-soft); }   /* 参照: 1 行 22 字 293 幅・#574D45（字間 0.06em だと 303 幅で 300 の箱から 1 字あふれて折れる） */
  .page-home .about-cta { display: flex; justify-content: center; margin-top: 37px; }   /* 本文の字の下端 → ボタン上端 46 */
  .page-home .about-cta .btn { max-width: none; flex: none; }     /* 原本はボタン 315 が 344 でも縮まない（x13〜327）。flex: none が無いと 300 の箱に縮んで「につ｜いて」と 2 行になっていた */
}
/* 768〜1079（参照 open841-ref-02）: 中央テキスト幅 380〜400（H2 は 2 行）、上 2 枚は容器の両端（180×230 / 140×140）、下 2 枚は画面端に食い込む（左 -40・右 -56） */
@media (min-width: 541px) and (max-width: 1079px) {
  .about .collage-about .collage-center { max-width: 400px; }
  .page-home .about .sec-title { max-width: 10.8em; margin-inline: auto; }   /* 400 幅だと 12 字で「…クリニックにつ｜いて」と割れていた → 〜767 と同じく 10 字「ウララ歯科クリニック｜について」で折る */
  .about .collage-about .collage-1 { left: 0; top: 0; width: 180px; height: 230px; }
  .about .collage-about .collage-3 { right: 0; top: 0; width: 140px; height: 140px; }
  .about .collage-about .collage-2 { left: -40px; top: 240px; bottom: auto; width: 120px; height: 150px; }
  .about .collage-about .collage-4 { right: -56px; top: 200px; bottom: auto; width: 145px; height: 170px; }
}
/* 1080〜（参照 pc1280/1440/1920-ref-01 を実測。写真 4 枚は「容器（1120 中央）基準」で 3 幅とも同じ相対位置。画面端基準ではない）:
   左上 240×312 は容器左端の 5 外（1920: x 395〜635 / 1280: 75〜315）、上端は ABOUT ラベルより 56 上。
   右上 122×164 は容器右端の 77 外（1920: 1475〜1597 / 1280: 1155〜1277 ＝ 画面端で切れる）、上端はラベルより 126 上。
   右下 238×316 は容器右端の 17 外（1920: 1299〜1537）、下端はボタンの下端に揃う。
   左下 158×212 は容器左端の 93 外（1920: 307〜465 / 1280: −13〜145 ＝ 画面左端で切れる）、下端はボタンの下端。
   縦位置の基準は .collage-about（padding 40 ＋ 中央 24）。ラベル上端 ＝ .collage-about 上端 ＋ 77、ボタン下端 ＝ 下端 − 64 */
@media (min-width: 1080px) {
  .about { padding-top: 135px; padding-bottom: 105px; }   /* 参照: バー下端 922 → ラベル 1134（212）／ ボタン下端 1513 → 楕円上端 1682（169） */
  .about > .smile { width: 400px; left: max(30px, calc(50% - 695px)); top: -20px; }   /* 参照: U は幅約 270（1920: x 265〜535 / 1440・1280: 30〜300）、上端はバー下端の少し上 */
  .about .collage-about .collage-center { max-width: min(640px, 100% - 480px); }
  .about .collage-about .collage-1 { left: -5px; top: 20px; width: 240px; height: 312px; }
  .about .collage-about .collage-2 { left: -93px; bottom: 64px; width: 158px; height: 212px; }
  .about .collage-about .collage-3 { right: -77px; top: -50px; width: 122px; height: 164px; }
  .about .collage-about .collage-4 { right: -17px; bottom: 64px; width: 238px; height: 316px; }
}

/* ---------- FEATURES（白い楕円パネル＋自動で送られるカルーセル。左上に U 透かし） ---------- */
/* 楕円（参照 pc1280/1440/1920-ref-02 の実測）: 高さ 773・縦横とも半径 50% で、左右は画面端より 88px ずつ外まで（1920: 幅 2096 / 1280: 1456）。
   縦の並び（3 幅とも同じ）: ABOUT ボタン下端 → 楕円上端 169、楕円上端 → FEATURES ラベル 92、ラベル → カード上端 224、楕円下端 → WORRIES ラベル 129 */
.features { padding-block: clamp(24px, 3vw, 48px); }
.features .oval { --oval-pt: clamp(72px, 8vw, 140px); padding-block: var(--oval-pt) clamp(64px, 7vw, 120px); }
/* U 透かし: oval-inner の中で z-index:-1（白い楕円の上・見出しやイラストの下）。上端を楕円の上端（padding ぶん上）に合わせる。楕円（data-allow-bleed）が外を clip */
.features .feat-smile { left: -4%; top: calc(var(--oval-pt) * -1 + 16px); z-index: -1; }
/* 見出し: 〜767 はイラスト 2 体を見出しの上に左右並び。768〜1079 は同じ並びで中央寄り（参照 841: 中央から ±100 の位置）。1080〜 は H2 の両脇（イラストは見出しより下に伸びる） */
.feat-head { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.feat-head .sec-head { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 0; }
.feat-illus { width: clamp(84px, 22vw, 120px); }
.feat-illus img { width: 100%; height: auto; object-fit: contain; }
.feat-illus-l { grid-column: 1; grid-row: 1; justify-self: start; }
.feat-illus-r { grid-column: 2; grid-row: 1; justify-self: end; }
@media (min-width: 541px) and (max-width: 1079px) {
  .feat-illus { width: 120px; }
  .feat-illus-l { justify-self: end; margin-right: 96px; }
  .feat-illus-r { justify-self: start; margin-left: 96px; }
  .feat-head .sec-head { margin-top: 0; }
}
@media (min-width: 1080px) {
  .features { padding-bottom: 129px; }
  .features .oval { --oval-pt: 84px; padding-block: var(--oval-pt) 72px; min-height: 773px; box-sizing: border-box; }
  .features .oval::before { inset: 0 -88px; border-radius: 50%; }   /* 参照: 楕円は画面端の 88px 外まで・上下左右とも半径 50% */
  .features .feat-smile { --smile-w: 270px; left: max(30px, calc(50% - 920px)); top: calc(var(--oval-pt) * -1 + 40px); }   /* 参照: U は幅 270、1920 で x 40〜310・1440/1280 で 30〜300、上端は楕円上端の 40 下 */
  .feat-head { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2vw, 24px); margin-bottom: 40px; }
  .feat-head .sec-head { margin: 0; flex: 0 1 auto; }
  .feat-illus { flex: none; width: 128px; margin-top: 26px; }   /* 参照 pc: イラスト上端 ≒ ラベルより 17 下、下端は H2 より 80 下 */
}
/* カルーセル本体: カード列を translateX で 1 枚ずつ送る CSS animation（keyframes は home.mjs が枚数から生成）。
   列は 3 組（2 組目以降は aria-hidden の複製）。0% の位相は「2 組目の 1 枚目が画面中央」（1 組目が左半分を埋める）。
   .feat-viewport は横だけ clip（縦は歯型バッジがカードの上に 22 はみ出すので visible）。横の見切れは楕円（data-allow-bleed）が画面端で切る。
   カードは 232（〜599）／ 320（600〜767）／ 428（768〜）。間隔は 16 / 24 / 40（1080〜） */
.feat-carousel { position: relative; --feat-w: 232px; --feat-gap: 16px; --feat-step: calc(var(--feat-w) + var(--feat-gap)); }
.feat-viewport[data-allow-bleed] { overflow: clip visible; padding-inline: calc(50% - var(--feat-w) / 2); }
.feat-track { display: flex; gap: var(--feat-gap); width: max-content; margin: 0; padding: 28px 0 8px; list-style: none;
  animation: feat-slide calc(var(--n, 1) * 5s) linear infinite; will-change: transform; }
.feat-track > .is-clone { pointer-events: none; }
/* キーボードのフォーカスだけで止める（ビューポートは tabindex=0 なので、:focus-within だと指でタップしただけで止まったままになる） */
.feat-viewport:focus-visible .feat-track { animation-play-state: paused; }
.feat-carousel:has(:focus-visible) .feat-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .feat-carousel:hover .feat-track { animation-play-state: paused; } }   /* タップで :hover が残って止まったままにならないよう、マウスの端末だけ */
.feat-viewport:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .feat-track { animation: none; }
  .feat-carousel:not(.is-live) .feat-track > .is-clone { display: none; }
  .feat-carousel:not(.is-live) .feat-viewport[data-allow-bleed] { overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; }
  .feat-carousel:not(.is-live) .feat-card { scroll-snap-align: center; }
}
/* JS あり（2026-09-28 ユーザー「特徴11選は自分でスクロールもできるように」）: site.js の featCarousel が .is-live を付ける。
   CSS animation を止めてビューポートを横スクロール箱にし、自動送りは JS が scrollLeft で同じ間合い（4.4 秒止まり 0.6 秒 ease-in-out で 1 枚）で行う。
   指のスワイプはネイティブの慣性。スナップは付けない（自動送りの途中の scrollLeft が吸い寄せられる）。スクロールバーは出さない（複製を含む 5 組の長さが見えてしまう）。
   縦は歯型バッジがトラックの padding-top 28 の中に収まるので hidden。縦のスワイプ・ホイールはページへ抜ける。reduce でも手で動かせる（自動送りだけしない） */
.feat-carousel.is-live .feat-track { animation: none; will-change: auto; }
.feat-carousel.is-live .feat-viewport[data-allow-bleed] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: auto; scrollbar-width: none; touch-action: manipulation; }
.feat-carousel.is-live .feat-viewport::-webkit-scrollbar { display: none; }
.feat-carousel.is-dragging .feat-viewport { -webkit-user-select: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .feat-carousel.is-live .feat-viewport { cursor: grab; }
  .feat-carousel.is-dragging .feat-viewport { cursor: grabbing; }
}
.feat-card { flex: none; width: var(--feat-w); }
.feat-fig { position: relative; margin: 0; }
.feat-fig .tooth-badge { position: absolute; left: -8px; top: -24px; z-index: 1; }
.feat-img img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-m); }
.feat-cap { margin-top: 12px; text-align: center; font-family: var(--f-round); font-size: var(--fs-small); color: var(--c-ink-deep); line-height: 1.6; }
@media (min-width: 541px) { .feat-carousel { --feat-w: 320px; } }
@media (min-width: 541px) { .feat-carousel { --feat-w: 428px; --feat-gap: 24px; } .feat-fig .tooth-badge { left: -12px; } .feat-cap { font-size: 18px; margin-top: 16px; } }
@media (min-width: 1080px) {
  .feat-carousel { --feat-gap: 40px; }
  .feat-track { padding-top: 28px; }
  .feat-fig .tooth-badge { left: -12px; top: -22px; }   /* 参照 1920: バッジ x 268〜334（カード 278〜）・上端はカードより 22 上 */
  .feat-cap { font-size: 20px; margin-top: 30px; }       /* 参照: 写真下端 914 → 文字の中心 960 */
}

/* 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-02 の実測。縦位置は 3 幅とも同じ。T = 楕円の上端）:
   ABOUT ボタン下端 → T 177。楕円は高さ 530・左右とも画面端の 120 外まで（440 で幅 680・344 で 584）・半径 50%。U 透かしは無い。
   イラスト 2 体は高さ 82（左 75 幅・右 70 幅）で上端 = T、左は中央 −163〜−88、右は中央 ＋79〜＋149。
   ラベルの字 T+88、H2 は 2 行（「ウララ歯科クリニックの｜特長11選」）、カード 234×176（角丸 12・間 43）上端 T+228、
   番号の歯型 41×40 はカードの左 18・上 20 に出る（数字 15px）。キャプションは 13px・字の上端がカード下端 ＋31。T+530 → WORRIES ラベルの字 94 */
@media (max-width: 540px) {
  .page-home .section.features { padding-top: 54px; padding-bottom: 88px; }   /* 実測: ABOUT ボタン下端 → 楕円 参照 176・57 のとき 179 */
  .page-home .features .oval { --oval-pt: 0px; padding-block: 0; min-height: 530px; }
  .page-home .features .oval::before { inset: 0 -120px; border-radius: 50%; }
  .page-home .features .feat-smile { display: none; }
  .page-home .feat-head { margin-bottom: 13px; }
  .page-home .feat-head .sec-head { margin-top: 0; }
  .page-home .feat-head .sec-title { max-width: 11.8em; }         /* 11 字（「の」まで）で折る */
  .page-home .feat-illus { width: auto; }
  .page-home .feat-illus img { display: block; width: auto; height: 82px; }
  .page-home .feat-illus-l { justify-self: end; margin-right: 88px; }
  .page-home .feat-illus-r { justify-self: start; margin-left: 79px; }
  .page-home .feat-carousel { --feat-w: 234px; --feat-gap: 43px; }
  .page-home .feat-img img { border-radius: 12px; }
  .page-home .feat-fig .tooth-badge { width: 41px; height: 40px; left: -18px; top: -20px; }
  .page-home .feat-fig .tooth-badge-txt { font-size: 15px; padding-bottom: 2px; }
  .page-home .feat-cap { margin-top: 26px; font-size: 13px; }
}

/* ---------- WORRIES（部品 .igrid: 〜767 は 2 列、768〜1079 は 3 列、1080〜 は 4 列） ---------- */
.worries .igrid-card { color: var(--c-ink-deep); }
/* 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-02・03 の実測。3 幅とも同じ値）:
   H2 2 行目の字の下端 → 格子 60。カードは高さ 165（ラベルが 2 行になると 181）・間 縦 10 横 8。アイコンは箱 100（インク約 70）で箱の上端がカード上端 ＋14.5、
   ラベルは 14px・字間 0.06em・行送り 25（字の上端がカード上端 ＋126）。（ホワイトニング）は 13px で 1 行目の字から 18 下。
   原本は 344 で「物が詰まる・挟ま｜る」「親知らずを抜きた｜い」と折れる（以前はここで字を詰めて 1 行にしていたが、原本どおり折る）。
   最後のカード下端 → ボタン 56 */
@media (max-width: 540px) {
  .page-home .worries .sec-head { margin-bottom: 48px; }
  /* 2 周目の実測（440/344 とも）: カード 167・行間 8（送り 175）。アイコンの箱は上から 15 で固定、1 行の字のインクは +127〜139（下から 28）。
     ラベルが折れると（344 の「物が詰まる・挟ま｜る」）カードが下へ伸びて 191、1 行目の字は +126 のまま。
     （ホワイトニング）付きは 172 で、1 行目が +115・小さい字が +133〜144 に上がる（:has が無いブラウザは 184 に伸びるだけ） */
  .page-home .worries .igrid { gap: 8px 8px; }
  .page-home .worries .igrid-card { min-height: 167px; height: 100%; justify-content: flex-start; padding: 15px 8px 21.5px; gap: 0; }   /* 行の高さに揃える（参照 344: 折れた札の隣も 191） */
  .page-home .worries .igrid-ic { flex: none; width: 100px; height: 100px; margin-bottom: 5.5px; }
  .page-home .worries .igrid-label { font-size: 14px; letter-spacing: 0.06em; line-height: 25px; word-break: normal; }   /* 部品の keep-all だと「物が詰まる・｜挟まる」。原本は「…挟ま｜る」 */
  .page-home .worries .igrid-label:has(small) { margin-top: -12px; }
  .page-home .worries .igrid-label small { font-size: 13px; line-height: 24px; margin-top: -7px; }
  .page-home .worries .sec-cta { margin-top: 48px; }   /* 実測: 最後のカード下端 3552 → ボタン 3601（56 だと 8 下がる） */
}
/* 〜540 の見出しの折れ位置は現行（「お口の悩みを解決｜しませんか？」「ウララ歯科クリニック｜について」）を幅（8.6em・10.8em）で切る。
   2026-09-25〜09-28 は Figma SP/top の折れ位置（content の titleSp に <br> を置く形）だったが、2026-09-29 に現行へ戻した（home.mjs は titleSp を使わない） */
@media (max-width: 540px) {
  .worries .sec-title { max-width: 8.6em; margin-inline: auto; }
}
@media (min-width: 541px) { .worries .igrid-label { font-size: 18px; } .worries .igrid-label small { font-size: 13px; } }   /* 参照 pc/841: 18〜19px */
@media (min-width: 1080px) { .worries .sec-head { margin-bottom: 48px; } }   /* 参照 pc: ラベル上端 2584 → 格子上端 2714（130。--head-gap の 64 だと 147） */

/* ---------- MESSAGE（縦書きは写真の左右。右→左に読むので row-reverse。1 本ごとに 24px ずつ下げる。content の enabled:false で非表示（No.62）） ---------- */
.message .sec-head { margin-bottom: clamp(32px, 4vw, 64px); }
@media (max-width: 540px) { .message .sec-head.center { text-align: left; justify-items: start; } .message .sec-head.center .sec-label { text-indent: 0; } }   /* 参照 fold344-ref-03: SP は左寄せ */
.msg-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.msg-photo { width: min(100%, 210px); }
.msg-photo img { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-m); object-fit: cover; }
.msg-lines { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 4px; }
.msg-line { --msg-fs: 15px; font-size: var(--msg-fs); letter-spacing: 0.12em; padding: 8px 6px; margin: 0; margin-top: calc(var(--i) * 20px); color: var(--c-ink-deep); }
.msg-line strong { color: var(--c-orange); }
/* SP: 左 4 本は写真の左端に、右 3 本は写真の右端に重ねる（about の SP 版と同じ形。right は 0 以上＝画面外に出さない） */
.msg-lines-l { position: absolute; left: 0; top: 0; z-index: 1; }
.msg-lines-r { position: absolute; right: 0; bottom: 0; z-index: 1; align-items: flex-end; }
.msg-lines-r .msg-line { margin-top: 0; margin-bottom: calc((2 - var(--i)) * 20px); }
.msg-people { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; margin-top: clamp(32px, 4vw, 48px); }
.msg-person { display: grid; justify-items: start; gap: 4px; }
.msg-role { display: inline-block; background: var(--c-white); color: var(--c-orange); font-size: 13px; line-height: 1.5; padding: 0 4px; }
.msg-name { display: inline-block; background: var(--c-white); color: var(--c-ink-deep); font-size: var(--fs-small); line-height: 1.5; padding: 0 4px; }
.msg-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.msg-cta .btn { max-width: 100%; }
@media (min-width: 541px) {
  .msg-photo { width: min(100%, 320px); }
  .msg-line { --msg-fs: 18px; }
  .msg-cta { flex-direction: row; justify-content: center; gap: 24px; }
}
/* 768〜: 3 列（左帯｜写真｜右帯）。写真は残り幅。1080〜 で 640px */
@media (min-width: 541px) {
  .msg-stage { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(16px, 3vw, 48px); align-items: start; justify-items: stretch; }
  .msg-lines-l, .msg-lines-r { position: static; }
  .msg-lines-r { align-items: flex-start; align-self: start; }
  .msg-lines-r .msg-line { margin-bottom: 0; margin-top: calc(var(--i) * 24px); }
  .msg-line { --msg-fs: 20px; padding: 8px; }
  .msg-photo { width: min(100%, 520px); justify-self: center; }
  .msg-photo img { aspect-ratio: 640 / 520; border-radius: var(--r-l); }
  .msg-people { max-width: 760px; margin-inline: auto; padding-inline: 32px; }
  .msg-role { font-size: 15px; }
}
@media (min-width: 1080px) {
  .msg-line { --msg-fs: 24px; letter-spacing: var(--ls-vertical); margin-top: calc(var(--i) * 32px); }
  .msg-lines-r .msg-line { margin-top: calc(var(--i) * 32px); }
  .msg-photo { width: min(100%, 640px); }
  .msg-people { max-width: 700px; padding-inline: 0; }
  .msg-cta { gap: 128px; }   /* 参照 pc1280-ref-04: 2 本のボタンは中央から ±207 */
}

/* ---------- NEWS（白カード。1080〜 は左に見出し＋イラスト、右に一覧。〜1079 は縦積み） ---------- */
.news-card { position: relative; background: var(--c-white); border-radius: var(--r-l); padding: clamp(24px, 4vw, 48px) var(--card-pad) clamp(32px, 4vw, 48px); display: grid; gap: 24px; }
.news-side { position: relative; padding-right: 110px; }
.news-side .sec-head { margin-bottom: 0; }
.news-illus { position: absolute; right: 0; top: -8px; width: 96px; }   /* 参照 fold344-ref-04: 右上に 95px */
.news-illus img { width: 100%; height: auto; object-fit: contain; }
.news-main .news-title { color: var(--c-orange); }
.news-main .sec-cta { margin-top: 32px; }
@media (min-width: 541px) {
  .news-card { border-radius: var(--r-xl); padding: 48px 40px; }
  .news-illus { width: 120px; top: -16px; }
}
/* 1080〜（参照 pc1280-ref-04）: カード 1200 幅（x 40〜1240。1440〜 は 1228）。左列 254（padding-left 126）、右列は 1184 まで（padding-right 56）。イラスト 155 はカード下端に接する */
@media (min-width: 1080px) {
  .news-sec .container-md { --container-md: 1228px; }   /* 参照: カード幅 1228（1920: 346〜1573 / 1440: 106〜1333）。1280 はガター 40 で 1200 */
  .news-card { grid-template-columns: 254px minmax(0, 1fr); column-gap: 0; padding: 72px 56px 56px 126px; min-height: 520px; }
  .news-side { padding-right: 0; display: grid; grid-template-rows: auto 1fr; }
  .news-illus { position: static; width: 155px; align-self: end; margin-bottom: -56px; }
  .news-main .sec-cta { margin-top: 56px; }
}

/* 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-03・04 の実測。C = カード上端。3 幅とも同じ値）:
   WORRIES のボタン下端 → C 97（原本はこの間に MESSAGE があり、MESSAGE のボタン → C も 97）。
   ラベルの字 C+50（上の余白 44）、受付イラストは 73 幅（高さ 91）で上端 C+37・右端はカードの内側の右端。
   最初の点線 C+140。1 件は「点線 → 17 → 日付の行 25（カテゴリの丸枠 25 高）→ 7 → タイトル 14px・行送り 24 → 17 → 点線」（1 行のタイトルで 90）。
   日付は 11px（参照 53 幅・#574D45）、丸枠は 70×25・字 12px・左右 10、日付との間 10。最後の点線 → ボタン 48、ボタン下端 → カード下端 32 */
@media (max-width: 540px) {
  .page-home .section.news-sec { padding-top: 17px; padding-bottom: 17px; }
  .page-home .news-card { padding-top: 44px; padding-bottom: 32px; gap: 31px; border-radius: 20px; }   /* 角の丸みは参照 20（左端から 5 内側で上端が 7 下がる）。最初の点線 C+140 */
  .page-home .news-illus { width: 73px; top: -7px; right: -2px; }
  .page-home .news-list .news-link { min-height: var(--tap); padding: 17px 0; gap: 7px 10px; }
  .page-home .news-list .news-date { font-size: 11px; letter-spacing: 0; line-height: 25px; }
  .page-home .news-list .chip { height: 25px; padding: 0 10px; font-size: 12px; line-height: 1; }
  .page-home .news-list .chip::before { inset: 0; }
  .page-home .news-list .news-title { font-size: 14px; letter-spacing: 0; line-height: 23.5px; }   /* 1 件の送り 参照 90（2 行で 114） */
  .page-home .news-main .sec-cta { margin-top: 48px; }
}

/* ---------- FAQ（1080〜 は左右 2 列 × 6（各 550・間隔 36）。それ未満は 1 列で a → b の順） ---------- */
/* 右端の ＋／−: 線の太さは箱の大きさに関係なく 2（Figma PC・SP とも 2。箱を線の長さに合わせて広げるので、拡大で太らせない） */
.page-home .faq-sec .acc-btn > .icon path { vector-effect: non-scaling-stroke; stroke-width: 2px; }
.faq-cols { display: grid; gap: 16px; }
.faq-sec .acc-h { text-wrap: wrap; }   /* base.css の h3 balance だと「初めてかかるの｜ですが、どうした｜らいいですか？」と 3 行に割れる */
@media (min-width: 1080px) {
  .faq-sec .container-md { --container-md: 1136px; }   /* 参照: 2 列 550 ＋ 間 36 ＝ 1136（1920: 392〜1528 / 1280: 72〜1208） */
  .faq-sec { padding-bottom: 141px; }                   /* 参照: ボタン下端 6180 → アクセスの白い面 6321（--section-y だと 155〜） */
  .faq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; align-items: start; }
}

/* 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-04・05 の実測。3 幅とも同じ値）:
   NEWS カード下端 → FAQ ラベルの字 127。U マーク（幅 184）は左端が画面の 20 外・上端が NEWS カード下端 ＋17（440/393/344 とも x −20〜164）。
   H2 の字の下端 → 1 件目 66。1 件は白・高さ 64（2 行で 79〜80）・間 12。Q は 32 の丸（線 1px・字 14px）で左 20、文は 14px・字間 0・行送り 24 で Q の 10 右、
   ＋ はインク 12（箱 18）で右 20。最後の 1 件 → ボタン 48、ボタン下端 → アクセスの面 88 */
@media (max-width: 540px) {
  .page-home .section.faq-sec { padding-top: 103px; padding-bottom: 88px; }
  .page-home .faq-sec > .smile { width: 184px; left: -20px; top: 0; bottom: auto; }
  .page-home .faq-sec .sec-head { margin-bottom: 55px; }
  .page-home .faq-cols, .page-home .faq-sec .acc-list { gap: 12px; }
  .page-home .faq-sec .acc-btn { min-height: 64px; padding: 16px 20px; gap: 10px; font-size: 14px; letter-spacing: 0; line-height: 24px; }
  .page-home .faq-sec .acc-btn .acc-q { width: 32px; height: 32px; border-width: 1px; font-size: 14px; }
  .page-home .faq-sec .acc-btn > .icon { width: 18px; height: 18px; }
  .page-home .faq-sec .sec-cta { margin-top: 48px; }
}

/* ---------- アクセス（#access。〜1079 は縦積み（参照 344/841 はカード枠なし）。1080〜 は左に白カード 533 ＋ 右に地図 600×490（原文の iframe）） ----------
   面（参照 pc1280/1440/1920-ref-05 の実測）: 白い面はあるが「白 → クリーム」へ 700px かけて溶けるごく薄い勾配（254 → 249）で、下端は見えない。
   上の角は半径 80。ピーチの被せ（--g-mouth）や下辺の段差は無い。面の上端 → カード上端 90、カード下端 → フッターの歯 ≈ 100 */
.access { position: relative; margin-top: 0; padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 128px); background: linear-gradient(180deg, var(--c-white) 0, var(--c-cream) 700px); border-radius: 48px 48px 0 0; }
.access-inner { position: relative; display: grid; gap: 32px; }
.access-card { display: grid; gap: 20px; }
.access-logo { width: min(100%, 304px); }
.access-logo img { width: 100%; height: auto; object-fit: contain; }
.access-addr { font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); }
.access-walk { font-size: var(--fs-body-l); color: var(--c-orange); }
/* 電話: 丸アイコン｜（注記／番号）の 2 列。診療時間は下段いっぱい（参照 pc1280-ref-05） */
.access-tel { display: grid; gap: 8px; }
.access-tel-link { display: flex; align-items: center; gap: 12px; min-height: var(--tap); }
.access-tel-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--c-peach-soft); color: var(--c-orange); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.access-tel-ic .icon { width: 20px; height: 24px; }
.access-tel-line { display: none; }   /* 〜599 だけ線画の受話器（参照 SP）。600〜 は従来の塗り */
@media (max-width: 540px) { .page-home .access-tel-fill { display: none; } .page-home .access-tel-line { display: block; } }
.access-tel-body { display: grid; gap: 2px; min-width: 0; }
.access-tel-note { font-size: var(--fs-xs); color: var(--c-ink); line-height: 1.6; }
.access-tel-num { font-family: var(--f-en); font-size: 26px; letter-spacing: 0.04em; color: var(--c-orange); line-height: 1.2; white-space: nowrap; }   /* 344: 12 字 ≒ 250px ＋ 丸 44 が 304 に収まる */
@media (min-width: 541px) { .access-tel-num { font-size: 32px; letter-spacing: 0.08em; } .access-tel-ic { width: 56px; height: 56px; } .access-tel-link { gap: 16px; } .access-tel-note { font-size: var(--fs-small); } }
@media (min-width: 1080px) { .access-tel-num { font-size: 40px; } .access-tel-ic { width: 60px; height: 60px; } }
.access-hours { font-size: var(--fs-small); color: var(--c-ink); }
.access-hours strong { font-size: var(--fs-body-l); }
.access-hours-time { font-family: var(--f-en); letter-spacing: 0.04em; }
.access-notes { display: grid; gap: 4px; }
/* 地図: home.json access.map.embed（原文 DOM の iframe）があれば最初から Google マップの iframe、無ければ住所＋Google マップへのリンク。
   2026-09-29: 下地のピンと道の格子（9/26 追加）を外した。ユーザー指摘「マップのアイコンが出てから Google マップが開く 2 段階」の 1 段目がこれだった。
   読み込みの一瞬は淡い無地（Google マップの読み込み中の地色に近い --c-line）だけにして、絵が入れ替わって見えないようにする（全体撮影で穴にも見えない） */
.access-map { position: relative; border-radius: var(--r-l); overflow: clip; min-height: 300px; background-color: var(--c-line); }
.access-map iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.access-map-text { display: grid; justify-items: center; align-content: center; gap: 12px; padding: 32px 24px; text-align: center; color: var(--c-ink); background: var(--c-peach-soft); }
.access-pin { width: 40px; height: 40px; color: var(--c-orange); }
.access-map-addr { font-size: var(--fs-small); line-height: 1.8; }
.access-map-station { font-size: var(--fs-small); }
.access-map-text .btn { margin-top: 8px; }
.access-map-text .i-ext { width: 14px; height: 14px; }
@media (min-width: 541px) {
  .access { border-radius: 80px 80px 0 0; }
  .access-inner { gap: 40px; }
  .access-card { padding-inline: 24px; }   /* 参照 open841-ref-06: 本文は x 65〜 */
  .access-map { min-height: 400px; }
}
/* 1080〜（参照 pc: カードは容器左端の 20 外から 533 幅（1920: 380〜913 / 1280: 60〜593）。面の上端 → カード 90。フッターは shell の margin-top（--section-y）で続く） */
@media (min-width: 1080px) {
  .access { padding: 90px 0 0; }   /* 下は 0（フッターの margin-top ＝ --section-y がそのまま歯までの間隔になる。参照は約 100） */
  .access-inner { grid-template-columns: 513px minmax(0, 1fr); column-gap: 48px; align-items: stretch; }
  .access-card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-l); padding: 44px 50px 40px; margin-left: -20px; box-sizing: border-box; }   /* 列 513 ＋ 左 20 ＝ 533 */
  .access-map { min-height: 490px; }
  .access-map iframe { min-height: 490px; }
}

/* アクセス 〜599（2026-09-24 参照 ip440/ip393/fold344-ref-05・06 の実測。T = 面の上端。393/344 は 440 と同じ値、電話番号だけ画面幅に比例）:
   面は上の角 64・白 → クリームへ 1000px かけて溶ける。ロゴ 302 幅（344 は 284）で上端 T+81・左 40。住所は左 40・16px・行送り 27・#271200（〒 の字 T+169）。
   点線は左右 20（T+278 と T+419）。電話: 丸 56（左 20・ピーチ）と番号の下端が揃い、番号は画面幅の 2/3（440: 293 幅・344: 229 幅。字の左端 x90）、
   注記「ご来院の前に…」は番号の中央に 13px。診療時間は左 36・13px（年中無休 16px・時刻 12px）・行送り 26。注記は 12px・行送り 23.5・ぶら下げ 1 字 */
@media (max-width: 540px) {
  .page-home .access { container-type: inline-size; padding-top: 80px; border-radius: 64px 64px 0 0; background: linear-gradient(180deg, var(--c-white) 0, var(--c-cream) 1000px); }
  .page-home .access-card { gap: 0; }
  .page-home .access-card > .rule { margin: 17px 0 0; }
  .page-home .access-card > .access-addr + .rule { margin-top: 32px; }
  .page-home .access-card > .access-tel + .rule { margin-top: 14px; }   /* 2 周目の実測（面の上端 = 0）: 住所 169・点線 278・注記 300・番号 327・診療時間 382・点線 419・注記 438 */
  .page-home .access-logo { width: min(302px, 100% - 20px); margin-left: 20px; }
  .page-home .access-addr { margin: 32px 0 0 20px; font-size: 16px; line-height: 1.7; letter-spacing: 0.07em; color: var(--c-ink-deep); }
  .page-home .access-walk { font-size: 18px; }
  .page-home .access-tel { margin-top: 17px; gap: 5px; }
  .page-home .access-tel-link { align-items: flex-end; gap: 12px; }
  .page-home .access-tel-ic { width: 56px; height: 56px; }
  .page-home .access-tel-ic .icon { width: 27px; height: 30px; }   /* 線画の受話器（icon('phone-line')）。参照のインク 27×30 が丸 56 の中央 */
  .page-home .access-tel-body { gap: 2px; justify-items: center; text-align: center; }
  .page-home .access-tel-note { font-size: 13px; line-height: 1.6; color: var(--c-ink-deep); }
  .page-home .access-tel-num { font-size: 10vw; font-size: 10cqw; letter-spacing: -0.035em; line-height: 1.2; }   /* Inter で原本（Roboto）の幅と字の高さに合わせる: 440 で 44px → 296 幅・字高 33 */
  .page-home .access-hours { padding-left: 16px; font-size: 13px; line-height: 26px; letter-spacing: 0.04em; color: var(--c-ink-deep); }
  .page-home .access-hours strong { font-size: 16px; letter-spacing: 0.02em; margin-right: 0.6em; }
  .page-home .access-hours-time { display: inline-block; font-size: 12px; letter-spacing: 0; line-height: 1; }   /* 時刻はひとかたまりで折る（参照 344: 「年中無休｜9:00 - 18:00（最終受付 17:30）」）。line-height 1 で行の高さを 26 のままにする */
  .page-home .access-notes { margin-top: 11px; gap: 0; font-size: 12px; line-height: 23.5px; letter-spacing: 0.08em; line-break: normal; }   /* 字の送り 参照 13.0（440 で「…2階にありま｜す。」と折れる）。0.02em だと 12.2 で 1 字多く入る */
  .page-home .access-notes li { padding-left: 1em; text-indent: -1em; }
}

/* =====================================================================================================
   Figma pc/top（718:15071・1366 幅）に合わせる（2026-09-25）。上の 1080〜 の値（原本 STUDIO の実測）をここで上書きする。
   文言・写真・項目数は content のまま（歯型バッジ 5 個・クイックリンク 4 個・お知らせ 4 件・悩み一覧ボタンあり）。
   縦の間隔は Figma の値（下の各コメント。数字は 1366 の Figma 上の y）。ほかの PC 幅は同じ値のまま中央の容器で伸縮する。
   ===================================================================================================== */
@media (min-width: 1080px) {
  /* ---- FV: 写真 253,134 1015×600 角丸 50（右は画面端から 98）。縦書きの白帯 86/155・幅 56・写真の上端より 11 下・
     字 40px 送り 48・帯の余白 上 10／下 22（8 字の帯 416 = 10 ＋ 384 ＋ 22） ---- */
  .page-home .hero { padding-top: 45px; }   /* ヘッダー 89 ＋ 45 = 写真の上端 134 */
  .page-home .hero-photo { border-radius: 50px; }
  .page-home .hero-title { left: 86px; top: 11px; gap: 13px; }
  .page-home .hero-line { padding: 10px 8px 22px; }
  /* 歯型バッジ（Group 8 810,587）: 110×107・字 18px 太字 字間 8%（2 行目の数字 27px）。中心の間隔 約 118。最後の 1 個は 115×112 で歯型だけ 21.9° 傾く（字は傾けない・16px 行送り 1.4）。
     最後の中心は写真右端の 48 左（1220）、他のバッジの下端は写真の下端より 23 上。✦ はオレンジで、最後の右上に大（インク 26×36）小（16×22）、先頭の左下に小 */
  .page-home .hero-tags { right: calc(var(--hero-pr) - 10px); bottom: 21px; padding: 0; gap: 8px; align-items: center; }
  .page-home .hero-tags li { display: flex; }
  .page-home .hero-tags .tooth-tag { width: 110px; height: 107px; }
  .page-home .hero-tags li:last-child .tooth-tag { width: 115px; height: 112px; }
  .page-home .hero-tags li:last-child .i-tooth-fill { transform: rotate(21.9deg); }
  .page-home .hero-tags .tooth-tag-txt { position: relative; z-index: 1; font-size: 18px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.7; padding: 0 0 2px 0.08em; }
  .page-home .hero-tags .tooth-tag-txt strong, .page-home .hero-tags .tooth-tag-txt b { font-size: 27px; font-weight: 700; }
  .page-home .hero-tags li:last-child .tooth-tag-txt { font-size: 16px; line-height: 1.4; }
  .page-home .hero-tags li .tooth-tag .tag-sparkle { display: block; color: var(--c-orange); right: auto; bottom: auto; }
  .page-home .hero-tags li:first-child .tooth-tag .tag-sparkle { width: 26.4px; height: 26.4px; left: -5px; top: 63px; transform: scaleX(0.727); }
  .page-home .hero-tags li:last-child .tooth-tag .tag-sparkle { width: 43.2px; height: 43.2px; left: 94px; top: 2px; transform: scaleX(0.722); }
  .page-home .hero-tags li:last-child .tooth-tag .tag-sparkle-2 { width: 26.4px; height: 26.4px; left: 112px; top: 28px; transform: scaleX(0.727); }

  /* ---- クイックリンク（Frame 48 175,776 1021×166）: 写真の下端 734 → 42。
     項目は 5 等分（Figma: 180／180／190／180／180 の 5 個・間に 1×106 の実線。5 個目はコラムの位置に「症状から探す」2026-09-26 追加） ---- */
  .page-home .quick { position: relative; z-index: 1; margin-top: 42px; }   /* z-index: 下の ABOUT の U 透かし（上端がバーの裏に潜る）より前に出す */
  .page-home .quick .qlb-list { width: min(100%, 1021px); }
  .page-home .quick .qlb-item { flex: 1 1 0; min-width: 0; }
  .page-home .quick .qlb-link { padding-inline: 4px; }
  .page-home .home-qlb .qlb-ic .qlb-svg { width: 100%; height: 100%; }   /* ほかの 4 つ（画像）と同じく箱 100×60 に収める（高さ 60・幅 73） */

  /* ---- ABOUT: 見出し（グループ 6 465,1102）はバー下端 942 の 160 下。見出し → 本文 64・本文 16px 行送り 2.2 字間 6% #574D45・本文 → ボタン 56。
     写真 4 枚（見出しの上端 H 基準・容器 1120 の端基準）: 左大 234×349 H−46・容器左 −9／左小 159×237 H+217・−96／右上小 122×184 H−118・容器右 −81（角丸 18）／右大 238×358 H+92・−22。角丸 30。
     U 透かし（718:15076）は 273 幅で x −12・上端はバー下端の 56 上（バーの裏に潜る）→ セクションは縦だけはみ出しを許す ---- */
  .page-home .about[data-allow-bleed] { overflow: clip visible; }
  .page-home .about { padding-top: 160px; padding-bottom: 112px; }   /* ボタン下端 1487 → 楕円 1647 = 160（112 ＋ FEATURES の上 48） */
  .page-home .about > .smile { width: 273px; left: max(-12px, calc(50% - 695px)); top: -56px; }
  .page-home .about .collage-about { padding: 0; }
  .page-home .about .collage-about .collage-center { padding: 0; max-width: min(560px, 100% - 440px); }   /* 本文の最長行 543（16px 字間 6%）が 1080 でも 1 行 */
  .page-home .about .sec-head { margin-bottom: 64px; }
  .page-home .about-text { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .page-home .about-cta { display: flex; justify-content: center; margin-top: 56px; }
  .page-home .about .collage-about .collage-item { bottom: auto; }
  .page-home .about .collage-about .collage-1 { left: -9px; right: auto; top: -46px; width: 234px; height: 349px; }
  .page-home .about .collage-about .collage-2 { left: -96px; right: auto; top: 217px; width: 159px; height: 237px; }
  .page-home .about .collage-about .collage-3 { right: -81px; left: auto; top: -118px; width: 122px; height: 184px; }
  .page-home .about .collage-about .collage-4 { right: -22px; left: auto; top: 92px; width: 238px; height: 358px; }
  .page-home .about .collage-about .collage-item img { border-radius: 30px; }
  .page-home .about .collage-about .collage-3 img { border-radius: 18px; }

  /* ---- FEATURES: 白い楕円 −92,1647 1549×774（左右とも画面端の 92 外）。ラベル = 楕円 +85、カード（写真）= 楕円 +314。
     イラスト 左 121 幅（見出しの 6 左・上端 +28）右 113 幅（見出しの 24 右・上端 +32）。カード 428（写真 428×321 角丸 16）・間 39、
     キャプション 20px 行送り 1.7 字間 6%・写真の 25 下。番号の歯型 68×66（Roboto 24 字間 15%）はカードの左 29・上 22 に出る。
     U 透かし（718:15449）は 265 幅で x 38・上端は楕円の 27 上。楕円の下端 → WORRIES ラベル 120。
     写真の縦横比（2026-09-29 ユーザー「前より横長になってない？もう少し縦長だった気がする」）: Figma は 428×241（16:9）だが、
     9/25 に Figma へ寄せる前と現行 urala.com は 428×321（4:3。元の写真 11 枚のうち 9 枚が 4:3 なので人物の頭も切れない）。4:3 に戻した。
     写真が 80 高くなったぶん楕円も下へ伸びる（1440 で 794 → 約 900。左右の弧の形はそのまま） ---- */
  .page-home .section.features { padding-top: 48px; padding-bottom: 120px; }
  .page-home .features .oval[data-allow-bleed] { overflow: clip visible; }
  .page-home .features .oval { --oval-pt: 85px; padding-block: 85px 40px; min-height: 774px; }
  .page-home .features .oval::before { inset: 0 -92px; }
  .page-home .features .feat-smile { width: 265px; left: max(10px, calc(50% - 645px)); top: calc(var(--oval-pt) * -1 - 27px); }
  .page-home .feat-head { gap: 0; margin-bottom: 37px; }
  .page-home .feat-illus-l { width: 121px; margin: 28px 6px 0 10px; }   /* 左 10 は左右の幅の差（24+113 − 6+121）→ 見出しが画面中央に来る */
  .page-home .feat-illus-r { width: 113px; margin: 32px 0 0 24px; }
  .page-home .feat-carousel { --feat-gap: 39px; }
  .page-home .feat-img img { aspect-ratio: 4 / 3; border-radius: 16px; }
  .page-home .feat-cap { margin-top: 25px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-home .feat-fig .tooth-badge { width: 68px; height: 66px; left: -29px; top: -22px; }
  .page-home .feat-fig .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding: 0 0 3px 0.15em; }
  .page-home .feat-fig .tooth-badge .i-tooth path { vector-effect: non-scaling-stroke; stroke-width: 2px; }   /* 線 2（アイコンの 2/50 を 68 に拡大すると 2.7 になる） */

  /* ---- WORRIES（グループ 8 445,2541）: 見出し → 格子 56。カード 226×226 角丸 16・間 24。アイコンの箱 140（上端 +30。原本の画像は余白込みなのでインクが Figma と同じ大きさになる 134 で描く）、
     ラベル 20px 行送り 1.7 字間 6%（字の箱の上端 +168）。（ホワイトニング）付きは 1 行目 +156・17px 字間 2% が +185。
     Figma にボタンは無いが content に一覧リンクがあるので残す（格子 → 56）。ボタン下端 → NEWS カード 160 ---- */
  .page-home .section.worries { padding-top: 0; padding-bottom: 160px; }
  .page-home .worries .sec-head { margin-bottom: 56px; }
  .page-home .worries .igrid { gap: 24px; }
  .page-home .worries .igrid-card { height: 226px; min-height: 0; justify-content: flex-start; gap: 0; padding: 30px 8px 0; border-radius: 16px; }
  .page-home .worries .igrid-ic { width: 140px; height: 140px; margin-bottom: -2px; }
  .page-home .worries .igrid-ic { position: relative; top: -2px; }
  .page-home .worries .igrid-ic img { width: 132px; height: 132px; }   /* 実測: インク 95×90（歯が痛い）・中心がカード上端 +94（Figma 95×90・+94） */
  .page-home .worries .igrid-label { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-home .worries .igrid-label:has(small) { margin-top: -14px; }
  .page-home .worries .igrid-label small { font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: var(--c-ink-deep); margin-top: -5px; }
  .page-home .worries .sec-cta { margin-top: 56px; }

  /* ---- NEWS（Rectangle 153 69,4506 1228×598 角丸 40）: 見出し カード +126,+72。一覧は x 458〜1241（左の列 263・右の余白 56）、上端 +72 の実線 1px #C5B5A8。
     1 件 = 16 ＋ 行 35 ＋ 16 ＋ 点線（2/2）。日付 16px #574D45、カテゴリは白い丸枠（上下 4・左右 24・16px #574D45。白いカードの上なので枠は見えない）、
     題 16px 字間 0 #E36200、間 24。ボタンは一覧の中央で最後の点線の 56 下、カード下端まで 56。受付イラスト 153 幅はカード下端に接する。カード下端 → FAQ ラベル 160 ---- */
  .page-home .section.news-sec { padding-top: 0; padding-bottom: 160px; }
  .page-home .news-card { grid-template-columns: 263px minmax(0, 1fr); padding: 72px 56px 56px 126px; border-radius: 40px; min-height: 0; }
  .page-home .news-illus { width: 153px; }
  .page-home .news-list .news-row:first-child { border-top: 1px solid var(--c-line-2); }
  .page-home .news-list .news-link { flex-wrap: nowrap; min-height: 66px; padding: 16px 0 15px; gap: 8px 24px; }   /* カテゴリの無い行も同じ高さ（送り 67） */
  /* 日付: Figma 482:735 の見た目は 13px Zen Maru Gothic・行送り 1.8（元のスタイル Inter 16 を 13 で上書き。「2020.03.04（水）」が 97 幅）。/news の一覧（news-index.css）と同じ。
     2026-09-28 まで Roboto 16px（82 幅）で大きかった。行の送り 67 はカテゴリの丸枠 35 で決まるので変わらない */
  .page-home .news-list .news-date { flex: none; font-family: var(--f-round); font-size: 13px; letter-spacing: 0; line-height: 1.8; color: var(--c-ink-soft); }
  .page-home .news-list .chip { flex: none; height: 35px; padding: 0 24px; font-family: var(--f-en); font-size: 16px; line-height: 1.7; color: var(--c-ink-soft); }
  .page-home .news-list .chip::before { inset: 0; border: 0; background: var(--c-white); }
  .page-home .news-list .news-title { flex: 1 1 0; min-width: 0; font-size: 16px; letter-spacing: 0; line-height: 1.7; color: var(--c-orange-2); }
  .page-home .news-main .sec-cta { margin-top: 56px; }

  /* ---- FAQ（Group 221 115,5264 1136）: 見出し → 2 列 82・1 件の間 12・列 → ボタン 56・ボタン下端 → アクセスの面 140。
     U 透かし（718:15072）は 273 幅で x −22・上端は FAQ ラベルの 1 上 ---- */
  .page-home .section.faq-sec { padding-top: 0; padding-bottom: 140px; }
  .page-home .faq-sec .sec-head { margin-bottom: 82px; }
  .page-home .faq-cols { row-gap: 12px; }
  .page-home .faq-sec .acc-list { gap: 12px; }
  .page-home .faq-sec .sec-cta { margin-top: 56px; }
  .page-home .faq-sec > .smile { width: 273px; left: max(-22px, calc(50% - 705px)); top: -1px; bottom: auto; }
  /* 1 件はトップ専用の小さい版（faq 501:2620 size=short・550 幅）: 左右 20・Q の丸 50 → 16 → 文（17px・幅 408）→ 16 → ＋ 20 → 20。
     共通の部品（components.css の /faq 用 482:1595: 左右 30・間 32）のままだと文が 352 幅で、左の列の 3 件が 2 行に折れていた（Figma は『子供が何歳に…』の 1 件だけ）。
     開いた版（501:2637）も左右 20（A の丸が Q の丸の真下）・下 32 */
  .page-home .faq-sec .acc-card .acc .acc-btn:has(.acc-q) { padding: 16px 20px; gap: 16px; }
  .page-home .faq-sec .acc-card .acc .acc-panel:has(.acc-a) { padding: 8px 20px 32px; }
  /* ＋: Figma は線 20・太さ 2（丸い端）。共通の絵（M12 5v14M5 12h14）は箱の 14/24 しか使わないので、箱を 20×24/14 = 34.29 にして線を 20 に。
     並びの寸法は 20 のまま（負のマージン）。開いたときの 45° 回転（components.css）は transform なのでそのまま効く（scale は使わない） */
  .page-home .faq-sec .acc-card .acc .acc-btn:has(.acc-q) > .icon { width: 34.29px; height: 34.29px; margin: -7.14px; }

  /* ---- ACCESS（面 0,6405 上の角 80・白 → クリーム。Group 95 102,6496 1162×490）: 面の上端 → カード 91。左カード 533×490（白・1px #F1EAE5・角丸 25・余白 40/50/35）、
     間 19、地図 610×490 角丸 25。カード内: ロゴ 302 → 20 → 住所 18px 行送り 1.7 字間 6% #271200（2 行）＋ 駅の行（「徒歩」「分」18px 太字・数字 24px 太字）→ 20 → 実線 →
     20 → 電話（丸 60 #F7E7DB に線画の受話器 24×27、16 右に「ご来院の前に…」16px ＋ 番号 Zen Maru 44px 字間 6%）→ 6 → 診療時間 16px（年中無休 20px・最終受付は Zen Kaku #664328）
     → 15 → 実線 → 11 → 注記 13px 行送り 1.8 #574D45。カード下端 → フッター 178 ---- */
  .page-home .access { padding: 91px 0 114px; }   /* ＋ フッターの margin-top 64 ＝ カード下端 → フッター 178 */
  .page-home .access-inner { width: min(100% - var(--gutter) * 2, 1162px); grid-template-columns: 533px minmax(0, 1fr); column-gap: 19px; }
  .page-home .access-card { margin-left: 0; gap: 0; min-height: 490px; padding: 40px 50px 35px; border: 1px solid var(--c-line); border-radius: 25px; align-content: start; }
  .page-home .access-card > .rule { border-top: 1px solid var(--c-line-2); margin: 0; }
  .page-home .access-logo { width: 302px; }
  .page-home .access-logo img { height: 47px; }
  .page-home .access-addr { margin: 20px 0 16px; font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-home .access-station { letter-spacing: 0.04em; }
  .page-home .access-walk { font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--c-orange); }
  .page-home .access-walk-num { font-size: 24px; letter-spacing: 0.09em; }
  .page-home .access-tel { margin: 20px 0 15px; gap: 6px; }
  .page-home .access-tel-link { align-items: flex-end; gap: 16px; }
  .page-home .access-tel-ic { width: 60px; height: 60px; }
  .page-home .access-tel-fill { display: none; }
  .page-home .access-tel-line { display: block; }
  .page-home .access-tel-ic .icon { width: 24px; height: 27px; }
  .page-home .access-tel-body { gap: 0; }
  .page-home .access-tel-note { font-size: 16px; line-height: 20px; color: var(--c-ink-deep); }
  .page-home .access-tel-note strong { font-weight: 700; color: var(--c-orange); }   /* 「ご予約」だけ太字・primary/normal（718:15356） */
  .page-home .access-tel-num { font-family: var(--f-round); font-weight: 500; font-size: 44px; letter-spacing: 0.06em; line-height: 1.2; color: var(--c-orange); }
  .page-home .access-hours { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .page-home .access-hours strong { font-size: 20px; font-weight: 500; }
  .page-home .access-hours-time { font-family: var(--f-round); letter-spacing: 0; }
  .page-home .access-hours-last { font-family: var(--f-kaku); font-weight: 400; color: var(--c-brown); }
  .page-home .access-notes { margin: 11px -30px 0 0; gap: 0; font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-home .access-map { min-height: 490px; border-radius: 25px; }
  .page-home .access-map iframe { min-height: 490px; }
}
@media (min-width: 1280px) { .page-home .hero { --hero-pr: 98px; } }

/* =====================================================================================================
   〜540（スマホ）は現行 urala.com の SP の組みに合わせる（2026-09-29 ユーザー「ここも現状のサイトとレイアウト違う」「そんな指示出してないで」）。
   数字は現行の 390 と 344 を下まで送って 3 秒待ってから DOM で測った値（縦の位置は 2 幅とも同じ。横は画面中央か画面端からの値）。
   現行は 540 までがスマホ、541 からはタブレットの組み（下の 541〜1079 ブロック）。上の旧ブロック（2026-09-24 の現行実測）を土台にして、
   9/25〜9/28 に Figma SP/top へ寄せていた値（写真の形・クイックリンクの位置と字・ABOUT の写真の大きさ・楕円の形・カードの字・お知らせの丸枠・アクセスの線など）をここで現行へ戻した。
   現行と違うまま残すもの（ユーザーの指示）: 歯型バッジ 5 個を画面の中に収める（9/24）・クイックリンクの「症状から探す」（9/26）・特長の写真 4:3 と人物の頭（9/26）・
   悩み格子 3 列と見出しとの間 48（9/26）・特長の下の ‹ › ボタン（9/28）・MESSAGE を出さない（修正リスト No.62）・FAQ の A の丸の色。
   ===================================================================================================== */
@media (max-width: 540px) {
  .page-home .sec-label { font-size: 14px; }   /* 現行 SP: Roboto 14px 字間 0.25em 行送り 1.7（24 高） */
  /* ---- FV: 写真は左右 5%（390: x20 幅 354／344: x17 幅 310）・y120〜540・角丸 50。縦書きの白帯は写真の上端より 16 上・左 44／92（帯 40・間 8）。
     位置と大きさ（padding-top 40・高さ 420・歯型バッジの列の中心は写真の下端の 7.5 上）は上の旧ブロックの値 ---- */
  .page-home .hero-photo { border-radius: 50px; }
  /* ---- クイックリンク（Q = 楕円の上端。390: y623 = 写真の下端 ＋83）: 168×98（部品の 〜599 の値。現行 169）・間 縦 12 横 13。
     アイコンは下端が Q+56、文字 16px 字間 6% 行送り 1.7 の箱が Q+57（現行）。矢印は上の旧ブロックの 20 ---- */
  .page-home .quick { position: relative; z-index: 1; }   /* 下の ABOUT の U 透かし（上端がクイックリンクの裏に潜る）より前に出す */
  .page-home .home-qlb .qlb-link { border-radius: 110px; padding: 11px 8px 0; gap: 1px; }
  .page-home .home-qlb .qlb-label { font-size: 16px; letter-spacing: 0.06em; line-height: 1.7; }
  .page-home .home-qlb .qlb-ic .qlb-svg { width: 50px; height: auto; }   /* 5 個目「症状から探す」の線画（2026-09-26 追加・現行に無い）: QA と同じ大きさのインク */

  /* ---- ABOUT（B = クイックリンクの下端。390: y941）: U 透かし 184 幅は右端が画面右 −9・上端 B−14（クイックリンクの裏に潜る）。
     写真（画面中央基準）: 左上 104×139 中央−179・B+90／右上 80×107 中央+101・B+130／左下 70×93 中央−219・B+217／右下 57×76 中央+153・B+274。角丸 18（右上だけ 14）。
     ABOUT ラベル B+264 → H2 24px 2 行「ウララ歯科クリニック｜について」→ 35 → 本文 13px 行送り 2.2 字間 6%（幅 307 を中央・4 行）→ 37 → ボタン 315×60。
     ボタン下端 → FEATURES の楕円 96 ---- */
  .page-home .about[data-allow-bleed] { overflow: clip visible; }
  .page-home .about { padding-top: 90px; padding-bottom: 0; }
  .page-home .about > .smile { width: 184px; left: auto; right: 9px; top: -14px; }
  .page-home .about .collage-about .collage-center { max-width: 307px; padding: 174px 0 0; }
  .page-home .about .collage-about .collage-2 { width: 70px; }
  .page-home .about .collage-about .collage-item img { border-radius: 18px; }
  .page-home .about .collage-about .collage-4 img { border-radius: 14px; }
  .page-home .about .sec-head { margin-bottom: 35px; }
  .page-home .about-text { font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .page-home .about-cta { margin-top: 37px; }

  /* ---- FEATURES（T = 楕円の上端）: 白い楕円は左右とも画面端の 90 外・高さ 530・角丸 45%（現行。Figma の上下だけが丸い形はやめた）。
     イラスト 2 体（75×82・70×82）は上端 T、左は中央 −163.5〜−88.5、右は中央 +77.5〜+147.5。ラベル T+82 → H2 24px 2 行 T+106〜188。
     カード 234（写真 234×176・角丸 16）・間 43、写真の上端 T+228。番号の歯型 41×40 は写真の左 19・上 20 に出る。
     キャプションは写真の 23 下・14px 行送り 1.7 字間 6%。箱ごと写真の中央に置き、行は左揃え（2 行目が左から始まる。現行どおり）。楕円の下端 → WORRIES ラベル 88。
     現行の楕円は 530 で止まるが、こちらは ‹ › ボタンの行（2026-09-28 医院の指摘で追加）のぶんだけ下へ伸びる ---- */
  .page-home .section.features { padding-top: 96px; padding-bottom: 88px; }
  /* 2026-09-26 医院の指摘「特長 11 選のイラストの頭が見切れている」: 楕円（data-allow-bleed = overflow: clip）は横だけ切る。縦のはみ出しは節の中に収まる */
  .page-home .features .oval[data-allow-bleed] { overflow: clip visible; }
  .page-home .features .oval { --oval-pt: 0px; min-height: 530px; padding-block: 0 24px; }
  .page-home .features .oval::before { inset: 0 -90px; border-radius: 45%; }
  .page-home .feat-head { align-items: start; margin-bottom: 12px; }
  .page-home .feat-head .sec-head { margin-top: 0; }
  .page-home .feat-illus-l { justify-self: end; margin: 0 88.5px 0 0; }
  .page-home .feat-illus-r { justify-self: start; margin: 0 0 0 77.5px; }
  .page-home .feat-carousel { --feat-w: 234px; --feat-gap: 43px; }
  /* 2026-09-26 医院の指摘「特徴の縦幅をもう少し高く」: 写真は 4:3（現行と同じ 234×176） */
  .page-home .feat-img img { aspect-ratio: 4 / 3; border-radius: 16px; }
  .page-home .feat-cap { width: fit-content; max-width: 100%; margin: 23px auto 0; font-size: 14px; line-height: 1.7; letter-spacing: 0.06em; text-align: left; }
  .page-home .feat-fig .tooth-badge { width: 41px; height: 40px; left: -19px; top: -20px; }
  .page-home .feat-fig .tooth-badge .i-tooth path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
  .page-home .feat-fig .tooth-badge-txt { font-size: 16px; letter-spacing: 0.15em; padding: 0 0 2px 0.15em; }

  /* ---- WORRIES: ラベル → H2 24px 2 行「お口の悩みを解決｜しませんか？」（現行の折れ位置。上の旧ブロックの 8.6em）→ 48 → 格子 → 55 → ボタン 264×60。
     格子は 3 列のまま（2026-09-26 に医院がスマホで見た形。現行は 2 列 173×167）。見出し → 格子 48 は 9/26 の医院の指摘「文章からカラムの間隔が空きすぎ」（現行 47）。
     3 列: マス 1fr（最大 480 を中央）・角丸 12・間 6。アイコンの箱 78（上 8）、ラベル 14px 行送り 1.7 字間 6%。行の高さは 1fr でそろえ、中身は上揃え ---- */
  .page-home .worries .sec-head { margin-bottom: 48px; }
  .page-home .worries .igrid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; max-width: 480px; margin-inline: auto; }
  .page-home .worries .igrid-item { display: grid; }
  .page-home .worries .igrid-card { min-height: 112px; height: 100%; justify-content: flex-start; padding: 8px 4px 12px; gap: 0; border-radius: 12px; }
  .page-home .worries .igrid-ic { width: 78px; height: 78px; margin-bottom: -7px; }
  /* 折れるのはテンプレートの <wbr>（home.mjs の labelBreaks: 「が・を」の後と「・」の後）だけ＝「口臭が｜気になる」「物が詰まる・｜挟まる」「歯を｜白くしたい」。
     2026-09-28: 以前の auto-phrase ＋ balance は iPhone の WebKit で効かず「口臭が気｜になる」「物が詰ま｜る・挟まる」と語の途中で折れていた（about.css と同じ組み）。
     1 行に収まらない語は最後の手段で折る（overflow-wrap） */
  .page-home .worries .igrid-label { font-size: 14px; letter-spacing: 0.06em; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; text-wrap: wrap; }
  .page-home .worries .igrid-label:has(small) { margin-top: 0; }
  /* 「（ホワイトニング）」は 1 行に収める（折れると「…ニン｜グ）」になり、その行＝全部の行の背が伸びる）。11px で 99 幅、括弧の空きを詰めると 88。
     〜379 はマスの内幅が 99 未満になるので 10px（90 幅）＋マスの左右の余白 2px（344 で内幅 93） */
  .page-home .worries .igrid-label small { font-size: 11px; line-height: 1.5; margin-top: 0; letter-spacing: 0; white-space: nowrap; text-spacing-trim: trim-both; }
  .page-home .worries .igrid-item, .page-home .worries .igrid-card { min-width: 0; }
  .page-home .worries .sec-cta { margin-top: 55px; }
  @media (max-width: 379px) {
    .page-home .worries .igrid-card { padding-inline: 2px; }
    .page-home .worries .igrid-label small { font-size: 10px; }
  }

  /* ---- NEWS（C = カードの上端）: WORRIES のボタン下端 → C 96（現行はこの間に MESSAGE があり、MESSAGE のボタン下端 → C が 96）。カードは左右 20・角丸 20。
     ラベル C+44 → H2「お知らせ」→ 32 → 一覧の最初の点線 C+141。受付イラスト 73×92 は上端 C+37・右端はカードの右端の 18 内。
     1 件 = 点線 → 17 → 日付とカテゴリの行 25（カテゴリは白地にオレンジの線 1px の丸枠 70×25・13px・オレンジ）→ 9 → 題 14px 行送り 1.7 オレンジ → 15 → 点線。
     最後の点線 → 48 → ボタン 238×60 → 32 → カード下端 ---- */
  .page-home .section.worries { padding-bottom: 0; }
  .page-home .section.news-sec { padding-top: 96px; padding-bottom: 0; }
  .page-home .news-card { padding-top: 44px; gap: 32px; border-radius: 20px; }
  .page-home .news-illus { width: 73px; top: -7px; right: -2px; }
  .page-home .news-list .news-row:first-child { border-top: var(--dash); }
  .page-home .news-list .news-link { min-height: var(--tap); padding: 17px 0 15px; gap: 9px 10px; }
  .page-home .news-list .news-date { font-family: var(--f-round); font-size: 12px; letter-spacing: 0; line-height: 25px; color: var(--c-ink-soft); }
  .page-home .news-list .chip { height: 25px; padding: 0 10px; font-size: 13px; line-height: 1; color: var(--c-orange); }
  .page-home .news-list .chip::before { inset: 0; border: 1px solid var(--c-orange); background: var(--c-white); }
  .page-home .news-list .news-title { font-size: 14px; letter-spacing: 0; line-height: 1.7; color: var(--c-orange); }

  /* ---- FAQ: NEWS カード下端 → ラベル 121。U 透かし 184 幅は x −20・上端はカード下端 ＋17。H2 → 1 件目 56。
     1 件 64（2 行で 80）・間 12・左右 20。Q は 32 の丸（線 1・Roboto 16）、文は Q の 8 右・14px 行送り 1.7。最後 → ボタン 48、ボタン下端 → アクセスの面 88 ---- */
  .page-home .section.faq-sec { padding-top: 121px; padding-bottom: 88px; }
  .page-home .faq-sec > .smile { width: 184px; left: -20px; top: 17px; bottom: auto; }
  .page-home .faq-sec .sec-head { margin-bottom: 56px; }
  .page-home .faq-cols, .page-home .faq-sec .acc-list { gap: 12px; }
  .page-home .faq-sec .acc-btn { min-height: 64px; padding: 16px 20px; gap: 8px; font-size: 14px; letter-spacing: 0; line-height: 1.7; }
  .page-home .faq-sec .acc-btn .acc-q { width: 32px; height: 32px; border-width: 1px; font-size: 16px; }
  /* ＋: 線 12・太さ 2・右端から 20。共通の絵は箱の 14/24 しか使わないので箱 12×24/14 = 20.57（線 12）。並びは 12 のまま（負のマージン）。
     文の右端 → ＋ 20（間 8 ＋ 12）で文の幅 241（390。現行と同じ。「当日予約なしでも診てもらえますか？」が 1 行に収まる） */
  .page-home .faq-sec .acc-btn > .icon { width: 20.57px; height: 20.57px; margin: -4.29px -4.29px -4.29px 7.71px; }

  /* ---- ACCESS（T = 面の上端。上の角 64）: 面の中は左右 20。ロゴ 302 幅 T+80・左 40。住所 16px 行送り 1.7 字間 6%（2 行）＋駅の行（「徒歩」「分」16px・数字 22px）T+161・左 40。
     点線 T+277。電話: 丸 56（ピーチ・左 20）の 12 右に番号（Zen Maru・画面幅の 10.5%・字間 6%・行送り 1）T+316、「ご来院の前に…」14px はその上の中央 T+298。
     診療時間 14px（年中無休 16px・時刻と最終受付 14px）T+371・左 37 → 点線 T+413 → 注記 13px 行送り 1.8 T+427（ぶら下げ 1 字）→ 62 → 地図 353×280 → 106 → フッターの口。
     線は点線（現行。Figma は実線だった） ---- */
  .page-home .access-logo { margin-left: 20px; }
  .page-home .access-addr { margin: 32px 0 0 20px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-home .access-walk { font-size: 16px; font-weight: 700; }
  .page-home .access-walk-num { font-size: 22px; letter-spacing: 0.09em; }
  .page-home .access-card > .rule { border-top: var(--dash); }
  .page-home .access-card > .access-addr + .rule { margin-top: 25px; }
  .page-home .access-tel { margin-top: 20px; gap: 14px; }
  .page-home .access-tel-link { align-items: flex-end; gap: 12px; padding-left: 0; }
  .page-home .access-tel-ic { margin-bottom: -8px; }   /* 丸の下端は番号の下端より 8 下（現行: 丸 T+309〜365・番号 T+316〜357） */
  .page-home .access-tel-body { gap: 4px; }
  .page-home .access-tel-note { font-size: 14px; line-height: 14px; }
  .page-home .access-tel-note strong { font-weight: 700; color: var(--c-orange); }
  .page-home .access-tel-num { font-family: var(--f-round); font-weight: 500; font-size: 10.5vw; font-size: 10.5cqw; letter-spacing: 0.06em; line-height: 1; color: var(--c-orange); }
  .page-home .access-hours { padding-left: 17px; font-size: 14px; line-height: 1.7; letter-spacing: 0; }
  .page-home .access-hours strong { font-size: 16px; letter-spacing: 0; margin-right: 1em; }   /* 「年中無休」→ 時刻 16（現行） */
  .page-home .access-hours-time { font-family: var(--f-round); font-size: 14px; line-height: 1.7; }
  .page-home .access-hours-last { font-family: var(--f-kaku); font-weight: 400; color: var(--c-brown); }
  .page-home .access-card > .access-tel + .rule { margin-top: 14px; }
  .page-home .access-notes { margin-top: 13px; font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-home .access { padding-bottom: 131px; }   /* ＋ フッターの margin-top ＝ 地図 → フッターの口 106 */
  .page-home .access-map { margin: 30px 0 0; min-height: 280px; height: 280px; border-radius: 16px; }
  .page-home .access-map iframe { min-height: 280px; }
}

/* ============================================================
   演出（docs/MOTION.md）— このページだけの動き。属性は templates/main/home.mjs。
   すべて html.mo の下（reduce・JS なし・Playwright〔?motion=1 なし〕では何も動かず最初から全部見える）。
   動かすのは scale / translate / rotate / clip-path / opacity の個別プロパティだけ
   （transform は hover.css と既存の配置〔最後の歯型の 18° 回転・✦ の scaleX〕が使う。個別プロパティはそれと合成される）。
   横にずらす初期状態・枠の外で 1 を超える拡大は使わない（折りたたみ 344 の横はみ出し規約）。
   ============================================================ */

/* ---- ヒーロー: 縦書きのコピーを 1 字ずつ（2026-09-26 医院の指摘「私たちの街に、ずっと通える安心を。をアニメーションで」） ----
   帯（.hero-line・wipe down）は字数ぶんの時間で等速に開き、字（.hero-ch）は読む順に 75ms ずつ遅れて、上から 0.5em 降りながらぼかしが取れて現れる。
   遅れ = 帯の遅れ（motion.js が入れる --mo-d。home.mjs が 1 本目 200ms・2 本目は 1 本目の字数 × 75ms 後）＋ 150ms ＋ 行の中の順番 × 75ms。
   17 字で約 2.2 秒。縦にしか動かさない（横幅は増えない）。字は inline-block（translate を効かせるため。並び・折り返しは素の文字と同じ）。
   reduce・JS なし・撮影（?motion=1 なし）は html.mo が付かないので最初から全部見える */
.hero { --hero-ch-step: 75ms; }
.hero-ch { display: inline-block; }
@keyframes home-ch-in { from { opacity: 0; translate: 0 -.5em; filter: blur(4px); } }
html.mo .hero-line[data-mo].is-in { animation-duration: calc(var(--n, 8) * var(--hero-ch-step) + 200ms); animation-timing-function: linear; }
html.mo .hero-line.is-in .hero-ch { animation: home-ch-in .8s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--mo-d, 0ms) + 150ms + var(--ci, 0) * var(--hero-ch-step)); }

/* ---- ヒーロー: 写真のズーム（原本 STUDIO の sd-10__content__sd-2: 1 枚ずつ scale 1.07 → 1 を 5000ms linear） ----
   hero-fade（n 枚 × 5 秒で 1 周。各枚は周期の 0〜16% が表示・16〜20% で消える・96〜100% で出る）と同じ周期・同じ位相。
   出番の 5 秒で 1.07 → 1、消えきった直後（20.5%）に 1.07 へ戻して次の出番を待つ。％は hero-fade と同じく 5 枚前提。
   写真の不透明度は触らない（最初から見えている＝LCP を遅らせない）。枠 .hero-photo が overflow: clip なので拡大ははみ出さない */
@keyframes home-hero-zoom { 0% { scale: 1.07; } 20% { scale: 1; } 20.5%, 100% { scale: 1.07; } }
@keyframes home-hero-zoom-once { from { scale: 1.07; } }
html.mo .hero-slide img { animation: home-hero-zoom calc(var(--n, 5) * 5s) linear infinite; animation-delay: calc((var(--i, 0) - var(--n, 5)) * 5s); }
html.mo .hero-slides[style="--n:1"] .hero-slide img { animation: home-hero-zoom-once 5s linear backwards; }
/* ✦: 入場（バッジの pop）が終わってから数秒おきにきらめく。縮尺は最大 1.2（実測: 344 で ✦ の右端は山でも 342.4・左端 5.2。バッジの pop の行き過ぎ中も 6.5〜341.3 で画面内） */
@keyframes home-twinkle { 0%, 70%, 100% { scale: 1; rotate: 0deg; opacity: 1; } 79% { scale: 1.2; rotate: 14deg; } 88% { scale: .82; rotate: 0deg; opacity: .7; } }
html.mo .hero-tags .tag-sparkle { animation: home-twinkle 3.8s ease-in-out 1.9s infinite; }
html.mo .hero-tags li:last-child .tag-sparkle { animation-delay: 2.5s; }
html.mo .hero-tags li:last-child .tag-sparkle-2 { animation-delay: 2.8s; }
/* ヒーローが画面外のあいだは、スライド・ズーム・きらめきを一緒に止める（.hero-inner の mo-loop。止めるのも再開も同時なので位相はずれない） */
html.mo .hero-inner.mo-offscreen :is(.hero-slide, .hero-slide img, .tag-sparkle) { animation-play-state: paused; }

/* ---- ABOUT: 写真 4 枚の視差（見せ場）。部品の unveil（下から開く）に、スクロール連動の上下を 2 本目の animation として重ねる ----
   枠ごと上下させる（中の写真を拡大しない＝角丸・見た目はそのまま）。係数は枠の高さに対する割合で、画面中央を通るとき 0（静止時と同じ位置）。
   小さい写真ほど大きく動かして奥行きを出す（1080〜 で ±14〜21px、〜767 で ±5〜9px）。縦だけ・対応ブラウザだけ（非対応は unveil だけ） */
@supports (animation-timeline: view()) {
  html.mo .page-home .about .collage-item.is-in {
    animation-name: mo-unveil, mo-parallax;
    animation-duration: calc(var(--mo-dur) * 1.3), 1s;
    animation-timing-function: var(--mo-ease), linear;
    animation-delay: var(--mo-d, 0ms), 0s;
    animation-fill-mode: backwards, both;
    animation-timeline: auto, view();
    animation-range: normal, cover;
  }
  .page-home .about .collage-1 { --mo-par: .08; }
  .page-home .about .collage-2 { --mo-par: .18; }
  .page-home .about .collage-3 { --mo-par: .22; }
  .page-home .about .collage-4 { --mo-par: .12; }
}

/* ---- FEATURES: 白い楕円が中央からふくらんで現れる（data-mo="fade" を上書き。楕円の中の見出し・イラスト・カルーセルはこれに続いて出る） ----
   2026-09-26: 切り抜くのは白い面（.oval::before）だけにした。以前は楕円の箱ごと clip-path で切っていたので、ふくらむ途中で
   見出しの左右のイラスト 2 体（頭が楕円の上端より上に出る）が欠けて見えた。箱そのものは待機中だけ透明（motion.css）で、is-in で即座に見える
   （中の見出し・イラスト・カルーセルはそれぞれの data-mo で順に出る）。
   白い面の楕円は ::before の箱に対して 27.5% → 72.5%（72.5% > 50%×√2 なので四隅まで覆う）に広がり、終わったら外れる（fill-mode: backwards）。
   切り抜くだけなので横幅は増えない */
@keyframes home-oval-bloom {
  from { opacity: 0; clip-path: ellipse(27.5% 27.5% at 50% 50%); }
  40% { opacity: 1; }
  to { clip-path: ellipse(72.5% 72.5% at 50% 50%); }
}
html.mo .page-home .features .oval[data-mo].is-in { animation-name: none; }
html.mo .page-home .features .oval[data-mo].is-in::before { animation: home-oval-bloom 1.6s cubic-bezier(.25, .8, .35, 1) var(--mo-d, 0ms) backwards; }

/* ---- イラスト（FEATURES の 2 体・NEWS の受付）: 出たあと、ゆっくり上下（下向きだけ 5px。楕円・カードの上端で切れないように）。画面外では止まる（mo-loop） ---- */
@keyframes home-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
html.mo .home-bob { animation: home-bob 6s ease-in-out infinite; }
html.mo .feat-illus-r .home-bob { animation-delay: -3s; }
html.mo .news-illus .home-bob { animation-delay: -1.5s; }

/* フッターの口の上の間隔を現行に合わせる（2026-09-26 統合時。最後の中身の下端→口の上端を現行と同じ方法で実測: tools なし・scratchpad の gap.mjs）。
   〜599 は現行 390、768〜1079 は現行 841 の値 */
/* 〜599 は上の 131（地図 → 口 105。現行 390 の出現アニメ後 104）のまま。2026-09-28 まで 26 にしていたのは出現アニメの前に測った誤り */
@media (min-width: 541px) and (max-width: 1079px) { body.page-home main > .access { padding-bottom: 106px; } }   /* 地図 → 口 120（現行 673・841 の出現アニメ後。2026-09-28 に 0 → 106） */

/* ---------- FEATURES の下の ‹ › ボタン（2026-09-28 医院の指摘「矢印のボタンで進められる UI を下にも置いては」） ----------
   現行・Figma に無い部品。形は番号の歯型（白地＋オレンジ 2px の線）に合わせた丸。カルーセルの真下の中央に 2 つ並べる。
   site.js の featCarousel が .is-live にしたときに hidden を外す（JS が無いと手で送れないので出さない）。無限に回るので端は無く、押せない状態は出ない。
   大きさ: 〜767 は 48（タップ 44 以上）・768〜1079 は 52・1080〜 は 56。いちばん長いキャプションの下 20〜24 に置く（カードの列はいちばん背の高いカードの高さ）。
   ボタンの行の分だけ楕円が下へ伸びる（1080〜 は下の余白 40 を 32 に詰めて伸びを抑える）。
   1080〜 の間隔（2026-09-29 ユーザー「左右のボタンが近すぎるかも」）: ボタンどうし 24 → 120（中心の間 80 → 176。
   中央のカード 428 の中に収まる幅 232）、いちばん長いキャプション（11 の 3 行）の字の下端 → ボタン 24 → 48（margin 16 → 40）。〜1079 は変えていない。
   ホバー（マウスの端末だけ）: オレンジ塗り＋白い矢印、矢印が進む向きへ 3px。押した瞬間は 0.94 倍 */
.feat-nav { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.feat-nav[hidden] { display: none; }
.feat-nav-btn { --fn-size: 48px; display: inline-grid; place-items: center; width: var(--fn-size); height: var(--fn-size); margin: 0; padding: 0;
  border: 2px solid var(--c-orange); border-radius: 50%; background: var(--c-white); color: var(--c-orange); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: var(--t-hover); }
.feat-nav-btn .icon { width: 22px; height: 22px; transition: transform .3s var(--ease-hover, ease); }
.feat-nav-btn:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.feat-nav-btn:active { transform: scale(.94); }
.feat-nav-btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .feat-nav-btn:hover { background: var(--c-orange); color: var(--c-white); }
  .feat-nav-prev:hover .icon { transform: translateX(-3px); }
  .feat-nav-next:hover .icon { transform: translateX(3px); }
}
@media (min-width: 541px) {
  .feat-nav { gap: 20px; margin-top: 16px; }
  .feat-nav-btn { --fn-size: 52px; }
  .feat-nav-btn .icon { width: 24px; height: 24px; }
}
@media (min-width: 1080px) {
  .page-home .features .oval { padding-bottom: 32px; }
  .page-home .feat-nav { gap: 120px; margin-top: 40px; }
  .page-home .feat-nav-btn { --fn-size: 56px; }
  .page-home .feat-nav-btn .icon { width: 26px; height: 26px; }
}

/* =====================================================================================================
   541〜1079（開いた折りたたみ・タブレット）を現行 urala.com の 841 幅に合わせる（2026-09-28 撮り直し: 下まで送って 3 秒待ってから DOM で実測。
   数字は 841 の現行の y・x）。現行の 841 は PC の部品の大きさ（見出し 32px・悩みのカード 226・ボタン 80 高）を画面幅に流し込んだ形で、
   ここの以前の値（〜767 の SP の大きさを引き伸ばした形）だと文字とアイコンが小さく、写真の並びも現行と違っていた。
   2026-09-29: 現行は 541〜911 がこのタブレットの組み（673 も 841 と縦の位置・大きさが同じで、横は中央基準）なので、帯を 768〜 から 541〜 に広げた
   （以前は 〜767 がスマホの組みで、673 では現行と別物だった）。ABOUT の写真は現行どおり画面中央基準（841 の値は変わらない。673 では左右が画面の外へ切れる）。
   912〜1079 は現行が PC の組みになるが、ここは帯の中で組みを混ぜないよう 1079 までこの組み（/about と同じ判断）。
   ===================================================================================================== */
@media (min-width: 541px) and (max-width: 767px) {
  .page-home main { --gutter: 32px; }   /* 現行の 673 の組みは 841 と同じ左右（縦書き x80・クイックリンク 600 を中央など）。〜767 の既定 20 だと 12 ずつ内へ寄る */
  .page-home .sec-head > .sec-label + * { margin-top: 0; }   /* 部品の 〜599 の −9（スマホの見出しの詰め）を外す */
}
@media (min-width: 541px) and (max-width: 1079px) {
  .page-home .sec-title { font-size: 32px; letter-spacing: 0.06em; line-height: 1.7; }
  .page-home .sec-label { font-size: 16px; }
  .page-home .sec-head { gap: 0; }   /* 現行はラベル（27 高）の直下に H2 */
  /* ボタン: 現行 841 は PC と同じ 80 高・字 18px（ABOUT 385・WORRIES 327・NEWS / FAQ 280 幅。文字は左端から 44・右は 73 空く。最小 280） */
  .page-home .sec-cta .btn, .page-home .about-cta .btn { min-height: 80px; min-width: 280px; padding: 12px 71px 12px 42px; font-size: 18px; }
  .page-home .news-sec .sec-cta .btn { padding-right: 62px; }   /* 「お知らせ一覧を見る」は現行 280（文字の右 64） */

  /* ---- FV: 写真は左右 5%（841: 42〜799・673: 34〜640）× 132〜732（高さ 600 固定・角丸 50。レイアウト上の箱は 589 で、下の 11 は次の余白に重なる）。
     縦書きの白帯は x 80／149（幅 57・字 40px 字間 0.2em）・写真の上端より 16 上。
     歯型バッジ 98×95（最後は 102×100 で歯型だけ 21.9° 傾く）・間 8。列の右端は写真の右端より 16 外、下端は写真の下端（589 の箱）より 14 上。
     字は太字 16px（数字 20px・最後は 14px 行送り 1.4）。PC の Figma 部品を 0.89 倍にした形 ---- */
  .page-home .hero { padding-top: 42px; }
  .page-home .hero-photo { margin-inline: calc(5vw - var(--gutter)); aspect-ratio: auto; height: 600px; max-height: none; margin-bottom: -11px; border-radius: 50px; }
  .page-home .hero-title { left: 48px; top: -16px; gap: 12px; }
  .page-home .hero-line { font-size: 40px; line-height: 1; letter-spacing: 0.2em; padding: 10px 8px 14px; }
  /* 列の右端は写真の右端より 16 外（現行）。ただし最後の ✦ は列より約 20 外まで出てきらめく（1.2 倍）ので、画面の右端から 23 以内には寄せない
     （673 では 16 外だと ✦ が 2px 画面の外へ出る → 右端は画面の右端から 23 ＝ 写真の右端より 11 外。841 は 16 外のまま） */
  .page-home .hero-tags { left: auto; right: max(calc(5vw - var(--gutter) - 16px), calc(23px - var(--gutter))); bottom: 14px; padding: 0; gap: 8px; align-items: center; justify-content: flex-end; }
  /* 541〜560 は 5 個（526 幅）が画面の左端から出る → 間を 8 から 3 まで詰める（561〜 は 8 のまま） */
  @media (max-width: 560px) { .page-home .hero-tags { gap: max(3px, calc((100vw - 529px) / 4)); } }
  .page-home .hero-tags li { display: flex; }
  .page-home .hero-tags .tooth-tag { width: 98px; height: 95px; }
  .page-home .hero-tags li:last-child .tooth-tag { width: 102px; height: 100px; }
  .page-home .hero-tags li:last-child .i-tooth-fill { transform: rotate(21.9deg); }
  .page-home .hero-tags .tooth-tag-txt { position: relative; z-index: 1; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.7; padding: 0 0 2px 0.08em; }
  .page-home .hero-tags .tooth-tag-txt strong, .page-home .hero-tags .tooth-tag-txt b { font-size: 20px; font-weight: 700; }
  .page-home .hero-tags li:last-child .tooth-tag-txt { font-size: 14px; line-height: 1.4; }
  .page-home .hero-tags li .tooth-tag .tag-sparkle { display: block; color: var(--c-orange); right: auto; bottom: auto; }
  .page-home .hero-tags li:first-child .tooth-tag .tag-sparkle { width: 23.5px; height: 23.5px; left: -4px; top: 56px; transform: scaleX(0.727); }
  .page-home .hero-tags li:last-child .tooth-tag .tag-sparkle { width: 38.4px; height: 38.4px; left: 84px; top: 2px; transform: scaleX(0.722); }
  .page-home .hero-tags li:last-child .tooth-tag .tag-sparkle-2 { display: block; width: 23.5px; height: 23.5px; left: 100px; top: 25px; transform: scaleX(0.727); }

  /* ---- クイックリンク: 288×136 の 2 列（間 縦横とも 24・幅 600 を中央・角丸は丸い端）、写真の下端（589 の箱）→ 40。アイコンは原寸（人物 49×60・病院 68×45・スタッフ 100×56・QA 57×44）で
     下端をそろえ（カード上端 ＋80）、文字 18px 字間 6% 行送り 1.7 はカード上端 ＋85。症状から探す（線画）は QA と同じ大きさ ---- */
  .page-home .quick { position: relative; z-index: 1; margin-top: 40px; }
  .page-home .quick .qlb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; gap: 24px; }
  .page-home .home-qlb .qlb-link { min-height: 136px; border-radius: 110px; justify-content: flex-start; padding: 16px 8px 18px; gap: 5px; }
  .page-home .home-qlb .qlb-ic { width: auto; height: 64px; align-items: flex-end; }
  .page-home .home-qlb .qlb-ic img { width: 57px; height: auto; }
  .page-home .home-qlb .qlb-ic img[src*="/cbf93b79."] { width: 49px; }
  .page-home .home-qlb .qlb-ic img[src*="/874d47a9."] { width: 68px; }
  .page-home .home-qlb .qlb-ic img[src*="/175dfffa."] { width: 100px; }
  .page-home .home-qlb .qlb-ic .qlb-svg { width: 63px; height: auto; }
  .page-home .home-qlb .qlb-label { font-size: 18px; letter-spacing: 0.06em; line-height: 1.7; gap: 8px; }
  .page-home .home-qlb .qlb-arrow { width: 20px; height: 20px; margin-right: -4px; }

  /* ---- ABOUT: クイックリンクの下端 QB → 左上の写真 120。写真は画面中央基準（841 の容器の端からの値で書くと 左上 180×240 容器左 −8・角丸 30／左下 140×187 −96・+202・角丸 30／
     右上 140×187 容器右 0・+14・角丸 14／右下 130×173 容器右 −42・+280・角丸 18）。右上＝女性の歯科医、右下＝顕微鏡（現行の並び）。
     841 の容器は 777 幅なので 左上の左端 = 中央 −396.5、左下 = 中央 −484.5、右上の右端 = 中央 +388.5、右下 = 中央 +430.5（673 の現行も同じ）。
     ラベル +120 → H2 32px 2 行 → 64 → 本文 16px 行送り 2.2 字間 6%（幅 377）→ 55 → ボタン 385×80。U 透かしは 273 幅で右端が画面右 −12・上端 QB−88（クイックリンクの裏）。
     ボタン下端 → FEATURES の楕円 121 ---- */
  .page-home .about[data-allow-bleed] { overflow: clip visible; }
  .page-home .about { padding-top: 120px; padding-bottom: 121px; }
  .page-home .about > .smile { width: 273px; max-width: none; left: auto; right: 12px; top: -88px; bottom: auto; }
  .page-home .about .collage-about { padding: 0; }
  .page-home .about .collage-about .collage-center { left: 16px; max-width: 400px; margin-inline: auto; padding: 120px 0 0; }   /* 中央の列は現行どおり画面中央より 16 右（841: 中心 436.5） */
  .page-home .about .collage-about .collage-item { bottom: auto; }
  .page-home .about .collage-about .collage-1 { left: calc(50% - 396.5px); right: auto; top: 0; width: 180px; height: 240px; }
  .page-home .about .collage-about .collage-2 { left: calc(50% - 484.5px); right: auto; top: 202px; width: 140px; height: 187px; }
  .page-home .about .collage-about .collage-4 { right: calc(50% - 388.5px); left: auto; top: 14px; width: 140px; height: 187px; }
  .page-home .about .collage-about .collage-3 { right: calc(50% - 430.5px); left: auto; top: 280px; width: 130px; height: 173px; }
  .page-home .about .collage-about .collage-1 img, .page-home .about .collage-about .collage-2 img { border-radius: 30px; }
  .page-home .about .collage-about .collage-4 img { border-radius: 14px; }
  .page-home .about .collage-about .collage-3 img { border-radius: 18px; }
  .page-home .about .sec-head { margin-bottom: 64px; }
  .page-home .about-text { max-width: 377px; margin-inline: auto; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .page-home .about-cta { display: flex; justify-content: center; margin-top: 55px; }
  .page-home .about-cta .btn { flex: none; max-width: none; }

  /* ---- FEATURES: 楕円の上端 = イラストの上端（左 110×121 は中央 −217〜−107、右 102×119 は中央 ＋100〜＋202）。U 透かしは無い。
     イラスト下端 → ラベル 0 → H2 32px 1 行 → 64 → 写真。カード 428（写真 4:3・角丸 16）・間 40、番号の歯型 68×66（字 24px 字間 15%）はカードの左 12・上 24 に出る。
     キャプション 20px 行送り 1.7 字間 6% は写真の 24 下。箱ごと写真の中央に置き、行は左揃え（2 行目が左から始まる。現行どおり）。楕円の下端 → WORRIES ラベル 121。
     白い楕円（2026-09-29 現行に合わせた）: 左右とも画面端の 90 外・高さ 700・角丸 50%（以前は部品の既定の左右 20% 外・50% / 40% だった）。
     現行の楕円は 700 で止まるが、こちらは ‹ › ボタンの行（2026-09-28 医院の指摘で追加）と 3 行のキャプションのぶんだけ下へ伸びる ---- */
  .page-home .section.features { padding-top: 0; padding-bottom: 121px; }
  .page-home .features .oval[data-allow-bleed] { overflow: clip visible; }
  .page-home .features .oval { --oval-pt: 0px; min-height: 700px; padding-block: 0 24px; }
  .page-home .features .oval::before { inset: 0 -90px; border-radius: 50%; }
  .page-home .features .feat-smile { display: none; }
  .page-home .feat-head { align-items: end; margin-bottom: 36px; }
  .page-home .feat-head .sec-head { margin-top: 0; }
  .page-home .feat-illus img { display: block; width: 100%; height: auto; }
  .page-home .feat-illus-l { width: 110px; justify-self: end; margin: 0 107px 0 0; }
  .page-home .feat-illus-r { width: 102px; justify-self: start; margin: 0 0 0 100px; }
  .page-home .feat-carousel { --feat-w: 428px; --feat-gap: 40px; }
  .page-home .feat-img img { aspect-ratio: 4 / 3; border-radius: 16px; }
  .page-home .feat-cap { width: fit-content; max-width: 100%; margin: 24px auto 0; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; text-align: left; }
  .page-home .feat-fig .tooth-badge { width: 68px; height: 66px; left: -12px; top: -24px; }
  .page-home .feat-fig .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding: 0 0 3px 0.15em; }
  .page-home .feat-fig .tooth-badge .i-tooth path { vector-effect: non-scaling-stroke; stroke-width: 2px; }

  /* ---- WORRIES: H2 → カード 56。カード 226×226・間 24 の 3 列（幅 726 を中央）。中は PC と同じ（アイコンの箱 140 は上から 30、ラベル 20px は +168）。
     最後の段 → ボタン 57 ---- */
  .page-home .section.worries { padding-top: 0; padding-bottom: 0; }
  .page-home .worries .sec-head { margin-bottom: 56px; }
  .page-home .worries .igrid { grid-template-columns: repeat(auto-fill, 226px); justify-content: center; gap: 24px; }   /* 226 固定を入るだけ並べて中央（現行: 841 は 3 列、673・768 は 2 列。以前は 3 列のまま縮めていた） */
  .page-home .worries .igrid-card { height: 226px; min-height: 0; justify-content: flex-start; gap: 0; padding: 30px 8px 0; border-radius: 16px; }
  .page-home .worries .igrid-ic { position: relative; top: -2px; width: 140px; height: 140px; margin-bottom: -2px; }
  .page-home .worries .igrid-ic img { width: 132px; height: 132px; }
  .page-home .worries .igrid-label { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-home .worries .igrid-label:has(small) { margin-top: -14px; }
  .page-home .worries .igrid-label small { font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: var(--c-ink-deep); margin-top: -5px; }
  .page-home .worries .sec-cta { margin-top: 57px; }

  /* ---- NEWS: ボタン下端 → カード 120。カード 761（容器の内側 8）・角丸 40・余白 56／40。受付イラスト 100 幅は右 24・ラベルより 8 上。
     見出し → 一覧 48。1 件は「16 → 日付 13px と丸枠（78×31・字 13px・線 1px）の行 31 → 8 → タイトル 16px 行送り 1.7 → 16」。一覧 → ボタン 56 ---- */
  .page-home .section.news-sec { padding-top: 120px; padding-bottom: 0; }
  .page-home .news-card { margin-inline: 8px; padding: 56px 40px; gap: 48px; border-radius: 40px; }
  .page-home .news-side { padding-right: 140px; }
  .page-home .news-illus { width: 100px; top: -8px; right: 24px; }
  .page-home .news-list .news-link { flex-wrap: wrap; min-height: var(--tap); padding: 16px 0; gap: 8px; }
  .page-home .news-list .news-date { font-family: var(--f-round); font-size: 13px; letter-spacing: 0; line-height: 31px; color: var(--c-ink-soft); }
  .page-home .news-list .news-date:has(+ .news-title) { line-height: 24px; }   /* カテゴリの無い行（11/7 の診療時間変更）は日付の行が低い（現行 841: 1 件 92。丸枠の行は 100） */
  .page-home .news-list .chip { height: 31px; padding: 0 12px; font-size: 13px; line-height: 1; }
  .page-home .news-list .chip::before { inset: 0; }
  .page-home .news-list .news-title { flex: 1 1 100%; min-width: 0; font-size: 16px; letter-spacing: 0; line-height: 1.7; }
  .page-home .news-main .sec-cta { margin-top: 56px; }

  /* ---- FAQ: カード下端 → ラベル 120、H2 → 一覧 80。1 件 761（容器の内側 8）・高さ 82・角丸 8・間 12。Q は 50 の丸（線 2・字 16px）で左 20、
     文は 20px 行送り 1.7 字間 2% で Q の 32 右、＋ は 24。最後の 1 件 → ボタン 56、ボタン下端 → アクセスの面 120。U 透かし 260 幅は左 −22・ラベルの高さ ---- */
  .page-home .section.faq-sec { padding-top: 120px; padding-bottom: 120px; }
  .page-home .faq-sec > .smile { width: 260px; max-width: none; left: -22px; top: 120px; bottom: auto; }
  .page-home .faq-sec .sec-head { margin-bottom: 80px; }
  .page-home .faq-cols { margin-inline: 8px; }
  .page-home .faq-cols, .page-home .faq-sec .acc-list { gap: 12px; }
  .page-home .faq-sec .acc-card .acc { border-radius: 8px; }
  .page-home .faq-sec .acc-btn { min-height: 82px; padding: 16px 20px; gap: 32px; font-size: 20px; letter-spacing: 0.02em; line-height: 1.7; }
  .page-home .faq-sec .acc-btn .acc-q { width: 50px; height: 50px; border-width: 2px; font-size: 16px; }
  .page-home .faq-sec .acc-btn > .icon { width: 41.14px; height: 41.14px; margin: -8.57px -8.57px -8.57px -16.57px; }   /* 線 24（現行 841 の＋ 24）。箱 24×24/14、並びは 24 のまま。文 → ＋ は 24（文の幅 591 = 現行） */
  .page-home .faq-sec .sec-cta { margin-top: 56px; }

  /* ---- アクセス: 面の上端 → カード 90（上の角 80）。本文は x 64（容器 ＋32）。ロゴ 302 → 20 → 住所 18px 行送り 1.7 字間 6%（駅の行も同じ、徒歩 3 分は 15px 太字）
     → 電話（丸 60・注記 14px・番号 34px 字間 6%）→ 診療時間 14px（年中無休 16px）→ 注記 13px 行送り 1.8。カード → 地図 64、地図は容器の外 8 まで（793×490） ---- */
  .page-home .access { padding-top: 90px; }
  .page-home .access-inner { gap: 64px; }
  .page-home .access-card { padding: 0 20px 0 32px; gap: 20px; }
  .page-home .access-logo { width: 302px; }
  .page-home .access-addr { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-home .access-walk { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
  .page-home .access-tel-ic { width: 60px; height: 60px; }
  .page-home .access-tel-note { font-size: 14px; line-height: 1.4; color: var(--c-ink-deep); }
  .page-home .access-tel-note strong { font-weight: 700; color: var(--c-orange); }
  .page-home .access-tel-num { font-family: var(--f-round); font-weight: 500; font-size: 4vw; letter-spacing: 0.06em; line-height: 1.2; }   /* 現行は画面幅の 4%（841: 33.6・673: 26.9） */
  .page-home .access-hours { font-size: 14px; line-height: 1.7; color: var(--c-ink-deep); }
  .page-home .access-hours strong { font-size: 16px; font-weight: 500; color: var(--c-orange); margin-right: 1em; }   /* 「年中無休」→ 時刻 16（現行） */
  .page-home .access-hours-time { font-family: var(--f-round); letter-spacing: 0; }
  .page-home .access-hours-last { font-size: 16px; color: var(--c-brown); }
  .page-home .access-tel-fill { display: none; }   /* 現行 841 は SP・PC と同じ線画の受話器（23×25） */
  .page-home .access-tel-line { display: block; }
  .page-home .access-tel-ic .icon { width: 23px; height: 25px; }
  .page-home .access-notes { gap: 0; margin-top: -8px; font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-home .access-card > .access-tel + .rule { margin-top: -3px; }   /* 現行 841: 診療時間 T+362 → 点線 T+406 → 注記 T+418（間 20 のままだと注記が 12 下がる） */
  .page-home .access-map { margin-inline: -8px; min-height: 490px; border-radius: 25px; }
  .page-home .access-map iframe { min-height: 490px; }
}

/* 1080〜 NEWS: カテゴリが無いお知らせ（現行でも空。11/7 の診療時間変更）はタイトルがカテゴリの列へ食い込み、ほかの行とタイトルの頭がずれていた。
   Figma（718:15097）は 日付｜カテゴリ（丸枠 112 前後）｜タイトル の 3 列で頭がそろう → カテゴリの丸枠 116 ＋ 間 24 ぶん空ける */
@media (min-width: 1080px) {
  .page-home .news-list .news-date + .news-title { margin-left: 140px; }
}

/* ---------- 下部 CTA の見直し案 c01（docs/CTA.md・templates/main/home.mjs。旗がオフのときは要素が無い） ----------
   地図と文字リンク「Google マップで見る」（link-arrow・別タブ）を 1 つの列 .access-mapcol に包む。1080〜 は 2 列の右の列（地図は列の高さいっぱい、その下に文字リンク） */
.access-mapcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.access-mapcol > .access-map { flex: 1 1 auto; }
.access-maplink { text-align: center; }
.access-maplink .link-arrow .icon { width: 14px; height: 14px; }
/* 1080〜: 左のカード（Figma 533×490）の高さを変えないよう、地図を文字リンクのぶん低くする（列の高さ＝カードの高さ。地図は残りいっぱい） */
@media (min-width: 1080px) {
  .page-home .access-mapcol > .access-map { flex: 1 1 0; min-height: 0; }
  .page-home .access-mapcol > .access-map iframe { min-height: 0; }
}