/* ============================================================
   堀商店 採用サイト — モック用スタイル
   方向: 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;
  --ph:      #F0EEE9;
  --bg:      #FAF8F5;   /* 温白 */
  --surface: #FFFFFF;
  --copy:    #F6F6F6;
  --accent:  var(--red);

  /* --- 形: 角丸は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-en:   "Poppins", "Noto Sans JP", sans-serif;
  --font-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;

  --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-en);
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dred);
  font-weight: 600;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header{
  position: absolute; inset: 0 0 auto 0; 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));
  color: var(--surface);
}
.site-header__logo{
  font-family: var(--font-en);
  font-weight: 700; font-size: clamp(.875rem, 3.4vw, 1.0625rem);
  letter-spacing: .14em;
  text-decoration: none;
  white-space: nowrap;        /* 375pxで2行に割れるのを防ぐ */
}
.site-header__logo span{
  display: block; font-family: var(--font-sans);
  font-size: var(--fs-micro); letter-spacing: .3em; font-weight: 500;
}

/* ボタン。日本語は折り返しやすいので 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--on-photo{ border-color: var(--surface); }
.btn--on-photo:hover{ background: var(--surface); color: var(--ink); border-color: var(--surface); }
.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）
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden;
}
/* picture をグリッドの行として数えさせない（中身は絶対配置なので高さ0の空行ができる） */
.hero > picture{ position: absolute; inset: 0; }
.hero__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* スクリム＝可読性を確保する機能。装飾グラデーションではない */
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 46%, rgba(0,0,0,0) 78%),
    radial-gradient(ellipse at 30% 60%, rgba(0,0,0,0) 38%, rgba(0,0,0,.38) 100%);
}
.hero__body{
  position: relative;
  color: var(--surface);
  padding: 0 clamp(var(--sp-4), 4vw, var(--sp-16)) clamp(var(--sp-12), 7vw, var(--sp-24));
  max-width: 62rem;
}
.hero__eyebrow{ color: var(--surface); opacity: .82; }
.hero__copy{
  color: var(--surface);
  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{
  margin-top: var(--sp-6);
  max-width: 34rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface);
}

/* 3つの入口。カードにしない。罫線で区切った並び */
.entries{
  position: relative;
  border-top: 1px solid rgba(255,255,255,.34);
  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(--surface); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.20);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.entry:last-child{ border-bottom: none; }
.entry:hover{ background: var(--surface); color: var(--ink); }
.entry__ja{ font-weight: 700; font-size: var(--fs-h3); }
.entry__en{ font-family: var(--font-en); 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(--ph); }

/* 構造の赤：見出しの縦罫。装飾の下線は引かない */
.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: 42rem; 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-en);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700; line-height: .9;
  /* 主役の赤は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: 40rem;
}
/* Values の一文。構造の濃赤の縦罫で本文と区切る */
.persona__value{
  margin-top: var(--sp-6);
  border-left: 3px solid var(--dred);
  padding-left: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.9;
  max-width: 40rem;
}
.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; }
}

/* ============================================================
   1日体験（このサイトの主役コンテンツ）
   ============================================================ */
.trial__badge{
  display: inline-block;
  background: var(--dred); color: var(--copy);
  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; }


/* 体験の流れ。大きな数字＋写真。均等カード＋影にしない */
.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(2, minmax(0, 1fr)); gap: var(--sp-12); }
  /* 全幅にする段は明示クラスで指定する（枚数が変わっても崩れない） */
  .step--wide{
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1.25fr 1fr;
    gap: var(--sp-12); align-items: center;
  }
  .step--wide .step__body{ margin-top: 0; }
  .step--wide .step__fig img{ aspect-ratio: 16 / 10; }
  /* 全幅の段は本文も少し大きく。級数の落差で重みを出す */
  .step--wide .step__text{ font-size: var(--fs-body); }
}
.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-en);
  font-size: var(--fs-display);
  font-weight: 700;
  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); }
.step__body{ margin-top: var(--sp-4); }
.step:first-child .step__body{ margin-top: 0; }

/* ============================================================
   締めの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; background: var(--ink); color: var(--surface); }

.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-en); font-size: 1.5rem; font-weight: 700;
  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); }

/* --- 会社を知る導線（アルバイト・パート要項の末尾） --- */
.backlinks{
  margin-top: clamp(var(--sp-16), 7vw, var(--sp-24));
  border-top: 2px solid var(--ink); padding-top: var(--sp-6);
}
.backlinks__lead{ font-weight: 700; }
.backlinks__item{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.backlinks__item:first-of-type{ margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.backlinks__item:hover{ background: var(--ph); padding-left: var(--sp-3); }
.backlinks__item b{ font-size: var(--fs-h3); }
.backlinks__item span{ font-size: var(--fs-small); color: var(--muted); }

.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: 42rem; }
.formsec__intro{ margin-top: var(--sp-6); }

/* 区分の説明。カードにせず、濃赤の縦罫で区切る */
.kinds{ border-left: 4px solid var(--dred); padding-left: var(--sp-4); max-width: 46rem; }
.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: 46rem; }
.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); }

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

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