/* 採用サイト トップ（templates/recruit/home.mjs）。接頭辞 .rh-
   値は docs/design-recruit.md §3-1 と capture/recruit-preview/index/slices（pc1280 / fold344 / open841）の実測。
   1080〜 は capture/compare/recruit/slices の pc1920-ref / pc1440-ref（STUDIO プレビュー原本）を 2026-09-20 に実測して合わせた。
   原本の本文容器は 1280（1440 で左右 80、1280 で左右 40）。.container.rh-wide で --container を 1280 に上書きする（MESSAGE/DATA/CHARMS/WELFARE/INTERVIEWS/RECRUIT INFO）。
   ABOUT と RECRUIT INFO の見出し＋リンク列は幅 960 中央、クイックリンクは 1200 中央、WORK のカード列は 1176 中央。
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜。
   規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止（はみ出しは data-allow-bleed の親で clip）・タップ標的 44px・ch 単位禁止・色はトークンのみ */

/* ---------- 共通 ---------- */
.rh-more { display: flex; justify-content: center; margin-top: 40px; }
.rh-br { display: none; }                       /* 改行指定は幅ごとに出し分ける（既定は出さない） */
@media (max-width: 767px) { .rh-br-sp { display: inline; } }
@media (max-width: 599px), (min-width: 1080px) { .rh-br-mid { display: inline; } }
@media (min-width: 1080px) { .rh-br-pc { display: inline; } }
.page-recruit-home .section { padding-block: 0 120px; }   /* 次のセクションとの間隔は下 120（1080〜 200）[参照 PC 200・841/344 120 実測] */
@media (min-width: 1080px) { .page-recruit-home .section { padding-block: 0 200px; } }
/* 1080〜 Figma 採用 TOP 51:3 の共通値（2026-09-25）:
   見出し（Frame 168）は英字 27（16px/1.7）→ 間 16 → H2 32px/1.7（どのセクションも gap 16。部品既定の間 0 は医院 462:235 の値）。
   丸矢印ボタン（56:3774 ほか）は 56 高・左 24 右 16・丸 32・枠なし → 部品の 2px 枠（ホバーの反転用）を内側に数えて余白を 2 ずつ減らす（183×56 になる） */
/* 丸の中の山形（Figma の arrow_forward_ios を実測。部品の山形 6×12・線 2 の枠を大きくして外形を合わせる。2026-09-26）:
   丸矢印ボタンの丸 32 → 7×12（枠 21）/ リンクカードの丸 40 → 8.8×15（枠 26）/ 写真 CTA・ENTRY の丸 64 → 14×24（枠 40）/ クイックリンクの丸 24 → 5×9（枠 15）。
   部品既定（18 / 18 / 28 / 14）では山形が 2/3 ほどの大きさだった */
@media (min-width: 1080px) {
  .page-recruit-home .main .sec-head { gap: 16px; }
  /* 行の高さは Figma の箱どおり 27 / 54（1.7 倍の 27.2 / 54.4 のままだと見出し 1 つごとに 0.6 ずつ下へずれ、INTERVIEWS で 1.5 下がっていた） */
  .page-recruit-home .main .sec-label { line-height: 27px; }
  .page-recruit-home .main .sec-title { line-height: 54px; }
  .page-recruit-home .main .btn-circle { min-height: 56px; padding: 10px 14px 10px 22px; }
  .page-recruit-home .main .btn-circle .btn-ring .icon { width: 21px; height: 21px; }
  .page-recruit-home .main .link-card .btn-ring .icon { width: 26px; height: 26px; }
  .page-recruit-home .main .cta-ring .icon { width: 40px; height: 40px; }
  .page-recruit-home .main .rh-ql .qlb-label .btn-ring .icon { width: 15px; height: 15px; }
}

/* ---------- 1. ヒーロー（写真 6 枚 × 3 周のマーキー。高さは内容で決まる） ---------- */
.rh-hero { padding-top: 24px; margin-bottom: 40px; }
.rh-hero-band { position: relative; overflow-x: clip; overflow-y: visible; }   /* 横だけ clip（スマイルは下にはみ出す） */
.rh-hero-track { display: flex; justify-content: flex-start; align-items: flex-start; width: max-content; animation: rh-marquee 48s linear infinite; }   /* 1 周＝全体の 1/3。gap ではなく margin で幅を揃える */
.rh-hero-item { flex: none; width: min(60vw, 400px); margin-right: 20px; }
.rh-hero-item img { width: 100%; height: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-xxl); }
.rh-hero-item:nth-child(even) { margin-top: 0; }
.rh-hero-item:nth-child(odd) { margin-top: 40px; }   /* 奇数枚が 40 下がる（参照 1920/1440/1280 とも交互） */
.rh-hero-smile { right: 8%; bottom: -40px; width: 160px; }
@keyframes rh-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: reduce) { .rh-hero-track { animation: none; } }
/* H1: 写真帯の下の別ブロック（重ねない）。白い箱を 1 行ずつ */
.rh-hero-copy { position: relative; z-index: 2; margin-top: -56px; }
.rh-hero-title { display: grid; gap: 8px; justify-items: start; font-size: clamp(24px, 1.2rem + 1.5vw, 40px); line-height: 1.5; letter-spacing: 0.06em; color: var(--c-orange); text-wrap: balance; }
.rh-hero-line { display: inline-block; background: var(--c-white); padding: 6px 14px; border-radius: 4px; max-width: 100%; }
@media (min-width: 600px) { .rh-hero-item { margin-right: 24px; } .rh-hero-smile { width: 200px; right: 10%; } }
@media (min-width: 768px) { .rh-hero { padding-top: 40px; margin-bottom: 56px; } .rh-hero-item { width: min(48vw, 400px); } .rh-hero-copy { margin-top: -96px; } .rh-hero-title { font-size: 40px; } .rh-hero-line { padding: 8px 16px; } .rh-hero-smile { width: 240px; bottom: -60px; } }
@media (min-width: 1080px) {
  /* Figma 採用 TOP 51:3 の FV（Frame 127 51:3603・1440×820）: ヘッダー 108 の下 48 から写真 400×500（角丸 40）・間隔 40。
     5 枚が画面中央に並ぶ配置（1440: -360 / 80 / 520 / 960 / 1400）で、奇数枚は上 156・偶数枚は 40 下がる（196）。80 の 1 枚が content の 1 枚目（a76d706b）。
     DOM の並びは〜1079 の都合で content の 2 枚目始まり（1 枚目が末尾）なので、1 周目の 5 枚目（8fbcb5f8）が -360 に来るよう帯を左へずらす:
     5 枚目の左端 = 始点 + 4×440 = 50% − 1080 → 始点 = 50% − 2840。3 周ぶんあるので右側は切れない。原本どおり左へ流れる（1 周 6 枚＝2640px → 44s）。
     最初の 2.5 秒は止める */
  .rh-hero { padding-top: 48px; margin-bottom: 66px; }   /* 見出しの下端 754 → クイックリンク 820 */
  .rh-hero-band { padding-left: 0; }
  .rh-hero-track { margin-left: calc(50% - 2840px); animation-duration: 44s; animation-delay: 2.5s; }
  .rh-hero-item { width: 400px; margin-right: 40px; }
  .rh-hero-item:nth-child(odd) { margin-top: 0; }
  .rh-hero-item:nth-child(even) { margin-top: 40px; }
  .rh-hero-item img { height: auto; aspect-ratio: 400 / 500; border-radius: 40px; }
  /* スマイル 273×247（塗り #F1EAE5）: 1046〜1319 × 538〜785 → 右 121・写真帯の下辺 696 から 89 下 */
  .rh-hero-smile { width: 273px; right: 121px; bottom: -89px; color: var(--c-line); }
  /* H1 の白帯 2 本（53:3671）: 左 120・上 610（写真帯の下辺 696 から 86 上）・間 8。帯は左右 16・角丸 8、文字 40px/1.7 字間 6% #E56300 */
  .rh-hero-copy { width: 100%; max-width: none; margin-inline: 0; margin-top: -86px; padding-left: 120px; }
  body.page-recruit-home .rh-hero-title { gap: 8px; font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
  .rh-hero-line { padding: 0 16px; border-radius: 8px; }
  /* 地のグラデ（Frame 127 の塗り画像 1440×820 の画素）: 右上がレモン、左上がピーチ。等色線は右へ 400/1440 下がる斜め（t = y − 0.278x）。
     t −400 #FEF8BC / −200 #FFEBBE / 0 #FFDDBC / 100 #FDE3CC / 200 #FBEADD / 300 以降クリーム。195.5° の線形グラデで距離 = 0.964(t + 400) */
  body.area-recruit.page-recruit-home {
    background-image: linear-gradient(195.5deg, var(--c-hero-top) 0, color-mix(in srgb, var(--c-hero-yellow) 75%, var(--c-hero-peach)) 193px, var(--c-hero-peach) 386px,
      color-mix(in srgb, var(--c-hero-peach) 50%, var(--c-peach-soft)) 482px, color-mix(in srgb, var(--c-peach-soft) 60%, var(--c-cream)) 578px, var(--c-cream) 675px);
    background-size: 100% 820px;
  }
}

/* ---------- 2. クイックリンク（〜599: 白いカード 2 列＝医院トップのスマホと同じ組み方（値はファイル後半の 〜599 ブロック）/ 600〜1079: 白ピル 2 列（部品既定）/ 1080〜: 白い横長バー） ---------- */
.rh-ql { margin-bottom: 120px; }
@media (min-width: 768px) and (max-width: 1079px) { .rh-ql .qlb-list { max-width: 640px; margin-inline: auto; } .rh-ql .qlb-link { min-height: 136px; } }
/* 最後の 1 字＋丸矢印の包み（home.mjs）: 600〜 は無いものとして扱う（文字と丸矢印は部品どおり横並びの flex の子のまま）。〜599 は折り返さない塊 */
.rh-ql-tail { display: contents; }
@media (max-width: 599px) { .rh-ql-tail { display: inline; white-space: nowrap; } }
@media (min-width: 1080px) {
  /* Figma Frame 141（201:4765）: 白バー 1280×175（1440 で 80〜1360）・角丸 160・余白 24。5 列等幅（各 246）・列の左右 16、
     区切りは列の右の 1px 点線 #C5B5A8（列の高さ 127 ＝ アイコン 96 ＋ 文字 18px/1.7）。文字 18px 字間 6% #271200 → 8 → 丸 24 */
  .rh-ql { --container: 1280px; margin-bottom: 200px; }
  .rh-ql .qlb-list { min-height: 175px; border-radius: 160px; padding: 24px; align-items: center; }
  .rh-ql .qlb-item { flex: 1 1 0; min-width: 0; position: relative; }
  .rh-ql .qlb-item + .qlb-item { border-left: 0; }
  .rh-ql .qlb-item + .qlb-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px dashed var(--c-line-2); }
  .rh-ql .qlb-link { min-height: 127px; padding: 0 16px; gap: 0; justify-content: center; }
  .rh-ql .qlb-ic { width: 96px; height: 96px; }
  .rh-ql .qlb-label { gap: 8px; font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; white-space: nowrap; }
  .rh-ql .qlb-label .btn-ring { width: 24px; height: 24px; }
}
@media (min-width: 1080px) and (max-width: 1279px) { .rh-ql .qlb-link { padding: 0 8px; } .rh-ql .qlb-label { font-size: 16px; letter-spacing: 0.02em; } }
/* 原本の本文容器（1280。1280 幅では左右 40 で 1200） */
@media (min-width: 1080px) { .page-recruit-home .container.rh-wide { --container: 1280px; } }

/* ---------- 3. MESSAGE（1080〜: 本文 ＋ 写真の 2 カラム。それ未満は写真→本文→ボタン） ---------- */
.rh-msg-grid { display: grid; gap: 40px; }
.rh-msg-photos { order: -1; }
/* 写真コラージュ: 大 1（4:5）に小 2（5:4）を重ねる。小は絶対配置で外へはみ出す（切り抜きはセクションの clip に任せる）
   [参照 344: 大 64% 中央・右小 38% 上 46%・左小 53% 下端 / 841: 大 83%・右小 32%・左小 40% / PC: 大 100%・右小 39% 右 -40・左小 48% 左 -14%] */
.rh-msg-photos .collage-stack { display: block; position: relative; overflow: visible; padding-bottom: 3%; }
.rh-msg-photos .collage-item { position: static; margin: 0; }
.rh-msg-photos .collage-1 { position: relative; z-index: 0; width: 64%; margin-inline: auto; }
.rh-msg-photos .collage-1 img { aspect-ratio: 4 / 5; }
.rh-msg-photos .collage-2 { position: absolute; z-index: 1; right: 0; top: 46%; width: 38%; }
.rh-msg-photos .collage-3 { position: absolute; z-index: 2; left: 0; bottom: 0; width: 53%; }
.rh-msg-photos .collage-2 img, .rh-msg-photos .collage-3 img { aspect-ratio: 5 / 4; }
.rh-msg-body { display: grid; gap: 1.2em; margin-top: 24px; font-size: 15px; line-height: 2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
.rh-msg-btn { margin-top: 32px; }
.rh-msg .smile-bl { left: -6%; bottom: 10%; }
@media (max-width: 599px) { .rh-msg-body p br { display: none; } }   /* 344 では指定改行を切って自然に折り返す */
@media (min-width: 768px) {
  .rh-msg-grid { gap: 64px; }
  .rh-msg-body { font-size: 18px; line-height: 2.2; }
  .rh-msg-photos .collage-stack { padding-bottom: 5%; }
  .rh-msg-photos .collage-1 { width: 83%; }
  .rh-msg-photos .collage-2 { top: 54%; width: 32%; }
  .rh-msg-photos .collage-3 { left: -5%; width: 40%; }
}
@media (min-width: 768px) and (max-width: 1079px) { .rh-msg-grid { max-width: 600px; margin-inline: auto; } }   /* 参照 841: 本文・写真とも幅 600 中央 */
@media (min-width: 1080px) {
  /* Figma Frame 139（56:3812・1440×1043）: 左 160・右 80 の中に幅 1195 の行（1440 で 163〜1358）。本文列 572 → 63 → 写真 560×700（角丸 40）。
     本文列: MESSAGE（27）→ 40 → 本文 20px/2.2 字間 6%・段落の間 24 → 80 → 丸矢印ボタン。行の高さ 803、下 240。
     小写真（角丸 40・5:4）: 右 224×179 は大写真の左 +380・上 410（x1178〜1402）、左 350×280 は左 −85・上 560（x713〜1063・下端は大写真の 140 下）。
     スマイル 273（#F1EAE5）は行の左 −126.5・上 436 */
  .page-recruit-home .rh-msg { padding-bottom: 240px; }
  .page-recruit-home .rh-msg-grid { width: min(1195px, 100% - 240px); max-width: none; margin-left: max(160px, 50% - 557px); margin-right: 0;
    grid-template-columns: minmax(0, 572fr) minmax(0, 560fr); gap: 63px; align-items: start; }
  .rh-msg-photos { order: 0; }
  .rh-msg-photos .collage-stack { padding-bottom: 0; }
  .rh-msg-photos .collage-1 { width: 100%; }
  .rh-msg-photos .collage-1 img { aspect-ratio: 560 / 700; border-radius: 40px; }
  .rh-msg-photos .collage-2 { left: 67.86%; right: auto; top: 58.57%; bottom: auto; width: 40%; }
  .rh-msg-photos .collage-3 { left: -15.18%; top: 80%; bottom: auto; width: 62.5%; }
  .rh-msg-photos .collage-2 img, .rh-msg-photos .collage-3 img { border-radius: 40px; }
  /* 1 行 27 字（「困ったときには…しています。」）は 27×21.2＝572.4 で列 572 をわずかに超える → 右の余白（間 63）へ 16 だけはみ出してよい */
  .rh-msg-body { gap: 24px; margin-top: 40px; margin-right: -16px; font-size: 20px; line-height: 2.2; letter-spacing: 0.06em; }
  .rh-msg-btn { margin-top: 80px; }
  .rh-msg .smile-bl { left: calc(max(160px, 50% - 557px) - 126.5px); top: 436px; bottom: auto; width: 273px; }
}
/* 1080〜1279: 左右 160/80 のままだと本文列が 434 しかなく、指定改行の 1 行（最長 27 字）が 2 行に割れる → 左右 80/40・本文 16px（27 字 ≒ 458 が列 453＋16 に収まる） */
@media (min-width: 1080px) and (max-width: 1279px) {
  .page-recruit-home .rh-msg-grid { width: min(1195px, 100% - 120px); margin-left: 80px; }
  .rh-msg .smile-bl { left: -46px; }
  .rh-msg-body { gap: 20px; font-size: 16px; }
}
/* 1280〜1439: 同じ理由で左右 120/40・本文 18px（27 字 ≒ 515 が 1280 の列 534＋16 に収まる） */
@media (min-width: 1280px) and (max-width: 1439px) {
  .page-recruit-home .rh-msg-grid { width: min(1195px, 100% - 160px); margin-left: max(120px, 50% - 557px); }
  .rh-msg .smile-bl { left: calc(max(120px, 50% - 557px) - 126.5px); }
  .rh-msg-body { gap: 22px; font-size: 18px; }
}

/* ---------- 4. ABOUT US（1080〜: 見出し 240 ＋ 本文。リンクカード 3 枚＋バナー） ---------- */
.rh-about-grid { display: grid; gap: 8px 80px; }
.rh-about-grid .sec-head { margin-bottom: 16px; }
.rh-about-body { display: grid; gap: 0; font-size: var(--fs-body); line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
.rh-about-links { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (max-width: 767px) { .rh-about-links .link-card { min-height: 100px; } }
.rh-about-banner { margin-top: 16px; }
.rh-about-banner a { display: block; border-radius: var(--r-m); overflow: clip; }
.rh-about-banner img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .rh-about-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .rh-about-banner { margin-top: 24px; }
}
@media (min-width: 768px) and (max-width: 1079px) { .rh-about-links .link-card { padding: 28px 24px; min-height: 108px; } }
@media (min-width: 1080px) {
  /* 参照: 見出し＋本文・リンク 3 枚・バナーとも幅 960 中央（1920: 480〜1440 / 1440: 242〜1198 / 1280: 162〜1118） */
  /* Figma Frame 30（56:3829）: 幅 960（1440 で 240〜1200）。見出し列 236 → 80 → 本文 16px/2.2 字間 6%（段落の間 0）。
     → 40 → リンクカード 304×120 × 3（間 24・#F7E7DB・角丸 16・余白 40・20px・丸 40）→ 24 → バナー 960×260（角丸 16）。下 200 */
  .rh-about-grid { grid-template-columns: 236px 1fr; gap: 80px; align-items: start; max-width: 960px; margin-inline: auto; }
  .rh-about-grid .sec-head { margin-bottom: 0; }
  .rh-about-grid .sec-title { white-space: nowrap; }   /* 「私たちについて」7 字 × 33.9 ＝ 237 は列 236 を 1 だけ超える（Figma も列からはみ出させて 1 行） */
  /* 本文列 644 に Figma は 1 行 38 字（16.96 × 38 ＝ 644.5。Figma は行末の字間を数えない）。CSS は行末の字間も数えて 37 字で折れていた → 右へ 4 だけ広げる */
  /* 行送りは 35（Figma 56:3834 は 7 行で 245。2.2 ＝ 35.2 だと 246.4 で、以降の DATE・CHARMS…が 2 下がっていた） */
  .rh-about-body { margin-right: -4px; line-height: 35px; }
  .rh-about-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; max-width: 960px; margin-inline: auto; }
  .rh-about-links .link-card { min-height: 120px; }
  .rh-about-banner { max-width: 960px; margin-inline: auto; margin-top: 24px; }
  .rh-about-banner a { border-radius: 16px; }
}

/* ---------- 5. DATE 数字で見る（〜767: 2 列 / 768〜1079: 2 列 1fr / 1080〜: 3 列） ---------- */
.rh-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rh-dcard { min-height: 220px; padding: 40px 12px 24px; gap: 8px; }
.rh-dcard .stat-ic { width: 72px; height: 72px; margin-top: 12px; }
.rh-dcard .stat-value { margin-top: 8px; }
.rh-dcard .stat-note { font-size: 12px; }
.rh-dcard-chart { align-content: center; }
@media (max-width: 767px) {   /* 〜767: ラベルは通常フローの横書きチップ（重ならない） */
  .rh-dcard { padding-top: 0; }
  .rh-dcard .stat-label { position: static; justify-self: start; margin-left: -12px; margin-bottom: 8px; }
}
.rh-dcard-body { width: 100%; display: grid; justify-items: center; margin-top: 8px; }
.rh-dcard-body .chart { width: 100%; }
.rh-dcard-body .chart svg { width: 100%; max-width: 260px; }
.rh-dcard-body .chart-pie svg { max-width: 220px; }   /* 円は枠いっぱい（余白 4）。数字が読める大きさを優先 */
.rh-dcard-body .chart-bar svg, .rh-data-grid .rh-dcard-body .chart-bar svg { max-width: 240px; }
/* 〜599 は 2 列で円が 120px 前後しかない → 円・棒の中の文字だけ SVG 単位で大きくする（描画後 数字 18px・項目名 11px 前後） */
@media (max-width: 599px) {
  .rh-dcard-body .pie-label { font-size: 17px; } .rh-dcard-body .pie-val { font-size: 28px; } .rh-dcard-body .pie-unit { font-size: 17px; }
  .rh-dcard-body .bar-val { font-size: 22px; } .rh-dcard-body .bar-unit { font-size: 14px; } .rh-dcard-body .bar-name { font-size: 15px; letter-spacing: 0; } .rh-dcard-body .bar-sub { font-size: 12px; letter-spacing: 0; }   /* 棒の間隔 48 単位に「その他」「ENFJ」が収まる大きさ */
}
/* 1080〜1279 は 4 列でカードが 240 前後 → 円 160px・棒 160px になるので、中の文字だけ一段大きく */
@media (min-width: 1080px) and (max-width: 1279px) {
  .rh-dcard-body .pie-label { font-size: 16px; } .rh-dcard-body .pie-val { font-size: 25px; } .rh-dcard-body .pie-unit { font-size: 16px; }
  .rh-dcard-body .bar-val { font-size: 19px; } .rh-dcard-body .bar-name { font-size: 15px; letter-spacing: 0; } .rh-dcard-body .bar-sub { font-size: 12px; letter-spacing: 0; }
}
/* 数字カードのアイコンの出し分け（home.mjs の data.stats[].iconPc）: 〜1079 は現行の絵（.rh-ic-cur）、1080〜 は Figma 56:3857 の絵（.rh-ic-fig。平均新規患者数＝矯正装置の付いた歯）。
   包みの span は無いものとして扱う（img は .stat-ic の flex の子のまま＝部品の .stat-ic img の大きさが効く） */
.rh-ic-cur { display: contents; } .rh-ic-fig { display: none; }
@media (min-width: 1080px) { .rh-ic-cur { display: none; } .rh-ic-fig { display: contents; } }
/* 768〜 は縦書きの見出しチップ（左上）があるので、円のカードは左をチップぶん空けて円と重ねない */
@media (min-width: 768px) { .rh-dcard-chart .rh-dcard-body { padding-left: 44px; box-sizing: border-box; } }
@media (min-width: 600px) { .rh-data-grid { gap: 16px; } .rh-dcard { padding-inline: 16px; padding-bottom: 32px; } .rh-dcard .stat-ic { width: 96px; height: 96px; } }   /* 上は 767 まで 0 のまま（横書きチップ） */
@media (min-width: 768px) {
  .rh-data-grid { gap: 24px; }
  .rh-dcard { min-height: 302px; padding: 40px 24px 40px; gap: 16px; }
  .rh-dcard .stat-ic { width: 143px; height: 143px; margin-top: 8px; }
  .rh-dcard-body .chart svg { max-width: 260px; }
  .rh-dcard-body .chart-pie svg { max-width: 240px; }
  .rh-dcard .stat-label { font-size: 16px; padding: 12px 8px; }
}
@media (min-width: 1080px) {
  /* Figma Frame 34（56:3857）: 見出し中央 → 40 → カード 302×302 × 4 列 × 2 行（間 24・容器 1280）→ 40 → ボタン → 下 200。
     カード: 白・角丸 16・中身は縦中央（アイコン 143 → 16 → 数字 56px 字間 6%＋単位 24px（間 4）→ 注記 16px/1.7 #574D45）。
     中身（242）が余白 40 の内側（222）より高いので Figma どおり上下にはみ出させる＝上下 30 で縦中央。
     見出し札: #F7E7DB・左上/右下 角丸 16・余白 12・縦書き 20px（字送り 22）。
     並び: 数字 3 → 男女比率 → 年齢層 → MBTI → 残りの円（Figma の「〇〇」2 枠に content の常勤・非常勤／新卒・中途を入れる）。円・棒の大きさは 2026-09-24 のユーザー指示（数字が見にくい）の大きさのまま */
  .rh-data-head { margin-bottom: 40px; }
  .rh-data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .rh-dcard { height: 302px; min-height: 0; padding: 30px 16px; gap: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .rh-dcard .stat-ic { width: 143px; height: 143px; margin-top: 0; flex: none; }
  .rh-dcard .stat-label { font-size: 20px; line-height: 1; letter-spacing: 0.1em; padding: 12px; text-orientation: upright; }   /* 「MBTI」も 1 字ずつ正立（Figma 268:5938 は全角幅で縦積み） */
  .rh-dcard .stat-value { margin-top: 0; align-items: flex-end; gap: 4px; }
  .rh-dcard .stat-num { font-size: 56px; letter-spacing: 0.06em; line-height: 1; }
  .rh-dcard .stat-unit { font-size: 24px; letter-spacing: 0.06em; line-height: 1; }
  .rh-dcard .stat-value:has(+ .stat-note) { margin-bottom: -16px; }   /* 数字と注記の間は 0（Figma 72:2400 は数字＋注記の 1 塊） */
  .rh-dcard .stat-note { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .rh-dcard-bar { order: 1; }
  .rh-dcard-pie ~ .rh-dcard-pie { order: 2; }
  .rh-dcard-body { margin-top: 0; }
  .rh-dcard-body .chart-pie svg { max-width: 212px; }   /* 旧 180（外ラベル用の余白込み）では円が 125px・数字 14px しかなかった。212 で円 203px・数字 25px */
  .rh-dcard-body .chart-bar svg, .rh-data-grid .rh-dcard-body .chart-bar svg { max-width: 250px; }
}

/* ---------- 6. CHARMS 働く魅力（ピーチのカード。歯型バッジ＋H3＋「＋」。押すと画面の上にポップアップ＝下の「ポップアップ」） ---------- */
.rh-charms-grid { display: grid; gap: 32px; }
.rh-charms-head { text-align: center; justify-items: center; margin-bottom: 8px; }
.rh-charms-head .sec-title { text-wrap: wrap; }   /* balance だと 344 で「ウララ歯科ク／リニックで」に割れる */
/* 一覧: 1 つの ul（01〜05）。〜599 は 1 列、600〜 は 2 列の格子（同じ段のカードは同じ高さ。ポップアップになったのでカードは伸びない） */
.rh-charm-list { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.rh-charm { position: relative; display: flex; flex-direction: column; background: var(--c-peach-soft); border-radius: var(--r-m); padding-top: 24px; }
.rh-charm .tooth-badge { position: absolute; left: 24px; top: -26px; width: 48px; height: 46px; --tooth-fill: var(--c-white); }   /* 参照: 歯型はカード上辺から 2/3 ほど上に出る */
.rh-charm .tooth-badge-txt { font-size: 14px; padding-bottom: 5px; }
.rh-charm-h { flex: 1 1 auto; display: flex; margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; border-radius: inherit; }   /* 角丸をカード（.rh-charm）から中の a へ渡す。無いとホバーのオレンジの縁（a の inset の影）の角が四角く出る（現行は角丸。2026-09-29 照合） */
/* カード全体が押せる（<a>。JS があれば role=button で dialog を開く・無ければ働く環境ページへ） */
.rh-charm-btn { flex: 1 1 auto; display: flex; width: 100%; box-sizing: border-box; min-height: 72px; padding: 16px 20px 24px 28px; gap: 16px; align-items: center; text-align: left; text-decoration: none; border-radius: inherit;
  font-family: var(--f-round); font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); -webkit-tap-highlight-color: transparent; }
.rh-charm-title { flex: 1 1 auto; }
.rh-charm-plus { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px dashed var(--c-orange); color: var(--c-orange); flex: none; margin-left: auto; }
.rh-charm-plus .icon { width: 24px; height: 24px; }
.rh-charms > .smile-br { right: -4%; bottom: 0; }   /* 節の飾り（「>」: ポップアップの写真のスマイルに効かせない） */
.rh-charms[data-allow-bleed] { overflow: clip visible; }   /* 横だけ切る。縦も切ると 1 行目の歯型（カード上辺から 27 上に出る）がセクション上端で半分に欠ける */
@media (min-width: 600px) { .rh-charm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 768px) {
  .rh-charm-btn { min-height: 148px; padding: 24px 20px 32px 32px; font-size: 16px; }
  .rh-charm .tooth-badge { left: 24px; top: -28px; width: 52px; height: 50px; }
  .rh-charm .tooth-badge-txt { font-size: 16px; }
}
.rh-charms-more { display: none; }   /* 「もっと見る」は 1080〜 だけ（Figma 56:3912。〜1079 は原本 STUDIO に無いので出さない） */
@media (min-width: 1080px) {
  /* Figma Frame 29（56:3907）: 見出し列 320（ラベル → 16 → H2 3 行 → 56 → 丸矢印ボタン）→ 80 → カード列 880（428×160 × 2 列・間 縦 40 横 24）。下 120。
     カード: #F7E7DB・角丸 16・余白 32・文字 20px/1.7 字間 6%・右に点線の＋ 40。歯型 48×46（白地・線 2 オレンジ）が左 32・上 −24、番号は Roboto 16 字間 4px。
     スマイル 273（#F1EAE5）はカード列の左 529・上 400（5 枚目の右） */
  .page-recruit-home .rh-charms { padding-bottom: 120px; }
  .rh-charms-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 11fr); gap: 80px; align-items: start; position: relative; }
  .rh-charms-side { display: grid; justify-items: start; gap: 56px; }
  .rh-charms-head { text-align: left; justify-items: start; margin-bottom: 0; }
  .rh-charms-more { display: flex; justify-content: flex-start; margin: 0; }
  .rh-charm { padding-top: 0; border-radius: 16px; }
  .rh-charm-btn { min-height: 160px; padding: 32px; gap: 16px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  /* 「＋」の枠（Figma 242:4969）: 40 角・線 1px の点線 2/2（#E56300）、＋は 24×24・太さ 2.8。
     CSS の dashed は 3 前後の粗い破線、＋は 16×16・細線で小さかった → 点線は 4 本のグラデで描き、＋は 36 枠・線 2.8px（ホバーは塗りに替わる。hover.css） */
  .rh-charm-plus { width: 40px; height: 40px; border: 0;
    background: linear-gradient(90deg, var(--c-orange) 50%, transparent 0) 0 0 / 4px 1px repeat-x, linear-gradient(90deg, var(--c-orange) 50%, transparent 0) 0 100% / 4px 1px repeat-x,
      linear-gradient(180deg, var(--c-orange) 50%, transparent 0) 0 0 / 1px 4px repeat-y, linear-gradient(180deg, var(--c-orange) 50%, transparent 0) 100% 0 / 1px 4px repeat-y; }
  .rh-charm-plus .icon { width: 36px; height: 36px; }
  .rh-charm-plus .icon path { vector-effect: non-scaling-stroke; stroke-width: 2.8px; }
  .rh-charm .tooth-badge { left: 32px; top: -24px; width: 48px; height: 46px; }
  .rh-charm .tooth-badge-txt { font-size: 16px; letter-spacing: 0.25em; text-indent: 0.25em; padding-bottom: 2px; }
  /* 左 = 容器の左 + カード列の左（(容器 − 80)×4/15 ＋ 80）＋ カード列幅の 529/880（(容器 − 80)×11/15×0.601）＝ 容器の左 ＋ (容器 − 80)×0.7075 ＋ 80（1440: 80＋849＋80＝1009） */
  .rh-charms > .smile-br { right: auto; bottom: auto; left: calc(max(var(--gutter), 50% - 640px) + (min(100% - var(--gutter) * 2, 1280px) - 80px) * 0.7075 + 80px); top: 400px; width: 273px; }
}
/* 1080〜1279: カード列が 650 前後しかなく 20px の 2 行見出しが 3 行に割れる → 見出し列 240・間 56、カード内 16px・余白 24（13 字 ≒ 220 がカード内 236 に収まる） */
@media (min-width: 1080px) and (max-width: 1279px) {
  .rh-charms-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; }
  .rh-charm-btn { padding: 32px 24px; font-size: 16px; }
  .rh-charm .tooth-badge { left: 24px; }
  .rh-charms > .smile-br { left: auto; right: max(var(--gutter), 50% - 640px); }
}

/* ---- ポップアップ（home.mjs の <dialog class="rh-cm">。開閉・フォーカス・後ろを止めるのは assets/js/recruit-charms.js）----
   現行 STUDIO の実測（2026-09-29 撮影。1440・1080・841・393・344）: 背景は rgba(0,0,0,.16)（= --c-scrim）。白い箱・角丸 16・影なし。
   1080〜: 箱 1280×468（1440 で左右 80）・内 64・文字 572｜48｜写真 532×340 を上下中央。番号 Roboto 64（#F7E7DB・字間 .08em・右に点線。点線まで 24・題まで 24）。
           題 24px・2 行の送り 55・字間 .06em（要の語がオレンジ）。題→本文 25。本文 16px/2.2・#574D45。スマイル 139（写真の右から 87・下へ 36 はみ出す）。
           現行の PC は × が無く背景で閉じる → こちらは右上に × を足す（キーボード・読み上げで閉じられるように）。
           現行の 1080 は文字の列が狭く題の 2 行目が箱の外へ切れていた → 1080〜1279 は番号 48・題 22px。
   600〜1079（841 で実測）: 1 列。内 64・番号 64 の右に題・本文・写真 440 を中央・右上に × 40（オレンジ）。
           現行は 841×701 で箱が画面より高く上が切れていた → 箱は画面の中に収め（上下 20 空ける）、長ければ箱の中を送る。高さ 760 以下は余白と写真を詰めて 841×701 で送らずに収まる。
   〜599（393・344）: 左右 20・内 32。番号 40 の行の右端に ×、その下に題 22px/1.7（改行を消して流す）、本文 15px/1.7、写真は幅いっぱい。
   写真は働く環境ページと同じく、画像に焼き込まれた歯の形をそのまま見せる（切り抜きを重ねない）。
   高さは 100vh を使わない: dialog は inset: 0 で画面を覆い、箱は max-height: 100%（dialog の内側）。 */
.rh-cm { position: fixed; inset: 0; z-index: 400; box-sizing: border-box; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 20px; border: 0;
  background: transparent; color: var(--c-ink-deep); font-family: var(--f-body); letter-spacing: 0.06em; overflow: hidden; overscroll-behavior: contain; }
.rh-cm[open] { display: flex; justify-content: center; align-items: center; align-items: safe center; }
.rh-cm::backdrop { background: transparent; }
.rh-cm.is-open { background-color: var(--c-scrim); }
.rh-cm-panel { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 1280px; max-height: 100%; border-radius: var(--r-m); background: var(--c-white); overflow: hidden; outline: none; }   /* 指・マウスで開いたときはここにフォーカス（tabindex=-1。枠は出さない） */
.rh-cm:not(.is-open) .rh-cm-panel { opacity: 0; translate: 0 24px; scale: .98; }
/* ふわっと 0.3s（演出オフ・reduce では即時。JS も同じ条件で閉じるのを待たない） */
html.mo .rh-cm { transition: background-color .3s ease; }
html.mo .rh-cm-panel { transition: opacity .3s var(--mo-ease), translate .3s var(--mo-ease), scale .3s var(--mo-ease); }
@media (prefers-reduced-motion: reduce) { .rh-cm, .rh-cm-panel { transition: none; } }
/* 中身の箱（ここだけが縦に送れる。バーは main の決まりで隠れるので、まだ下に続くときは下端を白くぼかす＝JS の .is-more） */
.rh-cm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 32px; outline: none; }
.rh-cm-scroll:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; border-radius: var(--r-m); }
.rh-cm-panel::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 0 0 var(--r-m) var(--r-m); background: linear-gradient(to bottom, transparent, var(--c-white)); pointer-events: none; opacity: 0; transition: opacity .2s; }
.rh-cm.is-more .rh-cm-panel::after { opacity: 1; }
/* ×（箱の右上に固定。中身を送っても残る。押せる大きさ 48。写真 1・スマイル 2・下端のぼかし 3 より手前） */
.rh-cm-close { position: absolute; z-index: 4; top: 28px; right: 28px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--c-white); color: var(--c-orange); cursor: pointer; }
.rh-cm-close .icon { width: 40px; height: 40px; }
.rh-cm-close .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }
/* 番号・題・本文（〜599: 番号の行の下に題） */
.rh-cm-head { display: grid; justify-items: start; gap: 12px; padding-right: 0; }
/* 番号の右の点線: border の dashed は iPhone（WebKit）の dialog の中で上端の 1 点しか描かれなかった（2026-09-29 実測）→ 3px おきのグラデで描く */
.rh-cm-num { margin: 0; padding-right: 25px; background: linear-gradient(to bottom, var(--c-line-2) 50%, transparent 0) 100% 0 / 1px 6px repeat-y; font-family: var(--f-en); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: 0.08em; color: var(--c-peach-soft); }
.rh-cm-title { font-family: var(--f-round); font-weight: 500; font-size: 22px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); text-wrap: wrap; word-break: keep-all; overflow-wrap: anywhere; }
.rh-cm-title strong { color: var(--c-orange); font-weight: inherit; }
.rh-cm-title br { display: none; }
.rh-cm-body { margin: 24px 0 0; font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
/* 写真（焼き込みの歯の形をそのまま）＋右下の薄いスマイル（写真の手前） */
.rh-cm-photo { position: relative; margin-top: 32px; }
.rh-cm-img img { display: block; width: 100%; height: auto; }
.rh-cm-photo > .smile { z-index: 2; left: auto; top: auto; width: 30%; right: 3%; bottom: -12%; }
@media (min-width: 600px) {
  .rh-cm-scroll { padding: 48px; }
  .rh-cm-close { top: 44px; right: 44px; }
  .rh-cm-head { display: flex; align-items: center; gap: 12px 24px; padding-right: 48px; }   /* 右は × の分 */
  .rh-cm-num { flex: none; font-size: 64px; }
  .rh-cm-title { flex: 1 1 auto; min-width: 0; font-size: 24px; line-height: 2.3; }   /* 2 行の送り 55 */
  .rh-cm-title br { display: inline; }
  .rh-cm-body { font-size: 16px; line-height: 2.2; }
  .rh-cm-photo { width: min(100%, 440px); margin: 48px auto 0; }
  .rh-cm-photo > .smile { width: 30%; right: 2%; bottom: -10%; }
}
@media (min-width: 768px) {
  .rh-cm-scroll { padding: 64px; }
  .rh-cm-close { top: 60px; right: 60px; }
  .rh-cm-photo > .smile { width: 31%; right: -18%; bottom: -5%; }   /* 現行 841: 写真の右下の外へ少し出る（写真の左右に 80 以上の余白がある幅だけ） */
}
/* 開いた折りたたみの横（841×701 など高さ 760 以下）: 余白と写真を詰めて、箱の中を送らずに収める */
@media (min-width: 600px) and (max-width: 1079px) and (max-height: 760px) {
  .rh-cm-scroll { padding: 40px 48px; }
  .rh-cm-close { top: 36px; right: 44px; }
  .rh-cm-body { margin-top: 16px; }
  .rh-cm-photo { width: min(100%, 360px); margin-top: 32px; }
}
@media (min-width: 1080px) {
  .rh-cm-scroll { display: grid; grid-template-columns: minmax(0, 572fr) minmax(0, 532fr); column-gap: 48px; align-items: center; padding: 64px; }
  .rh-cm-close { top: 16px; right: 16px; }
  .rh-cm-head { padding-right: 0; }
  .rh-cm-body { margin-top: 25px; }
  .rh-cm-photo { width: auto; margin: 0; }
  .rh-cm-photo > .smile { width: 26%; right: 16%; bottom: -10.6%; }
  /* 02・04（is-rev）: 現行どおり写真が左・文字が右（写真 532｜48｜文字 572）。スマイルは写真の左下（1440 実測: 写真の左から 81・下へ 29 はみ出す）。
     HTML の順は文字→写真のまま（order で並べ替えるだけ。読み上げと Tab の順は変わらない） */
  .rh-cm.is-rev .rh-cm-scroll { grid-template-columns: minmax(0, 532fr) minmax(0, 572fr); }
  .rh-cm.is-rev .rh-cm-photo { order: -1; }
  .rh-cm.is-rev .rh-cm-photo > .smile { right: auto; left: 15.2%; bottom: -8.5%; }
}
@media (min-width: 1080px) and (max-width: 1279px) {
  .rh-cm-scroll { padding: 56px; column-gap: 40px; }
  .rh-cm-num { font-size: 48px; }
  .rh-cm-title { font-size: 22px; line-height: 2.5; }
}
/* 開いている間は後ろを動かさない（チャットの html.as-lock と同じ）。右下の電話と丸も隠す */
html.rh-cm-lock, html.rh-cm-lock body { overflow: hidden; }
html.rh-cm-lock body { padding-right: var(--rh-cm-sb, 0px); }
html.rh-cm-lock .reserve, html.rh-cm-lock .fab-btn { opacity: 0; pointer-events: none; }
/* ホバー: カードは現行どおり縁がオレンジ 2px だけ（右の「＋」は塗らない。2026-09-29 に hover.css の塗りを外した）。× は薄いピーチの丸。transition は外（戻りも滑らかに） */
.rh-charm-btn, .rh-cm-close { transition: var(--t-hover); }
@media (hover: hover) and (pointer: fine) {
  .rh-charm-btn:hover { box-shadow: inset 0 0 0 2px var(--c-orange); }
  .rh-cm-close:hover { background: var(--c-peach-soft); }
}
/* 指・マウスで閉じてカードへフォーカスを戻したときは枠を出さない（印 is-pfocus は recruit-charms.js が付け、キー操作かフォーカスが外れたら外す）。
   iPhone の WebKit は戻したフォーカスを :focus-visible と見なし、カードに青い 3px の枠が残っていた。Esc などキーボードで閉じたときは枠を出す */
.rh-charm-btn.is-pfocus:focus-visible { outline: none; }
/* 〜1079 の狭いカードの折り返し: 語の途中では折らず、home.mjs の phr() が置いた句の切れ目（<wbr>）と「、」で折る。
   344 で「ちゃんと向き合える歯／科医療」「チームで支え合う文／化。」「セミナー参加補／助費」になっていた → 「…向き合える／歯科医療」「…支え合う／文化。」「セミナー／参加補助費」。
   句より狭い枠でも字がはみ出さないよう overflow-wrap: anywhere を添える（そのときだけ語の途中で折れる）。1080〜 は元のまま */
@media (max-width: 1079px) {
  .rh-charm-title, .rh-welfare-name { word-break: keep-all; overflow-wrap: anywhere; }
}
.rh-nw { white-space: nowrap; }   /* 「・」の前後の字（phr()）。Chromium は keep-all でも「・」の後ろで折るため */

/* ---------- 7. 写真帯（楕円と角丸の交互 × 3 周のマーキー。下を英字が流れる） ---------- */
.rh-band { position: relative; overflow-x: clip; overflow-y: visible; margin-bottom: 120px; }
/* 1080〜 は下の .rh-band-track 既定より後に書く（同じ詳細度で上書きするため）→ ファイル後半「7. 写真帯 1080〜」 */
.rh-band-track { display: flex; justify-content: flex-start; align-items: center; width: max-content; animation: rh-marquee 60s linear infinite; }
.rh-band-item { flex: none; width: min(45vw, 360px); margin-right: 16px; }
.rh-band-item img { width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: var(--r-m); }
.rh-band-item.is-oval img { border-radius: 160px; }
.rh-band-text { position: relative; margin-top: -24px; width: max-content; display: flex; font-family: var(--f-en); font-size: clamp(56px, 6vw + 24px, 120px); line-height: 1; letter-spacing: 0.12em; color: var(--c-peach-soft); white-space: nowrap; animation: rh-marquee 90s linear infinite; }
.rh-band-text-track { display: flex; }
.rh-band-text span { padding-right: 0.6em; }
@media (prefers-reduced-motion: reduce) { .rh-band-track, .rh-band-text { animation: none; } }
@media (min-width: 768px) { .rh-band-item { margin-right: 24px; } .rh-band-text { margin-top: -40px; } }
/* 凸凹（2026-09-28 ユーザー指示「画像凸凹じゃなかったここ？」）: 〜1079 も 1080〜（角丸の写真だけ 40 下がる）と同じ段違いにする。
   角丸の写真を写真の高さの 12% 前後下げ、楕円は上のまま（344 で 18・390 で 19・440 で 20・673 で 26・841 で 30・1079 で 36）。
   下の英字は帯の下端（＝下がった角丸の写真の下端）に付いたままなので、角丸の写真との重なりは今までどおり（楕円とは下げた分だけ浅くなる） */
@media (max-width: 1079px) {
  .rh-band-track { align-items: flex-start; }
  .rh-band-item { margin-top: clamp(16px, 2.5vw + 9px, 36px); }
  .rh-band-item.is-oval { margin-top: 0; }
}
@media (min-width: 1080px) {
  /* 7. 写真帯 1080〜（Figma Frame 25 51:13・1440×568）: 写真 360×288・間 40。1 枚目（content の 1 枚目）が 50% − 780（1440 で −60）から。
     角丸 40 の写真は 40 下がり、楕円（角丸 144）は上揃え。英字 Roboto Regular 96px/1.7・字間 24px・#F7E7DB が帯の上から 246（左 50% − 715）。
     帯の下 240 で福利厚生（英字の箱の下端 409 → 568 まで 159） */
  .rh-band { margin-bottom: 159px; }
  .rh-band-track { align-items: flex-start; margin-left: calc(50% - 780px); }
  .rh-band-item { width: 360px; margin-right: 40px; margin-top: 40px; }
  .rh-band-item.is-oval { margin-top: 0; }
  .rh-band-item img { aspect-ratio: 360 / 288; border-radius: 40px; }
  .rh-band-item.is-oval img { border-radius: 144px; }
  .rh-band-text { margin-top: -82px; margin-left: calc(50% - 715px); font-size: 96px; font-weight: 400; line-height: 163px; letter-spacing: 24px; }   /* 行の高さ 163（Figma の箱。1.7 倍＝163.2） */
  .rh-band-text span { padding-right: 0; }
  .rh-band-text-track > span { padding-right: 24px; }   /* 繰り返しの間は字間 24 ＋ 24 */
}

/* ---------- 8. WELFARE 福利厚生（〜1079: 見出し→2×2→ボタン / 1080〜: カード・カード・見出し・カード・カード） ---------- */
.rh-welfare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rh-welfare-head { grid-column: 1 / -1; margin-bottom: 16px; }
.rh-welfare-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 176px; padding: 24px 12px; background: var(--c-white); border-radius: var(--r-m); text-align: center; }
.rh-welfare-ic { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--c-peach-soft); padding: 16px; color: var(--c-brown); }
.rh-welfare-ic img { width: 100%; height: 100%; object-fit: contain; }
/* SP 用の別アイコン・別キャプション（原本 STUDIO ≤540 のブロック）: 〜599 だけ .rh-ic-sp / .rh-cap-sp を出す */
.rh-ic-pc { display: contents; } .rh-ic-sp { display: none; }
.rh-cap-sp { display: none; }
.rh-welfare-name { font-family: var(--f-round); font-size: 14px; letter-spacing: 0.04em; line-height: 1.5; color: var(--c-ink-deep); }
.rh-welfare-more { grid-column: 1 / -1; margin-top: 24px; }
@media (min-width: 600px) { .rh-welfare-grid { gap: 16px; } .rh-welfare-name { font-size: 15px; } }
@media (min-width: 768px) {
  .rh-welfare-grid { gap: 24px; }
  .rh-welfare-card { min-height: 226px; gap: 20px; }
  .rh-welfare-ic { width: 120px; height: 120px; padding: 24px; }
  .rh-welfare-name { font-size: 18px; }
}
@media (min-width: 1080px) {
  /* Figma Frame 35（56:4047・1440×428）: カード 228×228 × 2 ＋ 40 ＋ 見出し列 240 ＋ 40 ＋ カード × 2（組の中の間 24）＝ 1280。下 200。
     カード: 白・角丸 16・上 40 → アイコン 120（地の丸なし）→ 8 → 18px/1.7 字間 6% #271200。
     見出し列はカードの縦中央（ラベル → 16 → 福利厚生 → 40 → ボタン。塊 193 が上 18 から） */
  .rh-welfare-grid { grid-template-columns: repeat(2, minmax(0, 228px)) minmax(200px, 1fr) repeat(2, minmax(0, 228px)); grid-template-rows: 1fr auto auto 1fr; gap: 0 24px; align-items: start; }
  .rh-welfare-head { grid-column: 3; grid-row: 2; margin: 0; padding: 0 16px; }
  .rh-welfare-more { grid-column: 3; grid-row: 3; margin: 40px 0 0; }
  .rh-welfare-card { grid-row: 1 / 5; height: 228px; min-height: 0; padding: 40px 4px 0; justify-content: flex-start; gap: 8px; }
  .rh-welfare-ic { width: 120px; height: 120px; padding: 0; background: none; border-radius: 0; flex: none; }
  .rh-welfare-name { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; white-space: nowrap; }
  /* 1080〜 も iconSp を出す（600〜1079 だけ icon）。社員旅行補助は Figma（56:4047）では車（原本 STUDIO の PC は飛行機・SP は車）だが、
     No.22・No.70 の医院指示で全幅飛行機（home.json の icon を飛行機 1c256d0f にし、iconSp は付けない。2026-10-01 医院の修正リスト No.70）。今この規則が効く項目はない */
  .rh-ic-pc { display: none; } .rh-ic-sp { display: contents; }
  /* 子の並び: 1=見出し(div) 2〜5=カード 6=ボタン */
  .rh-welfare-card:nth-child(2) { grid-column: 1; }
  .rh-welfare-card:nth-child(3) { grid-column: 2; }
  .rh-welfare-card:nth-child(4) { grid-column: 4; }
  .rh-welfare-card:nth-child(5) { grid-column: 5; }
}
@media (min-width: 1080px) and (max-width: 1279px) { .rh-welfare-name { font-size: 16px; letter-spacing: 0.02em; } }

/* ---------- 9. WORK 仕事を知る（ピーチ方眼の面。〜1079: 1 列（幅 460 中央）/ 1080〜: 3 列） ---------- */
.rh-work-wrap { padding-inline: 16px; overflow-x: clip; overflow-y: visible; }   /* スマイルの左右のはみ出しだけ切る（上下は出す） */
.rh-work { position: relative; padding: 64px 16px 48px; border-radius: var(--r-xl);
  background-color: var(--c-peach-soft);
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-peach) 22%, transparent) 0 1px, transparent 1px 60px), repeating-linear-gradient(180deg, color-mix(in srgb, var(--c-peach) 22%, transparent) 0 1px, transparent 1px 60px); }
.rh-work .sec-head { margin-bottom: 72px; }
.rh-work .smile-tl { left: 4%; top: -16px; width: 110px; }
.rh-work .smile-br { right: 4%; bottom: 16px; width: 90px; }
.rh-job-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 460px; margin-inline: auto; }
.rh-job { position: relative; }
.rh-job-deco { position: absolute; z-index: 2; width: 64px; height: 64px; pointer-events: none; }
.rh-job-deco img { width: 100%; height: 100%; object-fit: contain; }
.rh-job-1 .rh-job-deco { left: -8px; top: 36%; }
.rh-job-2 .rh-job-deco { right: -8px; bottom: 15%; }
.rh-job-3 .rh-job-deco { left: -8px; bottom: 15%; }
.rh-job .job-card { margin-top: 90px; padding-bottom: 40px; }
.rh-job .job-photo { margin-top: -90px; }
.rh-job .job-photo img { width: 66%; max-width: 280px; }
.rh-job .job-title .btn-ring { width: 32px; height: 32px; }
.rh-job .job-title .btn-ring .icon { width: 16px; height: 16px; }
.rh-job .job-en { font-weight: 400; }   /* 英字は Roboto Regular（原本 SP・Figma 英字見出しとも 400。部品は親の 500 を継いで太かった） */
.rh-work .rh-more { margin-top: 56px; }
@media (min-width: 600px) { .rh-work-wrap { padding-inline: var(--gutter); } .rh-work { padding: 72px 32px 56px; } }
@media (min-width: 768px) {
  .rh-work { padding: 88px 32px 64px; }
  .rh-work .smile-tl { left: 5%; top: -40px; width: 160px; }
  .rh-work .smile-br { right: 5%; bottom: 24px; width: 120px; }
  .rh-job-grid { gap: 48px; }   /* 768〜1079 は 1 列 460 中央のまま（参照 841・設計書 §3-1 #9）。3 列は 1080〜 */
  .rh-job .job-title { font-size: 22px; gap: 10px; }
}
@media (min-width: 1080px) {
  /* Figma Frame 269 / Frame 36（245:5118 / 56:4106）: 面は左右 16（1440 で 1408）・角丸 40・余白 上下 96 左右 80。塗りは 60 角の方眼（線は升目の中央 30 の位置）。
     見出し（中央）→ 120 → カード 400×560 × 3（間 24・角丸 上 216 下 16・白）→ 40 → ボタン → 96。面の高さ 1065。
     カード: 人物写真の枠 334×449 が上 −69 から（写真の下端はカード上端から 380）、下 56 から上へ 英字（Roboto 16 字間 4px）→ 8 → 職種名 24px ＋ 24 ＋ 丸 40。
     飾り 100（回転）: 歯科医師 左 −50・上 100（−14°）、歯科衛生士 左 326・上 318（15°）、歯科総合職 左 305・上 3（15°）。
     スマイル（白）: 左上 273 は面の左 197・上 −67、右下 190 は面の左 1051・下 −32 */
  .page-recruit-home .rh-work-wrap { padding-inline: 16px; padding-bottom: 0; }   /* 面の直後に INTERVIEWS（Figma は面の下に余白なし。INTERVIEWS の上 160 だけ） */
  .rh-work { padding: 96px 80px; border-radius: 40px; background-position: 30px 30px; }
  .rh-work .sec-head { margin-bottom: 120px; }
  .rh-work .smile-tl { left: 14%; top: -67px; width: 273px; }
  .rh-work .smile-br { left: 74.65%; right: auto; bottom: -32px; width: 190px; }
  .rh-job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin-inline: 0; }
  .rh-job-deco { width: 100px; height: 100px; }
  .rh-job-1 .rh-job-deco { left: -50px; top: 100px; right: auto; bottom: auto; transform: rotate(-14deg); }
  .rh-job-2 .rh-job-deco { left: 81.5%; top: 318px; right: auto; bottom: auto; transform: rotate(15deg); }
  .rh-job-3 .rh-job-deco { left: 76.25%; top: 3px; right: auto; bottom: auto; transform: rotate(15deg); }
  .rh-job .job-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 560px; margin-top: 0; padding: 0 24px 56px; border-radius: 216px 216px 16px 16px; }
  .rh-job .job-photo { position: absolute; left: 0; right: 0; bottom: calc(100% - 380px); margin-top: 0; justify-content: center; pointer-events: none; }
  .rh-job .job-photo img { width: 86.25%; max-width: 345px; height: auto; aspect-ratio: auto 519 / 674; }
  .rh-job .job-body { position: relative; }
  .rh-job .job-title { justify-content: center; margin-top: 0; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; gap: 24px; }
  .rh-job .job-title .btn-ring { width: 40px; height: 40px; }
  .rh-job .job-title .btn-ring .icon { width: 26px; height: 26px; }   /* 丸 40 の山形 8.8×15（リンクカードと同じ Figma の丸） */
  .rh-job .job-en { margin-top: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 4px; }
  .rh-work .rh-more { margin-top: 40px; }
}

/* ---------- 10. INTERVIEWS 先輩スタッフの声（〜767: 横に送るカルーセル＝下の 10b / 768〜1079: 2 列・見出し中央 / 1080〜: 見出し 240 ＋ 2 列） ----------
   並び .rh-iv-cards は共通部品 autoCarousel の外枠 .rh-iv-car（role=region）の中。768〜 は外枠が素の箱なので、格子は前と同じ（1080〜 の列の指定は外枠に付ける） */
.rh-iv-grid { display: grid; gap: 24px; }
.rh-iv-head { text-align: center; justify-items: center; margin-bottom: 8px; }
.rh-iv-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.rh-iv-more { margin-top: 16px; }
.rh-iv .smile-bl { left: -4%; bottom: 8%; }
.rh-iv .iv-card { padding: 32px 32px 40px; gap: 24px; }
.rh-iv .iv-photo img { aspect-ratio: 3 / 4; background: var(--c-peach-soft); }
.rh-iv .iv-name { margin-top: 16px; }
@media (min-width: 768px) { .rh-iv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .rh-iv .iv-card { padding: 40px 40px 48px; gap: 32px; } }
@media (min-width: 1080px) {
  /* 節（Figma Frame 37 56:4190）: 上 160・下 200。見出し列（ラベル → 16 → H2 → 64 → ボタン）＋ 右にカード 2 列 × 3 段。スマイル 273（#F1EAE5）は見出し列の左・上 485。
     カードは現行プレビューの実測（2026-09-29、1920/1440/1280）に合わせる。2026-09-29 ユーザー指示「先輩スタッフの声のフォーマットは現状のやつ」で、
     9/25 の Figma 化（名前と所属が 1 行目・所属はオレンジ 12px・一言は黒 16px で下・写真 327:350）から戻した。
       カード列: 容器の 74% − 20.8px（1280 の容器で 926.4、1200 で 867.2＝現行の値。1080 の容器 1000 で 719.2 → 見出し列 280.8 に H2 271 が入る）。カード 2 列・間 24（縦も 24）
       カード: 白・角丸 16・縁 2px（地色＝見えない。ホバーでオレンジ＝hover.css）・余白 40（縁込み 42）。行の高さに引き伸ばさない（一言が 3 行のカードだけ長い）
       中: 写真は全幅 3:4・角丸 16 → 24 → 一言 22px/1.7 字間 6% オレンジ → 24 → 名前 22px/1.4 → 8 → 所属 15px/1.7 #271200（書体は丸ゴシック） */
  .page-recruit-home .rh-iv { padding-top: 160px; }
  .rh-iv-grid { grid-template-columns: minmax(0, 1fr) calc(74% - 20.8px); grid-template-rows: auto 1fr; gap: 0; align-items: start; }
  .rh-iv-head { grid-column: 1; grid-row: 1; text-align: left; justify-items: start; margin-bottom: 64px; }
  .rh-iv-head .sec-title { text-wrap: nowrap; }
  .rh-iv-more { grid-column: 1; grid-row: 2; justify-content: flex-start; margin: 0; }
  .rh-iv-car { grid-column: 2; grid-row: 1 / 3; }
  .rh-iv-cards { gap: 24px; align-items: start; }
  .rh-iv .iv-card { padding: 42px; gap: 24px; border-radius: 16px; align-content: start; box-shadow: inset 0 0 0 2px var(--c-cream); }
  .rh-iv .iv-photo img { aspect-ratio: 3 / 4; border-radius: 16px; }
  .rh-iv .iv-body { display: block; }
  .rh-iv .iv-quote { font-size: 22px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
  .rh-iv .iv-name { margin-top: 24px; font-size: 22px; line-height: 1.4; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .rh-iv .iv-meta { margin-top: 8px; font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); text-wrap: balance; }
  .rh-iv .iv-meta > span { white-space: nowrap; }   /* 折れるときは区切り（／・）の後ろで（句の span は components.mjs） */
  .rh-iv .smile-bl { left: max(var(--gutter), 50% - 640px); top: 645px; bottom: auto; width: 273px; }   /* 上 160 ＋ 485 */
}

/* ---------- 10b. INTERVIEWS のカルーセル（〜767。2026-09-29 ユーザー指示「スマホの場合、先輩の声横に自動スクロールと手動でもスクロールできるように」「採用のトップのとこね」） ----------
   部品: templates/components.mjs の autoCarousel（外枠 .rh-iv-car・並び .rh-iv-cards・操作列 .acar-ctrl）、自動送りは assets/js/carousel-auto.js、操作列の見た目は components.css「自動送りのカルーセル」。
   土台は CSS の横スクロール（JS が無くても指で送れて 6 人とも読める）。並びは画面の左端から右端まで（負のマージンで容器の外へ）で、
   内側の余白＝ページの左右の余白（--gutter。〜599 は 32・600〜767 は 20）。先頭のカードの左端と吸い付く位置（scroll-padding）はほかの節の字の左端と同じ。
   カードは画面の 82%（上限 360・字の幅〔並びの 100%〕まで）・間 12 → 344〜412 で次のカードの端が 20〜30 見える（440〜599 は 360 のまま）。600〜767 は 2 枚＋次の端 40（下）。
   字の幅を上限にする理由: 344〜355 では 82% が字の幅（344 で 280）を 2px ほど超え、カードが吸い付く枠（画面 − 左右の余白）より広くなる。
   枠より広いカードはブラウザがその差の分だけ自由に止めてよい（CSS Scroll Snap）ので、Chrome では 3・5 枚目の頭が 30 に止まり、字の左端 32 とずれていた（2026-09-29 照合で実測）。
   高さは 6 枚とも一番高いカードにそろう（中身は上詰め）。
   並びの上下の 8 はフォーカスの枠（カードの外へ 6）を切らないための余白（同じだけ負のマージンで打ち消すので位置は変わらない）。
   スクロールバーは出さない（base.css の「main の中で横に送る箱」と同じ）。操作列: 〜599 は点 6 つ（264）が右下の丸（電話・さがす＝右端から 74）に当たるので「2 / 6」の数、
   600〜767 は点。‹ 位置の印 › は中央（344 で 98〜246〔下の 〜359〕。丸の左端 270 より左）、止めるボタンは左端（ほかの節の字の左端） */
@media (max-width: 767px) {
  .rh-iv-car { min-width: 0; }   /* 格子（.rh-iv-grid）の中の箱。0 にしないと中のカード 6 枚ぶんの幅まで広がり、並びが画面より広くなる */
  .rh-iv-cards { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 8px var(--gutter); margin: -8px calc(var(--gutter) * -1); }
  .rh-iv-cards > .iv-card { flex: none; width: min(calc((100% + var(--gutter) * 2) * .82), 360px, 100%); margin-inline: 0; scroll-snap-align: start; align-content: start; }
}
/* 600〜767（開いた折りたたみの縦 673 など）: 1 枚 360 のままだと 767 付近で 3 枚目の端が 3px しか見えず欠けに見える → 2 枚＋次の端 40 が見える幅に（673 で 294・767 で 341。スマホの 1 枚と同じくらいの大きさ）。
   式: 画面の幅 W＝100%＋左右の余白。(W − 左の余白 − 間 12 × 2 − 40) ÷ 2 */
@media (min-width: 600px) and (max-width: 767px) {
  .rh-iv-cards > .iv-card { width: calc((100% + var(--gutter) - 64px) / 2); }
  /* 節の左下のスマイル（600〜767 だけ出る薄い飾り）: 1 列のころの「下から 8%」のままだと、カルーセルで節が短くなって
     U の右の点が ‹ と 1 つ目の点のすぐ横に来て、位置の点が 1 つ多いように見えた（2026-09-29 照合）。
     → 操作列より下の余白（操作列の下端〜節の下端 216）に収まる大きさ 200 にして、節の下端から 8 に置く（U の頭は操作列の下端から 27 下・右の点は「もっと見る」の左 90 以上） */
  .rh-iv .smile-bl { width: 200px; bottom: 8px; }
}
@media (max-width: 599px) {
  .rh-iv-car .acar-dots { display: none; }
  .rh-iv-car .acar-count { display: block; }
}
/* 〜359（畳んだ折りたたみ 344）: 数の箱 60 のままだと止めるボタンと ‹ の間が 10 しかなく、4 つの丸が 1 組に見えた（2026-09-29 照合）。
   数の字は「6 / 6」で 37 なので箱を 44 に → 間 18（‹ 位置 › は 98〜246・右下の丸の左端 270 まで 24） */
@media (max-width: 359px) {
  .rh-iv-car .acar-count { min-width: 44px; }
}

/* ---------- 11. RECRUIT INFO（上辺が楕円に膨らむグラデ帯。白リンクカード 3 ＋ 写真 CTA 2 ＋ ENTRY 帯） ---------- */
.rh-info { position: relative; }
.page-recruit-home .rh-info { padding-block: 88px clamp(64px, 6vw + 24px, 120px); }
.rh-info::before { content: ""; position: absolute; z-index: 0; left: -20%; right: -20%; top: 0; bottom: 0; border-radius: 50% 50% 0 0 / 120px 120px 0 0; background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 40%, var(--c-cream) 78%); }
.rh-info > .container { position: relative; z-index: 1; }
.rh-info-grid { display: grid; gap: 24px; }
.rh-info-head { margin-bottom: 8px; }
.rh-info-links { display: grid; gap: 16px; }
@media (max-width: 767px) { .rh-info-links .link-card { min-height: 116px; } }
.rh-cta-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 80px; }
.rh-cta { min-height: 160px; }
.rh-cta .cta-title { font-size: clamp(22px, 1.25rem + 0.8vw, 32px); }
.rh-entry { margin-top: 12px; min-height: 200px; }
.rh-entry .cta-text { flex-direction: column; align-items: flex-start; gap: 4px; }
.rh-entry .cta-en { font-size: clamp(48px, 2rem + 3vw, 80px); }
.rh-entry .cta-title { font-size: clamp(16px, 1rem + 0.5vw, 24px); }
@media (min-width: 600px) { .rh-entry .cta-text { flex-direction: row; align-items: baseline; gap: 8px 24px; } }
@media (min-width: 768px) {
  .page-recruit-home .rh-info { padding-top: 120px; }
  .rh-info::before { border-radius: 50% 50% 0 0 / 200px 200px 0 0; }
  .rh-info-grid { max-width: 600px; margin-inline: auto; }   /* 参照 841: 幅 560 中央 */
  .rh-cta-grid { gap: 24px; margin-top: 160px; }
  .rh-cta { min-height: 224px; }
  .rh-entry { margin-top: 24px; min-height: 320px; }
}
@media (min-width: 1080px) {
  /* Figma Frame 38（72:1016・1440×1504）: 上 200 → 見出し列 320 ＋ 80 ＋ 白カード 560×120 × 3（間 8）＝ 幅 960 中央 → 160 → 写真 CTA 628×224 × 2（間 24）→ 24 → ENTRY 1280×320 → 下 200。
     上辺の弧（Subtract 72:1025）: 端で 115・中央で 16 まで膨らむ。楕円で近似（幅 152%＝半径 1094・縦半径 402 → 1440 の端で 16＋99＝115、x1113 で 42.8＝Figma 42.5）。
     地のグラデ（塗り画像の画素）: 0 #FFF0B9 / 200 #FFEBC0 / 400 #FFE0BB / 600 #FFDFC5 / 800 #FDE6D3 / 1000 #FCEADC / 1200 #F9F0E9 / 1400 クリーム。
     下 200 は ENTRY の下端 → フッターの上端（フッターの margin-top 64 を差し引いて 136） */
  .page-recruit-home .rh-info { padding-top: 200px; padding-bottom: 136px; }
  .rh-info::before { left: -26%; right: -26%; top: 16px; border-radius: 50% 50% 0 0 / 402px 402px 0 0;
    background: linear-gradient(180deg, var(--c-hero-yellow) 0, color-mix(in srgb, var(--c-hero-yellow) 78%, var(--c-hero-mid)) 184px, color-mix(in srgb, var(--c-hero-yellow) 30%, var(--c-hero-mid)) 384px,
      color-mix(in srgb, var(--c-hero-mid) 70%, var(--c-peach-soft)) 584px, color-mix(in srgb, var(--c-hero-mid) 40%, var(--c-cream)) 784px, color-mix(in srgb, var(--c-peach-soft) 70%, var(--c-cream)) 984px,
      color-mix(in srgb, var(--c-peach-soft) 30%, var(--c-cream)) 1184px, var(--c-cream) 1384px); }
  .rh-info-grid { max-width: 960px; margin-inline: auto; grid-template-columns: minmax(0, 320px) minmax(0, 560px); gap: 80px; align-items: start; padding-inline: 0; }
  .rh-info-head { margin-bottom: 0; }
  .rh-info-links { gap: 8px; }
  .rh-info-links .link-card { min-height: 120px; }
  .rh-cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 160px; }
  .rh-cta { min-height: 224px; padding: 80px; border-radius: 40px; }
  .rh-entry { margin-top: 24px; min-height: 320px; padding: 40px 80px; border-radius: 40px; }
  .rh-entry .cta-text { padding-left: 0; }
  .rh-entry .cta-en { font-size: 80px; font-weight: 400; letter-spacing: 12px; line-height: 1.7; }
  .rh-entry .cta-smile { left: 120px; top: 36px; width: 273px; opacity: 0.1; }
}

/* FV の見出し: 〜767 は文字がオレンジ（原本 STUDIO の ≤910 は #E56300。参照 440 の字の画素 (229,99,0)）。768〜 は base.css の濃茶のまま */
@media (max-width: 767px) { body.page-recruit-home .rh-hero-title { color: var(--c-orange); } }

/* ======================================================================
   〜599（スマホ 344〜440）: 原本 STUDIO の @media (max-width: 540px) の指定値に合わせる（2026-09-24）
   根拠: capture/recruit-preview/index/dom.html の STUDIO CSS（≤540 の実値）と capture/sp-compare/recruit__index の
   ip440 / ip393 / fold344 の ref 画素の実測（y はページ上端から、440 幅）。768〜 には効かない（PC 合わせ済みの値は触らない）
   ====================================================================== */
@media (max-width: 599px) {
  /* ---- 共通: 左右の余白は原本の各セクション padding（MESSAGE 40・福利厚生 28 相当・他 32）[440: ABOUT 本文 32〜408] ---- */
  .page-recruit-home :is(.rh-about, .rh-data, .rh-charms, .rh-iv, .rh-info) { --gutter: 32px; }
  .page-recruit-home .rh-msg { --gutter: 40px; }
  /* 英字ラベル 16px（参照 Roboto 16: 字高 11）。字間は幅合わせ [MESSAGE 93 / ABOUT US 101 / CHARMS 83 / RECRUIT INFO 143 → 0.22em] */
  .page-recruit-home .main .sec-label { font-size: 16px; letter-spacing: 0.22em; line-height: 1.7; }
  .page-recruit-home .main .sec-head .sec-label { margin-left: 6px; }   /* 原本は見出し内ラベルだけ左 6 [ABOUT US の字頭 x39 = 32+6+1] */
  .page-recruit-home .main .sec-head.center .sec-label { text-indent: 0; }
  .page-recruit-home .main .sec-head { gap: 16px; }                     /* ラベル → H2 16 */
  .page-recruit-home .main .sec-title { font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }   /* H2 24px（新実装は 27.4px） */
  /* 丸矢印ボタン: 18px・余白 12/16/12/24 [参照「理事長メッセージ」237 幅・文字 x67・丸 235〜259 / 「もっと見る」180 幅]。
     高さは「理事長メッセージ」59・「もっと見る」58.5（2026-09-26 に 440 の画素で測り直し。参照 2103〜2161 の 59 行／4423.3〜4481.7。
     60 のままだと「もっと見る」1 つごとに 1.5 ずつ下へずれ、RECRUIT INFO で 7 下がっていた）。
     丸 24 の山形は 6×10（Material の細い矢印）→ 18 枠で 6×10.5（部品既定の 14 枠は 5×8 で小さかった） */
  .page-recruit-home .main .btn-circle { min-height: 59px; padding: 12px 16px 12px 24px; gap: 16px; font-size: 18px; letter-spacing: 0.06em; }
  .page-recruit-home .main .rh-more .btn-circle { min-height: 58.5px; }
  .page-recruit-home .main .btn-circle .btn-ring .icon { width: 18px; height: 18px; }
  .page-recruit-home .main .btn-circle .btn-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }   /* 線は細い（参照のインク 20 画素・1.5px だと 28） */

  /* ---- 1. ヒーロー: 写真 min(400, 画面幅)×4:5 が上 100（奇数枚は 124）・間隔 16。見出し 2 本は写真の下部に重ねる ----
     参照: 440 写真 324|16|… 上端 100/124・高さ 500、393 写真幅 393、344 写真幅 344（高さ 430）。見出しはページ上端 520・左 24 */
  .rh-hero { position: relative; padding-top: 30px; margin-bottom: 40px; }   /* ヘッダー 70 + 30 = 写真の上端 100 */
  .rh-hero-track { animation-duration: 42s; }                              /* 原本 60px/s: 6 枚 ×(400+16) ≒ 42s */
  .rh-hero-item { width: min(400px, 100vw); margin-right: 16px; }
  /* 段違い: 奇数枚（先頭＝衛生士）が 24 下がる。[参照 440/393: 衛生士の写真が上 124・次の受付が上 100。344 でも受付が 100。
     新実装は逆（先頭 100・次 124）だった] */
  .rh-hero-item:nth-child(odd) { margin-top: 24px; }
  .rh-hero-item:nth-child(even) { margin-top: 0; }
  .rh-hero-item img { border-radius: 40px; }
  .rh-hero-copy { position: absolute; z-index: 2; left: 0; right: 0; width: auto; max-width: none; margin: 0; padding: 0 24px;
    /* ページ上端 520（= ヒーロー上端 +450）。写真が 400 未満（〜365）では下のピルに重ならないよう写真の下端に合わせて上げる */
    top: min(450px, calc(min(400px, 100vw) * 1.25 - 8px)); }
  body.page-recruit-home .rh-hero-title { gap: 8px; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .rh-hero-line { padding: 0 8px; border-radius: 8px; }
  /* 白いスマイル 80: 見出しの上端に揃えて右 34 [参照 440: 325〜405 × 520〜592] */
  .rh-hero-smile { right: 34px; bottom: auto; top: min(420px, calc(min(400px, 100vw) * 1.25 - 38px)); width: 80px; }

  /* ---- 2. クイックリンク: 白いカード 2 列（2026-09-28 ユーザー指示「これ一列より2列にしてみて」。旧は原本どおりの横長ピル 1 列）----
     医院トップのスマホ（main/home.css の .home-qlb 〜767）と同じ組み方: カード 169×98 以上（344 は (304−12)/2＝146）・横の間 12・縦の間 10・角丸 110・
     2 列を中央寄せ、5 個目は 3 段目の左。イラスト（箱 50・インク 35〜40）が上、下に文字 15px 字間 6% と丸矢印 16（採用の部品の約束で山形は丸の中）。
     文字の幅はカードの左右 20 を空けた内側（390 で 129・344 で 106）＝カードの丸みに字が掛からない。収まらない文字は句の切れ目で 2 行
     （home.mjs の <wbr> ＋ keep-all: 390 で「歯科衛生士／求人」「歯科医師／臨床研修」、344 ではさらに「データで／見る」「歯科医師／求人」）。
     同じ段のカードは高さをそろえる（li を grid にしてカードを伸ばす） */
  .rh-ql { width: min(350px, 100% - 40px); }
  .rh-ql .qlb-list { grid-template-columns: repeat(2, minmax(0, 169px)); justify-content: center; gap: 10px 12px; }
  .rh-ql .qlb-item { display: grid; }
  .rh-ql .qlb-link { min-height: 98px; padding: 11px 20px 14px; gap: 4px; justify-content: flex-start; border-radius: 110px; }
  .rh-ql .qlb-ic { width: 50px; height: 50px; }
  .rh-ql .qlb-label { display: block; font-size: 15px; line-height: 1.5; letter-spacing: 0.06em; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
  .rh-ql .qlb-label .btn-ring { display: inline-flex; width: 16px; height: 16px; margin-left: 6px; vertical-align: baseline; }   /* 丸の下端を字の並びの線に置く＝丸の中心が字の中心と 0.5 以内（Chromium・WebKit で実測） */
  .rh-ql .qlb-label .btn-ring .icon { width: 11px; height: 11px; }

  /* ---- 3. MESSAGE: 写真（上）→ 80 → 本文。大写真 = 容器の 80% − 16（440 で 272×340）、右小 120 は右 −38・下 41、左小 160 は左 −20・下 −22 ----
     参照 440: 大 84〜356 × 1132〜1472、右小 318〜438 × 1335〜1431、左小 20〜180 × 1366〜1494、ラベル 1552、ボタン 2103〜2162 */
  .rh-msg-grid { gap: 80px; }
  .rh-msg-photos .collage-stack { padding-bottom: 0; }
  .rh-msg-photos .collage-1 { width: calc(80% - 16px); }
  .rh-msg-photos .collage-1 img { border-radius: 40px; }
  .rh-msg-photos .collage-2 { top: auto; right: -38px; bottom: 41px; width: 120px; }
  .rh-msg-photos .collage-2 img { aspect-ratio: 448 / 359; border-radius: 32px; }
  .rh-msg-photos .collage-3 { left: -20px; bottom: -22px; width: 160px; }
  .rh-msg-photos .collage-3 img { aspect-ratio: 700 / 561; border-radius: 40px; }
  .rh-msg-body { gap: 16px; margin-top: 40px; font-size: 15px; line-height: 2.2; }   /* 行送り 33（参照 1619 から 12 行＋段落間 16） */
  .rh-msg-btn { margin-top: 40px; }
  .rh-msg .smile-bl { left: auto; right: 11px; bottom: 207px; width: 200px; }         /* 本文容器の右 −29・ボタン下端の 87 上 [参照 228〜430 × 1895〜2076] */

  /* ---- 4. ABOUT: 見出し → 40 → 本文 15/2.2 → 40 → リンク 3（可視 372×91・間隔 12）→ 20 → 縦長バナー 372×266 ----
     参照 440: ラベル 2282、本文 2406〜2769（11 行）、リンク可視 2811 / 2914 / 3017、バナー 3128〜3394。原本のカードは地色の 2px 枠で 2 内側に見える */
  .rh-about-grid { gap: 40px; }
  .rh-about-grid .sec-head { margin-bottom: 0; }
  .rh-about-body { font-size: 15px; }
  .rh-about-links { gap: 12px; margin-top: 42px; padding-inline: 2px; }
  .rh-about-links .link-card { min-height: 91px; padding: 0 32px; }   /* 参照 440: 2811〜2901 / 2914〜3004 / 3017〜3107（91・送り 103）。91.2 だと 91/92 が混じって 1〜2 ずれる */
  .rh-about-banner { margin-top: 20px; padding-inline: 2px; }
  .rh-about-banner picture { display: block; }
  :is(.rh-about-links, .rh-info-links) .link-card .btn-ring { width: 24px; height: 24px; }   /* 丸矢印 24 [参照 350〜374] */
  :is(.rh-about-links, .rh-info-links) .link-card .btn-ring .icon { width: 20px; height: 20px; }

  /* ---- 5. DATE: カード 48%（440 で 180×170）・間隔 8・中央。数字カードはアイコン 80＋数字 32、グラフは 120 角を下 20 に ----
     参照 440: カード 36〜216 / 224〜404、1 枚目 3681〜3851、ラベル札 36〜142 × 26、円 254〜374 × 3889〜4009、ボタン 4425 */
  .page-recruit-home .rh-data { padding-top: 2px; }   /* バナー下端 → DATE の字頭: 参照 131（440: 3393→3524 / 344: 3389→3520）、新実装 128 */
  .rh-data-head { margin-bottom: 40px; }
  .rh-data-grid { grid-template-columns: repeat(2, 48%); justify-content: center; gap: 8px; }
  .rh-dcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 170px; min-height: 0; padding: 40px 24px 24px; }
  .rh-dcard .stat-label { position: absolute; left: 0; top: 0; margin: 0; justify-self: auto; font-size: 13px; line-height: 1.4; padding: 4px 12px; }
  .rh-dcard .stat-ic { width: 80px; height: 80px; margin-top: 0; }
  .rh-dcard .stat-value { margin-top: 0; align-items: flex-end; gap: 0; }
  .rh-dcard .stat-num { font-size: 32px; letter-spacing: 0.06em; }
  .rh-dcard .stat-unit { font-size: 16px; padding-bottom: 4px; letter-spacing: 0.06em; }
  .rh-dcard .stat-note { font-size: 12px; line-height: 1.4; margin-top: 4px; }
  /* 原本 ≤540 の数字カード（7d62d2cd）は注記なし・3 枚目のキャプションは「患者数（一日平均）」 */
  .rh-dcard .stat-note { display: none; }
  .rh-cap-pc { display: none; } .rh-cap-sp { display: inline; }
  .rh-dcard.rh-dcard-chart { justify-content: flex-end; padding: 24px 24px 20px; }
  .rh-dcard-body { width: 120px; margin-top: 0; }
  .rh-data-grid .rh-dcard-body .chart svg { width: 120px; max-width: 120px; }
  /* 円: 440 では参照の円 120（254〜373 × 3889〜4008、カード下端の 21 上）より新実装が 114 と小さかった → 箱 128（円 122.6）で原本より大きく。
     393 以下は 120 のまま（参照 393 の円 109・344 の円 86 より既に大きい）。式 48vw − 83 は 440 で 128・420 未満で 120 */
  .rh-data-grid .rh-dcard-pie .rh-dcard-body, .rh-data-grid .rh-dcard-pie .rh-dcard-body .chart svg { width: clamp(120px, 48vw - 83px, 128px); max-width: none; }
  /* 棒: 参照 440 は棒 20・送り 31（年齢層 67/98/129/160）・最大の棒 58〜59、数字の字高 11（約 15px）、項目名 約 11px（「20代」幅 23）、MBTI の副題 約 9px。
     項目名は棒の下端から 8〜16、副題は 21〜28 下。グラフの塊はカードの縦中央より 8〜9 下（年齢層 4259〜4351・MBTI 4253〜4358 / カード 4212〜4381）
     → 箱 124（送り 31）、字は SVG 単位で 数字 23・％14・項目名 17・副題 14、項目名 +8・副題 +12 下げ、カードは上 32・下 17 の中で縦中央 */
  .rh-data-grid .rh-dcard-chart:not(.rh-dcard-pie) { justify-content: center; padding: 32px 24px 17px; }
  .rh-data-grid .rh-dcard-chart:not(.rh-dcard-pie) .rh-dcard-body,
  .rh-data-grid .rh-dcard-chart:not(.rh-dcard-pie) .rh-dcard-body .chart svg { width: clamp(120px, 48vw - 87px, 124px); max-width: none; }
  .rh-data-grid .rh-dcard-body .chart-bar svg { overflow: visible; }
  .rh-data-grid .rh-dcard-body .bar-val { font-size: 23px; }
  .rh-data-grid .rh-dcard-body .bar-unit { font-size: 14px; }
  .rh-data-grid .rh-dcard-body .bar-name { font-size: 17px; letter-spacing: 0; transform: translateY(8px); }
  .rh-data-grid .rh-dcard-body .bar-sub { font-size: 14px; letter-spacing: 0; transform: translateY(12px); }

  /* ---- 6. CHARMS: カード可視 372（2 内側）・間隔 28。歯型 48 がカード上辺から 16 出る（左 32）。文字 15/1.7・「＋」は点線 34 角 ----
     参照 440: 1 枚目可視 4770〜4890、歯型 66〜113 × 4754〜4800、「＋」348〜381、ピッチ 149。スマイル 120 はリスト右端・下 −65 */
  .rh-charms-grid { gap: 0; }
  .rh-charms-head { margin-bottom: 42px; }
  .rh-charm-list { gap: 28px; }
  .rh-charm { margin-inline: 2px; padding-top: 0; }
  .rh-charm .tooth-badge { left: 32px; top: -16px; width: 48px; height: 46px; }
  .rh-charm .tooth-badge-txt { font-size: 16px; letter-spacing: 0.1em; text-indent: 0.1em; padding-bottom: 1px; }
  .rh-charm-btn { min-height: 0; padding: 38px 24px 32px 32px; gap: 16px; font-size: 15px; line-height: 1.7; }
  .rh-charm-plus { width: 34px; height: 34px; }
  .rh-charm-plus .icon { width: 27px; height: 27px; }
  .rh-charm-plus .icon path { stroke-width: 1.8; }   /* 参照 440: 「＋」は 18×18・線 2px。2.2 だと線 3px（アンチエイリアス込み）で太く見えた */
  .rh-charms > .smile-br { right: 32px; bottom: 55px; width: 120px; }

  /* ---- 7. 写真帯: 写真は画面の半分 − 8（440 で 212×170）・間隔 16。英字は写真の下辺に 32 重なる高さ 70 の帯（下 82）----
     （原本は上揃えだが、2026-09-28 から角丸の写真だけ下げる段違い＝上の「凸凹」。下げ幅はそちら）
     参照 440: 写真 5612〜5782、英字の字高 46（5760〜5806）・字送り約 55、次の WELFARE まで 120 */
  /* 写真の上端: 参照 440 5610・344 5683、新実装は 2 上 → 上に 2。英字は写真に対して 1 下、次の WELFARE の字頭まで参照 104（新実装 102）→ 下 122 */
  .rh-band { margin-top: 2px; margin-bottom: 0; padding-bottom: 122px; }
  .rh-band-track { align-items: flex-start; }
  .rh-band-item { width: calc(50vw - 8px); margin-right: 16px; }
  .rh-band-item.is-oval { margin-top: 0; }
  .rh-band-item img { border-radius: 40px; }
  .rh-band-item.is-oval img { border-radius: 160px; }
  .rh-band-text { position: absolute; left: 0; bottom: 83px; height: 70px; margin: 0; align-items: center; font-size: 63px; letter-spacing: 0.21em; }
  .rh-band-text .rh-band-text-track { padding-right: 0; }
  .rh-band-text .rh-band-text-track > span { padding-right: 80px; }   /* 繰り返しの間 80 [原本 padding-right 80]。外側の track には付けない（1/3 送りのループがずれる） */

  /* ---- 8. WELFARE: カード 2 列 188×180（440。容器 384 = 画面 − 56）・間隔 8。丸アイコン 80（地色クリーム）→ 16 → 14px ----
     参照 440: ラベル 5908、カード 28〜216 / 224〜412 × 6024〜6204、ボタン 6432、下余白 80 */
  .page-recruit-home .rh-welfare { --gutter: 28px; }
  .page-recruit-home .rh-welfare.section { padding-bottom: 80px; }
  .rh-welfare-grid { gap: 8px; }
  .rh-welfare-head { margin-bottom: 32px; }
  /* カードは 180 固定で中身を縦中央（1 行: アイコン上 31〜32 / 2 行: 上 24）。上下 32 の余白だと 344 の 2 行札が 196 に伸びて、以降が 33 下がっていた
     [参照 344: カード 180・2 行のアイコン上端はカード上端 +24 / 440: 6024〜6204・アイコン 6055] */
  .rh-welfare-card { min-height: 180px; padding: 16px 14px; gap: 16px; }
  .rh-welfare-ic { width: 80px; height: 80px; padding: 0; background: var(--c-cream); }
  .rh-ic-pc { display: none; } .rh-ic-sp { display: contents; }   /* iconSp がある項目だけ（今はない）。社員旅行補助は原本 ≤540 では車 702cedaa だが、No.22・No.70 の医院指示で飛行機（2026-10-01 医院の修正リスト No.70） */
  .rh-welfare-name { font-size: 14px; line-height: 1.2; letter-spacing: 0.06em; margin-bottom: 4px; }
  .rh-welfare-more { margin-top: 32px; }

  /* ---- 9. WORK: 面は左右 8・角丸 40・内側 80/32。職種カード 340×360（アーチ）、写真 220 幅が上辺から 53 はみ出す。カード間 80 ----
     参照 440: 面 8〜432 × 6570〜、カード 50〜390 × 6830〜7190 / 7270 / 7710、職種名 24px・丸 32、英字 13px、ボタン 8110 */
  .rh-work-wrap { padding-inline: 8px; }
  .rh-work { padding: 80px 32px; border-radius: 40px; }
  /* 地の方眼: 原本 ≤540 は方眼の画像（577c14fd）を contain・repeat・left center で敷く（面の幅で 1 枚＝升目 14〜17・線はごく淡い）。
     CSS の 60 角の線（PC の Figma 値）のままだと升目が 4 倍・線が 4 倍濃かった [参照 390: 升目 16・線 (248,229,214) / 地 (247,231,218)] */
  .rh-work { background-image: url("/assets/img/577c14fd-800.40e7ad0dbf.webp"); background-size: contain; background-repeat: repeat; background-position: left center; }
  .rh-work .sec-head { margin-bottom: 96px; }
  .rh-work .smile-tl { left: 29px; top: -23px; width: 100px; }
  .rh-work .smile-br { right: 19px; bottom: -21px; width: 80px; }
  .rh-job-grid { gap: 80px; max-width: 340px; }
  /* 写真の下端 → 職種名の丸 30、職種名 → 英字は 2 広い [参照 440: 写真 6776〜7056・丸 7086・英字 7135 / 新実装 6782〜7062・7088・7135] */
  .rh-job .job-card { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 28px; height: 360px; margin-top: 0; padding: 40px 24px; }
  .rh-job .job-photo { margin-top: 0; }
  .rh-job .job-photo img { width: 220px; max-width: none; height: auto; aspect-ratio: auto 4 / 3; }
  .rh-job .job-title { font-size: 24px; line-height: 1.4; gap: 8px; margin-top: 0; }
  /* 丸 32 の山形は 7×14・線 1.3（参照 440 の画素。部品の 16 枠は 4×8 で小さかった）→ 27 枠・線は拡大に左右されない 1.3px */
  .rh-job .job-title .btn-ring .icon { width: 27px; height: 27px; }
  .rh-job .job-title .btn-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }
  /* 英字は Roboto Regular（参照のインク 62 幅・細い。500 だと 59 幅で太かった）→ 400・字間 0.14em */
  .rh-job .job-en { font-size: 13px; line-height: 1.7; letter-spacing: 0.14em; margin-top: 10px; }
  .rh-job-deco { width: 70px; height: 70px; }
  .rh-job-1 .rh-job-deco { left: -19px; top: 52px; right: auto; bottom: auto; transform: rotate(-20deg); }
  .rh-job-2 .rh-job-deco { right: -29px; bottom: 27px; left: auto; top: auto; transform: rotate(20deg); }
  .rh-job-3 .rh-job-deco { left: -28px; bottom: 84px; right: auto; top: auto; transform: rotate(-20deg); }
  .rh-work .rh-more { margin-top: 40px; }

  /* ---- 10. INTERVIEWS: 余白 32。写真 3:4 → 24 → 一言 18 オレンジ → 24 → 名前 18 → 4 → 13px ----
     参照 440: 写真 66〜374 × 8527〜8938、一言の字 8970。スマイルは出さない（原本 ≤540 は display:none）。
     2026-09-29 から 〜767 は横に送るカルーセル（上の 10b）。1 列のときの「カード可視 372（左右 2 内側）・間隔 28」は外した */
  .rh-iv-grid { gap: 0; }
  .rh-iv-head { margin-bottom: 42px; }
  .rh-iv .iv-card { padding: 32px; gap: 24px; }
  .rh-iv .iv-photo img { border-radius: 16px; }
  .rh-iv .iv-body { display: block; }
  .rh-iv .iv-quote { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; margin-bottom: 24px; }
  .rh-iv .iv-name { font-size: 18px; line-height: 1.4; letter-spacing: 0.06em; margin-top: 0; }
  .rh-iv .iv-meta { font-size: 13px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); margin-top: 4px; }
  .rh-iv-more { margin-top: 26px; }
  .rh-iv .smile-bl { display: none; }

  /* ---- 11. RECRUIT INFO: 上 120 → 見出し → 40 → 白カード可視 372×116・間隔 12 → 80 → 写真 CTA 160 ×2（間隔 8）→ 8 → ENTRY 200 ----
     参照 440: ラベル 12770、カード可視 12896〜、写真 CTA 13350 / 13518、ENTRY 13686〜13886（ENTRY 48px・丸 40）。
     下 50: ENTRY 帯の下端 → フッターの口の上端 80（.ft-recruit の margin-top 30 と合わせて）[参照 440: 13886→13966 / 344: 13336→13416。新実装は 64＋30＝94] */
  .page-recruit-home .rh-info { padding-top: 120px; padding-bottom: 50px; }
  /* 地のグラデは帯の高さに比例させず、上端から 450 でクリームに戻す（原本は幅 100% の画像 1 枚＝440 で高さ約 400）
     [参照 440 上端から: 20 (255,239,194) / 100 (254,228,191) / 150 (255,221,192) / 300 (250,237,226) / 400 (248,244,240) / 500 クリーム。新実装は 650 でもピーチだった] */
  .rh-info::before { background: linear-gradient(180deg, var(--c-hero-yellow) 0, var(--c-hero-mid) 150px, color-mix(in srgb, var(--c-hero-mid) 25%, var(--c-cream)) 300px, var(--c-cream) 450px); }
  .rh-info-grid { gap: 0; }
  .rh-info-head { margin-bottom: 42px; }
  .rh-info-links { gap: 12px; padding-inline: 2px; }
  .rh-info-links .link-card { min-height: 116px; padding: 0 32px; }
  .rh-cta-grid { margin-top: 82px; gap: 8px; }
  .rh-cta { min-height: 160px; padding: 32px; }
  .rh-cta .cta-title { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  :is(.rh-cta, .rh-entry) .cta-ring { width: 40px; height: 40px; }
  :is(.rh-cta, .rh-entry) .cta-ring .icon { width: 32px; height: 32px; }   /* 丸 40 の山形 9×18（参照 440）。26 枠では 8×14 で小さかった → 32 枠 */
  :is(.rh-cta, .rh-entry) .cta-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }   /* 線 1.2px（参照のインク 34 画素。部品の 1.1 単位＝1.47px だと 52） */
  .rh-entry { margin-top: 8px; min-height: 200px; padding: 32px; }
  .rh-entry .cta-text { gap: 4px; }
  /* Roboto Regular・字間 0.06em: 参照 440 のインクは 68〜220（153 幅・細い）。500・字間 0 は 68〜210 で太く短かった。
     折り返さない（nowrap。344 の文字の枠 160 に 158 で収まる） */
  .rh-entry .cta-en { font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; }
  .rh-entry .cta-title { font-size: 18px; line-height: 1.7; }
  /* 白いスマイルは幅 165・枠の左 40・上 18 [参照 440: 左の点の中心 (110, 帯上端+32)・右の点 (222, +57)・弧の下端 +164 → 273 単位の図形で 0.605 倍。344 も同じ位置。新実装は 221 で弧が帯の下端で切れていた] */
  .rh-entry .cta-smile { left: 40px; top: 18px; width: 165px; }
}
/* 円のカード（440 付近）: 箱 128 の円はカード下端の 20 上に下端（参照 21）→ 下の余白 17 */
@media (min-width: 430px) and (max-width: 599px) { .rh-data-grid .rh-dcard.rh-dcard-pie { padding-bottom: 17px; } }
/* 〜374（折りたたみのカバー画面 344・360）: カードが 134〜142 しかなく、9 字の見出し札（「患者数（一日平均）」「常勤・非常勤の割合」）が
   「患者数（一日平／均）」「常勤・非常勤の割／合」と 1〜2 字だけ 2 行目へ落ちていた → 札の字を 12px・字間 0.02em・左右 10 にして 1 行（9 字で 130） */
@media (max-width: 374px) { .rh-dcard .stat-label { font-size: 12px; letter-spacing: 0.02em; padding-inline: 10px; } }

/* ======================================================================
   演出（docs/MOTION.md。属性は templates/recruit/home.mjs に書いてある）
   - ここはすべて html.mo（演出あり）の下だけ。JS なし・reduce・Playwright（?motion=1 なし）では何も効かず、静止の見た目は上のまま。
   - motion.css はこのファイルの後に読む → 部品の既定を上書きするときは詳細度を 1 段上げる（.rh-* を足す）。
   - 動かすのは opacity / translate / scale / rotate / clip-path / border-radius だけ（transform は hover.css とマーキーが使う）。
     横にずらした初期状態は作らない（縦だけ）。1 を超える scale は overflow:clip の枠の中だけ。
   ====================================================================== */

/* ---- 1. ヒーロー（読み込み時の入場） ----
   写真: 画面に見えている先頭の 1 枚（〜1079 は帯の 0 枚目、1080〜 は 4 枚目＝1440 で左端 −360）から 90ms ずつ、
   下 88px・0.92 倍からせり上がる（上限 6 段）。〜1079 は流れ始めを 1.3 秒遅らせる（1080〜 は元から 2.5 秒止めてある） */
.rh-hero { --rh-i0: 0; }
@media (min-width: 1080px) { .rh-hero { --rh-i0: 4; } }
html.mo .rh-hero .rh-hero-item[data-mo].is-in {
  animation: rh-hero-rise 1.15s var(--mo-ease) backwards;
  animation-delay: calc(var(--mo-d, 0ms) + min(max(var(--rh-i, 0) - var(--rh-i0), 0), 6) * 90ms);
}
@keyframes rh-hero-rise { from { opacity: 0; translate: 0 88px; scale: .92; } }
@media (max-width: 1079px) { html.mo .rh-hero-track { animation-delay: 1.3s; } }
/* 題: 白い帯が左から開き（data-mo="wipe"）、字が帯の下端から 1 字ずつ跳ねるようにせり上がる。
   本物の文字（.rh-hero-txt）は動いている間だけ透明にし、同じ位置に重ねた .rh-hero-chars（aria-hidden・生成文字 data-c）を 1 字ずつ動かす。
   最後の字が止まった 45ms 後に本物へ戻す（step-end）→ 止まった後の見た目は静止版と画素まで同じ。帯は overflow:clip（字は帯の外に出ない） */
.rh-hero-chars { display: none; }
html.mo .rh-hero-line { position: relative; overflow: clip; }
html.mo .rh-hero-chars { display: block; position: absolute; inset: 0; padding: inherit; white-space: nowrap; pointer-events: none; visibility: hidden; }
html.mo .rh-hc { display: inline-block; }
html.mo .rh-hc::before { content: attr(data-c); }
html.mo .rh-hero-line.is-in { --rh-hold: calc(var(--mo-d, 0ms) + 160ms + var(--rh-n, 10) * 45ms + 750ms); }
html.mo .rh-hero-line.is-in .rh-hero-txt { animation: rh-hold-txt var(--rh-hold) step-end; }
html.mo .rh-hero-line.is-in .rh-hero-chars { animation: rh-hold-chars var(--rh-hold) step-end; }
@keyframes rh-hold-txt { from { color: transparent; } }
@keyframes rh-hold-chars { from { visibility: visible; } }
html.mo .rh-hero-line.is-in .rh-hc {
  animation: rh-hc-rise .75s var(--mo-ease-pop) backwards;
  animation-delay: calc(var(--mo-d, 0ms) + 160ms + var(--rh-k, 0) * 45ms);
}
@keyframes rh-hc-rise { from { opacity: 0; translate: 0 105%; rotate: 12deg; } 40% { opacity: 1; } }

/* ---- 2. クイックリンク: 〜1079 は横スクロール箱ではない（格子）ので、部品の fade を下からの up に替える ---- */
@media (max-width: 1079px) {
  html.mo .rh-ql .qlb-item[data-mo].is-in { animation-name: mo-up; --mo-dist: 24px; }
}

/* ---- 5. DATE: カード（stagger の up）→ 見出し札が描かれる（768〜 の縦書きは上から下、〜767 の横書きは左から右）→ 単位が跳ねる ---- */
html.mo .rh-data .rh-dcard.is-in > .stat-label { animation: mo-wipe .7s var(--mo-ease) backwards; animation-delay: calc(var(--mo-d, 0ms) + 240ms); }
@media (min-width: 768px) { html.mo .rh-data .rh-dcard.is-in > .stat-label-v { animation-name: mo-wipe-down; } }
html.mo .rh-data .rh-dcard.is-in .stat-unit { animation: rh-unit-pop .6s var(--mo-ease-pop) backwards; animation-delay: calc(var(--mo-d, 0ms) + 560ms); }
@keyframes rh-unit-pop { from { opacity: 0; translate: 0 .4em; scale: .6; } }

/* ---- 7. 写真帯: 左から 90ms ずつ（上限 6 段）、角丸は下から・楕円は上から入って波打つ（縦だけ） ---- */
html.mo .rh-band .rh-band-item[data-mo].is-in {
  animation: rh-band-up 1s var(--mo-ease) backwards;
  animation-delay: calc(var(--mo-d, 0ms) + min(var(--rh-i, 0), 6) * 90ms);
}
html.mo .rh-band .rh-band-item.is-oval[data-mo].is-in { animation-name: rh-band-down; }
@keyframes rh-band-up { from { opacity: 0; translate: 0 64px; scale: .9; } }
@keyframes rh-band-down { from { opacity: 0; translate: 0 -64px; scale: .9; } }

/* ---- 9. WORK: 飾りのイラストはカードの後に回りながら出て（spin）、その後ふわふわ（mo-float・3 つの位相をずらす） ---- */
html.mo .rh-job-2 .rh-job-deco .mo-float { animation-delay: -1.7s; }
html.mo .rh-job-3 .rh-job-deco .mo-float { animation-delay: -3.4s; }

/* ---- 10. INTERVIEWS の 〜767（カルーセル）: 節ごと 1 回で出す（2026-09-29）----
   768〜 はカードが順に up（並びの data-mo-stagger）→ 写真が下から開く（unveil）のまま。〜767 はカードが横に並ぶので、カードごとに隠すと
   画面の外（右）のカードが透明のまま残り、指や自動送りで出てきたときに遅れて浮き上がる（縦にずらすと並びに縦のスクロールも一瞬出る）。
   → 〜767 はカードと写真を個別に隠さず・動かさず、外枠（並び＋操作列）ごと 1 回だけ up。引き金は motion.js がカードに付ける .is-in
   （いちばん早いのは画面に入った 1 枚目。残りのカードも掃除で .is-in になるが、ここでは何も起きない）。
   詳細度: motion.css の待機の規則（html.mo [data-mo]:not(.is-in):not(…)×3 = 0,6,1）より強く書く（body.page-recruit-home ＋ .rh-iv-car で 0,6,2） */
@media (max-width: 767px) {
  html.mo body.page-recruit-home .rh-iv-car .rh-iv-cards > .iv-card[data-mo],
  html.mo body.page-recruit-home .rh-iv-car .iv-card .iv-photo[data-mo] { opacity: 1; animation: none; clip-path: none; }
  html.mo body.page-recruit-home .rh-iv-car .iv-card .iv-photo[data-mo] img { animation: none; }
  html.mo .rh-iv-car:not(:has(> .rh-iv-cards > .is-in)) { opacity: 0; }
  html.mo .rh-iv-car:has(> .rh-iv-cards > .is-in) { animation: mo-up var(--mo-dur) var(--mo-ease) backwards; }
}

/* ---- 11. ENTRY: 帯の地の光が丸矢印の脈打ち（motion.css の mo-pulse 3.6s・1.2s 後から）に合わせて膨らんで消える。
   枠（.cta は data-allow-bleed＝overflow:clip・角丸）の中だけ。画面外では止める（.mo-loop → .mo-offscreen） ---- */
html.mo .rh-entry::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(48% 90% at 88% 50%, color-mix(in srgb, var(--c-white) 34%, transparent), transparent 72%);
  animation: rh-entry-glow 3.6s ease-in-out 1.2s infinite;
}
html.mo .rh-entry.mo-offscreen::after { animation-play-state: paused; }
@keyframes rh-entry-glow { 0%, 58% { opacity: 0; scale: .8; } 84% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (min-width: 1080px) { html.mo .rh-entry::after { background: radial-gradient(40% 90% at 90% 50%, color-mix(in srgb, var(--c-white) 30%, transparent), transparent 72%); } }

/* ---- 画面に入ったとき一度だけ（2026-09-26: スクロール連動をやめた。止めた位置で開きかけのまま残り「アニメーションが途中」に見えるため）----
   引き金は節の頭の見えない札（.rh-work-trig／.rh-info-trig。data-mo-group に motion.js が .is-in を付ける）。
   9. WORK の面: 0.9 倍・下 72px・角丸 120 から素の形へ広がる（縮むだけなので横にはみ出さない）
   11. RECRUIT INFO の楕円の帯（::before）: 日の出のように下 200px から透明→不透明でせり上がる（帯は .rh-info の overflow:clip の中） */
.rh-work > .rh-work-trig, .rh-info > .rh-info-trig { position: absolute; left: 0; top: 0; width: 1px; height: 160px; pointer-events: none; }
html.mo .rh-work:not(:has(> .rh-work-trig.is-in)) { scale: .9; translate: 0 72px; border-radius: 120px; }
html.mo .rh-work:has(> .rh-work-trig.is-in) { transform-origin: 50% 0; animation: rh-work-grow 1.3s var(--mo-ease) backwards; }
html.mo .rh-info:not(:has(> .rh-info-trig.is-in))::before { opacity: 0; translate: 0 200px; }
html.mo .rh-info:has(> .rh-info-trig.is-in)::before { animation: rh-info-rise 1.6s var(--mo-ease) backwards; }
@keyframes rh-work-grow { from { scale: .9; translate: 0 72px; border-radius: 120px; } }
@keyframes rh-info-rise { from { opacity: 0; translate: 0 200px; } 50% { opacity: 1; } }

/* フッターの口の上の間隔を現行に合わせる（2026-09-26 統合時。最後の中身の下端→口の上端を現行と同じ方法で実測: tools なし・scratchpad の gap.mjs）。
   〜599 は現行 390、768〜1079 は現行 841 の値 */
@media (min-width: 768px) and (max-width: 1079px) { body.page-recruit-home main > .rh-info { padding-bottom: 56px; } }   /* 現行 80。新 98 → 80 */