/* ============================================================
   堀商店 採用サイト — モック用スタイル
   方向: photo-led（人と現場の見せ方） × brand-transplant（色と形の土台）
   ※ スキルが認める唯一の混成形。役割が重ならないことを確認済み。
   参照基準: 王将フードサービス採用サイト（実測値はプラン §5）

   色は brand/tokens.json の値だけを使う。ここで新しい色を作らない。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
ul[class] { list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }

:root{
  /* --- 色: brand/tokens.json の値をそのまま移植 --- */
  --red:     #D7261C;   /* 主役の赤。アクション・注目に意味を1つだけ持たせる */
  --dred:    #A81E14;   /* 構造の赤。縦罫・ラベル・下部帯 */
  --ink:     #222222;   /* 真っ黒は使わない */
  --muted:   #6E6E6E;
  --line:    #E2E0DB;
  --bg:      #FAF8F5;   /* 温白 */
  --surface: #FFFFFF;
  --copy:    #F6F6F6;
  --accent:  var(--red);

  /* --- 配色B（2026-11-06 採用）: brand/tokens.json の chart.palette から
         珊瑚と山吹を借りて、暗い面を減らし地を暖める。色相は増やしていない。

     ★ この2色は「地」と「罫」にしか使わない。文字色にはできない。
       実測（WCAG 相対輝度）: 珊瑚 #E8806A は温白地で 2.56:1、山吹 #C9A24B は 2.26:1。
       大きな文字の基準 3.0:1 にも届かない。
       地にして墨文字を載せるなら 珊瑚 5.62:1 / 山吹 6.37:1 で通る。 --- */
  --coral:      #E8806A;   /* chart.palette[1]。面・罫のみ */
  --gold:       #C9A24B;   /* chart.palette[2]。面・罫のみ */
  --coral-pale: #FBEDE8;   /* 珊瑚を薄めた地 */
  --warm:       #FBF3EC;   /* 節の地（温白より一段暖かい） */
  --hero-bg:    #FFF6F1;   /* ヒーローの地 */
  --ph:         #F3E9E4;   /* 図版プレースホルダの面。珊瑚寄りに振った */

  /* --- 形: 角丸は2値だけ（プラン §5 で固定） --- */
  --r-pill: 999px;      /* ボタンのみ */
  --r-face: 4px;        /* 面・カード・画像 */

  /* --- 影: ブラー0のハードシャドウだけ。多段ぼかしで浮かせない --- */
  --shadow-hard: 10px 10px 0 var(--dred);

  /* --- 書体: 3系統に役割を分ける（欧文を先、和文を後。順序を逆にすると
         和文フォントの品質の低い欧文グリフが使われる） --- */
  --font-sans: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;  /* 見出し・本文 */
  --font-num:  "Archivo Black", "Noto Sans JP", sans-serif;             /* 特大数字・ロゴ。骨格の強い欧文 */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ラベル・小さい数値 */

  /* --- 級数: 極大と極小の落差をつくる（参照サイトは14.5倍） --- */
  --fs-display: clamp(4rem, 13vw, 11.5rem);
  --fs-hero:    clamp(2.25rem, 5.4vw, 4.5rem);
  --fs-h2:      clamp(1.625rem, 3vw, 2.5rem);
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.8125rem;
  --fs-micro:   0.6875rem;

  --lh-tight: 1.18;
  --lh-body:  1.8;

  /* --- 行長: 和文は1行38文字を上限にする（文字サイズ×38で算出） --- */
  --measure-body:  40rem;    /* 16px 本文 → 約40文字 */
  --measure-small: 30.5rem;  /* 13px 補足 → 約38文字 */
  --measure-micro: 26rem;    /* 11px 注記 → 約38文字 */

  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;   --sp-6: 1.5rem;
  --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;  --sp-24: 6rem;

  --container: 1180px;
  --dur:  260ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "palt" 1;
  text-align: left;
}
h1, h2, h3 { line-height: var(--lh-tight); font-weight: 700; }
.num, time { font-variant-numeric: tabular-nums; }

:focus-visible{ outline: 3px solid var(--red); outline-offset: 3px; }

.container{ width: min(100% - var(--sp-8), var(--container)); margin-inline: auto; }

/* 英字ラベル。見出しの上に小さく置く。等幅＋大文字＋字間で「ラベル」だと分かる形にする */
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dred);
  font-weight: 600;
}

/* ============================================================
   ヘッダー
   ============================================================ */
/* ヒーローが明るくなったので、ヘッダーも面の中に置いて墨文字にした
   （以前はヒーロー写真の上に絶対配置して白文字だった） */
.site-header{
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) clamp(var(--sp-4), 4vw, var(--sp-16));
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-header__logo{
  display: block;
  text-decoration: none;
  white-space: nowrap;        /* 375pxで2行に割れるのを防ぐ */
}
/* 堀商店のロゴ。筆文字なので下に文字を詰めない */
.site-header__mark{
  display: block;
  height: clamp(24px, 5.6vw, 30px);
  width: auto;
}
.site-header__logo span{
  display: block; margin-top: .45em;
  font-family: var(--font-sans);
  font-size: var(--fs-micro); letter-spacing: .3em; font-weight: 500;
  color: var(--muted);
}

/* ボタン。日本語は折り返しやすいので nowrap で固定（375px対策） */
.btn{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .8em 1.6em;
  border-radius: var(--r-pill);
  border: 2px solid var(--red);
  background: var(--red); color: var(--surface);
  font-weight: 700; font-size: var(--fs-small);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* hoverは面の色反転。浮き上がらせない */
.btn:hover{ background: transparent; color: var(--red); }
/* 旧・写真の上に置くボタン。明るいヘッダーになったので通常の .btn と同じ扱いにする */
.btn--on-photo{ border-color: var(--red); }
.btn--on-photo:hover{ background: transparent; color: var(--red); border-color: var(--red); }
.btn--ghost{ background: transparent; color: var(--red); }
.btn--ghost:hover{ background: var(--red); color: var(--surface); }
.btn--lg{ font-size: var(--fs-body); padding: 1em 2.2em; }
@media (max-width: 420px){
  .site-header{ padding-inline: var(--sp-4); gap: var(--sp-3); }
  .site-header .btn{ padding: .7em 1.1em; font-size: var(--fs-micro); }
}

/* ============================================================
   ヒーロー（photo-led）
   ============================================================ */
/* ヒーロー（2026-11-06 改修）
   暗い全面写真＋スクリムをやめ、明るい地の左右非対称スプリットにした。
   文字が写真に重ならないので、撮影時の「安全域」の制約が消える。
   スマホで16:9の中央26%しか映らない問題も、写真が面の中に収まるので起きない。 */
.hero{
  position: relative;
  background: var(--hero-bg);
}
.hero__inner{
  display: grid; gap: var(--sp-6);
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-16));
}
@media (min-width: 900px){
  /* 左にコピー、右にリード。下端を揃えた非対称。中央寄せの積み上げにしない */
  .hero__inner{
    /* 1.15fr。これ以上コピー側を広げるとリードの最終行が「す。」だけになる（実測） */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--sp-12), 5vw, var(--sp-16));
    align-items: end;
  }
}
.hero__body{ max-width: 46rem; }
.hero__eyebrow{ color: var(--dred); }
.hero__copy{
  color: var(--ink);
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: .01em;
  margin-top: var(--sp-4);
}
/* 「楽しい」だけ赤。アクセント色に意味を1つだけ持たせる */
.hero__copy em{ font-style: normal; color: var(--red); }
.hero__lead{
  max-width: var(--measure-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
}
@media (min-width: 900px){
  .hero__lead{ padding-bottom: .35em; }   /* コピーの最終行と下端を合わせる */
}
/* 全幅の集合写真。角丸は付けない（紙面の裁ち落としと同じ扱い）。
   ★ CSSで切らない。max-height を付けて object-fit: cover に任せると、
     画面が広いほど切り取り量が増えて後列の頭が切れる（1900pxで実際に切れた）。
     PC用（2:1）とスマホ用（3:2）を picture で出し分け、表示側は比率を固定するだけにした。
     幅の上限1600pxは、PC用画像の実寸。これ以上に引き伸ばさない。 */
.hero__fig{
  margin-inline: auto; margin-block: 0;
  max-width: 1600px;
  overflow: hidden; background: var(--ph);
}
.hero__img{ display: block; width: 100%; height: auto; }

/* 3つの入口。カードにしない。罫線で区切った並び */
.entries{
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
}
.entry{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) clamp(var(--sp-4), 4vw, var(--sp-16));
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.entry:last-child{ border-bottom: none; }
/* hoverは浮かせず面を反転させる */
.entry:hover{ background: var(--dred); color: var(--surface); }
.entry__ja{ font-weight: 700; font-size: var(--fs-h3); }
.entry__en{ font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .2em; opacity: .75; }

@media (min-width: 820px){
  /* 均等3カラムにしない。左が広い非対称 */
  .entries{ grid-template-columns: 1.35fr 1fr 1fr; }
  .entry{
    border-bottom: none; border-right: 1px solid rgba(255,255,255,.20);
    flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  }
  .entry:last-child{ border-right: none; }
}

/* ============================================================
   セクション共通
   ============================================================ */
.section{ padding-block: clamp(var(--sp-16), 9vw, var(--sp-24)); }
.section--warm{ background: var(--warm); }
.section--coral{ background: var(--coral-pale); }
.section--white{ background: var(--surface); }

/* 構造の赤：見出しの縦罫。装飾の下線は引かない */
.section-title{
  border-left: 5px solid var(--dred);
  padding-left: var(--sp-4);
  font-size: var(--fs-h2);
  border-bottom: none;
}
.section-head{
  display: grid; gap: var(--sp-6);
  margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-16));
}
.section-head p{ max-width: var(--measure-body); color: var(--muted); }
@media (min-width: 900px){
  /* 左テキスト＋右リード。中央揃えにしない */
  .section-head{ grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: end; gap: var(--sp-12); }
}

/* ============================================================
   求める人物像
   カードにしない。罫線で区切った縦積みの番号リスト
   （ai-tells の「均等3カラムのカード＋影」の置き換え先）
   ============================================================ */
.personas{ border-top: 1px solid var(--line); }
.persona{
  border-bottom: 1px solid var(--line);
  padding-block: clamp(var(--sp-8), 4vw, var(--sp-16));
  display: grid; gap: var(--sp-6);
}
.persona__num{
  font-family: var(--font-num);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 400; line-height: .9;   /* Archivo Black は400の1ウェイトのみ。700は合成太字になる */
  /* 主役の赤は1日体験に譲り、ここは構造の濃赤にする。
     同じページに大きな赤い数字が2組あると主役が2つになる */
  color: var(--dred);
  font-variant-numeric: tabular-nums;
  display: block;
}
.persona__title{
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  margin-top: var(--sp-3);
}
.persona__text{
  margin-top: var(--sp-4);
  color: var(--muted);
  max-width: var(--measure-body);
}
/* Values の一文。珊瑚の縦罫で本文と区切る（罫なので珊瑚を使える） */
.persona__value{
  margin-top: var(--sp-6);
  border-left: 3px solid var(--coral);
  padding-left: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.9;
  max-width: var(--measure-small);
}
.persona__value strong{
  color: var(--dred);
  font-weight: 700;
  margin-right: .6em;
}
.persona__fig{
  margin: 0; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-face);
  background: var(--ph);
}
.persona__fig img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 860px){
  /* 左にテキスト、右に写真。均等割りにしない */
  .persona{ grid-template-columns: 1.45fr 1fr; gap: var(--sp-12); align-items: center; }
  /* 偶数番は左右を入れ替える（同じ形の繰り返しにしない） */
  .persona:nth-child(even) .persona__body{ order: 2; }
  .persona:nth-child(even) .persona__fig{ order: 1; }
  .persona:nth-child(even){ grid-template-columns: 1fr 1.45fr; }
}

/* ============================================================
   数字で見る堀商店（2026-11-06 新設）
   極大の数字を1つ置き、残りを小さくそろえる。
   級数の落差そのものを情報の重みにする。
   ============================================================ */
.stats{ display: grid; gap: clamp(var(--sp-8), 5vw, var(--sp-16)); }
/* 特大の数字は横幅をまるごと使う。列に押し込めると単位が折り返して孤立する */
.stats__lead{ display: grid; gap: var(--sp-4); }
@media (min-width: 900px){
  .stats__lead{
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  }
}
.stats__big{
  white-space: nowrap;
  font-family: var(--font-num);
  font-size: var(--fs-display);
  line-height: .82;
  color: var(--dred);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stats__unit{
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-left: .25em;
  letter-spacing: 0;
}
.stats__text{
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
}
.stats__label{ font-weight: 700; }
.stats__note{
  color: var(--muted); font-size: var(--fs-small);
  max-width: var(--measure-small);
  margin-top: var(--sp-2);
}

.stats__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-6) var(--sp-8);
}
@media (min-width: 900px){
  /* 7項目を 4+3 で置く。auto-fit に任せると 6+1 になって2段目が間延びする */
  .stats__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 影で浮かせず、上罫だけで区切る */
.stat{ border-top: 1px solid var(--coral); padding-top: var(--sp-3); }
.stat dt{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--muted);
}
.stat dd{
  font-family: var(--font-num);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2);
}
.stat__unit{
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  margin-left: .3em;
  letter-spacing: 0;
}
.stats__asof{
  margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
  font-size: var(--fs-micro);
  color: var(--muted);
  max-width: var(--measure-micro);
}

/* ============================================================
   仕事の広がり（名古屋ハロウィンラリー）— 2026-11-06 新設
   写真を大きく1枚。カードにしない
   ============================================================ */
.feature{ display: grid; gap: var(--sp-8); }
@media (min-width: 900px){
  /* 写真が広い非対称。1:1にしない */
  .feature{ grid-template-columns: 1.25fr 1fr; gap: clamp(var(--sp-8), 4vw, var(--sp-16)); align-items: center; }
}
.feature__fig{
  margin: 0; overflow: hidden;
  border-radius: var(--r-face);
  background: var(--ph);
}
.feature__fig img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature__kicker{
  font-weight: 700; font-size: var(--fs-h3);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--coral);
}
.feature__text{
  margin-top: var(--sp-4);
  color: var(--muted);
  max-width: var(--measure-body);
}
.feature__note{
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--coral);
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: var(--measure-small);
}

/* ============================================================
   人を育てる仕組み（コーチング / H-Compass）— 2026-11-06 新設
   見出しを左、本文を右に置いた2段。影で浮かせず横罫で区切る
   ============================================================ */
.programs{ display: grid; gap: 0; }
.program{
  border-top: 2px solid var(--ink);
  padding-block: clamp(var(--sp-8), 4vw, var(--sp-12));
  display: grid; gap: var(--sp-4);
}
@media (min-width: 900px){
  /* 左に見出し、右に本文。行間は margin で作るので row-gap は持たせない */
  .program{
    grid-template-columns: 1fr 1.6fr;
    column-gap: clamp(var(--sp-8), 4vw, var(--sp-12));
    row-gap: 0;
    align-items: start;
  }
  .program__head{ position: sticky; top: var(--sp-8); }
}
.program__tag{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  color: var(--muted);
}
.program__title{
  font-size: var(--fs-h3);
  margin-top: var(--sp-2);
}
.program__text{ color: var(--muted); max-width: var(--measure-body); }
.program__text + .program__text{ margin-top: var(--sp-4); }
.program__text strong{ color: var(--ink); }
/* 引用は飾り記号を使わず、珊瑚の縦罫と級数で示す */
.program__quote{
  margin-top: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--coral);
  font-size: 1.125rem; font-weight: 500;
  line-height: 1.8;
  max-width: var(--measure-body);
}
/* 固有名詞を行またぎで割らない（「堀商／店」のような分断を防ぐ） */
.nw{ white-space: nowrap; }

/* ============================================================
   採用担当者メッセージ — 2026-11-06 新設
   ============================================================ */
.message{ display: grid; gap: clamp(var(--sp-8), 4vw, var(--sp-12)); }
@media (min-width: 900px){
  /* 写真は小さく、言葉を主役にする */
  .message{ grid-template-columns: 1fr 2.1fr; align-items: start; }
}
.message__fig{ margin: 0; }
.message__fig img{
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-face);
  background: var(--ph);
}
.message__sign{ margin-top: var(--sp-4); }
.message__role{ display: block; font-size: var(--fs-micro); color: var(--muted); }
.message__name{
  display: block; font-size: 1.25rem; font-weight: 700;
  margin-top: var(--sp-2); letter-spacing: .08em;
}
.message__lead{
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.5;
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--ink);
}
.message__body p{
  margin-top: var(--sp-5, 1.25rem);
  max-width: var(--measure-body);
}
.message__body p strong{ color: var(--dred); }

/* ============================================================
   1日体験（このサイトの主役コンテンツ）
   ============================================================ */
.trial__badge{
  display: inline-block;
  /* 山吹の地＋墨文字で 6.37:1。白文字（2.40:1）にはしない */
  background: var(--gold); color: var(--ink);
  font-size: var(--fs-small); font-weight: 700;
  padding: .5em 1.1em; border-radius: var(--r-face);
  margin-bottom: var(--sp-4);
}
.trial__pitch{
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 700; line-height: 1.5;
  max-width: 40rem;
}
.trial__pitch strong{ color: var(--red); }

.trial__note{
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-16));
  border: 2px solid var(--ink);
  border-radius: var(--r-face);
  background: var(--surface);
  box-shadow: var(--shadow-hard);   /* ブラー0。物理的にそこにある影 */
  padding: var(--sp-6);
  max-width: 34rem;
}
.trial__note dt{ font-weight: 700; font-size: var(--fs-small); color: var(--dred); }
.trial__note dd{ margin-bottom: var(--sp-3); }
.trial__note dd:last-child{ margin-bottom: 0; }
@media (min-width: 880px){
  /* 4項目を横に並べて、右側が大きく空くのをなくす。
     2行 × 列送りにすると dt→dd の対が縦に積まれる */
  .trial__note{
    max-width: none;
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-8);
  }
  .trial__note dd{ margin-bottom: 0; }
}


/* 体験の流れ。3列に並べる（2026-11-06、2列3件で4セル目が空いていたのを解消）。
   カード＋影にはせず、1pxの縦罫だけで区切る。影で浮かせず、線で区切る。 */
.steps{
  display: grid; gap: var(--sp-8);
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-16));
}
@media (min-width: 760px){
  .steps{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-12);
    border-top: 2px solid var(--ink);
    padding-top: var(--sp-8);
  }
  .step{ position: relative; }
  /* 縦罫は border ではなく擬似要素で溝の中央に引く。
     border/padding にすると1列目だけ内容幅が変わり、写真の高さと見出しの行がずれる */
  .step + .step::before{
    content: "";
    position: absolute;
    left: calc(var(--sp-12) / -2);
    top: 0; bottom: 0;
    border-left: 1px solid var(--line);
  }
}
.step__fig{ margin: 0; border: 1px solid var(--line); border-radius: var(--r-face); overflow: hidden; background: var(--ph); }
.step__fig img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step__num{
  font-family: var(--font-num);
  /* 3列に収めるため、特大(--fs-display)からこの段へ落とした。
     特大級数は「数字で見る堀商店」の節が引き受ける */
  font-size: clamp(2.75rem, 5.2vw, 4.25rem);
  font-weight: 400;
  line-height: .82;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  display: block;
}
.step__title{ font-size: var(--fs-h3); margin-top: var(--sp-3); }
.step__text{
  color: var(--muted); margin-top: var(--sp-2);
  font-size: var(--fs-small);
  max-width: var(--measure-small);
}
.step__body{ margin-top: var(--sp-4); }
/* 02だけ写真がない。面で囲うと「画像が入るはずの穴」に見えるので、
   地のまま言葉だけを置く。縦罫はページ内の引用と同じ形にそろえる */
.step__quote{
  margin: 0;
  border-left: 3px solid var(--red);
  padding-left: var(--sp-4);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.95;
  color: var(--ink);
}
@media (min-width: 760px){
  /* 3列のときだけ、写真と同じ高さを占めて行を揃える */
  .step__quote{ aspect-ratio: 4 / 3; display: grid; align-content: center; }
}

/* ============================================================
   締めのCTA
   ============================================================ */
.cta{ background: var(--dred); color: var(--copy); }
.cta__inner{ padding-block: clamp(var(--sp-16), 8vw, var(--sp-24)); }
.cta h2{ font-size: var(--fs-h2); color: var(--surface); max-width: 26rem; }
.cta p{ margin-top: var(--sp-4); max-width: 34rem; }
.cta__actions{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.cta .btn{ background: var(--surface); color: var(--dred); border-color: var(--surface); }
.cta .btn:hover{ background: transparent; color: var(--surface); }
/* 濃赤の面の上に置く要素 */
.eyebrow--on-dark{ color: var(--copy); opacity: .75; }
.cta .btn--ghost{ background: transparent; color: var(--copy); border-color: var(--copy); }
.cta .btn--ghost:hover{ background: var(--copy); color: var(--dred); }

/* ============================================================
   募集要項ページ
   条件は <table> の行で見せる（Carbon の作法）。カード＋影にしない
   ============================================================ */
/* 下層ページのヘッダー。トップと同じ明るい面にそろえる */
.site-header--solid{ position: static; }

.jobpage{ padding-block: clamp(var(--sp-12), 6vw, var(--sp-24)); }
.jobpage__title{
  font-size: var(--fs-h2);
  border-left: 5px solid var(--dred);
  padding-left: var(--sp-4);
  margin-top: var(--sp-3);
}
.jobpage__title span{
  display: block;
  font-size: var(--fs-small);
  color: var(--muted);
  font-weight: 500;
  margin-top: var(--sp-2);
}
.jobpage__note{ margin-top: var(--sp-4); color: var(--muted); }

/* --- 条件表 --- */
.spec{
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
  border-top: 2px solid var(--ink);
}
.spec th, .spec td{
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) 0;
  text-align: left;
  vertical-align: top;
}
.spec th{
  width: 9.5em;
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--dred);
  padding-right: var(--sp-4);
}
.spec td{ font-variant-numeric: tabular-nums; }
.spec__strong{ font-size: 1.125rem; font-weight: 700; }
.spec__sub{ display: block; font-size: var(--fs-small); color: var(--muted); margin-top: var(--sp-2); }
.spec__note{ display: block; font-size: var(--fs-small); color: var(--muted); margin-top: var(--sp-2); line-height: 1.8; }
.spec__list{ list-style: none; }
.spec__list li{ position: relative; padding-left: 1.1em; }
.spec__list li::before{
  content: ""; position: absolute; left: 0; top: .72em;
  width: .45em; height: .45em; background: var(--dred);
}
.spec__hours{ display: grid; gap: var(--sp-2); }
.spec__row{ display: block; }
.spec__row b{
  display: inline-block; min-width: 11em;
  font-size: var(--fs-small); color: var(--muted); font-weight: 500;
}
.spec__row b.spec__strong{ min-width: 0; color: var(--ink); font-size: 1.125rem; font-weight: 700; }

@media (max-width: 640px){
  .spec, .spec tbody, .spec tr, .spec th, .spec td{ display: block; width: auto; }
  .spec tr{ border-bottom: 1px solid var(--line); padding-block: var(--sp-4); }
  .spec th, .spec td{ border-bottom: none; padding: 0; }
  .spec td{ margin-top: var(--sp-2); }
  .spec__row b{ display: block; min-width: 0; }
}

/* --- 登用の注記 --- */
.jobpage__promo{
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--muted);
  border-left: 3px solid var(--line);
  padding-left: var(--sp-3);
}

/* --- 仕事の種類（アルバイト・パート） --- */
.jobkinds{ margin-top: clamp(var(--sp-16), 7vw, var(--sp-24)); }
.jobkinds__list{ margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.jobkinds__list dt{
  font-weight: 700; padding-top: var(--sp-4);
}
.jobkinds__list dd{
  color: var(--muted); font-size: var(--fs-small);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
  margin-top: var(--sp-2);
}
.jobkinds__note{ margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }

/* --- 選考の流れ --- */
.jobflow{ margin-top: clamp(var(--sp-16), 7vw, var(--sp-24)); }
.jobflow__list{ list-style: none; margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.jobflow__list li{
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.jobflow__num{
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
  color: var(--dred); font-variant-numeric: tabular-nums; min-width: 2.2em;
}
.jobflow__meta{ margin-top: var(--sp-8); font-size: var(--fs-small); }
.jobflow__meta dt{ font-weight: 700; color: var(--dred); margin-top: var(--sp-3); }
.jobflow__meta dd{ color: var(--muted); margin-top: var(--sp-1, .25rem); }

/* 「会社を知る導線」はアルバイト・パート要項の末尾に置いていたが、
   中身が社員採用のものなので2026-11-11に撤去した（CSSも併せて削除） */

.mock-note code{
  font-family: var(--font-mono);
  background: rgba(255,255,255,.14); padding: .1em .5em; border-radius: var(--r-face);
}

/* ============================================================
   エントリー（フォーム）
   入力欄は角丸4px。ピルはボタンだけ。影で浮かせず1pxの罫線で区切る
   ============================================================ */
.entry__lead{
  margin-top: var(--sp-6);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.9;
}

.formsec{
  margin-top: clamp(var(--sp-16), 7vw, var(--sp-24));
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-8);
}
.formsec__note{ margin-top: var(--sp-4); color: var(--muted); max-width: var(--measure-body); }
.formsec__intro{ margin-top: var(--sp-6); }

/* 区分の説明。カードにせず、濃赤の縦罫で区切る */
.kinds{ border-left: 4px solid var(--dred); padding-left: var(--sp-4); max-width: var(--measure-body); }
.kinds dt{ font-weight: 700; margin-top: var(--sp-4); }
.kinds dt:first-child{ margin-top: 0; }
.kinds dd{ color: var(--muted); font-size: var(--fs-small); line-height: 1.9; margin-top: var(--sp-2); }
.kinds dd b{ color: var(--ink); }
.kinds__mark{ color: var(--red); }

/* --- フォーム本体 --- */
.form{ margin-top: clamp(var(--sp-8), 4vw, var(--sp-12)); max-width: 40rem; }
.field{ margin-bottom: var(--sp-8); border: 0; }
.field__label{
  display: block; font-weight: 700; font-size: var(--fs-small);
  margin-bottom: var(--sp-3); padding: 0;
}
.req{
  display: inline-block; margin-left: .7em;
  font-size: var(--fs-micro); font-weight: 700;
  color: var(--surface); background: var(--dred);
  padding: .25em .7em; border-radius: var(--r-face);
  vertical-align: .1em;
}
.field__help{ margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--muted); }

.input{
  width: 100%;
  padding: .85em 1em;
  border: 1px solid var(--muted);
  border-radius: var(--r-face);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.input::placeholder{ color: var(--muted); opacity: .7; }
/* hoverは浮かせず、枠線の色だけ変える */
.input:hover{ border-color: var(--ink); }
.input:focus{ border-color: var(--red); }
.input--area{ resize: vertical; line-height: var(--lh-body); }

/* --- ラジオ --- */
.choices{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.choice{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .7em 1.2em;
  border: 1px solid var(--muted); border-radius: var(--r-face);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.choice:hover{ border-color: var(--ink); }
.choice input{ accent-color: var(--red); width: 1.05em; height: 1.05em; }
/* 選択中は面を反転させる */
.choice:has(input:checked){ background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* --- 同意 --- */
.field--consent{
  border-top: 1px solid var(--line);
  padding-top: var(--sp-6);
}
.consent{ display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.consent input{ accent-color: var(--red); width: 1.15em; height: 1.15em; margin-top: .3em; flex: none; }
.consent a{ color: var(--dred); text-underline-offset: .25em; }

.form__submit{ margin-top: var(--sp-8); }
.form__submit .field__help{ margin-top: var(--sp-4); max-width: 32rem; }

.formsec--plain{ border-top-width: 1px; }
.mailto{ margin-top: var(--sp-4); }
.mailto a{
  font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 700;
  color: var(--dred); text-underline-offset: .3em;
}

/* 罠の入力欄。人には見せず、読み上げにも出さない */
.trap{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile */
.cf-turnstile{ margin-bottom: var(--sp-6); }

/* 送信結果 */
.form__result{
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-left: 4px solid var(--dred);
  background: var(--ph);
  font-weight: 700;
  max-width: 34rem;
}
.form__result.is-error{ border-left-color: var(--red); color: var(--red); }

/* ============================================================
   規約・方針ページ
   ============================================================ */
.legal{ margin-top: clamp(var(--sp-8), 4vw, var(--sp-12)); max-width: var(--measure-body); }
.legal__lead{ color: var(--muted); line-height: 1.9; }
.legal h2{
  font-size: var(--fs-h3);
  margin-top: var(--sp-12);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.legal p{ margin-top: var(--sp-4); line-height: 1.9; }
.legal__ol{ margin-top: var(--sp-4); padding-left: 1.4em; }
.legal__ol li{ margin-top: var(--sp-2); line-height: 1.9; }
.legal__todo{
  color: var(--dred); font-size: var(--fs-small);
  border-left: 3px solid var(--dred); padding-left: var(--sp-3);
}
.legal__contact{ margin-top: var(--sp-4); }
.legal__contact dt{ font-weight: 700; }
.legal__contact dd{ color: var(--muted); font-size: var(--fs-small); margin-top: var(--sp-2); }
.legal__date{ margin-top: var(--sp-12); font-size: var(--fs-small); color: var(--muted); }

/* ============================================================
   フッター（2026-11-06 新設）
   全ページ共通。回遊先は「採用サイト内」「堀商店の他のサイト」の2系統に分ける。
   カードにせず、1pxの横罫と余白だけで区切る。
   ============================================================ */
.site-footer{
  background: var(--ink);
  color: var(--copy);
  font-size: var(--fs-small);
  line-height: 1.9;
}
.site-footer a{ text-decoration: none; }
.site-footer a:hover{ text-decoration: underline; text-underline-offset: .3em; }
.site-footer__inner{
  display: grid; gap: var(--sp-8);
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-16));
}
@media (min-width: 820px){
  /* 均等割りにしない。社名の段を広くとる */
  .site-footer__inner{ grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--sp-12); }
}
.site-footer__name{
  font-size: 1.125rem; font-weight: 700; color: var(--surface);
  line-height: 1.5;
}
.site-footer__since{ color: #B9B7B2; margin-top: var(--sp-2); }

/* 見出しは等幅＋大文字のラベルと同じ作法でそろえる */
.site-footer__head{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #B9B7B2;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid #3A3A3A;
  margin-bottom: var(--sp-3);
}
.site-footer__addr{ font-style: normal; }
.site-footer__map{
  display: inline-block; margin-top: var(--sp-2);
  border-bottom: 1px solid #5A5A5A; padding-bottom: 2px;
}
.site-footer__list{ list-style: none; }
.site-footer__list li{ margin-bottom: var(--sp-2); }
.site-footer__list li:last-child{ margin-bottom: 0; }
/* 外部サイトは一言そえる。リンク名だけでは何のサイトか伝わらない */
.site-footer__sub{
  display: block; color: #9A988F; font-size: var(--fs-micro); line-height: 1.6;
}
.site-footer__base{
  border-top: 1px solid #3A3A3A;
  padding-block: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  align-items: baseline; justify-content: space-between;
}
.site-footer__copy{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: #9A988F;
}

/* ============================================================
   注釈（モック用。本番では削除する）
   ============================================================ */
.mock-note{
  background: var(--ink); color: var(--copy);
  font-size: var(--fs-small);
  padding: var(--sp-6) 0;
}
.mock-note strong{ color: #FFFFFF; }
.mock-note p{ max-width: var(--measure-small); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}