/* =====================================================================
 * BROWDIA job.css — 求人系ページ専用（フェーズ4）
 * base -> layout -> components の後に読む。salon.css / school.css とは同時に読まない。
 *
 * ★カンプ実測（docs/decisions/2026-08-06-job-comp.md）で分かったこと:
 *   本文カラム 850（x200..1049）／ サイドバー 300（x1100..1399）／
 *   見出しの帯 850x60・#CFB0DC→#DCBED8・24px ／ 検索パネル 高さ286
 *   — いずれもサロン詳細・スクールと同寸・同色だった。
 *
 * ★だからここに書くのは「求人固有の節」だけにする。
 *   2段組・帯・ボタン・パンくずは components.css / layout.css のものを使う。
 *   salon.css / school.css を丸写しにしない。
 *
 * ★2026-08-07（フェーズ6）に .c-detail-title を components.css へ1本化した。
 *   .list-layout / .list-cards は**あえて1本化していない**:
 *     .list-layout … 同じ名前だが形が違う。salon.css は「SPは1カラム・PCでグリッド」、
 *       school/job は .school-layout / .job-layout の別名も持ち、
 *       salon-list.php は条件付きでクラスを足す。まとめると
 *       10か所のテンプレートを直すことになり、得るものが少ない。
 *     .list-cards … 溝がカンプ実測でページごとに違う
 *       （サロン16 / スクール15→33 / 求人15→21）。同じ名前だが同じ部品ではない。
 *   ★検索パネルは3本に同じ値が残っている。こちらは1本化の余地がある（未着手）。
 * ===================================================================== */

/* ---------------------------------------------------------------- 共有部品
   ★.c-detail-title の定義は components.css へ1本化した（2026-08-07・フェーズ6）。
     4本（salon / school / job / article）に同じ値が書いてあった。 */

/* 2段組。カンプ実測: 本文850 ／ 溝50 ／ サイドバー300（合計1200）。
   ★本文も minmax(0, 850px) にすること。850px 固定にすると、
     1024〜1239px（コンテナが1200に届かない幅）でサイドバー列だけが潰れ、
     69px まで縮んだ列の中身が外へはみ出す（2026-08-06 に実測で確認）。
     両方を minmax にすれば比率を保って縮み、はみ出さない。
     コンテナが1200になる幅（1240px〜）では 850 / 300 ちょうどになる。 */
.job-layout,
.list-layout { display: grid; gap: 30px; padding-block: 20px 0; }
@media (min-width: 1024px) {
  .job-layout,
  .list-layout {
    grid-template-columns: minmax(0, 850px) minmax(0, 300px);
    gap: 50px;
    align-items: start;
  }
}
/* ★minmax(0, 1fr) を明示する。省くと grid アイテムの min-width: auto が効いて
   列が min-content に張り付き、狭い画面で横にはみ出す（サロン詳細で踏んだ）。 */
.list-main { min-width: 0; }

.list-cards { display: grid; gap: 15px; }
@media (min-width: 1024px) { .list-cards { gap: 21px; } }  /* カンプ実測: カード572 + 溝21 = ピッチ593 */

/* ---------------------------------------------------------------- ヒーロー
   カンプ実測（§1）: y171..~900。キャッチ50px・リード25px（PC）
   ★背景は人物写真だが、素材が入るまでは面だけ出す。 */
/* ★SPは中央揃え、PCは左揃え（カンプ実測）。
     SPカンプはバッジ・キャッチ・リードとも中央で、PCはどれも本文カラムの左端 x200 から。
     2026-08-07 にSPカンプと突き合わせて気づいた。
   ★背景写真は 2026-08-07 に発注者から img9 を受領して入れた
     （フェーズ4から「素材が無いので面だけ」と記録していたもの）。
     元は 1672x941 で、左半分が施術室の白い壁・被写体は右。文字は左に置く。
     ・SP … 写真を上に敷き、その下に文字を置く（カンプと同じ組み）。
             padding-top は写真の高さぶん（100vw × 941/1672 ≒ 56.3vw）。
     ・PC … 帯いっぱいに cover で敷き、右寄せ。左の白い壁の上に文字が乗る。
     ★下の面（--c-bg-pink）は残す。写真が届かない環境でも文字が読める。 */
.job-hero {
  background: var(--c-bg-pink, #FAF1F2);
  padding-block: 40px 36px;
  text-align: center;
}
.job-hero--photo {
  background-image: url("/assets/img/job-hero.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding-top: calc(56.3vw + 28px);
}
@media (min-width: 1024px) {
  .job-hero { padding-block: 96px 90px; text-align: left; }
  .job-hero--photo {
    /* ★左に地色のグラデを重ねる。カンプも左が白く沈んでいて文字が読める。
       写真だけだと、キャッチの2行目が被写体の髪に重なって読みにくかった（実測）。
       ★重ねる順は「グラデが先・写真があと」。CSSは先に書いたものが上に来る。 */
    background-image:
      linear-gradient(90deg,
        rgba(250, 241, 242, .95) 0%,
        rgba(250, 241, 242, .80) 30%,
        rgba(250, 241, 242, .25) 48%,
        rgba(250, 241, 242, 0)   62%),
      url("/assets/img/job-hero.webp");
    background-position: left center, right center;
    background-size: cover, cover;
    padding-top: 96px;
  }
}

/* ★色は紺ではない。カンプの実測（いちばん濃い画素）:
     キャッチ #B67ABA ／ リード #C883AF。どちらも紫〜ピンクの中間色で、
     --c-primary（#8D5CA6）でも --c-navy でもない専用の色。
     2026-08-07 にSPカンプと突き合わせて気づいた（PCも同じ色だった）。 */
.job-hero__catch {
  display: grid;
  line-height: 1.35;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: #B67ABA;
}
.job-hero__lead {
  /* ★SPは1行なので block。grid にすると span が行ごとの grid item になり、
     display: inline を当てても2行のままになる（2026-08-07 に踏んだ）。 */
  display: block;
  margin-top: 14px;
  line-height: 1.7;
  font-size: 15px;
  color: #C883AF;
}
@media (min-width: 1024px) {
  .job-hero__catch { font-size: 50px; }
  .job-hero__lead { display: grid; margin-top: 30px; font-size: 25px; }
}
/* ★span を並べているのは改行位置をカンプに合わせるため。
   span のあいだに空白を入れないこと（半角スペースが1つ入って行頭がずれる）。
   ★SPのリードだけ1行（カンプ実測）。キャッチはPC・SPとも2行。 */
.job-hero__line { display: block; }
.job-hero__lead .job-hero__line { display: inline; }
@media (min-width: 1024px) { .job-hero__lead .job-hero__line { display: block; } }

/* エリア別・国別のヒーロー。カンプ実測（§2）: y251..650 の #CF9BC9 の面。
   見出しは「東京」50px +「の」30px +「アートメイク求人」35px の組み。
   ★実装は1つの見出しにする。3つに割ると読み上げが「東京 / の / アートメイク求人」になる。 */
.job-hero--area { background: var(--grad-panel); color: var(--c-white); }
.job-hero__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  line-height: 1.4;
}
@media (min-width: 1024px) { .job-hero__title { font-size: 40px; } }

/* ---------------------------------------------------------------- 雇用形態バッジ
   カンプ実測（§1・走査線）:
     y367..483（117高）／ 1個 110幅 ／ 横ピッチ約130（＝110 + 溝20）
     金〜オリーブのグラデ #DACC9B → #CBBD7C ／ 白文字 ／ **丸**
     ヒーローの中・キャッチ（y524）の上に置く
   ★2026-08-07 まで四角い白いピルをヒーローの下に置いていた（カンプと違った）。
   ★「すべて」はカンプに無いが、絞り込みを解除する手段として残す（発注者の判断）。
     同じ丸のまま、色だけ白地にして「戻る」ものだと分かるようにする。
   ★行き先は ?type=。URLを増やすと 4種 × エリア数 のうすいページが増えるため
     （計画書 D8・2026-08-06 発注者決定 A）。 */
/* ★SPカンプ実測（750px幅＝CSS375なので÷2）: 丸 116/2 ＝ **58** ／ 横ピッチ 133/2 ＝ 66.5
     → 溝は 8.5。4個で 256、「すべて」を足した5個でも 322 で 345（375-30）に収まる。
     74px にしていたときは5個が2行に折れていた（2026-08-07 に実測で気づいた）。 */
.job-types__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* SPは中央。PCで左に戻す */
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.job-types__item {
  display: inline-flex;
  /* ★縦積み。row のままだと「フリー」「ランス」の2つの span が横に並んで
     「フリ ラン / ー ス」になる（2026-08-07 に実測で踏んだ）。 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 58px; height: 58px;      /* SPカンプ実測 */
  border-radius: 50%;
  background: linear-gradient(150deg, #DACC9B 0%, #CBBD7C 100%);
  color: var(--c-white);
  /* ★SPは10px。11pxだと「アルバイト」5文字が58pxの丸に収まらず折れる（実測） */
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .05em;
  /* letter-spacing は最後の1文字の後ろにも余白を足すので、中央寄せだと左へ寄る。
     同じ値を text-indent に入れて字面の中心を丸の中心に合わせる（.btn と同じ考え方）。 */
  text-indent: .05em;
  text-decoration: none;
  /* ★余白はほぼ入れない。カンプは 110px の丸に18pxで「アルバイト」5文字が1行。
     8px入れると 94px しか残らず 94.5px の字が折れる（実測）。 */
  padding: 0 2px;
}
.job-types__item:hover { opacity: .85; }
/* ★「すべて」の丸は出さない（2026-08-07 発注者の指示。カンプに無い）。
   絞り込みの解除は「選択中のバッジをもう一度押す」で行う。
   選択中だと分かるように輪郭を付ける。 */
.job-types__item.is-current { outline: 2px solid var(--c-navy); outline-offset: 2px; }
/* ★カンプが手で折っている行（フリー / ランス）。span を並べて折り位置を固定する */
.job-types__line { display: block; }
@media (min-width: 1024px) {
  /* カンプ実測: 110 x 117・横ピッチ130（＝溝20）・文字18px・Tracking 50 */
  .job-types__list { justify-content: flex-start; gap: 20px; margin-bottom: 41px; }
  .job-types__item { width: 110px; height: 117px; font-size: 18px; padding: 0 2px; }
}
/* ★エリア別・国別に出していたバッジは 2026-08-07 に外した（発注者の指示・カンプに無い）。
     .job-types--under の指定もここで消した。バッジは求人TOPのヒーローの中だけ。 */

/* ---------------------------------------------------------------- 紹介（求人TOP）
   カンプ実測（§1）: y901..1730。左に写真のコラージュ、右に見出し3行＋本文。
     見出しのテキストレイヤー L=751 T=1042 R=1365（＝右カラムは x751 から・幅614）
   ★写真は素材が届くまでの仮画像（scripts/make-placeholder-photos.php）。
     重なりの細かい寸法は、本物の写真が入ってから測り直す。 */
.job-about { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  /* カンプ: 左のコラージュが x200..~700、右のテキストが x751..1365 */
  .job-about { grid-template-columns: minmax(0, 500px) minmax(0, 614px); gap: 36px; align-items: center; }
}
.job-about__media { position: relative; min-width: 0; }
.job-about__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  object-fit: cover;
}
.job-about__photo--a { width: 72%; aspect-ratio: 2 / 3; }
/* 背面のピンクの角丸。カンプでは写真の右下にずれて重なる */
.job-about__shape {
  position: absolute; right: 6%; top: 18%;
  width: 46%; aspect-ratio: 3 / 4;
  border-radius: var(--r-card);
  background: #F2D9EA;
  z-index: -1;
}
.job-about__photo--b {
  position: relative;
  width: 56%;
  margin: -22% 0 0 auto;
  aspect-ratio: 25 / 32;
}
.job-about__title {
  margin: 0 0 20px;
  display: grid;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ls-wide);
  color: var(--c-navy);
}
.job-about__line { display: block; }
@media (min-width: 1024px) { .job-about__title { font-size: 28px; margin-bottom: 30px; } }
.job-about__body p { margin: 0 0 1.4em; font-size: 15px; line-height: 1.9; }
.job-about__body p:last-child { margin-bottom: 0; }
.job-about__body b { font-weight: 700; color: var(--c-navy); }
@media (min-width: 1024px) { .job-about__body p { font-size: 15px; } }

/* ---------------------------------------------------------------- 検索パネル
   カンプ実測（§1・§2）: 高さ286・#D69EC3 → #CD98CC。
   スクールの検索パネルと同寸・同色なので、同じトークンを使う。
   ★出る位置だけがページで違う（求人TOPは上・エリア別は最下部）。
     位置は job-list.php が置く場所で決める。CSSでは動かさない。 */
.job-search { padding-block: 24px; }
@media (min-width: 1024px) { .job-search { padding-block: 40px; } }
.job-search--bottom { padding-block: 40px 24px; }
@media (min-width: 1024px) { .job-search--bottom { padding-block: 70px 40px; } }

.job-search__panel {
  background: var(--grad-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--r-card);
  padding: 20px 15px 20px;
  color: var(--c-white);
}
@media (min-width: 1024px) { .job-search__panel { padding: 60px 60px 56px 47px; } }
.job-search__title {
  display: grid;
  gap: 4px;
  font-size: 20px;
  font-weight: 700;
  /* ★行の高さを明示する。body の 1.75 を継ぐと35pxの見出しの行箱が61pxになり、
     パネルが31px高くなる（school.css で実際に踏んだ） */
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-align: center;
  margin-bottom: 18px;
}
.job-search__title span {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
}
@media (min-width: 1024px) {
  .job-search__title { font-size: 35px; margin-bottom: 29px; }
  .job-search__title span { font-size: 20px; }
}
/* ★2026-08-10 に「雇用形態」を足して**2段**になった（カンプは1段・パネル高286）。
     カンプに無い欄なので、既にある2つ（国400・エリア400）とボタン（230）は
     カンプの寸法のまま動かさず、下に1本増やす形にした。
     1段に4つ並べると 1093 の内側に収まらず、国とエリアが 400 → 268 に痩せる。
   ★ボタンは2段ぶんを縦に貫いて中央。 */
.job-search__form { display: grid; gap: 10px; }
@media (min-width: 1024px) {
  .job-search__form {
    grid-template-columns: 400px 400px minmax(0, 230px);
    grid-template-areas: "country area submit" "type type submit";
    gap: 20px;
    justify-content: space-between;
    align-items: center;
  }
  .job-search__select--country { grid-area: country; }
  .job-search__select--area    { grid-area: area; }
  .job-search__select--type    { grid-area: type; }
  .job-search__submit          { grid-area: submit; align-self: center; }
}
.job-search__select {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: var(--c-bg-pink);
  font-size: 14px;
  color: var(--c-text);
}
@media (min-width: 1024px) { .job-search__select { height: 70px; font-size: 18px; padding: 0 30px; } }
.job-search__submit {
  justify-self: center;
  width: 275px; max-width: 100%; min-width: 0;
  height: 45px; margin-top: 5px; font-size: 15px;
}
@media (min-width: 1024px) {
  .job-search__submit { justify-self: stretch; width: 100%; height: 66px; margin-top: 0; font-size: 20px; }
}

/* 入口ページ（/job/search/）の「国から探す」。JSが無くても国別へ行けるように */
.job-search__countries { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.job-search__countries a { color: var(--c-primary); text-decoration: underline; font-size: 14px; }

/* ---------------------------------------------------------------- Pick up カード
 * エリア別・国別一覧の上に3枚（2026-08-07 発注者の指示）。
 *
 * カンプ実測（PC/PSD/Browdia_サロン求人（カテゴリ） サーチ結果.psd と走査線）:
 *   PC  カード 850 x 357・ピッチ389（溝32）／ 白地 ＋ **3pxの金の枠 #C6B774**
 *       リボン 左上の45度の三角（脚92）／「Pick / up」20px 白・2行（x+11 y+9）
 *       写真   255 x 192（4:3）を左に。右の列は x524（＝写真の右39）から
 *       バッジ y729 ／ クリニック名16px ／ タイトル22px Leading32
 *       住所 y849 ／ 給与 y883（ラベル・本文とも16px Leading26）
 *       ボタン 350 x 50・中央（y971..1020）
 *   SP  カード 345・枠2px／ リボンではなく**左上の四角いタブ**（90 x 32・1行）
 *       並びは バッジ → タイトル → 写真（全幅 4:3）→ 住所/給与 → ボタン（全幅）
 *
 * ★通常の大カード（.job-card）と1本化しない。
 *   アクセスの行と特徴タグ24個が無く、PCではタイトルが写真の**右**に来る。
 *   高さも 357 と 572 で違う。フラグで分岐させると両方がカンプとずれる。
 * ★中身は入れ子にせず横並びにして、置き場所だけ grid-template-areas で変える。
 *   写真を本文の中に入れると、SPで写真だけタイトルの下へ動かせない。
 */
.job-picks { display: grid; gap: 20px; }
@media (min-width: 1024px) { .job-picks { gap: 32px; } }

.job-pick {
  position: relative;
  overflow: hidden;                 /* リボンを角丸の内側で切る */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 46px 15px 20px;          /* 上はタブのぶん空ける */
  border: 2px solid #C6B774;
  border-radius: var(--r-card);
  background: var(--c-white);
}
@media (min-width: 1024px) {
  .job-pick {
    grid-template-columns: 255px minmax(0, 1fr);
    grid-template-areas:
      "media meta"
      "media title"
      "media spec"
      "cta   cta";
    align-content: start;
    gap: 14px 39px;
    padding: 21px 27px 31px;
    border-width: 3px;
  }
  .job-pick__meta  { grid-area: meta; }
  .job-pick__lead  { grid-area: title; }
  .job-pick__media { grid-area: media; align-self: start; }
  .job-pick__spec  { grid-area: spec; }
  .job-pick__cta   { grid-area: cta; }
}

/* リボン。SPは左上の四角いタブ、PCは45度の三角 */
.job-pick__ribbon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: .4em;
  width: 90px; height: 32px;
  padding-left: 14px;
  background: #C6B774;
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  line-height: 1;
}
@media (min-width: 1024px) {
  .job-pick__ribbon {
    /* 三角。脚92pxで、斜辺が左下から右上へ */
    width: 92px; height: 92px;
    padding: 9px 0 0 11px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 20px;
    line-height: calc(37 / 20 / 2);   /* 2行で37px */
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
}

.job-pick__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.job-pick__clinic { font-size: 14px; font-weight: 500; color: var(--c-text); }
@media (min-width: 1024px) { .job-pick__clinic { font-size: 16px; } }

.job-pick__lead { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: var(--ls-wide); }
.job-pick__lead a { color: var(--c-navy); text-decoration: none; }
.job-pick__lead a:hover { text-decoration: underline; }
@media (min-width: 1024px) { .job-pick__lead { font-size: 22px; line-height: calc(32 / 22); } }

.job-pick__media { display: block; }
.job-pick__img,
.job-pick__media .is-empty {
  display: block; width: 100%; aspect-ratio: 255 / 192; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
}

/* ★SPも2段組。カンプ実測（dsf=2）: ラベル x63 ／ 本文 x202 ＝ ラベル列 69.5 */
.job-pick__spec {
  display: grid; grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px 0; margin: 0; font-size: 14px; line-height: 1.6; min-width: 0;
}
@media (min-width: 1024px) {
  /* ラベル列 x524..557（33）＋ 本文 x606 → 溝は 606-557 ＝ 49 だが、
     ラベルの列幅はカンプの「住所」「給与」が収まる 82 に合わせる（通常カードと同じ） */
  .job-pick__spec { grid-template-columns: 82px minmax(0, 1fr); gap: 10px 0; font-size: 16px; line-height: calc(26 / 16); }
}
.job-pick__spec dt { color: var(--c-primary); font-weight: 700; }
.job-pick__spec dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.job-pick__cta { margin: 0; display: flex; justify-content: center; }
.job-pick__cta .btn { min-width: 0; width: 100%; height: 48px; font-size: 14px; --btn-ls: var(--ls-narrow); }
@media (min-width: 1024px) {
  /* カンプ実測 350 x 50 */
  .job-pick__cta .btn { width: 350px; height: 50px; }
}

/* ---------------------------------------------------------------- 求人カード
   カンプ実測（§1）: 850 x 572・白地。内側の余白30。
     バッジ ＋ クリニック名 → リード24px → 写真255x192 ＋ 住所/アクセス/給与
     → 特徴タグ24個（4行）→「求人詳細はこちら」中央 */
.job-card {
  display: grid;
  gap: 12px;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 16px 15px 20px;
  min-width: 0;
}
@media (min-width: 1024px) { .job-card { gap: 16px; padding: 24px 30px 28px; } }

.job-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.job-card__clinic { font-size: 14px; font-weight: 500; color: var(--c-text); }
@media (min-width: 1024px) { .job-card__clinic { font-size: 16px; } }

.job-card__lead { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: var(--ls-wide); }
.job-card__lead a { color: var(--c-navy); text-decoration: none; }
.job-card__lead a:hover { text-decoration: underline; }
@media (min-width: 1024px) { .job-card__lead { font-size: 24px; } }

.job-card__cols { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1024px) {
  /* カンプ実測: 写真 255 ／ 溝39 ／ 残りが仕様の表 */
  .job-card__cols { grid-template-columns: 255px minmax(0, 1fr); gap: 39px; align-items: start; }
}
.job-card__media { display: block; }
.job-card__img,
.job-card__media .is-empty {
  display: block; width: 100%; aspect-ratio: 255 / 192; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
}

/* 住所 / アクセス / 給与。カンプはラベル列とデータ列の2段組 */
.job-card__spec { display: grid; gap: 6px 16px; margin: 0; font-size: 14px; line-height: 1.6; min-width: 0; }
@media (min-width: 1024px) {
  .job-card__spec { grid-template-columns: 82px minmax(0, 1fr); gap: 12px 22px; font-size: 15px; }
}
.job-card__spec dt { color: var(--c-primary); font-weight: 700; }
.job-card__spec dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 特徴タグ
   ★24個を全部並べ、その求人が持っているものだけ色を付ける。
     持っていないものは is-off（グレー塗り＋白文字）。
     カンプがそうなっていて、求人ごとにカードの高さが変わらない
     （2026-08-06 発注者に確認・A案）。

   カンプ実測の色（docs/decisions/2026-08-06-job-comp.md §1）:
     OFF   塗り #CDCDCD ／ 文字 #FFFFFF ／ 枠なし
     pink  塗り #F9ECF5 ／ 枠と文字 #C076A7
     gold  塗り #F9F3E7 ／ 枠と文字 #BD9E4B
     blue  塗り #ECF1F7 ／ 枠と文字 #7C9FBD
     green 塗り #EFF7EA ／ 枠と文字 #70A356

   ★gray グループが ON のときの見た目はカンプに無い
     （カンプの求人は gray の12個をどれも持っていない）。
     他の4色と同じ「淡い地＋色の枠と文字」で作る。OFF は塗りつぶしなので見分けはつく。 */
/* ★カンプ実測（2026-08-06 に測り直した）:
     タグの高さ24・行ピッチ35（＝行の溝11）。
     ★タグは幅が一定に見える（横のピッチが文字数によらず約108）。
       「高歩合」は文字36pxなのに枠は約125あり、余白では説明がつかない。
       つまり**最小幅がある**。だから min-width で作る。
       余白だけで広げると、短いタグが詰まって1行に8個入り、
       カンプの 7/7/7/3 の並びが崩れる。 */
.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) { .job-card__tags { gap: 11px 8px; } }
.job-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (min-width: 1024px) { .job-tag { min-height: 24px; min-width: 100px; padding: 3px 10px; font-size: 12px; } }

.job-tag--gray  { background: #F4F4F4; border-color: #9B9B9B; color: #6B6B6B; }
.job-tag--pink  { background: #F9ECF5; border-color: #C076A7; color: #C076A7; }
.job-tag--gold  { background: #F9F3E7; border-color: #BD9E4B; color: #BD9E4B; }
.job-tag--blue  { background: #ECF1F7; border-color: #7C9FBD; color: #7C9FBD; }
.job-tag--green { background: #EFF7EA; border-color: #70A356; color: #70A356; }

/* ★is-off が最後。色クラスより後に置かないと上書きされない */
.job-tag.is-off {
  background: #CDCDCD;
  border-color: transparent;
  color: var(--c-white);
}

.job-card__cta { display: flex; justify-content: center; margin: 0; padding-top: 4px; }

/* 求人カードのボタンだけ大きい（カンプ実測 2026-08-07）。
     PC  x450..799・y3577..3626 = 350 x 50（PC/デザイン/求人/Browdia_サロン求人TOP.jpg）
     SP  x60..689・y5937..6026  = 630 x 90 ＝ CSS 315 x 45
     文字「求人詳細はこちら」は PC 113 幅なので、左右に 118.5 ずつ余る。

   ★.btn--solid の 130x34 はサロン一覧の「詳細はこちら」の実測値で、あちらでは正しい。
     ここで .btn--solid 自体を広げないこと。サロンカード・スクール一覧まで一緒に太る。
   ★詰まって見えるのを padding で足さない。カンプは箱そのものが大きい。
     padding だけ足すと、文字数の違うラベルで幅がばらつく（カンプは固定幅）。 */
.job-card__cta .btn { width: 100%; max-width: 315px; height: 45px; }
@media (min-width: 1024px) {
  .job-card__cta .btn { max-width: 350px; height: 50px; }
}

/* ---------------------------------------------------------------- サイドバー
   カンプ実測（§1）: 広告枠 300x250 が2枠（★一番上）／ 積極採用求人 ／ 未経験OK ／ 掲載パネル
   ★入れ物（.job-side / __block / __title / __ads / __ad / __listing）と
     カード（.side-card*）の定義は **components.css へ移した**（2026-08-07）。
     求人特集の記事が job-side.php を出すが、記事ページは job.css を読まないため。
     ここに書き戻さないこと。 */

/* =====================================================================
 * 求人詳細（Task 7）
 * カンプ実測: docs/decisions/2026-08-06-job-comp.md §3
 * ===================================================================== */

.job-main { min-width: 0; display: grid; gap: 24px; align-content: start; }
@media (min-width: 1024px) { .job-main { gap: 40px; } }

/* ★カンプの組み（2026-08-07 に突き合わせて直した）:
     1行目 エリアバッジ ＋ 📍最寄駅 ／ 2行目 タイトル ／ 3行目 ロゴ ＋ クリニック名 */
.job-head { display: grid; gap: 10px; }
.job-head__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.job-head__station { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-text); }
/* ピンは共用の icon-area.svg（スクール・サロンのエリア行と同じ絵）。
   ★新しく起こす前に assets/img を見ること（school.css の注記と同じ） */
.job-head__pin {
  flex: 0 0 auto; width: 9px; height: 12px; background: #E589B4;
  -webkit-mask: url("/assets/img/icon-area.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-area.svg") no-repeat center / contain;
}
.job-head__lead {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--ls-wide);
  color: var(--c-navy);
}
.job-head__clinic { display: flex; align-items: center; gap: 10px; margin: 0; }
.job-head__logo { flex: 0 0 auto; }
.job-head__logo-img {
  display: block; width: 42px; height: 42px;
  object-fit: cover; border-radius: 50%; background: var(--c-bg-alt);
}
.job-head__clinic-name { font-size: 14px; color: var(--c-text); }
@media (min-width: 1024px) {
  .job-head__lead { font-size: 30px; }
  .job-head__station { font-size: 16px; gap: 11px; }
  .job-head__pin { width: 14px; height: 19px; }
  .job-head__logo-img { width: 56px; height: 56px; }
  .job-head__clinic-name { font-size: 16px; }
}

/* 募集終了。★掲載終了と掲載期限切れで見え方を変えない（計画書 D6） */
.job-closed {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--c-bg-alt, #F2F2F2);
  color: var(--c-text);
  font-size: 14px;
  font-weight: 700;
}
.job-closed a { color: var(--c-primary); text-decoration: underline; font-weight: 400; }

/* ---------------------------------------------------------------- MV と 写真の帯
 * カンプ実測（PC: PSD走査線 / SP: dsf=2 の JPEG）:
 *   MV    PC 850 x 400（y565..964）／ SP 345 x 158（y694..1010）  → どちらも 17:8
 *   帯    PC 300 x 234・溝20（y1196..1429。850で切れて横スクロール）
 *         SP 200 x 156・溝10（右端まで抜ける）                     → どちらも 50:39
 *   スクロールバー  高さ 5px（SPは4px）・つまみ #E0B5D1 ／ 溝 #EFEFEF
 *
 * ★2026-08-07 まで全部の写真を2列のグリッド（16:9）で紹介文の**上**に出していた。
 *   カンプは「MV1枚 → 紹介文 → 残りの写真の帯」。
 *   job_photos に種類の列は無いので、並び順そのものが役割（1枚目＝MV）。
 */
.job-mv__img,
.job-mv .is-empty {
  display: block; width: 100%; aspect-ratio: 17 / 8; object-fit: cover;
  border-radius: var(--r-card); background: var(--c-bg-alt);
}

/* ★SPはカンプどおり画面の右端まで抜ける（写真もスクロールバーの溝も x30..749 だった）。
   .l-container は padding ではなく width で内側を作っているので、
   負のマージンぶんがそのまま画面端まで届く（school-gallery と同じ手）。 */
.job-photos { display: grid; gap: 10px; margin-right: calc(var(--gutter) * -1); }
.job-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* ★OS標準のバーは色だけカンプに寄せておく。JSが動かないときの受け皿。
     動いたら .is-custombar が付いて、下の自前のバーに入れ替わる。 */
  scrollbar-width: thin;
  scrollbar-color: #E0B5D1 #EFEFEF;
}
.job-photos.is-custombar .job-strip { scrollbar-width: none; }
.job-photos.is-custombar .job-strip::-webkit-scrollbar { display: none; }
.job-strip__img,
.job-strip .is-empty {
  display: block; flex: 0 0 auto;
  width: 200px; aspect-ratio: 50 / 39; object-fit: cover;
  border-radius: var(--r-card); background: var(--c-bg-alt);
}
/* 自前のスクロールバー。位置と幅は job.js が入れる */
.job-strip__bar { position: relative; height: 4px; border-radius: 3px; background: #EFEFEF; }
.job-strip__bar[hidden] { display: none; }
.job-strip__thumb {
  position: absolute; inset-block: 0; left: 0; width: 30%;
  border-radius: 3px; background: #E0B5D1;
}
@media (min-width: 1024px) {
  /* PCは本文カラム（850）の中で切れる。はみ出させない。
     カンプ実測: 写真の下端1429 → バー1450..1454（21px空けて5px） */
  .job-photos { gap: 21px; margin-right: 0; }
  .job-strip { gap: 20px; }
  .job-strip__bar { height: 5px; }
  .job-strip__img,
  .job-strip .is-empty { width: 300px; }
}

/* 紹介文。★カンプは1段落目だけ大きく太い（PSD #181 / #180）。
     PC   リード 22px Medium・Tracking100・Leading32 ／ 本文 16px・Tracking50・Leading26
     SP   リード 16px・行ピッチ21          ／ 本文 13px・行ピッチ18
   区切りは lead_body の**空行**（app/pages/job.php）。空行が無ければ全部が本文。 */
.job-intro { display: grid; gap: 14px; }
.job-intro__lead {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: calc(21 / 16);
  letter-spacing: var(--ls-wide);
  color: var(--c-navy);
}
/* ★本文はスクール詳細の紹介文（.school-head__body）と同じ組み。
     SP 13/18・PC 16/26 で、カンプの実測もぴったり同じだった。 */
.job-intro__body { margin: 0; font-size: 14px; line-height: calc(18 / 13); letter-spacing: .05em; }
@media (min-width: 1024px) {
  .job-intro { gap: 20px; }
  .job-intro__lead { font-size: 22px; line-height: calc(32 / 22); }
  .job-intro__body { font-size: 16px; line-height: calc(26 / 16); }
}

/* 募集要項の表。SPは縦積み、PCはラベル列＋データ列 */
.job-spec { display: grid; gap: 0; margin: 0; font-size: 15px; line-height: 1.8; }
.job-spec dt {
  padding: 12px 14px 4px;
  background: var(--c-bg-pink, #FAF1F2);
  font-weight: 700;
  color: var(--c-primary);
}
.job-spec dd {
  margin: 0;
  padding: 4px 14px 14px;
  background: var(--c-bg-pink, #FAF1F2);
  overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
  .job-spec { grid-template-columns: 200px minmax(0, 1fr); font-size: 15px; }
  .job-spec dt { padding: 20px 24px; border-bottom: 1px solid var(--c-white); }
  .job-spec dd { padding: 20px 24px; background: var(--c-white); border-bottom: 1px solid var(--c-bg-pink, #FAF1F2); }
}
.job-spec__note { display: block; font-size: 14px; color: var(--c-text); }

/* 一日の流れ。カンプは時刻（24px）＋見出し＋説明の5コマ */
.job-schedule { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.job-schedule__item { display: grid; gap: 4px; }
@media (min-width: 1024px) {
  .job-schedule { gap: 24px; }
  .job-schedule__item { grid-template-columns: 92px minmax(0, 1fr); gap: 24px; align-items: start; }
}
.job-schedule__time {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 18px;
  color: var(--c-primary);
  line-height: 1.3;
}
@media (min-width: 1024px) { .job-schedule__time { font-size: 24px; } }
.job-schedule__body { display: grid; gap: 4px; min-width: 0; }
.job-schedule__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-navy); }
.job-schedule__text { margin: 0; font-size: 14px; line-height: 1.8; }
@media (min-width: 1024px) { .job-schedule__text { font-size: 15px; } }

/* 応募CTA（本文内）。カンプ実測: 左に電話、右に紺のピル */
.job-cta {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 20px 15px;
  border-radius: var(--r-card);
  background: var(--c-white);
}
/* ★PC実測（2026-08-07）: カード x200..1049 の中で
     電話の列 340（中央寄せ・字面の中心 x405）／ 溝30 ／ ボタン x610..1009 ＝ **400 x 70**
     それまで ボタン340x56・電話は右寄せで組んでいた。 */
@media (min-width: 1024px) {
  .job-cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: center;
    justify-items: stretch;
    gap: 30px;
    padding: 26px 40px;
  }
}
.job-cta__tel { display: grid; gap: 2px; margin: 0; justify-items: center; }
/* ★PSD実測（PC/PSD/Browdia_サロン求人詳細.psd）:
     ラベル   #83  16px Bold・Tracking 50
     電話番号 #81  実効30px・Tracking 100・JosefinSans-SemiBold（右カラムは #215 の24px）
     ボタン   #77  18px Medium・Tracking 100
   2026-08-07 に測り直した。それまで 12 / 28 / 16px・字送り .04em で組んでいた。 */
.job-cta__tel-label { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--c-navy); }
@media (min-width: 1024px) { .job-cta__tel-label { font-size: 16px; } }
/* ★色は --c-accent（#C16CA4）。--c-primary（#8D5CA6）ではない。
     カンプの実測色は 本文CTA #C16CA5 ／ SP追尾バー #C36BA5 で、どちらもアクセント。 */
.job-cta__tel-num {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--ls-wide);   /* Tracking 100 */
  color: var(--c-accent);
  text-decoration: none;
}
@media (min-width: 1024px) { .job-cta__tel-num { font-size: 30px; } }

/* 受話器のアイコン。カンプ実測: PC本文 29px（文字30px）／ SP追尾 17.5px（文字24px）。
   ★書き出しデータに無いので起こした（assets/img/icon-tel.svg）。 */
.job-cta__tel-num::before,
.job-sticky__tel::before {
  content: "";
  flex: 0 0 auto;
  width: 1em; height: 1em;
  margin-right: .32em;
  background: currentColor;
  -webkit-mask: url("/assets/img/icon-tel.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-tel.svg") no-repeat center / contain;
}
/* ★min-width: 0 を必ず入れる。components.css の .btn--outline は
   「一覧へ」型のボタンなので min-width が SP 315 / PC 445 ある。
   狭い枠（右カラム300・SP追尾バー）に置くと、そのまま外へはみ出す
   （2026-08-06 に実測。.list-pager も同じ理由で min-width: 0 にしてある）。 */
.job-cta__btn { margin: 0; width: 100%; display: flex; justify-content: center; }
/* ★PC 18px・Tracking 100（PSD #77）。16px・字送りなしで組んでいた */
.job-cta__btn .btn { min-width: 0; width: 100%; max-width: 340px; height: 56px; font-size: 16px; --btn-ls: var(--ls-wide); }
@media (min-width: 1024px) { .job-cta__btn .btn { max-width: 400px; height: 70px; font-size: 18px; } }

/* ★求人の応募ボタンだけ色が違う（2026-08-07 に実測）。
     塗り  #4F4F73（--c-navy #414167 ではない。PC本文・PC右カラム・SP追尾バーの3か所とも同値）
     線    枠も文字も --c-navy（components.css の .btn--outline は --c-primary の紫）
   ★components.css の共通ボタンは触らない。あちらは「イベント一覧へ」型で、
     別のカンプで実測して合わせてある。ここだけ上書きする。 */
.job-cta__btn .btn--solid,
.job-sticky__btn.btn--solid { background: #4F4F73; }
.job-cta__btn .btn--outline,
.job-sticky__btn.btn--outline { border-color: var(--c-navy); color: var(--c-navy); }

/* 右カラム（PC）。★追尾させない。カード＋バナーの合計がビューポートに入らないと
   下端が常に画面外になり「埋まって見える」（サロン詳細で踏んだ）。 */
.job-aside { display: grid; gap: 20px; align-content: start; }
.job-aside__card {
  display: grid;
  gap: 12px;
  justify-items: center;
  /* ★左右20。カンプ実測: カード x1100..1399（300）／ ボタン x1120..1379（260） */
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--c-white);
  text-align: center;
}
.job-aside__logo { display: block; }
.job-aside__logo-img {
  display: block; width: 96px; height: 96px; object-fit: contain;
  border-radius: 50%; background: var(--c-white);
}
.job-aside__clinic { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-navy); }
.job-aside__closed { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-text); }
/* ★width: 100% が要る。.job-aside__card が justify-items: center の grid なので、
     入れないと .job-cta が中身の幅（電話の字幅＝224）まで縮み、
     その中のボタンも 224 になってカンプの260に届かない（2026-08-07 に実測）。 */
.job-aside .job-cta { width: 100%; padding: 0; gap: 10px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.job-aside .job-cta__tel { justify-items: center; }
/* ★右カラムはカンプ実測で24px（本文の28pxとは別。数字のインク17px から） */
.job-aside .job-cta__tel-num { font-size: 24px; }
/* ★右カラムには「お電話での応募はこちら」の行が無い（カンプはクリニック名のすぐ下が番号）。
     読み上げからは消さずに、見た目だけ隠す。 */
.job-aside .job-cta__tel-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* ★右カラムのボタンも18px・Tracking 100（PSD #221）。
     大きさはカンプ実測 x1120..1379 x y577..646 ＝ **260 x 70**（カード300 − 左右20）。
     詳細ページ（塗り）も応募ページ（線）も同じ寸法だった。 */
.job-aside .job-cta__btn .btn { height: 70px; font-size: 18px; }

.job-backlink { display: flex; justify-content: center; margin: 0; }
.job-backlink .btn { min-width: 0; width: 100%; max-width: 340px; }

/* ---------------------------------------------------------------- SP追尾バー
   カンプ実測（SP/デザイン/求人/Browdia_サロン求人{詳細|応募}（追尾ボタン）_sp.jpg
   750x1334・dsf=2 なので実測値は÷2。2026-08-07 に測り直した）:
     丸ロゴ   直径140 ＝ 70。左端は x31 ＝ 15（コンテナと同じ）／枠 #DEDEDE
     電話     x232..658。数字24px（インク33）・#C36BA5（--c-accent）
              受話器アイコン 35 ＝ 17.5（≒0.73em）
     ボタン   x201..720 ＝ 幅260 ／ 高さ90 ＝ 45 ／ 文字15px
              「応募する」には書類アイコン（.btn__icon）。「詳細を見る」には無い
     ロゴとボタンの間 31 ＝ 15.5
     ボタン下端 1303 → 画面下 1334 ＝ 15.5
   ★PCでは出さない（PCは右カラムのカードが受け持つ）。 */
.job-sticky { display: none; }
@media (max-width: 1023px) {
  .job-sticky {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 12px var(--gutter) calc(15px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(4px);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  }
  /* ★追尾バーのぶんだけフッターの下に余白を足す。
     足さないとフッターの最後の行がバーに隠れる。
     ★バーが高くなった（ロゴ70）ぶん、余白も増やす。 */
  body.is-job-detail .l-footer,
  body.is-job-apply .l-footer { padding-bottom: 110px; }
}
.job-sticky__inner { display: flex; align-items: center; gap: 15px; }
.job-sticky__logo { flex: 0 0 auto; }
.job-sticky__logo-img {
  display: block; width: 70px; height: 70px; object-fit: contain;
  border-radius: 50%; background: var(--c-white); border: 1px solid #DEDEDE;
}
/* ★溝7px。カンプは電話のインク下端1186 → ボタン上端1214（＝14）。
     ボタンは画面下から測った位置で決まるので、この溝を広げると電話が上へ動く。 */
.job-sticky__body { flex: 1 1 auto; display: grid; gap: 7px; min-width: 0; justify-items: center; }
.job-sticky__tel {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: var(--ls-wide);   /* Tracking 100 */
  color: var(--c-accent);
  text-decoration: none;
}
/* ★受話器アイコンは文字より小さい（カンプ 17.5 ／ 文字24）。
     .job-cta__tel-num の 1em をここだけ上書きする。 */
.job-sticky__tel::before { width: .73em; height: .73em; margin-right: .25em; }
.job-sticky__btn { min-width: 0; width: 100%; height: 45px; font-size: 15px; }

/* =====================================================================
 * 応募フォーム（Task 8）
 * カンプ実測: docs/decisions/2026-08-06-job-comp.md §4
 *   ラベル列 230 ／ 入力欄 600（塗り #F6F6F6）／ 行ピッチ 100
 * ===================================================================== */

.job-apply__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--c-navy);
}
@media (min-width: 1024px) { .job-apply__title { font-size: 30px; } }

.job-apply { display: grid; gap: 18px; }
@media (min-width: 1024px) { .job-apply { gap: 30px; } }
.job-apply__note { margin: 0; font-size: 14px; }

.job-apply__rows { display: grid; gap: 16px; }
@media (min-width: 1024px) { .job-apply__rows { gap: 24px; } }

.job-apply__row { display: grid; gap: 6px; }
@media (min-width: 1024px) {
  /* カンプ実測: ラベル列230 ＋ 入力欄600 */
  .job-apply__row { grid-template-columns: 230px minmax(0, 600px); gap: 0; align-items: start; }
}
.job-apply__label { font-size: 14px; font-weight: 700; color: var(--c-navy); padding-top: 8px; }
@media (min-width: 1024px) { .job-apply__label { font-size: 16px; padding-top: 12px; } }
.job-apply__field { display: grid; gap: 6px; min-width: 0; }

/* 「必須」「任意」バッジ。カンプではラベルの右 */
.job-apply__label .req,
.job-apply__label .opt {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}
.job-apply__label .req { background: var(--c-primary); color: var(--c-white); }
.job-apply__label .opt { background: #DDDDDD; color: #555555; }

.job-apply input[type="text"],
.job-apply input[type="email"],
.job-apply input[type="tel"],
.job-apply select,
.job-apply textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #F6F6F6;      /* カンプ実測 */
  font-size: 15px;
  font-family: inherit;
  color: var(--c-text);
}
.job-apply select { padding-right: 8px; }
.job-apply textarea { line-height: 1.7; resize: vertical; }
.job-apply :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}

/* 年 / 月 / 日 の並び。SPは折り返してよい */
.job-apply__date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.job-apply__date select { width: auto; min-width: 78px; flex: 0 1 auto; }
.job-apply__unit { font-size: 14px; color: var(--c-text); }
.job-apply__time { min-width: 130px; }
/* ★エラー文と補足は行を独立させる。flex の中に入れると横に並んで読めなくなる */
.job-apply__date .field-error,
.job-apply__date .job-apply__help { flex: 1 0 100%; }

.job-apply__zip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.job-apply__zip input { flex: 1 1 160px; }
.job-apply__zip-btn { flex: 0 0 auto; height: 42px; min-width: 110px; font-size: 13px; }
.job-apply__zip .field-error,
.job-apply__zip .job-apply__help,
.job-apply__zip-msg { flex: 1 0 100%; margin: 0; font-size: 12px; }
.job-apply__zip-msg { color: var(--c-primary); }

.job-apply__radios { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.job-apply__radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.job-apply__radios .field-error { flex: 1 0 100%; }

.job-apply__static { margin: 0; padding-top: 10px; font-size: 15px; }
.job-apply__help { font-size: 13px; color: #777777; }

/* 同意チェック */
.job-apply__agree { display: grid; gap: 6px; justify-items: center; text-align: center; }
.job-apply__agree-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.job-apply__agree a { color: var(--c-primary); text-decoration: underline; }

.job-apply__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.job-apply__actions .btn { min-width: 0; flex: 1 1 220px; max-width: 320px; height: 52px; font-size: 16px; }

/* 確認画面。入力欄と同じ並びで、値だけを出す */
.job-apply__review { display: grid; gap: 0; margin: 0; font-size: 14px; line-height: 1.8; }
.job-apply__review dt {
  padding: 12px 14px 4px;
  background: var(--c-bg-pink, #FAF1F2);
  font-weight: 700;
  color: var(--c-primary);
}
.job-apply__review dd { margin: 0; padding: 4px 14px 14px; background: var(--c-bg-pink, #FAF1F2); overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .job-apply__review { grid-template-columns: 230px minmax(0, 1fr); font-size: 15px; }
  .job-apply__review dt { padding: 18px 24px; border-bottom: 1px solid var(--c-white); }
  .job-apply__review dd { padding: 18px 24px; background: var(--c-white); border-bottom: 1px solid var(--c-bg-pink, #FAF1F2); }
}

/* 完了 */
.job-apply__done { display: grid; gap: 14px; font-size: 15px; }
.job-apply__done-note { font-size: 14px; color: #777777; }
.job-apply__done-links { display: flex; flex-wrap: wrap; gap: 12px; }
.job-apply__done-links .btn { min-width: 0; flex: 1 1 200px; }

.job-aside__job { margin: 0; font-size: 14px; color: var(--c-text); }

/* 固定ページ（プライバシーポリシー） */
.page-body { font-size: 15px; line-height: 2; }
@media (min-width: 1024px) { .page-body { font-size: 15px; } }

/* ---------------------------------------------------------------- 求人特集記事（求人TOP）
 * カンプ実測（PC/デザイン/求人/Browdia_サロン求人TOP.jpg・y2101..／画面幅1600）:
 *   見出し「求人特集記事」30px（左揃え・x200）
 *   カード 2列 × 2行（409 + 溝31 + 409 = 849）
 *   下に「求人特集一覧へ」（白地・線のピル・中央）
 * ★置き場所は**2段組の本文カラムの中**（850）。すぐ上の検索パネル（1200いっぱい）とは違う。
 *   カンプは x200..1049 で、**同じyで右カラムの広告がもう始まっている**（y2070..）。
 *   2段組の外に出すとサイドバーだけが下へずれる（2026-08-07 にカンプと並べて気づいた）。
 */
/* ★minmax(0, 1fr) を明示する。省くと列が auto（＝max-content）になり、
   カードの中の画像の実寸に引っ張られて 320px で25pxはみ出す（2026-08-07 に実測）。
   記事一覧の .art-cards は親が素のブロックなので出なかった。 */
.job-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.job-features__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--c-primary);
}
@media (min-width: 1024px) { .job-features__title { font-size: 30px; } }

/* ★.job-features__cards と .job-feat（カードそのもの）は components.css にある。
     求人特集一覧（/job/feature/）が article.css を読むので、job.css に置くと
     その画面だけカードが素になる（サブメニューと同じ理由）。 */
.job-features__more { display: flex; justify-content: center; margin: 0; }

/* ---------------------------------------------------------------- エリア別のヒーロー
 * カンプ実測（§2 / PSD・走査線）:
 *   帯   y251..650（400高）／ #D69EC1 → #CC9ACD（検索パネルと同じグラデ）
 *   写真 x200..799 ／ y281..620 ＝ 600 x 340
 *   「東京」50px（L859 T334）／「の」30px（L972 T358）
 *   「アートメイク求人情報」35px（L861 T406）
 *   「市区町村から選択」18px（L890 T494）／「該当件数 157件」18/22px（L863 T569）
 *   → 右カラムは x859 から。写真との溝は約60
 * ★写真は素材が届くまでの仮画像。エリアごとに持たせるかは発注者と相談中。
 */
.job-areahero { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .job-areahero { grid-template-columns: 600px minmax(0, 1fr); gap: 60px; align-items: center; }
}
.job-areahero__media { min-width: 0; }
.job-areahero__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 30 / 17;            /* 600 x 340 */
  object-fit: cover;
  border-radius: var(--r-card);
}
.job-areahero__body { min-width: 0; }
.job-areahero__title {
  margin: 0 0 16px;
  color: var(--c-white);
  letter-spacing: var(--ls-wide);
  line-height: 1.25;
}
.job-areahero__name { font-size: 30px; font-weight: 700; }
.job-areahero__no   { font-size: 18px; font-weight: 500; }
.job-areahero__sub  { display: block; font-size: 20px; font-weight: 700; margin-top: 6px; }
@media (min-width: 1024px) {
  .job-areahero__title { margin-bottom: 24px; }
  .job-areahero__name { font-size: 50px; }
  .job-areahero__no   { font-size: 30px; }
  .job-areahero__sub  { font-size: 35px; margin-top: 10px; }
}

/* ★SPは中央（カンプは見出しもセレクトも中央）。PCは左揃え */
.job-areahero__pick { margin: 0 0 14px; display: flex; gap: 8px; align-items: center; justify-content: center; }
/* ★カンプ実測 — PC（サーチ結果）: **400 x 70**／ SP（dsf=2 で x60..690 y826..907）: **315 x 41**。
     地色はどちらも #F8ECF8。右端に▼（共通の icon-select-arrow.svg）。
     2026-08-07 まで白地・360x48 の素のセレクトだった。 */
.job-areahero__select {
  appearance: none; -webkit-appearance: none;
  width: 100%; max-width: 315px; height: 41px;
  padding: 0 40px 0 18px;
  border: 0; border-radius: 6px;
  background: #F8ECF8 url("/assets/img/icon-select-arrow.svg") right 15px center / 14px 11px no-repeat;
  color: var(--c-navy);
  font-size: 15px;
  letter-spacing: .05em;
}
@media (min-width: 1024px) {
  .job-areahero__pick { margin-bottom: 22px; justify-content: flex-start; }
  .job-areahero__select {
    max-width: 400px; height: 70px; font-size: 18px;
    padding: 0 48px 0 20px; border-radius: 8px;
    background-position: right 20px center; background-size: 16px 12px;
  }
}
.job-areahero__count { margin: 0; color: var(--c-white); font-size: 15px; letter-spacing: .05em; }
.job-areahero__count strong { font-size: 19px; font-weight: 700; margin: 0 2px; }
@media (min-width: 1024px) {
  .job-areahero__count { font-size: 18px; }
  .job-areahero__count strong { font-size: 22px; }
}