/* =========================================================
   Saari 採用LP ── FV/上部導線 改修（追加スコープ・2026-08-09）
   ---------------------------------------------------------
   なぜ作ったか（実測に基づく）
     2026-08-06〜09 の Meta 広告からの着地 190 セッションのうち、
     1.6 画面目（#concept）に到達したのは 9 セッション＝ 6.8%。
     応募フォーム（#entry）は 19.3 画面目にあり、到達は 3 セッション。応募 0 件。
     到達の 128/137 が Instagram 内蔵ブラウザ＝ほぼ全員スマホ・広告直行。
   何を変えたか
     ① FV に写真を入れて広告とのメッセージマッチを取る（従来は写真が 1 画面目の外）
     ② FV を 1 画面に収める（従来 1,340px ＝ 1.6 画面）
     ③ 2〜3 画面目に #quick を新設し、条件ファクトと応募導線を上部で完結させる
   規律
     既存の 4 分割 CSS（tokens/base/components/sections）は変更しない。
     本ファイルは最後に読み込む追加スコープ。外せば元の見た目に戻る。
     編集したら index.html 側の ?v= を必ず上げる（上げないとキャッシュで反映されない）。
   ========================================================= */

/* ---------------------------------------------------------
   ① FV：写真を最初に見せ、1 画面に収める（スマホのみ）
   デスクトップは従来どおり（文字 → 写真）。広告流入はほぼ全てスマホのため
   スマホ側だけを組み替える。
   --------------------------------------------------------- */
@media (max-width: 680px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 0;              /* 写真を画面最上部から見せる */
  }
  /* DOM は動かさず表示順だけ入れ替える（HTML の構造・計測を壊さない） */
  .hero__photo {
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .hero__inner {
    min-height: 0;
    padding-block: 18px 22px;
  }
  /* ヘッダーに同じロゴが常時出ているため、FV の英字リードは省いて高さを稼ぐ */
  .hero__eyebrow { display: none; }
  .hero__logo {
    width: 100px;
    margin-bottom: 12px;
  }
  .hero__sub { margin-top: 14px; }
  .hero__badges { margin-top: 16px; }

  /* CTA：1 画面目は「応募する」と「LINEで質問」の 2 本だけに絞る。
     相性診断・AI 相談は #quick（条件を読んだ直後）へ移した。
     4 本並べると 1 画面に収まらず、応募ボタンが折り返しの下に落ちる。 */
  .hero__cta {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
    max-width: 340px;
  }
  .hero__cta .btn { width: 100%; min-width: 0; }
  .hero__cta .btn--outline { display: none; }

  /* 「Scroll」は 1 画面に収めるうえで最初に削れる要素（次のセクションが見えていれば足りる） */
  .hero__scroll { display: none; }
}

/* ---------------------------------------------------------
   ①-b 応募ボタンのコントラスト是正
   従来の --c-rose(#cf9b9c) ＋ 白文字は実測 2.38:1 で、WCAG AA（4.5:1）に届かず
   「押せない・非活性のボタン」に見えていた。Art Direction v4 のトークン内で
   最も濃い --c-clay(#9c5a52／スモーキーな赤茶＝差し色)へ置換し 5.25:1 を確保する。
   承認済みパレットの外へは出していない。ヘッダー・固定フッタの応募ボタンにも効く。
   --------------------------------------------------------- */
.btn--primary,
.site-header a.site-header__cta {
  background: var(--c-clay);
  border-color: var(--c-clay);
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible,
.site-header a.site-header__cta:hover,
.site-header a.site-header__cta:focus-visible {
  background: #86463f;
  border-color: #86463f;
}

/* ---------------------------------------------------------
   ② #quick：条件ファクトと応募導線を上部で完結させる
   本文を読みに来ていない層（求人を「見比べている」段階）に、
   スクロールさせずに労働条件を提示する。数字は募集要項（#recruit）と同一。
   --------------------------------------------------------- */
.quick {
  background: var(--c-paper-sand);
  padding-block: clamp(40px, 7vw, 72px);
}
.quick__h {
  font-family: var(--ff-jp-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.35rem, 5.4vw, 2rem);
  line-height: 1.55;
  letter-spacing: var(--ls-jp-wide);
  color: var(--c-ink);
  margin-top: 6px;
}

/* ファクト表：見出し語・数値・注記の 3 層。読まずに「見える」ことを優先する */
.quick__facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quick__facts li {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 14px 12px 13px;
  text-align: center;
}
.quick__k {
  display: block;
  font-size: .76rem;
  letter-spacing: var(--ls-jp-wide);
  color: var(--c-greige-deep);
}
.quick__v {
  display: block;
  margin-top: 5px;
  font-family: var(--ff-jp-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.24rem, 5.2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--c-clay);
}
/* 単位（万円・日・分・OK）。小さくしすぎると「完全週休2日」の 2日 が読めなくなるため
   0.62em から 0.74em へ。実測 20.28px × 0.74 ＝ 15px で下限（12px）を十分に上回る */
.quick__v small {
  font-size: .74em;
  letter-spacing: .04em;
}
.quick__n {
  display: block;
  margin-top: 7px;
  /* 12px 未満にしない（0.74rem＝11.84px で下限割れしていた） */
  font-size: .78rem;
  line-height: 1.65;
  letter-spacing: var(--ls-jp);
  color: var(--c-ink-soft);
}
.quick__note {
  margin-top: 14px;
  font-size: .76rem;
  line-height: 1.8;
  letter-spacing: var(--ls-jp);
  color: var(--c-greige-deep);
  text-align: center;
}

/* 応募ブロック：フォームまで 19 画面下る前に、ここで受け口を出す */
.quick__entry {
  margin-top: 30px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 5vw, 32px) clamp(16px, 4.5vw, 30px) clamp(20px, 4.5vw, 28px);
  text-align: center;
}
.quick__entry-h {
  font-family: var(--ff-jp-serif);
  font-weight: var(--fw-regular);
  font-size: clamp(1.12rem, 4.6vw, 1.4rem);
  line-height: 1.6;
  letter-spacing: var(--ls-jp-wide);
  color: var(--c-ink);
}
.quick__entry-sub {
  margin-top: 10px;
  font-size: .84rem;
  line-height: 1.85;
  letter-spacing: var(--ls-jp);
  color: var(--c-ink-soft);
}
.quick__btns {
  display: grid;
  gap: 10px;
  margin: 20px auto 0;
  max-width: 340px;
}
.quick__btns .btn { width: 100%; min-width: 0; }
/* 補助導線（相性診断・AI相談）は主導線より一段弱く、2 列で置く */
.quick__btns--sub {
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}
.quick__btns--sub .btn {
  font-size: .84rem;
  padding-inline: 8px;
}
.quick__more {
  margin-top: 18px;
  font-size: .82rem;
  letter-spacing: var(--ls-jp);
}
.quick__more a {
  color: var(--c-greige-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 3px;
}
.quick__more a:hover,
.quick__more a:focus-visible { color: var(--c-rose-deep); }

/* 広い画面ではファクトを 3 列にして 1 行あたりの視線移動を短くする */
@media (min-width: 720px) {
  .quick__facts { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .quick__btns {
    grid-template-columns: repeat(3, 1fr);
    max-width: 660px;
  }
}