/* 採用サイト: 歯科医師臨床研修（/recruit/clinical-training）＋ 到達目標について（/recruit/goaltoreach）
   対応テンプレート: templates/recruit/clinical-training.mjs / goal-to-reach.mjs（共有部品 _clinical-shared.mjs）
   実測: capture/recruit-preview/{clinical-training,goaltoreach}/slices ・ docs/design-recruit.md §3-10
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ＝独立した帯。左見出し＋右本文は縦積み）/ 1080〜（2 カラム）
   規約: 100vh 禁止・center+overflow-x 併用禁止・body に overflow-x:hidden を付けない・タップ標的 44px・ch 単位禁止・色はトークンのみ */

/* ---------- ページ見出し直下の全幅写真（1200×430 相当。比率は img の width/height と aspect-ratio） ---------- */
.ct-hero { margin-top: 8px; }
.ct-hero-img { width: 100%; height: auto; aspect-ratio: 1200 / 430; object-fit: cover; border-radius: var(--r-m); }
@media (max-width: 599px) { .ct-hero-img { aspect-ratio: 14 / 5; } }
.ct-hero + .section { padding-top: 80px; }
/* セクション間（参照: 344 で 138 / 841 で 188〜207 / 1280 で 216）。base の .section + .section {padding-top:0} より強い指定にする */
.page-recruit-clinical .section + .section { padding-top: clamp(136px, 10vw + 100px, 216px); }
/* dl の既定 margin（1em）を消す。base.css は ul/ol だけリセットしている */
.ct-leader, .ct-gl { margin: 0; }

/* ---------- 左見出し＋右本文の 2 カラム（1080〜）。〜1079 は縦積み ---------- */
.ct-2col { display: grid; gap: 40px; }
.ct-2col-head { margin-bottom: 0; align-self: start; align-content: start; }
@media (min-width: 1080px) {
  .ct-2col { grid-template-columns: 240px minmax(0, 1fr); column-gap: 64px; }
  .ct-message .ct-2col { padding-inline: 124px; }   /* 参照 pc1280: 見出し 164 / 本文 470〜1118 */
}
/* 見出しの改行（PROGRAM「複合型研修／プログラム」は参照の全幅で改行）。FEATURES「ウララ歯科クリニックの／7つの特徴」は 〜599 だけ改行し、600〜 は 1 行（.ct-br-sp。841 で「7つの特徴」だけが 2 行目に残っていた） */
.ct-br { display: inline; }
@media (min-width: 600px) { .ct-br.ct-br-sp { display: none; } }

/* ---------- MESSAGE ---------- */
.ct-message { position: relative; }
.ct-message > .container { position: relative; z-index: 1; }
.ct-message-body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--c-ink-deep); }
.ct-message-body p + p { margin-top: 0; }
@media (min-width: 1080px) { .ct-message-body { max-width: 660px; font-size: 16px; } }
@media (max-width: 599px) { .ct-message-body { font-size: 15px; } }
.ct-message-smile { right: -4%; bottom: -6%; opacity: 0.9; }
@media (max-width: 767px) { .ct-message-smile { --smile-w: 220px !important; right: -12%; bottom: -4%; opacity: 0.7; } }
/* 768〜1079（開いた折りたたみ）: 〜767・1080〜 と同じ薄ベージュ（--c-line）のスマイルを節の中に収める（参照 open841: 幅 約 265・右 約 75・弧の下端は本文の字下＋110）。
   340 の白を右下にはみ出させていたときは、節の clip で下端が水平に、右端が画面の縁で切れていた（841 で下 37・右 34 欠け）。
   スマイルの分だけ MESSAGE の下を 40 足し、次の節の上を 40 減らす（PROGRAM の位置は変えない） */
@media (min-width: 768px) and (max-width: 1079px) {
  .page-recruit-clinical .ct-message { padding-bottom: calc(var(--section-y) + 40px); }
  .page-recruit-clinical .ct-message + .section { padding-top: calc(clamp(136px, 10vw + 100px, 216px) - 40px); }
  .ct-message .smile.ct-message-smile { --smile-w: 264px !important; width: 264px; right: 40px; bottom: 16px; opacity: 1; color: var(--c-line); }
}

/* ---------- PROGRAM 白カード 3 枚 ---------- */
.ct-program-cards { display: grid; gap: 12px; }
.ct-pcard { padding: 32px 24px; }
@media (min-width: 768px) { .ct-pcard { padding: 40px; } }
.ct-pcard-title { display: flex; align-items: baseline; gap: 16px; font-size: var(--fs-h3); line-height: 1.6; text-wrap: pretty; }
@media (max-width: 599px) { .ct-pcard-title { font-size: 20px; gap: 12px; } }
.ct-no { font-family: var(--f-en); font-size: 14px; letter-spacing: 0.15em; color: var(--c-orange); line-height: 1; flex: none; }
.ct-pcard-rule { margin: 20px 0 32px; }
/* 「・」箇条書き（原文の中黒は content から除いてあるので CSS で付ける） */
.ct-dots { display: grid; gap: 6px; color: var(--c-ink-soft); font-size: 15px; line-height: 1.75; }
@media (min-width: 600px) { .ct-dots { font-size: 16px; line-height: 1.7; } }
.ct-dots li { position: relative; padding-left: 1.2em; }
.ct-dots li::before { content: "・"; position: absolute; left: 0; top: 0; }
/* 語 ── 値（研修期間・選考について）: 〜599 は縦積みで語に下線、600〜 は語＋罫線｜値 */
.ct-leader { display: grid; gap: 16px; color: var(--c-ink-soft); }
.ct-leader-row { display: grid; gap: 6px; }
.ct-leader dt { font-size: 13px; color: var(--c-ink-deep); display: flex; align-items: center; gap: 12px; min-width: 0; }
.ct-leader dt span { border-bottom: 1px solid var(--c-peach); padding-bottom: 2px; }
.ct-leader dd { margin: 0; font-size: 16px; line-height: 1.7; }
@media (min-width: 600px) {
  .ct-leader { gap: 8px; }
  .ct-leader-row { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .ct-leader dt { font-size: 16px; line-height: 1.7; }
  .ct-leader dt span { border-bottom: 0; padding-bottom: 0; flex: none; }
  .ct-leader dt::after { content: ""; flex: 1 1 24px; min-width: 24px; border-top: 1px solid var(--c-peach); }
}
@media (min-width: 1080px) { .ct-leader-row { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); } }
/* 到達目標へのピーチのリンクカード（右寄せ・幅 400） */
.ct-program-link { margin-top: 28px; }
.ct-program-link .link-card { min-height: 120px; padding: 24px 32px; }
.ct-program-link .link-card-label { font-size: 18px; }
@media (min-width: 768px) { .ct-program-link .link-card { padding: 40px; } }
@media (min-width: 768px) { .ct-program-link { display: flex; justify-content: flex-end; } .ct-program-link .link-card { width: 100%; max-width: 400px; } }

/* ---------- GUIDELINE 募集要項（開いた定義リスト） ---------- */
.ct-guideline-cards { display: grid; gap: 12px; }
.ct-gl-card { padding: 8px 24px; }
@media (min-width: 768px) { .ct-gl-card { padding: 16px 40px; } }
.ct-gl { display: grid; }
.ct-gl-row { display: grid; gap: 6px; padding: 24px 0; border-bottom: var(--dash); }
.ct-gl-row:last-child { border-bottom: 0; }
@media (min-width: 768px) { .ct-gl-row { padding: 20px 0 24px; } .ct-gl-row:last-child { border-bottom: var(--dash); } }
.ct-gl dt { font-size: var(--fs-h4); color: var(--c-ink-deep); line-height: 1.6; }
.ct-gl dd { margin: 0; color: var(--c-ink-soft); line-height: 1.9; }
.ct-selection-note { margin-top: 24px; color: var(--c-ink-soft); line-height: 1.9; font-size: 14px; }
@media (min-width: 600px) { .ct-selection-note { font-size: 15px; } }

/* ---------- FEATURES 7つの特徴（旧 CHARMS。class 名は ct-charm のまま。7 枚。1080〜 は下の Figma 節で 2 列の正方形カードに上書き。〜1079: 番号＋見出し→本文→写真（中央）の縦積み）
   写真は「上 2 隅 16 ・下辺が下に膨らむ弧」。スマイル（--c-line）は写真の外側下隅に重ねる（参照 pc1280-ref-05 実測） ---------- */
@media (max-width: 599px) { .ct-charms .sec-title { font-size: 24px; } }   /* 「ウララ歯科クリニックの」を 1 行に収める（344） */
.ct-charm-list { display: grid; gap: 32px; }
.ct-charm { position: relative; display: grid; gap: 32px; padding: 32px 24px; }
.ct-charm-text { display: grid; gap: 24px; min-width: 0; }
.ct-charm-head { display: grid; gap: 12px; }
.ct-charm-num { font-family: var(--f-en); font-size: clamp(40px, 2.5rem + 1.5vw, 64px); letter-spacing: 0.08em; color: var(--c-peach-soft); line-height: 1; position: relative; padding-right: 24px; display: inline-block; width: max-content; }
.ct-charm-num::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; border-right: var(--dash); }
.ct-charm-title { font-size: var(--fs-h3); line-height: 1.9; }
.ct-charm-title strong { color: var(--c-orange); }
.ct-charm-body { color: var(--c-ink-soft); line-height: 1.8; font-size: 15px; }
.ct-charm-photo { position: relative; }
.ct-charm-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px 16px 45% 45% / 16px 16px 48px 48px; }
.ct-charm-smile { right: 12%; bottom: -8%; max-width: 100%; }
@media (max-width: 599px) { .ct-charm-smile { width: 90px; right: 6%; bottom: -8%; } }   /* 参照 344: 約 80px */
@media (min-width: 600px) {
  .ct-charm { padding: 40px 32px 48px; }
  .ct-charm-head { grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 20px; }
  .ct-charm-num::after { top: -8px; bottom: -8px; }
  .ct-charm-body { font-size: 16px; line-height: var(--lh-loose); }
}
@media (min-width: 768px) and (max-width: 1079px) {
  .ct-charm { padding: 64px; gap: 48px; }
  .ct-charm-text { gap: 28px; }
  .ct-charm-photo { width: min(100%, 440px); margin-inline: auto; }
  .ct-charm-img { aspect-ratio: 440 / 282; }
  .ct-charm-title { font-size: 24px; line-height: 2.1; }
}
@media (min-width: 1080px) {
  .ct-charm { grid-template-columns: minmax(0, 490fr) minmax(0, 524fr); column-gap: 56px; align-items: center; padding: 64px; }
  .ct-charm.is-reverse .ct-charm-text { grid-column: 2; grid-row: 1; }
  .ct-charm.is-reverse .ct-charm-photo { grid-column: 1; grid-row: 1; }
  .ct-charm-text { gap: 28px; }
  .ct-charm-head { gap: 32px; }
  .ct-charm-num { font-size: 64px; padding-right: 40px; }
  .ct-charm-title { font-size: 24px; line-height: 2.1; }
  .ct-charm-img { aspect-ratio: 524 / 332; }
  .ct-charm.is-reverse .ct-charm-img { border-radius: 16px 16px 45% 45% / 16px 16px 48px 48px; }
  .ct-charm.is-reverse .ct-charm-smile { right: auto; left: 12%; }
}

/* ---------- RECRUIT INFO（上辺が楕円に膨らむグラデ面）＋ CTA ＋ ENTRY
   参照実測: 344 = 見出し→カード 40・カード高 118・帯 160・ENTRY 190 ／ 841 = 1 列（見出しもカードも幅 560 で中央）・帯 216・ENTRY 305・左右 60
   ／ 1280 = 見出し 166〜 ・カード 560 幅・帯 222・ENTRY 320・文字 x=124（左 84）・丸 64 ---------- */
.ct-rinfo { position: relative; margin-top: clamp(64px, 8vw, 120px); padding: clamp(112px, 5vw + 96px, 160px) 0 clamp(56px, 6vw, 96px); }
.ct-rinfo::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; right: -20%; z-index: 0; background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 42%, var(--c-cream) 100%); border-radius: 50% 50% 0 0 / clamp(48px, 10vw, 160px) clamp(48px, 10vw, 160px) 0 0; }
.ct-rinfo > .container { position: relative; z-index: 1; }
.ct-rinfo-grid { display: grid; gap: 40px; }
.ct-rinfo-head { margin-bottom: 0; align-self: start; align-content: start; }
.ct-rinfo-links { display: grid; gap: 10px; }
.ct-rinfo .link-card { min-height: 118px; padding: 24px 32px; }
.ct-rinfo-ctas { display: grid; gap: 10px; margin-top: clamp(80px, 12vw + 40px, 160px); }
.ct-rinfo .cta { padding: 24px 32px; }
.ct-rinfo .cta-photo { border: 0; }
.ct-rinfo .ct-rinfo-entry { min-height: 190px; }
.ct-rinfo-entry .cta-text { flex-direction: column; align-items: flex-start; gap: 8px; }
.ct-rinfo-entry .cta-title { font-size: 16px; letter-spacing: 0.25em; }
@media (min-width: 600px) {
  .ct-rinfo-entry .cta-text { flex-direction: row; align-items: baseline; gap: 8px 24px; }
}
@media (min-width: 768px) {
  .ct-rinfo-ctas { gap: 24px; }
  .ct-rinfo .cta { padding: 32px 60px; }
  .ct-rinfo .ct-rinfo-entry { min-height: 300px; }
  .ct-rinfo-entry .cta-en { font-size: 72px; }
  .ct-rinfo-entry .cta-title { font-size: 20px; }
}
@media (min-width: 768px) and (max-width: 1079px) {
  /* 展開した折りたたみ: 参照 841 は 1 列。見出し・カード列とも幅 560 で中央 */
  .ct-rinfo-grid { max-width: 560px; margin-inline: auto; }
  .ct-rinfo .cta-photo { min-height: 216px; }
}
@media (min-width: 1080px) {
  .ct-rinfo { padding-top: 160px; }
  .ct-rinfo-grid { grid-template-columns: minmax(240px, 400px) minmax(0, 560px); column-gap: 0; justify-content: space-between; padding-inline: clamp(24px, 9.4vw, 120px); }
  .ct-rinfo-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 160px; }
  .ct-rinfo-ctas .ct-rinfo-entry { grid-column: 1 / -1; }
  .ct-rinfo .cta { padding: 32px 80px 32px 84px; }
  .ct-rinfo .ct-rinfo-entry { min-height: 320px; }
  .ct-rinfo-entry .cta-en { font-size: 80px; }
  .ct-rinfo-entry .cta-smile { left: 110px; top: 36px; width: 300px; }
}

/* ---------- 到達目標について（白カード A／B／C。読み物幅 960） ---------- */
.gtr-body { padding-top: 80px; }
.gtr-cards { display: grid; gap: 12px; max-width: 960px; margin-inline: auto; }   /* 参照 pc1280: カード 160〜1120 */
.gtr-card { padding: 32px 24px; }
@media (min-width: 768px) { .gtr-card { padding: 40px; } }
.gtr-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: var(--fs-h3); line-height: 1.6; }
@media (max-width: 599px) { .gtr-title { font-size: 20px; gap: 8px 12px; } }
.gtr-letter { font-family: var(--f-en); font-size: 14px; letter-spacing: 0.15em; color: var(--c-orange); line-height: 1; flex: none; }
.gtr-sub { font-size: var(--fs-small); color: var(--c-ink-deep); letter-spacing: 0.06em; margin-left: -8px; }
@media (max-width: 599px) { .gtr-sub { flex-basis: 100%; padding-left: calc(14px + 16px); } }
.gtr-rule { margin: 20px 0 32px; }
.gtr-lead { color: var(--c-ink-soft); line-height: 1.7; margin-bottom: 16px; }
.gtr-list { display: grid; gap: 6px; color: var(--c-ink-soft); font-size: 15px; line-height: 1.75; }
@media (min-width: 600px) { .gtr-list { font-size: 16px; line-height: 1.7; } }
.gtr-groups { display: grid; gap: 12px; margin-top: 24px; }
.gtr-group { background: var(--c-peach-soft); border-radius: var(--r-m); padding: 28px 24px; display: grid; gap: 8px; }
@media (min-width: 768px) { .gtr-group { padding: 32px; } }
.gtr-group-title { font-size: 18px; color: var(--c-ink-deep); line-height: 1.7; text-wrap: pretty; }
.gtr-group-note { font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.8; }
@media (min-width: 1080px) { .gtr-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ======================================================================
   SP（〜767）の細部を参照 440/393/344 の実測に合わせる（capture/sp-compare/recruit__{clinical-training,goaltoreach}、2026-09-24）
   3 幅とも同じ値。768〜 は上の値のまま（ここは max-width の中だけ）
   ====================================================================== */
@media (max-width: 767px) {
  /* 見出し: ラベル 16px/0.2em（CLINICAL TRAINING 幅 193）・H1 32px（字高 30）。ヘッダー下端→ラベル字頭 57、ラベル→H1 字頭 50。
     344 は「歯科医師臨床研 / 修」の 7＋1 字で折れる（行幅 W−80・balance しない）。H1 字下→写真 52 */
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head { padding: 50px 0 32px; }
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head .container { width: calc(100% - 80px); }
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head .sec-head { gap: 15px; }
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head .sec-label { font-size: 16px; letter-spacing: 0.2em; text-indent: 0.2em; }
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head h1.sec-title { font-size: 32px; text-wrap: wrap; }
  .ct-hero { margin-top: 10px; }

  /* 容器は左右 32（写真 32〜407・カード 32〜407・本文 32〜408 が 3 幅とも同じ） */
  :is(.page-recruit-clinical, .page-recruit-goal) :is(.ct-hero, .section > .container, .ct-rinfo > .container) { width: calc(100% - 64px); }

  /* 節の間: 前の箱の下端→次のラベル字頭 128（段落で終わる MESSAGE は字下→ラベル 137）。
     MESSAGE の白スマイル（実物は --c-line の薄ベージュ、幅 200、右 60、最後の行の字下＋93 が弧の下端）が節の下で切れないよう、MESSAGE だけ下に 90 持つ */
  .page-recruit-clinical .section { padding-bottom: 0; }
  .page-recruit-clinical .section + .section { padding-top: 122px; }
  .page-recruit-clinical .ct-message { padding-bottom: 90px; }
  .page-recruit-clinical .ct-message + .section { padding-top: 31px; }
  .ct-message .smile.ct-message-smile { --smile-w: 200px !important; width: 200px; right: 60px; bottom: 6px; opacity: 1; color: var(--c-line); }
  /* 節見出し: ラベル 16px/0.2em（MESSAGE 幅 99）・H2 24px（字高 23）・ラベル→H2 字頭 46、H2 字下→本文/カード 50 */
  :is(.page-recruit-clinical, .page-recruit-goal) .section .sec-head { gap: 15px; }
  :is(.page-recruit-clinical, .page-recruit-goal) :is(.section .sec-head, .ct-rinfo-head) .sec-label { font-size: 16px; letter-spacing: 0.2em; }
  :is(.page-recruit-clinical, .page-recruit-goal) :is(.section .sec-head, .ct-rinfo-head) .sec-title { font-size: 24px; }
  /* CHARMS: 選考カードの下端→ラベル字頭 132、ラベル→H2 字頭 45、H2 字下→最初のカード 55（参照 440） */
  .page-recruit-clinical .section.ct-charms { padding-top: 120px; }
  .page-recruit-clinical .ct-charms .sec-head { margin-bottom: 40px; gap: 16px; }
  .ct-charms .sec-head.center .sec-label { text-indent: 0.2em; }
  /* 左寄せの英字ラベルは参照だと字頭が 4〜5 右（440: MESSAGE x39 / PROGRAM 37 / GUIDELINE 37 / RECRUIT INFO 39、新実装は 33〜34） */
  :is(.page-recruit-clinical, .page-recruit-goal) .section .sec-head:not(.center) .sec-label { padding-left: 4px; }
  :is(.page-recruit-clinical, .page-recruit-goal) .ct-rinfo-head .sec-label { padding-left: 5px; }

  /* PROGRAM: 白カード 3 枚（間 8）。内余白 40。「01」16px/0.25em＋間 19＋題 18px（研修プログラムの内容 幅 189）。題→点線 17、点線→本文 32 */
  .ct-program-cards, .ct-guideline-cards { gap: 8px; }
  .ct-pcard { padding: 41px 40px 40px; }   /* 題の字頭はカード上端＋42〜43（参照 440） */
  .ct-pcard-title { font-size: 20px; gap: 16px; }   /* 題の字は x114（参照 440・344。「01」の右 24） */
  .ct-program .ct-pcard-title { font-size: 18px; }
  .ct-no { font-size: 16px; letter-spacing: 0.25em; position: relative; top: -2px; }   /* 「01」の字頭は題の字頭＋2（参照 440: 1491 / 1489。ベースライン揃えのままだと＋4） */
  .ct-pcard-rule { margin: 18px 0 32px; }   /* 題の字下→点線 23 */
  /* 箇条書き: 14px lh1.7（字送り 14.84）・項目の間 8。「・」は字下げしない（2 行目は「・」の位置から始まる） */
  .ct-dots { gap: 8px; font-size: 14px; line-height: 1.7; }   /* 行送り 23.8・項目の間 8（参照 440: 1686→1710→1741） */
  .ct-dots li { padding-left: 0; }
  .ct-dots li::before { position: static; }
  /* 到達目標へのピーチのカード: 縁の内側 34〜405・丸 24 は右 40 */
  /* 参照 440: 白カードの下端→このカード 42（グリッドの間 8＋34）、1 行で高さ 108・字頭は上端＋42（上下中央ではなく上 34 / 下 40）、
     文字 20px/0.06em・行送り 34・左 40。344 は「到達目標につ / いて」と 6 字で折れて高さ 142（字と丸の間 32） */
  .ct-program-link { margin: 34px 2px 0; }
  .ct-program-link .link-card { min-height: 108px; padding: 34px 40px 40px; gap: 32px; }
  .ct-program-link .link-card-label { font-size: 20px; letter-spacing: 0.06em; line-height: 34px; }
  .ct-program-link .btn-ring { width: 24px; height: 24px; }
  .ct-program-link .btn-ring .icon { width: 20px; height: 20px; }

  /* GUIDELINE: 内余白 24/40/40、各行は上 18・下 24.6・語→値 8.6（語 16px lh1.5・値 14px lh1.7、1 行の行の間隔 100）。最後の行の下にも点線 */
  .ct-gl-card { padding: 24px 40px 40px; }
  .ct-gl-row { gap: 8.6px; padding: 18px 0 24.6px; }   /* 値を行送り 23.8 にしたぶん（2 行の値は参照 344 で 24 送り）間と下を 1.4 ずつ詰めて 1 行の行は 100 のまま */
  .ct-gl-row:last-child { border-bottom: var(--dash); }
  .ct-gl dt { font-size: 16px; line-height: 1.5; }
  .ct-gl dd { font-size: 14px; line-height: 1.7; }
  .ct-selection-note { font-size: 13px; line-height: 1.7; }

  /* CHARMS: カード間 24、内余白 32/32/22。番号 40px（点線は番号の高さ 40）→ 題 10、題 22px lh1.7（balance しない）→ 本文 18、
     本文 15px lh1.7 → 写真 32。写真は 3:2 で幅いっぱい（312）。スマイル 59px を写真の右 20・下 −11 */
  .ct-charm-list { gap: 24px; }
  .ct-charm { gap: 32px; padding: 32px 32px 32px; }
  /* 写真は幅に比例する型抜き（参照 440/393/344 で同じ比率）: 高さ 0.638W、上の角丸 0.064W（312 幅で 20）、下辺は左右 0.14〜0.2W で最も下（0.638W）・中央が 0.609W に持ち上がる波。
     3:2＋楕円の角丸だと中央が 9px 低く、カードも 1 枚 4px 短かった。写真の下端→カードの下端 32 */
  .ct-charm-img { aspect-ratio: 1000 / 638; border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 638' preserveAspectRatio='none'%3E%3Cpath d='M0 64A64 64 0 0 1 64 0H936A64 64 0 0 1 1000 64L1000 495L990 517L980 535L960 570L940 593L920 609L900 622L880 631L860 638L800 638L780 634L760 628L740 626L720 623L700 622L680 619L660 615L640 612L620 612L600 611L580 609L420 609L400 611L380 612L360 612L340 615L320 619L300 622L280 623L260 626L240 628L220 634L200 638L140 638L120 631L100 622L80 609L60 593L40 570L20 535L10 517L0 495Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 638' preserveAspectRatio='none'%3E%3Cpath d='M0 64A64 64 0 0 1 64 0H936A64 64 0 0 1 1000 64L1000 495L990 517L980 535L960 570L940 593L920 609L900 622L880 631L860 638L800 638L780 634L760 628L740 626L720 623L700 622L680 619L660 615L640 612L620 612L600 611L580 609L420 609L400 611L380 612L360 612L340 615L320 619L300 622L280 623L260 626L240 628L220 634L200 638L140 638L120 631L100 622L80 609L60 593L40 570L20 535L10 517L0 495Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
  .ct-charm-text { gap: 18px; }
  .ct-charm-num { font-size: 40px; }
  .ct-charm-title { font-size: 22px; line-height: 1.7; text-wrap: wrap; text-wrap: pretty; }   /* pretty: 最後の行に 1 字だけ残さない（344「…積め／る」「…研修環／境」、390「…つなが／り」）。非対応は wrap のまま */
  .ct-charm-title br { display: none; }   /* 参照 SP は原稿の改行（「開業医でありながら、\n幅広い…」）を使わず詰めて折る（440「開業医でありながら、幅広い / 専門性に…」） */
  .ct-charm-body { line-height: 1.7; }
  .ct-charm .smile.ct-charm-smile { width: 59px; right: 20px; bottom: calc(-11px - 4.5%); }   /* 写真を 0.638W にしたぶん（3:2 との差 0.045H）下げて、参照と同じ位置に残す */

  /* RECRUIT INFO（interviews-index.css の .rinfo と同じ実測）: 上辺は半径 ≒1.82W の円弧、グラデは 0.96W でクリームに戻る。
     最後の魅力カード→弧の頂 125、頂→ラベル字頭 122、H2 字下→カード 48、白カード 118（2px のクリーム縁込み）間 10、カード→写真帯 82、帯 160・間 8、ENTRY 200 */
  .ct-rinfo { margin-top: 125px; padding: 116px 0 50px; }   /* 下 50: ENTRY 帯の下端→フッターの口の上端 81（参照 3 幅。.ft-recruit の margin-top 30 と足す） */
  .ct-rinfo::before {
    left: 0; right: 0; border-radius: 0;
    background: linear-gradient(180deg, var(--c-hero-yellow) 12vw, var(--c-hero-peach) 40vw, var(--c-cream) 96vw);
    -webkit-mask: radial-gradient(circle 182vw at 50% 182vw, #000 calc(182vw - 0.6px), transparent 182vw) top / 100% 12vw no-repeat, linear-gradient(#000 0 0) 0 calc(12vw - 1px) / 100% 100% no-repeat;
            mask: radial-gradient(circle 182vw at 50% 182vw, #000 calc(182vw - 0.6px), transparent 182vw) top / 100% 12vw no-repeat, linear-gradient(#000 0 0) 0 calc(12vw - 1px) / 100% 100% no-repeat;
  }
  .ct-rinfo-head { gap: 15px; }
  .ct-rinfo-grid { gap: 41px; }
  .ct-rinfo .link-card { min-height: 118px; padding: 16px 32px; border: 1px solid var(--c-cream); }   /* 参照: 白 116＋縁 1×2、送り 128 */
  .ct-rinfo-links .btn-ring { width: 24px; height: 24px; }
  .ct-rinfo-links .btn-ring .icon { width: 20px; height: 20px; }
  .ct-rinfo-ctas { gap: 8px; margin-top: 81px; }   /* 最後のリンクカード→写真帯の上端（参照 440: 帯 3028） */
  .ct-rinfo .cta { padding: 24px 32px; }
  .ct-rinfo-band .cta-title { font-size: 20px; letter-spacing: 0.02em; }
  .ct-rinfo-ctas .cta-ring .icon { width: 32px; height: 32px; }
  .ct-rinfo-ctas .cta-ring .icon path { stroke-width: 1.1; }
  .ct-rinfo .ct-rinfo-entry { min-height: 200px; }
  .ct-rinfo-entry .cta-text { gap: 7px; }   /* ENTRY の字下→エントリーの字頭 23（参照） */
  .ct-rinfo-entry .cta-en { font-size: 47px; white-space: nowrap; }   /* 参照: ENTRY の字高 34・x66〜220（48px だと 344 で「ENTR / Y」に折れる） */
  .ct-rinfo-entry .cta-title { font-size: 18px; letter-spacing: 0.04em; }
  .ct-rinfo-entry .smile.cta-smile { width: 160px; left: 40px; top: 19px; }
}
/* 〜599 だけ（600〜 は語｜値の横並び・番号｜題の横並びなので触らない） */
@media (max-width: 599px) {
  /* 語 ── 値: 語 13px の下線は字下 6、下線→値の字頭 11、値の字下→次の語 28（語の字頭の間隔 70.5） */
  .ct-leader { gap: 16px; }   /* 1 行の行の送り 70.5（参照 344: 2588→2659） */
  .ct-leader-row { gap: 4px; }
  .ct-leader dt span { padding-bottom: 0; }
  .ct-charm-head { gap: 10px; }
}

/* ---------- 到達目標について（〜767。参照 goaltoreach 440/393/344 実測） ----------
   カードは左右 32（写真と同じ幅）・間 8・内余白 40。題: 「A」16px/0.15em → 間 18 → 題 18px。副題 12px は題の文字の頭に揃えて題の下 6、点線は副題の下 16。
   リード・箇条書き 14px lh1.7（項目の間 8）。ピーチの小箱は内余白 24、題・注記とも 14px。最後のカード→RECRUIT INFO の頂 125 */
@media (max-width: 767px) {
  .page-recruit-goal .gtr-body { padding-top: 79px; padding-bottom: 0; }
  .page-recruit-goal .gtr-cards { width: calc(100% - 64px); gap: 8px; }
  .gtr-card { padding: 41px 40px 40px; }   /* 題の字頭はカード上端＋41〜42（参照 344: 498→539、1015→1057） */
  .gtr-title { font-size: 18px; gap: 5px 17px; }   /* 題の字は x103（参照 440） */
  .gtr-letter { font-size: 16px; position: relative; top: -4px; }   /* 「A」の字頭は題の字頭と同じ高さ（参照 440: 519）。ベースライン揃えのままだと 4 下がる */
  .gtr-sub { font-size: 12px; letter-spacing: 0.06em; margin-left: 0; flex-basis: 100%; padding-left: 30px; line-height: 1.6; }   /* 参照 440: x110〜258・字頭 552 */
  .gtr-rule { margin: 17px 0 32px; }
  .gtr-card:not(:has(.gtr-sub)) .gtr-rule { margin-top: 17px; }   /* 副題の無い B・C は題の字下→点線 22、副題の字下→点線 21 */
  .gtr-lead { font-size: 14px; }
  .gtr-list { gap: 8px; font-size: 14px; line-height: 1.7; }
  .gtr-groups { gap: 8px; margin-top: 16px; }
  .gtr-group { padding: 24px; }
  .gtr-group-title { font-size: 14px; }
  .gtr-group-note { font-size: 14px; line-height: 1.7; }
  /* A の題は 2026-09-25 に urala.com の「歯科医師としての基本的な価値観」（14 字）へ変えたので、A の右の列の中で折り返す
     （以前の「研修プログラムの内容」は折らずに右の余白へはみ出させていたが、14 字では 344〜393 で横スクロールになる） */
  .gtr-title-txt { flex: 1 1 0; min-width: 0; text-wrap: balance; }   /* 幅 0 から伸ばして A と同じ行に置く（折り返し判定を max-content でさせない） */
  /* ピーチの小箱は角丸 8（参照 440: 上端から 0/2/4/8 行で左端 79/75/73/72）。小見出しは本文と同じ #574D45 */
  .gtr-group { border-radius: 8px; }
  .gtr-group-title { color: var(--c-ink-soft); }
}

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

/* 英数字の番号（PROGRAM「01」・CHARMS「01」・到達目標「A」）は Roboto 400（原本 SP の計算済みスタイル・Figma 採用 108:3242 の Roboto Regular。旧は見出しの 500 を継承） */
.ct-no, .ct-charm-num, .gtr-letter { font-weight: 400; }

/* ======================================================================
   〜767 の 3 周目（2026-09-26。現行プレビューの計算済みスタイルを 344/390/440 で文字ごとに突き合わせ）
   英字が Inter → Roboto に替わった（9/25）あとも Inter 用に詰めた字間（0.2em・0.02em・0.04em）が残っていた → 原本の値に戻す。
   本文の字間は body の 0.06em が px で継承されて字の大きさとずれる（14.7px 基準）ので、要素ごとに 0.06em を当て直す（原本はどれも自分の字の 0.06em）
   ====================================================================== */
@media (max-width: 767px) {
  /* 英字ラベル 16px/0.25em（CLINICAL TRAINING 幅 214・MESSAGE 100・RECRUIT INFO 152）。中央寄せは text-indent で相殺 */
  :is(.page-recruit-clinical, .page-recruit-goal) :is(.page-head .sec-head, .section .sec-head, .ct-rinfo .ct-rinfo-head) .sec-label { letter-spacing: 0.25em; }
  :is(.page-recruit-clinical, .page-recruit-goal) :is(.page-head, .ct-charms) .sec-label { text-indent: 0.25em; }
  .page-recruit-clinical .ct-message .sec-label { padding-left: 6px; }   /* MESSAGE の字頭 x38（PROGRAM・GUIDELINE は 36 のまま） */
  /* 本文・語・値の字間（どれも自分の字の 0.06em） */
  :is(.ct-message-body, .ct-dots, .ct-leader, .ct-gl, .ct-selection-note, .ct-reloc-body, .ct-charm-body, .gtr-lead, .gtr-list, .gtr-groups) :is(p, li, dt, dd, span),
  :is(.ct-selection-note, .gtr-lead, .gtr-group-title, .gtr-group-note) { letter-spacing: 0.06em; }
  /* 語 ── 値（研修期間・選考について）: 語は本文と同じ #574D45、下線は点線と同じ #C5B5A8（旧は濃い字＋ピーチの下線） */
  .ct-leader dt { color: var(--c-ink-soft); }
  .ct-leader dt span { border-bottom-color: var(--c-line-2); }
  /* 到達目標の「A」「B」「C」は字間 0.25em（原本。旧 0.15em） */
  .gtr-letter { letter-spacing: 0.25em; }
  .gtr-title { column-gap: 16px; }   /* 「A」の字間が 1.6 増えたぶん詰めて、題の字頭 x102 のまま */
  /* 採用情報の帯: 写真帯の題 20px/0.06em（募集要項 幅 85）、ENTRY は Roboto 400・48px・字間 0.06em（幅 161）、エントリー 18px/0.06em */
  .ct-rinfo-band .cta-title { letter-spacing: 0.06em; }
  .ct-rinfo-entry .cta-en { font-size: 48px; font-weight: 400; letter-spacing: 0.06em; }
  .ct-rinfo-entry .cta-title { letter-spacing: 0.06em; }
  /* 白いリンクカードの縁は 2px（原本 118 = 白 114＋縁 2×2。字頭 x66） */
  .ct-rinfo .link-card { border-width: 2px; }
}

/* ======================================================================
   1080〜: Figma 採用「歯科医師臨床研修」98:1007 ／「到達目標について」103:2235（1440 幅）に合わせる（2026-09-25）。
   容器 1280（x80〜1360）。ページ見出しは 400 の帯の中（Frame 235: 英字 16px/0.25em → 8 → H1 40px/0.06em、上 80 を含めて上下中央 → 英字の字枠 y188）。
   写真 1280×460・角丸 16 が y400。各節は上 0・下 200。見出しは英字 → 16 → H2 32px/1.7/0.06em。
   768〜1079・〜767 はこのブロックの外（従来どおり）
   ====================================================================== */
@media (min-width: 1080px) {
  :is(.page-recruit-clinical, .page-recruit-goal) .main { --container: 1280px; }
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head { padding: 80px 0 109px; }   /* ヘッダー 108 → 英字 y188 / H1 の下端 y291 → 写真 y400 */
  :is(.page-recruit-clinical, .page-recruit-goal) .page-head .sec-head { gap: 8px; }
  :is(.page-recruit-clinical, .page-recruit-goal) .section .sec-head, :is(.page-recruit-clinical, .page-recruit-goal) .ct-rinfo-head { gap: 16px; }
  .ct-hero { margin-top: 0; }
  .ct-hero-img { aspect-ratio: 1280 / 460; border-radius: 16px; }

  /* 節の間: 写真→MESSAGE 80（Frame 211 gap 80）、以降は各節の下 200 */
  .page-recruit-clinical .section { padding-block: 0 200px; }
  .page-recruit-clinical .section + .section { padding-top: 0; }
  .ct-hero + .section { padding-top: 80px; }

  /* 左見出し＋右本体: 見出し列 236・間 80・本体 960（98:1663 / 98:1725） */
  .ct-2col { grid-template-columns: 236px minmax(0, 960px); column-gap: 80px; }

  /* MESSAGE（98:1452）: 960 の読み物容器を中央（x240〜1200）、本文 16px/2.2/0.06em #271200・段落の間 0。
     スマイル 273×247（#F1EAE5）は容器の左 +823・上 +145 */
  .ct-message .ct-2col { width: min(100% - 80px, 960px); padding-inline: 0; }
  .ct-message-body { max-width: none; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  /* 行末の字の後ろの字間（0.06em）はブラウザだと行幅に数えられ、Figma（644 に 38 字の「…大きく影響」）より 1 字早く折れる。その分だけ右へ逃がす */
  .ct-message-body { margin-right: -0.06em; }
  .ct-message .smile.ct-message-smile { --smile-w: 273px; width: 273px; left: calc(50% + 343px); top: 225px; right: auto; bottom: auto; opacity: 1; color: var(--c-line); }   /* 上 = 節の上 80 ＋ 145 */
  /* 1080〜1300 は容器の右に 273 の余白が無く、スマイルの弧が画面の右端で切れていた → 画面の右 16 より内に寄せる（1440 は Figma どおり x1063） */
  .ct-message .smile.ct-message-smile { left: min(calc(50% + 343px), calc(100% - 289px)); }

  /* PROGRAM（98:1667）: 白カード（角丸 16・padding 40）を間 8 で縦に。番号 Roboto 16px/0.25em 橙 → 16 → 題 24px/1.7/0.06em、
     題の下 16 に点線 → 32 → 中身。箇条書き 16px/1.7/0.06em #574D45・行間 8（「・」は字下げしない）。 */
  .ct-program-cards, .ct-guideline-cards { gap: 8px; }
  .ct-pcard { padding: 40px; border-radius: 16px; }
  .ct-pcard-title { align-items: center; gap: 16px; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .ct-no { font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; }
  .ct-pcard-rule { margin: 16px 0 32px; }
  .ct-dots { gap: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .ct-dots li { padding-left: 0; }
  .ct-dots li::before { position: static; }
  /* 語 ── 値（研修期間 98:1686 / 選考 98:1834）: 語 16px #574D45 → 16 → 0.5px の線 #C5B5A8 → 16 → 値（幅 600 / 880、選考は 720 / 880）。行の間 8 */
  /* 値の列は 600（選考 720）まで。狭い PC 幅では語の長さ（max-content）を優先して値の列が縮む。行は subgrid で値の頭を揃える */
  .ct-leader { grid-template-columns: minmax(max-content, 1fr) minmax(0, 600px); column-gap: 16px; row-gap: 8px; color: var(--c-ink-soft); }
  .ct-selection .ct-leader { grid-template-columns: minmax(max-content, 1fr) minmax(0, 720px); }
  .ct-leader-row { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 16px; align-items: center; }
  .ct-leader dt { gap: 16px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); white-space: nowrap; }
  .ct-leader dt::after { flex: 1 1 0; min-width: 40px; border-top: 0.5px solid var(--c-line-2); }
  /* 線の最短 40（2026-09-28）: 旧 8 だと 1080〜1439 で値の列（600 / 720）が縮まず線が 8px の「–」に潰れていた（選考についての 6 行・研修期間の長い 2 行）。
     1440 は 1fr（研修期間 264・選考 144）が語＋16＋40 より広いので Figma どおり線 61 のまま */
  .ct-leader dd { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  /* 到達目標へのカード（139:6213）: 400 幅・#F7E7DB・padding 40・文字 20px/1.7/0.06em・丸 40。カード列の下 40・右寄せ */
  .ct-program-link { margin-top: 32px; }   /* カード列（grid の間 8）の下 40 = 8 ＋ 32（98:1667: カード列の下端 1164 → リンク 1204。旧 40 で 48 空いていた） */
  .ct-program-link .link-card { max-width: 400px; min-height: 0; padding: 40px; gap: 24px; border-radius: 16px; }
  .ct-program-link .link-card-label { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .ct-program-link .btn-ring { width: 40px; height: 40px; }

  /* GUIDELINE（98:1731）: 白カード padding 40。各行 語 20px/1.7/0.06em #271200 → 8 → 値 16px/1.7/0.06em #574D45、下 24 に点線（最後も）、行の間 16。
     選考について（98:1744）: 題 24px の下 16 に点線 → 32 → 語 ── 値 → 24 → 注記 16px */
  .ct-gl-card { padding: 40px; border-radius: 16px; }
  .ct-gl { gap: 16px; }
  .ct-gl-row, .ct-gl-row:last-child { gap: 8px; padding: 0 0 24px; border-bottom: var(--dash); }
  .ct-gl dt { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .ct-gl dd { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .ct-selection-note { margin-top: 24px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }

  /* FEATURES 7つの特徴（98:1886）: 見出し中央 → 40 → 白カード 628 角を 2 列・間 24。カード padding 40・縦 gap 40・右揃え。
     写真 440×262 角丸 16 が上（原本は下辺が波の透過なので、職種ページと同じく 106% に広げて枠で切る）。番号は左上 70 角のピーチ（Roboto 40px・字間 10px）。
     見出し 24px/1.7/0.06em → 24 → 本文 16px/2.2/0.06em #574D45。スマイル・点線・左右反転は無い */
  .ct-charms .sec-head { margin-bottom: 40px; }
  .ct-charm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ct-charm, .ct-charm.is-reverse { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; padding: 40px; aspect-ratio: 1 / 1; border-radius: 16px; }
  .ct-charm-photo, .ct-charm.is-reverse .ct-charm-photo { order: -1; width: 80.29%; aspect-ratio: 440 / 262; min-height: 0; overflow: clip; border-radius: 16px; }
  .ct-charm-img, .ct-charm.is-reverse .ct-charm-img { display: block; width: 106%; max-width: none; height: auto; aspect-ratio: auto 1064 / 680; margin: -1.5px 0 0 -3%; border-radius: 0; }
  .ct-charm-smile { display: none; }
  .ct-charm-text { width: 100%; gap: 24px; }
  .ct-charm-head { display: block; }
  .ct-charm-num { position: absolute; left: 0; top: 0; width: 70px; height: 70px; display: grid; place-items: center; padding: 8px; border-radius: 16px 0 16px 0; background: var(--c-peach-soft); color: var(--c-orange); font-size: 40px; line-height: 1; letter-spacing: 10px; }
  .ct-charm-num::after { content: none; }
  .ct-num-z { display: none; }   /* Figma の番号は「1」（content の「01」の先頭 0 を PC だけ隠す） */
  .ct-charm-title { font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .ct-charm-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  /* 2026-09-28 Figma 98:1891 照合: 本文は 1 段落で流す（原稿の改行 "\n" は Figma では改行せず続けて組まれ、1 の枠が 628 角に収まる）。
     〜1079 は従来どおり段落ごと。行の 2 枚は高さを揃える: aspect-ratio の枠は既定で伸びず（1 の枠だけ長くなっていた）、
     stretch だけ足すと高さから幅が逆算されて横にはみ出す。正方形の下限は列の幅（容器の cqi）から min-height で与え、縦横とも stretch */
  .ct-charm-body p { display: inline; }
  .ct-charm-list { container-type: inline-size; }
  .ct-charm, .ct-charm.is-reverse { aspect-ratio: auto; min-height: calc((100cqi - 24px) / 2); align-self: stretch; justify-self: stretch; }

  /* 到達目標（103:2998）: 960 の容器（x240）に白カードを間 8。カード padding 40・縦 gap 32。
     題の行: 英字 Roboto 16px/0.25em 橙 → 16 → 題 24px/1.7/0.06em（副題は同じ行に 16px）、下 16 に点線。
     本文 16px/1.7/0.06em #574D45、リード → 16 → 箇条書き（行間 8）。ピーチの小箱は 2 列・間 8・角丸 8・padding 24、題 18px */
  .page-recruit-goal .gtr-body { padding: 80px 0 200px; }
  .gtr-cards { gap: 8px; max-width: 960px; }
  .gtr-card { padding: 40px; border-radius: 16px; }
  .gtr-title { align-items: center; gap: 16px; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; }
  .gtr-letter { font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; }
  .gtr-sub { margin-left: -16px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .gtr-rule { margin: 16px 0 32px; }
  .gtr-lead { margin-bottom: 16px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .gtr-list { gap: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }
  .gtr-groups { gap: 8px; margin-top: 16px; }
  .gtr-group { gap: 8px; padding: 24px; border-radius: 8px; color: var(--c-ink-soft); align-content: start; }   /* 2 箱は同じ高さ。短い方の行が間延びしないよう上に詰める */
  .gtr-group .gtr-list { align-content: start; }
  .gtr-group-title { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); }
  .gtr-group-note { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; }

  /* RECRUIT INFO（Frame 167 → 72:1016）: 見出し 320 ＋ 80 ＋ リンク 560（x240〜1200）、白カード 120 高・間 8。
     写真帯 628×224 を 2 枚（間 24）→ 24 → ENTRY 1280×320。帯は容器 1280 いっぱい */
  /* 面: 前の節の下 200 の直後から。上辺は楕円 2128×752（頂が +16・画面端で +115）→ faq.css / interviews-index.css と同じマスク。見出しの行は上から 200。
     ENTRY の下 → フッターの口 200（.ft の margin-top 64 と足して 136） */
  :is(.page-recruit-clinical, .page-recruit-goal) .ct-rinfo { margin-top: 0; padding: 200px 0 136px; }
  :is(.page-recruit-clinical, .page-recruit-goal) .ct-rinfo::before {
    left: 0; right: 0; border-radius: 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;
  }
  .ct-rinfo-grid { grid-template-columns: minmax(0, 320px) minmax(0, 560px); column-gap: 80px; justify-content: center; padding-inline: 0; }
  .ct-rinfo-links { gap: 8px; }
  .ct-rinfo .link-card { min-height: 120px; }
  .ct-rinfo-ctas { margin-top: 160px; gap: 24px; }
  .ct-rinfo .cta { padding: 40px 80px; }
  .ct-rinfo .cta-photo { min-height: 224px; }
  .ct-rinfo-band .cta-title { font-size: 32px; }
  .ct-rinfo .ct-rinfo-entry { min-height: 320px; }
  .ct-rinfo-entry .smile.cta-smile { width: 273px; left: 120px; top: 36px; }
}

/* ---------- 移住支援金対象法人（guideline.relocation。2026-09-25 urala.com /resident-recruitment から統合）
   募集要項・選考についてと同じ白カード。本文は募集要項の値（.ct-gl dd）と同じ字・色・行送り。箇条は記号（✅・┗）が原文の文字なので「・」を付けない ---------- */
.ct-reloc-body { color: var(--c-ink-soft); line-height: 1.9; }
.ct-reloc-body > * + * { margin-top: 8px; }
.ct-reloc-list { display: grid; gap: 4px; margin-top: 16px; }
.ct-reloc-list li { padding-left: 0; }
/* 原文の「✅」は緑の絵文字なので、テンプレートで記号を外し、橙の丸に白のチェックを CSS で描く。直後の「┗」の行はチェックの文字の頭に揃える */
.ct-reloc-list li.ct-reloc-check { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); column-gap: 0.5em; }
.ct-reloc-check::before { content: ""; width: 1.1em; height: 1.1em; margin-top: 0.4em; margin-top: calc((1lh - 1.1em) / 2); border-radius: 50%; background: var(--c-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ct-reloc-list li.ct-reloc-check + li:not(.ct-reloc-check) { padding-left: 1.6em; }
@media (max-width: 599px) { .ct-reloc-body { font-size: 14px; line-height: 1.7; } }
@media (min-width: 1080px) { .ct-reloc-body { font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; } }

/* ======================================================================
   演出（2026-09-26。仕様 docs/MOTION.md。属性は templates/recruit/{clinical-training,goal-to-reach,_clinical-shared}.mjs）。
   隠す・動かすのは html.mo の下だけ（JS なし・reduce・Playwright の検査では最初から全部見える）。
   動かすのは opacity / translate / scale / clip-path だけ（transform は hover.css）。横にずらす初期状態は使わない
   ====================================================================== */
/* 見出し直下の写真（研修・到達目標）: 枠が下から開き（1.6 倍の時間）、写真は枠の中で 1.08 → 1 をゆっくり（原本 STUDIO のヒーローと同じ型）。
   拡大が枠の外に出ないよう、枠は html.mo の下で常に写真と同じ角丸で切る（静止時の見た目は同じ） */
html.mo .ct-hero { overflow: clip; border-radius: var(--r-m); }
html.mo .ct-hero[data-mo="unveil"].is-in { animation-duration: calc(var(--mo-dur) * 1.6); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
html.mo .ct-hero[data-mo="unveil"].is-in img { animation: ct-hero-zoom 4.2s cubic-bezier(.25, .6, .3, 1) var(--mo-d, 0ms) backwards; }
@keyframes ct-hero-zoom { from { scale: 1.08; } }

/* 語 ── 値（研修期間・選考について）: カードが出た後、行ごとに罫線が左から伸び（scale は 0 → 1 の縮む側だけ）、値が後から出る */
@media (min-width: 600px) {
  html.mo .ct-pcard[data-mo].is-in .ct-leader dt::after { transform-origin: 0 50%; animation: ct-leader .8s var(--mo-ease) backwards; animation-delay: calc(var(--mo-d, 0ms) + 320ms + var(--ct-i, 0) * 90ms); }
}
html.mo .ct-pcard[data-mo].is-in .ct-leader dd { animation: mo-fade .6s ease-out backwards; animation-delay: calc(var(--mo-d, 0ms) + 480ms + var(--ct-i, 0) * 90ms); }
@keyframes ct-leader { from { scale: 0 1; } }
.ct-leader-row:nth-child(2) { --ct-i: 1; } .ct-leader-row:nth-child(3) { --ct-i: 2; } .ct-leader-row:nth-child(4) { --ct-i: 3; }
.ct-leader-row:nth-child(5) { --ct-i: 4; } .ct-leader-row:nth-child(n+6) { --ct-i: 5; }

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