/* 採用サイト: /recruit/work（仕事を知る）・/recruit/<job>（職種ページ）・/recruit/info（採用情報）が読む CSS。templates/recruit/{work,job,info}.mjs に対応。
   2026-09-28 構成替え（ユーザー指示）: 仕事を知るは「POSITIONS 職種一覧（トップ /recruit の WORK と同じ面とカード）＋ ALL JOBS 全職種共通のお仕事（Figma 385:5495）」だけ。
   求める人物像・理事長ご挨拶は /recruit/info へ移った（見た目は info.css・about.css）ので、その CSS はここから消した。
   ここに残る共有の土台: 左見出し＋右本体（.wk-side）・採用の流れ（.wk-flow）・募集要項（.wk-guide）・下の帯（.rc-band）・職種ページ（jb-）。
   値は docs/design-recruit.md §3-5 / §3-6 と capture/recruit-preview/{work,dentist,dental-hygienist,dental-staff}/slices の実測、1080〜 は Figma。
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜。
   規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止・色は tokens.css の変数（Figma の色札 2 色だけ .wk-alljobs の中で定義）。
   接頭辞: wk-（work と共有部品）/ jb-（職種ページ）/ rc-（採用情報帯） */

/* ---------- 容器: 参照（STUDIO）は 1280 を左右 80 の内側に置く（1920 で 320〜1600、1440 で 80〜1360、1280 で 80〜1200）。tokens の 1200 を main の中だけ上書き ---------- */
@media (min-width: 1080px) { .page-work .main, .page-job .main { --container: 1280px; } }
@media (min-width: 1280px) { .page-work .main, .page-job .main { --gutter: 80px; } }

/* ---------- 共通: 左見出し＋右本体（PC は 240px ＋ 1fr、768〜1079 は 1 列） ---------- */
.wk-side { display: grid; gap: 32px; }
.wk-side .sec-head { margin-bottom: 0; }
@media (min-width: 1080px) {
  .wk-side { grid-template-columns: 240px minmax(0, 1fr); column-gap: 80px; align-items: start; }
}

/* ---------- POSITIONS 職種一覧（/recruit/work。2026-09-28 ユーザー指示「職種一覧はトップと同じデザイン」） ----------
   面（.wk-panel）はトップの WORK（recruit/home.css の .rh-work-wrap／.rh-work。Figma 245:5118）と同じ値。カード 3 枚と線画の飾りは共通部品（components.css「職種一覧」.job-grid）。
   トップと違うのは「もっと見る」が無いことと、面の上下の間隔（このページの頭にあるので上は H1 との間、下は ALL JOBS との間）。
   飾りとスマイルは面の外へはみ出すので、左右だけ節（.wk-positions）で切る（上下は出す） */
.page-work .wk-positions { padding: 40px 16px 0; overflow-x: clip; overflow-y: visible; }
.wk-panel { 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); }
.wk-panel .sec-head { margin-bottom: 72px; }
.wk-panel .smile-tl { left: 4%; top: -16px; width: 110px; }
.wk-panel .smile-br { right: 4%; bottom: 16px; width: 90px; }
@media (min-width: 600px) { .page-work .wk-positions { padding-inline: var(--gutter); } .wk-panel { padding: 72px 32px 56px; } }
@media (min-width: 768px) {
  .page-work .wk-positions { padding-top: 64px; }   /* 左上のスマイルが面の上 40 はみ出す分 */
  .wk-panel { padding: 88px 32px 64px; }
  .wk-panel .smile-tl { left: 5%; top: -40px; width: 160px; }
  .wk-panel .smile-br { right: 5%; bottom: 24px; width: 120px; }
}
/* 1080〜（Figma 245:5118）: 面は左右 16（1440 で 1408）・角丸 40・余白 上下 96 左右 80、60 角の方眼。見出し（中央）→ 120 → カード 400×560 × 3。
   スマイル（白）: 左上 273 は面の左 14%・上 −67、右下 190 は面の左 74.65%・下 −32。面の上はスマイルが H1 の帯（〜400）にかからない 80 */
@media (min-width: 1080px) {
  .page-work .wk-positions { padding: 80px 16px 0; }
  .wk-panel { padding: 96px 80px; border-radius: 40px; background-position: 30px 30px; }
  .wk-panel .sec-head { gap: 16px; margin-bottom: 120px; }   /* 英字 → 16 → 題（トップは .page-recruit-home .main .sec-head の 16） */
  .wk-panel .smile-tl { left: 14%; top: -67px; width: 273px; }
  .wk-panel .smile-br { left: 74.65%; right: auto; bottom: -32px; width: 190px; }
}
/* 〜599（トップ 〜599 と同じ）: 面は左右 8・角丸 40・内側 80/32。地の方眼は原本 ≤540 の画像（577c14fd）を面の幅で敷く */
@media (max-width: 599px) {
  .page-work .wk-positions { padding: 40px 8px 0; }
  .wk-panel { padding: 80px 32px; border-radius: 40px; background-image: url("/assets/img/577c14fd-800.40e7ad0dbf.webp"); background-size: contain; background-repeat: repeat; background-position: left center; }
  .wk-panel .sec-head { margin-bottom: 96px; }
  .wk-panel .smile-tl { left: 29px; top: -23px; width: 100px; }
  .wk-panel .smile-br { right: 19px; bottom: -21px; width: 80px; }
}

/* ---------- ALL JOBS 全職種共通のお仕事（Figma 385:5495。templates/recruit/work.mjs の allJobsSection） ----------
   1080〜（Figma）: 見出し（中央。英字→16→題）→ 80 → 白カード 960 幅 × 3（間 16・角丸 16・内 40）。カードは 色札 120 角｜40｜本体 720。
     色札: 角丸 16・白字 24px/1.7・字間 0.06em。診療前 #E5BB00 → 診療中 #E58200 → 診療後 #E56300（主色）。
     本体: 写真 720×429（角丸 16）→ 40 → 項目（左に 2px の橙の縦線＋8、題 20px（字の高さ 20）→ 16 → 本文 16px/1.7 字間 0.06em #271200）。
     項目の間は 下 40 ＋ 点線 #C5B5A8 ＋ 40。写真の無いカード（診療中）は本体を色札の縦中央に置く。最後のカードの下 → 200 → 下の帯。
   768〜1079: 同じ横並びを縮める（色札 96 角・20px、間 32・内 32）。
   〜767: 縦 1 列（色札は横長の札にして上に → 写真 → 項目）。本文 14px/1.9 */
.wk-alljobs { --wk-tag-1: #E5BB00; --wk-tag-2: #E58200; --wk-tag-3: var(--c-orange); }   /* Figma 385:5500・385:5694・385:5723 の色札（tokens に無い 2 色） */
.page-work .wk-alljobs.section { padding-top: 120px; }
.wk-alljobs .sec-head { margin-bottom: 40px; }
.wk-phases { display: grid; gap: 16px; max-width: 960px; margin-inline: auto; }
.wk-phase { display: grid; gap: 20px; align-items: start; padding: 24px 20px 32px; background: var(--c-white); border-radius: var(--r-m); }
.wk-phase-1 { --wk-tag: var(--wk-tag-1); }
.wk-phase-2 { --wk-tag: var(--wk-tag-2); }
.wk-phase-3 { --wk-tag: var(--wk-tag-3); }
.wk-phase-tag { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 20px; border-radius: 12px; background: var(--wk-tag, var(--c-orange)); color: var(--c-white); font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; }
.wk-phase-body { display: grid; gap: 24px; min-width: 0; }
.wk-phase-ph { overflow: clip; border-radius: var(--r-m); aspect-ratio: 720 / 429; background: var(--c-peach-soft); }
.wk-phase-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-tasks { display: grid; gap: 24px; }
.wk-task { display: grid; gap: 12px; }
.wk-task:not(:last-child) { padding-bottom: 24px; border-bottom: var(--dash); }
.wk-task-title { padding-left: 8px; border-left: 2px solid var(--c-orange); font-size: 18px; line-height: 1.4; letter-spacing: 0.06em; color: var(--c-ink-deep); }
.wk-task-text { font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; color: var(--c-ink-deep); }
@media (min-width: 600px) {
  .wk-phase { padding: 32px 32px 40px; gap: 24px; }
  .wk-task-text { font-size: 15px; }
}
@media (min-width: 768px) {
  .page-work .wk-alljobs.section { padding-top: 140px; }
  .wk-alljobs .sec-head { margin-bottom: 56px; }
  .wk-phase { grid-template-columns: 96px minmax(0, 1fr); column-gap: 32px; padding: 32px; }
  .wk-phase.no-photo { align-items: center; }
  .wk-phase-tag { width: 96px; height: 96px; padding: 12px; border-radius: var(--r-m); font-size: 20px; }
  .wk-phase-body, .wk-tasks { gap: 32px; }
  .wk-task { gap: 14px; }
  .wk-task:not(:last-child) { padding-bottom: 32px; }
  .wk-task-title { font-size: 19px; line-height: 1.2; }
  .wk-task-text { font-size: 16px; line-height: 1.7; }
}
@media (min-width: 1080px) {
  .page-work .wk-alljobs.section { padding: 160px 0 200px; }   /* 面の下 → 160 → 英字（トップの面 → INTERVIEWS と同じ）。最後のカード → 200 → 帯 */
  .wk-alljobs .sec-head { gap: 16px; margin-bottom: 80px; }
  .wk-phase { grid-template-columns: 120px minmax(0, 720px); column-gap: 40px; padding: 40px; }
  .wk-phase-tag { width: 120px; height: 120px; padding: 16px; font-size: 24px; }
  .wk-phase-body, .wk-tasks { gap: 40px; }
  .wk-task { gap: 16px; }
  .wk-task:not(:last-child) { padding-bottom: 40px; }
  .wk-task-title { font-size: 20px; line-height: 1; padding-block: 0; }
}

/* ---------- FLOW 採用の流れ ---------- */
/* 〜599: 1 列（矢印は ↓）/ 600〜1079: 2 列 / 1080〜: 3 列。矢印はカードの外側に絶対配置し、行末では出さない */
.wk-flow-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.wk-flow-step { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px 24px 32px; background: var(--c-peach-soft); border-radius: var(--r-m); }
/* 参照: アイコン丸 344=64 / pc1280=84 */
.wk-flow-ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-white); color: var(--c-brown); margin-bottom: 8px; }
.wk-flow-ic img, .wk-flow-ic svg { width: 36px; height: 36px; object-fit: contain; }
.wk-flow-title { display: flex; align-items: baseline; gap: 12px; font-size: clamp(20px, 1.25rem + 0.3vw, 24px); line-height: 1.5; }
.wk-flow-no { font-family: var(--f-en); font-size: 13px; letter-spacing: 0.25em; color: var(--c-orange); flex: none; }
.wk-flow-body { font-size: 14px; line-height: 2; color: var(--c-ink-deep); }
/* 本文中のリンク（原文は既定の青）。オレンジ下線にし、当たり判定は上下 padding で 44px 相当 */
.wk-flow-link { display: inline-block; color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; padding: 11px 0; margin: -11px 0; }   /* 当たり判定 44（行の高さ 23.8＋上下 11）。負マージンで見た目の行送りは変えない */
.wk-flow-arrow { position: absolute; left: 50%; bottom: -56px; width: 56px; height: 56px; margin-left: -28px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-line-2); transform: rotate(90deg); }
.wk-flow-arrow .icon { width: 28px; height: 28px; }
@media (min-width: 600px) {
  .wk-flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .wk-flow-arrow { left: auto; right: -48px; bottom: auto; top: 50%; margin: -24px 0 0; transform: none; }
  .wk-flow-step:nth-child(2n) .wk-flow-arrow { display: none; }
  .wk-flow-step { padding: 40px 28px; }
  .wk-flow-ic { width: 80px; height: 80px; }
  .wk-flow-ic img, .wk-flow-ic svg { width: 40px; height: 40px; }
}
@media (min-width: 1080px) {
  .wk-flow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 70px; }
  .wk-flow-arrow { right: -70px; width: 70px; margin: -24px 0 0; }
  .wk-flow-step:nth-child(2n) .wk-flow-arrow { display: inline-flex; }
  .wk-flow-step:nth-child(3n) .wk-flow-arrow { display: none; }
  .wk-flow-step { padding: 40px 40px 48px; min-height: 380px; }
  .wk-flow-ic { width: 84px; height: 84px; }
}

/* ---------- GUIDELINE 募集要項 ---------- */
.wk-guide-acc .acc-btn { font-size: clamp(16px, 1rem + 0.25vw, 20px); min-height: 80px; padding: 16px 24px 16px 28px; }   /* 参照: 344=80 高・16px、pc1280=120 高・20px */
.wk-guide-acc .acc-panel { padding-top: 0; }
.wk-guide-dl .dl-row { gap: 8px; padding: 20px 0 24px; }
.wk-guide-dl .dl-row:last-child { border-bottom: 0; }
.wk-guide-dl dt { font-size: clamp(16px, 1rem + 0.25vw, 20px); line-height: 1.7; }
.wk-guide-dl dd { font-size: var(--fs-body); line-height: 1.9; }
@media (min-width: 768px) {
  .wk-guide-acc .acc-btn { padding: 24px 32px; min-height: 96px; }
  .wk-guide-dl .dl-row { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}
/* 1080〜: 参照 1920 は見出し列 325（開閉カードは容器左 +325 から右端まで 955）、カード 120 高・間 24・「＋」28px */
@media (min-width: 1080px) {
  .wk-guide .wk-side { grid-template-columns: 325px minmax(0, 1fr); column-gap: 0; }
  .wk-guide .wk-side-body { max-width: none; }
  .wk-guide-acc { gap: 24px; }
  .wk-guide-acc .acc-btn { padding: 40px; min-height: 120px; font-size: 22px; }
  .wk-guide-acc .acc-btn > .icon { width: 28px; height: 28px; }
  .wk-guide-acc .acc-panel { padding: 0 40px 40px; }
}

/* ---------- RECRUIT INFO 採用情報の帯（黄→クリーム。上辺が楕円に膨らむ） ---------- */
.rc-band { position: relative; margin-top: 40px; padding: clamp(64px, 8vw, 140px) 0 clamp(48px, 6vw, 96px); background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 55%, var(--c-cream) 100%); border-radius: 50% 50% 0 0 / 60px; }
.rc-info { display: grid; gap: 24px; align-items: start; }   /* start にしないと .sec-head の格子が列の高さまで伸びて見出しが縦中央に落ちる */
.rc-info .sec-head { margin-bottom: 0; }
.rc-info-cards { display: grid; gap: 12px; }
.rc-ctas { display: grid; gap: 10px; margin-top: 80px; }   /* 参照 344: CTA 間 10・カード→CTA 80 */
.rc-cta { min-height: 160px; }
.rc-cta .cta-title { font-size: clamp(20px, 1.25rem + 0.5vw, 32px); }
.rc-entry { margin-top: 10px; min-height: 200px; }
.rc-entry .cta-title { font-size: clamp(16px, 1rem + 0.4vw, 24px); }
.rc-entry .cta-smile { width: 200px; left: 24px; top: -10px; }
@media (min-width: 600px) { .rc-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .rc-band { border-radius: 50% 50% 0 0 / 90px; } }
@media (min-width: 768px) { .rc-info { max-width: 600px; margin-inline: auto; } .rc-info-cards { gap: 16px; } .rc-cta { min-height: 200px; } .rc-entry { min-height: 260px; margin-top: 24px; } .rc-entry .cta-smile { width: 240px; left: 40px; top: 0; } .rc-band { margin-top: 64px; } }
/* 1080〜: 参照 pc1280 は帯の上辺→見出し 200、見出し 165〜 / カード 560〜1120（幅 560）、カード→CTA 160、CTA の左余白 80、ENTRY 320 高＋大きな白スマイル */
@media (min-width: 1080px) {
  .rc-band { border-radius: 50% 50% 0 0 / 120px; margin-top: 96px; padding-top: 180px; }
  .rc-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 40px; max-width: 976px; }
  .rc-info .sec-head { padding-left: 16px; }
  .rc-ctas { margin-top: 160px; }
  .rc-cta { min-height: 224px; padding-inline: 80px; }
  .rc-entry { min-height: 320px; padding-inline: 80px; }
  .rc-entry .cta-smile { width: 250px; left: 150px; top: 36px; }   /* 参照 1920: 帯の左 150・上 37 に 250 幅 */
}

/* ---------- 職種ページ: ヒーロー ---------- */
/* 写真は有機ブロブ（透過 WebP・2040×720）。〜767 は角丸 32 の矩形に切り、歯型カードを写真の下辺に重ねる */
.jb-hero { padding-top: 16px; }
.jb-hero-fig { position: relative; padding-bottom: 96px; }
.jb-hero-img { border-radius: var(--r-xl); overflow: clip; aspect-ratio: 4 / 3; background: var(--c-peach-soft); }
.jb-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.12); }
.jb-hero-img-pc { display: none; }
.jb-hero-img-sp { display: block; }
.jb-hero-img-sp img { transform: none; }
.jb-hero-card { position: absolute; left: 50%; bottom: 0; width: 190px; margin-left: -95px; aspect-ratio: 305 / 293; display: grid; place-items: center; z-index: 2; }
.jb-hero-tooth { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-white); }
.jb-hero-card-in { position: relative; display: grid; justify-items: center; gap: 6px; padding-bottom: 20px; text-align: center; }
.jb-hero-tag { font-size: 12px; letter-spacing: 0.06em; color: var(--c-ink-deep); background: var(--c-peach-soft); border-left: 3px solid var(--c-orange); padding: 2px 10px; line-height: 1.6; }
.jb-hero-title { font-size: 24px; color: var(--c-orange); line-height: 1.4; }
.jb-hero-en { font-family: var(--f-en); font-size: 11px; letter-spacing: 0.25em; color: var(--c-orange); text-indent: 0.25em; }
.jb-hero-smile { right: 4%; bottom: 72px; width: 26%; z-index: 1; }
.jb-hero-smile .icon { filter: none; }
@media (min-width: 600px) {
  .jb-hero-img { aspect-ratio: 16 / 9; }
  .jb-hero-card { width: 220px; margin-left: -110px; }
  .jb-hero-title { font-size: 28px; }
}
@media (min-width: 768px) {
  .jb-hero { padding-top: 24px; }
  .jb-hero-fig { padding-bottom: 72px; }
  .jb-hero-img { border-radius: 0; aspect-ratio: 2040 / 720; background: none; overflow: visible; }
  .jb-hero-img img { object-fit: contain; object-position: center; transform: none; height: auto; }
  .jb-hero-img-pc { display: block; }
  .jb-hero-img-sp { display: none; }
  .jb-hero-card { left: 6%; margin-left: 0; width: clamp(220px, 28vw, 300px); bottom: 0; }
  .jb-hero-title { font-size: clamp(28px, 2rem + 1vw, 40px); }
  .jb-hero-tag { font-size: 14px; padding: 4px 14px; }
  .jb-hero-en { font-size: 12px; }
  .jb-hero-smile { right: 6%; bottom: 40px; width: 20%; }
}
@media (min-width: 1080px) { .jb-hero-fig { padding-bottom: 40px; } .jb-hero-card { left: 60px; width: 300px; bottom: -20px; } .jb-hero-smile { right: 60px; bottom: 20px; width: 220px; } }
/* 衛生士だけ PC 用写真が 1200×423（ブロブなし）。比率は画像の width/height 属性が持つので aspect-ratio を上書き */
@media (min-width: 768px) { .page-job-dental-hygienist .jb-hero-img { aspect-ratio: auto; } }

/* ---------- 職種ページ: CHARMS 魅力ポイント（白カード） ---------- */
.jb-charm-list { display: grid; gap: 24px; }
.jb-charm { display: grid; gap: 20px; padding: 32px 24px; background: var(--c-white); border-radius: var(--r-m); }
.jb-charm-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.jb-charm-num { font-family: var(--f-en); font-size: 40px; line-height: 1; letter-spacing: 0.08em; color: var(--c-peach-soft); }
.jb-charm-title { font-size: clamp(18px, 1.1rem + 0.4vw, 24px); line-height: 1.7; padding-left: 16px; border-left: 1px dashed var(--c-line-2); }
.jb-charm-title strong { color: var(--c-orange); }
.jb-charm-body { font-size: var(--fs-body); line-height: 2; color: var(--c-ink-deep); }
.jb-charm-img { position: relative; }
.jb-charm-img img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-m); }
.jb-charm-smile { right: -4%; bottom: -10%; width: 34%; }
@media (min-width: 768px) {
  .jb-charm-list { gap: 32px; }
  .jb-charm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; padding: 48px 40px; align-items: start; }
  .jb-charm-head { grid-column: 1; }
  .jb-charm-body { grid-column: 1; }
  .jb-charm-img { grid-column: 2; grid-row: 1 / 3; }
  .jb-charm-num { font-size: 56px; }
}
@media (min-width: 1080px) { .jb-charm { column-gap: 64px; padding: 64px 56px; } .jb-charm-num { font-size: 64px; } .jb-charm-img img { aspect-ratio: 520 / 340; } }

/* ---------- 職種ページ: ABOUT JOB ---------- */
/* 衛生士: 開閉式（左に四角いピーチのアイコン欄 64px） */
.jb-aj-acc .acc-ic { width: 56px; height: 56px; padding: 10px; }
.jb-aj-acc .acc-btn { font-size: clamp(16px, 1rem + 0.25vw, 20px); }
.jb-aj-list { display: grid; gap: 4px; font-size: var(--fs-body); line-height: 1.9; color: var(--c-ink-deep); }
.jb-aj-body { margin-top: 16px; color: var(--c-ink-soft); font-size: var(--fs-body); }
@media (min-width: 768px) { .jb-aj-acc .acc-ic { width: 64px; height: 64px; padding: 12px; } }
/* 総合職: 白カード格子（〜767: 2 列 / 768〜: 3 列）。番号は名前の前に並べる */
.jb-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jb-task { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 20px 8px; background: var(--c-white); border-radius: var(--r-m); text-align: center; }
.jb-task-ic { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-brown); }
.jb-task-ic img, .jb-task-ic svg { width: 100%; height: 100%; object-fit: contain; }
.jb-task-name { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--f-round); font-size: 14px; letter-spacing: 0.04em; color: var(--c-ink-deep); }
.jb-task-no { font-family: var(--f-en); font-size: 12px; color: var(--c-orange); }
@media (min-width: 600px) { .jb-tasks { gap: 16px; } .jb-task { min-height: 176px; } .jb-task-ic { width: 64px; height: 64px; } .jb-task-name { font-size: 15px; } }
@media (min-width: 768px) { .jb-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .jb-task { min-height: 190px; } .jb-task-ic { width: 80px; height: 80px; } .jb-task-name { font-size: 16px; } }

/* ---------- 職種ページ: TIME SCHEDULE 一日の流れ ---------- */
/* 見出しは他セクションと同じコンテナ幅。スクロール箱だけ左右の gutter ぶん外へ出す（justify は flex-start ＋ safe center） */
.jb-sched-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.jb-sched-head .sec-head { margin-bottom: 0; min-width: 0; }
.jb-sched-nav { display: flex; gap: 8px; flex: none; padding-bottom: 8px; }
.jb-sc-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-orange); display: inline-flex; align-items: center; justify-content: center; }
.jb-sc-btn .icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .jb-sc-btn:hover { background: var(--c-peach-soft); } }
.jb-sched-rule { margin: 20px 0 24px; }
.jb-sc-track { margin-inline: calc(var(--gutter) * -1); padding-block: 4px 8px; gap: 16px; }
.jb-sc-card { display: grid; gap: 8px; align-content: start; width: min(300px, 82vw); padding: 24px 24px 28px; background: var(--c-white); border-radius: var(--r-m); }
.jb-sc-title { font-size: clamp(18px, 1.1rem + 0.3vw, 20px); color: var(--c-orange); line-height: 1.6; }
.jb-sc-time { font-family: var(--f-en); font-size: 13px; letter-spacing: 0.06em; color: var(--c-orange); }
.jb-sc-body { font-size: 14px; line-height: 2; color: var(--c-ink-deep); margin-top: 8px; }
.jb-sc-img { margin-top: auto; padding-top: 24px; }
.jb-sc-img img { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
@media (min-width: 768px) { .jb-sc-card { width: 342px; padding: 32px 32px 32px; } .jb-sc-track { gap: 20px; } .jb-sched-rule { margin: 24px 0 32px; } }
@media (min-width: 1080px) { .jb-sched-nav { padding-bottom: 12px; } }

/* ---------- 職種ページ: INTERVIEWS 先輩スタッフの声 ---------- */
.jb-iv-grid { display: grid; gap: 16px; }
.jb-iv-smile { left: -6%; bottom: 0; }
@media (min-width: 768px) { .jb-iv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1080px) { .jb-iv-grid { gap: 32px; } .jb-iv-smile { left: 0; bottom: 10%; width: 280px; } }

/* ---------- 841×701（展開した折りたたみ・横）: 最初の画面で本文が見えるよう上部を詰める ---------- */
@media (min-width: 768px) and (max-width: 1079px) {
  .jb-charms .sec-head { margin-bottom: 32px; }
  .jb-hero-fig { padding-bottom: 64px; }
}

/* ========== 〜599: SP の細部を参照に合わせる（2026-09-24。capture/sp-compare/recruit__{work,dentist,dental-hygienist,dental-staff} の 440/393/344 を画素で実測、
   値の裏は capture/recruit-preview/work/dom.html の STUDIO 〜540 の CSS）。work と職種ページで共通 ========== */
@media (max-width: 599px) {
  /* 本文の左右は 32（参照のセクション padding 0 32）。見出し: 英字 16px/0.2em（参照 Roboto 16px/0.25em の字幅に Inter で寄せる）、
     H2 24px/1.7（参照 3 幅とも 24px。旧 fs-h2 は 27px 前後）、英字→H2 は字の中心で 50（gap 15）、H2→本文は字の下端から 50（--head-gap 40） */
  .page-work .main, .page-job .main { --gutter: 32px; --head-gap: 40px; }
  .page-work .sec-label, .page-job .sec-label { font-size: 16px; letter-spacing: 0.2em; }
  .page-work .sec-head.center .sec-label, .page-job .sec-head.center .sec-label { text-indent: 0.2em; }
  .page-work .sec-title:not(h1), .page-job .sec-title:not(h1) { font-size: 24px; line-height: 1.7; letter-spacing: 0.04em; }
  .page-work .sec-head, .page-job .sec-head { gap: 15px; }
  .page-job .wk-side { gap: 40px; }
  /* セクション間（職種ページ）: 前の中身の下端→次の英字の上端 125〜134（旧 89〜98） */
  .page-job .section + .section { padding-top: 40px; }

  /* ページ見出し（work）: 英字の上端 y127・H1 32px（参照 3 幅とも 32px。旧 39px）。面（POSITIONS）の上 40 は上の POSITIONS の節 */
  .page-work .page-head { padding: 50px 0 0; }
  .page-work .page-head .sec-title { font-size: 32px; line-height: 1.7; }

  /* GUIDELINE（職種ページ）: 開閉カードは 32〜W−32、文字は左 32（旧 28）。「＋」は右 32 のまま */
  .page-job .wk-guide-acc .acc-btn { padding: 16px 32px; }

  /* RECRUIT INFO 帯: 上辺は画面より広い楕円（横半径 0.682W・縦半径 0.2045W。端の落ち込み 440→29 / 344→23）。
     色は上端 #FFF0C2 → 90px で #FEE2C0 → 390px でクリーム（帯全体の % ではなく px で決まっている）。前のセクションとの間 126 */
  .rc-band { margin-top: 46px; padding-top: 115px; background: none; border-radius: 0; isolation: isolate; overflow: clip; }   /* 楕円は画面の外まで広いので帯で切る */
  .rc-band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -18.2%; right: -18.2%;
    background: linear-gradient(180deg, var(--c-hero-yellow) 0, color-mix(in srgb, var(--c-hero-mid) 60%, var(--c-hero-yellow)) 90px, color-mix(in srgb, var(--c-hero-mid) 35%, var(--c-cream)) 200px, var(--c-cream) 390px);
    border-radius: 50% 50% 0 0 / 20.45vw; }
  /* 見出し→白カード 52（字の下端から）、カード 120 高（2px のクリーム枠込み）・送り 128、文字は左 34・丸矢印 24 を右 34 */
  .rc-info { gap: 40px; }
  .rc-info-cards { gap: 8px; }
  .rc-band .link-card { min-height: 120px; padding: 0 30px; border: 2px solid var(--c-cream); }
  .rc-band .link-card .btn-ring { width: 24px; height: 24px; }
  .rc-band .link-card .btn-ring .icon { width: 14px; height: 14px; }
  /* 写真 CTA 160 高・ENTRY 200 高・間 8、カード→CTA 82。文字は左 32・20px、丸 40 を右 32。ENTRY は英字 48px の下に「エントリー」18px（間 4） */
  .rc-ctas { gap: 8px; margin-top: 82px; }
  .rc-band .cta { padding: 24px 32px; }
  .rc-cta .cta-title { font-size: 20px; }
  .rc-entry { margin-top: 8px; }
  .rc-entry .cta-text { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rc-entry .cta-en { font-size: 48px; line-height: 1; }
  .rc-entry .cta-title { font-size: 18px; line-height: 1.7; }
  .rc-entry .cta-smile { width: 150px; left: 58px; top: 18px; }
}
/* ========== /recruit/work 〜599 の 3 周目（2026-09-26。原本プレビューを 344/390/440 で開き、文字の塊の位置と computed style を突き合わせた差）。
   職種ページ（.page-job）は別の班が見ているので .page-work だけ ========== */
@media (max-width: 599px) {
  /* 見出し: 英字は Roboto なので原本どおり 0.25em（Inter の頃の 0.2em を戻す）、H2 は 0.06em（原本 24px/1.44px） */
  .page-work .sec-label { letter-spacing: 0.25em; }
  .page-work .sec-head.center .sec-label { text-indent: 0.25em; }
  .page-work .sec-title:not(h1) { letter-spacing: 0.06em; }
  /* RECRUIT INFO の帯の色: 原本は頂から 0.3W でいちばん濃いピーチ、0.52W で半分、0.9W でクリーム（344/393/440 の画素。旧は 90px で頂点・早く薄れていた） */
  .page-work .rc-band::before { background: linear-gradient(180deg, var(--c-hero-yellow) 0, color-mix(in srgb, var(--c-hero-mid) 80%, var(--c-hero-yellow)) 30vw, color-mix(in srgb, var(--c-hero-mid) 50%, var(--c-cream)) 52vw, var(--c-cream) 90vw); }
  /* 写真 CTA・ENTRY: 題の字間 0.06em、ENTRY は Roboto 400・字間 0.06em（原本の computed） */
  .page-work .rc-band .cta-title { letter-spacing: 0.06em; }
  /* ENTRY の白スマイル: 160 幅を帯の左 40・上 19（原本 390 の画素。data と同じ値。旧 150 幅・左 58 で小さく右に寄っていた） */
  .page-work .rc-entry .smile.cta-smile { width: 160px; left: 40px; top: 19px; }
  .page-work .rc-entry .cta-en { font-weight: 400; letter-spacing: 0.06em; font-size: 47px; white-space: nowrap; }   /* 48px だと 344 で「ENTR / Y」に折れる（data と同じ 47px） */
}
/* 募集要項の「＋」（職種ページ）: 12×12・線 2 を右 32 に（原本 440。旧 16×16） */
@media (max-width: 599px) {
  .page-job .wk-guide-acc .acc-btn > .icon { width: 18px; height: 18px; margin-right: -3px; }
  .page-job .wk-guide-acc .acc-btn > .icon path { stroke-width: 2.67; }
}

/* ======================================================================
   /recruit/work の 1080〜 を Figma「仕事を知る」105:1867（1440 幅）に合わせる（2026-09-25、2026-09-28 の構成替えで POSITIONS・ALL JOBS 以外を外した）。職種ページ（.page-job）は巻き込まない
   ヒーロー 111:3555（1440×400）: ラベル字枠 y189 → 8 → H1 40px/1.7。400 で下の節（POSITIONS の面は上の節で）。
   RECRUIT INFO（Frame 167 → 72:1016）: data.css と同じ値。
   ====================================================================== */
@media (min-width: 1080px) {
  body.page-work { background-size: 100% 400px; }
  .page-work .page-head { min-height: 292px; padding: 81px 0 0; }   /* ヘッダー 108 ＋ 81 ＝ ラベル y189、下端 400 */
  .page-work .page-head .sec-head { gap: 8px; }

  /* RECRUIT INFO（上辺は 2128×752 の楕円・頂 y16。見出し列 320｜80｜カード 560・間 8 → 160 → 写真帯 → ENTRY → 200 → フッター） */
  .page-work .rc-band { isolation: isolate; overflow: clip; margin-top: 0; padding: 200px 0 137px; background: none; border-radius: 0; }
  .page-work .rc-band::before { content: ""; position: absolute; z-index: -1; top: 1.11vw; bottom: 0; left: calc(50% - 73.9vw); width: 147.8vw; border-radius: 50% 50% 0 0 / 26.1vw 26.1vw 0 0; background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 55%, var(--c-cream) 100%); }
  .page-work .rc-info { grid-template-columns: minmax(0, 320px) minmax(0, 560px); justify-content: center; column-gap: 80px; max-width: none; }
  .page-work .rc-info .sec-head { gap: 16px; padding-left: 0; }
  .page-work .rc-info-cards { gap: 8px; }
  .page-work .rc-ctas { margin-top: 160px; }
}
@media (min-width: 1080px) {
  .page-work .rc-entry .cta-smile { left: 120px; top: 36px; width: 273px; opacity: 0.1; }   /* ENTRY の白スマイル 273×247（Figma 139:4958: 帯の左 120・上 36・#F1EAE5 不透明度 10%） */
}

/* ======================================================================
   演出（2026-09-26。仕様 docs/MOTION.md。属性は templates/recruit/work.mjs・info.mjs・job.mjs）。隠す・動かすのは html.mo の下だけ
   （JS なし・reduce・Playwright の検査では最初から全部見える）。動かすのは opacity / translate / scale / clip-path だけ（transform は hover.css）。
   横方向にずらす初期状態は使わない。時間は motion.css の tokens（採用: --mo-dur .8s / --mo-step 80ms / --mo-dist 36px）
   ====================================================================== */
/* POSITIONS の面（トップ recruit/home.css の .rh-work と同じ）: 画面に入ったとき一度だけ、0.9 倍・下 72px・角丸 120 から素の形へ広がる（縮むだけなので横にはみ出さない）。
   引き金は面の頭の見えない札 .wk-panel-trig（data-mo-group に motion.js が .is-in を付ける）。カードと飾りの演出は部品（jobGrid）が持つ */
.wk-panel > .wk-panel-trig { position: absolute; left: 0; top: 0; width: 1px; height: 160px; pointer-events: none; }
html.mo .wk-panel:not(:has(> .wk-panel-trig.is-in)) { scale: .9; translate: 0 72px; border-radius: 120px; }
html.mo .wk-panel:has(> .wk-panel-trig.is-in) { transform-origin: 50% 0; animation: wk-panel-grow 1.3s var(--mo-ease) backwards; }
@keyframes wk-panel-grow { from { scale: .9; translate: 0 72px; border-radius: 120px; } }

/* ALL JOBS: カードが順に up（容器の stagger）→ 色札が pop → 写真の枠が下から開く（unveil。枠は .wk-phase-ph の overflow: clip）。
   項目の題と本文は動かさない（docs/MOTION.md 1 章: 本文の段落を 1 つずつ動かさない）。属性は work.mjs の allJobsSection */

/* FLOW（見せ場 2）: 順番の間隔を通常の 3 倍（80ms → 240ms）にして 1 枚ずつ上げる。アイコンはカードの 0.2 秒後に pop、
   矢印はその後に描く（600〜 は左→右、〜599 の ↓ は上→下）。--wk-d はカード（li）で計算した遅れを中の要素に渡すための変数 */
html.mo .wk-flow-step { --wk-d: calc(var(--mo-d, 0ms) * 3); }
html.mo .wk-flow-step[data-mo].is-in { animation-delay: var(--wk-d); }
html.mo .wk-flow-step .wk-flow-ic[data-mo].is-in { animation-delay: calc(var(--wk-d) + 200ms); }
html.mo .wk-flow-step .wk-flow-arrow[data-mo].is-in { animation-delay: calc(var(--wk-d) + 460ms); animation-duration: .7s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@media (max-width: 599px) { html.mo .wk-flow-arrow[data-mo="wipe"].is-in { animation-name: mo-wipe-down; } }

/* GUIDELINE（職種ページと共通）: 開くたびに中の行が上から順に小さく上がる（hidden が外れて描かれるたびに animation が頭から再生される。
   高さは site.js が 0.35 秒で伸ばす） */
html.mo .wk-guide-acc .acc-panel:not([hidden]) .dl-row { --mo-dist: 14px; animation: mo-up .55s var(--mo-ease) backwards; animation-delay: calc(60ms + var(--wk-i, 0) * 45ms); }
.wk-guide-dl .dl-row:nth-child(2) { --wk-i: 1; } .wk-guide-dl .dl-row:nth-child(3) { --wk-i: 2; } .wk-guide-dl .dl-row:nth-child(4) { --wk-i: 3; }
.wk-guide-dl .dl-row:nth-child(5) { --wk-i: 4; } .wk-guide-dl .dl-row:nth-child(6) { --wk-i: 5; } .wk-guide-dl .dl-row:nth-child(7) { --wk-i: 6; }
.wk-guide-dl .dl-row:nth-child(8) { --wk-i: 7; } .wk-guide-dl .dl-row:nth-child(n+9) { --wk-i: 8; }

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

/* ---------- 下部 CTA の案 r03・r04（2026-09-30〜。旗が立ったときだけ HTML に .rc-cta-tint が出る）----------
   写真カード「よくある質問」の写真（03e47c14。オレンジを焼き込んでいない写真）に、帯のほかの写真と同じ色味を重ねる。
   写真は四隅まで不透明なものに限る（角丸を焼き込んだ透明な角があると、そこから地のオレンジが 100% で出る。最初の ae86897c がそうだった）。
   ほかの写真（2abadb65・824edf5a）は主色 #E56300 を約 48% 焼き込んだ JPG（画素を測ると 主色×0.48＋写真×0.52 の式に合う）。
   帯の地（.cta-photo）が主色なので、写真を 52% の不透明度にするだけで同じ式になる（新しい色は足さない） */
.rc-cta-tint .cta-bg img { opacity: .52; }