/* /recruit/data 数字で見るウララ歯科クリニック（templates/recruit/data.mjs）
   色・書体・余白は tokens.css の変数のみ。数字タイルの基本形は components.css の .stat を使い、ここでは並びと縦ラベル・グラフカード・順位カード・RECRUIT INFO 面を定義する。
   列数: 〜599 1 列 / 600〜1079 2 列 / 1080〜 3 列（プレビューは 841 で左寄せ 2 列＋右に 150px の空き → 等幅 2 列に直す）。
   折りたたみ規約（ARCHITECTURE §2）: ビューポート高さ固定なし・中央揃えとスクロール箱の併用なし・溢れ隠しなし・和文 ch 単位なし。タップ標的は目次ピル 56px・リンクカード 88px 以上。 */

/* ---------- 容器: 参照（STUDIO）は 1280 を左右 80 の内側に置く（1920 で 320〜1600、1440 で 80〜1360）。tokens の 1200 を main の中だけ上書き ---------- */
@media (min-width: 1080px) { .page-recruit-data .main { --container: 1280px; } .page-recruit-data .page-head { padding-top: 111px; } }   /* ヘッダー下端→ラベル 93（参照 1920/1440） */
@media (min-width: 1280px) { .page-recruit-data .main { --gutter: 80px; } }

/* ---------- ページ見出し ---------- */
.data-head .sec-title { line-height: 1.7; }
@media (max-width: 599px) { .data-head h1.sec-title { font-size: 24px; } }   /* 344 で「数字で見る／ウララ歯科クリニック」の 2 行に収める（28px だと 3 行に折れる） */
.data-h1-l { display: block; }                                    /* 〜599: 「数字で見る」で改行（fold344 の実測どおり 2 行） */
@media (min-width: 600px) { .data-h1-l { display: inline; } }    /* 600〜: 1 行 */
/* 目次ピル: 〜599 縦 1 列（「ライフスタイル」が 2 列だと折れる）/ 600〜1079 2×2（open841 の実測）/ 1080〜 横 1 行 4 つ（components.css の .anchor-nav-4） */
.data-head .anchor-nav ul { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) and (max-width: 1079px) { .data-head .anchor-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 本文の面（〜1079 は読み物幅 960。1080〜 は容器 1280 いっぱいに 4 列） ---------- */
.data-body { padding-top: clamp(72px, 12vw, 150px); }   /* 目次ピル→最初の見出し: 実測 344:140 / 1280:210（page-head の下余白と合算） */
.data-wrap { max-width: 960px; }
@media (min-width: 1080px) { .data-body { padding-top: 108px; } .data-wrap { max-width: none; } }   /* 参照 1920: ピル下端→見出し 203 */
.data-sec + .data-sec { margin-top: clamp(80px, 10vw, 200px); }  /* セクション間 PC 200 / SP 80〜120 */
.data-sec-title { margin-bottom: clamp(24px, 3vw, 40px); }
.data-sec-title small { white-space: nowrap; }

/* ---------- 並び ---------- */
.data-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (min-width: 600px) {
  .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .data-grid .stat-wide, .data-grid .stat-rank { grid-column: span 2; }
}
/* 1080〜1279: 3 列（展開した折りたたみ 1104 でカード 325。参照 pc1280 は固定 300 のカードが 3 枚で折り返し右に空きが出る崩れ → 等幅 3 列に直す） */
@media (min-width: 1080px) {
  .data-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* ライフスタイル: 順位カード 2 列×2 段、円グラフ 3 枚は右の列に縦に並ぶ（pc1280-04） */
  .data-grid .stat-rank { grid-row: span 2; }
  .data-grid-date4 > .stat-rank ~ .stat { grid-column: 3; }
}
/* 1280〜: 参照 1920/1440 は 300×300 のカードが 4 列（間 25）で容器 1280 を埋める。横長カード（診療の割合）は 2 列分、順位カードは 2 列×2 段分で残りの 3 枚が右の 2 列に流れる */
@media (min-width: 1280px) {
  .data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; }
  .data-grid-date4 > .stat-rank ~ .stat { grid-column: auto; }
}

/* ---------- カード共通（.stat の上書き） ---------- */
.data-grid .stat { padding: 40px 24px 32px; min-height: 280px; }
/* 左肩ラベルは全幅で縦書き（fold344 でも縦。横幅を食わないので 344 で 1 列に収まる）。角丸は左上と右下だけ。
   英字（MBTI）も全幅で立てる（Figma 1440・現行 open841・〜767 とも「M／B／T／I」の縦積み。旧は 768〜1079 だけ upright が無く横倒しの「MBTI」になっていた） */
.data-grid .stat-label { writing-mode: vertical-rl; text-orientation: upright; padding: 12px 10px; font-size: 16px; line-height: 1.4; letter-spacing: 0.06em; border-radius: 16px 0 16px 0; }
.data-grid .stat-note { font-size: 13px; color: var(--c-ink-soft); letter-spacing: 0.02em; }
.data-grid .stat-ic { width: 110px; height: 110px; margin-top: 0; }   /* 実測: アイコン約 100〜110px（components の 143 は大きすぎてカードが伸びる） */
.data-grid .stat-num { font-size: 48px; }
.data-grid .stat-unit { font-size: 20px; }
@media (min-width: 768px) {
  .data-grid .stat { padding: 48px 24px 40px; min-height: 302px; }
  .data-grid .stat-ic { width: 110px; height: 110px; }
  .data-grid .stat-num { font-size: 56px; }
  .data-grid .stat-unit { font-size: 24px; }
}
@media (min-width: 1080px) { .data-grid .stat { padding: 40px 20px 32px; min-height: 300px; } }   /* 参照 1920: カード 300 高 */
@media (min-width: 1440px) { .data-grid .stat-num { font-size: 64px; } }   /* 参照 1920/1440: 大数字 64px（カード 300 幅で「445.2万円」が収まる） */

/* グラフカード: 中身を上下中央に */
.data-grid .stat-chart { align-content: center; }
.data-grid .chart { gap: 8px; width: 100%; }   /* figure を幅いっぱいに（shrink-to-fit だと svg の width:% が自分の固有幅 188 に解決して大きくならない） */
.data-grid .stat-chart > .chart, .data-grid .data-wide-body { padding-left: 44px; box-sizing: border-box; }   /* 左肩の縦書きラベル（幅 36〜40）と円・棒を重ねない */
.data-grid .chart svg { max-width: 100%; height: auto; }
/* 円グラフ: ラベルはすべて円の中（小さい扇も縁寄りの中。components の pieChart）。余白 4 で枠いっぱいに大きく */
.data-pie:not(.pie-out) svg { width: min(100%, 236px); }
.data-bar svg { width: min(100%, 250px); }
.data-grid .pie-name { font-size: 14px; letter-spacing: 0.04em; }
.data-grid .pie-val { font-size: 22px; }
.data-grid .pie-unit { font-size: 14px; }
.data-grid .bar-val { font-size: 18px; }
.data-grid .bar-unit { font-size: 12px; }
.data-grid .bar-name { font-size: 14px; }
.data-grid .bar-sub { font-size: 11px; }

/* 横長カード（診療の割合）: 〜767 は 円→凡例の縦積み、768〜 は 円｜凡例 */
.data-wide-body { display: grid; gap: 16px; justify-items: center; width: 100%; }
.data-wide-side { display: grid; gap: 12px; justify-self: stretch; text-align: left; }
.data-legend { display: grid; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--c-ink-deep); }
.data-legend li { display: flex; align-items: flex-start; gap: 10px; }
.data-legend .pie-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; }
.data-legend-note { color: var(--c-ink-soft); }
@media (min-width: 768px) {
  .data-wide-body { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; }
  .data-wide-side { padding-right: 16px; }
}

/* 出身地（地図アイコン＋市名 2 行） */
.stat-text { font-size: 14px; line-height: 2; letter-spacing: 0.04em; color: var(--c-ink-deep); text-align: center; margin-top: auto; }

/* 順位カード（入社後に感じたギャップは？） */
.data-grid .stat-rank { align-content: start; }
.data-grid .stat-rank .stat-ic-l { width: 160px; height: 160px; margin-top: 8px; }
.rank-list { width: 100%; max-width: 480px; margin-inline: auto; display: grid; }
.rank-row { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: var(--dash); font-size: 15px; line-height: 1.7; text-align: left; color: var(--c-ink-deep); }
.rank-no { color: var(--c-orange); flex: none; min-width: 2.6em; font-size: 15px; }
.rank-text { flex: 1 1 auto; min-width: 0; }
/* 〜767: 縦ラベル（13 文字 ≒ 230px）と 1 位の行が重なるプレビューの崩れを避ける。順位リストをラベル幅ぶん右にずらす */
@media (max-width: 767px) { .rank-list { margin-left: 24px; } }
@media (min-width: 768px) {
  .data-grid .stat-rank { padding: 56px 40px 48px; }
  .data-grid .stat-rank .stat-ic-l { width: 200px; height: 200px; margin-top: 16px; }
  .rank-list { margin-top: 24px; }
  .rank-row { font-size: 16px; padding: 14px 0; gap: 20px; }
  .rank-no { font-size: 16px; }
}
@media (min-width: 1080px) {
  .data-grid .stat-rank { padding: 64px 64px 56px; }
  .data-grid .stat-rank .stat-ic-l { width: 240px; height: 240px; margin-top: 24px; }
}

/* ---------- RECRUIT INFO（上辺が楕円に膨らむグラデ面）＋ CTA ＋ ENTRY ---------- */
.page-recruit-data .rinfo { position: relative; margin-top: clamp(96px, 12vw, 200px); padding: clamp(72px, 10vw, 160px) 0 clamp(56px, 6vw, 96px); }
.page-recruit-data .rinfo::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; right: -20%; z-index: 0; background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 42%, var(--c-cream) 100%); border-radius: 50% 50% 0 0 / clamp(48px, 10vw, 160px) clamp(48px, 10vw, 160px) 0 0; }
.page-recruit-data .rinfo > .container { position: relative; z-index: 1; }
.page-recruit-data .rinfo-grid { display: grid; gap: 24px; max-width: 560px; margin-inline: auto; }   /* 〜1079: 見出し→カードの縦積み（open841 の実測。幅 560 を中央） */
.page-recruit-data .rinfo-head { margin-bottom: 0; align-content: start; }   /* grid で伸びてラベルと見出しが上下に離れるのを防ぐ */
.page-recruit-data .rinfo-links { display: grid; gap: 16px; }
.page-recruit-data .rinfo-ctas { display: grid; gap: 16px; margin-top: clamp(48px, 8vw, 160px); }
.page-recruit-data .rinfo .cta-photo { border: 0; }
@media (min-width: 768px) {
  .page-recruit-data .rinfo-ctas { gap: 24px; }
}
/* 1080〜: 参照 1920（容器 1280）: 見出し x=485（容器左 +165）、白カード 880〜1440（幅 560・右 160 内寄せ）、CTA 帯 2 枚 628×224、ENTRY 帯 320 高＋左 150 に白スマイル 250 */
@media (min-width: 1080px) {
  .page-recruit-data .rinfo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 40px; max-width: none; padding-inline: min(165px, 12.9%) min(160px, 12.5%); }
  .page-recruit-data .rinfo-links { gap: 12px; }
  .page-recruit-data .rinfo-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .page-recruit-data .rinfo-band { min-height: 224px; padding-inline: 80px; }
  .page-recruit-data .rinfo-ctas .cta-entry { grid-column: 1 / -1; min-height: 320px; padding: 48px 80px; }
  .page-recruit-data .cta-entry .cta-text { gap: 32px; }
  .page-recruit-data .cta-entry .cta-title { font-size: 24px; }
  .page-recruit-data .cta-entry .cta-smile { width: 250px; left: 150px; top: 36px; }
}

/* ======================================================================
   SP（〜767）の細部を参照 440/393/344 の実測に合わせる（capture/sp-compare/recruit__date、2026-09-24）
   グラフの中の数字は参照より大きめのまま（ユーザー指示）。カードの大きさ・並び・余白・ラベルを合わせる。768〜 は上の値のまま
   ====================================================================== */
@media (max-width: 767px) {
  /* 見出し: ラベル 16px（ABOUT DATE 幅 129）。ヘッダー下端→ラベル字頭 57、ラベル→H1 字頭 46、H1 字下→目次ピル 50 */
  .page-recruit-data .data-head { padding: 50px 0 32px; }
  .page-recruit-data .data-head .sec-head { gap: 15px; }
  .page-recruit-data .data-head .sec-label { font-size: 16px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .page-recruit-data .data-head .anchor-nav { margin-top: 41px; }
  /* 本文・RECRUIT INFO の容器は左右 32（カード 32〜407） */
  .page-recruit-data :is(.data-body, .rinfo) > .container { width: calc(100% - 64px); }
  /* 最後のピル→最初の見出しの罫 121、節の最後のカード→次の見出しの罫 120、罫の下端→カード 40 */
  .data-body { padding-top: 87.5px; }
  .data-sec + .data-sec { margin-top: 120px; }
  /* 節の見出し: 罫（4px）は題だけに付けて左 24 に題 24px lh1.7（罫の高さ 41）。補足（スタッフアンケート）14px は題の右 12、入らなければ次の行の左端から */
  .data-sec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; border-left: 0; padding-left: 0; font-size: 24px; line-height: 1.7; margin-bottom: 40px; }
  .data-sec-title-t { border-left: 4px solid var(--c-orange); padding-left: 24px; }
  .data-sec-title small { margin-left: 0; font-size: 16px; letter-spacing: 0.04em; }   /* （スタッフアンケート）は 16px（参照 440: x43〜206・字高 16） */

  /* カード: 間 24、内余白 40/41（上下）。左肩ラベルは 18px/0.06em の縦書き（字送り 19、英字も立てる）で幅 44・上下 16 */
  /* 参照 440: カードの送り 300（円）/ 303（数字）/ 284（棒）で、間は 24・カードは 1 高い（276 / 279 / 260） */
  .data-grid { gap: 24px; }
  .data-grid .stat { padding: 40px 24px 41px; min-height: 0; gap: 0; }
  .data-grid .stat-label { padding: 16px 13px; font-size: 18px; line-height: 1; letter-spacing: 0.06em; text-orientation: upright; }
  /* 数字カード 278（注記つき 302）: アイコン 142 → 数字 56px（年 24px・平均 24px）→ 注記 14px/0.04em */
  .data-grid .stat-ic { width: 142px; height: 142px; }
  .data-grid .stat-num { font-size: 56px; }
  .data-grid .stat-unit, .data-grid .stat-prefix { font-size: 24px; }
  .data-grid .stat-value { margin-top: 0; }
  .data-grid .stat-note { font-size: 14px; letter-spacing: 0.04em; line-height: 1.7; }
  /* 円グラフカード 260: 円は直径 180 をカードの中央に（左肩ラベルと重ならない）。中の文字は svg の単位で太めに（参照より少し大きい） */
  .data-grid .stat-chart > .chart, .data-grid .data-wide-body { padding-left: 0; }
  .data-grid .stat-chart { align-content: start; }
  .data-pie:not(.pie-out) svg { width: 188px; margin: -4px; max-width: none; }
  .data-grid .pie-name { font-size: 17px; }
  .data-grid .pie-val { font-size: 27px; }
  .data-grid .pie-unit { font-size: 17px; }
  .data-grid .stat-chart > .stat-note { margin-top: 16px; }
  /* 参照は画像の余白の差で「常勤・非常勤」「新卒・中途」だけ 275（円の下 55） */
  .data-grid .stat-chart { padding-bottom: 40px; }   /* 円・棒・横長のカードは下 40（高さ 260。数字カードだけ下 41） */
  .data-grid .stat-chart:is([data-key="employmentRatio"], [data-key="newGradRatio"]) { padding-bottom: 56px; }
  /* 棒グラフカード 260: 棒の図（幅 172）をカードの上下中央に */
  .data-grid .stat-bar { min-height: 260px; align-content: center; }
  .data-bar svg { width: 172px; }
  /* 横長カード（診療の割合）: 円 180 → 15 → 凡例 14px lh1.6（項目の間 4）→ 6 → 注記 13px。凡例の塊は中央に置いて中は左揃え */
  /* 円の上端はカード上端＋41（参照 3 幅）。凡例の塊は左右 16 ずつ内側に収めて中央（344 では幅 200 で注記が「…おおよその / 割合」と折れる。440 は 218 のまま x110 から） */
  .data-wide-body { gap: 15px; }
  .data-wide-side { justify-self: center; gap: 6px; max-width: calc(100% - 32px); }
  .data-legend { gap: 4px; line-height: 1.6; }
  .data-legend-note { font-size: 13px; line-height: 18px; margin-top: 2px; }   /* 注記は行送り 18（参照 344 の 2 行: 339 / 357）。カードの下端は注記の字頭＋55 */
  /* 出身地カード 307: 地図 142 → 43 → 市名 14px lh1.7（塊は中央・行は左揃え）→ 下 35 */
  .data-grid .stat-text-card { padding-bottom: 35px; }
  .stat-text { text-align: left; line-height: 1.7; margin-top: 43px; }
  /* 順位カード 627: アイコン 194 → 7 → 各行は 罫の下 18 に「1位」20px lh1.5 → 5 → 本文 → 9 → 点線。列は左右 40（点線 72〜367） */
  /* 参照は高さ 627 の箱に中身を上下中央で置く（440: アイコンの箱の上 74・最後の点線の下 74。344 は行が 2 つ増えて上下 45 に縮む）。
     本文は 16px/0.05em・行送り 27（440: 「休みの取りやすさ・福利厚生の充実 / （6票）」、344: 「休みの取りやすさ・福利 / 厚生の充実（6票）」）。「（N票）」は折らない */
  .data-grid .stat-rank { min-height: 628px; padding: 40px; align-content: center; }
  .data-grid .stat-rank .stat-ic-l { width: 194px; height: 194px; margin-top: 0; }
  .rank-list { margin-left: 0; max-width: none; margin-top: 7px; }
  .rank-row { display: grid; gap: 5px; padding: 18px 0 9px; font-size: 16px; letter-spacing: 0.05em; line-height: 27px; }
  .rank-count { white-space: nowrap; }
  .rank-row:first-child { padding-top: 0; }
  .rank-no { font-size: 20px; line-height: 1.5; min-width: 0; }

  /* RECRUIT INFO（interviews-index.css の .rinfo と同じ実測）: 最後のカード→弧の頂 125、頂→ラベル字頭 122、H2 字下→カード 48、
     白カード 118（2px のクリーム縁込み）間 10、カード→写真帯 82、帯 160・間 8、ENTRY 200。上辺は半径 ≒1.82W の円弧、グラデは 0.96W でクリームへ */
  .page-recruit-data .rinfo { margin-top: 125px; padding: 116px 0 50px; }   /* 下 50: ENTRY 帯の下端→フッターの口の上端 81（参照 3 幅。.ft-recruit の margin-top 30 と足す） */
  .page-recruit-data .rinfo::before {
    left: 0; right: 0; border-radius: 0;
    background: linear-gradient(180deg, var(--c-hero-yellow) 12vw, var(--c-hero-peach) 40vw, var(--c-cream) 96vw);
    -webkit-mask: radial-gradient(circle 182vw at 50% 182vw, #000 calc(182vw - 0.6px), transparent 182vw) top / 100% 12vw no-repeat, linear-gradient(#000 0 0) 0 calc(12vw - 1px) / 100% 100% no-repeat;
            mask: radial-gradient(circle 182vw at 50% 182vw, #000 calc(182vw - 0.6px), transparent 182vw) top / 100% 12vw no-repeat, linear-gradient(#000 0 0) 0 calc(12vw - 1px) / 100% 100% no-repeat;
  }
  .page-recruit-data .rinfo-grid { gap: 41px; max-width: none; }
  .page-recruit-data .rinfo-head { gap: 15px; }
  .page-recruit-data .rinfo-head .sec-label { font-size: 16px; letter-spacing: 0.2em; padding-left: 5px; }   /* RECRUIT INFO の字頭 x39（参照 440/393/344） */
  .page-recruit-data .rinfo-head .sec-title { font-size: 24px; }
  .page-recruit-data .rinfo-links { gap: 10px; }
  .page-recruit-data .rinfo-links .link-card { min-height: 118px; padding: 16px 32px; border: 1px solid var(--c-cream); }   /* 参照: 白 116＋縁 1×2、送り 128 */
  .page-recruit-data .rinfo-links .btn-ring { width: 24px; height: 24px; }
  .page-recruit-data .rinfo-links .btn-ring .icon { width: 20px; height: 20px; }
  .page-recruit-data .rinfo-ctas { gap: 8px; margin-top: 81px; }   /* 最後のリンクカード→写真帯の上端（参照 440 で帯 11485 前後） */
  .page-recruit-data .rinfo .cta { padding: 24px 32px; }
  .page-recruit-data .rinfo-band .cta-title { font-size: 20px; letter-spacing: 0.02em; }
  .page-recruit-data .rinfo-ctas .cta-ring .icon { width: 32px; height: 32px; }
  .page-recruit-data .rinfo-ctas .cta-ring .icon path { stroke-width: 1.1; }
  .page-recruit-data .rinfo .cta-entry { min-height: 200px; }
  .page-recruit-data .rinfo .cta-entry .cta-text { flex-direction: column; align-items: flex-start; gap: 7px; }   /* ENTRY の字下→エントリーの字頭 23（参照） */
  .page-recruit-data .rinfo .cta-entry .cta-en { font-size: 47px; white-space: nowrap; }   /* 参照: ENTRY の字高 34・x66〜220（48px だと 344 で「ENTR / Y」に折れる） */
  .page-recruit-data .rinfo .cta-entry .cta-title { font-size: 18px; letter-spacing: 0.04em; }
  .page-recruit-data .rinfo .cta-entry .smile.cta-smile { width: 160px; left: 40px; top: 19px; }
}
/* 〜599: 目次ピルは縦 4（幅 300 まで）、高さ 54・間 15、文字 15px/0.04em は左 27、⌄ 18px は右 29 */
@media (max-width: 599px) {
  .data-head .anchor-nav { padding-inline: 20px; }
  .data-head .anchor-nav ul { max-width: 300px; margin-inline: auto; gap: 15.5px; }   /* ピルの送り 69.5（参照 286 / 355 / 425 / 494） */
  .data-head .anchor-pill { min-height: 54px; padding: 8px 29px 8px 27px; font-size: 15px; letter-spacing: 0.04em; }
  .data-head .anchor-pill .icon { width: 18px; height: 18px; }
}

/* 行頭禁則を参照（STUDIO）に合わせる: base.css の line-break: strict だと小書きの「っ」「ゃ」や「ー」を行頭に置けず、参照より 1 字早く折れて行が増える
   （参照 clinical-training 393「…自分の軸をつく / っていけるよう」、faq 344「症例経験はしっかり積めま / すか？」）。〜767 の本文だけ normal にする */
@media (max-width: 767px) { .page-recruit-data .main { line-break: normal; } }

/* ======================================================================
   〜767 の 3 周目（2026-09-26。原本プレビューを 344/390/440 で開き、文字の塊・画像の位置と computed style を突き合わせた差）
   ====================================================================== */
@media (max-width: 767px) {
  /* 目次ピル・英字ラベル: 原本の字間（ピル 15px/0.06em、英字は Roboto なので 0.25em。Inter の頃の 0.2em を戻す） */
  .page-recruit-data .data-head .sec-label, .page-recruit-data .rinfo-head .sec-label { letter-spacing: 0.25em; }
  .page-recruit-data .data-head .sec-label { text-indent: 0.25em; }
  .data-head .anchor-pill { letter-spacing: 0.06em; }
  .page-recruit-data .rinfo-head .sec-title { letter-spacing: 0.06em; }
  /* 節見出しの補足: 属性は 15px、ライフスタイル（次の行に折れる方）は 16px。どちらも字間 0.06em（原本） */
  .data-sec-title small { font-size: 15px; letter-spacing: 0.06em; }
  #date4 .data-sec-title small { font-size: 16px; }
  /* 数字: 大数字・単位とも字間 0.06em、注記 14px も 0.06em（原本 56px/3.36px・24px/1.44px・14px/0.84px。旧は本文の 0.016em で幅が 5〜12 狭かった） */
  .data-grid .stat-num, .data-grid .stat-unit, .data-grid .stat-prefix { letter-spacing: 0.06em; }
  .data-grid .stat-note { letter-spacing: 0.06em; }
  /* 棒グラフ: 原本は 180×180 の画像の中に 棒 30 幅・送り 46、値 20px 前後・項目名 15px（旧は図 172 幅・値 16px・項目名 12.6px で小さかった）。
     図を 180 幅（viewBox 192 → 0.94 倍）にして、svg 内の字を大きく（数字が見にくいという指示に沿って原本以上の大きさ） */
  .data-bar svg { width: 180px; overflow: visible; }
  .data-grid .data-bar { padding-bottom: 8px; }   /* 下へずらした項目名のぶん */
  .data-grid .bar-val { font-size: 23px; }
  .data-grid .bar-unit { font-size: 18px; }   /* 原本の「%」は数字の 8 割ほどの大きさ */
  .data-grid .bar-name { font-size: 16px; }
  .data-grid .bar-sub { font-size: 12px; }
  /* 項目名は棒の下端から 11 空ける（原本。components の barChart は下端 +16 の基線で 3 しか空かない）。svg の座標で 8 下げる */
  .data-grid .bar-name, .data-grid .bar-sub { translate: 0 8px; }
  /* 診療の割合の凡例: 15px/21px・字間 0.06em、点 8 → 5 → 文字（字頭 x は原本どおり塊の左 +13）、項目の間 8。
     塊は左右 12 ずつ内側（344 で「（保存・補綴・外科など）」191 が 1 行に入る幅 208） */
  .data-wide-side { max-width: calc(100% - 24px); }
  .data-legend { gap: 8px; font-size: 15px; line-height: 21px; letter-spacing: 0.06em; }
  .data-legend li { gap: 5px; }
  .data-legend .pie-dot { margin-top: 6.5px; }
  .data-legend-note { letter-spacing: 0.06em; }
  /* 出身地: 地図は 180（原本の画像 180×180。旧 142）、地図の直下に市名（間 0）、下 40 */
  .data-grid .stat-text-card .stat-ic { width: 180px; height: 180px; }
  .data-grid .stat-text-card { padding-bottom: 40px; }
  .stat-text { margin-top: 0; letter-spacing: 0.06em; }
  /* 順位カード: アイコン 200（原本の画像）の直下に「1位」20px/1.7、→ 4 → 本文 16px/1.7、→ 8 → 点線 → 16 → 次の順位。字間 0.06em */
  .data-grid .stat-rank .stat-ic-l { width: 200px; height: 200px; }
  .rank-list { margin-top: 0; }
  .rank-row { gap: 4px; padding: 16px 0 8px; letter-spacing: 0.06em; line-height: 1.7; }
  .rank-row:first-child { padding-top: 0; }
  .rank-no { line-height: 1.7; letter-spacing: 0.06em; }
  /* 左肩の縦ラベル（13 字で高さ 280・右端はカードの左 +44）が「1位」の行まで下りてきて、〜500 で「1」を隠していた（原本 344 も同じ崩れ。2026-09-28 照合）。
     列を 12 右へずらしてラベルの右端から 8 離す。幅は 100% のままカードの右の余白（40）へ 12 入るので、本文の折り返しは変わらない */
  .data-grid .stat-rank .rank-list { margin-left: 12px; }
  /* RECRUIT INFO の帯の色: 原本は頂から 0.3W でいちばん濃いピーチ、0.52W で半分、0.9W でクリーム（344/393/440 の画素。旧は 40vw で頂点・遅く薄れていた） */
  .page-recruit-data .rinfo::before { background: linear-gradient(180deg, var(--c-hero-yellow) 0, color-mix(in srgb, var(--c-hero-mid) 80%, var(--c-hero-yellow)) 30vw, color-mix(in srgb, var(--c-hero-mid) 50%, var(--c-cream)) 52vw, var(--c-cream) 90vw); }
  /* 写真 CTA・ENTRY: 題の字間 0.06em、ENTRY は Roboto 400・字間 0.06em（原本の computed） */
  .page-recruit-data .rinfo-band .cta-title { letter-spacing: 0.06em; }
  .page-recruit-data .rinfo .cta-entry .cta-en { font-weight: 400; letter-spacing: 0.06em; }
  .page-recruit-data .rinfo .cta-entry .cta-title { letter-spacing: 0.06em; }
}

/* ======================================================================
   1080〜 を Figma「数字で見るウララ歯科クリニック」72:2014（1440 幅）に合わせる（2026-09-25）
   ヒーロー 139:6178（1440×600）: ラベル字枠 y183・H1 40px/1.7 は y218（ラベルとの間 8）・目次ピル 200×51 ×4（間 16）は y366、ヒーロー下端 600 で最初の節見出し。
   節 80:2684 ほか: 見出し 32px/1.7（左罫 4・左 24・下 4 → 高さ 58）→ 40 → カード 302×302（間 24・角丸 16・内 40）→ 節の下 200。
   カード: 左肩ラベル 44 幅（内 12・20px・字送り 22・角丸 16/0/16/0）。数字カードは中身を上下中央に: アイコン 143 → 16 → 数字 56px＋単位 24px（間 4）→ 注記 16px/1.7 #574D45。
   グラフは数字が読める大きさのまま（ユーザー指示）: 円は Figma 180 より大きい 214（左右の縦ラベル幅 44 の内側いっぱい）。
   ====================================================================== */
@media (min-width: 1080px) {
  body.page-recruit-data { background-size: 100% 600px; }   /* ヒーロー 1440×600 の地 */
  .page-recruit-data .page-head.data-head { padding: 75px 0 0; }   /* ヘッダー 108 ＋ 75 ＝ ラベル y183 */
  .page-recruit-data .data-head .sec-head { gap: 8px; }
  .page-recruit-data .data-head .anchor-nav { margin-top: 80px; }   /* H1 下端 286 → ピル 366 */
  .page-recruit-data .data-head .anchor-nav ul { gap: 16px; }
  .page-recruit-data .data-head .anchor-nav li { flex: 0 0 200px; min-width: 0; }
  .page-recruit-data .data-head .anchor-pill { min-height: 51px; padding: 12px 24px; gap: 11px; border-radius: 32px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-recruit-data .data-head .anchor-pill .icon { width: 20px; height: 20px; }   /* ⌄ の線 10×6（Figma arrow_forward_ios 10×6）。箱 20 の左右 5 は余白なので文字との間は 11＋5＝16 */
  .data-body { padding-top: 183px; }   /* ピル下端 417 → 最初の節見出し 600 */

  .data-sec + .data-sec { margin-top: 200px; }
  .data-sec-title { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 40px; padding: 0 0 4px 24px; font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; }
  .data-sec-title small { margin-left: 0; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }   /* （スタッフアンケート）20px は題の直後・上下中央（Figma 201:4653） */

  .data-grid { gap: 24px; }
  .data-grid .stat { min-height: 302px; padding: 24px 40px; gap: 16px; align-content: center; }   /* 注記つき（従業員数）は中身 242 を 302 の中央＝上 30。上下 40 だと 322 に伸びる */
  .data-grid .stat-label { padding: 12px; font-size: 20px; line-height: 1; letter-spacing: 0.1em; text-orientation: upright; }   /* 幅 12+20+12=44、字送り 22（20px × lh110%） */
  .data-grid .stat-ic { width: 143px; height: 143px; margin-top: 0; }
  .data-grid .stat-value { margin-top: 0; gap: 4px; }
  .data-grid .stat-num { font-size: 56px; letter-spacing: 0.06em; }
  .data-grid .stat-unit, .data-grid .stat-prefix { font-size: 24px; letter-spacing: 0.06em; }
  .data-grid .stat-note { margin-top: -16px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }   /* 数字 56 の直下（Figma Frame 179: 間 0） */

  /* グラフカード: 円・棒は中央。円の下の注記は 8 空けて 16px（職種割合 201:4603） */
  .data-grid .stat-chart { padding-block: 20px; }
  .data-grid .stat-chart > .chart, .data-grid .data-wide-body { padding-left: 0; }
  .data-pie:not(.pie-out) svg { width: min(100%, 214px); }
  .data-grid .stat-chart > .stat-note { margin-top: -8px; }
  /* 横長カード（診療の割合 93:1543・628×302）: 円｜40｜凡例 の塊を中央に。凡例 16px（点 8・間 8）、注記 16px/1.7 */
  .data-wide-body { grid-template-columns: auto auto; justify-content: center; column-gap: 40px; }
  .data-wide-body .data-pie svg { width: 214px; }   /* auto 列の中だと % が固有幅 188 に解決するので px で */
  .data-wide-side { padding-right: 0; gap: 8px; }
  .data-legend { gap: 8px; font-size: 16px; line-height: 1.6; letter-spacing: 0.06em; }
  .data-legend .pie-dot { margin-top: 9px; }
  .data-legend-note { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }

  /* 順位カード（80:3130・628×628）: アイコン 260×243 → 64 → 3 行（20px/1.7・順位と本文の間 16・下 8 に 1px 点線 #C5B5A8・行の間 8）の塊を上下中央。1位〜3位はグラフの濃→淡 */
  .data-grid .stat-rank { padding: 40px; align-content: center; }
  .data-grid .stat-rank .stat-ic-l { width: 260px; height: 243px; margin-top: 0; }
  .data-grid .stat-rank .rank-list { width: max-content; max-width: 100%; margin: 48px auto 0; gap: 8px; }   /* grid の gap 16 ＋ 48 ＝ 64 */
  .data-grid .stat-rank .rank-row { gap: 16px; padding: 0 0 8px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .data-grid .stat-rank .rank-no { min-width: 0; font-size: 20px; }
  .data-grid .stat-rank .rank-row:nth-child(2) .rank-no { color: var(--c-chart-2); }
  .data-grid .stat-rank .rank-row:nth-child(n+3) .rank-no { color: var(--c-chart-3); }

  /* RECRUIT INFO（Frame 38 72:1016・1440×1504）: 上辺は 2128×752 の楕円（頂 y16・左右端 y115）。頂の帯から見出しまで 200、見出し列 320｜80｜白カード 560（120 高・間 8）、
     カード → 写真帯 160、写真帯 628×224 ×2（間 24）→ 24 → ENTRY 1280×320、ENTRY 下端 → フッター 200 */
  .page-recruit-data .rinfo { margin-top: 200px; padding: 200px 0 137px; }   /* 下 137 ＋ .ft の上 63（1440）＝ 200 */
  .page-recruit-data .rinfo::before { top: 1.11vw; left: calc(50% - 73.9vw); right: auto; width: 147.8vw; border-radius: 50% 50% 0 0 / 26.1vw 26.1vw 0 0; }
  .page-recruit-data .rinfo-grid { grid-template-columns: minmax(0, 320px) minmax(0, 560px); justify-content: center; column-gap: 80px; padding-inline: 0; }
  .page-recruit-data .rinfo-links { gap: 8px; }
  .page-recruit-data .rinfo-head { gap: 16px; }   /* ラベル → 16 → 題（Figma Frame 28 72:1018） */
  .page-recruit-data .rinfo-ctas { margin-top: 160px; }
}
/* 1080〜 の棒グラフの字（Figma 201:4671 ほか: 値 20px＋全角 ％、項目名 18px、項目名は棒の下端から 6）。図は 1.16 倍（1440 で 222 幅）なので svg の単位で指定 */
@media (min-width: 1080px) {
  .data-bar svg { overflow: visible; }
  .data-grid .data-bar { padding-bottom: 4px; }
  .data-grid .bar-unit { font-size: 15px; }
  .data-grid .bar-name { font-size: 15.5px; }
  .data-grid .bar-sub { font-size: 11px; }
  .data-grid .bar-name, .data-grid .bar-sub { translate: 0 4px; }
}
/* 数字カードのアイコンの出し分け（data.mjs の cards[].iconPc）: 〜1079 は現行の絵（.data-ic-cur）、1080〜 は Figma 80:2799 の絵（.data-ic-fig。平均新規患者数＝矯正装置の付いた歯）。
   包みの span は無いものとして扱う（img は .stat-ic の flex の子のまま＝.stat-ic img の大きさが効く） */
.data-ic-cur { display: contents; } .data-ic-fig { display: none; }
@media (min-width: 1080px) { .data-ic-cur { display: none; } .data-ic-fig { display: contents; } }
@media (min-width: 1080px) {
  .page-recruit-data .cta-entry .cta-smile { left: 120px; top: 36px; width: 273px; opacity: 0.1; }   /* ENTRY の白スマイル 273×247（Figma 139:4958: 帯の左 120・上 36・#F1EAE5 不透明度 10%） */
}

/* ======================================================================
   演出（docs/MOTION.md・2026-09-26）。効果は data.mjs と components（statTile の count・pieChart/barChart の chart）の data-mo 属性。
   ここは部品の中の要素（左肩ラベル）と、data-mo を持たない順位カードの白地だけ。すべて html.mo の下（JS なし・reduce・検査では静止）
   ====================================================================== */
/* 左肩の縦書きラベル: カードが上がり始めた 0.2 秒後に、上から下へ書かれる（clip-path なので枠の外に出ない）。
   --mo-d はカード（.stat）に motion.js が入れた遅れ（stagger の番号込み）を継承する */
html.mo .data-grid > .stat.is-in > .stat-label,
html.mo .data-grid > .stat-rank:has(.is-in) > .stat-label { animation: mo-wipe-down calc(var(--mo-dur) * .9) cubic-bezier(.4, .15, .35, 1) backwards; animation-delay: calc(var(--mo-d, 0ms) + 200ms); }
/* 順位カード（data-mo-skip で grid の stagger から外してある）: 白地は中身のどれか（アイコン・順位の行）が出た瞬間に up。
   中身が出るまでは透明（中身の [data-mo] は画面に入れば必ず .is-in になるので、ずっと透明のまま残ることはない） */
html.mo .data-grid > .stat-rank:not(:has(.is-in)) { opacity: 0; }
html.mo .data-grid > .stat-rank:has(.is-in) { animation: mo-up var(--mo-dur) var(--mo-ease) backwards; }