/* =========================================================
   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);
}
/* 整列軸はこのセクション全体で中央に統一する。
   見出しだけ左・脚注とカードは中央、という混在を作らない（DESIGN_LAWS 0-4）。
   中央にするのは、隣接する concept / numbers など既存セクションが中央軸で、
   そのリズムに合わせるため（0-6 反復） */
.quick .eyebrow,
.quick__h { text-align: center; }
.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); }

/* ---------------------------------------------------------
   ③ デスクトップの整列（2026-08-10 修正）
   欠陥は3つあり、いずれも「整列」と「バランス」の違反だった
   （DESIGN_LAWS_DEEP 0-4 整列 ／ 2-6 バランス「右を空けるだけは
     非対称ではなく片寄り＝欠陥」）。

   (1) 応募ボタンを 3 列固定のグリッドに置いたまま、要素が 2 つしか
       無かったため 3 列目が空き、ブロック全体が左へ片寄っていた。
       さらに列幅 181px に「LINEで質問する」が入らず 2 行に折れ、
       ボタンの高さが 58px → 82px に膨らんでいた。
       → 本数が変わっても崩れない中央寄せの並び（flex）に変える。
   (2) FV の条件チップ 5 個が 4＋1 で折り返し、5 個目だけが孤立していた。
       → 1 行に収まる幅を与える。
   (3) #quick が本文幅 680px のまま画面中央に置かれ、1440px では
       ページに対して痩せて見えていた。→ このセクションだけ広げる。
   --------------------------------------------------------- */
@media (min-width: 720px) {
  /* 広い画面ではファクトを 3 列にして 1 行あたりの視線移動を短くする */
  .quick__facts { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  .quick__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: none;
  }
  .quick__btns .btn { width: auto; min-width: 236px; }
  /* 補助導線は主導線より一回り小さく。同じ大きさで並べると優先度が消える */
  .quick__btns--sub { margin-top: 12px; }
  .quick__btns--sub .btn { min-width: 196px; font-size: .86rem; }
}

@media (min-width: 900px) {
  #quick .wrap--read { max-width: 880px; }
  .quick__facts { gap: 14px; }
  .quick__entry { padding-inline: clamp(30px, 4vw, 48px); }
  /* チップ 5 個が 1 行に収まる幅（実測 合計約 655px） */
  .hero__badges { max-width: 720px; }
  /* 主導線を補助より一回り広く取り、横一列でも優先度が読めるようにする */
  .hero__cta .btn--primary { min-width: 210px; }
}