/* ══ 募集要項（/offer）═══════════════════════════════════════════════════
   ★2026-09-02 中尾さん指示で**あしらいを組み直した**：
     「デザイナーから来たものが少し味気ない。職種ごとの要項もフォントサイズや
       太さなどにメリハリがなく、見づらい。**スマホ片手で流し見しているターゲット
       でもパッと見てわかる**ようなデザインに」。
   ★直す前を実測してから触っている（SP 375px・デバイス擬似）：
       ・1ページ **63,265px＝77.7画面ぶん**／介護の1枚だけで **7,491px＝9.2画面**
       ・文字は **16pxが654箇所**＝本文がほぼ全部同じ大きさ＝**主従が無い**
       ・表が2列のままなので、SPでは値の欄が幅170px＝**1行4文字**
   ★立て直しの核＝**答えを先に、詳細は畳む**。
       ①カードの頭に「給与・休日・必要資格・勤務地」を大きく（数字はさらに大きく）
       ②全項目は `<details>` に畳む＝閉じていれば1職種がほぼ1画面
       ③ラベルと値の**主従を逆転**（ラベル＝小さく薄く字間広め／値＝大きく）
   ★色は**この案件で既に決まっている物だけ**を使う（新しい色を持ち込まない）：
       地 #f9f5ea ／ 金 #b78e48 ／ 区分＝介護 #c2591c・看護 #808a36
       ・リハ #57c3f0・専門 #2c4c7d（設計 data_募集要項.ai の実測）
     ★ただし**文字に使う濃さは別に持つ**＝リハの #57c3f0 は白地に置くと読めない
       （実測コントラスト 1.9:1）。同系の濃い版 --ink を区分ごとに持たせる。
   ★原稿は1文字も触っていない（jobs.json＝既存サイトの踏襲）。
     頭の要点も**原文の行をそのまま抜き出しているだけ**＝要約も言い換えもしない。 */

.offer{
  --bg:#f9f5ea; --card:#fff; --ink:#2b241d; --sub:#8a7d6d; --line:#e8e2d5;
  --gold:#b78e48; --c:#c2591c; --cink:#c2591c;
  /* ★`--con`＝**白文字を載せてよい濃さ**。区分ごとに**必ず書く**（下の4行）。
     ★★ここで `--con:var(--c)` と書いても駄目★★（2026-09-02 実測で2回踏んだ）＝
       カスタムプロパティは**宣言した場所で値が確定して継承される**ので、
       `.offer` の時点で介護の #c2591c に固まり、`[data-g="kango"]` が `--c` を変えても
       `--con` は #c2591c のまま＝**看護の帯まで介護のオレンジになった**。
       ＝『使う場所で解かれる』のは `var()` を**使う側**の話で、**代入の右辺は宣言元で解ける**。 */
  --con:#c2591c;
  background:var(--bg); color:var(--ink); padding:0 0 96px;
  font:400 16px/1.85 'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  -webkit-text-size-adjust:100%}
.offer [data-g="kaigo"] { --c:#c2591c; --cink:#b0501a; --con:#c2591c }   /* 白との対比 4.43:1 */
.offer [data-g="kango"] { --c:#808a36; --cink:#68702c; --con:#808a36 }   /* 白との対比 3.75:1 */
.offer [data-g="riha"]  { --c:#57c3f0; --cink:#1c7fae; --con:#1c7fae }   /* ★ここだけ濃い側＝素の #57c3f0 は 2.01:1 で読めない */
/* ★★`--con` ＝「**白文字を載せてよい濃さ**」（2026-09-02 中尾さんGO）★★
     中尾さん指摘＝「リハビリの帯に白文字が沈む」。実測（WCAG・白との対比）＝
       介護 #c2591c **4.43:1** ／ 看護 #808a36 **3.75:1** ／ 専門 #2c4c7d **8.62:1**
       ／ **リハ #57c3f0 は 2.01:1**（32px太字＝大きい文字の基準3:1にも届かない）
     ＝**リハだけが突出して低い**。∴ **リハの帯・札だけ**を濃い側へ振る。
   ★濃い側は**すでにこのページで使っている `--cink`（#1c7fae・4.47:1）**をそのまま使う
     ＝新しい色を持ち込まない。設計の水色（`--c`）は**枠線・9%の薄地には残す**ので、
     ページ全体の色の印象は変わらない。
   ★他の3区分は `--con` を定義しない＝`--c` のまま＝**1バイトも変わらない**
     （50番 #171＝正しく出ている物は触らない）。 */
.offer [data-g="senmon"]{ --c:#2c4c7d; --cink:#2c4c7d; --con:#2c4c7d }   /* 白との対比 8.62:1 */

/* ── MV ─────────────────────────────────────────────────────────────── */
.offer .of-mv{position:relative;height:340px;background:var(--gold);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 24px}
.offer .of-mv::before{content:"";position:absolute;inset:0;
  background:var(--of-mv,none) center/cover no-repeat;opacity:.199}
  /* ★写真の見え方は**実測 0.199**（設計＝金地 #b78e48 に写真を重ねた画から逆算）。 */
.offer .of-mv > *{position:relative}
.offer .of-mv h1{margin:0 0 18px;font-size:46px;font-weight:700;color:#fff;letter-spacing:.1em}
.offer .of-mv p{margin:0;font-size:17px;font-weight:600;color:#fff;line-height:1.8;
  letter-spacing:.02em}

/* ── 区分ナビ＝1段・上に貼り付く ───────────────────────────────────────
     ★前は「区分4つ」＋「職種14個」の2段を最上部に置いていた＝SPで**2画面ぶん**を
       目次に使っていた。職種の目次は**その区分の帯の下**へ移した。 */
.offer .of-nav{position:sticky;top:0;z-index:5;background:rgba(249,245,234,.94);
  -webkit-backdrop-filter:blur(6px);   /* ★iOS 17以前のSafariは接頭辞つきしか解さない（U-391） */
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 0}
.offer .of-nav ul{list-style:none;margin:0;padding:0 16px;display:flex;gap:8px;
  justify-content:center;overflow-x:auto;scrollbar-width:none}
.offer .of-nav ul::-webkit-scrollbar{display:none}
.offer .of-nav li{flex:0 0 auto}
.offer .of-nav a{display:block;padding:8px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:#5c4e42;text-decoration:none;
  font-size:14px;font-weight:700;white-space:nowrap;transition:.2s}
.offer .of-nav a:hover{background:var(--con);border-color:var(--con);color:#fff}
.offer .of-nav a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── 区分の帯 ─────────────────────────────────────────────────────── */
.offer .of-g{max-width:1225px;margin:64px auto 20px;min-height:56px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:10px 20px;
  font-size:32px;font-weight:700;letter-spacing:.12em;color:#fff;background:var(--con);
  scroll-margin-top:64px;text-align:center;line-height:1.3}

/* ── その区分の職種（帯の直下）─────────────────────────────────────── */
.offer .of-jump{list-style:none;max-width:1225px;margin:0 auto 26px;padding:0 16px;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.offer .of-jump a{display:block;padding:6px 14px;border-radius:999px;font-size:13px;
  font-weight:700;text-decoration:none;color:var(--cink);background:#fff;
  border:1px solid #dcd5c6;   /* ★退路＝color-mix を解さない機（Safari16.1以前）用。無いと枠ごと消える（U-391） */
  border:1px solid color-mix(in srgb,var(--c) 34%,#fff);transition:.2s}
.offer .of-jump a:hover{background:var(--con);color:#fff;border-color:var(--con)}

/* ── カード ──────────────────────────────────────────────────────── */
.offer .of-grid{max-width:1225px;margin:0 auto;padding:0 16px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,580px));gap:28px;
  align-items:start;justify-content:center}
.offer .of-grid.is-one{grid-template-columns:minmax(0,760px)}
  /* ★1職種だけの区分（介護・看護）は幅を広げる＝580pxの短冊が1枚ぽつんと残らない */
.offer .of-job{background:var(--card);border-radius:14px;overflow:hidden;
  box-shadow:0 2px 14px rgba(90,70,40,.08);scroll-margin-top:76px;position:relative}
.offer .of-job::before{content:"";display:block;height:5px;background:var(--c)}
  /* ★区分の色を**カードにも1本だけ**効かせる＝帯だけだと、スクロール中に
       「いま何の区分を見ているか」が消える（実測＝1区分が7職種＝約7画面）。 */
.offer .of-in{padding:24px 20px 26px}

/* 職種名＋売り文句＝ここが一番大きい */
.offer .of-t{margin:0;font-size:23px;font-weight:700;color:var(--cink);line-height:1.35;
  letter-spacing:.02em}
.offer .of-lead{margin:12px 0 0;font-size:16px;font-weight:700;line-height:1.6;
  color:var(--cink);background:#f6f1e6;   /* ★退路（U-391） */
  background:color-mix(in srgb,var(--c) 9%,#fff);
  border-radius:8px;padding:9px 12px}
  /* ★売り文句（「女性でも年収450万以上可能！」等）は**このページ最大の武器**なのに
       直す前は 20px/400 の黒＝本文と見分けが付かなかった。地を敷いて持ち上げる。 */

/* 雇用形態の札 */
.offer .of-tags{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.offer .of-tags li{font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1;
  padding:6px 10px;border-radius:5px;color:#fff;background:var(--con)}

/* 要点＝給与・休日・必要資格・勤務地 */
.offer .of-facts{margin:16px 0 0;padding:14px 0 2px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:12px}
.offer .of-fact{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:baseline}
.offer .of-fact dt{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--sub);line-height:1.7;white-space:nowrap}
.offer .of-fact dd{margin:0;font-size:15px;font-weight:500;line-height:1.6;
  word-break:break-word}
.offer .of-fact dd span{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;
  color:var(--sub);background:#f4f0e6;border-radius:4px;padding:2px 6px;vertical-align:2px}
.offer .of-num{font-size:20px;font-weight:700;color:var(--cink);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  /* ★数字だけを大きくする＝流し見は「金額と日数」を先に拾う。
       tabular-nums＝桁が揃うので、複数の職種を見比べた時に目が滑らない。 */

/* 詳細＝畳む */
.offer .of-more{margin:18px 0 0}
.offer .of-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;height:44px;border-radius:999px;
  border:1.5px solid #cfc6b3;   /* ★退路（U-391） */
  border:1.5px solid color-mix(in srgb,var(--c) 46%,#fff);color:var(--cink);
  font-size:14px;font-weight:700;letter-spacing:.04em;background:#fff;transition:.2s}
.offer .of-more summary::-webkit-details-marker{display:none}
.offer .of-more summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.offer .of-more[open] summary::after{transform:translateY(1px) rotate(225deg)}
.offer .of-more summary:hover{background:#f6f1e6;background:color-mix(in srgb,var(--c) 8%,#fff)}   /* ★退路（U-391） */
.offer .of-more summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.offer .of-more summary .c{display:none}
.offer .of-more[open] summary .o{display:none}
.offer .of-more[open] summary .c{display:inline}

/* 詳細の中身＝ラベルは小さく薄く、値を大きく（主従を逆転） */
.offer .of-dl{margin:6px 0 0;padding:0}
.offer .of-row{padding:16px 0;border-top:1px solid var(--line)}
.offer .of-row:first-child{border-top:0}
.offer .of-row dt{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--sub);line-height:1.7}
.offer .of-row dt::before{content:"";display:inline-block;width:8px;height:2px;
  background:var(--c);vertical-align:4px;margin-right:7px}
.offer .of-row dd{margin:0;font-size:15px;line-height:1.9}
.offer .of-row p{margin:0 0 8px}
.offer .of-row p:last-child{margin-bottom:0}

/* 申し込みボタン */
.offer .of-cta{margin:20px 0 0;text-align:center}
.offer .of-btn{display:flex;align-items:center;justify-content:center;
  width:100%;height:54px;border-radius:999px;background:var(--gold);color:#fff;
  font-size:16px;font-weight:700;text-decoration:none;letter-spacing:.06em;
  box-shadow:0 2px 8px rgba(183,142,72,.3);transition:.2s}
.offer .of-btn:hover{opacity:.88;transform:translateY(-1px)}
.offer .of-btn:focus-visible{outline:3px solid var(--cink);outline-offset:3px}

/* ── ★募集が充足した時（設計の注記どおり）──────────────────────────
     「募集が充足したら 募集要項に**白を透過** ボタンは**非リンク**
       **「おかげさまで充足しました」**を表示」（設計の説明レイヤーの朱書き）。
     ★白を"かける"のであって**文字を薄く書き換えない**＝原稿はそのまま残す。 */
.offer .of-job[data-filled="1"]::after{content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.72);border-radius:14px;pointer-events:none;z-index:2}
.offer .of-filled{position:absolute;left:0;right:0;top:56px;z-index:3;text-align:center;
  font-size:26px;font-weight:700;color:#5c4e42;line-height:1.45;letter-spacing:.04em}
.offer .of-job[data-filled="1"] .of-btn{background:#e9e2d4;color:#a99e8c;box-shadow:none}

/* ── 画面が広い時 ────────────────────────────────────────────────── */
/* ── ★スマホ＝右端の追従タブに文字がかぶらないように逃がす ─────────────
     実測（375px）＝タブの帯は画面右端に幅約56pxで貼り付いており、
     「勤務地の施設名」「休日の（月9日公休）」が**その下に潜って読めなかった**。
     ★カードの白地はフル幅のまま、**中身だけ右へ逃がす**＝版面は崩れない。
     ★追従タブ自体（chrome.js）は全ページ共通の物なので、ここでは触らない。 */
@media (max-width:767px){
  .offer .of-in{padding-right:58px}
  /* ★★スマホでは4つを2段で**全部見せる**（横スクロールにしない）★★
       実測＝1段だと4つ目「専門職・事務職」が**どの幅（320/375/390/430）でも画面の外**
       ＝**そこに在ることに気づけない**。横に送れる合図も出ていなかった。
     ★貼り付き（sticky）はやめる＝スマホは縦に長いので、常時80pxを占める棚は高くつく。
       いまどこかは**区分の帯**（色つき・大きい）が担っている。 */
  .offer .of-nav{position:static;padding:12px 0 4px}
  .offer .of-nav ul{flex-wrap:wrap;overflow:visible;padding-right:72px;gap:8px 8px}
  .offer .of-nav a{font-size:13px;padding:7px 13px}
  .offer .of-g{padding-right:62px}
  .offer .of-jump{padding-right:62px}
  .offer .of-mv{padding:0 62px 0 24px}   /* MVのリード文も追従タブに食われていた */
}

@media (min-width:768px){
  .offer .of-mv{height:400px}
  .offer .of-mv h1{font-size:50px;margin-bottom:26px}
  .offer .of-mv p{font-size:20px}
  .offer .of-g{margin-top:86px;min-height:62px;font-size:38px}
  .offer .of-in{padding:30px 34px 34px}
  .offer .of-t{font-size:27px}
  .offer .of-lead{font-size:18px;padding:11px 16px}
  .offer .of-facts{grid-template-columns:1fr 1fr;gap:14px 22px}
  .offer .of-fact{grid-template-columns:1fr;gap:2px}
  .offer .of-fact dd{font-size:16px}
  .offer .of-num{font-size:22px}
  .offer .of-row{display:grid;grid-template-columns:132px 1fr;gap:0 18px;padding:18px 0}
  .offer .of-row dt{margin:0;padding-top:3px}
  .offer .of-row dd{font-size:15px}
  .offer .of-btn{width:320px;margin:0 auto}
  .offer .of-more summary{width:320px;margin:0 auto;height:46px;font-size:15px}
}
@media (min-width:1320px){
  /* ★★間隔を広げるなら、器も一緒に広げる（2026-09-04 監査A#34）★★
     ＝`max-width:1225px` − 左右padding32 ＝ 中身 1193px。ここで gap を 40 にすると
       2列＝580×2+40 ＝ **1200 > 1193** で 7px 足りず、`auto-fit` が **1列に潰れる**。
       画面が広いのに1列になる＝「広い方が読みにくい」という逆転が起きていた。
     ∴ 器を 1240px（中身1208px）へ。**間隔と器はいつも一緒に動かす**。 */
  .offer .of-grid{gap:40px;max-width:1240px}
}

/* ── 狭い画面（320px）での折れ（2026-09-04 監査A#33）──────────────────
   ★金額が「2,760,000円 ／ ～4,160,000 ／ 円」と**「円」だけの行**になっていた。
     和文は文字の切れ目ならどこでも折れるので、**金額のかたまりは折らない**と宣言する。
   ★区分の見出しも「リハビリスタッ／フ」と語の途中で折れていた＝語の切れ目でだけ折る。 */
.offer .of-num{white-space:nowrap}
.offer .of-g{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:360px){
  .offer .of-g{font-size:26px;letter-spacing:.06em;padding-right:44px}
  .offer .of-num{font-size:17px}
}

/* ══ ★2026-09-28 見本＝「職種×雇用形態」で1枚ずつ（/offer/?draft=1 だけ・有明幸大・50番 #369）══════
   参考＝リズムの求人（区分の帯の下に雇用形態ごとのカード2列・給与を大きく）。
   先方の依頼「月額モデルを目立たせる」＝カードの頭で**金額をいちばん大きく**。色は区分の色だけ（新色なし）。 */
.offer .of-draft-note{max-width:1225px;margin:-8px auto 18px;padding:0 16px;text-align:center;
  font-size:13px;color:var(--sub)}
.offer .of-grid2{grid-template-columns:repeat(auto-fit,minmax(0,580px))}
.offer .of-job2 .of-t{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px}
.offer .of-job2 .of-t-k{margin-right:10px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--sub)}
.offer .of-job2 .of-t-e{color:var(--ink)}
.offer .of-pay{margin:14px 0 0;padding:14px 16px 12px;border-radius:10px;
  background:#f6f1e6;background:color-mix(in srgb,var(--c) 9%,#fff)}
.offer .of-pay p{margin:0}
.offer .of-pay-l{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--cink)}
.offer .of-pay-v{margin-top:2px!important;font-size:18px;font-weight:700;color:var(--cink);line-height:1.3;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.offer .of-pay-v .n{white-space:nowrap;display:inline-block}   /* ★狭い画面は「～」の後ろで折る（数字の途中では折らない）＝375px 実測で1行に入らない */
.offer .of-pay-v b{font-size:34px;letter-spacing:.01em}
.offer .of-pay-v i{font-style:normal;margin:0 4px}
.offer .of-pay-n{margin-top:6px!important;font-size:13px;line-height:1.6;color:var(--ink)}
@media (max-width:767px){
  .offer .of-pay-v b{font-size:clamp(24px,7vw,30px)}
}

/* ══ ★2026-09-29 正式版（build_offer_v2.py・50番 #370）＝見本の見た目を全職種へ ══════════════════
   ★1枚に金額が2つある時（看護師＝正看／准看、スポーツトレーナー＝正社員／パート）は2つ目を一段小さく。 */
.offer .of-pay-v.is-sub{font-size:16px}
.offer .of-pay-v.is-sub b{font-size:26px}
.offer .of-pay-v + .of-pay-l{margin-top:10px!important}
@media (max-width:767px){
  .offer .of-pay-v.is-sub b{font-size:clamp(20px,5.8vw,24px)}
}
/* ★募集を止めている求人＝白をかぶせる（設計の「充足」と同じ作り）。文言は「現在は募集しておりません」＝先方の旧サイトと同じ */
.offer .of-job2[data-filled="1"] .of-filled{top:40%}