/* 共通部品の CSS（templates/components.mjs に対応）。値は docs/design-main.md §2 / design-recruit.md §2 の実測。
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜。
   規約: 100vh 禁止・center+overflow-x 併用禁止・overflow-x:hidden は body に付けない・タップ標的 44px・ch 単位禁止・色はトークンのみ */

/* ---------- 見出し ---------- */
.sec-head { display: grid; gap: 8px; margin-bottom: var(--head-gap); }
.sec-head.center { text-align: center; justify-items: center; }
.sec-label { font-family: var(--f-en); font-weight: 400; font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--c-orange); line-height: 1.7; }   /* 大文字化しない（参照「SEARCH by CASE」は小文字混じり。content の表記どおり） */
.sec-head.center .sec-label { text-indent: var(--ls-label); }   /* 字間ぶんの右ズレを相殺 */
.sec-title { font-size: var(--fs-h2); color: var(--c-ink-deep); }
h1.sec-title { font-size: var(--fs-h1); color: var(--c-orange); }
.sec-sub { font-size: var(--fs-small); color: var(--c-ink-soft); letter-spacing: 0; }
.sec-lead { color: var(--c-ink-soft); font-size: var(--fs-body); line-height: var(--lh-loose); max-width: 800px; }
.sec-head.center .sec-lead { margin-inline: auto; }
/* 左罫線版（H2 32 / H3 26）＋ 見出し下の点線 */
.sec-head.bar, .bar-head { border-left: 4px solid var(--c-orange); padding-left: 20px; }
.bar-head { font-size: var(--fs-h2); line-height: 1.5; margin-bottom: 16px; padding-bottom: 0; position: relative; }
h3.bar-head { font-size: var(--fs-h3); }
.bar-head small { font-size: var(--fs-small); color: var(--c-ink); letter-spacing: 0.06em; margin-left: 8px; }
.bar-head + .rule, .bar-head + .rule-after { margin-bottom: 24px; }
.bar-head-rule { border-top: var(--dash); margin: 16px 0 24px; }
.rule { border: 0; border-top: var(--dash); }
/* 下層ページの見出しブロック（グラデ帯の上） */
.page-head { padding: clamp(24px, 4vw, 64px) 0 clamp(32px, 5vw, 96px); }
.page-head .sec-head { margin-bottom: 0; }
.page-head .anchor-nav { margin-top: clamp(32px, 5vw, 96px); }
@media (min-width: 768px) and (max-width: 1079px) { .page-head { padding: 24px 0 40px; } .page-head .anchor-nav { margin-top: 32px; } }

/* ---------- ボタン ---------- */
/* 参照: 文字はピルの中央、山形「›」は右端（右 32px）に固定。ピル幅は文字幅＋余白（例: 380×78） */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 12px 60px 12px 48px; border-radius: var(--r-pill); font-family: var(--f-round); font-weight: 500; font-size: var(--fs-btn); letter-spacing: 0.06em; line-height: 1.4; text-align: center; transition: transform .2s cubic-bezier(0, 0, .99, .98), background-color .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); } }
.btn-label { flex: 0 1 auto; }
.btn-arrow { position: absolute; right: 32px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--c-peach); flex: none; }
.btn-back { padding: 12px 48px 12px 60px; }
.btn-back .btn-arrow { right: auto; left: 32px; }
.btn-primary { background: var(--c-orange); color: var(--c-white); border: 2px solid var(--c-orange); }
.btn-primary .btn-arrow { color: var(--c-white); }   /* 山形は全幅で白（現行 SP・Figma SP。2026-09-28） */
.btn-gradient { background: var(--g-orange); color: var(--c-white); }
.btn-gradient .btn-arrow { color: var(--c-white); }
.btn-outline { background: var(--c-white); color: var(--c-orange); border: 2px solid var(--c-orange); }
.btn-outline .btn-arrow { color: var(--c-orange); }
.btn-white { background: var(--c-white); color: var(--c-orange); }
.btn-white .btn-arrow { color: var(--c-orange); }
.btn-text { min-height: var(--tap); padding: 0 4px; color: var(--c-orange); border-radius: 4px; }
.btn-text .btn-arrow { position: static; margin-top: 0; color: var(--c-orange); }
.btn-sm { min-height: var(--tap); padding: 8px 36px 8px 24px; font-size: 15px; }
.btn-sm .btn-arrow { right: 16px; width: 14px; height: 14px; margin-top: -7px; }
.btn-lg { min-height: 80px; padding: 12px 48px 12px 56px; }
.btn-block { width: 100%; }
/* 採用サイト型: 右に丸矢印（白丸にオレンジ / オレンジ丸に白） */
.btn-ring { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); flex: none; }
.btn-ring .icon { width: 14px; height: 14px; }
.btn-circle { min-height: 56px; padding: 12px 16px 12px 24px; gap: 16px; }
.btn-circle.btn-primary .btn-ring { background: var(--c-white); color: var(--c-orange); }
@media (hover: hover) and (pointer: fine) { .btn-circle.btn-primary:hover { background: var(--c-white); color: var(--c-orange); } }
@media (hover: hover) and (pointer: fine) { .btn-circle.btn-primary:hover .btn-ring { background: var(--c-orange); color: var(--c-white); } }
@media (hover: hover) and (pointer: fine) { .btn-circle.btn-outline:hover { background: var(--c-orange); color: var(--c-white); } }
@media (hover: hover) and (pointer: fine) { .btn-circle.btn-outline:hover .btn-ring { background: var(--c-white); color: var(--c-orange); } }
.btn-circle .btn-label { flex: 0 1 auto; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--c-orange); font-family: var(--f-round); }
.link-arrow .icon { width: 16px; height: 16px; }
/* 丸チップ（見た目 32px。当たり判定は 44px を padding で確保） */
.chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; font-size: 13px; color: var(--c-orange); white-space: nowrap; }
.chip::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 1px solid var(--c-orange); border-radius: var(--r-pill); }
.chip.is-active { color: var(--c-white); }
.chip.is-active::before { background: var(--c-orange); }
@media (max-width: 599px) {
  .btn { min-height: 60px; padding: 10px 44px 10px 32px; font-size: 16px; }
  .btn-arrow { right: 20px; }
  .btn-back { padding: 10px 32px 10px 44px; } .btn-back .btn-arrow { left: 20px; }
  .btn-lg { min-height: 60px; }
  .btn-wide-sp { width: calc(100% - 40px); margin-inline: 20px; }
  /* 参照 440/393/344（トップ「ウララ歯科クリニックについて」314・「お口のお悩み一覧を見る」264・about「公式サイトへ」238）:
     ピル幅は文字幅＋左 26／右 57（最小 238）、高さ 60。文字は左右の余白の間で中央。山形 › は 8×13 で右端から 17（アイコン 21px を右 8） */
  .btn:where(:not(.btn-circle, .btn-text, .btn-sm)) { min-width: min(238px, 100%); max-width: 100%; padding: 10px 57px 10px 26px; }
  .btn:where(.btn-back) { padding: 10px 26px 10px 57px; }
  .btn:where(:not(.btn-text, .btn-sm)) > .btn-arrow { right: 8px; width: 21px; height: 21px; margin-top: -10.5px; }
  .btn:where(.btn-back) > .btn-arrow { right: auto; left: 8px; }
  /* 医院の見出し（参照 440: トップ WORRIES 80 幅・FEATURES 89 幅、about 83 幅。英字ラベルの下端 → H2 の上端 18〜19）。
     英字は 2026-09-25 から参照・Figma と同じ Roboto なので字間も参照どおり 0.25em（Inter の頃は幅合わせで 0.16em にしていた）。ラベルと H2 の間は −9 */
  body.area-main .sec-label { letter-spacing: 0.25em; }
  body.area-main .sec-head.center .sec-label { text-indent: 0.25em; }
  body.area-main .sec-head > .sec-label + * { margin-top: -9px; }
  /* 採用サイト型の丸矢印ボタン（参照: 18px・左 24／右 16・高さ 60）。上の .btn の 10/44/10/32 が掛かると 237→256 / 180→204 に広がる */
  .btn-circle { min-height: 60px; padding: 12px 16px 12px 24px; font-size: 18px; }
}
@media (min-width: 1080px) { .btn { min-height: 80px; padding: 12px 64px 12px 56px; } .btn-back { padding: 12px 56px 12px 64px; } .btn-sm { min-height: var(--tap); padding: 8px 36px 8px 24px; } .btn-circle { min-height: 56px; padding: 12px 16px 12px 24px; } .btn-text { min-height: var(--tap); padding: 0 4px; } }

/* ---------- クイックリンクの丸いバー ---------- */
.qlb { position: relative; }
.qlb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qlb-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 12px 8px; background: var(--c-white); border-radius: 55px; text-align: center; }
.qlb-ic { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-brown); }
.qlb-ic img, .qlb-ic svg { width: 100%; height: 100%; object-fit: contain; }
.qlb-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-round); font-size: 15px; letter-spacing: 0.06em; color: var(--c-ink-deep); }
.qlb-arrow { width: 14px; height: 14px; color: var(--c-orange); }
.qlb-label .btn-ring { width: 24px; height: 24px; }
/* 〜599（参照 440/393/344）: 楕円は幅 168（344 は (W−40−13)/2 = 146）×高さ 98、横の隙間 13・縦 12、2 列を中央寄せ。
   アイコンのインク 37 高（箱 45）→ 文字 16px（インク 14）。アイコン上端は楕円の上から 19 */
@media (max-width: 599px) {
  .qlb-list { grid-template-columns: repeat(2, minmax(0, 168px)); justify-content: center; gap: 12px 13px; }
  .qlb-link { min-height: 98px; padding: 8px; gap: 2px; border-radius: 49px; }
  .qlb-ic { width: 45px; height: 45px; }
  .qlb-label { font-size: 16px; line-height: 1.2; }
}
@media (min-width: 600px) { .qlb-link { min-height: 130px; } .qlb-ic { width: 48px; height: 48px; } .qlb-label { font-size: 16px; } }
@media (min-width: 1080px) {
  /* 白い横長バー。項目が収まらない幅ではスクロール箱（flex-start ＋ safe center。center 単独は先頭が消える） */
  .qlb-list { display: flex; justify-content: flex-start; justify-content: safe center; align-items: stretch; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--c-white); border-radius: 70px; min-height: 140px; padding: 0 24px; }
  .qlb-item { flex: 1 0 auto; display: flex; align-items: center; min-width: 160px; }
  .qlb-item + .qlb-item { border-left: 1px solid var(--c-line); }
  .qlb-link { width: 100%; min-height: 100px; background: none; border-radius: 0; padding: 12px 24px; gap: 12px; }
  .qlb-ic { width: 64px; height: 64px; }
  .qlb-label { font-size: 18px; }
}

/* ---------- 写真コラージュ ---------- */
.collage { position: relative; }
.collage-item img { width: 100%; height: 100%; border-radius: var(--r-photo); }
/* about 型: 中央テキストの四隅に 4 枚（〜767 は縮小して散る。左右の食い込みは親の clip で切る。body ではない） */
.collage-about { display: grid; grid-template-columns: 1fr; padding: 24px 0; }
.collage-about .collage-center { position: relative; z-index: 1; padding: 40px 56px; }
.collage-about .collage-item { position: absolute; z-index: 0; }
.collage-about .collage-1 { left: -8px; top: 0; width: 100px; height: 150px; }
.collage-about .collage-2 { left: -16px; bottom: 0; width: 60px; height: 100px; }
.collage-about .collage-3 { right: -12px; top: 8px; width: 60px; height: 80px; }
.collage-about .collage-4 { right: -8px; bottom: 16px; width: 90px; height: 110px; }
.collage-about .collage-item img { border-radius: 16px; }
@media (min-width: 768px) {
  .collage-about { padding: 40px 0; }
  .collage-about .collage-center { max-width: 560px; margin-inline: auto; padding: 24px 0; }
  .collage-about .collage-1 { left: 0; top: 0; width: 180px; height: 230px; }
  .collage-about .collage-2 { left: -24px; bottom: 0; width: 120px; height: 130px; }
  .collage-about .collage-3 { right: 0; top: 0; width: 110px; height: 140px; }
  .collage-about .collage-4 { right: 40px; bottom: 0; width: 180px; height: 150px; }
  .collage-about .collage-item img { border-radius: var(--r-l); }
}
/* 1080〜: 写真 4 枚は親（.container-md）基準の絶対配置。1440〜 で幅を縛る値は無い（ページ CSS が left/right を負にしてビューポート基準の位置に置く）。中央テキスト幅は --collage-center-w で上書き可 */
@media (min-width: 1080px) {
  .collage-about .collage-center { max-width: var(--collage-center-w, 640px); }
  .collage-about .collage-1 { left: 16px; width: 240px; height: 300px; }
  .collage-about .collage-2 { left: -24px; width: 145px; height: 150px; }
  .collage-about .collage-3 { right: -24px; width: 128px; height: 160px; }
  .collage-about .collage-4 { right: 60px; width: 240px; height: 200px; }
  .collage-about .collage-1 img { border-radius: var(--r-xl); }
}
/* stack 型: 大 1 枚＋小 2 枚を重ねる（採用 MESSAGE） */
.collage-stack { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: 12px; }
.collage-stack .collage-1 { grid-column: 2 / 7; grid-row: 1; }
.collage-stack .collage-2 { grid-column: 1 / 4; grid-row: 2; margin-top: -40px; z-index: 1; }
.collage-stack .collage-3 { grid-column: 4 / 7; grid-row: 2; }
.collage-stack .collage-item img { aspect-ratio: 4 / 3; }
/* row 型: 横に流れる帯（角丸 40・高さ 3 種）。マーキーは各ページ CSS で。中央揃えと overflow を併用しない */
.collage-row { display: flex; justify-content: flex-start; gap: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-inline: var(--gutter); }
.collage-row .collage-item { flex: none; width: min(60vw, 400px); }
.collage-row .collage-item img { aspect-ratio: 4 / 5; border-radius: var(--r-xxl); }
.collage-row .collage-item:nth-child(3n+2) img { aspect-ratio: 1 / 1; }
.collage-row .collage-item:nth-child(3n) img { aspect-ratio: 4 / 3; }

/* ---------- 数字タイル ---------- */
.stat { position: relative; background: var(--c-white); border-radius: var(--r-m); padding: 40px 24px 32px; text-align: center; display: grid; justify-items: center; gap: 16px; min-height: 240px; }
.stat-label { font-family: var(--f-round); font-size: 14px; letter-spacing: 0.06em; color: var(--c-ink-deep); background: var(--c-peach-soft); padding: 6px 12px; border-radius: 16px 0 16px 0; justify-self: start; position: absolute; left: 0; top: 0; }
.stat-ic { width: 100px; height: 100px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-brown); margin-top: 24px; }
.stat-ic img, .stat-ic svg { width: 100%; height: 100%; object-fit: contain; }
.stat-value { display: inline-flex; align-items: baseline; gap: 4px; color: var(--c-orange); font-family: var(--f-round); line-height: 1; margin-top: auto; }
.stat-num { font-size: var(--fs-num); }
.stat-unit { font-size: clamp(16px, 1rem + 0.5vw, 24px); }
.stat-prefix { font-size: clamp(14px, 0.875rem + 0.3vw, 20px); }
.stat-note { font-size: 13px; color: var(--c-ink-soft); }
@media (min-width: 768px) {
  .stat { padding: 48px 24px 40px; min-height: 302px; }
  .stat-label-v { writing-mode: vertical-rl; padding: 10px 6px; }
  .stat-ic { width: 143px; height: 143px; margin-top: 8px; }
}

/* ---------- 番号付きカード ---------- */
.ncard { position: relative; display: grid; gap: 16px; background: var(--c-white); border-radius: var(--r-l); padding: var(--card-pad); padding-top: calc(var(--card-pad) + 16px); color: inherit; }
.ncard .tooth-badge { position: absolute; left: 16px; top: -24px; }
.ncard-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; }
.ncard-title { font-size: var(--fs-h3); line-height: 1.6; }
.ncard-title strong { color: var(--c-orange); }
.ncard-text { line-height: var(--lh-loose); color: var(--c-ink); }
.ncard-text > * + * { margin-top: 0.8em; }
.ncard-img img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-m); }
@media (min-width: 768px) {
  .ncard:has(.ncard-img) { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
  .ncard:has(.ncard-img) .ncard-num { grid-column: 1; }
  .ncard:has(.ncard-img) .ncard-body { grid-column: 1; }
  .ncard:has(.ncard-img) .ncard-img { grid-column: 2; grid-row: 1 / 3; }
  .ncard.is-reverse:has(.ncard-img) .ncard-img { grid-column: 1; }
  .ncard.is-reverse:has(.ncard-img) .ncard-num, .ncard.is-reverse:has(.ncard-img) .ncard-body { grid-column: 2; }
}
/* 歯型バッジ（番号）: 64×62、線オレンジ、中に Inter の番号 */
.tooth-badge { position: relative; display: inline-grid; place-items: center; width: 64px; height: 62px; color: var(--c-orange); --tooth-fill: #fff; }
.tooth-badge .i-tooth { grid-area: 1 / 1; width: 100%; height: 100%; }
.tooth-badge-txt { grid-area: 1 / 1; font-family: var(--f-en); font-size: 18px; letter-spacing: 0.04em; line-height: 1; padding-bottom: 6px; }
.tooth-badge-sm { width: 40px; height: 39px; } .tooth-badge-sm .tooth-badge-txt { font-size: 12px; padding-bottom: 4px; }
/* ヒーローの数字バッジ（塗り白の歯型に 2 行） */
.tooth-tag { position: relative; display: inline-grid; place-items: center; width: 100px; height: 108px; color: var(--c-white); flex: none; }
.tooth-tag .i-tooth-fill { grid-area: 1 / 1; width: 100%; height: 100%; }
.tooth-tag-txt { grid-area: 1 / 1; font-family: var(--f-round); font-size: 16px; line-height: 1.3; letter-spacing: 0.04em; color: var(--c-orange); text-align: center; padding-bottom: 10px; }
.tooth-tag-txt strong, .tooth-tag-txt b { font-size: 22px; }
.tooth-tag .tag-sparkle { position: absolute; width: 16px; height: 16px; color: var(--c-yellow); left: -10px; bottom: 34px; }
li:last-child > .tooth-tag.has-sparkle .tag-sparkle { left: auto; right: -10px; top: 24px; bottom: auto; }   /* .tooth-tag は li の唯一の子なので .tooth-tag:last-child だと先頭の ✦ まで右上に行く → 最後の li に限定 */
@media (max-width: 599px) { .tooth-tag { width: 84px; height: 91px; } .tooth-tag-txt { font-size: 13px; } .tooth-tag-txt strong { font-size: 18px; } }
/* バッジ列（写真の下。横スクロール箱。先頭は必ず見える） */
.tooth-tags { display: flex; justify-content: flex-start; justify-content: safe center; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px var(--gutter); }

/* ---------- アイコン格子 ---------- */
.igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.igrid-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 176px; padding: 16px 8px; background: var(--c-white); border-radius: var(--r-m); text-align: center; color: var(--c-ink-deep); }
.igrid-ic { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-brown); }
.igrid-ic img, .igrid-ic svg { width: 100%; height: 100%; object-fit: contain; }
.igrid-ic.is-round { width: 80px; height: 80px; border-radius: 50%; background: var(--c-peach-soft); padding: 16px; }
.igrid-label { display: grid; font-family: var(--f-round); font-size: 14px; letter-spacing: 0.02em; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.igrid-label small { font-size: 12px; color: var(--c-ink-soft); }
.igrid-num { position: absolute; left: 12px; top: 8px; font-family: var(--f-en); font-size: 12px; letter-spacing: 0.25em; color: var(--c-orange); }
@media (min-width: 600px) { .igrid { gap: 16px; } .igrid-label { font-size: 15px; } }
@media (min-width: 768px) { .igrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .igrid-card { min-height: 226px; } .igrid-ic { width: 96px; height: 96px; } .igrid-label { font-size: 16px; } .igrid-ic.is-round { width: 120px; height: 120px; padding: 24px; } }
@media (min-width: 1080px) { .igrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .igrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .igrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- アコーディオン ---------- */
.acc-list { display: grid; gap: 16px; }
.acc-h { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.acc-btn { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; min-height: 64px; padding: 16px 20px; font-family: var(--f-round); font-size: 15px; color: var(--c-ink-deep); line-height: 1.6; }
.acc-btn > .icon { margin-left: auto; color: var(--c-orange); width: 24px; height: 24px; }
.acc-btn[aria-expanded="true"] .i-plus { display: none; }
.acc-btn[aria-expanded="false"] .i-minus { display: none; }
.acc-title { flex: 1 1 auto; }
.acc-q { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c-orange); color: var(--c-orange); font-family: var(--f-en); font-size: 16px; flex: none; }
/* 「A」の丸は濃いオレンジの塗り＋白字（2026-09-29 ユーザー指示「A は濃いオレンジ。医院も採用に合わせて」。医院・採用・トップの FAQ 共通。
   色は --c-orange-ans（主色 #E56300。9/28 より前の見た目）。大きさ・線の太さは各ページの値のまま */
.acc-q-a { background: var(--c-orange-ans); border-color: var(--c-orange-ans); color: var(--c-white); }
.acc-ic { width: 48px; height: 48px; border-radius: 8px; background: var(--c-peach-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 8px; }
.acc-panel { padding: 0 20px 24px; line-height: 2; }
.acc-panel[hidden] { display: none; }
.acc-a { display: flex; gap: 16px; align-items: flex-start; }
.acc-a-body { flex: 1 1 auto; padding-top: 6px; }
.acc-a-body > * + * { margin-top: 0.8em; }
.acc-card .acc { background: var(--c-white); border-radius: var(--r-m); }
.acc-line { gap: 0; }
.acc-line .acc { border-top: var(--dash); }
.acc-line .acc:last-child { border-bottom: var(--dash); }
.acc-line .acc-btn, .acc-line .acc-panel { padding-inline: 4px; }
.area-recruit .acc-card .acc { border-radius: var(--r-s); }
@media (min-width: 768px) {
  .acc-btn { min-height: 80px; padding: 16px 32px; font-size: 16px; gap: 24px; }
  .acc-q { width: 48px; height: 48px; }
  .acc-panel { padding: 0 32px 32px; }
  .acc-a { gap: 24px; }
  .acc-lg .acc-btn { min-height: 120px; padding: 40px; font-size: 24px; }
}

/* ---------- タブ ---------- */
.tabs-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs-list [role="tab"] { min-height: var(--tap); padding: 8px 20px; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-orange); font-family: var(--f-round); font-size: 15px; }
.tabs-list [role="tab"][aria-selected="true"] { background: var(--c-orange); color: var(--c-white); }
[role="tabpanel"][hidden] { display: none; }
/* ページ内目次ピル（白ピル 56px ＋ ⌄。折り返しで並べ、中央揃えは safe center） */
.anchor-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.anchor-pill { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 8px 16px 8px 20px; background: var(--c-white); border-radius: 28px; color: var(--c-orange); font-family: var(--f-round); font-size: 13px; letter-spacing: 0.02em; line-height: 1.4; }
.anchor-pill .icon { width: 16px; height: 16px; flex: none; }
@media (min-width: 600px) { .anchor-nav ul { gap: 16px; } .anchor-pill { font-size: 15px; padding-left: 24px; } }
@media (min-width: 768px) { .anchor-nav ul { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (min-width: 1080px) { .anchor-nav ul { display: flex; flex-wrap: wrap; justify-content: safe center; } .anchor-nav li { flex: 0 1 auto; min-width: 240px; } .anchor-pill { font-size: 16px; padding-left: 32px; padding-right: 24px; } .anchor-nav-4 li { flex-basis: calc(25% - 12px); } .anchor-nav-3 li { flex-basis: calc(33.333% - 11px); } }

/* ---------- パンくず ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--c-ink-soft); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-orange); }
.breadcrumb .icon { width: 12px; height: 12px; color: var(--c-line-2); }

/* ---------- CTA 帯 ---------- */
.cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 160px; padding: 24px 24px; border-radius: var(--r-m); color: var(--c-white); }
.cta-gradient { background: var(--g-orange); }
.cta-peach { background: var(--c-peach-soft); color: var(--c-ink-deep); }
.cta-photo { background: var(--c-orange); }
.cta-bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: clip; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-text { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.cta-en { font-family: var(--f-en); font-size: clamp(40px, 2rem + 3vw, 80px); line-height: 1; letter-spacing: 0.02em; }
.cta-title { font-family: var(--f-round); font-size: clamp(20px, 1.25rem + 0.8vw, 32px); letter-spacing: 0.06em; }
.cta-sub { font-family: var(--f-round); font-size: clamp(14px, 0.875rem + 0.5vw, 24px); letter-spacing: 0.06em; }
/* 採用の写真カードの補足（下部 CTA の案 r13「見学に履歴書は不要です」・r06「院内見学は随時受け付けています」。2026-09-30〜。旗が立ったときだけ HTML に出る）:
   題の横に並べず、いつも題の下の行に（幅によって横に並んだり下に落ちたりしない）。
   折れるときは文節で、行の長さをそろえて（841 の 2 列の写真カードで「…不要で／す」と 1 字だけ落ちていた）。
   auto-phrase の無い Safari は、content の文言に置いた折れ目（U+200B。/1min の見出しと同じ目印）でだけ折る keep-all にする。
   目印が無い keep-all は「院内見学は随時受／け付けています」のような語の途中の折れを直せず、目印の無い所で詰まると「（」が行末に残ったので、
   案の文言には必ず目印を置く（content/recruit/*.json の ctaProposals。2026-09-30 確認役が WebKit で確認）。入り切らないときだけ anywhere で折る */
:where(body.area-recruit) .cta-sub { flex-basis: 100%; text-wrap: balance; word-break: auto-phrase; }
@supports not (word-break: auto-phrase) { :where(body.area-recruit) .cta-sub { word-break: keep-all; overflow-wrap: anywhere; } }
.cta-btns { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.cta-ring { position: relative; z-index: 1; width: 40px; height: 40px; background: var(--c-white); color: var(--c-orange); }
.cta-ring .icon { width: 18px; height: 18px; }
.cta-smile { left: 40px; top: -20px; opacity: 0.12; }
.cta-peach .cta-ring { background: var(--c-orange); color: var(--c-white); }
@media (min-width: 768px) { .cta { min-height: 224px; padding: 32px 48px; } .cta-ring { width: 64px; height: 64px; } .cta-ring .icon { width: 28px; height: 28px; } }
/* リンクカード（面ピーチ or 白、左に文字、右に丸矢印） */
.link-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 88px; padding: 20px 24px; background: var(--c-peach-soft); border-radius: var(--r-m); color: var(--c-ink-deep); }
.link-card.is-white { background: var(--c-white); }
.link-card-label { display: grid; font-family: var(--f-round); font-size: 16px; letter-spacing: 0.06em; }
.link-card-label small { font-size: 13px; color: var(--c-ink-soft); }
/* 採用の下部 CTA の案の白カード（2026-09-30〜。旗が立ったときだけ HTML に .link-card-phrase が出る。templates/recruit/_cta.mjs）:
   題が長い（「歯科医師臨床研修（研修医の方）」「未経験・ブランクについて（よくある質問）」など）ので、344 でも語の途中で折らず文節で、行の長さをそろえて折る */
.link-card-phrase .link-card-label { text-wrap: balance; word-break: auto-phrase; }
/* Safari（auto-phrase が無い）は、content の題に置いた折れ目（U+200B）でだけ折る（上の .cta-sub と同じ。目印が無いと「よくある質問（働き／方・…）」と語の途中で折れていた） */
@supports not (word-break: auto-phrase) { .link-card-phrase .link-card-label { word-break: keep-all; overflow-wrap: anywhere; } }
.link-card .btn-ring { width: 40px; height: 40px; }
.link-card .btn-ring .icon { width: 18px; height: 18px; }
@media (min-width: 768px) { .link-card { min-height: 120px; padding: 40px; } .link-card-label { font-size: 18px; } }

/* ---------- グラフ ---------- */
.chart { margin: 0; display: grid; justify-items: center; gap: 12px; }
.chart svg { max-width: 100%; height: auto; font-family: var(--f-round); }
.chart-title { font-family: var(--f-round); font-size: 14px; color: var(--c-ink-deep); }
.pie-label { font-size: 14px; }
.pie-val { font-size: 22px; }
.pie-unit { font-size: 14px; }
.pie-legend { display: grid; gap: 8px; font-size: 14px; color: var(--c-ink-deep); text-align: left; }
.pie-legend li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
.pie-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; }
.bar-val { font-size: 16px; }
.bar-unit { font-size: 11px; }
.bar-name { font-size: 13px; fill: var(--c-ink-deep); }
.bar-sub { font-size: 10px; fill: var(--c-ink-deep); }
@media (min-width: 768px) { .chart-pie-wide { grid-template-columns: auto 1fr; align-items: center; text-align: left; } }

/* ---------- 人物カード ---------- */
.staff-card { display: grid; gap: 20px; background: var(--c-white); border-radius: var(--r-l); padding: var(--card-pad); color: inherit; }
.staff-photo img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-m); }
.staff-role { font-size: 14px; color: var(--c-orange); letter-spacing: 0.06em; }
.staff-name { font-size: var(--fs-h3); color: var(--c-brown); margin-top: 4px; }
.staff-en { font-family: var(--f-en); font-size: 13px; letter-spacing: 0.15em; color: var(--c-ink-soft); margin-left: 8px; }
.staff-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.staff-tags li { font-size: 12px; color: var(--c-orange); border: 1px solid var(--c-orange); border-radius: var(--r-pill); padding: 2px 10px; }
.staff-text { margin-top: 16px; line-height: 2; font-size: var(--fs-small); color: var(--c-ink); }
.staff-text > * + * { margin-top: 0.8em; }
@media (min-width: 768px) { .staff-card { grid-template-columns: minmax(200px, 2fr) 3fr; gap: 40px; align-items: start; } }
/* 先輩スタッフの声（写真 4:5・引用オレンジ 22・氏名・所属） */
.iv-card { display: grid; gap: 16px; background: var(--c-white); border-radius: var(--r-m); padding: 16px 16px 24px; color: inherit; }
.iv-photo img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-m); }
.iv-quote { font-family: var(--f-round); font-size: clamp(18px, 1.1rem + 0.3vw, 22px); color: var(--c-orange); line-height: 1.7; }
.iv-name { font-size: clamp(18px, 1.1rem + 0.3vw, 22px); color: var(--c-ink-deep); margin-top: 8px; line-height: 1.4; }
.iv-meta { font-size: 13px; color: var(--c-ink-soft); }
/* 先輩スタッフの声の押せる印（修正リスト No.72 の別案。旗 v72a〜v72c が立ったときだけ HTML にクラスが出る。templates/components.mjs の interviewCard の cue）。
   丸矢印は職種カード・リンクカードと同じ .btn-ring（オレンジの丸に白の矢印）。指で触る端末でも見えるよう、ホバーに頼らない（ホバーは今までどおり縁の色だけ。hover.css） */
.iv-cue-ring .iv-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.iv-cue-ring .iv-who { min-width: 0; }
.iv-cue-ring .iv-ring { width: 32px; height: 32px; }
.iv-cue-ring .iv-ring .icon { width: 16px; height: 16px; }
/* v72b（2026-10-05 ユーザー指示「スマホの方で『インタビューを読む』ってボタンをカードの中に入れた形で」）: 所属の下に枠線のピル（.btn-circle.btn-outline と同じ白地・オレンジの枠と字・オレンジの丸矢印）。
   カード全体が 1 つのリンク（a.iv-card）なので、中身は span で見た目だけボタンにする（a や button を入れ子にしない）。高さ 48 で指の標的 44 以上。
   出すのはスマホ幅（〜767）と、マウスの無い端末（iPad・開いた折りたたみ）。マウスのある 768〜 は今までどおりホバーで縁がオレンジになるだけ（hover.css） */
.iv-cue-read .iv-more { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; margin-top: 20px; padding: 8px 16px 8px 24px; border: 2px solid var(--c-orange); border-radius: var(--r-pill); background: var(--c-white); font-family: var(--f-round); font-weight: 500; font-size: 15px; letter-spacing: 0.06em; color: var(--c-orange); }
.iv-cue-read .iv-more-ring { width: 24px; height: 24px; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) { .iv-cue-read .iv-more { display: none; } }
.iv-cue-photo .iv-photo { position: relative; }
.iv-cue-photo .iv-photo img { display: block; }
.iv-cue-photo .iv-photo-ring { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; }
.iv-cue-photo .iv-photo-ring .icon { width: 18px; height: 18px; }
/* 職種カード（アーチ型・写真が上からはみ出す） */
.job-card { display: grid; grid-template-rows: auto 1fr; background: var(--c-white); border-radius: 200px 200px 16px 16px; padding: 0 20px 28px; margin-top: 60px; text-align: center; color: var(--c-ink-deep); }
.job-photo { margin-top: -60px; display: flex; justify-content: center; }
.job-photo img { width: 70%; max-width: 260px; aspect-ratio: 4 / 5; object-fit: contain; object-position: bottom; border-radius: 0; }
.job-label { font-size: 13px; color: var(--c-ink-soft); }
.job-title { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(20px, 1.25rem + 0.3vw, 24px); color: var(--c-ink-deep); margin-top: 8px; }
.job-en { font-family: var(--f-en); font-size: 12px; letter-spacing: 0.25em; color: var(--c-orange); margin-top: 8px; }
/* 職種一覧 jobGrid()（2026-09-28。採用トップ WORK の職種カードをそのまま共通にしたもの。値は recruit/home.css の .rh-job* と同じ＝トップが手本）:
   〜599: 1 列 340 幅・間 80。カード 340×360 のアーチ（内側 40/24）、写真 220 幅が上辺から 53 はみ出す、職種名 24px＋丸 32、英字 13px。飾り 70（±20° 回転）。
   600〜1079: 1 列 460 幅（768〜 は間 48・職種名 22px）。写真はカードの上 90 はみ出す。飾り 64。
   1080〜（Figma 245:5118 の中身 56:4106）: 3 列（間 24）。カード 400×560・角丸 上 216 下 16・白。人物写真の枠 334×449 の下端がカード上端から 380、
     下 56 から上へ 英字（Roboto 16 字間 4px）→ 8 → 職種名 24px ＋ 24 ＋ 丸 40。飾り 100: 1 枚目 左 −50・上 100（−14°）、2 枚目 左 81.5%・上 318（15°）、3 枚目 左 76.25%・上 3（15°）。
   飾りは包みの外へはみ出すので、置く節の側で横を切る（overflow-x: clip） */
.job-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 460px; margin-inline: auto; }
.job-item { position: relative; }
.job-deco { position: absolute; z-index: 2; width: 64px; height: 64px; pointer-events: none; }
.job-deco img { width: 100%; height: 100%; object-fit: contain; }
.job-item-1 .job-deco { left: -8px; top: 36%; }
.job-item-2 .job-deco { right: -8px; bottom: 15%; }
.job-item-3 .job-deco { left: -8px; bottom: 15%; }
.job-item .job-card { margin-top: 90px; padding-bottom: 40px; }
.job-item .job-photo { margin-top: -90px; }
.job-item .job-photo img { width: 66%; max-width: 280px; }
.job-item .job-title .btn-ring { width: 32px; height: 32px; }
.job-item .job-title .btn-ring .icon { width: 16px; height: 16px; }
.job-item .job-en { font-weight: 400; }
@media (min-width: 768px) {
  .job-grid { gap: 48px; }
  .job-item .job-title { font-size: 22px; gap: 10px; }
}
@media (min-width: 1080px) {
  .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin-inline: 0; }
  .job-deco { width: 100px; height: 100px; }
  .job-item-1 .job-deco { left: -50px; top: 100px; right: auto; bottom: auto; transform: rotate(-14deg); }
  .job-item-2 .job-deco { left: 81.5%; top: 318px; right: auto; bottom: auto; transform: rotate(15deg); }
  .job-item-3 .job-deco { left: 76.25%; top: 3px; right: auto; bottom: auto; transform: rotate(15deg); }
  .job-item .job-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 560px; margin-top: 0; padding: 0 24px 56px; border-radius: 216px 216px 16px 16px; }
  .job-item .job-photo { position: absolute; left: 0; right: 0; bottom: calc(100% - 380px); margin-top: 0; justify-content: center; pointer-events: none; }
  .job-item .job-photo img { width: 86.25%; max-width: 345px; height: auto; aspect-ratio: auto 519 / 674; }
  .job-item .job-body { position: relative; }
  .job-item .job-title { justify-content: center; margin-top: 0; font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; gap: 24px; }
  .job-item .job-title .btn-ring { width: 40px; height: 40px; }
  .job-item .job-title .btn-ring .icon { width: 26px; height: 26px; }
  .job-item .job-en { margin-top: 8px; font-size: 16px; line-height: 1.7; letter-spacing: 4px; }
}
@media (max-width: 599px) {
  .job-grid { gap: 80px; max-width: 340px; }
  .job-item .job-card { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 28px; height: 360px; margin-top: 0; padding: 40px 24px; }
  .job-item .job-photo { margin-top: 0; }
  .job-item .job-photo img { width: 220px; max-width: none; height: auto; aspect-ratio: auto 4 / 3; }
  .job-item .job-title { font-size: 24px; line-height: 1.4; gap: 8px; margin-top: 0; }
  .job-item .job-title .btn-ring .icon { width: 27px; height: 27px; }
  .job-item .job-title .btn-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }
  .job-item .job-en { font-size: 13px; line-height: 1.7; letter-spacing: 0.14em; margin-top: 10px; }
  .job-deco { width: 70px; height: 70px; }
  .job-item-1 .job-deco { left: -19px; top: 52px; right: auto; bottom: auto; transform: rotate(-20deg); }
  .job-item-2 .job-deco { right: -29px; bottom: 27px; left: auto; top: auto; transform: rotate(20deg); }
  .job-item-3 .job-deco { left: -28px; bottom: 84px; right: auto; top: auto; transform: rotate(-20deg); }
}
/* 飾りのふわふわ（motion.css の .mo-float）は 3 つの位相をずらす */
html.mo .job-item-2 .job-deco .mo-float { animation-delay: -1.7s; }
html.mo .job-item-3 .job-deco .mo-float { animation-delay: -3.4s; }

/* ---------- 自動送りのカルーセル（components.mjs の autoCarousel・assets/js/carousel-auto.js。2026-09-29 採用トップの先輩スタッフの声 〜767） ----------
   並び（.acar-track）を横スクロールにする幅と、カードの幅・余白はページ CSS が決める（採用トップは recruit/home.css の「10b. INTERVIEWS のカルーセル」）。
   ここは操作列（.acar-ctrl）だけ: 左に「止める／再開する」、中央に「‹ 位置の印 ›」（1fr auto 1fr の 3 列。止めるボタンが隠れても ‹ › は中央のまま）。
   丸は医院トップの特長 11 選の ‹ ›（main/home.css の .feat-nav-btn）と同じ形: 白地＋オレンジ 2px の線・48（タップ 44 以上）・押すと 0.94 倍・
   マウスの端末のホバーでオレンジ塗り＋白い線、‹ › の矢印は進む向きへ 3px。止める／再開するは線 2 の「‖」と「▷」（止めたら ▷。.acar.is-stopped）。
   位置の印: 点（当たり判定 44×44・見た目 12 の丸。今の 1 枚は aria-current でオレンジ塗り。押すとその 1 枚へ）か「2 / 6」の数（今の番号だけオレンジ）。
   既定は点。狭い幅で点が入らないときはページ CSS が .acar-dots を隠して .acar-count を出す。
   JS が無いとき・カルーセルにしない幅では hidden のまま（手で送る並びだけ。点も数も出さない） */
.acar-ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 16px; }
.acar-ctrl[hidden] { display: none; }
.acar-play { grid-column: 1; justify-self: start; }
.acar-nav { grid-column: 2; display: flex; align-items: center; gap: 4px; }
.acar-btn { --acar-size: 48px; display: inline-grid; place-items: center; flex: none; width: var(--acar-size); height: var(--acar-size); margin: 0; padding: 0;
  border: 2px solid var(--c-orange); border-radius: 50%; background: var(--c-white); color: var(--c-orange); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: var(--t-hover); }
.acar-btn[hidden] { display: none; }
.acar-btn .icon { width: 22px; height: 22px; transition: transform .3s var(--ease-hover, ease); }
.acar-btn:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.acar-btn:active { transform: scale(.94); }
.acar-play .acar-i-play, .acar.is-stopped .acar-play .acar-i-pause { display: none; }
.acar.is-stopped .acar-play .acar-i-play { display: block; }
.acar-dots { display: flex; }
.acar-dot { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.acar-dot::before { content: ""; box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--c-orange); border-radius: 50%; background: var(--c-white);
  transition: background-color .3s var(--ease-hover, ease); }
.acar-dot[aria-current="true"]::before { background: var(--c-orange); }
.acar-dot:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -8px; border-radius: 50%; }
.acar-count { display: none; min-width: 60px; margin: 0; text-align: center; font-family: var(--f-en); font-size: 16px; line-height: 1; letter-spacing: 0.06em;
  color: var(--c-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acar-count-cur { color: var(--c-orange); font-weight: 700; }
/* 自動送りで動いている間だけ吸い付きを切る（JS が scrollLeft を 1 コマずつ書く。吸い付きが残ると途中の位置で引き戻される） */
.acar-track.is-acar-moving { scroll-snap-type: none; }
@media (hover: hover) and (pointer: fine) {
  .acar-btn:hover { background: var(--c-orange); color: var(--c-white); }
  .acar-prev:hover .icon { transform: translateX(-3px); }
  .acar-next:hover .icon { transform: translateX(3px); }
  .acar-dot:not([aria-current="true"]):hover::before { background: var(--c-peach); }
}

/* ---------- 料金（行カード） ---------- */
.price-list { display: grid; gap: 24px; }
.price-row { display: grid; gap: 12px; background: var(--c-white); border-radius: var(--r-m); padding: 16px; }
.price-img img { width: 100%; aspect-ratio: 286 / 190; border-radius: 0; }
.price-noimg { display: block; width: 100%; aspect-ratio: 286 / 190; background: var(--c-line); }
.price-name { font-size: var(--fs-h4); color: var(--c-ink-deep); }
.price-desc { font-size: var(--fs-small); line-height: 1.8; color: var(--c-ink); margin-top: 8px; }
.price-desc > * + * { margin-top: 0.6em; }
.price-note { font-size: 13px; color: var(--c-ink-soft); margin-top: 8px; }
.price-cell { display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 80px; padding: 12px 16px; background: var(--c-peach-soft); border-radius: var(--r-s); margin-top: auto; }
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price-label { font-size: 14px; color: var(--c-ink-deep); }
.price-amount { font-family: var(--f-en); font-size: 24px; letter-spacing: 0.04em; color: var(--c-orange); }
@media (min-width: 768px) and (max-width: 1079px) { .price-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
@media (min-width: 1080px) {
  .price-list { gap: 0; }
  .price-row { grid-template-columns: 286px 1fr 280px; align-items: center; gap: 32px; background: none; border-radius: 0; padding: 32px 0; border-bottom: var(--dash); }
  .price-row:first-child { border-top: var(--dash); }
  .price-cell { min-height: 120px; margin-top: 0; }
}

/* ---------- お知らせ一覧 ---------- */
.news-list { display: grid; }
.news-row { border-bottom: var(--dash); }
.news-row:first-child { border-top: var(--dash); }
.news-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; padding: 12px 4px; }
.news-date { font-family: var(--f-en); font-size: 13px; letter-spacing: 0.06em; color: var(--c-ink-soft); }
.news-title { flex: 1 1 100%; font-size: 16px; color: var(--c-orange); line-height: 1.6; }
@media (min-width: 768px) { .news-title { flex-basis: 0; min-width: 240px; } }

/* ---------- 装飾 ---------- */
/* スマイル U マーク。--smile-w で幅、位置は pos。親に data-allow-bleed（overflow:clip）。body で隠さない */
.smile { position: absolute; z-index: 0; pointer-events: none; width: var(--smile-w, 480px); max-width: 90vw; }
.smile .icon { width: 100%; height: auto; display: block; }
.smile-line { color: var(--c-line); }
.smile-white { color: var(--c-white); }
.smile-peach { color: var(--c-peach-soft); }
.smile-orange { color: var(--c-orange); }
.smile-tl { left: -8%; top: -6%; }
.smile-tr { right: -8%; top: -6%; }
.smile-bl { left: -8%; bottom: -8%; }
.smile-br { right: -8%; bottom: -8%; }
.smile-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.smile.is-flip .icon { transform: scaleX(-1); }
.has-smile { position: relative; }
.has-smile > :not(.smile) { position: relative; z-index: 1; }
/* 白い楕円パネル（横に溢れるので親で clip。body ではない） */
.oval { position: relative; padding-block: clamp(48px, 6vw, 120px); }
.oval::before { content: ""; position: absolute; inset: 0 -20%; background: var(--c-white); border-radius: 50% / 40%; z-index: 0; }
.oval-inner { position: relative; z-index: 1; }
/* 定義リスト（募集要項。語＋点線＋値） */
.dl { display: grid; }
.dl-row { display: grid; gap: 4px; padding: 16px 0; border-bottom: var(--dash); }
.dl dt { font-size: var(--fs-h4); color: var(--c-ink-deep); }
.dl dd { margin: 0; color: var(--c-ink-soft); line-height: 1.9; }
@media (min-width: 768px) { .dl-row { grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; } }
/* 下部ナビ 4 カード（角にオレンジの角ボタンが食い込む） */
.bnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bnav-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 176px; padding: 20px 12px 28px; background: var(--c-white); border-radius: var(--r-l); overflow: clip; text-align: center; }
.bnav-ic { width: 56px; height: 56px; color: var(--c-brown); display: inline-flex; align-items: center; justify-content: center; }
.bnav-ic img, .bnav-ic svg { width: 100%; height: 100%; object-fit: contain; }
.bnav-label { font-family: var(--f-round); font-size: 16px; color: var(--c-orange); letter-spacing: 0.06em; }
.bnav-btn { position: absolute; right: 0; bottom: 0; width: 48px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-orange); color: var(--c-white); border-radius: 8px 0 0 0; }
.bnav-btn .icon { width: 16px; height: 16px; }
@media (min-width: 768px) { .bnav { gap: 16px; } .bnav-card { min-height: 212px; } .bnav-ic { width: 64px; height: 64px; } .bnav-label { font-size: 18px; } }
@media (min-width: 1080px) {
  .bnav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  /* Figma Page Link 503:4086（272×218・アイコン 100×72 を上 51・文字 20px/1.7 字間 6%・右下 44×40）。price はこの既定のまま、about・case-index・1min はページ側で同値か微調整 */
  .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 51px 12px 0; border-radius: 16px; }
  .bnav-ic { width: 100px; height: 72px; }
  .bnav-label { margin-top: 14px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .bnav-btn { width: 44px; height: 40px; border-radius: 4px 0 16px 0; }
}
/* 汎用グリッド・カード */
.grid { display: grid; gap: var(--grid-gap, 16px); grid-template-columns: 1fr; }
.grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .grid { --grid-gap: 20px; } }
@media (min-width: 768px) { .grid { --grid-gap: 24px; } .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { background: var(--c-white); border-radius: var(--r-l); }
.card-peach { background: var(--c-peach-soft); }
.card-pad-s { padding: 20px; } .card-pad-m { padding: var(--card-pad); } .card-pad-l { padding: var(--card-pad-l); }
.area-recruit .card { border-radius: var(--r-m); }

/* ---------- 電話カード（ピーチの面に 見出し・本文 ／ 受話器の丸＋番号。部品は templates/main/_cta.mjs の telCard・telLink） ----------
   2026-09-30 下部 CTA の見直し案（content/cta-proposals.json・docs/CTA.md）で、症状ページの電話カード（c13〜c16）を /1min・/case・/price・/faq の
   予約の帯（c03）・お知らせ詳細の電話の 1 行（c08）でも使うため、main/case.css からここへ移した（値は 9/24 まで症状ページに出していたものと同じ）。
   旗がオフのページにはこのクラスの要素が無い。症状ページだけの間隔（.case-cta の下・.case-back）は main/case.css のまま */
.case-cta-card { display: grid; gap: 20px; padding: 28px 20px; text-align: center; }
.case-cta-title { font-family: var(--f-round); font-size: var(--fs-h4); color: var(--c-ink-deep); letter-spacing: 0.06em; line-height: 1.6; text-wrap: balance; }
.case-cta-note { margin-top: 6px; font-size: var(--fs-small); color: var(--c-ink-soft); line-height: 1.8; }
/* 344 で電話番号が折れないよう: 番号は nowrap・リンクの左右 padding は 0（48 + 14 + 26px×12 字 ≈ 280 ≤ 304） */
.case-cta-tel { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: var(--tap); max-width: 100%; margin-inline: auto; padding: 8px 0; border-radius: var(--r-m); color: var(--c-orange); }
.case-cta-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-white); color: var(--c-orange); flex: none; }
.case-cta-ic .icon { width: 22px; height: 22px; }
.case-cta-body { display: grid; min-width: 0; text-align: left; line-height: 1.3; }
.case-cta-label { font-family: var(--f-round); font-size: var(--fs-xs); color: var(--c-ink-soft); letter-spacing: 0.06em; }
.case-cta-num { font-family: var(--f-en); font-size: 26px; letter-spacing: 0.02em; color: var(--c-orange); white-space: nowrap; }
.case-cta-hours { font-size: var(--fs-xs); color: var(--c-ink-soft); letter-spacing: 0.02em; }
.case-cta-hours > span { white-space: nowrap; }   /* 「完全予約制・年中無休 ／ 9:00 - 18:00 ／（最終受付 17:30）」の塊の中では折らない（_cta.mjs の hoursLine。予約の帯 c03・急ぎ型 c14） */
@media (min-width: 600px) { .case-cta-num { font-size: 30px; letter-spacing: 0.04em; } .case-cta-tel { padding-inline: 12px; } }
@media (min-width: 768px) {
  .case-cta-card { grid-template-columns: 1fr auto; align-items: center; text-align: left; padding: 32px 40px; gap: 24px 32px; }
  .case-cta-tel { margin-inline: 0; }
  .case-cta-num { font-size: 32px; }
}
@media (min-width: 1080px) { .case-cta-num { font-size: 36px; } }
/* 841×701（横向き）でカードが縦に伸びすぎないよう、768〜1079 は余白を詰める */
@media (min-width: 768px) and (max-width: 1079px) { .case-cta-card { padding: 28px 32px; } }

/* ---------- 下部 CTA の見直し案の置き場（医院。templates/main/_cta.mjs。旗がオフのページには無い） ----------
   予約の帯 .cta-rsv（c03）: 電話カード 1 つを本文の幅（container-text）で。上下の間はページ CSS が前後の節に合わせて足す（既定は下だけ）。
   文字リンクの列 .cta-links（c07・c09・c12・c15）: link-arrow（高さ 44）を中央に横並び、入らなければ折り返す。
   「チャットで聞く」.cta-chat（c06・c12）: 既存の btn-outline を中央に */
.cta-rsv { padding-bottom: clamp(40px, 5vw, 64px); }
/* 案で文言を替えた電話カード（予約の帯 c03・急ぎ型 c14 .is-urgent・訪問型 c16 .is-visit）の本文は、最後の行に「さい。」「い。」だけが残らないよう組む
   （393 の /1min「…ご予約くだ／さい。」・360 の急ぎ型「…ご相談くださ／い。」。2026-09-30 確認役）。c13 の既定の文言は 9/24 までの見た目のまま触らない */
:is(.cta-rsv, .case-cta-card.is-urgent, .case-cta-card.is-visit) .case-cta-note { text-wrap: pretty; }
/* 予約の帯の見出し（「ご来院の前にご予約ください」・/1min は「ご予約について」）は 768〜1079 で折らない。右の電話の列が時間の行を 1 行に並べて 401px 取り、
   768〜840 で見出しの列が 191〜223px しかなく「ご来院の前にご／予約ください」と語の途中で折れていた。
   時間の行も「（最終受付 17:30）」の前で 2 行に固定して電話の列を細くする（/1min は本文が 2 文あり、768 で本文の列が 191px しかなかった） */
@media (min-width: 768px) and (max-width: 1079px) {
  .cta-rsv .case-cta-title { white-space: nowrap; }
  .cta-rsv .case-cta-hours > span:last-child { display: block; }
}
.cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; }
.cta-links > li { display: flex; }
.cta-chat { text-align: center; }
/* 下部 4 カードの予備「料金表」の絵（採用の「数字で見る」の紙幣 2 枚 bde76812。site.json の pageNavSpare）は正方形の枠に余白が多く（絵は高さの 64%）、
   横長のアイコン枠（100×72 など）ではほかの 3 枚より一回り小さく見える → cover で枠の高さに合わせる（上下の切れる所は余白だけ。枠の縦横比 1.54 までは絵が欠けない） */
.bnav-ic img[src*="/bde76812."] { object-fit: cover; }

/* ---------- 〜599 / 〜767: ページ担当から上がった共通値（2026-09-24 参照 ip440/ip393/fold344 の画素で確認） ----------
   ページ CSS の上書きが勝つよう、ここは :where() で詳細度を .class 1 個ぶんに抑える（同じ値を書いたページ CSS はそのまま残してよい） */
@media (max-width: 767px) {
  /* 採用の下層見出し（参照 about/work/faq/entry/interviews: 英字ラベルの字頭 y127 = ヘッダー 70 ＋ 上余白 50 ＋ 字頭まで 7）。H1 32px は折り返しを balance にしない。
     容器 W−80 はページごとの gutter（20 / 32）と目次ピルの幅が絡むので、ここでは入れない（clinical/goal/interviews の各ページ CSS が持つ） */
  :where(body.area-recruit) .page-head { padding: 50px 0 32px; }
  :where(body.area-recruit .page-head) h1.sec-title { font-size: 32px; text-wrap: wrap; }
}
@media (max-width: 599px) {
  /* 採用の見出し: 英字 16px・字間 0.2em（中央寄せは text-indent で相殺）→ 15 → H2 24px/1.7。見出し → 本文 40（採用トップは各所で個別の値を持つので除く） */
  :where(body.area-recruit:not(.page-recruit-home)) { --head-gap: 40px; }
  :where(body.area-recruit) .sec-head { gap: 15px; }
  :where(body.area-recruit) .sec-label { font-size: 16px; letter-spacing: 0.2em; }
  :where(body.area-recruit) .sec-head.center .sec-label { text-indent: 0.2em; }
  :where(body.area-recruit) .sec-title:not(h1) { font-size: 24px; line-height: 1.7; }

  /* 下部ナビ 4 枚（参照 case/price/about/1min の 440・344 で同値）: カード 170 高・間 12・角丸 8、アイコン 80×80 を上 22（病院アイコンのインク 74×49 が上 36）、
     文字 18px/1.7・字間 0.06em をアイコンの直下（字頭 y109）。右下の橙 32×30・角なし、矢印は 18（インク 7×11） */
  .bnav { gap: 12px; }
  .bnav-card { min-height: 170px; justify-content: flex-start; gap: 0; padding: 22px 12px 0; border-radius: 8px; }
  .bnav-ic { width: 80px; height: 80px; }
  .bnav-label { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; }
  .bnav-btn { width: 32px; height: 30px; border-radius: 0; }
  .bnav-btn .icon { width: 18px; height: 18px; }

  /* 医院の帯見出し（参照 case/faq/price/privacy: 帯 4×32 は左 20、字は左 41。24px/1.7 の行の中で帯は上下中央（24px で上 4.4）。
     staff は帯 45（行の高さいっぱい＝左罫線）なので、見出し直後に .bar-head-rule が来る型は従来の border-left のまま） */
  :where(body.area-main) .bar-head:where(:not(:has(+ .bar-head-rule))) { position: relative; border-left: 0; padding-left: 20px; font-size: 24px; line-height: 1.7; text-wrap: wrap; }
  :where(body.area-main) .bar-head:where(:not(:has(+ .bar-head-rule)))::before { content: ""; position: absolute; left: 0; top: calc(0.85em - 16px); width: 4px; height: 32px; background: var(--c-orange); }

  /* ページ内ピル。医院（参照 price/case）: 14px・高さ 56・2 列の間 12×6・⌄ 22（インク 11×6〜7）。
     採用（参照 faq/entry/data）: 1 列で幅 min(300, 画面 − 80) を中央・高さ 54・間 15・15px/0.04em・左 27／右 29・⌄ 18 */
  :where(body.area-main) .anchor-nav ul { gap: 12px 6px; }
  :where(body.area-main) .anchor-pill { min-height: 56px; padding: 6px 13px 6px 18px; font-size: 14px; line-height: 1.6; }
  :where(body.area-main) .anchor-pill .icon { width: 22px; height: 22px; }
  :where(body.area-recruit) .anchor-nav ul { grid-template-columns: minmax(0, min(300px, 100vw - 80px)); justify-content: center; gap: 15px; }
  :where(body.area-recruit) .anchor-pill { min-height: 54px; padding: 8px 29px 8px 27px; font-size: 15px; letter-spacing: 0.04em; }
  :where(body.area-recruit) .anchor-pill .icon { width: 18px; height: 18px; }

  /* 医院のアイコン格子（参照 トップ WORRIES・1min 診療科目で同値）: 2 列の間 8、1 行の札は 165＋行間 10（参照は 167＋8 で行の送り 175 は同じ）、角丸 16。
     アイコン 99 を上 16（インクは上 29〜43）→ 6 → 文字 14px・字間 0.06em（1 行の字頭 y126）。上下の寄せ（justify-content）はページ側の持ち物なので触らない */
  :where(body.area-main) .igrid { gap: 10px 8px; }
  :where(body.area-main) .igrid-card { min-height: 165px; gap: 6px; padding: 16px 8px 16px; border-radius: 16px; }
  :where(body.area-main) .igrid-ic { width: 99px; height: 99px; }
  :where(body.area-main) .igrid-label { font-size: 14px; letter-spacing: 0.06em; line-height: 1.7; }

  /* 歯型バッジ（既定サイズ。参照 about FEATURES・1min SAFETY）: 41×40、番号 16px。字間 0.1em はページ側（about/1min）が持つ（トップ FEATURES・1min FLOW は大きさも個別） */
  .tooth-badge:where(:not(.tooth-badge-sm)) { width: 41px; height: 40px; }
  .tooth-badge:where(:not(.tooth-badge-sm)) .tooth-badge-txt { font-size: 16px; }

  /* 採用の丸矢印（参照 data の RECRUIT INFO）: リンクカードは丸 24 に山形 20（インク 5×10・線 1px）、写真 CTA は丸 40 に山形 32（インク 9×18・線 1.5px）。
     リンクカードの線は拡大率に左右されない 1px（about/environment/work は山形を 14 にしているが、線の太さはこれで揃う） */
  .link-card .btn-ring { width: 24px; height: 24px; }
  .link-card .btn-ring .icon { width: 20px; height: 20px; }
  .link-card .btn-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
  .cta-ring .icon { width: 32px; height: 32px; }
  .cta-ring .icon path { stroke-width: 1.1; }
}

/* ---------- 1080〜: Figma の共通部品の値（2026-09-25。ページ CSS の個別指定はそのまま勝つ） ----------
   ボタン（医院 btn 266:85 / 279:1262 / 482:329）: 高さ 79（上下 24 ＋ 18px/1.7）・角丸 40・文字 18px 字間 6%・白。山形 7×13 は右端から 32（白）。
     既定（385 幅）は文字の左 48、short（280 幅）は文字が中央 → 左右 60 の対称で両方ほぼ一致（385 → 387）。最小幅 280。塗り #E36200（グラデ版は #E36200 → #EEAD75）。
   採用の丸矢印ボタン（139:6040）: 高さ 56・左 24 右 16・間 16・丸 32・18px 字間 6%。
   見出し（医院 462:235・採用 Frame 168）: 英字 Roboto 16px 字間 25%・オレンジ → すぐ下（間 0）に H2 32px/1.7 字間 6% #271200。
   採用の CTA（72:1016）: 写真カード 628×224・角丸 40・左右 80・文字 32px 字間 6% 白・丸 64 白。ENTRY 帯 1280×320・角丸 40・左右 80・ENTRY Roboto 80px 字間 12px ＋ 32 ＋「エントリー」24px #F7E7DB。
   リンクカード（56:4427）: 白・角丸 16・余白 40・20px 字間 6% #271200・丸 40 */
@media (min-width: 1080px) {
  .btn:where(:not(.btn-sm, .btn-circle, .btn-text)) { min-height: 79px; min-width: 280px; padding: 0 60px; border-radius: 40px; font-size: 18px; letter-spacing: var(--ls-btn); line-height: 1.7; }
  .btn:where(.btn-primary) { background: var(--c-orange-2); border-color: var(--c-orange-2); }
  .btn:where(:not(.btn-sm, .btn-circle, .btn-text)) > .btn-arrow { right: 22px; width: 26px; height: 26px; margin-top: -13px; }   /* 24 枠の山形は 6×12 → 26 枠で 6.5×13、右端がボタン右端から 32 */
  .btn:where(.btn-back) > .btn-arrow { right: auto; left: 22px; }
  .btn-primary .btn-arrow { color: var(--c-white); }
  .btn-circle { min-height: 56px; padding: 12px 16px 12px 24px; gap: 16px; font-size: 18px; letter-spacing: 0.06em; line-height: 1.7; }
  .btn-circle .btn-ring { width: 32px; height: 32px; }
  .btn-circle .btn-ring .icon { width: 18px; height: 18px; }
  .sec-head { gap: 0; }
  .sec-label { font-size: 16px; letter-spacing: 0.25em; line-height: 1.7; }
  .sec-title:not(h1) { font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; }
  .cta { min-height: 224px; padding: 40px 80px; gap: 24px; border-radius: 40px; }
  .cta-title { font-size: 32px; letter-spacing: 0.06em; line-height: 1.7; }
  .cta-ring { width: 64px; height: 64px; }
  .cta:has(.cta-en) { min-height: 320px; }
  .cta:has(.cta-en) .cta-text { align-items: center; gap: 8px 32px; }
  .cta-en { font-size: 80px; letter-spacing: 12px; line-height: 1.7; }
  .cta:has(.cta-en) .cta-title { font-size: 24px; color: var(--c-peach-soft); }
  .link-card { min-height: 0; padding: 40px; border-radius: 16px; }
  .link-card-label { font-size: 20px; letter-spacing: 0.06em; line-height: 1.7; }
}
/* 1080〜 医院の FAQ（Figma faq 482:1595 閉 / 482:1584 開・944 幅）: 白・角丸 8・上下 16 左右 30。Q 丸 50（白地・線 2 #E36200・Roboto 20）→ 32 → 質問 17px 字間 2% #271200。
   右の＋ 20（線 2）、開くと × に回る（Figma の開いた版は 45° 回した＋）。開いた中身: 24 下に 1px 実線 #C5B5A8 → 24 → A 丸 50（線 2 #EEAD75・Roboto 24 ピーチ）＋ 回答 17px。カードの間 16。
   クイックリンクのバー（トップ Frame 48 718:15193）: 白・角丸 160・上下 30 左右 55・項目の区切りは 1×106 の実線 #C5B5A8・アイコン（高さ 60）→ 15 → 18px 字間 6% #271200 */
@media (min-width: 1080px) {
  body.area-main .acc-card { gap: 16px; }
  body.area-main .acc-card .acc:has(.acc-q) { border-radius: 8px; }
  body.area-main .acc-card .acc-btn:has(.acc-q) { min-height: 82px; padding: 16px 30px; gap: 32px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; }
  body.area-main .acc-card .acc-q { width: 50px; height: 50px; border: 2px solid var(--c-orange-2); background: var(--c-white); color: var(--c-orange-2); font-size: 20px; }
  body.area-main .acc-card .acc-q-a { border-color: var(--c-orange-ans); background: var(--c-orange-ans); color: var(--c-white); font-size: 24px; }   /* 2026-09-29: Figma のピーチの線 → 濃いオレンジの塗り＋白字（ユーザー指示。採用と同じ） */
  body.area-main .acc-card .acc-btn:has(.acc-q) > .icon { width: 24px; height: 24px; transition: transform .25s; }
  body.area-main .acc-card .acc-btn:has(.acc-q)[aria-expanded="true"] .i-plus { display: inline-block; transform: rotate(45deg); }
  body.area-main .acc-card .acc-btn:has(.acc-q)[aria-expanded="true"] .i-minus { display: none; }
  body.area-main .acc-card .acc-panel:has(.acc-a) { padding: 8px 30px 24px; }
  body.area-main .acc-card .acc-panel:has(.acc-a)::before { content: ""; display: block; border-top: 1px solid var(--c-line-2); margin-bottom: 24px; }
  body.area-main .acc-card .acc-a { gap: 32px; }
  body.area-main .acc-card .acc-a-body { padding-top: 10px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; color: var(--c-ink-deep); }
  .qlb-list { min-height: 166px; padding: 30px 55px; border-radius: 160px; }
  .qlb-item + .qlb-item { border-left-color: var(--c-line-2); }
  .qlb-link { min-height: 106px; padding: 0 12px; gap: 15px; justify-content: flex-start; }
  .qlb-ic { width: 100px; height: 60px; }
  .qlb-label { font-size: 18px; letter-spacing: 0.06em; line-height: 1.7; color: var(--c-ink-deep); }
}

/* ---------- 採用の共通の細部（2026-09-26 スマホ指摘の全面見直し。各ページ班が Figma「制作ページ (コピー)」と現行プレビューを実測した値） ----------
   英字（DENTIST・ENTRY・歯型の番号）は Roboto Regular 400（指定が無く親の 500 を継いで太く出ていた）。
   丸の中の山形の大きさ（Figma arrow_forward_ios: 丸 32→7×12・40→8.8×15・64→14×24・24→5×9）、見出しの行の高さ（Figma の箱 27／54）、
   〜599 の英字ラベルの字間（現行の計算値 16px/4px＝0.25em。0.2em は英字が Inter だったころの値）、〜767 の目次ピル（15px/0.9px・細線）、ENTRY 帯（Roboto 400・48px・0.06em）。
   ページ CSS の上書き（詳細度が高い）はそのまま勝つ */
:where(body.area-recruit) :is(.job-en, .cta-en, .tooth-badge-txt) { font-weight: 400; }
@media (min-width: 1080px) {
  :where(body.area-recruit) .btn-circle .btn-ring .icon { width: 21px; height: 21px; }
  :where(body.area-recruit) .link-card .btn-ring .icon { width: 26px; height: 26px; }
  :where(body.area-recruit) .cta-ring .icon { width: 40px; height: 40px; }
  :where(body.area-recruit) .qlb-label .btn-ring .icon { width: 15px; height: 15px; }
  :where(body.area-recruit) .job-title .btn-ring .icon { width: 26px; height: 26px; }
  :where(body.area-recruit) .sec-label { line-height: 27px; }
  :where(body.area-recruit) .sec-title:not(h1) { line-height: 54px; }
}
@media (max-width: 767px) {
  :where(body.area-recruit) .anchor-pill { letter-spacing: 0.06em; }
  :where(body.area-recruit) .anchor-pill .icon path { stroke-width: 1.4; }
  :where(body.area-recruit) .cta-en { font-size: 48px; letter-spacing: 0.06em; }
  :where(body.area-recruit) :is(.cta-entry, .rc-entry) .cta-title { font-size: 18px; letter-spacing: 0.06em; }
}
@media (max-width: 599px) {
  :where(body.area-recruit) .sec-label { letter-spacing: 0.25em; }
  :where(body.area-recruit) .sec-head.center .sec-label { text-indent: 0.25em; }
  :where(body.area-recruit) .btn-circle .btn-ring .icon { width: 18px; height: 18px; }
  :where(body.area-recruit) .btn-circle .btn-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }
  :where(body.area-recruit) .job-title .btn-ring .icon { width: 27px; height: 27px; }
  :where(body.area-recruit) .job-title .btn-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.3px; }
  :where(body.area-recruit) .cta-ring .icon path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }
}