/* /staff スタッフ紹介（templates/main/staff.mjs）。値は docs/design-main.md §3-4 と capture/main-current/staff/slices の実測。
   幅ごとの並び: 〜599 = 1 列・縦積み（写真→吹き出し→名前→出身→項目）／600〜767 = 1 列・写真左＋本文右／
   768〜1079 = 2 列・縦積み（展開した折りたたみ。PC の横並びを 2 列に詰めると本文幅が 200px を切るため）／1080〜 = 2 列・写真左＋本文右（現行 PC）。
   規約は ARCHITECTURE §2 のとおり（ビューポート高さ固定なし・中央揃えと横スクロールの併用なし・溢れ隠しなし・タップ標的 44px・和文 ch 単位なし・色はトークンのみ）
   2026-09-20 PC 幅の見比べ（capture/compare/staff/slices pc1920 / pc1440 / pc1280 の ref）: 本文容器は min(1136, 100vw - 160)（1280 で 1120、1920 で x 392〜1528）、
   ヒーローは min(1168, 100vw - 200)。カードは 1920 でも 2 列（各 536・間隔 64）。FOR SMILE の楕円は 1685×850 の中央置き（1440 では両端が画面外）。吹き出しの文字は 16px。 */

/* ---------- ヒーロー（波形・角丸は画像に焼き込み済み。SP は別カットを <picture> で） ---------- */
.staff-hero { margin-top: 8px; }
.staff-hero img { width: 100%; height: auto; object-fit: contain; }
.page-staff .page-head { padding-top: clamp(16px, 3vw, 32px); }
/* 1080〜: 参照 pc1280 はヒーロー幅 1080（コンテナ 1120 より 20px ずつ内側）・ヘッダー下 32px・見出しは写真の直下（余白 20）・H1 下 32 */
@media (min-width: 1080px) {
  .page-staff .main { --container-md: 1136px; --gutter: 80px; }   /* 参照: 1280 で 1120・1440 以上で 1136。ヘッダー・フッター（shell）には及ぼさない */
  .staff-hero { width: min(100% - 200px, 1168px); max-width: 1168px; margin-top: 32px; }   /* 参照: 1280 で 1080・1440/1920 で 1168 */
  .page-staff .page-head { padding-top: 20px; padding-bottom: 32px; }
}

/* ---------- 院長挨拶 ---------- */
.section.staff-dm { padding-top: 0; }
.dm-grid { display: grid; gap: 56px; margin-top: 32px; }   /* 参照 344: 写真下端→名前まで約 64 */
.dm-photo { width: min(60%, 260px); margin-inline: auto; }
.dm-photo img { width: 100%; height: auto; aspect-ratio: 366 / 490; }
.dm-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--c-ink-deep); }   /* 役職と名前は縦の中央で揃える（現行 SP・Figma 718:16299 とも中心が一致。baseline だと役職が 3〜5 下がる） */
.dm-role { font-size: var(--fs-small); }
.dm-name-txt { font-family: var(--f-round); font-size: var(--fs-lead); letter-spacing: var(--ls-heading); }
.dm-catch { margin-top: 36px; line-height: 1.7; }
.dm-text { margin-top: 28px; font-size: var(--fs-body); line-height: var(--lh-loose); }   /* 参照は行送り 2.2（PC 35px / 344 36px） */
@media (min-width: 768px) {
  .dm-grid { grid-template-columns: clamp(240px, 32%, 366px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 48px; }
  .dm-photo { width: 100%; margin: 0; }
  .dm-body { padding-top: 16px; }
  .dm-catch { margin-top: 28px; }
  .dm-text { margin-top: 32px; }
}
@media (min-width: 1080px) {
  .dm-grid { grid-template-columns: 366px minmax(0, 1fr); column-gap: 138px; padding-left: 50px; margin-top: 64px; }
  .dm-body { padding-top: 40px; }
  .section.staff-dm { padding-bottom: 250px; }   /* 参照 pc1280: 本文末尾→「歯科医師」見出しまで約 250 */
}

/* ---------- 区分（歯科医師／歯科衛生士／歯科総合職） ---------- */
/* 2026-10-01 医院の修正リスト No.80（「衛生士以下はすべて『歯科総合職』でまとめてしまって OK」）で「事務」の見出し（#office）を無くし、5 名を歯科総合職（#general）へ移した。
   事務だけに効いていた指定（値の無い「資格」の行の高さ・項目群の位置）は #general にも効かせ、移った 5 名のカードの見た目は前のまま。
   今までの歯科総合職 E.I.・A.K. は「資格」に値があり（.has-empty・.is-empty が付かない）、この指定は当たらないので見た目は変わらない。#office は今はページに無い */
.section.staff-group { padding-top: 0; }
.sc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
/* カード。表示順は grid-template-areas で切り替える（DOM は 写真 → 本文 → 吹き出し）。
   align-content:start は必須: 2 列で隣のカードに高さが揃えられたとき、余りが auto 行に配られて吹き出しだけ背が伸びる（実際に起きた） */
.sc { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "bubble" "body"; gap: 24px; padding: 64px 0 48px; border-bottom: var(--dash); align-content: start; }
.sc:first-child { padding-top: 0; }   /* 見出しの点線罫（margin-bottom 24）に続ける。参照 344/pc: 罫→写真 18〜19 */
.sc-photo { grid-area: photo; width: min(70%, 260px); max-width: 100%; margin-inline: auto; }   /* 参照: 344 で 210 / 393 で 245（≒70%） */
.sc-photo img { width: 100%; height: auto; aspect-ratio: 248 / 330; object-fit: cover; object-position: top; }
.sc-body { grid-area: body; position: relative; min-width: 0; margin-inline: 20px; }   /* 参照 344/393: 本文と吹き出しはカードより 20px 内側 */
.sc-name { font-size: var(--fs-h3); color: var(--c-ink-deep); letter-spacing: var(--ls-heading); line-height: 1.5; }   /* 参照 pc 26 / 344 20 */
.sc-name.is-en { font-family: var(--f-en); font-weight: 500; letter-spacing: 0.04em; }
.sc-origin { margin-top: 8px; font-size: var(--fs-body); color: var(--c-ink); line-height: 1.8; display: flex; flex-wrap: wrap; column-gap: 1em; }   /* 参照 pc 17 / 344 14 */
.sc-fields { margin-top: 20px; display: grid; gap: 12px; }   /* 右端の余白は取らない（参照は本文がカード右端まで走る。歯ブラシは最下行の右に重なるが、対象カードの最下行は全員 11 字以下） */
.sc-field dt { font-size: var(--fs-xs); color: var(--c-orange); line-height: 1.8; }
.sc-field dd { margin: 0; font-size: var(--fs-xs); color: var(--c-ink); line-height: 1.8; }
.sc-brush { position: absolute; right: 8px; bottom: 0; width: 30px; pointer-events: none; }
.sc-brush img { width: 30px; height: auto; transform: rotate(15deg); }
.sc.no-photo .sc-photo { display: none; }
/* 値の無い項目: 原本は PC・SP とも見出しだけ出す（2026-09-25 現行 pc1366 で確認: 遠矢・笠倉の「資格等」、事務 3 名の「資格」）。
   空の値の行は 13.4（事務は 0）。項目群は約 21 上がる（原本 pc1366: 出身の字頭 → 空の見出しの字頭 35、値のあるカードは 56） */
.sc-field.is-empty dd { height: 13.4px; }
/* 2026-09-28 見直し: 現行 urala.com はこの見出しを STUDIO の CMS 条件（[data-boolean] … { opacity: 0 }）で隠し、場所だけ空けている（PC・SP とも。遠矢・笠倉・H.H.・N.H.・T.A.）。
   上の「見出しだけ出す」は撮影ツールが演出を止めたときの見え方だった。字は隠して高さは残す */
.sc-field.is-empty dt { visibility: hidden; }
.page-staff :is(#office, #general) .sc-field.is-empty dd { height: 0; }   /* 2026-10-01 医院の修正リスト No.80: 元事務の 5 名が #general に入ったので #general にも（上の「区分」の節） */
.sc.has-empty .sc-fields { margin-top: 0; }
/* 吹き出し（白・角丸 16・上辺に尻尾）。短文は中央、長文は左揃えになるよう内側の p を flex で中央に */
.sc-bubble { grid-area: bubble; position: relative; background: var(--c-white); border-radius: var(--r-m); padding: 16px; margin: 12px 20px 0; display: flex; justify-content: center; }
.sc-bubble::before { content: ""; position: absolute; left: var(--tail-x, 72px); top: -12px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid var(--c-white); }
.sc-bubble p { font-size: var(--fs-small); line-height: 1.8; color: var(--c-ink); text-align: left; max-width: 100%; }
/* 最後の区分（歯科総合職）はフッターの「口」がすぐ続く。参照 344 は最後のカードの点線罫の直後にフッター */
@media (max-width: 767px) { .section.staff-group:last-of-type { padding-bottom: 40px; } }

/* 600〜767: 1 列・写真左＋本文右（吹き出しは全幅） */
@media (min-width: 600px) {
  .sc { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "photo body" "bubble bubble"; column-gap: 32px; row-gap: 24px; padding: 40px 0 48px; }
  .sc-photo { width: 100%; margin: 0; }
  .sc-body { margin-inline: 0; }
  .sc-bubble { --tail-x: 96px; margin: 0; padding: 20px 24px; }
  .sc.no-photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "bubble"; }
}
/* 768〜1079: 展開した折りたたみ。2 列・縦積み。カード間は点線ではなく余白で分ける */
@media (min-width: 768px) and (max-width: 1079px) {
  .sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px); row-gap: 8px; margin-top: 16px; }
  .sc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "bubble" "body"; row-gap: 20px; padding: 24px 0 40px; border-bottom: 0; }
  .sc:first-child { padding-top: 24px; }
  .sc-photo { width: min(100%, 248px); margin-inline: auto; }
  .sc-body { margin-inline: 0; }
  .sc-bubble { --tail-x: calc(50% - 8px); margin: 8px 0 0; padding: 20px 24px; }
  .sc.no-photo { grid-template-areas: "bubble" "body"; }
}
/* 1080〜: 現行 PC。2 列（各 528・間隔 64）。写真 248×330 左、本文右、吹き出しは下に全幅。歯ブラシは本文の右下 */
@media (min-width: 1080px) {
  .sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 0; margin-top: 16px; }
  .sc { grid-template-columns: 248px minmax(0, 1fr); grid-template-areas: "photo body" "bubble bubble"; column-gap: 32px; row-gap: 36px; padding: 0 0 64px; border-bottom: 0; }
  .sc-photo { width: 248px; margin: 0; }
  .sc-body { padding-top: 32px; margin-inline: 0; }
  .sc-origin { flex-direction: column; row-gap: 0; }
  .sc-fields { margin-top: 28px; gap: 12px; }   /* 本文列は 248px。参照は「日本歯科専門医機構認定 矯正歯科専門医」が 1 行に収まる */
  .sc-brush { right: 0; }
  .sc-bubble { --tail-x: 132px; margin: 0; padding: 24px 32px; }
  .sc-bubble p { font-size: 16px; }   /* 参照 1920: 「口腔外科診療を担当致します。安全に迅速な治療をご提供します」が 536px に 1 行 */
  .sc.no-photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "bubble"; }
}

/* ---------- FOR SMILE（放射グラデの楕円＋写真コラージュ）。はみ出しは section の overflow:clip で切る ---------- */
.section.staff-fs { position: relative; padding-block: clamp(64px, 8vw, 140px) clamp(48px, 6vw, 120px); }
.fs-oval { position: absolute; z-index: 0; left: -20%; right: -20%; top: 0; bottom: 10%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 0%, var(--c-hero-top) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-peach) 0%, var(--c-hero-right) 30%, var(--c-hero-left) 50%, var(--c-cream) 72%, transparent 100%); }
.fs-inner { position: relative; z-index: 1; }
.fs-body { max-width: 720px; margin: -16px auto 0; text-align: center; font-size: var(--fs-small); line-height: 2; color: var(--c-ink); }
.fs-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 96px); }
.fs-item img { width: 100%; height: auto; border-radius: var(--r-l); aspect-ratio: 4 / 3; object-fit: cover; }
.fs-item-3 { grid-column: 1 / -1; }
.fs-item-3 img { aspect-ratio: 4 / 3; }
@media (min-width: 600px) {
  .fs-collage { grid-template-columns: 3fr 4fr 3fr; align-items: start; gap: 20px; }
  .fs-item-2 { grid-column: 1; margin-top: 0; }
  .fs-item-3 { grid-column: 2; margin-top: 40px; }
  .fs-item-5 { grid-column: 3; margin-top: 120px; }
  .fs-item-2 img, .fs-item-5 img { aspect-ratio: 4 / 3; }
}
@media (min-width: 1080px) {
  /* 参照 1440/1920: 楕円は幅 1685・高さ 850 の中央置き（1920 で x 65〜1750、1440 では両端が画面外）。黄みは上中央、ピーチを経て 55% で白っぽく消える。ラベルは楕円上端から 160 */
  .section.staff-fs { padding-top: 160px; }
  .fs-oval { left: 50%; right: auto; bottom: auto; width: 1685px; height: 850px; transform: translateX(-50%);
    background:
      radial-gradient(45% 45% at 50% 0%, var(--c-hero-top) 0%, rgba(255, 243, 196, 0) 100%),
      linear-gradient(180deg, var(--c-hero-mid) 0%, var(--c-hero-right) 32%, color-mix(in srgb, var(--c-white) 55%, transparent) 55%, color-mix(in srgb, var(--c-white) 30%, transparent) 100%); }
  .fs-collage { gap: 32px; }
  .fs-item-3 { margin-top: 50px; }
  .fs-item-5 { margin-top: 196px; }
  .fs-body { font-size: var(--fs-body); }
}

/* ============ 〜599 スマホ（2026-09-24 見比べ: capture/sp-compare/main__staff の ip440 / ip393 / fold344）============
   値は原本の実測（画素）と原本 DOM のスタジオ CSS（capture/main-current/staff/dom.html の max-width:540px 分）から。768〜 には効かせない */
@media (max-width: 599px) {
  /* ページ見出し: ヒーロー下端 → STAFF 15（新 23）、H1 は 28px（新 38px）、H1 → 院長挨拶の帯 80 */
  .page-staff .page-head { padding-top: 9px; padding-bottom: 80px; }
  /* 英字 STAFF は現行 16px/22.4・字間 0.25em（2026-09-28 393 実測。FAQ・料金表・お知らせ・プライバシーの 〜599 と同じ 16px）。
     旧は共通の --fs-label（clamp 14〜16px）のままで 393 は 14.59px・字の並びが 5 狭かった。行の箱を 22.4 にしたぶん上の余白を 1 足して H1 の位置は据え置き */
  .page-staff .page-head .sec-label { font-size: 16px; line-height: 22.4px; }
  .page-staff .page-head .sec-head > .sec-label + * { margin-top: -8px; }   /* 英字の行の箱のすぐ下に H1（現行 393: 英字 y333 ＋ 22.4 → H1 y355.4。共通の gap 8 − 9 だと 1 上がる） */
  .page-staff .page-head h1.sec-title { font-size: 28px; }
  .page-staff :is(.sec-title, .bar-head, .sc-name) { text-wrap: wrap; }
  /* 帯見出し: 字 24px・行高 1.7、橙の帯は 4×45、帯と字の間 16（字は x41）。帯の下 → 点線 17 → 最初の写真 17 */
  .page-staff .bar-head { font-size: 24px; line-height: 1.7; padding-block: 2px; padding-left: 16px; }
  .page-staff .bar-head-rule { margin-bottom: 16px; }

  /* ---- 院長挨拶 ---- 点線 → 写真 36・写真 → 名前 56。役職 14・名前 24（字間 0）・間 20。
     キャッチ 20px（字間 0。1 行に収まる）は名前の 32 下、本文 14px・行高 2.2・字間 0.06em・#574D45 はキャッチの 28 下 */
  .dm-grid { margin-top: 36px; gap: 55px; }   /* 2 周目: 新は名前が 1・キャッチが 2 下だった（440 実測 998/1069 に対し 999/1071） */
  .dm-name { gap: 20px; }
  .dm-role { font-size: 14px; line-height: 1.7; letter-spacing: 0; }
  .dm-name-txt { font-size: 24px; line-height: 1.7; letter-spacing: 0; }
  .page-staff .dm-catch { margin-top: 31px; font-size: 20px; line-height: 1.7; letter-spacing: 0; }
  .dm-text { font-size: 14px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .section.staff-dm { padding-bottom: 81px; }   /* 本文最終行 → 「歯科医師」帯の字頭 102（440。新は 106） */

  /* ---- スタッフカード ---- 写真は容器の 70%（440 で 280×373・344 で 212×283。新は 260 で頭打ちだった）。
     写真 → 吹き出し 48、吹き出しは角丸 10・余白 16・字 14/1.7 #574D45、尻尾は幅 20×高 19 を左 74。
     吹き出し → 名前 24（20px・字間 0）→ 出身 8（14px・字間 0.02em・#574D45）→ 項目 16（13px/1.8、項目の間 10）→ 点線 39 */
  .sc { padding-bottom: 41px; }   /* 2 周目: 最終行の字 → 点線 58（新は 56） */
  /* 2026-09-29 現行 393・344 を出現アニメの後に実測: カードの送りが現行より 0.7〜0.8 ずつ長く、歯科衛生士の最後で 17〜21 下へずれていた（カードの中の字の並びは 1 以内で一致）。
     点線 → 次の写真を 64 → 63.25 にして送りをそろえる（STUDIO の端数の送りに合わせる値。393 で最後のカードの差 +21 → ±3 以内） */
  .sc:not(:first-child) { padding-top: 63.25px; }
  .sc-photo { width: 70%; }
  /* 写真は元の縦横比（原本は img の高さ auto。T.U. 1600×2313・R.O. 1600×2400 は 3:4 より 32 / 47 高い）。--ar はテンプレートが width/height から渡す */
  .sc-photo img { aspect-ratio: var(--ar, 248 / 330); }
  .sc-bubble { margin-top: 24px; padding: 16px; border-radius: 10px; }
  .sc-bubble::before { left: 74px; top: -19px; border-left-width: 10px; border-right-width: 10px; border-bottom-width: 19px; }
  .sc-bubble p { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .sc-name, .sc-name.is-en { font-family: var(--f-round); font-size: 20px; font-weight: 500; line-height: 1.7; letter-spacing: 0; }
  .sc-origin { margin-top: 10px; font-size: 14px; line-height: 1.7; letter-spacing: 0.02em; column-gap: 12px; color: var(--c-ink-soft); }   /* 名前の字頭 → 出身の字頭 41（新は 39） */
  .sc-fields { margin-top: 16px; gap: 10px; }
  .sc-field :is(dt, dd) { letter-spacing: 0; }   /* 原本の項目は字間なし（「日本歯科保存学会専門医」11 字で 141px。新は 0.02em で 144） */
  .sc-field dd { color: var(--c-ink-soft); }
  /* 値の無い「資格等」: 原本は見出しと空の 1 行を出し、項目群を 23 上げる（[data-boolean] .list-1__item__sd-16 { margin-top: -23px }）。
     440 実測: 出身の字頭 → 「資格等」の字頭 18、→「得意なこと」の字頭 65（見出し 23.4＋空行＋間 10 = 47 → 空行は 13.4） */
  .sc.has-empty .sc-fields { margin-top: -7px; }
  /* 事務・歯科総合職（原本 list-3 / list-4）は項目の間 16（歯科医師・衛生士は 10）。440 実測: 見出しの字頭どうし 63（1 行の値のとき）。
     事務の空の「資格」は項目群を 25 上げ、空行の高さは 0（出身 → 「資格」16、→ 次の見出し 39） */
  .page-staff :is(#office, #general) .sc-fields { gap: 16px; }
  .page-staff :is(#office, #general) .sc.has-empty .sc-fields { margin-top: -9px; }   /* 2026-10-01 医院の修正リスト No.80: 元事務の 5 名（#general）にも */
  /* 歯ブラシは SVG 自体が斜め（回さない）。幅 31、カードの右 24・点線の 65 上 */
  .sc-brush { right: 4px; bottom: 25px; width: 31px; }
  .sc-brush img { width: 31px; transform: none; }
  /* 歯科総合職の見出しの上だけ原本は 161 空く（他の区分は 81）。原本では事務の後ろの見出し。
     2026-10-01 医院の修正リスト No.80 で事務が無くなり歯科衛生士の直後になったので、上乗せの padding-top: 80px を外した（600〜910 の 120px・911〜1079 の 188px も同じ）。
     残すと 歯科衛生士 → 歯科総合職 の間だけ 160（673・841 は 200、1000 は 284）と、前の 歯科衛生士 → 事務（80・80・96）の倍近くに開くため。外して前の 歯科衛生士 → 事務 と同じ間になる（1080〜 は元から上乗せなし） */
  /* 最後の項目の文字 → 口（歯）の上端 121（2026-09-26 現行 390 を出現アニメが終わってから実測。以前の 26px は出現前の撮影で約 80 ずれていた） */
  .page-staff .section.staff-group:last-of-type { padding-bottom: 105px; }

  /* ---- FOR SMILE ---- 楕円は about の HISTORY と同じ SVG（幅 1.281W − 44.8・2:1・縦の線形グラデ）。点線 → 楕円 81 → ラベル 86。
     H2 24px（自然な折り返し）→ 本文 40、本文 13px/2.2・字間 0.06em・中央・#574D45。写真の段は本文の 40 下・高さ 508、その直下に次の帯見出し */
  .section.staff-fs { padding-top: 80px; padding-bottom: 78px; }   /* 2026-09-26 現行を最後までスクロールして出現アニメを終えた状態（静止状態）で実測: 写真の段の下端 → 「歯科衛生士」の帯 84（旧 0 は写真に帯が付いていた。9/24 の参照は写真が遅延読み込みで写っていなかった） */
  .fs-oval { left: 50%; right: auto; bottom: auto; width: calc(128.1vw - 44.8px); height: auto; aspect-ratio: 2 / 1; transform: translateX(-50%);
    background: 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%); }
  .staff-fs .sec-title { font-size: 24px; text-wrap: balance; }   /* 2026-09-29「患者様」に統一して 1 字減り、390 で「…笑顔のため／に。」と 2 字だけ落ちたので、2 行の長さをそろえる（「地域の患者様の、／笑顔のために。」） */
  .staff-fs .sec-head { margin-bottom: 40px; }
  .fs-body { margin-top: 0; font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  /* 写真 3 枚は原本 ≤540 の横並び（幅 220 / 350 / 180、角丸 30）の位置をそのまま絶対配置で再現（ぼかし素材 2 枚は出さない）。
     左端: 16:9 = 中央 −224・上 0／4:3 大 = 中央 −175・上 245（前面）／4:3 小 = 中央 +26・上 72。画面外は section の clip で切る。
     2026-09-29 夕に一度「重ならない並び」に組み直したが、同じ日の夜にユーザーの了解で現行どおりに戻した（下の「FOR SMILE のぼかしの 2 枚」の節）。
     画面が 350 より狭いとき（344）: 現行は写真の段の幅を min(350, 画面幅) に縮め、大きい 3 を段の幅いっぱい（344）に、2・1 は段の左端から −49・−95、
     5・4 は段の右端から −149・−50 に置く（2026-09-29 夜に現行 344・390 で実測。旧は 350 のままで 3 が左右 3 ずつ切れ、ほかの 4 枚も 3 ずれていた）。
     段の半分 = min(175px, 50vw)。350 以上は今までの値（中央 −224 など）と同じ */
  .fs-collage { display: block; position: relative; height: calc(245px + min(263px, 75vw)); margin-top: 40px; }
  .fs-item { position: absolute; top: 0; }
  .fs-item img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 30px; }
  .fs-item-2 { left: calc(50% - min(175px, 50vw) - 49px); width: 220px; }
  .fs-item-3 { left: calc(50% - min(175px, 50vw)); top: 245px; width: min(350px, 100vw); z-index: 1; }
  .fs-item-5 { left: calc(50% + min(175px, 50vw) - 149px); top: 72px; width: 180px; }
}

/* ============ 1080〜 Figma pc/staff 718:16280（医院「📍デザイン_作業中」・1366 幅）に合わせる（2026-09-25）============
   1366 で位置・大きさ・余白を Figma の数値に一致させ、ほかの PC 幅は同じ構造のまま中央の 1136 容器で伸縮。
   Figma の仮文言（「苗字 名前」「〇〇大学」「キャッチコピー」）・仮写真は使わない。中身は content/main/staff.json のまま。
   Figma の院長「経歴」の箱（Info Container 718:16302・#F1EAE5）は content に経歴が無いので出さない。 */
@media (min-width: 1080px) {
  /* ---- catch 482:290: 写真 1170×386（x98・y151＝ヘッダーの 62 下）→ 20 → 英字 Roboto 18px 字間 25%（y557）→ H1 40px（y588）→ 27 → 院長挨拶の見出し（y683） ---- */
  .staff-hero { width: min(100% - 196px, 1170px); max-width: 1170px; margin-top: 62px; }
  .page-staff .page-head { padding-top: 20px; padding-bottom: 27px; }
  .page-staff .page-head .sec-label { font-size: 18px; }

  /* ---- 見出し Title 507:11358: 橙の帯 4×54 → 16 → 32px/1.7 字間 6% #271200。→ 16 → 点線 1136 → 20 → 中身 ---- */
  .page-staff .bar-head { padding-left: 16px; line-height: 1.7; letter-spacing: 0.06em; margin-bottom: 0; }
  .page-staff .bar-head-rule { margin: 16px 0 20px; }

  /* ---- 院長挨拶: 点線 → 69 → 写真 366×476（x181＝容器の左 66）→ 128 → 文字 538 幅。役職 16px → 21 → 名前 24px（写真の上端の 33 下）→ 32 →
     キャッチ 26px 字間 6% オレンジ → 28 → 本文 16px/2.2 字間 6% #574D45。→ 142 → 歯科医師の見出し ---- */
  .dm-grid { grid-template-columns: 366px minmax(0, 538px); column-gap: 128px; padding-left: 66px; margin-top: 68px; }   /* 点線 → 69（点線の margin-bottom 20 とは相殺される） */
  .dm-photo img { aspect-ratio: 366 / 476; object-fit: cover; }
  .dm-body { padding-top: 33px; }
  .dm-name { gap: 21px; color: var(--c-ink-deep); }
  .dm-role { font-size: 16px; line-height: 1.7; }
  .dm-name-txt { font-size: 24px; line-height: 1.7; }
  .page-staff .dm-catch { margin-top: 32px; font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
  .dm-text { margin-top: 28px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .section.staff-dm { padding-bottom: 142px; }

  /* ---- スタッフカード（Staff Content 718:16315）: 532 幅 × 2・列間 68（1366 で 115〜1247）。写真 272×316（角なし）→ 32 → 文字（上 23）:
     名前 26px 字間 6% → 8 → 出身（大学・出身地を横並び・間 12）17px 字間 2% #574D45 → 32 → 項目（13px/1.8・見出しオレンジ → 2 → 値 #574D45、項目の間 10）。
     吹き出し Union 718:16339: 写真の 16 下に尻尾の先（幅 17・高さ 20・中心は左から 133.5）、本体 532×156 は写真の 33 下・角丸 10・白 → 下端で白 50%。
     文字 16px/1.7 字間 0 #574D45、余白 上下 24 左右 32、左揃え。区分の最後のカード → 次の見出し 106 ---- */
  .sc-list { grid-template-columns: repeat(2, minmax(0, 532px)); justify-content: start; column-gap: 68px; row-gap: 64px; margin-top: 0; }
  .sc { grid-template-columns: minmax(0, 272fr) minmax(0, 228fr); column-gap: 32px; row-gap: 33px; padding: 0; }   /* 532 幅で 272 ＋ 32 ＋ 228。狭い PC 幅は比のまま縮む */
  .sc:first-child { padding-top: 0; }
  .sc-photo { width: 100%; }
  .sc-photo img { aspect-ratio: 272 / 316; object-fit: cover; object-position: 50% var(--sc-pos-y, 0%); }   /* 既定は上ぞろえ（= top）。--sc-pos-y は staff.json の photoPosYPc からテンプレートが渡す */
  .sc-body { padding-top: 23px; }
  .sc-name { font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .sc-origin { flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 0; margin-top: 8px; font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: var(--c-ink-soft); }
  .sc-fields { margin-top: 32px; gap: 10px; }
  .sc.has-empty .sc-fields { margin-top: 11px; }   /* 原本 pc1366: 値の無い見出しのカードは項目群が 21 上がる */
  .sc-field :is(dt, dd) { font-size: 13px; line-height: 1.8; letter-spacing: 0; }
  .sc-field dd { margin-top: 2px; color: var(--c-ink-soft); }
  .sc-bubble { margin: 0; padding: 24px 32px; border-radius: 10px; justify-content: flex-start;
    background: linear-gradient(180deg, var(--c-white) 10.7%, rgba(255, 255, 255, 0.5) 100%); }
  .sc-bubble::before { left: 125px; top: -20px; border-left-width: 8.5px; border-right-width: 8.5px; border-bottom-width: 20px; }
  .sc-bubble p { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .section.staff-group { padding-bottom: 106px; }
  .section.staff-group:last-of-type { padding-bottom: 117px; }   /* ＋ フッターの margin-top 64（shell）= Figma の 181 */

  /* ---- FOR SMILE（Union 718:16281）: 楕円 1549×774（中央・上端＝この節の上端）＋ 上端から 275 下の全幅の帯（〜754）。
     塗りは #FFF9CC → #FFE2CA → 地の色（縦。高さの 20% で #FFE2CA、52% で地の色）。前の区分のカード → 楕円 97（上の padding-bottom 106 と相殺して −9）。
     楕円の上端 → 英字 141 → H2 → 40 → 本文 718 幅 16px/2.2 字間 6% #574D45（中央）→ 40 → 写真 3 枚（角丸 30）:
     A 390×261 は中央 −763・上 0／B 529×353 は中央 −264・上 50（前面）／C 358×241 は中央 +347・上 195。写真の下端 → 次の見出し 176 ---- */
  .section.staff-fs { margin-top: -9px; padding-top: 141px; padding-bottom: 176px; }
  .fs-oval { left: calc(50% - 774.5px); right: auto; top: 0; bottom: auto; width: 1549px; height: 774px; transform: none; border-radius: 50%;
    background: linear-gradient(180deg, #FFF3CB 0, #FFE2CA 154px, var(--c-cream) 402px); }
  .staff-fs::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 275px; height: 479px; pointer-events: none;
    background: linear-gradient(180deg, #FFE7CA 0, var(--c-cream) 127px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px); mask-image: linear-gradient(180deg, transparent 0, #000 80px); }   /* 楕円と同じグラデの 275px 以降。上端は 1366 では楕円に隠れ、1440〜 で楕円の外に出る直線をぼかす */
  .staff-fs .sec-head { margin-bottom: 40px; }
  .fs-body { max-width: 718px; margin: 0 auto; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .fs-collage { display: block; position: relative; height: 436px; margin-top: 40px; }
  .fs-item { position: absolute; margin: 0; }
  .fs-item img { width: 100%; height: 100%; aspect-ratio: auto 4 / 3; object-fit: cover; border-radius: 30px; }
  .fs-item-2 { left: calc(50% - 763px); top: 0; width: 390px; height: 261px; margin-top: 0; }
  .fs-item-3 { left: calc(50% - 264px); top: 50px; width: 529px; height: 353px; margin-top: 0; z-index: 1; }
  .fs-item-5 { left: calc(50% + 347px); top: 195px; width: 358px; height: 241px; margin-top: 0; }
}

/* ============ 演出（docs/MOTION.md。属性は templates/main/staff.mjs）============
   html.mo の下だけ。JS なし・reduce・Playwright（?motion=1 なし）では何も付かず、最初から全部見える。
   動かすのは opacity / translate / scale / rotate / clip-path だけ（transform は hover.css と既存の配置が使う）。横にずらす初期状態は使わない。
   見せ場は 2 つ: ① スタッフカード（写真 unveil → 吹き出しが尻尾から → 歯ブラシが磨くように揺れる）② FOR SMILE（楕円が朝日のように昇り、写真 3 枚が順に開いて視差）。 */

/* ヒーロー（ml-window）: 角丸の窓が内側から開き、写真は 1.08 → 1 にゆっくり落ち着く（原本 STUDIO のヒーロー 1.07 → 1 の置き換え）。
   枠は html.mo の間ずっと overflow:clip（写真の拡大が落ち着くまで枠の外へ出さない。静止の見た目は同じ） */
@keyframes ml-window { from { opacity: 0; clip-path: inset(7% 6% 7% 6% round 48px); } 35% { opacity: 1; } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes ml-settle { from { scale: 1.08; } }
html.mo .staff-hero[data-mo="ml-window"] { overflow: clip; }
html.mo .staff-hero[data-mo="ml-window"].is-in { animation-name: ml-window; animation-duration: calc(var(--mo-dur) * 1.8); }
/* 写真の角丸・波形は画像に焼き込み（透過）なので、拡大は窓と同じ時間で終える（窓の clip が外れた後に拡大が残ると角が四角く見える） */
html.mo .staff-hero[data-mo="ml-window"].is-in img { animation: ml-settle calc(var(--mo-dur) * 1.8) var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* 吹き出し（ml-bubble）: 尻尾の位置を支点に .86 → 1 で膨らむ（行き過ぎは 1.02 未満。縮んだ状態から始まるので横幅は増えない） */
@keyframes ml-bubble { from { opacity: 0; scale: .86; translate: 0 10px; } }
.sc-bubble { transform-origin: calc(var(--tail-x, 72px) + 8px) 0; }
html.mo .sc-bubble[data-mo="ml-bubble"].is-in { animation-name: ml-bubble; animation-duration: calc(var(--mo-dur) * .8); animation-timing-function: var(--mo-ease-pop); }
@media (max-width: 599px) { .sc-bubble { transform-origin: 84px 0; } }
@media (min-width: 1080px) { .sc-bubble { transform-origin: 133px 0; } }

/* 歯ブラシ（ml-brush）: 柄の下端を支点に左右へ小さく振れて止まる（磨く仕草。回転は ±14° 以内・幅 30px の小物なので横はみ出しは出ない） */
@keyframes ml-brush {
  0% { opacity: 0; rotate: -18deg; translate: 0 8px; }
  28% { opacity: 1; rotate: 14deg; translate: 0 0; }
  46% { rotate: -9deg; }
  64% { rotate: 6deg; }
  80% { rotate: -3deg; }
  100% { rotate: 0deg; }
}
.sc-brush { transform-origin: 50% 100%; }
html.mo .sc-brush[data-mo="ml-brush"].is-in { animation-name: ml-brush; animation-duration: 1.2s; animation-timing-function: ease-in-out; }

/* FOR SMILE の楕円（ml-sunrise）: 下から朝日のように昇りながら現れる（縦だけ）。1080〜 の全幅の帯（::before）も楕円に合わせる */
@keyframes ml-sunrise { from { opacity: 0; translate: 0 80px; } }
html.mo .fs-oval[data-mo="ml-sunrise"].is-in { animation-name: ml-sunrise; animation-duration: calc(var(--mo-dur) * 2); }
html.mo .staff-fs:has(> .fs-oval[data-mo]:not(.is-in))::before { opacity: 0; }
html.mo .staff-fs:has(> .fs-oval[data-mo].is-in)::before { animation: ml-sunrise calc(var(--mo-dur) * 2) var(--mo-ease) backwards; }

/* FOR SMILE の写真: 枠（.fs-item）を角丸ごと overflow:clip にし、中の .mo-par-cover が視差で上下する（motion.css が 1 + 係数に拡大）。
   枠の角丸は写真と同じ値（静止の見た目は変わらない）。1080〜 は枠に高さがあるので包みも 100% */
.fs-item > .mo-par-cover { height: 100%; }
html.mo .page-staff .fs-item { overflow: clip; border-radius: var(--r-l); }
@media (max-width: 599px), (min-width: 1080px) { html.mo .page-staff .fs-item { border-radius: 30px; } }

/* フッターの口の上の間隔を現行に合わせる（2026-09-26 統合時。最後の中身の下端→口の上端を現行と同じ方法で実測: tools なし・scratchpad の gap.mjs）。
   〜599 は現行 390、768〜1079 は現行 841 の値 */
/* 2026-09-28 測り直し（最後の吹き出しの字の下端 → 口の上端）: 現行 673・841 とも 144、1000 は 198（吹き出しの下余白 24 ＋ フッターの margin-top 14 を引いた値） */
@media (min-width: 600px) and (max-width: 1079px) { body.page-staff main > .staff-group:last-child { padding-bottom: 106px; } }
@media (min-width: 911px) and (max-width: 1079px) { body.page-staff main > .staff-group:last-child { padding-bottom: 160px; } }

/* ============ FOR SMILE のぼかしの 2 枚（2026-09-28。templates/main/staff.mjs の .fs-item-1 = 左下・.fs-item-4 = 右上、.is-blur） ============
   原本（STUDIO）・Figma pc/staff とも、はっきりした 3 枚の後ろに小さな写真を 2 枚ぼかして置いている（STUDIO filter: blur(10px)・Figma レイヤーぼかし 10）。
   原本の素材は PIXTA の見本なので、医院の実際の写真を仮に差し替えて出す（content/main/staff.json の photosStandIn）。
   枠は原本の 1000×685 の比。ぼかしは枠（.fs-item）に掛けるので、角丸の縁も柔らかく外へにじむ（写真だけに掛けると枠の clip で縁が硬く切れる）。後ろに置く（z-index は前の 3 枚が上）。
   位置（中央からの距離・上端）: 〜599（原本 ≤540）左下 −270・106・幅 170／右上 +125・0・幅 140。1080〜（Figma）左下 −737・302／右上 +218・21（200×134）。600〜1079 は下の帯の節。
   経緯: 2026-09-29 に一度全幅でぼかしを外した（昼に 1080〜・夕に 〜1079 を重ならない並びへ組み直し。commit 135022e・fcc6dda）。
   同じ日の夜、ユーザー「大元がぼかしていたからか。それならそれでいい」の了解で、位置・大きさ・ぼかしとも現行・Figma どおりに戻した */
.fs-item.is-blur { z-index: 0; filter: blur(10px); }
.fs-item.is-blur img { aspect-ratio: 1000 / 685; height: auto; object-fit: cover; border-radius: 30px; }
@media (max-width: 599px) {
  .page-staff .fs-item-1 { left: calc(50% - min(175px, 50vw) - 95px); top: 106px; width: 170px; }   /* 350 以上は 中央 −270（上の〜599 の節の「段の半分」） */
  .page-staff .fs-item-4 { left: calc(50% + min(175px, 50vw) - 50px); top: 0; width: 140px; }   /* 350 以上は 中央 +125 */
}
@media (min-width: 1080px) {
  .page-staff .fs-item-1 { left: calc(50% - 737px); top: 302px; width: 200px; height: 134px; }
  .page-staff .fs-item-4 { left: calc(50% + 218px); top: 21px; width: 200px; height: 134px; }
  .page-staff .fs-item.is-blur img { height: 100%; aspect-ratio: auto; }
  /* Figma のレイヤーぼかし 10 は CSS の blur(5px) 相当（Figma の Dev Mode の CSS 書き出しは値を半分にする）。〜1079 は現行 STUDIO の blur(10px) のまま。
     2026-09-28: Figma MCP が上限で 718:16288 の画像を取れず、目では照合していない */
  .page-staff .fs-item.is-blur { filter: blur(5px); }
}

/* ============ 600〜1079: 現行 urala.com（STUDIO 541〜910 ／ 911〜1120）に合わせる（2026-09-28 現行を出現アニメの後に 673 / 841 / 1000 で実測） ============
   旧（768〜1079 = 2 列・写真の下に本文、院長は写真と本文の横並び）は現行と違っていた。現行は 2 つの帯で組みが変わる:
   ■ 600〜910（841 実測）: 左右の余白 40。ヒーローは 3:2 の別カット（y120・容器幅）→ 20 → 英字 STAFF 18px/25.2 字間 0.25em → すぐ下に H1 40px/68 → 80 → 見出し。
     見出し: 32px/54 字間 0.06em（帯 4×45 は行の上端・帯 → 字 16）→ 16 → 点線 → 18 → 中身。
     院長: 縦積み。写真 400 幅（中央・点線の 49 下）→ 64 → 役職 14px ＋ 20 ＋ 名前 24px/40.8 → 32 → キャッチ 26px/44 → 28 → 本文 16px/35.2 字間 0.06em #574D45 → 80 → 次の見出し。
     スタッフ: 1 列。写真（半分 − 16）→ 24 → 本文（半分 − 16。写真の縦の中央）: 名前 26px/44 → 8 → 出身 17px/1.7 字間 0.02em（学校／出身地の 2 行）→ 32 → 項目 13px/1.8（見出し → 値 0・項目の間 10）。
       写真 → 32 → 吹き出し（幅いっぱい・白・角丸 10・上下左右 24・14px/1.7 中央・尻尾はカードの左 124）→ 64 → 次のカード。区分の最後 → 80 → 次の節。
     FOR SMILE: 楕円（幅 123.2vw・2:1・中央）の上端 → 141 → 英字 16px → H2 32px/54 → 41 → 本文 16px/35.2（718 幅）→ 63 → 写真（下の位置）→ 80 → 次の見出し。
   ■ 911〜1079（1000 実測）: 左右の余白 56。ヒーローは横長の帯（888×292）。見出しの帯 4×54。点線 → 16 → 中身（院長は 73）。
     院長: 写真 317（3:4）→ 64 → 本文（写真の上端の 32 下に名前・役職 16px）→ 144 → 次の見出し。
     スタッフ: 2 列（間 64）。写真 194（3:4）→ 24 → 本文（写真の上端の 24 下に名前）。本文の下 32 に吹き出し（カード幅・16px/1.7 中央・上下 24 左右 32）→ 64 → 次の段。区分の最後 → 96 → 次の節。
     FOR SMILE の写真は原本 ≤1120 の位置。写真の下端 → 176 → 次の見出し。 */
@media (min-width: 600px) and (max-width: 1079px) {
  body.page-staff .main { --gutter: 40px; }
  .page-staff .staff-hero { margin-top: 30px; }
  .page-staff .page-head { padding-top: 20px; padding-bottom: 80px; }
  .page-staff .page-head .sec-head { gap: 0; }
  .page-staff .page-head .sec-head.center .sec-label { font-size: 18px; line-height: 25.2px; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-staff .page-head .sec-head > .sec-label + * { margin-top: 0; }
  .page-staff .page-head h1.sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }

  .page-staff .bar-head { position: relative; border-left: 0; padding-left: 20px; font-size: 32px; line-height: 54px; letter-spacing: 0.06em; margin-bottom: 0; }
  .page-staff .bar-head::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 45px; background: var(--c-orange); }
  .page-staff .bar-head-rule { margin: 16px 0 18px; }

  .page-staff .dm-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; padding-left: 0; margin-top: 49px; }
  .page-staff .dm-photo { width: min(100%, 400px); margin-inline: auto; }
  .page-staff .dm-photo img { aspect-ratio: 2048 / 2727; object-fit: cover; }
  .page-staff .dm-body { padding-top: 0; }
  .page-staff .dm-name { gap: 20px; color: var(--c-ink-deep); }
  .page-staff .dm-role { font-size: 14px; line-height: 1.7; letter-spacing: 0; }
  .page-staff .dm-name-txt { font-size: 24px; line-height: 40.8px; letter-spacing: 0; }
  .page-staff .dm-catch { margin-top: 32px; font-size: 26px; line-height: 44px; letter-spacing: 0; color: var(--c-orange); }
  .page-staff .dm-text { margin-top: 28px; font-size: 16px; line-height: 35.2px; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .page-staff .section.staff-dm { padding-bottom: 80px; }

  .page-staff .sc-list { grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 0; }
  .page-staff .sc { grid-template-columns: calc(50% - 16px) minmax(0, 1fr); grid-template-areas: "photo body" "bubble bubble"; justify-content: start; align-items: center; column-gap: 24px; row-gap: 32px; padding: 0; border-bottom: 0; }
  .page-staff .sc:first-child { padding-top: 0; }
  .page-staff .sc.no-photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "bubble"; }
  .page-staff .sc-photo { width: 100%; margin: 0; }
  .page-staff .sc-photo img { aspect-ratio: var(--ar, 2048 / 2727); object-fit: cover; object-position: top; }   /* 現行は元の縦横比（T.U. 2047×2959・R.O. 2048×3072・T.A. 2048×2756 は 3:4 より縦長。841 で 527 / 547 / 491 高） */
  .page-staff .sc-body { padding-top: 0; margin-inline: 0; }
  .page-staff .sc-name, .page-staff .sc-name.is-en { font-size: 26px; line-height: 44px; letter-spacing: 0; color: var(--c-ink-deep); }
  .page-staff .sc-name.is-en { font-family: var(--f-round); font-weight: 500; }   /* 頭文字の名前（N.S. など）も現行は Zen Maru Gothic（〜599 と同じ。旧は PC 用の Roboto のままで字が詰まって見えた） */
  .page-staff .sc-origin { flex-direction: column; row-gap: 0; margin-top: 8px; font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: var(--c-ink-soft); }
  .page-staff .sc-fields, .page-staff .sc.has-empty .sc-fields { margin-top: 32px; gap: 10px; }
  /* 出身 → 最初の項目: 歯科医師は 32、歯科衛生士・事務・歯科総合職は 22（現行 673・841・1000 とも。原本の list ごとの値）。
     事務の空の「資格」のカードは 出身 → 「得意なこと」40（見えない見出し 23 ＋ 間 10 を差し引いて 7） */
  .page-staff :is(#hygienist, #office, #general) .sc-fields { margin-top: 22px; }
  .page-staff :is(#office, #general) .sc.has-empty .sc-fields { margin-top: 7px; }   /* 2026-10-01 医院の修正リスト No.80: 元事務の 5 名（#general）にも */
  .page-staff .sc-field :is(dt, dd) { font-size: 13px; line-height: 1.8; letter-spacing: 0; }
  .page-staff .sc-field dd { margin-top: 0; color: var(--c-ink-soft); }
  .page-staff .sc-field.is-empty dd { height: 0; }
  /* 歯科医師の「得意なこと」: 現行は 541〜1120 だけ出していない（STUDIO の list-1__item__sd-20 が display:none。〜540 と PC は出す。2026-09-29 に 841・1000 で確認）。
     出すと本文が 57〜80 高くなり、673 では写真が下がり、1000 では段ごとに 80 ずつ下へずれた。現行に合わせて 600〜1079 は隠す（文言は content のまま・〜599 と PC は出る） */
  .page-staff #dentist .sc-field[data-field="得意なこと"] { display: none; }
  /* 歯ブラシ: 現行は SVG 自体が斜めで回さない（31×57。〜599 と同じ）。位置は本文ではなく写真の段に付く（段の下端の 16 上・容器の右 48。673・841 実測）。
     本文を段の高さいっぱいに伸ばし、字は今までどおり縦の中央に置く */
  .page-staff .sc-body { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .page-staff .sc-brush { right: 48px; bottom: 16px; width: 31px; }
  .page-staff .sc-brush img { width: 31px; transform: none; }
  /* 吹き出し: 余白は上下 24・左右 32、字は左寄せ（1 行の文は箱ごと中央に来る）。現行 673・841・1000 とも STUDIO の余白 24px 32px・text-align left
     （2026-09-29 照合。旧は左右 24・中央寄せで、2 行の吹き出しの 2 行目が真ん中に寄り、1 行目の折れ位置も 1〜2 字ずれていた） */
  .page-staff .sc-bubble { --tail-x: 124px; margin: 0; padding: 24px 32px; border-radius: 10px; justify-content: center; background: var(--c-white); }
  .page-staff .sc-bubble::before { left: 132px; top: -17px; border-left-width: 8.5px; border-right-width: 8.5px; border-bottom-width: 17px; }
  .page-staff .sc-bubble p { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); text-align: left; }
  .page-staff .section.staff-group { padding-bottom: 80px; }
  /* 現行 673・841 は歯科総合職の見出しの上だけ 200 空く（ほかの区分は 80。〜599 と同じ癖）ので #general に padding-top: 120px を足していた。
     2026-10-01 医院の修正リスト No.80 で事務が無くなり歯科衛生士の直後になったので外した（〜599 の節に理由） */
  .sc-bubble { transform-origin: 140px 0; }

  .page-staff .section.staff-fs { margin-top: 0; padding-top: 141px; padding-bottom: 80px; }
  .page-staff .fs-oval { left: 50%; right: auto; top: 0; bottom: auto; width: 123.2vw; height: auto; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50%;
    background: 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%); }
  .page-staff .staff-fs::before { content: none; }
  .page-staff .staff-fs .sec-head { gap: 0; margin-bottom: 41px; }
  .page-staff .staff-fs .sec-head.center .sec-label { font-size: 16px; line-height: 27.2px; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-staff .staff-fs .sec-head > .sec-label + * { margin-top: 0; }
  .page-staff .staff-fs .sec-title { font-size: 32px; line-height: 54px; letter-spacing: 0.06em; }
  .page-staff .fs-body { max-width: 718px; margin: 0 auto; font-size: 16px; line-height: 35.2px; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .page-staff .fs-collage { display: block; position: relative; height: 695px; margin-top: 63px; }
  .page-staff .fs-item { position: absolute; margin: 0; }
  .page-staff .fs-item img { width: 100%; height: auto; aspect-ratio: auto 4 / 3; object-fit: cover; border-radius: 30px; }
  .page-staff .fs-item.is-blur img { aspect-ratio: 1000 / 685; }
  /* 原本 ≤910: 左下ぼかし −445.5・302・170／左 −406.5・0・360（16:9）／中央 −248.5・320・500（前面）／右上ぼかし +98.5・20・170／右 +117.5・196・328。
     673 などでは画面の端で切れ、3 が 1・5 に重なるが、現行どおり（2026-09-29 夜に戻した。上の「FOR SMILE のぼかしの 2 枚」の節） */
  .page-staff .fs-item-1 { left: calc(50% - 445.5px); top: 302px; width: 170px; }
  .page-staff .fs-item-2 { left: calc(50% - 406.5px); top: 0; width: 360px; }
  .page-staff .fs-item-3 { left: calc(50% - 248.5px); top: 320px; width: 500px; z-index: 1; }
  .page-staff .fs-item-4 { left: calc(50% + 98.5px); top: 20px; width: 170px; }
  .page-staff .fs-item-5 { left: calc(50% + 117.5px); top: 196px; width: 328px; }
  html.mo .page-staff .fs-item { border-radius: 30px; }
}
/* 600〜910 のスタッフカードの本文の字の幅: 現行は写真と同じ（半分 − 16。841 で 365・673 で 281）で、容器の右端より 8 手前で折れる。
   列は写真｜本文のまま、本文の右に 8 の余白を足して折れ位置を合わせる（「Jokanスクール…」の 1 行目が 1 字長かった。歯ブラシの位置は本文の箱の右端基準なので変わらない） */
@media (min-width: 600px) and (max-width: 910px) {
  .page-staff .sc-body { padding-right: 8px; }
}
@media (min-width: 911px) and (max-width: 1079px) {
  body.page-staff .main { --gutter: 56px; }
  .page-staff .bar-head::before { height: 54px; }
  .page-staff .bar-head-rule { margin-bottom: 16px; }

  .page-staff .dm-grid { grid-template-columns: 317px minmax(0, 1fr); column-gap: 64px; align-items: start; margin-top: 73px; }
  .page-staff .dm-photo { width: 100%; margin: 0; }
  .page-staff .dm-body { padding-top: 32px; }
  .page-staff .dm-role { font-size: 16px; }
  .page-staff .section.staff-dm { padding-bottom: 144px; }

  .page-staff .sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 64px; }
  .page-staff .sc { grid-template-columns: 194px minmax(0, 1fr); align-items: start; align-content: start; column-gap: 24px; row-gap: 32px; }
  .page-staff .sc-body { align-self: start; display: block; padding-top: 24px; }   /* 600〜910 の「段いっぱいに伸ばす」を戻す（この帯は本文を写真の上端に揃える） */
  .page-staff .sc-brush { right: 0; bottom: -52px; }
  .page-staff .sc-bubble { padding: 24px 32px; }
  .page-staff .sc-bubble p { font-size: 16px; }
  .page-staff .section.staff-group { padding-bottom: 96px; }
  /* 現行 1000 は歯科総合職の見出しの上だけ 284（ほかは 96）なので #general に padding-top: 188px を足していた。
     2026-10-01 医院の修正リスト No.80 で事務が無くなり歯科衛生士の直後になったので外した（〜599 の節に理由） */

  .page-staff .section.staff-fs { padding-bottom: 176px; }
  .page-staff .fs-collage { height: 465px; }
  /* 原本 ≤1120: 左下ぼかし −635・302・200／左 −730・0・390／中央 −286・50・529（前面）／右上ぼかし +165・20・200／右 +277・196・358。
     1000 では 2・5 が画面の端で切れ、4 が 3 に重なるが、現行どおり（2026-09-29 夜に戻した） */
  .page-staff .fs-item-1 { left: calc(50% - 635px); top: 302px; width: 200px; }
  .page-staff .fs-item-2 { left: calc(50% - 730px); top: 0; width: 390px; }
  .page-staff .fs-item-3 { left: calc(50% - 286px); top: 50px; width: 529px; }
  .page-staff .fs-item-4 { left: calc(50% + 165px); top: 20px; width: 200px; }
  .page-staff .fs-item-5 { left: calc(50% + 277px); top: 196px; width: 358px; }
}

/* ---------- 下部 CTA の見直し案 c05: 下部 4 カード .staff-pagenav（docs/CTA.md・templates/main/staff.mjs。旗がオフのときは要素が無い） ----------
   「私たちについて」の 3 ページで型をそろえる: カードの大きさと、カード → 口の間は /about の下部 4 カード（about.css の .ab-pagenav）と同じ値。
   カードが入ると歯科総合職の節は最後の節でなくなる（上の :last-of-type・:last-child の余白は当たらず、区分どうしの間の余白になる） */
.page-staff .staff-pagenav.section-tight { padding-top: 0; padding-bottom: 130px; }   /* ＋ フッターの margin-top −26 = 104（/about と同じ） */
@media (min-width: 600px) and (max-width: 1079px) {
  .page-staff .staff-pagenav.section-tight { padding-bottom: 106px; }
  .page-staff .staff-pagenav .bnav { gap: 20px; }
  .page-staff .staff-pagenav .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 48px 12px 0; border-radius: 16px; }
  .page-staff .staff-pagenav .bnav-ic { width: 99px; height: 73px; }
  .page-staff .staff-pagenav .bnav-label { margin-top: 11px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
}
@media (min-width: 1080px) { .page-staff .staff-pagenav.section-tight { padding-bottom: 84px; } }   /* ＋ フッターの margin-top 64 = 148（/about と同じ） */