/* 採用サイト: 職種ページ /recruit/dentist・dental-hygienist・dental-staff の上書き CSS。templates/recruit/job.mjs に対応し、work.css の後に読む。
   値は capture/recruit-preview/<job>/dom.html の STUDIO 実 CSS（ブレークポイント 1120 / 910 / 540）と
   capture/compare/recruit__<job>/slices の実測を、この設計の 4 段（〜599 / 600〜 / 768〜1079 / 1080〜）に写したもの。
   参照側が崩れている箇所（一日の流れ・先輩の声の左溢れ、ABOUT JOB の格子の潰れ）は参照に合わせない。
   規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止・色は tokens.css の変数のみ。 */

/* ---------- 共通: 左見出し＋右本体 ---------- */
/* 1080〜 は Figma（採用 歯科医師 108:2693 / 歯科衛生士 111:3598 / 歯科総合職 111:4358、1440 幅）:
   見出し列 236・間 80・本体 964（ABOUT JOB 111:4226 / 募集要項 108:3344 は本体 960）。容器は work.css の 1280（x80〜1360）。
   節は上 0・下 200（Figma の各 Frame が pb 200）。見出しは英字 16px/0.25em → 間 16 → H2 32px（Figma Frame 28 gap 16） */
@media (min-width: 1080px) {
  .page-job .wk-side { grid-template-columns: 236px minmax(0, 1fr); column-gap: 80px; }
  .page-job .wk-guide .wk-side { grid-template-columns: 236px minmax(0, 960px); column-gap: 80px; }
  .page-job .section { padding-block: 0 200px; }
  .page-job .section .sec-head { gap: 16px; }
  .page-job .jb-charms .sec-head { margin-bottom: 40px; }   /* Figma 108:3229: 見出し→カード 40 */
}
/* 〜1079: ABOUT JOB と先輩の声の見出しは中央（参照 344/841）。募集要項・採用情報は左のまま */
@media (max-width: 1079px) {
  .page-job .jb-about .sec-head, .page-job .jb-iv .sec-head { text-align: center; justify-items: center; }
}
/* 見出しの改行: 左カラム（1080〜）と SP（〜599）だけ効かせる。全幅の見出し（CHARMS・一日の流れ）は 600〜 で 1 行 */
.page-job .jb-about .sec-title .jb-br, .page-job .jb-iv .sec-title .jb-br { display: none; }
@media (min-width: 1080px) { .page-job .jb-about .sec-title .jb-br, .page-job .jb-iv .sec-title .jb-br { display: inline; } }
@media (min-width: 600px) { .page-job .jb-charms .sec-title .jb-br, .page-job .jb-sched .sec-title .jb-br { display: none; } }

/* ---------- ヒーロー ---------- */
/* 参照: section padding 120/16/64（〜540）・160/32/80（〜910）・200/80/80（PC）。ヘッダー直下の余白はそれぞれ 40 / 50 / 80 */
.page-job .jb-hero { padding-top: 40px; }
.page-job .jb-hero-fig { padding-bottom: 75px; }                 /* 歯型カードが写真の下辺から 75px はみ出す（参照 344 実測） */
.page-job .jb-hero-img { aspect-ratio: 5 / 4; border-radius: var(--r-xxl); }   /* SP 用の写真は 800×640・角丸 40（参照 344 実測） */
.page-job .jb-hero-card { width: 180px; margin-left: -90px; bottom: 0; }
.page-job .jb-hero-card-in { gap: 4px; padding-bottom: 20px; }
.page-job .jb-hero-tag { font-size: 13px; padding: 0 8px; border-left-width: 2px; }
.page-job .jb-hero-title { font-size: 24px; line-height: 1.7; }
.page-job .jb-hero-en { font-size: 10px; }
.page-job .jb-hero-smile { width: 91px; right: 2px; bottom: 15px; max-width: none; }   /* 参照 344 実測: 右端は画面右から 24、下端は写真の下辺 +60 */
@media (min-width: 600px) {
  .page-job .jb-hero-img { aspect-ratio: 16 / 9; }
  .page-job .jb-hero-card { width: 200px; margin-left: -100px; }
}
@media (min-width: 768px) {
  .page-job .jb-hero { padding-top: 48px; }
  .page-job .jb-hero-fig { padding-bottom: 60px; }
  .page-job .jb-hero-img { max-width: none; border-radius: 0; }
  .page-job .jb-hero-card { width: 220px; margin-left: 0; left: 32px; }
  .page-job .jb-hero-card-in { gap: 8px; padding-bottom: 28px; }
  .page-job .jb-hero-tag { font-size: 14px; padding: 2px 10px; }
  .page-job .jb-hero-title { font-size: 24px; }
  .page-job .jb-hero-en { font-size: 12px; }
  .page-job .jb-hero-smile { width: 140px; right: 70px; bottom: 37px; }   /* 参照 841 実測: 右 69・下端は写真箱の下辺 +23 */
}
/* 1080〜（Figma 歯科医師 111:3473「Frame 211」1440×880）:
   写真ブロブは左右 40（px 40）で 1360×480（マスク 1360×479.75 ＝ 画像 2040:720 と同比）。上端 y200（ヘッダー 108 ＋ 92）、ブロブの下辺→CHARMS の英字 200。
   歯型カード（Vector 304.55×292.6）は写真の左 +116.7・上 +264（Figma: カード枠 340 が x139 y440、歯型はその +17.7 / +24）＝ 写真幅の 8.58%・写真高さの 55%。
   中身（タグ 20px → 16 → 職種名 40px/0.06em → 8 → 英字 Roboto 16px/0.25em）は歯型の中央。
   スマイル 218×197（--c-line）は写真の左 +1010・上 +312 ＝ 写真幅の 74.26%・写真高さの 65%。
   衛生士・総合職の Figma（111:3902 / 111:4360）は旧版の「見出し＋ブロブ」だが、歯科医師（ノード ID が新しい）と STUDIO プレビューが歯型カード型なので 3 職種ともこちらに揃える */
@media (min-width: 1080px) {
  .page-job .jb-hero { padding-top: 92px; padding-bottom: 200px; }
  .page-job .jb-hero > .container { width: min(100% - 80px, 1360px); }
  .page-job .jb-hero-fig { padding-bottom: 0; }
  .page-job .jb-hero-img-pc { max-width: none; aspect-ratio: 2040 / 720; margin-inline: 0; }
  .page-job .jb-hero-img-pc img { width: 100%; height: 100%; object-fit: contain; }
  .page-job .jb-hero-card { width: 305px; left: 8.58%; top: 55%; bottom: auto; margin-left: 0; }
  .page-job .jb-hero-card-in { gap: 16px; padding-bottom: 0; }
  .page-job .jb-hero-tag { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; padding: 0 16px; border-left-width: 2px; border-radius: 0 4px 4px 0; }
  .page-job .jb-hero-title { font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-job .jb-hero-en { font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; margin-top: -8px; }   /* 職種名→英字は 8（外側の gap 16 から −8） */
  .page-job .jb-hero-smile { width: 218px; left: 74.26%; top: 65%; right: auto; bottom: auto; }
}

/* ---------- CHARMS 魅力ポイント ---------- */
.page-job .jb-charms { padding-top: clamp(64px, 5vw + 24px, 88px); }   /* ヒーロー（歯型の下端）から CHARMS まで: 参照 344=68 / 841=75 / 1280=88 */
/* 参照（〜540）: カードは画面端から 32px・padding 32・番号(40px)＋点線を上、見出し 22px/1.7（改行なし）、本文 15px/1.7、写真、スマイルは右下 */
.page-job .jb-charm-list { gap: 24px; margin-inline: 12px; }
.page-job .jb-charm { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; padding: 32px; position: relative; }
.page-job .jb-charm-text { display: grid; gap: 8px; }
.page-job .jb-charm-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; justify-items: start; }
.page-job .jb-charm-num { font-size: 40px; line-height: 1; padding: 0 24px 0 0; border-right: 1px dashed var(--c-line-2); }
.page-job .jb-charm-title { font-size: 22px; line-height: 1.7; padding-left: 0; border-left: 0; }
.page-job .jb-charm-title .jb-br { display: none; }
.page-job .jb-charm-body { font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; }
.page-job .jb-charm-img { position: relative; grid-column: auto; grid-row: auto; overflow: visible; }
.page-job .jb-charm-img img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-m); display: block; }
.page-job .jb-charm-smile { width: 84px; max-width: none; left: auto; right: 8px; bottom: -20px; }   /* 参照: 84×53、カード右 40・下 12 */
@media (min-width: 600px) {
  /* 参照（〜910）: padding 64・縦積み・写真は 440px で中央・番号 64px｜点線｜見出し 24px/1.4（改行あり） */
  .page-job .jb-charm-list { gap: 32px; margin-inline: 0; }
  .page-job .jb-charm { gap: 40px; padding: 48px 40px; }
  .page-job .jb-charm-text { gap: 24px; }
  .page-job .jb-charm-head { grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .page-job .jb-charm-num { font-size: 64px; }
  .page-job .jb-charm-title { font-size: 24px; line-height: 1.4; }
  .page-job .jb-charm-title .jb-br { display: inline; }
  .page-job .jb-charm-body { font-size: 16px; line-height: 2.2; }
  .page-job .jb-charm-img { width: min(440px, 100%); margin-inline: auto; }
  .page-job .jb-charm-smile { width: 139px; right: -40px; bottom: -11px; }
}
@media (min-width: 768px) {
  .page-job .jb-charm { gap: 48px; padding: 64px; }
  .page-job .jb-charm-smile { right: -95px; }   /* 参照 841: スマイルは写真の右辺をまたぐ（右 74・下 53、カード基準） */
}
@media (min-width: 1080px) {
  /* Figma 108:3229（CHARMS）: 白カード 628 角を 2 列・間 24（容器 1280）。カードは padding 40・縦積み gap 40・右揃え（写真 440×262 が右、文は全幅）。
     写真は角丸 16（マスク Rectangle 24 rx16）。番号は左上の 70 角（#F7E7DB・角丸 左上 16／右下 16、Roboto 40px 字間 10px の橙）。
     見出し 24px/1.7/0.06em、→ 24 → 本文 16px/2.2/0.06em #574D45。スマイル・点線は無い。偶数カードも反転しない。
     中身が長いカードは 628 より伸びる（aspect-ratio は最小として効く）。同じ行のカードは同じ高さ */
  .page-job .jb-charms { padding-top: 0; }   /* ヒーローの下 200 が間（Figma: ブロブ下辺→英字 200） */
  .page-job .jb-charm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .page-job .jb-charm, .page-job .jb-charm.is-rev { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; padding: 40px; aspect-ratio: 1 / 1; border-radius: 16px; }
  /* 写真の原本は STUDIO 用に下辺が波の形で透過（1064×680 / 799×510）。Figma の角丸 16 の矩形にするため、枠 440:262 で切り、
     画像は 106% に広げて上へ 1.5px（全 15 枚で透過が枠に出ない最小値を画素で探索: k=1.055〜1.06・上 1〜1.5px） */
  .page-job .jb-charm-img { order: -1; width: 80.29%; margin-inline: 0; aspect-ratio: 440 / 262; min-height: 0; overflow: clip; border-radius: 16px; }   /* 440 / 548。min-height:0 で中身（106% の画像）に引き伸ばされない */
  .page-job .jb-charm-img img { width: 106%; max-width: none; height: auto; aspect-ratio: auto 1064 / 680; margin: -1.5px 0 0 -3%; border-radius: 0; }
  .page-job .jb-charm-smile { display: none; }
  .page-job .jb-charm-text { width: 100%; gap: 24px; }
  .page-job .jb-charm-head { display: block; }
  .page-job .jb-charm-num { position: absolute; left: 0; top: 0; width: 70px; height: 70px; display: grid; place-items: center; padding: 8px; border: 0; border-radius: 16px 0 16px 0; background: var(--c-peach-soft); color: var(--c-orange); font-size: 40px; line-height: 1; letter-spacing: 10px; }
  .page-job .jb-num-z { display: none; }   /* Figma の番号は「1」（content の「01」の先頭 0 を PC だけ隠す） */
  .page-job .jb-charm-title { font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-job .jb-charm-title .jb-br { display: inline; }
  .page-job .jb-charm-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
}

/* ---------- ABOUT JOB（総合職の格子） ---------- */
/* 参照（〜540）: 1 列の横長カード（アイコン 40 ｜ 番号 ｜ 名前 18px）。600〜 は work.css の 2 列 / 3 列 */
@media (max-width: 599px) {
  .page-job .jb-tasks { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-inline: 12px; }
  .page-job .jb-task { flex-direction: row; justify-content: flex-start; gap: 24px; min-height: 96px; padding: 24px 32px; text-align: left; }
  .page-job .jb-task-ic { width: 40px; height: 40px; flex: none; }
  .page-job .jb-task-name { font-size: 18px; gap: 16px; }
  .page-job .jb-task-no { font-size: 14px; }
}
@media (min-width: 768px) { .page-job .jb-task-ic { width: 64px; height: 64px; } .page-job .jb-task-no { font-size: 13px; } }
.page-job .jb-task-z { display: none; }
/* 1080〜 総合職（Figma 111:4921）: 314×220 の白カード 3 列・間 8・角丸 8・padding 32・縦 gap 16。アイコン 80（#664328）。
   番号 Roboto 16px/0.25em 橙「01」→ 24 → 名前 20px/1.7/0.06em #271200 */
@media (min-width: 1080px) {
  .page-job .jb-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .page-job .jb-task { min-height: 220px; padding: 32px; gap: 16px; border-radius: 8px; }
  .page-job .jb-task-ic { width: 80px; height: 80px; }
  .page-job .jb-task-name { gap: 24px; align-items: center; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-job .jb-task-no { font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; }
  .page-job .jb-task-z { display: inline; }   /* content の「1」を Figma どおり「01」で見せる */
}
/* 1080〜 衛生士（Figma 257:5215「Frame 75」開いた状態）: 白カード 964 幅・角丸 16・padding 40・間 24。
   見出し行: ピーチの 66 角（角丸 8）＋ 16 ＋ 題 24px/1.7/0.06em、右端に 40 角の開閉（開くと＋が×に回る）。
   開いた中身: 見出し行の下 32 に点線 → 40 → 箇条書き 16px/1.7/0.06em #574D45（行間 8）→ 32 → 補足 16px/1.7 */
@media (min-width: 1080px) {
  .page-job .jb-aj-acc { gap: 24px; }
  .page-job .jb-aj-acc .acc { border-radius: 16px; }
  .page-job .jb-aj-acc .acc-btn { min-height: 0; padding: 40px; gap: 16px; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  /* アイコンの svg は 66 角の中に余白込みで描かれた Figma の書き出し（絵は約 44）。箱いっぱいに置くと Figma と同じ大きさになる（2026-09-28。旧 padding 14 で絵が 25 だった） */
  .page-job .jb-aj-acc .acc-ic { width: 66px; height: 66px; padding: 0; border-radius: 8px; }
  .page-job .jb-aj-acc .acc-btn > .icon { width: 40px; height: 40px; padding: 6px; transition: transform .25s; }
  .page-job .jb-aj-acc .acc-btn[aria-expanded="true"] .i-plus { display: inline-block; transform: rotate(45deg); }
  .page-job .jb-aj-acc .acc-btn[aria-expanded="true"] .i-minus { display: none; }
  .page-job .jb-aj-acc .acc-panel { padding: 0 40px 40px; margin-top: -8px; }
  .page-job .jb-aj-acc .acc-panel::before { content: ""; display: block; border-top: var(--dash); margin-bottom: 40px; }
  .page-job .jb-aj-list { gap: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .page-job .jb-aj-body { margin-top: 32px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
}
/* 衛生士の開いた中身の写真。768〜1079: 写真 314×210 が左・40 空けて箇条書き（写真の上下中央）。〜767: 写真を全幅で先に、24 空けて箇条書き。
   写真は角丸が透過で焼き込まれた 540×360（3:2。角の半径は画像の 1/10 ほど）。
   1080〜 は Figma 257:5215（2026-09-28 に確認。開いた状態に写真 360×240・角丸 40・横 40 空けて箇条書き）: 1440 の中身 884 で 360。
   1080〜1279 はカードが細く箇条書きが 200 幅まで詰まるので、写真は中身の 41%（下限 314）にする。
   角丸は焼き込み（360 幅で約 36）より少し大きい 40 を img に足して Figma にそろえる */
.page-job .jb-aj-row { display: grid; gap: 24px; }
.page-job .jb-aj-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) {
  .page-job .jb-aj-row { grid-template-columns: minmax(0, 314px) minmax(0, 1fr); column-gap: 40px; align-items: center; }
}
@media (min-width: 1080px) {
  .page-job .jb-aj-row { grid-template-columns: minmax(0, clamp(314px, 41%, 360px)) minmax(0, 1fr); }
  .page-job .jb-aj-img img { border-radius: 40px; }
}

/* ---------- TIME SCHEDULE 一日の流れ ---------- */
/* 参照: カード 342（PC）/ 248（344）・padding 32・見出しオレンジ 24（PC）/ 20（SP）・写真は下揃えで 5:3（240×144） */
.page-job .jb-sc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: min(300px, 100vw - 96px); padding: 32px; }
.page-job .jb-sc-title { font-size: 20px; }
.page-job .jb-sc-time { margin-top: 8px; font-size: 14px; }
.page-job .jb-sc-body { margin-top: 24px; font-size: 14px; }
.page-job .jb-sc-img { margin-top: auto; padding-top: 32px; width: 100%; }
.page-job .jb-sc-img img { aspect-ratio: 5 / 3; border-radius: 0; display: block; }
@media (min-width: 768px) {
  .page-job .jb-sc-card { width: 342px; }
  .page-job .jb-sc-body { font-size: 16px; }
  .page-job .jb-sc-img { width: 86%; padding-top: 40px; }
}
@media (min-width: 1080px) { .page-job .jb-sc-title { font-size: 24px; } }

/* ---------- INTERVIEWS 先輩スタッフの声 ---------- */
/* 参照: カード padding 40（344 は 36）・写真 3:4・引用オレンジ 18px/1.7・氏名 18・所属 13 */
.page-job .jb-iv .iv-card { padding: 36px; gap: 24px; }
.page-job .jb-iv .iv-photo img { aspect-ratio: 3 / 4; display: block; }
.page-job .jb-iv .iv-quote { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; }
.page-job .jb-iv .iv-name { font-size: 18px; margin-top: 8px; }
.page-job .jb-iv .iv-meta { font-size: 13px; margin-top: 2px; }
@media (min-width: 768px) { .page-job .jb-iv .iv-card { padding: 40px; } }
/* 1080〜: カードの中は現行（STUDIO）と同じ＝採用トップの INTERVIEWS（home.css の .rh-iv）と同じ値（2026-09-29 ユーザー「先輩スタッフの声のフォーマットは現状のやつ」）。
   白 40＋地色の縁 2（inset の輪。ホバーで橙になる＝hover.css）・角丸 16 → 写真 3:4・角丸 16 → 24 → 一言 22px 橙 → 24 → 氏名 22px → 8 → 所属 15px。
   カード列は現行と同じ幅（容器の 74% − 20.8px を 2 列・間 24）。スマイルの透かしは無い。9/25 の Figma 108:3299 の形（写真 327×350・氏名が 1 行目）はやめた */
@media (min-width: 1080px) {
  .page-job .jb-iv .wk-side { grid-template-columns: minmax(0, 1fr) calc(74% - 20.8px); column-gap: 0; }   /* トップと同じ: 見出し列＋カード列（間は見出し列の余り） */
  .page-job .jb-iv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .page-job .jb-iv-smile { display: none; }
  .page-job .jb-iv .iv-card { padding: 42px; gap: 24px; border-radius: 16px; align-content: start; box-shadow: inset 0 0 0 2px var(--c-cream); }
  .page-job .jb-iv .iv-photo img { aspect-ratio: 3 / 4; border-radius: 16px; }
  .page-job .jb-iv .iv-body { display: block; }
  .page-job .jb-iv .iv-quote { font-size: 22px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
  .page-job .jb-iv .iv-name { margin-top: 24px; font-size: 22px; line-height: 1.4; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-job .jb-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; }
  .page-job .jb-iv .iv-meta > span { white-space: nowrap; }
}
/* 1080〜 募集要項（Figma 108:3350）: 白カード 960・角丸 16・padding 40。各行は 語 20px/1.7/0.06em #271200 → 8 → 値 16px/1.7/0.06em #574D45、
   下 24 に点線（最後の行も）、行の間 16。募集が複数あるので開閉は残し、開いた中身をこの形にする（1 件目は開いた状態で出す。job.mjs）。
   開閉の頭は「仕事を知る」の募集要項の部品（Figma 194:4424 閉 / 194:4426 開）: 高さ 121・padding 40・題 24px、右に 40 角の ＋（線 2）。
   開くと ＋ が × に回り、頭の下 40 からすぐ行リスト（間に線は無い） */
@media (min-width: 1080px) {
  .page-job .wk-guide-acc { gap: 24px; }
  .page-job .wk-guide-acc .acc { border-radius: 16px; }
  .page-job .wk-guide-acc .acc-btn { min-height: 121px; padding: 40px; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-job .wk-guide-acc .acc-btn > .icon { width: 40px; height: 40px; margin-right: 0; }
  .page-job .wk-guide-acc .acc-btn > .icon path { stroke-width: 1.2; }   /* 40/24 倍で 2px */
  .page-job .wk-guide-dl { gap: 16px; }
  .page-job .wk-guide-dl .dl-row, .page-job .wk-guide-dl .dl-row:last-child { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 0 24px; border-bottom: var(--dash); }
  .page-job .wk-guide-dl dt { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-job .wk-guide-dl dd { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
}
/* 募集要項の開いた印は「×」（Figma 194:4426 は ＋ を 45° 回した形。原本 STUDIO も ×）。transform ではなく rotate で回すので、
   hover.css の拡大（transform: scale）と重なっても × のまま */
.page-job .wk-guide-acc .acc-btn[aria-expanded="true"] .i-plus { display: inline-block; rotate: 45deg; }
.page-job .wk-guide-acc .acc-btn[aria-expanded="true"] .i-minus { display: none; }
/* JobPosting の url（#guide-2-btn など）で来たとき、開閉の頭がヘッダーのピル（1080〜 は y 24〜84）の下に出るように。
   html の scroll-padding-top（1080〜 は 24）に足されるので 80 で 104 の位置。〜1079 は shell.css の 96 だけで足りる */
@media (min-width: 1080px) { .page-job .wk-guide-acc .acc-btn { scroll-margin-top: 80px; } }

/* ---------- FLOW 採用の流れ（2026-09-28 ユーザー指示 B で募集要項の上に追加。部品は work.mjs の flowSection・work.css の .wk-flow） ----------
   work.css の Figma 合わせ（105:2633）は .page-work に閉じているので、同じ値を職種ページにも当てる（値を変えるときは work.css と揃える）。
   1080〜: 見出し → 80 → カード 380 角（padding 40）3 列＋矢印、丸 84 → 24 → 番号 16px＋題 24px → 8 → 本文 16px/1.7 #574D45。節の下 200 は .page-job .section */
@media (min-width: 1080px) {
  .page-job .wk-flow .sec-head { gap: 16px; margin-bottom: 80px; }
  .page-job .wk-flow-step { gap: 0; min-height: 380px; padding: 40px; }
  .page-job .wk-flow-ic { margin-bottom: 24px; }
  .page-job .wk-flow-ic img, .page-job .wk-flow-ic svg { width: 46px; height: 46px; }
  .page-job .wk-flow-title { align-items: center; gap: 12px; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-job .wk-flow-no { font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; }
  .page-job .wk-flow-body { margin-top: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
}
/* 1080〜1179 はカードが 287〜319 幅しかなく、左右 40 の padding だと「02 見学・面接する」（字幅 216）が 2 行に折れて番号が 2 行の中ほどに浮く。
   この帯だけ左右を 32 にして 1 行に収める（1080 で中身 223）。1180〜 は Figma どおり 40 */
@media (min-width: 1080px) and (max-width: 1179px) {
  .page-job .wk-flow-step { padding-inline: 32px; }
}
/* 〜599（/recruit/work の SP と同じ）: カード padding 24・丸 64 → 8 → 番号 16px（Roboto 400）＋題 24px → 本文 14px/1.7 #574D45。
   カード間の ↓ は線 1.5・長さ 28 の細い線画。前後の節との間は 120（.section + .section） */
@media (max-width: 599px) {
  .page-job .wk-flow-step { gap: 8px; padding: 24px; }
  .page-job .wk-flow-ic { margin-bottom: 0; }
  .page-job .wk-flow-title { font-size: 24px; line-height: 1.7; gap: 12px; align-items: center; }
  .page-job .wk-flow-no { font-size: 16px; letter-spacing: 0.25em; font-weight: 400; }
  .page-job .wk-flow-body { font-size: 14px; line-height: 1.7; color: var(--c-ink-soft); }
  .page-job .wk-flow-step:has(.wk-flow-link) .wk-flow-body { padding-block: 10px; }
  .page-job .wk-flow-arrow { transform: none; }
  .page-job .wk-flow-arrow .icon { display: none; }
  .page-job .wk-flow-arrow::before { content: ""; position: absolute; left: 50%; top: 15px; width: 1.5px; height: 27px; margin-left: -0.75px; background: currentColor; }
  .page-job .wk-flow-arrow::after { content: ""; position: absolute; left: 50%; top: 32px; width: 8px; height: 8px; margin-left: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
}

/* ---------- RECRUIT INFO 採用情報の帯 ---------- */
/* 見出しブロックがカード列の高さに伸びて「採用情報」が下へ落ちる（grid の align-content:normal=stretch）。上に寄せる */
.page-job .rc-info { align-items: start; }
.page-job .rc-info .sec-head { align-content: start; }

/* ========== 〜599: SP の細部を参照に合わせる（2026-09-24。capture/sp-compare/recruit__{dentist,dental-hygienist,dental-staff} の 440/393/344 を画素で実測）
   本文の左右は 32（gutter は work.css の同じ帯で 32 に上書き）。値は 3 幅で同じだったものは px、幅で変わるものは vw の式 ========== */
@media (max-width: 599px) {
  /* ヒーロー: 写真は画面端から 16（W−32 幅・5:4・角丸 40）、上端 y120（ヘッダー 70 ＋ 50）。
     歯型カードの下端は写真の下辺 +76、文字は写真の下辺基準でタグ −59 / 職種名 −23 / 英字 +17（旧: −64 / −29 / +10）。
     白スマイルは右端が画面右から 35・下端が写真の下辺 +59・幅 92（3 幅とも同じ） */
  .page-job .jb-hero { padding-top: 50px; }
  .page-job .jb-hero > .container { width: calc(100% - 32px); }
  .page-job .jb-hero-fig { padding-bottom: 77px; }
  .page-job .jb-hero-card-in { padding-bottom: 12px; }
  .page-job .jb-hero-smile { width: 92px; right: 19px; bottom: 18px; }

  /* CHARMS カード: 番号→見出し 25・見出し→本文 33（旧 15 / 23）。見出しは貪欲改行（balance だと 1 行目が短くなる）。
     本文は #574D45。写真は原寸比 1064:680（3:2 にすると 9px 高い）。スマイルは 58 幅・右端がカード右から 54・下端はカード下から 12 */
  .page-job .jb-charm-list { margin-inline: 0; }
  .page-job .jb-charm-head { row-gap: 10px; }
  .page-job .jb-charm-text { gap: 18px; }
  .page-job .jb-charm-num { padding-right: 18px; }   /* 点線の x: 参照 139（数字 Roboto）。Inter は字幅が広いので余白で合わせる */
  .page-job .jb-charm-title { text-wrap: wrap; }
  .page-job .jb-charm-body { color: var(--c-ink-soft); }
  .page-job .jb-charm-img img { aspect-ratio: 1064 / 680; }
  .page-job .jb-charm-smile { width: 58px; right: 22px; bottom: -20px; }

  /* ABOUT JOB 総合職: カード 112 高・間 8・アイコン 48・アイコン→番号 32（番号 x144 / 名前 x170） */
  .page-job .jb-tasks { margin-inline: 0; gap: 8px; }
  .page-job .jb-task { min-height: 112px; gap: 32px; padding: 24px 32px; }
  .page-job .jb-task-ic { width: 48px; height: 48px; }
  .page-job .jb-task-name { gap: 16px; }
  /* ABOUT JOB 衛生士: 1 行 96 高・2 行 125 高・間 8・左 24 にピーチの 32 角アイコン・アイコン→文字 17・「＋」13 を右 24 */
  .page-job .jb-aj-acc { gap: 8px; }
  .page-job .jb-aj-acc .acc-btn { min-height: 96px; padding: 32px 24px; gap: 17px; line-height: 1.8; }
  .page-job .jb-aj-acc .acc-ic { width: 32px; height: 32px; padding: 6px; border-radius: 4px; }
  .page-job .jb-aj-acc .acc-btn > .icon { width: 13px; height: 13px; }

  /* TIME SCHEDULE: 見出し最終行の下 42 に点線、点線→カード 32。‹ › は 35 の丸（枠 #CEC0B5）を 11 空けて右端 W−28、
     中心は見出し最終行の字の中心 +12.5。当たり判定は 44 のまま（丸は ::before で描く） */
  .page-job .jb-sched-rule { margin: 33px 0 28px; }
  .page-job .jb-sched-nav { gap: 2px; padding-bottom: 0; margin: 0 -8.5px -15px 0; }
  .page-job .jb-sc-btn { position: relative; width: 44px; height: 44px; background: none; border: 0; }
  .page-job .jb-sc-btn::before { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-2); }
  .page-job .jb-sc-btn .icon { position: relative; width: 16px; height: 16px; }
  .page-job .jb-sc-btn .icon path { stroke-width: 2.6; }   /* 参照の « » は 6×10 の太い線 */
  /* カード: 幅 = (W−32)×0.8（440→326 / 393→289 / 344→250）、左 32・間 16。見出し 22px・時刻 15px・本文 14px/1.82 #574D45、
     写真は 240 までの 5:3 をカード下から 32 に下揃え */
  .page-job .jb-sc-card { width: calc(80vw - 25.6px); padding: 32px; }
  .page-job .jb-sc-title { font-size: 22px; line-height: 2; }
  .page-job .jb-sc-time { margin-top: 0; font-size: 15px; line-height: 1.6; }
  .page-job .jb-sc-body { margin-top: 22px; font-size: 14px; line-height: 1.82; color: var(--c-ink-soft); }
  .page-job .jb-sc-img { width: min(100%, 240px); padding-top: 32px; }

  /* INTERVIEWS: カードは画面端から 34（W−68）・間 24・padding 32、写真→引用 32・引用→氏名 34・氏名→所属 14・所属→下端 37（字の外形で） */
  .page-job .jb-iv-grid { gap: 24px; }
  .page-job .jb-iv .iv-card { margin-inline: 2px; padding: 32px 32px 31px; gap: 22px; }
  .page-job .jb-iv .iv-name { margin-top: 23px; }
  .page-job .jb-iv .iv-meta { margin-top: 5px; }
}
/* ========== 〜599 の 2 周目（2026-09-24。capture/sp-compare/recruit__{dentist,dental-hygienist,dental-staff} の 440/393/344 と
   recruit-preview/<job>/dom.html の 〜540 の CSS）。ずれの主因は一日の流れのカード高さ（原本は 3 職種・3 幅とも 489 固定、旧は中身なり 428〜490） ========== */
@media (max-width: 599px) {
  /* ABOUT JOB 総合職: 名前は 20px・字間 0（原本 20px のまま。「器具の滅菌・消毒」のインク幅 158、旧 18px で 147） */
  .page-job .jb-task-name { font-size: 20px; letter-spacing: 0; }
  /* ABOUT JOB 衛生士: アイコンは 32 のピーチ角いっぱいに描く（インク 16×22。旧 padding 6 で 10×14）。
     名前は貪欲に折る（原本「歯周基本治療（SRP・歯周管／理）」。balance だと 1 行目が短い）。「＋」は 12×12・線 2（旧 9×9・線 1） */
  .page-job .jb-aj-acc .acc-ic { padding: 0; }
  .page-job .jb-aj-acc .acc-title { text-wrap: wrap; }
  .page-job .jb-aj-acc .acc-btn > .icon { width: 18px; height: 18px; margin-right: -3px; }
  .page-job .jb-aj-acc .acc-btn > .icon path { stroke-width: 2.67; }

  /* TIME SCHEDULE カード: 高さ 489（写真はカード下から 32 に下寄せ）。見出し 22px/1.4・字間 0.06em・上下 8（2 行の送り 31。旧 44）、
     時刻は見出しの下 3（字頭 card+85）、本文 15px/1.7・字間 0.06em（1 行 16 字 @440。旧 14px/1.82 で 17 字）。本文→写真は最小 12 */
  .page-job .jb-sc-card { min-height: 489px; }
  .page-job .jb-sc-title { line-height: 1.4; letter-spacing: 0.06em; padding: 8px 0; text-wrap: wrap; }
  .page-job .jb-sc-body { font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-job .jb-sc-img { padding-top: 12px; }

  /* INTERVIEWS: 一日の流れのカード下端→英字 134（旧 142）。カードは 636 高・間 28（写真→引用 32・引用→氏名 +2）。
     カード列の左に覗いていたスマイルの縁（原本の SP には無い）は出さない */
  .page-job .section.jb-sched + .section.jb-iv { padding-top: 32px; }
  .page-job .jb-iv-grid { gap: 28px; }
  .page-job .jb-iv .iv-card { gap: 24px; }
  .page-job .jb-iv .iv-name { margin-top: 25px; }
  .page-job .jb-iv-smile { display: none; }
  /* 先輩の声→GUIDELINE の英字 +2（原本 136 / 旧 134）。2026-09-28 から間に採用の流れが入るので、先輩の声→FLOW の英字に当てる */
  .page-job .section.jb-iv + .section.wk-flow { padding-top: 42px; }
}
@media (max-width: 599px) and (hover: hover) and (pointer: fine) {
  .page-job .jb-sc-btn:hover { background: none; }
  .page-job .jb-sc-btn:hover::before { background: var(--c-peach-soft); }
}
/* 魅力の番号は Roboto 400（原本 SP・Figma 108:3242 の Roboto Regular。旧は 500 を継承） */
.page-job .jb-charm-num { font-weight: 400; }
/* ========== 〜599 の 3 周目（2026-09-26。現行プレビューの計算済みスタイルを 344/390/440 で文字ごとに突き合わせ）==========
   英字が Inter → Roboto に替わった（9/25）あとも Inter 用に詰めた字間が残っていた。原本の値（STUDIO の CSS）に戻す。
   本文の字間は body の 0.06em が px で継承されて字の大きさとずれる（14.7px 基準）ので、要素ごとに 0.06em を当て直す */
@media (max-width: 599px) {
  /* 見出し: 英字 16px/0.25em（CHARMS 幅 151）・H2 24px/0.06em（採用情報 幅 102）。一日の流れの英字だけ 14px（原本） */
  .page-job .sec-label { letter-spacing: 0.25em; }
  .page-job .sec-head.center .sec-label, .page-job .jb-about .sec-label, .page-job .jb-iv .sec-label { text-indent: 0.25em; }
  .page-job .sec-title:not(h1) { letter-spacing: 0.06em; }
  .page-job .jb-sched .sec-label { font-size: 14px; line-height: 1.7; }
  /* 左寄せの英字は原本だと字頭が 4〜6 右（GUIDELINE x36 / RECRUIT INFO x38。容器は 32） */
  .page-job .wk-guide .sec-label { padding-left: 4px; }
  .page-job .rc-info .sec-label { padding-left: 6px; }
  /* ヒーローの英字（DENTIST 等）は細字 400 */
  .page-job .jb-hero-en { font-weight: 400; }
  /* ABOUT JOB 総合職: カードの角丸 8・番号 16px（Roboto 500）を名前の縦中央に。
     名前は 1 行に収める（原本は右の余白を無視して 1 行のまま・「器具の滅菌・消毒」はカードからはみ出す）→ 右の余白を 16 にして「レセプト業務」を 344 でも 1 行に。
     それでも入らない「器具の滅菌・消毒」（344・390）は折り返す（はみ出させない） */
  .page-job .jb-task { border-radius: 8px; padding-right: 16px; }
  .page-job .jb-task-name { align-items: center; }
  .page-job .jb-task-no { font-size: 16px; line-height: 1.7; }
  /* 一日の流れ: 時刻は丸ゴシック 16px/1.4・字間 0.06em（原本。Roboto ではない） */
  .page-job .jb-sc-time { font-family: var(--f-round); font-size: 16px; line-height: 1.4; letter-spacing: 0.06em; }
  /* 先輩の声: 氏名 18px/0.06em */
  .page-job .jb-iv .iv-name { letter-spacing: 0.06em; }
  /* 開閉の見出し（衛生士のお仕事・募集要項）は 18px・字間 0（原本。旧は幅なりの 16.9〜17.1px） */
  .page-job :is(.jb-aj-acc, .wk-guide-acc) .acc-title { font-size: 18px; line-height: 1.7; letter-spacing: 0; }
  /* 衛生士の開閉: アイコン→題 16・題→「＋」16（原本。旧 17 で題の幅が 5 狭く、390 の「メンテナンス・予防処置」が 2 行に折れていた）。
     「＋」の svg は 18 角でインクが 11 なので、左右 −3 で 12 角ぶんの場所に置く */
  .page-job .jb-aj-acc .acc-btn { gap: 16px; }
  .page-job .jb-aj-acc .acc-btn > .icon { margin-inline: -3px; }
  /* 採用情報の帯: ENTRY は Roboto 400・48px・字間 0.06em（幅 161）、エントリー 18px/0.06em */
  .page-job .rc-entry .cta-en { font-size: 48px; font-weight: 400; letter-spacing: 0.06em; white-space: nowrap; }
  .page-job .rc-entry .cta-title { letter-spacing: 0.06em; }
}
/* 魅力 04 の強調（原本）: 〜599 は「診療の質」だけ、600〜 は「相談できる関係性」だけがオレンジ（content の **pc:…** / **sp:…**） */
@media (max-width: 599px) { .page-job .jb-em-pc { color: inherit; } }
@media (min-width: 600px) { .page-job .jb-em-sp { color: inherit; } }

/* ---------- 1080〜 RECRUIT INFO 帯（Figma 108:3005 → Frame 38 72:1016。clinical-training.css の .ct-rinfo・faq.css の .faq-rinfo と同じ値） ----------
   面は募集要項の下 200 の直後から。上辺は楕円 2128×752（頂が +16・画面端で +115）。見出しの行は上から 200・960 幅（320 ＋ 80 ＋ 560）を中央、白カード 120 高・間 8。
   CTA はカード列の下 160・写真帯 628×224（間 24・左右 80・題 32px）→ 24 → ENTRY 1280×320（スマイル 273 を左 120・上 36）。ENTRY の下 → フッターの口 200（.ft の margin-top 64 と足して 136） */
@media (min-width: 1080px) {
  .page-job .rc-band { margin-top: 0; padding: 200px 0 136px; background: none; border-radius: 0; isolation: isolate; }
  .page-job .rc-band::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background: linear-gradient(180deg, var(--c-hero-yellow) 0%, color-mix(in srgb, var(--c-hero-mid) 70%, var(--c-hero-yellow)) 40%, var(--c-cream) 90%);
    -webkit-mask: radial-gradient(73.889% 26.111vw at 50% 27.222vw, #000 calc(100% - 0.8px), transparent 100%) top / 100% 27.222vw no-repeat, linear-gradient(#000 0 0) 0 calc(27.222vw - 1px) / 100% 100% no-repeat;
            mask: radial-gradient(73.889% 26.111vw at 50% 27.222vw, #000 calc(100% - 0.8px), transparent 100%) top / 100% 27.222vw no-repeat, linear-gradient(#000 0 0) 0 calc(27.222vw - 1px) / 100% 100% no-repeat;
  }
  .page-job .rc-info { grid-template-columns: minmax(0, 320px) minmax(0, 560px); justify-content: center; column-gap: 80px; max-width: none; }
  .page-job .rc-info .sec-head { padding-left: 0; gap: 16px; }
  .page-job .rc-info-cards { gap: 8px; }
  .page-job .rc-info-cards .link-card { min-height: 120px; }
  .page-job .rc-ctas { margin-top: 160px; gap: 24px; }
  .page-job .rc-band .cta { padding: 40px 80px; }
  .page-job .rc-cta { min-height: 224px; }
  .page-job .rc-cta .cta-title { font-size: 32px; }
  .page-job .rc-entry { margin-top: 24px; min-height: 320px; }
  .page-job .rc-entry .smile.cta-smile { width: 273px; left: 120px; top: 36px; }
}

/* ======================================================================
   演出（2026-09-26。仕様 docs/MOTION.md。属性は templates/recruit/job.mjs）。隠す・動かすのは html.mo の下だけ。
   動かすのは opacity / translate / scale / rotate / clip-path だけ（transform は hover.css と既存の配置）。横にずらす初期状態は使わない
   ====================================================================== */
/* ヒーロー（見せ場 1・読み込み時）: 写真の箱が 0.94 → 1 でふくらむように出る（縮む側だけなので横幅は増えない）。
   〜767 の角丸写真は枠（overflow:clip）の中で 1.08 → 1 をゆっくり（原本 STUDIO のヒーローと同じ型）。
   歯型カード spin（+380）→ タグ fade・職種名 rise・英字 letters（カードの中で順に）→ スマイルが描かれる（+1000） */
html.mo .page-job .jb-hero-img[data-mo].is-in { animation: jb-hero-in 1.3s var(--mo-ease) var(--mo-d, 0ms) backwards; }
html.mo .page-job .jb-hero-img-sp[data-mo].is-in img { animation: jb-hero-zoom 5s cubic-bezier(.25, .6, .3, 1) var(--mo-d, 0ms) backwards; }
@keyframes jb-hero-in { from { opacity: 0; scale: .94; } }
@keyframes jb-hero-zoom { from { scale: 1.08; } }
html.mo .page-job .jb-hero-card[data-mo="spin"].is-in { animation-duration: 1s; }

/* CHARMS: 写真は img そのものを下から開く。1080〜 は枠（.jb-charm-img、overflow:clip）の中で 1.1 → 1 も重ねる */
@media (min-width: 1080px) {
  html.mo .page-job .jb-charm-img > img[data-mo="unveil"].is-in {
    animation: mo-unveil calc(var(--mo-dur) * 1.3) var(--mo-ease) var(--mo-d, 0ms) backwards, jb-img-zoom calc(var(--mo-dur) * 2) var(--mo-ease) var(--mo-d, 0ms) backwards;
  }
}
@keyframes jb-img-zoom { from { scale: 1.1; } }

/* ABOUT JOB 衛生士（開閉式）: 行のカードが順に up した後、左の四角いアイコンが pop（カードの遅れ --mo-d を受け継ぐ）。
   開くたびに中身: 写真が下から開き → 箇条書きが上から順に小さく上がり → 締めの 1 文が出る（hidden が外れるたびに頭から再生） */
html.mo .jb-aj-acc > .acc[data-mo].is-in .acc-ic { animation: mo-pop calc(var(--mo-dur) * .8) var(--mo-ease-pop) calc(var(--mo-d, 0ms) + 160ms) backwards; }
/* 開閉の中の写真は動かさない（2026-09-28 ユーザー「アコーディオンの中の画像にはアニメーションいらん」）。箇条書きと締めの文だけ */
/* 1 件目は最初から開いている（job.mjs）ので、カードが画面に入って is-in が付いてから動かす（画面外で読み込み時に動き終わらせない）。
   後から開く項目はカードがもう is-in なので、今までどおり hidden が外れた時に動く */
html.mo .jb-aj-acc > .acc.is-in > .acc-panel:not([hidden]) .jb-aj-list > li { --mo-dist: 12px; animation: mo-up .5s var(--mo-ease) backwards; animation-delay: calc(140ms + var(--jb-i, 0) * 55ms); }
html.mo .jb-aj-acc > .acc.is-in > .acc-panel:not([hidden]) .jb-aj-body { animation: mo-fade .6s ease-out .5s backwards; }
.jb-aj-list > li:nth-child(2) { --jb-i: 1; } .jb-aj-list > li:nth-child(3) { --jb-i: 2; } .jb-aj-list > li:nth-child(4) { --jb-i: 3; }
.jb-aj-list > li:nth-child(5) { --jb-i: 4; } .jb-aj-list > li:nth-child(n+6) { --jb-i: 5; }

/* TIME SCHEDULE（見せ場 2）: カードの順番の間隔を 2.5 倍（80ms → 200ms）。時刻・写真の遅れはテンプレートが番号 × 120ms を足して合わせてある */
html.mo .jb-sc-card[data-mo].is-in { animation-delay: calc(var(--mo-d, 0ms) * 2.5); animation-duration: 1s; }
html.mo .jb-sc-time[data-mo="letters"].is-in .mo-ch { animation-duration: .5s; }