/* /about ウララ歯科クリニックについて（templates/main/about.mjs）
   実測: docs/design-main.md §3-2、capture/main-current/about/slices（pc1280 / open841 / fold344）
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜
   規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止・色はトークンのみ
   2026-09-18 見比べ修正: 名前の順（写真→名前→経歴）／学会・学校医は 1079 以下で 1 枚の白カード／楕円を SP で平たく／
   ロゴ装飾を楕円の外へ（本文に被らない）／小画面の見出しサイズ（参照 h1 28・h2 24・カード h3 22）／HISTORY・GROUP の余白
   2026-09-20 PC 幅の見比べ（capture/compare/about/slices pc1920 / pc1440 / pc1280 の ref）:
   原本の本文容器は min(1180, 100vw - 160)（1280 で 1120・1440 以上で 1180、1920 で x 368〜1550）。ヒーローは min(1168, 100vw - 200)。
   FEATURES カード・HISTORY の見出し列・下部ナビは 1136（1280 では容器なり／1050）。HISTORY の楕円は幅 1540 固定の中央置き。
   MESSAGE の本文列は 1280 で 460、1440 以上で 545（右余白 60）。学会/学校医カードは高さ固定でなく内容なり。
   2026-09-25 Figma 準拠に作り替え: 1080〜 は pc/about 490:3965（1366）。各ブロック冒頭のコメントが正（上の原本実測値より優先）。
   768〜1079 は 2026-09-28 に現行 urala.com の 841 の組みへ（MISSION・LOGO → 見出し・MESSAGE・FEATURES・HISTORY・GROUP・下部ナビ。ファイル後半の 600〜1079 の 2 ブロック）。
   2026-09-29: 〜1079 は全部 現行 urala.com の組み（ユーザー「なんでこんな間隔空いててレイアウトも勝手に変えてるん？」）。
   9/25〜28 の 〜767 の Figma SP/about の上書きは外し、〜599 は 〜599 ブロック（現行 390・344）、600〜767 は 768〜1079 と同じ組み（現行 673 = 841 の組み）。 */

/* ---------- ヒーロー（波形の下辺は画像に透過で焼き込み済み。PC は 3:1、それ未満は 3:2 を <picture> で出し分け） ---------- */
.ab-hero { padding-top: 8px; }
.ab-hero picture { display: block; }
.ab-hero-img { width: 100%; max-width: 1168px; height: auto; margin-inline: auto; object-fit: contain; }
.page-about .page-head { padding-bottom: clamp(48px, 6vw, 96px); }
/* 参照 344: H1 28px・H2 24px。tokens の clamp は中間値が下限を上回るため 344 でも 38/27 になる（tokens 側の課題。ここでは about だけ実測に合わせる） */
@media (max-width: 599px) {
  .page-about .page-head h1.sec-title { font-size: 28px; }
  .page-about .sec-title { font-size: 24px; }
}

/* ---------- MESSAGE 理事長ご挨拶 ---------- */
.ab-message.section { padding-top: 0; }
.ab-msg { display: grid; gap: 40px; }
/* 写真＋縦書き 4 本。写真幅を基準に絶対配置。344: 写真 200 / 帯 40 → 右端 302px ≦ 304px、左端 +6px */
.ab-figure { --ph-w: 200px; --vt-w: 40px; --step: 40px; position: relative; width: var(--ph-w); margin-inline: auto; min-height: 520px; }
.ab-photo img { width: 100%; height: auto; display: block; }
.ab-catch { margin: 0; }
.ab-vt { position: absolute; top: 0; writing-mode: vertical-rl; font-family: var(--f-round); font-size: 22px; line-height: 1; letter-spacing: var(--ls-vertical); color: var(--c-orange); background: var(--c-white); padding: 8px; width: var(--vt-w); box-sizing: border-box; z-index: 1; }
.ab-vt-1 { left: calc(100% + 10px); top: 0; }
.ab-vt-2 { left: calc(100% - 30px); top: var(--step); }
.ab-vt-3 { left: -8px; top: calc(var(--step) * 2); }
.ab-vt-4 { left: -46px; top: calc(var(--step) * 3); }
.ab-name { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.ab-name-role { font-size: var(--fs-xs); color: var(--c-ink-deep); }
.ab-name-txt { font-family: var(--f-round); font-size: var(--fs-lead); color: var(--c-ink-deep); letter-spacing: 0.06em; }
/* 名前は写真の下（全幅）。本文列の頭の複製は PC だけ */
.ab-name-side { margin-top: 28px; padding-left: 8px; }
.ab-name-dup { display: none; }
.ab-career { margin-top: 24px; padding: 20px 12px; border-top: var(--dash); border-bottom: var(--dash); }
.ab-career-list { margin: 0; display: grid; gap: 12px; }
.ab-career-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: var(--fs-xs); line-height: 1.8; }
.ab-career-row dt { color: var(--c-brown); }
.ab-career-row dd { margin: 0; color: var(--c-ink); }
.ab-positions { margin-top: 12px; display: grid; gap: 8px; font-size: var(--fs-xs); line-height: 1.8; color: var(--c-ink); }
.ab-msg-body { font-size: var(--fs-body); line-height: 1.9; }
.ab-msg-body p + p { margin-top: 1.4em; }
/* 所属学会他・学校医: 1079 以下は 1 枚の白カードに 2 群を縦積み（参照 344/841）。PC は 2 枚の白カード */
.ab-msg-cards { display: grid; gap: 40px; margin-top: 64px; background: var(--c-white); border-radius: var(--r-l); padding: 40px 28px 44px; }
.ab-mcard { position: relative; background: none; border-radius: 0; padding: 0; }   /* .card の白背景は PC でだけ使う */
.ab-mcard-title { font-size: 16px; color: var(--c-orange); letter-spacing: 0.04em; margin-bottom: 20px; }
.ab-bullets { display: grid; gap: 14px; font-size: var(--fs-small); line-height: 1.7; color: var(--c-ink); }
.ab-bullets li { padding-left: 1em; text-indent: -1em; }
.ab-bullets li::before { content: "・"; }
.ab-mcard-ic { display: none; width: 64px; color: var(--c-brown); }
.ab-mcard-ic img { width: 100%; height: auto; }

/* ---------- MISSION ---------- */
.ab-mission .smile { top: -2%; right: -14%; }
.ab-mission-grid { display: grid; gap: 24px; padding-top: 16px; }
.ab-mc-line { display: block; }   /* キャッチの行（〜767 は inline-block） */
.ab-mission-catch { font-family: var(--f-round); font-size: var(--fs-lead); line-height: 1.7; color: var(--c-orange); letter-spacing: 0.04em; }
.ab-mission-body { font-size: var(--fs-body); line-height: 2; max-width: 680px; }
.ab-mission-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.ab-mission-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); }

/* ---------- LOGO CONCEPT（白い楕円パネル。装飾スマイルは楕円の外で右下へはみ出す） ---------- */
.ab-logo.section { position: relative; padding-block: 0; overflow-x: clip; overflow-y: visible; }
.ab-oval { --oval-pad: clamp(64px, 8vw, 128px); padding-block: var(--oval-pad); }
/* 1079 以下は横に大きく張り出した平たい弧（参照 344/841 は側面が画面外）。PC は横長の楕円 */
.ab-oval::before { inset: 0 -40%; border-radius: 50% / 35%; }
.ab-logo-head { margin-bottom: 40px; }
.ab-logo-head::after { content: ""; width: 130px; border-top: var(--dash); justify-self: center; margin-top: 24px; }
.ab-logo-grid { display: grid; gap: 40px; justify-items: center; }
.ab-logo-mark { width: min(200px, 60vw); }
.ab-logo-mark img { width: 100%; height: auto; }
.ab-logo-body { font-size: var(--fs-small); line-height: 2.2; letter-spacing: 0.04em; color: var(--c-ink); width: 100%; }
.ab-logo-decor { position: absolute; right: 0; bottom: 0; width: clamp(150px, 24vw, 278px); transform: translateY(20%); z-index: 2; pointer-events: none; }
.ab-logo-decor img { width: 100%; height: auto; display: block; }

/* ---------- FEATURES 番号カード ---------- */
.ab-features.section { padding-top: max(var(--section-y-s), 64px); }   /* 参照 344: 楕円の下端から FEATURES まで約 70px */
.ab-ft-groups { display: grid; gap: 32px; }
.ab-ft-group { padding: 32px 20px 24px; }
.ab-ft-head { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: var(--dash); }
.ab-ft-head .tooth-badge { flex: none; }
.ab-ft-h3 { font-size: var(--fs-h2); line-height: 1.5; }
.ab-ft-list { display: grid; }
.ab-ft-item { display: grid; grid-template-areas: "media" "title" "body"; gap: 20px; padding-block: 32px; }
.ab-ft-item + .ab-ft-item { border-top: var(--dash); }
.ab-ft-title { grid-area: title; font-size: clamp(18px, 1rem + 0.3vw, 20px); line-height: 1.6; color: var(--c-orange); letter-spacing: 0.06em; }
.ab-ft-media { grid-area: media; position: relative; }
.ab-ft-media > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-m); }
.ab-ft-ic { position: absolute; right: -4px; bottom: -14px; width: 56px; color: var(--c-brown); }
.ab-ft-ic img { width: 100%; height: auto; }
.ab-ft-body { grid-area: body; font-size: var(--fs-body); line-height: 1.9; color: var(--c-ink); }
@media (max-width: 599px) {
  /* 参照 344: 歯型バッジ 46px・見出し 22px */
  .ab-ft-head .tooth-badge { width: 48px; height: 46px; }
  .ab-ft-head .tooth-badge-txt { font-size: 14px; padding-bottom: 4px; }
  .ab-ft-h3 { font-size: 22px; }
}

/* ---------- HISTORY 横スクロールの年表（ピーチ〜レモンの楕円は CSS。2MB の SVG は使わない） ---------- */
.ab-history.section { position: relative; padding-top: clamp(112px, 15vw, 216px); padding-bottom: var(--section-y); }
.ab-history::before { content: ""; position: absolute; left: -24%; right: -24%; top: 0; height: clamp(200px, 34vw, 440px); border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: linear-gradient(180deg, rgba(249, 246, 244, 0) 80%, var(--c-cream) 100%), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, var(--c-hero-top) 0%, var(--c-hero-mid) 42%, var(--c-cream) 100%); background-blend-mode: normal, overlay, normal; z-index: 0; }
/* 楕円の粒（2026-09-28）: 現行 urala.com の HISTORY の楕円（739534a2 の SVG）と Figma 490:3971 は、黒の雑音 PNG を不透明度 40%・overlay・0.8 倍で重ねている。
   assets/img/ab-grain.png（MISSION の背景と同じタイル。説明は 1080〜 の MISSION の節）を全幅で敷く */
.ab-history > * { position: relative; z-index: 1; }
.ab-hist-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ab-hist-sechead { margin-bottom: 0; }
.ab-hist-nav { display: flex; gap: 12px; flex: none; padding-bottom: 4px; }
.ab-hist-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-2); color: var(--c-ink-deep); display: inline-flex; align-items: center; justify-content: center; }
.ab-hist-btn .icon { width: 18px; height: 18px; }
.ab-hist-rule { margin: 20px 0 24px; }
.ab-hist-track { display: flex; justify-content: flex-start; align-items: stretch; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 4px max(var(--gutter), calc((100% - var(--container)) / 2)) 12px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.ab-hist-card { flex: 0 0 min(280px, 72vw); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--c-white); border-radius: var(--r-m); padding: 40px 32px 32px; min-height: 420px; }
.ab-hist-year { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: var(--dash); }
.ab-hist-y { font-family: var(--f-en); font-size: 32px; letter-spacing: 0.1em; line-height: 1.1; color: var(--c-orange); }
.ab-hist-era { font-size: var(--fs-xs); color: var(--c-orange); }
.ab-hist-text { margin-top: 24px; font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); }
.ab-hist-photo { margin-top: auto; padding-top: 20px; }
.ab-hist-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-s); }

/* ---------- GROUP グループ紹介（上辺が弧の白い面。下は背景色へ溶ける） ---------- */
.ab-group { background: linear-gradient(180deg, var(--c-white) 0%, var(--c-white) 55%, var(--c-cream) 100%); border-radius: 40px 40px 0 0; padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 6vw, 96px); }
.ab-group-grid { display: grid; gap: 48px; }
.ab-group-item { padding-inline: 20px; }
.ab-group-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-l); }
.ab-group-name { margin-top: 24px; font-size: 20px; color: var(--c-orange); line-height: 1.5; }
.ab-group-body { margin-top: 16px; font-size: var(--fs-small); line-height: 1.9; }
.ab-group-addr { margin-top: 12px; font-size: var(--fs-small); }
.ab-group-btn { margin-top: 28px; width: 100%; }
.ab-group .smile { display: none; }   /* 右上の大きなスマイルは 1080〜 だけ（Figma PC 527:3774。Figma SP・現行には無い） */

/* ---------- 下部ナビ 4 カード ---------- */
.ab-pagenav.section-tight { padding-top: 16px; padding-bottom: clamp(48px, 6vw, 96px); }

/* ============ 600〜（横広スマホ・展開の狭い側） ============ */
@media (min-width: 600px) {
  .ab-figure { --ph-w: 300px; min-height: 560px; }
  .ab-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ab-mcard-school .ab-bullets { grid-template-columns: 1fr; }
  .ab-group-item { padding-inline: 0; }
  .ab-group-btn { width: auto; }
  .ab-hist-y { font-size: 36px; }
}

/* ============ 600〜（768〜1079 と同じ組みの土台。2026-09-29 から 600〜767 も含める＝現行 urala.com は 541〜910 が 841 と同じ組み（673 で実測）） ============ */
@media (min-width: 600px) {
  .ab-figure { --ph-w: 400px; --vt-w: 44px; --step: 44px; min-height: 600px; }
  .ab-vt { font-size: 24px; padding: 10px 8px; }
  .ab-vt-1 { left: calc(100% + 10px); }
  .ab-vt-2 { left: calc(100% - 37px); }
  .ab-vt-3 { left: 5px; }
  .ab-vt-4 { left: -43px; }
  .ab-name-side { padding-left: 32px; }
  .ab-career { padding: 24px 32px; }
  .ab-career-row { grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
  .ab-msg-body { line-height: 2; }
  .ab-msg-cards { padding: 48px 32px 56px; gap: 56px; }
  .ab-mcard-school { padding-right: 140px; }
  .ab-mcard-ic { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 80px; margin: 0; }
  .ab-mission-grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 0; }
  .ab-mission-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
  .ab-logo-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: center; justify-items: start; max-width: 720px; margin-inline: auto; }
  .ab-ft-group { padding: 48px 40px 32px; }
  .ab-ft-head { gap: 24px; padding-bottom: 32px; }
  .ab-ft-item { padding-block: 40px; }
  /* 01・03: 写真｜見出し＋本文 の 2 列 */
  .ab-ft-item { grid-template-areas: "media title" "media body"; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 16px; align-items: start; }
  .ab-ft-ic { width: 64px; right: -8px; bottom: -16px; }
  /* 02（4 枚）: 2 列 × 2 段。列の間は点線の縦線 */
  .ab-ft-n4 .ab-ft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-ft-n4 .ab-ft-item { grid-template-areas: "media" "title" "body"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 20px; }
  .ab-ft-n4 .ab-ft-item + .ab-ft-item { border-top: 0; }
  .ab-ft-n4 .ab-ft-item:nth-child(odd) { border-right: var(--dash); padding-right: 32px; }
  .ab-ft-n4 .ab-ft-item:nth-child(even) { padding-left: 32px; }
  .ab-ft-n4 .ab-ft-item:nth-child(n + 3) { border-top: var(--dash); }
  .ab-hist-btn { width: 48px; height: 48px; }
  .ab-hist-card { flex-basis: calc(50% - 32px); padding: 48px 32px 32px; min-height: 480px; }
  .ab-hist-y { font-size: 40px; }
  .ab-group { border-radius: 64px 64px 0 0; }
  .ab-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
  .ab-group-name { font-size: var(--fs-h3); }
}

/* ============ 1080〜（PC）: Figma 医院 pc/about 490:3965（1366 幅）に合わせる（2026-09-25） ============
   数値は 1366 幅での Figma の絶対座標から。本文容器は Figma どおり 1136（1366 で x115〜1251）。1080〜1365 は min(1136, 100vw − 160) に縮む。
   中身（文章・写真・項目数）は content/ のまま。Figma の仮文言（創業 107 年・「ウララ歯科について」等）は使わない。 */
@media (min-width: 1080px) {
  .page-about .main { --container: 1136px; --gutter: 80px; }

  /* ---- ヒーロー（482:4154）: 写真 1170×386・x98・y151（ヘッダー 89 の下 62）→ ABOUT 18px（写真の下 20）→ H1 40px ---- */
  .ab-hero { padding-top: 62px; }
  .ab-hero .container { width: min(100% - 196px, 1170px); }
  .ab-hero-img { max-width: 1170px; }
  .page-about .page-head { padding: 20px 0 81px; }   /* H1 の下端 656 → MESSAGE ラベル 737 */
  .page-about .page-head .sec-label { font-size: 18px; line-height: 1.7; }

  /* ---- MESSAGE ---- 見出し下端 818 → 写真 893（75）。左列 560（写真は容器 +64）｜右列 538（x675）｜右余白 38 */
  .ab-message .sec-head { margin-bottom: 75px; }
  .ab-msg { grid-template-columns: minmax(0, 1fr) min(538px, 39.4vw); column-gap: 0; padding-right: 38px; }
  .ab-msg-side { padding-left: 64px; }
  /* 写真 368×478（490:4910）。縦書きの帯（645:8051 ほか）: 26px・字送り 28.6（行高 1.1）・字間 6%。白帯 48 幅・上 7／下 15。
     帯の左端と上端は写真基準: 1 行目 +400/+2、2 行目 +334/+58、3 行目 −8/+90、4 行目 −77/+140。4 行目の下端 = 写真上端 +566 */
  .ab-figure { --ph-w: min(368px, 26.94vw); --vt-w: 48px; width: var(--ph-w); margin-inline: 0; min-height: 566px; }
  .ab-photo img { aspect-ratio: 368 / 478; object-fit: cover; }
  .ab-vt { font-size: 26px; line-height: 28px; letter-spacing: 0.1em; padding: 7px 10px 15px; }
  .ab-vt-1 { left: calc(100% + 32px); top: 2px; }
  .ab-vt-2 { left: calc(100% - 34px); top: 58px; }
  .ab-vt-3 { left: -8px; top: 90px; }
  .ab-vt-4 { left: -77px; top: 140px; }
  /* 名前は右列の頭だけ（Figma PC に写真下の名前は無い）。写真上端 +35・理事長 16／名前 24・間 21 */
  .ab-name-side { display: none; }
  .ab-msg-main { padding-top: 35px; }
  .ab-name-dup { display: block; }
  .ab-name { gap: 21px; align-items: baseline; }
  .ab-name-role { font-size: 16px; line-height: 1.7; letter-spacing: 0; }
  .ab-name-txt { font-size: 24px; line-height: 1.7; letter-spacing: 0; }
  /* 本文（490:4903 / 645:8100）: 16px・行高 2.2・字間 6%・#574D45。名前の下 49、段落の間 41 */
  .ab-msg-body { margin-top: 49px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-msg-body p + p { margin-top: 41px; }
  /* 経歴（494:6393）: 480 幅・四辺の点線・上下 24／左右 32。写真の左 −70（容器 −6）、縦書きの下端から 49。
     年 16px/1.7（列 44）→ 間 40 → 本文 13px/1.8、行の間 8。色はすべて #574D45 */
  .ab-career { margin: 49px 0 0 -70px; width: min(480px, calc(100% + 46px)); padding: 24px 32px; border: 1px dashed var(--c-line-2); }
  .ab-career-list { gap: 8px; }
  .ab-career-row { grid-template-columns: 44px minmax(0, 1fr); gap: 40px; font-size: 13px; line-height: 1.8; letter-spacing: 0; }
  .ab-career-row dt { font-size: 16px; line-height: 1.7; white-space: nowrap; color: var(--c-ink-soft); }
  .ab-career-row dd { color: var(--c-ink-soft); }
  .ab-positions { margin-top: 8px; gap: 8px; font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink-soft); }
  /* 所属学会他・学校医（494:6360 / 645:8081）: 576×330 の白 2 枚・間 37・角丸 16・上下 40／左右 32。x70 = 容器 −45（右は +8）。本文の下 64 */
  .ab-msg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 37px; margin: 64px -8px 0 -45px; background: none; border-radius: 0; padding: 0; }
  .ab-mcard { background: var(--c-white); border-radius: 16px; min-height: 330px; padding: 40px 32px; }
  .ab-mcard-school { padding-right: 140px; }
  .ab-mcard-title { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; margin-bottom: 8px; }
  /* 項目: 16px・行高 2.2・字間 6%・#574D45。点なし。学会は 2 列（2 列目は +235）・行の間 8 */
  .ab-bullets { grid-template-columns: 235px minmax(0, 1fr); column-gap: 0; row-gap: 8px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-mcard-school .ab-bullets { grid-template-columns: 1fr; }
  .ab-bullets li { padding-left: 0; text-indent: 0; }
  .ab-bullets li::before { content: none; }
  /* 学校医の線画（645:8218 ほか 94×163 の群）: カードの右 29・下 38 */
  .ab-mcard-ic { top: auto; bottom: 38px; right: 29px; transform: none; width: 91px; }
}
/* 1080〜1279: カード内が 404〜 と狭く、学会名（最長 14 字）が 2 列だと折れるので 1 列 */
@media (min-width: 1080px) and (max-width: 1279px) {
  .ab-bullets { grid-template-columns: 1fr; }
}
@media (min-width: 1080px) {

  /* ---- MISSION（630:9319）---- カードの下 60 から背景（1110 高）。ラベルは背景上端 +112。
     背景: #F9F6F4 → #FFE2CA → #FFF9CC の縦グラデ（下ほど黄）＋粒＋下端 929〜1038 で地色へ溶ける。楕円（LOGO）がこの上に重なる。
     粒（2026-09-28 ユーザー「背景も少し間違えている」）: Figma の 2 枚目の塗り＝黒の雑音 PNG（b61a10c7）を不透明度 40%・OVERLAY・TILE 0.8 倍。
     assets/img/ab-grain.png は その雑音の左上 128px に 40% を焼き込んだタイル（16 段・8KB）で、102.4px（＝128 × 0.8）で敷いて overlay。
     overlay は明るい面ほど効きが弱い（暗くなる量 = 不透明度 ×（1 − 下の色））ので、クリームではほぼ見えず、ピーチの帯で細かな紙目になる（現行 HISTORY の楕円と同じ見え方） */
  .ab-message.section { padding-bottom: 60px; }
  /* 縦は切らない（2026-09-28 照合）: 節には data-allow-bleed（base.css の overflow:clip）が付いていて、背景（::before 1110 高）が節の高さ（約 823）で
     水平に切れ、ピーチの帯の下辺が楕円の外（画面の両脇）に直線の段差として見えていた。Figma 630:9319 は楕円の下まで続き 929〜1038 で地の色へ溶ける。
     横は clip のまま（スマイル・写真の列の横はみ出しは切る）。::before は z-index 0 なので、後に来る LOGO の楕円（.ab-oval）が上に重なる */
  .page-about .ab-mission.section { position: relative; padding-top: 112px; padding-bottom: 0; overflow-x: clip; overflow-y: visible; }
  .ab-mission::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1110px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) 929px, var(--c-cream) 1038px), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, var(--c-cream) 282px, #FFE2CA 765px, #FFF9CC 1049px);
    background-blend-mode: normal, overlay, normal; }
  /* スマイル（527:3769）344 幅・背景上端 +38・右端 = 容器の右 +40 */
  .ab-mission .smile { --smile-w: 344px; top: 38px; right: calc((100% - var(--container)) / 2 - 40px); }
  /* ラベル・キャッチは容器 +46。キャッチ 26px/1.7・字間 6%、本文はキャッチの 393 右（x554・684 幅）16px/2.2・字間 6%。見出しの下 106 */
  .ab-mission .sec-head { margin-bottom: 106px; }
  .ab-mission .sec-head, .ab-mission-grid { padding-left: 46px; }
  .ab-mission-grid { grid-template-columns: 393px minmax(0, 684px); gap: 0; padding-top: 0; }
  .ab-mission-catch { font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; }
  .ab-mission-body { max-width: none; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  /* 写真 4 枚（490:4056）: 361×247・角丸 16・間 40・2/4 枚目は 24 下げる。列は 1564 幅で中心が画面中央の 25 左（1366 で x −124）。本文の下 76 */
  .ab-mission-photos { display: flex; align-items: flex-start; gap: 40px; width: 1564px; margin: 76px 0 0 calc(50% - 807px); }
  .ab-mission-ph { flex: none; width: 361px; }
  .ab-mission-ph:nth-child(even) { margin-top: 24px; }
  .ab-mission-ph img { aspect-ratio: 361 / 247; border-radius: 16px; }

  /* ---- LOGO CONCEPT（楕円 490:3966）: 1499×724 の白い楕円（中心 = 画面中央）。上端は下げた写真の下端より 38 上（写真が楕円に重なる）。
     頂点 → ラベル 158、H2 → 点線 130 幅 37、点線 → ロゴ 47。ロゴ 206×250｜間 134｜本文 525（計 865 を中央）。最下端まで 150
     2026-09-28 ユーザー「要素の被り具合や写真の配置の感じが少し違う」: 楕円の幅を 1499px 固定から画面幅の 1499/1366（109.74%）に。
     1366 では Figma と同じ（x −67・1499 幅）。固定だと 1440 以上で楕円の両端が画面の中に入り、白い楕円が帯ではなく浮いた小判に見え、
     両端の写真が楕円に掛からなくなっていた（1920 で楕円 x210〜1709、写真 x153〜）。現行 urala.com も画面幅の 110%・x −5%（1440 で 1584・1920 で 2112）。
     3 連スマイルは楕円の右端から 129 内側（Figma 1366: 楕円の右 1432・飾りの右 1303。現行も 1080〜1920 で同じ 129） ---- */
  .ab-logo.section { margin-top: -38px; }
  .ab-oval { padding-block: 158px 150px; }
  .ab-oval::before { inset: 0 auto; left: 50%; width: calc(100% * 1499 / 1366); transform: translateX(-50%); border-radius: 50%; }
  .ab-logo-head { margin-bottom: 47px; }
  .ab-logo-head::after { margin-top: 37px; }
  .ab-logo-grid { grid-template-columns: 206px minmax(0, 1fr); gap: 134px; max-width: 872px; align-items: start; }   /* Figma 865。本文の最長行（31 字）が 525 では 1 字こぼれるので 7 足す */
  .ab-logo-mark { width: 206px; }
  .ab-logo-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  /* 3 連スマイル（494:6348）278 幅: 右端 = 楕円の右端 −129（1366 で左端 1025）、上端 = 楕円の頂点 +508（楕円の下へ 143 はみ出す） */
  .ab-logo-decor { left: calc(50% + 50% * 1499 / 1366 - 129px - 278px); right: auto; top: 508px; bottom: auto; width: 278px; transform: none; }

  /* ---- FEATURES ---- 楕円の下端 → ラベル 160、H2 → カード 64。カード 1136・角丸 16・上 67／左右 95／下 47（501:2322） */
  .page-about .ab-features.section { padding-top: 160px; padding-bottom: 78px; }   /* 最後のカード → HISTORY の背景の頂点 78 */
  .ab-features .sec-head { margin-bottom: 64px; }
  .ab-ft-groups { gap: 40px; max-width: none; }   /* Figma の間は 48 と 28 で不揃い → 間を取って 40 */
  .ab-ft-group { padding: 67px clamp(48px, 7vw, 95px) 47px; border-radius: 16px; }
  /* 見出し（501:2469）: 歯型 68×66・「01」Roboto 24／字間 15%｜間 24｜H3 32px/1.7・字間 6%。見出しの下 32 → 点線 → 32 */
  .ab-ft-head { gap: 24px; padding-bottom: 32px; }
  .ab-ft-head .tooth-badge { width: 68px; height: 66px; }
  .ab-ft-head .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding: 0 0 6px 0.15em; }
  .ab-ft-h3 { font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; }
  /* 01・03 の行（501:2369）: 縦書き見出し 66｜22｜写真 397×265｜89｜本文 370（上下中央）。行の上下 32・行の間は点線 */
  .ab-ft-item { grid-template-areas: "title . media . body"; grid-template-columns: 66px 22px minmax(0, 397fr) 89px minmax(0, 370fr); grid-template-rows: auto; column-gap: 0; row-gap: 0; align-items: center; padding-block: 32px; }
  /* 縦書き見出し: 26px・字送り 31.2（行高 1.2）・2 行の列送り 33 */
  .ab-ft-title { writing-mode: vertical-rl; text-orientation: upright; font-size: 26px; line-height: 33px; letter-spacing: 0.2em; align-self: start; justify-self: start; margin-top: 24px; }
  .ab-ft-media > img { aspect-ratio: 397 / 265; border-radius: 16px; }
  /* 写真右下の線画アイコン（632:8226 ほか）: 写真の右 +44・下 +38 まではみ出す */
  .ab-ft-ic { width: 80px; right: -44px; bottom: -38px; }
  .ab-ft-body { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  /* 02（4 枚。501:2442）: 2 列（各 421・間 102 の中央に縦の点線）。各セル = 縦書き見出し 26｜26｜写真 369×245 → 32 → 本文 */
  .ab-ft-n4 .ab-ft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-ft-n4 .ab-ft-item { grid-template-areas: "title . media" "title . body"; grid-template-columns: minmax(26px, auto) 26px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0; row-gap: 32px; align-items: start; }
  .ab-ft-n4 .ab-ft-title { line-height: 26px; letter-spacing: 0.27em; margin-top: 0; }   /* 字送り 33（Figma の枠 26×263 に 8 字） */
  .ab-ft-n4 .ab-ft-title:has(br) { line-height: 33px; }   /* 2 行の見出し（待ち時間を…）は 01・03 と同じ列送り 33 */
  .ab-ft-n4 .ab-ft-item:nth-child(odd) { position: relative; padding-right: 51px; border-right: 0; }
  .ab-ft-n4 .ab-ft-item:nth-child(odd)::after { content: ""; position: absolute; right: 0; top: 32px; bottom: 32px; border-right: var(--dash); }
  .ab-ft-n4 .ab-ft-item:nth-child(even) { padding-left: 51px; }
  .ab-ft-n4 .ab-ft-media > img { aspect-ratio: 369 / 245; }

  /* ---- HISTORY（490:3971）: 背景は 1549 幅の楕円の上半分（縦半径 387）＋下は地色。黄 → ピーチ 167 → 地色 415、下端 648〜724 で溶ける。
     頂点 → ラベル 198、H2 → 点線 30 → カード 40。カード 345×493・間 16・上下 40／左右 32（490:5023）。カードの下 188 で GROUP ---- */
  .ab-history { --container: 1136px; --gutter: 80px; }
  .page-about .ab-history.section { padding-top: 198px; padding-bottom: 176px; }
  /* 2026-09-28: 上半分の楕円＋縦の辺（高さ 754）→ 1549×774 の楕円 1 枚に（現行 urala.com の 739534a2 と同じ形）。1366 では画面の外なので同じ見え方、
     1440 以上で画面の中に出る両脇が、縦の直線ではなく楕円の弧になる（下の方は 648〜724 で地の色に溶けて見えない） */
  .ab-history::before { left: 50%; right: auto; width: 1549px; height: 774px; transform: translateX(-50%); border-radius: 50%;
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) 648px, var(--c-cream) 724px), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, #FFF6CB 0px, #FFE2CA 167px, var(--c-cream) 415px);
    background-blend-mode: normal, overlay, normal; }
  .ab-hist-nav { gap: 32px; padding-bottom: 0; }
  .ab-hist-btn { width: 45px; height: 45px; border-color: var(--c-line-2); }
  .ab-hist-rule { margin: 30px 0 40px; }
  .ab-hist-track { padding-top: 0; gap: 16px; }
  .ab-hist-card { flex-basis: 345px; min-height: 493px; padding: 40px 32px; border-radius: 16px; }
  .ab-hist-year { gap: 0; padding-bottom: 20px; }
  .ab-hist-y { font-size: 40px; line-height: 1.7; letter-spacing: 0.15em; }
  .ab-hist-era { font-size: 16px; line-height: 1.7; letter-spacing: 0; }
  .ab-hist-text { margin-top: 20px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .ab-hist-photo { margin-top: 0; padding-top: 40px; }
  .ab-hist-photo img { aspect-ratio: 281 / 158; border-radius: 16px; }

  /* ---- GROUP（631:8037）: 上辺角丸 80・白 → 33.9% から地色へ。上端 → ラベル 69、H2 → 写真 63。
     2 件は 463 幅・間 82 を中央（1366 で x179 / 724）。写真 463×260 → 24 → 名称 26px → 32 → 本文 16px/1.7 → 8 → 住所 → 32 → ボタン。下 101 ---- */
  .page-about .ab-group { border-radius: 80px 80px 0 0; padding: 69px 0 101px; background: linear-gradient(180deg, var(--c-white) 33.9%, var(--c-cream) 100%); }
  .ab-group .sec-head { margin-bottom: 63px; }
  /* 右上の大きなスマイル（527:3774）344×312・#F1EAE5: 上端 = 白い面の上端 +143、右端 = 容器の右 +111（1366 で画面の右 −4）。2 枚目の写真の後ろ
     （.has-smile の中身は z-index 1）で、写真の右と上に U の右端と 2 つの点が出る。1366 未満は容器が縮むので画面の右 4 で止める（点が画面の外で切れないように） */
  .ab-group .smile { display: block; --smile-w: 344px; top: 143px; right: max(4px, calc((100% - var(--container)) / 2 - 111px)); }
  .ab-group-grid { grid-template-columns: repeat(2, minmax(0, 463px)); column-gap: min(82px, 6vw); justify-content: center; max-width: none; }
  .ab-group-photo { max-width: none; }
  .ab-group-photo img { aspect-ratio: 463 / 260; border-radius: 16px; }
  .ab-group-name { margin-top: 24px; font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; white-space: nowrap; }   /* 「ウララ訪問看護リハビリステーション」17 字 = 468 が列 463 を 5 超えて「リハ／ビリ…」と折れていた。原本も Figma も 1 行 → 折らない（はみ出しは列の間 82 に収まる） */
  .ab-group-name wbr { display: none; }   /* 2026-09-28: 〜767 用の折れ目（about.mjs の phraseBreaks）で Chrome が nowrap でも「ウララ訪問看護／リハビリステーション」と 2 行に折っていた（Figma・現行は 1 行） */
  .ab-group-body { margin-top: 32px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .ab-group-addr { margin-top: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .ab-group-btn { margin-top: 32px; }

  /* ---- 下部ナビ（503:4167）: 272×218 の白 4 枚・間 16・角丸 16。アイコン上端 51・高さ 72 前後、文字 20px（上端 137）・字間 6%。
     右下の橙 44×40・角丸 左上 4／右下 16。GROUP の下 40、フッターまで 148 ---- */
  .ab-pagenav.section-tight { padding-top: 40px; padding-bottom: 84px; }   /* + フッターの margin-top 64（shell）= 148 */
  .ab-pagenav .container { max-width: none; }
  .ab-pagenav .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 51px 12px 0; border-radius: 16px; }
  .ab-pagenav .bnav-ic { width: 100px; height: 72px; }
  .ab-pagenav .bnav-label { margin-top: 14px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .ab-pagenav .bnav-btn { width: 44px; height: 40px; border-radius: 4px 0 16px 0; }
}
/* 1080〜1199: GROUP の列が 463 より狭くなる（1080 で 427）。1 行のまま列に収めるため名称だけ 24px・字間 2%（17 字で 416） */
@media (min-width: 1080px) and (max-width: 1199px) {
  .ab-group-name { font-size: 24px; letter-spacing: 0.02em; }
}

/* ============ 768〜1079: MISSION・LOGO CONCEPT を現行 urala.com の 841 に合わせる（2026-09-28 ユーザー「要素の被り具合や写真の配置の感じが少し違う」）============
   旧: キャッチ｜本文の 2 列＋写真 4 枚を容器の中に小さく並べ、ロゴ｜本文の 2 列を横に 180% の平たい楕円で包んでいた。
   現行 841（出現アニメの後で実測）: 見出し → 64 → キャッチ 26px（1 列）→ 32 → 本文 16px/2.2・字間 6%（容器いっぱい）→ 64 → 写真 361 幅・間 24 の 1 列を
   画面の中央に置いて左右を画面外へ（2・4 枚目は 24 下げる）→ 80 → 白い面（画面幅の 125%・x −12.5%、上下の端は縦半径 180 の半楕円）。
   面の上端 → LOGO CONCEPT 160、H2 → ロゴ 62（間に短い線）、ロゴ 206 を中央 → 64 → 本文 526 幅・16px/2.2（左揃えの塊を中央）→ 238 → 面の下端。
   3 連スマイルは 200 幅で画面の右端に付け、上端 = 面の下端 −222。面の下端 → FEATURES 160。
   写真の枠は 9/28 は PC（Figma）と同じ 361×247 にそろえていたが、2026-09-29 に現行どおり元の縦横比（361×271／361×203）に戻した
   2026-09-29: 600〜767 も同じ組みに（現行 673 は 841 と同じ組み。ユーザー「現状のサイトとレイアウト違う」） */
@media (min-width: 600px) and (max-width: 1079px) {
  .page-about .ab-mission.section { padding-bottom: 80px; overflow-x: clip; }
  .ab-mission .smile { top: -10px; right: -13px; }   /* 現行 841: 344 幅・上端 = MISSION の字枠 −10・右端は画面の右 +13 */
  .ab-mission .sec-head { margin-bottom: 64px; }
  .ab-mission-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ab-mission-catch { font-size: 26px; line-height: 1.7; letter-spacing: 0; }
  .ab-mission-body { max-width: none; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; }
  .ab-mission-photos { display: flex; align-items: flex-start; gap: 24px; width: 1516px; margin: 64px 0 0 calc(50% - 758px); }
  .ab-mission-ph { flex: none; width: 361px; }
  .ab-mission-ph:nth-child(even) { margin-top: 24px; }
  .ab-mission-ph img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; }
  .ab-oval { padding-block: 160px 238px; }
  .ab-oval::before { inset: 0 -12.5%; border-radius: 50% / 180px; }
  .ab-logo-head { margin-bottom: 30px; }   /* H2 の下端 → 線 24 → 線 → ロゴ 30（計 62） */
  .ab-logo-head::after { margin-top: 24px; }
  .ab-logo-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; justify-items: center; max-width: 526px; }
  .ab-logo-mark { width: 206px; }
  .ab-logo-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; }
  .ab-logo-decor { right: 0; bottom: -35px; width: 200px; transform: none; }
  .page-about .ab-features.section { padding-top: 160px; }
  /* 本文の色（現行 841: MISSION #271200・LOGO #574D45。新は #333 のままだった） */
  .ab-mission-body { color: var(--c-ink-deep); }
  .ab-logo-body { color: var(--c-ink-soft); }
}

/* ============ 768〜1079: 見出し・MESSAGE・FEATURES・HISTORY・GROUP も現行 urala.com の 841 に合わせる（2026-09-28 照合の残り）============
   上の MISSION・LOGO と同じく、この帯は現行 841（出現アニメの後で実測。scratchpad の curgeo.mjs）の組み。旧は PC の 1 段前の 2 列の組みで、
   特長は写真の小さい 2 列（01・03 は 写真｜見出し＋本文、02 は 2×2）、GROUP も 2 列。現行 841 はどちらも 1 列で写真が容器いっぱい（ページの高さ 現行 17143／旧 11905）。
   現行は 911〜1079 で PC 寄りの組み（特長の写真 300 幅・GROUP 2 列）に変わるが、この帯は MESSAGE・MISSION・LOGO も 841 の組みなので 1079 まで同じにする。
   左右の余白は全ページ共通の 32（現行 841 は 40）のまま。2026-09-29 から 600〜767 も同じ組み（現行 673 で実測。余白もこのページだけ 32 にそろえる） */
@media (min-width: 600px) and (max-width: 1079px) {
  /* 見出し: 英字ラベル 16px・H2 32px/1.7・字間 6%（tokens の clamp だと 841 で 15.3／29.8）。ページ見出しの ABOUT は 18px（現行も 18） */
  .page-about .sec-label { font-size: 16px; line-height: 1.7; }
  .page-about .sec-title { font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-about .sec-head { gap: 0; }   /* ラベルの下端 → H2 の字枠 0（現行 841。旧は間 8） */
  .page-about .page-head .sec-label { font-size: 18px; line-height: 1.4; }
  .page-about .page-head h1.sec-title { font-size: 40px; }
  .page-about .page-head { padding: 20px 0 80px; }   /* 写真の下端 → ABOUT 20（旧 24）、H1 の下端 → MESSAGE 80（旧 51） */

  /* ---- MESSAGE ---- 見出しの下 73 → 写真 400×600（中央）。縦書きは 20px・行高 22・字間 0.2em・余白 10（帯の幅 42）。
     帯の左端と上端は写真基準: 1 行目 +412/0、2 行目 +362/+56、3 行目 +6/+88、4 行目 −44/+138（旧は 24px・上端 44 刻み） */
  .page-about .ab-message .sec-head { margin-bottom: 73px; }
  .page-about .ab-message.section { padding-bottom: 172px; }   /* 白いカードの下 → MISSION のラベル 172（旧 90） */
  .ab-vt { font-size: 20px; line-height: 22px; letter-spacing: 0.2em; padding: 10px; width: 42px; }
  .ab-vt-1 { left: calc(100% + 12px); top: 0; }
  .ab-vt-2 { left: calc(100% - 38px); top: 56px; }
  .ab-vt-3 { left: 6px; top: 88px; }
  .ab-vt-4 { left: -44px; top: 138px; }
  /* 名前: 写真の下 32・左 32（容器 +32）。理事長 14px｜間 20｜名前 24px/1.7（字間 0）、上下中央 */
  .ab-name-side { margin-top: 32px; padding-left: 32px; }
  .ab-name { gap: 20px; align-items: center; }
  .ab-name-role { font-size: 14px; line-height: 1.7; letter-spacing: 0; }
  .ab-name-txt { font-size: 24px; line-height: 1.7; letter-spacing: 0; }
  /* 経歴: 名前の下 32。上下の点線・上下 24／左右 32。年 14px/1.7（列 64）｜間 20｜本文 13px/1.8、行の間 8。色は #574D45 */
  .ab-career { margin-top: 32px; padding: 24px 32px; }
  .ab-career-list { gap: 8px; }
  .ab-career-row { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; font-size: 13px; line-height: 1.8; }
  .ab-career-row dt { font-size: 14px; line-height: 1.7; color: var(--c-ink-soft); }
  .ab-career-row dd, .ab-positions { color: var(--c-ink-soft); }
  .ab-positions { margin-top: 8px; gap: 8px; }
  /* 本文: 経歴の下 64・16px/2.2・字間 6%・#574D45、段落の間 16 */
  .ab-msg { gap: 64px; }
  .ab-msg-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-msg-body p + p { margin-top: 16px; }
  /* 所属学会他・学校医: 本文の下 64、白 1 枚・角丸 16・上下 40／左右 32、群の間 80。見出し・項目とも 16px/2.2・字間 6%、項目の間 8。
     学会は 2 列（1 列目 248 固定・2 列目は残り。「日本アンチエイジング歯科学会」が 248 だと折れる）。学校医の線画 91 幅はカードの右 32・項目の頭の高さ（見出しの下 +43） */
  .ab-msg-cards { margin-top: 64px; padding: 40px 32px; gap: 80px; border-radius: 16px; }
  .ab-mcard-title { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; margin-bottom: 8px; }
  .ab-bullets { grid-template-columns: 248px minmax(0, 1fr); column-gap: 0; row-gap: 8px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-mcard-school { min-height: 222px; padding-right: 140px; }
  .ab-mcard-ic { top: 43px; right: 0; transform: none; width: 91px; }

  /* ---- FEATURES ---- 見出しの下 64 → カード（角丸 16・上 64／左右 32／下 80〔最後の行の下 32 ＋ 48〕・間 40）。
     カードの頭: 歯型 70×68・「01」24px｜間 24｜H3 32px/1.7（上下中央）→ 32 → 点線。
     行: 写真（容器いっぱい・元の縦横比・角丸 16）→ 40 → 見出し 26px/1.2・字間 10% → 24 → 本文 14px/1.7・#271200。行の上下 32、行の間は点線。
     02 も 1 列（旧の 2×2 の縦の点線・左右の余白は外す）。写真右下の線画アイコンは出さない（現行 841・SP にも無い） */
  .page-about .ab-features .sec-head { margin-bottom: 64px; }
  .page-about .ab-features.section { padding-bottom: 80px; }   /* 最後のカード → HISTORY の楕円の頂点 80 */
  .ab-ft-groups { gap: 40px; }
  .page-about .ab-ft-group { padding: 64px 32px 48px; border-radius: 16px; }
  .ab-ft-head { gap: 24px; padding-bottom: 32px; }
  .ab-ft-head .tooth-badge { width: 70px; height: 68px; }
  .ab-ft-head .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding: 0 0 6px 0.15em; }
  .page-about .ab-ft-h3 { font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-about .ab-ft-list, .page-about .ab-ft-n4 .ab-ft-list { grid-template-columns: minmax(0, 1fr); }
  .page-about .ab-ft-item, .page-about .ab-ft-n4 .ab-ft-item { grid-template-areas: "media" "title" "body"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 0; padding: 32px 0; border-right: 0; }
  .page-about .ab-ft-item + .ab-ft-item, .page-about .ab-ft-n4 .ab-ft-item + .ab-ft-item { border-top: var(--dash); }
  .ab-ft-media > img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; }
  .ab-ft-ic { display: none; }
  .page-about .ab-ft-title { margin-top: 40px; font-size: 26px; line-height: 1.2; letter-spacing: 0.1em; }
  .page-about .ab-ft-n4 .ab-ft-title br { display: none; }   /* 現行 841 の 02 は改行なし（「待ち時間を最小限に、スムーズなご案内を」1 行）。01 は「一人ひとりに／合わせた診療プラン」の 2 行のまま */
  .ab-ft-body { margin-top: 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }

  /* ---- HISTORY ---- 楕円は画面幅の 117%（841 で 987）・2:1 を中央に（現行の楕円 SVG は 768〜1079 で幅 1.16〜1.17W）。色と溶け方は 〜599 と同じ SVG なので同じ値。
     頂点 → ラベル 200、H2 → 点線 33 → カード 30。カード 345×503・間 16・上 40／左右 32／下 32・角丸 16。
     年 40px/1.7・字間 15% → 和暦 14px → 20 → 点線 → 20 → 本文 14px/1.7・#271200。写真は元の縦横比で下に寄せる。カードの下 → GROUP の面 188 ---- */
  .page-about .ab-history.section { padding-top: 200px; padding-bottom: 176px; }   /* + 列の下余白 12 = 188 */
  .ab-history::before { left: 50%; right: auto; width: 117%; height: auto; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50%;
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) 46.7%, var(--c-cream) 58.4%), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, #FFF4C6 0%, #FFF0C3 5.8%, #FFE9BF 11.7%, #FFE3BF 17.5%, #FFDEC0 23.3%, #FEE0C7 29.2%, #FDE5D1 35%, #FBE8DA 40.9%, #FAECE2 46.7%, #F8F1ED 52.5%, #F8F4F2 58.4%, #F8F4F2 100%);
    background-blend-mode: normal, overlay, normal; }
  .ab-hist-rule { margin: 31px 0 26px; }   /* H2 の下端 → 点線 32、点線 → カード 30（+ 列の上余白 4） */
  /* ‹ ›: 45 の白丸・間 24、右端は容器の右 −16、下端は H2 の下端 +4 */
  .ab-hist-nav { gap: 24px; padding-bottom: 0; margin: 0 16px -4px 0; }
  .ab-hist-btn { width: 45px; height: 45px; }
  .ab-hist-card { flex-basis: min(345px, 48vw - 19.2px); min-height: 503px; padding: 40px 32px 32px; border-radius: 16px; }   /* 現行: 幅は（画面 − 40）の 48%、345 まで（673 で 304・841 で 345） */
  /* 現行は 48% の枠の中にカード（345）を中央に置くので、枠が 345 より広い幅では 1 枚目が左の余白より右へ下がる（768 で +2・841 で +20）。2 枚目からは 16 間隔 */
  .ab-hist-track { padding-left: calc(var(--gutter) + max(0px, (48vw - 364.2px) / 2)); scroll-padding-left: calc(var(--gutter) + max(0px, (48vw - 364.2px) / 2)); }
  /* 911〜1079 は現行が PC 寄りの組み（カード 246〜295 幅）で 1 枚目は x56。このページはこの帯も 841 の組みのままなので、1 枚目の位置だけ現行の 56 にそろえる */
  @media (min-width: 911px) { .ab-hist-track { padding-left: calc(var(--gutter) + 16px); scroll-padding-left: calc(var(--gutter) + 16px); } }
  .ab-hist-year { gap: 0; padding-bottom: 20px; }
  .ab-hist-y { font-size: 40px; line-height: 1.7; letter-spacing: 0.15em; }
  .ab-hist-era { font-size: 14px; line-height: 1.7; }
  .ab-hist-text { margin-top: 20px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .ab-hist-photo { margin-top: auto; padding-top: 20px; }
  .ab-hist-photo img { aspect-ratio: auto 3 / 2; height: auto; border-radius: 0; }   /* 現行は角丸なし（〜599 も同じ） */

  /* ---- GROUP ---- 上辺の角丸 80、上端 → ラベル 72、H2 → 写真 65。1 列: 写真（容器いっぱい・元の縦横比・角丸 16）→ 24 → 名称 26px/1.7 → 32 →
     本文 14px/1.7・#574D45 → 8 → 住所 → 32 → ボタン 280×80（18px）。項目の間 80。最後のボタン → 下部ナビ 142（+ ナビの上 16） ---- */
  .page-about .ab-group { border-radius: 80px 80px 0 0; padding: 72px 0 126px; }
  .page-about .ab-group .sec-head { margin-bottom: 65px; }
  .ab-group-grid { grid-template-columns: minmax(0, 1fr); gap: 80px; }
  .ab-group-photo img { aspect-ratio: auto 16 / 9; height: auto; border-radius: 16px; }
  .ab-group-name { margin-top: 24px; font-size: 26px; line-height: 1.7; letter-spacing: 0; }
  .ab-group-body { margin-top: 32px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .ab-group-addr { margin-top: 8px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .ab-group-btn { margin-top: 32px; min-width: 280px; min-height: 80px; font-size: 18px; }

  /* ---- 下部ナビ 4 カード ---- 現行 841: 371×218・間 20・角丸 16。アイコン 99×73 が上 48、文字 20px/1.7（カードの上端 +132） */
  .ab-pagenav .bnav { gap: 20px; }
  .ab-pagenav .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 48px 12px 0; border-radius: 16px; }
  .ab-pagenav .bnav-ic { width: 99px; height: 73px; }
  .ab-pagenav .bnav-label { margin-top: 11px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
}

/* 600〜1079 の左右の余白（2026-09-29）: 現行 673・841 は 40。全ページ共通は 〜767 が 20・768〜1079 が 32。
   20 だと 673 で本文・写真・カードが現行より 20 ずつ広がり、H1 が 1 行に収まって節の位置が 68 上にずれる。
   32 でも 841 で特長の写真 8 枚が 16 ずつ広く 12 ずつ高くなり、下へ行くほど現行とずれていた（HISTORY で 40）→ このページは 40 にそろえる。
   ヒーローの写真の上端は現行 120（ヘッダー 90 の下 30） */
@media (min-width: 600px) and (max-width: 1079px) {
  .page-about .main { --gutter: 40px; }
  .ab-hero { padding-top: 30px; }
}

/* 横向きの展開折りたたみ（841×701）で上下の余白を詰める規則（HISTORY の上 200 → 120・特長のカードの上 64 → 40）は 2026-09-29 に外した。
   現行 urala.com は高さで組みを変えない（841×701 でも 841×1200 と同じ間隔）。ページは縦に送るので、高さ 700 で詰める理由も無い */

/* ============ 〜599 スマホ（2026-09-24 見比べ: capture/sp-compare/main__about の ip440 / ip393 / fold344）============
   値は原本の実測（画素）と原本 DOM のスタジオ CSS（capture/main-current/about/dom.html の max-width:540px 分）から。
   768〜 には効かせない（この帯の中だけで上書き） */
@media (max-width: 599px) {
  /* 見出しは自然な折り返し（原本は balance しない。「ウララ歯科クリニックに／ついて」「…ミッショ／ン」） */
  .page-about :is(.sec-title, .ab-ft-h3, .ab-ft-title, .ab-group-name) { text-wrap: wrap; }
  /* ページ見出し: ヒーロー下端 → ABOUT 15（新 31）、タイトル 2 行目 → MESSAGE 120（新 88） */
  .page-about .page-head { padding-top: 10px; padding-bottom: 80px; }   /* 2026-09-29: ヒーローの下端 → ABOUT の箱 10（現行 344・390。8 だと 2 上） */
  /* 原本 ≤540 の h1 は幅 334（440 でも「ウララ歯科クリニックに／ついて」）。
     2 周目: max-width:100% は grid の列幅を決める段では効かず、344 で列が 334 に広がりページが 354 に横溢れしていた → vw で上限を付ける */
  .page-about .page-head h1.sec-title { width: 334px; max-width: calc(100vw - 2 * var(--gutter, 20px)); }
  /* 英字ラベル（2026-09-29 現行 390・344 の実測）: 節のラベルは 14px/1.7、ページ見出しの ABOUT は 16px/1.4（tokens の clamp だと 390 で 14.6）。
     ラベルの箱の下端 → H2 の箱の上端は 0（現行。components の 〜599 は −1 で、見出しごとに 1〜2 ずつ上にずれていた） */
  .page-about .sec-label { font-size: 14px; }
  body.area-main.page-about .sec-head > .sec-label + * { margin-top: -8px; }
  .page-about .page-head .sec-label { font-size: 16px; line-height: 1.4; }

  /* ---- MESSAGE ---- 写真幅 = 容器の 70%（2:3、原本 440: 280×420 / 393: 247×371 / 344: 213×320）。縦書き 18px・字間 0.2em・行高 1.1・余白 10（幅 38）。
     「これを守るために」は写真左 +8・上 +72、「私たちは…」は写真左 −40・上 +97（原本 3 幅とも同じ）。
     原本 SP は写真を画面右へはみ出させ、1・2 行目「健康な口内環境は／健康の基本です。」が画面外に出て読めない（原本の崩れ）。
     2 周目: 崩れは写さない。PC と同じ並び（1 行目は写真の右外・2 行目は写真の右端に掛かる・3 行目は左端に掛かる・4 行目は左外）のまま
     写真を左へ寄せ、4 行とも容器に収める。左端 = 容器 30% − 50px（1 行目の右端 = 容器の右端。344 で 41 → 4 行目の左端 1）
     3 周目（2026-09-29、出現アニメが止まってから 344〜540 の 7 幅で実測）: 現行は崩れていなかった（上の「画面外」は出現アニメの途中を撮ったもの）。
     写真の左端 = 容器の 15.5% − 13px（344 で x54・390 で x61・440 で x69・540 で x84）、帯の左端は写真の左端から 1 行目 +写真幅 +22.5・
     2 行目 +写真幅 −25.5・3 行目 +8.5・4 行目 −39.5、帯の幅 40。4 本とも画面の中（344 で 1 行目の右端 330・4 行目の左端 15） */
  .ab-message { overflow-x: clip; }
  .ab-message .sec-head { margin-bottom: 36px; }   /* H2 → 写真上端 68（新 64） */
  .ab-msg { gap: 56px; }
  .ab-figure { --ph-l: calc(15.5% - 13px); width: 100%; min-height: 410px; margin-inline: 0; }   /* 下の縦書き（上 97 + 高 313）が写真より長い 344 でも名前が縦書きの 41 下に来る */
  .ab-photo { width: 70%; margin-left: var(--ph-l); }
  .ab-vt { font-size: 18px; line-height: 1.1; letter-spacing: 0.2em; padding: 10px; width: auto; }
  .ab-vt-1 { left: calc(var(--ph-l) + 70% + 22.5px); top: 0; }   /* 帯の幅は 18×1.1＋20＝39.8。344 で右端 329.5（画面 344 の中。容器の右端 324 から 5.5 出る＝現行どおり） */
  .ab-vt-2 { left: calc(var(--ph-l) + 70% - 26px); top: 32px; padding-bottom: 0; }
  .ab-vt-3 { left: calc(var(--ph-l) + 8px); top: 72px; }
  .ab-vt-4 { left: calc(var(--ph-l) - 40px); top: 97px; padding-bottom: 0; }
  /* 名前: 役職 14（2026-09-29 に現行 390・344 の実測で 16 → 14）・名前 24（字間 0）、間 20。写真（縦書き）の下 32 → 経歴の点線まで 32 */
  .ab-name-side { margin-top: 32px; }
  .ab-name { gap: 20px; align-items: center; }
  .ab-name-role { font-size: 14px; line-height: 1.7; letter-spacing: 0; }
  .ab-name-txt { font-size: 24px; line-height: 1.7; letter-spacing: 0; }
  /* 経歴: 上下点線の間 24/20、年 64 幅＋間 20（本文 x125）、行間 8、字 13/1.8・年 14/1.7、色 #574D45 */
  .ab-career { margin-top: 32px; padding: 24px 20px; }
  .ab-career-list { gap: 8px; }
  .ab-career-row { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; font-size: 13px; line-height: 1.8; }
  .ab-career-row dt { font-size: 14px; line-height: 1.7; color: var(--c-ink-soft); }
  .ab-career-row dd { color: var(--c-ink-soft); }
  .ab-positions { margin-top: 8px; gap: 8px; font-size: 13px; line-height: 1.8; color: var(--c-ink-soft); }
  /* 本文: 14px・行高 2.2（行送り 30.8）・字間 0.06em・#574D45。段落の間 +14 */
  .ab-msg-body { font-size: 14px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-msg-body p + p { margin-top: 14px; }
  /* 所属学会・学校医の白カード: 本文の下 56（2026-09-29 に出現アニメの後で測り直し。136 はアニメ前の値で 80 多かった）、角丸 16、余白 40/32、群の間 28。
     見出し 13px、点は 3px（学会は下寄り・学校医は中央） */
  .ab-msg-cards { margin-top: 56px; padding: 40px 32px; gap: 28px; border-radius: 16px; }
  .ab-mcard-title { font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; margin-bottom: 8px; }
  .ab-bullets { gap: 8px; font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-bullets li { position: relative; padding-left: 18px; text-indent: 0; }
  .ab-bullets li::before { content: ""; position: absolute; left: 7px; top: 16px; width: 3px; height: 3px; border-radius: 50%; background: var(--c-ink-soft); }
  .ab-mcard-school .ab-bullets li::before { top: calc(50% - 1.5px); }

  /* ---- MISSION ---- カード下端 → ラベル 180（新 92）。スマイルは幅 250・左 W−217・ラベルの 16 上 */
  .page-about .ab-mission.section { padding-top: 93px; padding-bottom: 82px; overflow-x: clip; }   /* 2 周目: カード → ラベル +3、本文最終行 → 楕円の頂点 346（新 334）。2026-09-29: 白いカードの下端 → MISSION の箱 172（現行 344。91 だと 170） */
  .ab-mission .smile { width: 250px; top: 84px; left: calc(100% - 217px); right: auto; }
  .ab-mission .sec-head { margin-bottom: 64px; }
  .ab-mission-grid { padding-top: 0; gap: 28px; }
  .ab-mission-catch { font-size: 20px; line-height: 1.7; letter-spacing: 0; }
  .ab-mission-body { font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  /* 写真 4 枚は 226 幅・間 24 の 1 列を中央に置いて左右を画面外へ（原本 ≤540 の sd-50）。2・4 枚目は 24 下げる。
     本文下 → 楕円の頂点 347（実測）= 52 + 行の高さ 194 + 80 + 本文行の下余白 21 */
  .ab-mission-photos { display: flex; align-items: flex-start; gap: 24px; width: 976px; margin: 62px 0 0 calc(50% - 488px); }   /* 2026-09-29: 本文 → 写真 62（現行 344・390。52 だと写真が 10 上）。楕円の位置は下の padding-bottom で保つ */
  .ab-mission-ph { flex: none; width: 226px; }
  .ab-mission-ph:nth-child(even) { margin-top: 24px; }
  .ab-mission-ph img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; }

  /* ---- LOGO CONCEPT ---- 楕円は横半径 0.795W・縦半径 197px（端で 44 下がる。3 幅で同じ）。頂点 → ラベル 50、最終行 → 下の頂点 138 */
  .ab-oval { padding-block: 44px 123px; }   /* 楕円の頂点 → LOGO CONCEPT の箱 44・本文の最終行の下 → 楕円の下端 123（2026-09-29 現行 344 で面の高さ 952。42／116 だと 943） */
  .ab-oval::before { inset: 0 -29.5%; border-radius: 50% / 197px; }
  .ab-logo-head { margin-bottom: 32px; }
  .ab-logo-head::after { margin-top: 28px; }
  .ab-logo-grid { gap: 64px; }
  .ab-logo-mark { width: 206px; }
  .ab-logo-body { font-size: 14px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ab-logo-decor { right: 22px; bottom: -71px; width: 150px; transform: none; }

  /* ---- FEATURES ---- 楕円の下の頂点 → ラベル 126、H2 → カード 89 */
  .page-about .ab-features.section { padding-top: 120px; padding-bottom: 64px; }   /* 最後のカード下端 → HISTORY の楕円 64（新 60） */
  .ab-ft-groups { gap: 40px; }   /* カードの間 40（新 32）。440・344 とも 01→02・02→03 で 12 ずつ詰まっていた */
  .ab-features .sec-head { margin-bottom: 55px; }   /* 2026-09-29: H2 の下端 → カード 55（現行 344・390） */
  .ab-ft-group { padding: 56px 20px 24px; border-radius: 16px; }   /* カード上端 → 見出し +1・最終行 → 下端 62（新 60） */
  .ab-ft-head { align-items: flex-start; gap: 16px; padding-bottom: 32px; }
  .ab-ft-head .tooth-badge { width: 41px; height: 40px; }
  .ab-ft-head .tooth-badge-txt { font-size: 16px; letter-spacing: 0.1em; padding: 0 0 3px 0.1em; }
  .ab-ft-h3 { font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .ab-ft-item { gap: 0; padding-block: 32px; }
  .ab-ft-media > img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; }   /* 写真は元の縦横比（4:3・3:2） */
  .ab-ft-ic { display: none; }
  .ab-ft-title { margin-top: 12px; font-size: 20px; line-height: 1.2; letter-spacing: 0.1em; }
  .ab-ft-n4 .ab-ft-title br { display: none; }   /* 原本 SP の 02 は改行なし（「…スムーズなご／案内を」） */
  .ab-ft-body { margin-top: 20px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }

  /* ---- HISTORY ---- 楕円は幅 1.281W − 44.8（440 で 519）・2:1・縦の線形グラデ。頂点 → ラベル 126、H2 → 点線 63 → カード 33 */
  .page-about .ab-history.section { padding-top: 120px; padding-bottom: 107px; }   /* 楕円の頂点 → HISTORY の字頭 126（新 121） */
  .ab-history::before { left: 50%; right: auto; width: calc(128.1vw - 44.8px); height: auto; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50%;
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) 46.7%, var(--c-cream) 58.4%), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, #FFF4C6 0%, #FFF0C3 5.8%, #FFE9BF 11.7%, #FFE3BF 17.5%, #FFDEC0 23.3%, #FEE0C7 29.2%, #FDE5D1 35%, #FBE8DA 40.9%, #FAECE2 46.7%, #F8F1ED 52.5%, #F8F4F2 58.4%, #F8F4F2 100%);
    background-blend-mode: normal, overlay, normal; }   /* 一番上の層: 楕円の下半分（58.4% から下）を地の色で消す。粒が下半分に残って楕円の輪郭が見えないように */
  .ab-hist-rule { margin: 32px 0 27px; }
  /* ‹ › は見た目 35 の白丸（枠 #C5B5A8・山形はオレンジ）、押せる範囲は 44。中心間 45、右端は W − 7.5vw 付近 */
  .ab-hist-nav { gap: 1px; padding-bottom: 0; margin-bottom: -14px; margin-right: max(0px, calc(9.4vw - 32.4px)); }
  .ab-hist-btn { position: relative; width: 44px; height: 44px; background: none; border: 0; color: var(--c-orange); }
  .ab-hist-btn::before { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-2); }
  .ab-hist-btn .icon { position: relative; width: 17px; height: 17px; }
  @media (hover: hover) and (pointer: fine) { .page-about .ab-hist-btn:hover { background: none; color: var(--c-white); } }
  @media (hover: hover) and (pointer: fine) { .page-about .ab-hist-btn:hover::before { background: var(--c-orange); border-color: var(--c-orange); } }
  /* カード: 幅 0.7 ×（W − 20）（440 で 294・344 で 227）、高 489、角丸 16 */
  .ab-hist-card { flex-basis: calc((100vw - 20px) * 0.7); min-height: 489px; padding: 40px 32px 32px; border-radius: 16px; }
  .ab-hist-year { gap: 0; padding-bottom: 20px; }
  .ab-hist-y { font-size: 32px; line-height: 1.7; letter-spacing: 0.17em; }
  .ab-hist-era { font-size: 14px; line-height: 1.7; }
  .ab-hist-text { margin-top: 20px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .ab-hist-photo img { aspect-ratio: auto 3 / 2; height: auto; border-radius: 0; }   /* 2026-09-29 現行 390・344: 写真は元の縦横比（1918 は 16:9）・角丸なし（旧は 3:2 に切り・角丸 8） */

  /* ---- GROUP ---- 上 72・H2 → 写真 64・写真 → 名称 24 → 本文 24 → 住所 8 → ボタン 24・項目の間 80・下 104（+ナビ 16 = 120） */
  .page-about .ab-group { padding: 72px 0 104px; }
  .ab-group .sec-head { margin-bottom: 64px; }
  .ab-group-grid { gap: 80px; }
  .ab-group-photo img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; }
  .ab-group-name { margin-top: 24px; font-size: 20px; line-height: 1.7; letter-spacing: 0; }
  .ab-group-body { margin-top: 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .ab-group-addr { margin-top: 8px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .ab-group-btn { margin-top: 24px; width: auto; }   /* 原本は 238 幅（新は全幅 360 だった） */

  /* ---- 下部ナビ 4 カード（原本 440: 194×170・間 12・角丸 8。アイコン幅 74 が上 36、文字 18px、右下の橙 32×30） ---- */
}

/* ============ 〜767: 語の途中で折らないための規則だけ（2026-09-29 に組みを現行 urala.com へ戻した）============
   2026-09-25〜28 はここで Figma SP/about 560:4116 の組みに上書きしていた（ページ見出しの下 249 の空き・理事長ご挨拶の写真 279 角＋横書きのキャッチ・
   MISSION の中央寄せ・本文 14px/1.7・ページ上端の 862 の地のグラデ・LOGO の実線・特長の見出しの改行を消す など）。
   ユーザー（2026-09-29、iPhone で）「なんでこんな間隔空いててレイアウトも勝手に変えてるん？そんな指示出してないで」で全部外した。
   組みは 〜599 が上の 〜599 ブロック（現行 390・344 の実測）、600〜767 は 600〜1079 の 2 ブロック（現行 673・841 の組み）。
   ここに残すのは折れ目の規則だけ（iPhone の WebKit は word-break: auto-phrase が効かず、語の途中で折れていた）。
   折れるのはテンプレートの <wbr>（about.mjs の phraseTitle・careerBreaks・phraseBreaks・H1 の「について」の前）と content の U+200B だけ。
   行を字数でそろえる text-wrap: balance は使わない（現行は自然な折り返し。balance だと「ミッションを／達成するための特長」と現行と違う所で折れる） */
@media (max-width: 767px) {
  /* H1: 「ウララ歯科クリニック／について」。現行 390 は「…クリニックに／ついて」、673 は「…につい／て」と 1 字残る → 句で折る */
  .page-about .page-head h1.sec-title { word-break: keep-all; text-wrap: wrap; }
  /* 節の見出し（h2）: 「ウララ歯科クリニックの／ミッション」（現行は「…ミッ／ション」）・「ミッションを達成するための／特長」（現行と同じ） */
  .page-about .sec-title:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; }
  /* 特長の行の見出し: content の改行（<br>）とその位置の <wbr> だけで折る */
  .page-about .ab-ft-title { word-break: keep-all; overflow-wrap: anywhere; }
  /* 経歴: 助詞の後・「・」の後・content の U+200B だけで折る（「ウララ歯／科クリニック開設」「歯科保／存学」を避ける） */
  .page-about .ab-career-row dd, .page-about .ab-positions li { word-break: keep-all; overflow-wrap: anywhere; text-wrap: wrap; }
  /* 特長のグループ見出し（h3）: content の U+200B の所だけで折る（「患者様第一の／クリニック」。現行は「…クリ／ニック」） */
  .page-about .ab-ft-h3:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; }
  /* グループ名: 漢字⇄カタカナの境目だけで折る（「ウララ訪問看護／リハビリステーション」。現行は「…ステー／ション」） */
  .page-about .ab-group-name { word-break: keep-all; text-wrap: wrap; }
}

/* ---------- 年表カードの本文（〜1079）: 「…2代目院長に就／任。」「…節目を迎えまし／た。」と 1〜2 字だけ次の行に残っていた（現行も同じ）。
   句で折り、最後の行が短くなりすぎないようにする（text-wrap: pretty）---------- */
@media (max-width: 1079px) {
  .ab-hist-text { word-break: auto-phrase; text-wrap: pretty; }
}

/* ---------- 写真の無い特長の行（.is-nophoto。content で photo を外した行: 現行の写真が PIXTA の透かし入り見本だった「院内研修会」）----------
   見出し → 本文 だけで組む。〜1079 は見出しの上の余白（写真との間）を消し、768〜1079 は 1 列、1080〜 は 縦書き見出し｜本文（写真と本文の列をまとめて使う） */
.ab-ft-item.is-nophoto .ab-ft-title { margin-top: 0; }
@media (min-width: 600px) {
  .ab-ft-item.is-nophoto { grid-template-areas: "title" "body"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
}
@media (min-width: 1080px) {
  .page-about .ab-ft-item.is-nophoto { grid-template-areas: "title . body"; grid-template-columns: 66px 22px minmax(0, 1fr); align-items: center; }
  .page-about .ab-ft-item.is-nophoto .ab-ft-title { margin-top: 0; }
  .page-about .ab-ft-item.is-nophoto .ab-ft-body { max-width: 760px; }
}

/* ---------- 特長「院内研修会」の写真の枠（〜1079）: 2026-09-28 に医院の写真（03e47c14、5:4）で仮に差し替えた行。
   現行の枠は差し替え前の見本と同じ 3:2（390 で 313×209・841 で 697×465）。元の縦横比のままだと 390 で 41・841 で 105 高く、下の節が現行よりずれる。
   写真を差し替えたら（content/main/about.json の features）この規則も見直す ---------- */
@media (max-width: 1079px) {
  .page-about .ab-ft-media > img[src*="03e47c14"] { aspect-ratio: 3 / 2; object-fit: cover; }
}

/* ============ 演出（docs/MOTION.md。2026-09-26）============
   隠す・動かすのは html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。
   動かすのは opacity / translate / scale / clip-path / mask だけ（transform は hover.css と既存の配置が使う）。横方向の初期ずれ・枠の外の拡大はしない。
   テンプレート側の属性は templates/main/about.mjs。見せ場は LOGO CONCEPT（楕円が開く → ロゴの笑顔を描く）とヒーロー */

/* ---- ヒーロー: 写真が少し内側に切られた状態から四方へ開き、同時に 1.06 → 1 に落ち着く。
   切り抜き（clip-path）の縮み幅 ≧ 拡大のはみ出し幅を同じ曲線・同じ時間で保つので、枠の外に写真の角が出ない。枠は html.mo のときだけ clip ---- */
@keyframes ab-hero-open { from { opacity: 0; clip-path: inset(9% 7% 11% 7% round 48px); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }
@keyframes ab-hero-zoom { from { scale: 1.06; } }
html.mo .ab-hero-frame[data-mo] { overflow: clip; }
html.mo .ab-hero-frame[data-mo].is-in { animation: ab-hero-open 1.6s var(--mo-ease) var(--mo-d, 0ms) backwards; }
html.mo .ab-hero-frame[data-mo].is-in img { animation: ab-hero-zoom 1.6s var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* ---- MESSAGE（採用 /recruit/about と同じ出方。about.mjs の message）----
   時間と距離は採用の値（--mo-dur .8s・--mo-dist 36px・--mo-step 80ms。見出しの英字・題の出方も採用と同じになる）。
   縦書き（全幅。2026-09-29 に 〜767 の横書きの複製 .ab-catch-sp は外した）は 1 本の書き終わり = 字数 × 62ms ＋ 160ms、ほぼ一定の速さの曲線（--mo-ease の急発進だと「書く」に見えない）。
   縦書きは上 → 下（data-mo-dir="down"）、横書きは motion.css の既定の左 → 右。経歴の枠の線は少しゆっくり描く（行の up と重ねる） */
.ab-message { --mo-dur: .8s; --mo-dist: 36px; --mo-step: 80ms; }
html.mo .ab-message .ab-vt[data-mo].is-in { animation-duration: calc(var(--ab-vt-len, 8) * 62ms + 160ms); animation-timing-function: cubic-bezier(.4, .15, .35, 1); }
html.mo .ab-message .ab-career[data-mo].is-in { animation-duration: calc(var(--mo-dur) * 1.5); }

/* ---- MISSION の写真: 枠を写真と同じ角丸で clip（unveil の拡大と視差の包み .mo-par-cover の 1＋係数 を枠の中に収める） ---- */
html.mo .ab-mission-ph { overflow: clip; border-radius: 16px; }

/* ---- LOGO CONCEPT（見せ場）---- */
/* 白い楕円: 楕円の上端が画面に入ったら中心から楕円のまま開く（clip-path の ellipse 72% で箱の四隅まで覆う＝最後は切り抜きなしと同じ）。
   2026-09-26: スクロール連動（view-timeline）をやめ、一度きりの時間の演出（1.5s）にした。スクロールを止めた位置で開きかけのまま残り、
   「アニメーションがまだ途中」に見えていたため（医院の指摘）。引き金は節の頭の見えない札 .ab-logo-trig（data-mo-group。motion.js が .is-in を付ける）。
   見出しを引き金にすると、見出しより上に出ている楕円の上端が出るまで空いて見えるので、札は節の頭から 240px の帯にしてある。:has 非対応では最初から見える */
.ab-logo > .ab-logo-trig { position: absolute; left: 0; top: 0; width: 1px; height: 240px; pointer-events: none; }
@keyframes ab-oval-bloom { from { opacity: 0; clip-path: ellipse(22% 18% at 50% 50%); } 45% { opacity: 1; } to { opacity: 1; clip-path: ellipse(72% 72% at 50% 50%); } }
html.mo .ab-logo:not(:has(> .ab-logo-trig.is-in)) .ab-oval::before { opacity: 0; }
html.mo .ab-logo:has(> .ab-logo-trig.is-in) .ab-oval::before { animation: ab-oval-bloom 1.5s cubic-bezier(.3, .6, .4, 1) backwards; }
/* 見出し下の短い点線: 題の後から左 → 右に描く（--mo-d は見出しの箱に motion.js が入れる） */
html.mo .ab-logo-head:not(.is-in)::after { clip-path: inset(0 100% 0 0); }
html.mo .ab-logo-head.is-in::after { animation: mo-wipe calc(var(--mo-dur) * 1.2) var(--mo-ease) calc(var(--mo-d, 0ms) + 380ms) backwards; }
/* ロゴ（SVG を img で表示）: 3 枚の mask を重ねて描く。上から
   C＝下 57%（URALA / SINCE 1918 の文字）: 不透明度 --ab-logo-t で最後に浮かぶ
   A＝笑顔の U の中心（50% 22%）から 3 時の向きを起点に時計回りに開く扇 --ab-logo-a → U（右の端 → 底 → 左の端）→ 左の点 → 右の点の順に現れる
   B＝上 57% だけ（A を文字の帯に掛けないための型）。合成は C ∪ (A ∩ B)。
   @property 非対応では最後に一度に出る。mask-composite 非対応では上半分が最初から見え、文字だけが浮かぶ（どちらも最後は全部見える） */
@property --ab-logo-a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@property --ab-logo-t { syntax: '<number>'; inherits: false; initial-value: 1; }
@keyframes ab-logo-draw {
  from { --ab-logo-a: 0deg; --ab-logo-t: 0; }
  58% { --ab-logo-t: 0; }
  72% { --ab-logo-a: 360deg; }
  to { --ab-logo-a: 360deg; --ab-logo-t: 1; }
}
html.mo .ab-logo-mark[data-mo].is-in { animation: none; }
html.mo .ab-logo-mark[data-mo].is-in img {
  -webkit-mask-image: linear-gradient(180deg, transparent 57%, rgb(0 0 0 / var(--ab-logo-t)) 57%), conic-gradient(from 90deg at 50% 22%, #000 var(--ab-logo-a), transparent 0), linear-gradient(180deg, #000 57%, transparent 57%);
  -webkit-mask-composite: source-over, source-in, source-over;
  mask-image: linear-gradient(180deg, transparent 57%, rgb(0 0 0 / var(--ab-logo-t)) 57%), conic-gradient(from 90deg at 50% 22%, #000 var(--ab-logo-a), transparent 0), linear-gradient(180deg, #000 57%, transparent 57%);
  mask-composite: add, intersect, add;
  animation: ab-logo-draw 2.4s cubic-bezier(.45, .05, .35, 1) var(--mo-d, 0ms) backwards;
}

/* ---- FEATURES: 行の見出しは読む向きに描く（PC は縦書き＝上から下。〜1079 は横書き＝motion.css の既定の左から右） ---- */
@media (min-width: 1080px) {
  html.mo .ab-ft-title[data-mo="wipe"].is-in { animation-name: mo-wipe-down; }
}

/* ---- HISTORY: 楕円の頂点が画面に入ったら、背景の楕円（黄 → ピーチ）が日の出のように下から昇る（縦だけ）。
   2026-09-26: スクロール連動をやめて一度きりの時間の演出（1.6s）に（止めた位置で昇りかけのまま残らない）。引き金は節の頭の見えない札 .ab-hist-trig ---- */
.ab-history > .ab-hist-trig { position: absolute; z-index: 0; left: 0; top: 0; width: 1px; height: 200px; pointer-events: none; }
@keyframes ab-dome-rise { from { opacity: 0; translate: 0 96px; } 50% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
html.mo .ab-history:not(:has(> .ab-hist-trig.is-in))::before { opacity: 0; }
html.mo .ab-history:has(> .ab-hist-trig.is-in)::before { animation: ab-dome-rise 1.6s cubic-bezier(.3, .6, .4, 1) backwards; }

/* ---- MISSION のキャッチ「私たちの街に、ずっと通える安心を。」: 1 字ずつ浮かび上がる（2026-09-26 医院の指摘「アニメーションで出してほしい」）。
   テンプレートが 1 字ずつ .ab-mc-ch（--ci＝通し番号）に分けてある。箱（data-mo="chars"）は is-in まで透明、is-in で素通しになり、字が 65ms ずつ遅れて
   ぼかし＋下 0.45em から立ち上がる。縦方向と不透明度だけ（横にずらさない）。17 字で約 1.9 秒 ---- */
@keyframes ab-mc-ch-in { from { opacity: 0; translate: 0 .45em; filter: blur(4px); } 60% { filter: blur(0); } }
html.mo .ab-mission-catch[data-mo] .ab-mc-ch { display: inline-block; }
html.mo .ab-mission-catch[data-mo].is-in { animation: none; }
html.mo .ab-mission-catch[data-mo].is-in .ab-mc-ch { animation: ab-mc-ch-in .9s var(--mo-ease) calc(var(--mo-d, 0ms) + var(--ci, 0) * 65ms) backwards; }

/* ---- GROUP の写真: unveil の枠を写真と同じ角丸に（動いている間だけ clip される枠の角が四角く見えないように） ---- */
html.mo .ab-group-photo { border-radius: var(--r-l); }
@media (min-width: 1080px), (max-width: 599px) { html.mo .ab-group-photo { border-radius: 16px; } }

/* ---- 印刷は全部見せる（motion.css の印刷指定は [data-mo] だけなので、疑似要素・写真・ロゴのマスクをここで戻す） ---- */
@media print {
  html.mo :is(.ab-hero-frame img, .ab-logo-mark img, .ab-mission-ph .mo-par-cover, .ab-mc-ch) { animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; scale: none !important; translate: none !important; opacity: 1 !important; filter: none !important; }
  html.mo .ab-oval::before, html.mo .ab-history::before, html.mo .ab-logo-head::after { opacity: 1 !important; animation: none !important; clip-path: none !important; translate: none !important; }
}

/* フッターの口の上の間隔を現行に合わせる（2026-09-26 統合時。最後の中身の下端→口の上端を現行と同じ方法で実測: tools なし・scratchpad の gap.mjs）。
   〜599 は現行 390、768〜1079 は現行 841 の値 */
@media (max-width: 599px) { body.page-about main > .ab-pagenav { padding-bottom: 130px; } }   /* 現行 104。新 22 → 104 */
@media (min-width: 600px) and (max-width: 1079px) { body.page-about main > .ab-pagenav { padding-bottom: 106px; } }   /* 現行 120。新 64 → 120（600〜767 も同じ組み） */