/* 土台の骨格と部品（spinova-lp-kit）
 * 骨格：stage／column／header／slider／page／PCの左右の帯／フォーム（NEXT は標準から外した。必要なら templates/parts/nextbtn.css）
 * 決まり：1つの部品は1か所にだけ書く。後ろに足して上書きしない。!important は「動きを減らす設定」の中だけ
 * 色・書体・大きさは tokens.css の変数だけを使う。案件の見た目は site/style.css（案件で作る）に書き、ここは直さない
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: clip; }
body {
  font-family: var(--font-body); font-weight: 400; color: var(--color-ink);
  background: var(--color-pale); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
em, i { font-style: normal; }
img, video { display: block; max-width: 100%; }
.defs { position: absolute; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nb { white-space: nowrap; }   /* 語の途中で改行させない句を包む */

/* ---------- stage / column（PCは中央の枠＋影） ---------- */
.stage { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--color-pale); }
.column { position: relative; width: 100%; max-width: var(--col); height: 100dvh; margin-inline: auto; overflow: hidden; background: var(--color-base); }
.rail { display: none; }

/* ---------- slider（ページ送りはCSSのスナップが本体。JSは位置を補正しない） ----------
 * mandatory＋snap-stop always：上下どちらのスワイプも1回で1ページ
 * overscroll-behavior none：最下部・最上部で跳ね返って前のページへ戻らない
 * スクロールバーは出さない */
.slider {
  position: relative; z-index: 1; height: 100dvh; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; overscroll-behavior-y: none; scrollbar-width: none; outline: none;
}
.slider::-webkit-scrollbar { display: none; }

/* ---------- header（ロゴ＋募集要項・エントリー。背景は常に白） ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 16px;
  background: var(--color-base);
}
.logo { display: block; width: 120px; }
.logo img { width: 100%; height: auto; }
.header-nav { display: flex; gap: 6px; }
.hb {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  font-weight: 700; font-size: var(--fs-ui); letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid var(--color-main); border-radius: var(--radius-pill);
  transition: background var(--dur-hover) ease-in, color var(--dur-hover) ease-in;
}
.hb--req { color: var(--color-main); background: var(--color-base); }
.hb--entry { color: var(--color-on-dark); background: var(--bg-accent); border-color: transparent; }
@media (hover: hover) {
  .hb--req:hover { background: var(--color-main); color: var(--color-on-dark); }
}

/* ---------- page（1スワイプ＝1画面） ----------
 * 改行：auto-phrase で語の切れ目で折り返す（対応ブラウザのみ）。line-break strict で句読点・閉じかっこを行頭に送らない
 * 足りない所は文言を変えずに .nb で包む */
.page {
  position: relative; height: 100dvh; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  font-size: var(--fs-base); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  word-break: auto-phrase; line-break: strict; overflow-wrap: normal;
  background: var(--color-base);
}
.page[data-tone="dark"] { background: var(--bg-dark); color: var(--color-on-dark); }
.page__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-g);   /* まとまり同士の間隔（デザインの原則：近接。tokens.css の --sp-1／--sp-p／--sp-g の3段階だけを使う） */
  padding: calc(var(--header-h) + var(--pad-y)) var(--gutter) var(--pad-y);   /* 上＝下（中身の上端とヘッダーの下端の間＝中身の下端と画面の下端の間。絶対条件・tools/check_vbal.mjs で検査） */
}
.ln { display: block; }
.label-en { font-family: var(--font-en); font-weight: 500; font-size: var(--fs-ui); line-height: 1; letter-spacing: 0.16em; color: var(--color-main-2); }
.page[data-tone="dark"] .label-en { color: var(--color-on-dark-line); }
.ttl { font-family: var(--font-head); font-weight: 700; font-size: 1.6em; line-height: var(--lh-head); letter-spacing: 0.02em; }
.body { font-weight: var(--fw-body); }
.close { font-weight: 700; }
.list { display: grid; gap: 0.3em; font-weight: 700; }
.list li::before { content: "・"; }
.mk { color: inherit; background: linear-gradient(transparent 62%, var(--color-accent) 62%); }

/* ---------- 長いページ（募集要項・エントリー）：ページごとスクロールする ----------
 * 1画面より高いページは、スナップの中で自由にスクロールできる（枠の中だけをスクロールさせない）
 * .page__end：ページの最下部にも止まる位置を置き、最下部で上へ戻されないようにする
 * 長いページではNEXTを出さない（本文に重なるため。swipe.js が .is-long を付ける） */
.page--long { height: auto; min-height: 100dvh; overflow: visible; }
.page--long .page__inner { height: auto; justify-content: flex-start; padding-bottom: 3em; }
.page__end { display: block; height: 1px; scroll-snap-align: end; scroll-snap-stop: always; }   /* 最下部で必ず止める（付けないと勢いが素通りして次の長いページの途中まで流れた。鈴興建設 10/18） */

/* ---------- 通常スクロール型（kit.conf LAYOUT="scroll"・index.html の <html data-layout="scroll">） ----------
 * シート（エンドクライアントの要望）が「スクロール形式」を指定したとき（2026-10-17 FUKURU）。スナップを切り、各ページは中身の高さ
 * 1画面に収める決まりは外れる（1ページ目の .page--hero だけは1画面のまま）。ページの高さ・余白は案件の style.css で決める */
[data-layout="scroll"] .slider { scroll-snap-type: none; overscroll-behavior-y: auto; }
[data-layout="scroll"] .page:not(.page--hero) { height: auto; overflow: visible; scroll-snap-align: none; scroll-snap-stop: normal; }
[data-layout="scroll"] .page__inner { height: auto; justify-content: flex-start; padding: 4.5em var(--gutter); }
[data-layout="scroll"] .page__end { display: none; }
.req { display: grid; border-top: 1px solid var(--color-line); }
.req__row { display: grid; grid-template-columns: 6.5em 1fr; gap: 1em; padding: 0.9em 0; border-bottom: 1px solid var(--color-line); }
.req dt { font-weight: 700; color: var(--color-main); }

/* ---------- フォーム（入力欄は16px：iPhoneで拡大されない） ---------- */
.form { display: grid; gap: 1.1em; }
.field { display: grid; gap: 0.4em; }
.field__label { display: flex; align-items: center; gap: 0.6em; font-weight: 700; }
.field__req { padding: 0.1em 0.5em; font-size: var(--fs-min); line-height: 1.4; color: var(--color-on-dark); background: var(--color-error); border-radius: var(--radius-s); }
.field__input {
  width: 100%; min-height: 48px; padding: 0.6em 0.8em;
  font: inherit; font-size: var(--fs-input); color: var(--color-ink);
  background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-s);
}
.field__input--area { min-height: 7.5em; resize: vertical; }
select.field__input {
  -webkit-appearance: none; appearance: none; padding-right: 2.8em;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: right 1.35em center, right 1em center; background-size: 0.35em 0.35em; background-repeat: no-repeat;
}
.field__input:focus { border-color: var(--color-main); outline: none; }
.form__submit {
  justify-self: center; min-width: 70%; min-height: 56px; margin-top: 0.5em; padding: 0 2em;
  font: inherit; font-weight: 700; font-size: var(--fs-input); letter-spacing: 0.08em; color: var(--color-on-dark);
  background: var(--bg-accent); border: 0; border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); cursor: pointer;
}

/* ---------- 出現（.rv → .is-on。上から順に出す時間割は swipe.js） ---------- */
.rv { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-in) ease, transform var(--dur-in) var(--ease-out); }
.rv.is-on { opacity: 1; transform: none; }

/* ---------- TOP：動画（ヘッダーの下から表示） ---------- */
.hero__video { position: absolute; left: 0; right: 0; top: var(--header-h); width: 100%; height: calc(100% - var(--header-h)); object-fit: cover; background: var(--color-pale); }
.hero__swipe {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
  padding: 8px 18px; border-radius: var(--radius-pill); background: var(--color-main); color: var(--color-on-dark);
  font-family: var(--font-en); font-weight: 500; font-size: var(--fs-ui); letter-spacing: 0.2em; white-space: nowrap;
}

/* ---------- PC：左右の帯（左＝ロゴ、右＝募集要項・エントリー） ---------- */
@media (min-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); }
  .column { box-shadow: var(--shadow-column); }
  .rail { position: relative; display: grid; place-items: center; height: 100dvh; padding: 32px; }
  .rail-logo { display: grid; justify-items: start; gap: 14px; width: min(100%, 280px); }
  .rail-logo__img { width: 100%; height: auto; }
  .rail-logo__en { font-family: var(--font-en); font-weight: 500; font-size: 14px; letter-spacing: 0.28em; color: var(--color-main-2); }
  .rail-logo__jobs { font-weight: 700; font-size: 15px; line-height: 1.8; color: var(--color-main); }
  .rail-side { display: grid; gap: 24px; width: min(100%, 260px); }
  .rail-side__page { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-en); font-weight: 500; font-size: 14px; letter-spacing: 0.12em; color: var(--color-main-2); }
  .rail-side__now { font-size: 40px; line-height: 1; font-weight: 600; color: var(--color-main); }
  .rail-side__btns { display: grid; gap: 14px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
    font-weight: 700; font-size: 16px; letter-spacing: 0.08em; border: 1px solid var(--color-main); border-radius: var(--radius-pill);
    transition: background var(--dur-hover) ease-in, color var(--dur-hover) ease-in;
  }
  .btn--line { background: var(--color-base); color: var(--color-main); }
  .btn--fill { background: var(--bg-accent); border-color: transparent; color: var(--color-on-dark); box-shadow: var(--shadow-soft); }
  .btn--line:hover { background: var(--color-main); color: var(--color-on-dark); }
}

/* ---------- 低い画面：間隔から詰める（文字は --fs-base が高さに合わせて下がる） ---------- */
@media (max-height: 620px) {
  .page__inner { gap: 0.8em; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}