/*
【編集ガイド／画面の順番で探す】
・全体の色・フォント → 01｜デザイン設定（:root）
・中央の最大幅・背景 → 03｜共通レイアウト（.site-wrapper）
・ヘッダーの社名とボタン → 04、05（.site-header、.header-cta）
・0 検証用動画 → 24（#test-video）
・コンセプト「強みは、稼ぐ力になる。」 → 23（#concept）
・01 あなたはどうなりたい？ → 08、40（#future）
・02 お金を稼ぎたい！ → 25 基本／28 数字の枠／37 最終寸法（#income）
・03 立場を築いて、周りから信頼されたい！ → 09、34、40（#leader）
・04 収入UPの3つの柱 → 10 基本／29 初任給／38 最終寸法（#rewards）
・05 インセンティブの仕組み → 31、32、35、36、41、42、43（#incentive）
・06 求める人物像 → 11、12、40（#people）
・07 重量鳶／08 電気工事士の仕事内容 → 30、39、40（.work-screen）
・09 募集要項 → 12 職種タブ／13 情報表／27 スナップ（#requirements）
・10 会社概要 → 13 情報表（#company）
・11 エントリー → 14 フォーム／26 見出しの改行（#entry）
・フッター → 15、下部ページ番号 → 16
・PC左右の固定UI → 18、21（.desktop-rail）
・登場アニメーション → 33 と assets/js/daito.js
・募集要項／エントリーのスクロール状態 → 44 と assets/js/daito.js
・動きを減らす設定 → 20、および23・33内の同名メディア条件

【適用順の注意】
独自の画面スタイルはこの1ファイル。fonts.cssは文字範囲ごとのフォント定義。
読み込み順：fonts.css → daito.css。ビルド処理・外部UIライブラリなし。
画面順の案内は上の目次を使用。既存のカスケードを保つためルール本体は
元の適用順を維持している。後段の「個別調整」「画面高調整」も確認すること。
同じセレクタの繰り返し・!important・疑似要素を一括削除しないこと。
幅条件：451／769／1000／350px。高さ条件：620／668／740／800px。
複数条件が同時に成立する場合も、このファイル内の順序で解決される。
画像・動画はindex.html、フォントの参照パスはfonts.cssで管理。
JSはhidden・aria-selected・tabIndex・reveal-pending・bounded-scrollを操作する。
CSS変数へのJS書き込みはない。アニメーションはJSからopacity/transformを操作。
スクロールの仕様変更は本整理に含めていない。
*/

/* ==================================================
01｜デザイン設定：色・フォント・基準寸法
対象：:root
編集箇所：--base は青背景、--ink は本文と濃紺帯、--paper は白文字と外側背景。
 * --site-width はPC左右UIの余白計算（中央の実幅は .site-wrapper の max-width）。
 * --header-height はヘッダーと画面高さ、--gutter は左右余白。
 * 基本フォントは font-family。数字・英字は各部品の Anton 指定。
注意：幅451px以上では --gutter が上書きされます。値・変数の適用範囲は変更していません。
================================================== */
:root {
  --base:#1452c7;
  --ink:#060d30;
  --paper:#f7fbfc;
  --site-width:480px;
  --header-height:68px;
  --gutter:15px;
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  font-weight:500;
  background:var(--paper);
}

/* ==================================================
02｜リセット・基本設定・フォーカス
対象：body、button、input など
編集箇所：既定余白、文字の継承、フォーカス枠。フォーム固有の枠色は「エントリー」にあります。
================================================== */
* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,textarea,select {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button {
  border-radius:0;
}

a {
  color:inherit;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid var(--paper);
  outline-offset:4px;
}

button:disabled {
  cursor:default;
}

button,figure,h1,h2,h3,p,ol,dl {
  margin:0;
}

em {
  font-style:normal;
  color:var(--paper);
}

/* ==================================================
03｜共通レイアウト：中央480pxと背景罫線
対象：.site-wrapper
編集箇所：中央幅 → max-width、縦罫線 → :before。
注意：container-type とスクロール高さの補正は「共通レイアウト：後段補正」に残しています。
================================================== */
.site-wrapper {
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:var(--base);
  position:relative;
  isolation:isolate;
  height:100dvh;
  overflow:hidden;
}

.site-wrapper:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),#f7fbfc40 calc(50% - 1px),#f7fbfc40 50%,transparent 50%,transparent 100%);
  background-size:270px 100%;
  background-position:center;
}

/* ==================================================
04｜ヘッダー：社名と募集要項・エントリー
対象：.site-header、.wordmark、.header-actions
編集箇所：内側余白 → padding-inline、社名 → .wordmark、ボタン → .header-actions>.header-cta。
================================================== */
.site-header {
  height:var(--header-height);
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:var(--base);
  border-bottom:1px solid #f7fbfc40;
  position:relative;
  z-index:5;
}

.brand {
  background:none;
  border:0;
  padding:0;
  text-align:left;
  color:var(--ink);
  flex-shrink:0;
}

.wordmark {
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.wordmark small {
  font-size:9px;
  letter-spacing:.15em;
  font-weight:700;
}

.wordmark strong {
  font-weight:900;
  font-size:24px;
  letter-spacing:-.07em;
  white-space:nowrap;
}

.header-actions {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  flex-shrink:0;
}

/* ==================================================
05｜共通ボタン：濃紺・白・hover
対象：.cta、.cta.light
編集箇所：色と枠線 → .cta、反転 → :hover、ヘッダー専用寸法 → 直後の .header-cta。
================================================== */
.cta {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:2px solid var(--ink);
  color:var(--paper);
  background:var(--ink);
  font-weight:900;
  text-decoration:none;
  transition:background .2s,color .2s;
}

.cta:hover {
  background:var(--paper);
  color:var(--ink);
}

.cta.light {
  background:var(--paper);
  color:var(--ink);
}

.cta.light:hover {
  background:var(--ink);
  color:var(--paper);
}

.header-actions>.header-cta {
  font-size:13px;
  padding:3px 8px;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  line-height:1.5;
  flex:0 0 auto;
  white-space:nowrap;
  margin:0;
}

/* ==================================================
06｜共通レイアウト：スクロールとセクション
対象：.swipe-container、.screen
編集箇所：画面高さ・余白・スナップ位置。
注意：daito.js のスクロール制御と連動。後段の高さ補正を含めて確認してください。
================================================== */
.swipe-container {
  height:calc(100dvh - var(--header-height));
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
  outline:none;
}

.swipe-container::-webkit-scrollbar {
  display:none;
}

.screen {
  height:calc(100dvh - var(--header-height));
  min-height:calc(100dvh - var(--header-height));
  max-height:calc(100dvh - var(--header-height));
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:22px var(--gutter) 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  position:relative;
  touch-action:pan-x pinch-zoom;
}

/* ==================================================
07｜共通見出し：英字・番号・本文・濃紺帯
対象：.chapter、.screen h1、.screen p、.band
編集箇所：英字 → .chapter>span、番号 → .chapter>b、本文 → .screen p。
================================================== */
.chapter {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:Anton,sans-serif;
  line-height:1;
}

.chapter>span {
  font-size:30px;
  color:transparent;
  -webkit-text-stroke:1px var(--paper);
  letter-spacing:.025em;
}

.chapter>b {
  font-size:58px;
  color:var(--paper);
  font-weight:400;
}

.screen h1 {
  font-weight:900;
  font-size:clamp(30px,8.8cqi,42px);
  line-height:1.15;
  letter-spacing:-.075em;
}

.screen p {
  font-size:14px;
  line-height:1.75;
  letter-spacing:.02em;
}

.closing {
  text-align:center;
}

.closing {
  font-weight:900;
}

.band {
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  padding:10px;
  font-size:19px;
  font-weight:900;
  line-height:1.3;
}

/* ==================================================
08｜あなたはどうなりたい？：目標の枠
対象：#future、.desires、.next
編集箇所：枠の内側 → .desires>div、プラス記号 → .plus、次へのボタン → .next。
================================================== */
.desires>div {
  display:block;
  border:4px solid var(--ink);
  text-align:center;
  padding:13px 8px;
  font-weight:900;
  font-size:21px;
  line-height:1.4;
}

.plus {
  display:block;
  text-align:center;
  font-size:25px;
  font-weight:900;
  line-height:1.4;
}

.next {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:none;
  border:0;
  padding:8px;
  font-family:Anton,sans-serif;
  letter-spacing:.08em;
  font-size:13px;
  color:var(--paper);
}

.next span {
  font-size:24px;
}

/* ==================================================
09｜立場を築いて、周りから信頼されたい！：基本
対象：#leader、.statement
編集箇所：大きな一文 → .statement。最終の見出し・改行は「立場を築いて：個別調整」を参照。
================================================== */
.statement {
  font-size:42px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.05em;
}

/* ==================================================
10｜収入UPの3つの柱：基本
対象：#rewards、.pillars
編集箇所：三つの枠・数字・プラス記号。給与額は「初任給の数字」、最終寸法は「収入UP：画面高調整」。
================================================== */
.pillars {
  text-align:center;
}

.pillars>div {
  border:3px solid var(--ink);
  padding:8px;
  font-size:22px;
  font-weight:900;
  line-height:1.25;
}

.pillars span {
  font-family:Anton,sans-serif;
  font-size:36px;
  margin:0 8px;
  font-weight:400;
}

.pillars i {
  display:block;
  font-style:normal;
  font-size:24px;
  line-height:1.25;
  font-weight:900;
}

.pillars .filled {
  background:var(--ink);
  color:var(--paper);
  padding:14px 8px;
}

/* ==================================================
11｜求める人物像：職種別リスト
対象：#people、.steps
編集箇所：項目間隔 → gap、番号 → .step-number、見出し → .steps h3。
================================================== */
.steps {
  padding:0;
  list-style:none;
  display:grid;
  gap:18px;
}

.steps li {
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-top:3px solid var(--ink);
  padding-top:10px;
}

.step-number {
  font-family:Anton,sans-serif;
  color:var(--paper);
  font-size:32px;
  line-height:1;
}

.steps h3 {
  font-size:19px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.04em;
  margin-bottom:5px;
}

.steps p {
  font-size:13px;
  line-height:1.65;
}

/* ==================================================
12｜共通：重量鳶・電気工事士の切り替え
対象：.job-tabs、[hidden]
編集箇所：タブ寸法 → button、選択色 → [aria-selected=true]。
注意：JSが aria-selected・tabIndex・hidden を更新。[hidden] の !important は表示制御に必要なため維持。
================================================== */
.job-tabs {
  display:flex;
  gap:0;
  border:2px solid var(--ink);
}

.job-tabs button {
  width:50%;
  border:0;
  background:none;
  color:var(--ink);
  font-size:16px;
  font-weight:900;
  padding:10px 4px;
}

.job-tabs button[aria-selected=true] {
  background:var(--ink);
  color:var(--paper);
}

[hidden] {
  display:none!important;
}

/* ==================================================
13｜募集要項・会社概要：情報表
対象：#requirements、#company、.facts
編集箇所：項目名の列幅 → grid-template-columns、行余白 → padding。
注意：両セクションで共有。会社概要だけに変更する場合は #company を付けた範囲を検討してください。
================================================== */
.facts>div {
  display:grid;
  grid-template-columns:84px 1fr;
  border-top:2px solid var(--ink);
  padding:12px 0;
  gap:12px;
  font-size:13px;
  line-height:1.7;
}

.facts>div:last-child {
  border-bottom:2px solid var(--ink);
}

.facts dt {
  font-weight:900;
}

.facts dd {
  margin:0;
}

/* ==================================================
14｜エントリー：フォームと幅いっぱいのボタン
対象：#entry、form、.wide、.is-long-section
編集箇所：入力欄 → input,select,textarea、項目間 → form gap、必須表示 → .required。
注意：見出しの改行は後段の「エントリー：改行」。.is-long-section は長い内容の高さを保持。
================================================== */
.wide {
  width:100%;
  padding:14px 16px;
  font-size:16px;
  min-height:54px;
}

.is-long-section {
  height:auto;
  min-height:calc(100dvh - var(--header-height));
  max-height:none;
  scroll-snap-stop:normal;
  justify-content:flex-start;
  padding-top:30px;
  touch-action:pan-y pinch-zoom;
}

.is-long-section h1 {
  font-size:28px;
}

form {
  display:grid;
  gap:24px;
  margin-top:12px;
}

form label {
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.6;
}

form label>.required,form label>.optional {
  font-size:11px;
  margin-left:8px;
}

.required {
  background:var(--ink);
  color:var(--paper);
  padding:2px 5px;
}

.optional {
  font-weight:500;
}

input,select,textarea {
  display:block;
  width:100%;
  margin-top:9px;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  font-weight:500;
  line-height:1.6;
  padding:12px;
  min-height:52px;
  box-shadow:none;
}

input::placeholder,textarea::placeholder {
  color:#62697e;
}

textarea {
  min-height:170px;
  resize:vertical;
}

select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px;
}

.select-wrap {
  display:block;
  position:relative;
}

.select-wrap:after {
  content:"";
  position:absolute;
  right:18px;
  top:22px;
  width:9px;
  height:9px;
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
  pointer-events:none;
}

form :focus-visible {
  outline-color:var(--ink);
}

#form-status:empty {
  display:none;
}

/* ==================================================
15｜フッター：社名とコピーライト
対象：footer
編集箇所：上余白 → margin-top/padding、社名サイズ → footer strong。
================================================== */
footer {
  border-top:3px solid var(--ink);
  margin-top:30px;
  padding:30px 0 5px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

footer strong {
  font-size:23px;
  font-weight:900;
}

footer span,footer small {
  font-size:10px;
  letter-spacing:.08em;
}

/* ==================================================
16｜ページ番号・PC専用UIの基本
対象：.page-indicator、.desktop-rail
編集箇所：下部番号の高さ → height、PC表示 → 後段の「PC専用UI」。
================================================== */
.page-indicator {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:24px;
  background:var(--base);
  color:var(--paper);
  font-family:Anton,sans-serif;
  font-size:10px;
  pointer-events:none;
}

.page-indicator i {
  height:1px;
  width:28px;
  background:var(--paper);
}

.desktop-rail {
  display:none;
}

.site-wrapper {
  container-type:inline-size;
}

/* ==================================================
17｜共通レスポンシブ：幅451px以上
対象：:root、.screen、.steps
編集箇所：左右余白、本文サイズ。
注意：後続の高さ条件・個別セクション指定より前に適用される位置を維持。
================================================== */
@media(min-width:451px) {
  :root {
    --gutter:30px;
  }
  .screen {
    gap:22px;
  }
  .screen p {
    font-size:15px;
  }
  .steps p {
    font-size:14px;
  }
}

/* ==================================================
18｜PC専用UI：左社名・右固定CTA
対象：.desktop-rail、.rail-actions
編集箇所：左社名 → .left-rail .wordmark、右CTA間隔 → gap、高さ → min-height。
注意：中央480pxとの差を使った位置計算。幅769〜1000pxの補正は後段。
================================================== */
@media(min-width:769px) {
  /* PC外側の背景画像。中央コンテンツ・スマホ表示には適用しない。 */
  body {
    background-image: url("/assets/img/daito/desktop-background.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }
  .desktop-rail {
    position:fixed;
    top:50%;
    width:calc((100% - var(--site-width))/2);
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    flex-direction:column;
    gap:24px;
  }
  .left-rail {
    left:0;
  }
  .right-rail {
    right:0;
  }
  .left-rail .wordmark {
    width:195px;
    max-width:100%;
  }
  .left-rail .wordmark strong {
    font-size:clamp(24px,3.9vw,48px);
  }
  .left-rail .wordmark small {
    font-size:12px;
  }
  .rail-caption {
    font-family:Anton,sans-serif;
    letter-spacing:.08em;
    font-size:12px;
    line-height:1.6;
  }
  .rail-actions {
    display:flex;
    flex-direction:column;
    gap:14px;
    width:180px;
    max-width:100%;
  }
  .rail-actions .cta {
    min-height:56px;
    width:100%;
    padding:12px;
    font-size:14px;
    gap:5px;
  }
  .rail-actions .cta span {
    font-size:18px;
  }
}

/* ==================================================
19｜共通レスポンシブ：高さ740px以下・620px以下
対象：.screen、.chapter、.steps、.facts、.pillars
編集箇所：低い画面の文字・余白。
注意：この後の個別指定が優先される箇所があります。条件と適用順を変更しないでください。
================================================== */
@media(max-height:740px) {
  .screen {
    gap:12px;
    padding-top:12px;
    padding-bottom:28px;
  }
  .chapter>b {
    font-size:42px;
  }
  .chapter>span {
    font-size:24px;
  }
  .screen h1 {
    font-size:32px;
  }
  .statement {
    font-size:36px;
  }
  .steps {
    gap:12px;
  }
  .steps li {
    padding-top:7px;
  }
  .steps h3 {
    font-size:17px;
  }
  .facts>div {
    padding:8px 0;
  }
  .desires>div {
    font-size:19px;
    padding:10px;
  }
  .is-long-section {
    padding-top:24px;
  }
}

@media(max-height:620px) {
  /* ==================================================
22｜共通レイアウト：後段補正
対象：.screen:not(.is-long-section)
編集箇所：内容高さの確保、タッチ操作、子要素の縮み防止。
注意：先行する高さ条件への上書き順を保つため、この位置に残しています。
================================================== */
.screen:not(.is-long-section) {
    gap:8px;
    padding-top:8px;
    padding-bottom:24px;
  }
  .screen:not(.is-long-section) p {
    font-size:12px;
    line-height:1.6;
  }
  .steps {
    gap:8px;
  }
  .steps h3 {
    font-size:16px;
  }
  .band {
    padding:8px;
  }
  .pillars>div {
    padding:6px;
  }
  .pillars .filled {
    padding:10px;
  }
  .desires>div {
    padding:8px;
  }
  .chapter>b {
    font-size:32px;
  }
  .screen h1 {
    font-size:28px;
  }
}

/* ==================================================
20｜アクセシビリティ：動きを減らす設定
対象：prefers-reduced-motion
編集箇所：共通の transition と scroll-behavior。写真スライド・登場待機の個別指定も後段にあります。
注意：!important はOS設定を優先するため保持。JSも同じメディア条件を監視。
================================================== */
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* ==================================================
21｜PC専用UI：幅769〜1000pxの補正
対象：.desktop-rail、.rail-actions
編集箇所：狭い左右余白での文字・padding・矢印非表示。
================================================== */
@media (min-width:769px) and (max-width:1000px) {
  .desktop-rail {
    padding:12px;
  }
  .rail-actions .cta {
    font-size:13px;
    padding-inline:8px;
    justify-content:center;
  }
  .rail-actions .cta span {
    display:none;
  }
  .rail-caption {
    font-size:10px;
  }
  .left-rail .wordmark small {
    font-size:10px;
  }
}

.screen:not(.is-long-section) {
  height:auto;
  max-height:none;
  touch-action:pan-y pinch-zoom;
}

.screen:not(.is-long-section)>* {
  flex-shrink:0;
}

/* ==================================================
23｜コンセプト：強みは、稼ぐ力になる。
対象：#concept、.concept-visual、.concept-track
編集箇所：画像比率 → height、見出し → .concept-caption h1、横スライド → .concept-track。
注意：写真パスはHTMLの img。@keyframes とOSの動き抑制指定もこのブロックにあります。
================================================== */
.screen.concept-section {
  padding:0;
  gap:0;
  height:calc(100dvh - var(--header-height));
  max-height:calc(100dvh - var(--header-height));
}

.screen.concept-section {
  justify-content:flex-start;
}

.concept-visual {
  position:relative;
  width:100%;
  height:64%;
  overflow:hidden;
}

.concept-outline {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Anton,sans-serif;
  font-size:23cqi;
  line-height:1;
  letter-spacing:-.025em;
  color:transparent;
  -webkit-text-stroke:1px var(--paper);
  pointer-events:none;
}

.concept-caption {
  width:100%;
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 12px;
  gap:12px;
}

.concept-solid {
  font-family:Anton,sans-serif;
  font-size:13cqi;
  line-height:1;
  color:var(--paper);
  margin-top:-.45em;
  position:relative;
}

.screen .concept-caption h1 {
  font-size:clamp(32px,10cqi,48px);
  line-height:1.2;
  letter-spacing:-.075em;
  font-weight:900;
}

.concept-rule {
  display:block;
  width:2px;
  height:24px;
  background:var(--ink);
}

@media(max-height:620px) {
  .concept-visual {
    height:58%;
  }
  .concept-caption {
    gap:8px;
  }
  .screen .concept-caption h1 {
    font-size:9cqi;
  }
  .concept-rule {
    height:16px;
  }
}

.concept-track {
  display:flex;
  width:320%;
  height:100%;
  animation:concept-slide 10s linear infinite;
  will-change:transform;
}

.concept-track img {
  display:block;
  width:25%;
  height:100%;
  flex:0 0 25%;
  min-width:0;
  object-fit:cover;
  object-position:38% center;
}

.concept-track img:nth-child(even) {
  object-position:43% center;
}

@keyframes concept-slide {
  from {
    transform:translateX(0);
  }
  to {
    transform:translateX(-50%);
  }
}

@media(prefers-reduced-motion:reduce) {
  .concept-track {
    animation:none;
    will-change:auto;
  }
}

/* ==================================================
24｜0セクション：検証用動画
対象：#test-video、.test-video-section video
編集箇所：動画の切り抜き → object-fit/object-position。動画パスはHTMLの source。
================================================== */
.screen.test-video-section {
  padding:0;
  gap:0;
  height:calc(100dvh - var(--header-height));
  max-height:calc(100dvh - var(--header-height));
  justify-content:center;
}

.test-video-section video {
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  object-fit:cover;
  object-position:center;
}

/* ==================================================
25｜お金を稼ぎたい！：数字の基本
対象：#income、.income-facts、.income-number
編集箇所：数字 → strong、単位 → span。括弧装飾と最終寸法は「数字の枠」「数字の画面高調整」。
================================================== */
.income-facts {
  display:grid;
  gap:14px;
}

.income-fact {
  border-top:2px solid var(--ink);
  padding-top:10px;
  text-align:center;
}

.income-number {
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  line-height:1;
  margin:5px 0;
}

.income-number strong {
  font-family:Anton,sans-serif;
  font-weight:400;
  font-size:clamp(72px,21cqi,100px);
  letter-spacing:-.025em;
  color:var(--paper);
}

.income-number span {
  font-size:18px;
  font-weight:900;
}

.screen .income-fact p {
  font-size:13px;
  line-height:1.65;
}

@media(max-height:740px) {
  .screen.income-screen {
    gap:8px;
  }
  .income-facts {
    gap:8px;
  }
  .income-fact {
    padding-top:6px;
  }
  .income-number {
    margin:2px 0;
  }
  .income-number strong {
    font-size:72px;
  }
}

/* ==================================================
26｜エントリー：見出しの改行
対象：#entry-title
編集箇所：行の保持 → white-space、文字サイズ → font-size。
================================================== */
#entry-title>span,#entry-title>em {
  display:block;
  white-space:nowrap;
}

#entry-title {
  font-size:clamp(22px,6.5cqi,28px);
  line-height:1.35;
}

/* ==================================================
27｜募集要項：スナップの個別指定
対象：#requirements
編集箇所：scroll-snap-stop。表の見た目は「募集要項・会社概要：情報表」。
================================================== */
#requirements {
  scroll-snap-stop:normal;
}

/* ==================================================
28｜お金を稼ぎたい！：数字の枠
対象：#income、.income-label、.income-number:before
編集箇所：開いた括弧 → .income-label の疑似要素、縦の接続線 → .income-number:before。
================================================== */
.income-screen>h1 {
  text-align:center;
}

.income-screen .income-facts {
  gap:22px;
}

.income-screen .income-fact {
  border:0;
  padding:0;
}

.income-screen .income-label {
  position:relative;
  border-block:3px solid transparent;
  padding:7px 8px;
  font-size:14px;
  font-weight:900;
  line-height:1.45;
}

.income-label:before,.income-label:after {
  content:"";
  position:absolute;
  top:-3px;
  bottom:-3px;
  width:12px;
  border-block:3px solid var(--ink);
  pointer-events:none;
}

.income-label:before {
  left:0;
  border-left:3px solid var(--ink);
}

.income-label:after {
  right:0;
  border-right:3px solid var(--ink);
}

.income-screen .income-number {
  position:relative;
  margin:19px 0 4px;
}

.income-number:before {
  content:"";
  position:absolute;
  top:-19px;
  left:calc(50% - 2px);
  width:4px;
  height:16px;
  background:var(--ink);
}

.income-screen .income-number strong {
  font-size:clamp(80px,23cqi,110px);
}

/* ==================================================
29｜収入UPの3つの柱：初任給の数字
対象：#rewards、.reward-salaries
編集箇所：職種名 → .reward-job、金額 → .reward-amount strong、単位 → span。
================================================== */
.reward-salaries {
  display:grid;
  gap:14px;
}

.reward-salaries>p {
  margin:0;
  text-align:center;
}

.reward-job {
  display:block;
  font-weight:900;
  font-size:14px;
  line-height:1.5;
}

.reward-amount {
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
  line-height:1.1;
}

.reward-amount strong {
  font-family:Anton,sans-serif;
  font-size:clamp(42px,12cqi,58px);
  font-weight:400;
  letter-spacing:-.025em;
  color:var(--paper);
}

.reward-amount>span {
  font-size:13px;
  font-weight:900;
}

/* ==================================================
30｜仕事内容：重量鳶・電気工事士
対象：#heavy-work、#electric-work、.work-screen
編集箇所：帯見出し → h1、説明枠 → .work-detail、枠の切れ目 → .work-detail h2。
注意：両職種の共通構成。最終寸法は「仕事内容：画面高調整」。
================================================== */
.screen.work-screen>h1 {
  background:var(--ink);
  color:var(--paper);
  font-size:26px;
  line-height:1.4;
  letter-spacing:0;
  text-align:center;
  padding:8px;
}

.screen .work-intro {
  text-align:center;
  font-weight:900;
}

.work-details {
  list-style:none;
  padding:20px 0 0;
  margin:0;
  display:grid;
  gap:46px;
}

.work-detail {
  position:relative;
  border:3px solid var(--ink);
  padding:0 14px 16px;
}

.work-detail h2 {
  position:relative;
  width:fit-content;
  max-width:100%;
  background:var(--base);
  margin:-15px auto 12px;
  padding:0 10px;
  font-size:21px;
  font-weight:900;
  line-height:1.35;
  text-align:center;
  letter-spacing:-.04em;
}

.work-detail-number {
  position:absolute;
  top:-37px;
  left:0;
  right:0;
  text-align:center;
  font-family:Anton,sans-serif;
  font-size:20px;
  line-height:1;
  color:var(--ink);
}

.screen .work-detail p {
  font-size:14px;
  line-height:1.75;
}

.work-detail p+p {
  margin-top:12px;
}

/* ==================================================
31｜インセンティブの仕組み：図解の基本
対象：#incentive、.incentive-node、.incentive-connection
編集箇所：ボックス → .incentive-node、矢印 → .incentive-connection i と :after。
注意：この基本指定の後にコンパクト表示・高さ別調整が続きます。
================================================== */
#incentive-title {
  font-size:clamp(26px,7.5cqi,36px);
  line-height:1.3;
}

.incentive-intro {
  display:grid;
  gap:6px;
}

.incentive-diagram {
  width:100%;
}

.incentive-node {
  border:3px solid var(--ink);
  padding:16px 14px;
  text-align:center;
}

.incentive-node h2 {
  margin:0 0 10px;
  font-size:25px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.04em;
}

.screen .incentive-node p {
  font-size:13px;
  line-height:1.7;
  text-align:left;
}

.incentive-person {
  background:var(--ink);
  color:var(--paper);
}

.incentive-connection {
  position:relative;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.incentive-connection span {
  font-size:12px;
  font-weight:900;
  line-height:1.5;
}

.incentive-connection i {
  position:relative;
  display:block;
  width:7px;
  height:32px;
  background:var(--ink);
  margin-bottom:10px;
}

.incentive-connection i:after {
  content:"";
  position:absolute;
  top:100%;
  left:-7px;
  border-left:10.5px solid transparent;
  border-right:10.5px solid transparent;
  border-top:12px solid var(--ink);
}

/* ==================================================
32｜インセンティブ：コンパクト表示と高さ620px以下
対象：#incentive
編集箇所：本文 → .incentive-screen p、帯 → .band、図解の高さ → padding/min-height。
注意：上の基本指定を上書きする既存順を保持。さらに後段に高さ・幅の個別補正あり。
================================================== */
.screen.incentive-screen {
  gap:8px;
  padding-top:12px;
  padding-bottom:28px;
}

#incentive-title {
  font-size:clamp(22px,6.6cqi,30px);
  line-height:1.2;
  white-space:nowrap;
}

.incentive-screen .band {
  padding:6px;
  font-size:18px;
}

.incentive-screen .incentive-intro {
  gap:2px;
}

.incentive-screen p,.incentive-screen .incentive-node p {
  font-size:13px;
  line-height:1.6;
}

.incentive-screen .incentive-node {
  padding:8px 12px;
  border-width:2px;
}

.incentive-screen .incentive-node h2 {
  font-size:20px;
  margin-bottom:6px;
}

.incentive-screen .incentive-connection {
  min-height:28px;
  gap:10px;
}

.incentive-screen .incentive-connection span {
  font-size:11px;
}

.incentive-screen .incentive-connection i {
  height:12px;
  width:4px;
  margin-bottom:6px;
}

.incentive-screen .incentive-connection i:after {
  left:-4px;
  border-left-width:6px;
  border-right-width:6px;
  border-top-width:7px;
}

.incentive-screen .incentive-return {
  background:var(--ink);
  color:var(--paper);
}

.incentive-screen .incentive-return p {
  text-align:center;
  font-weight:900;
}

@media(max-height:620px) {
  .screen.incentive-screen {
    gap:4px;
    padding-top:8px;
    padding-bottom:24px;
  }
  .incentive-screen .incentive-node {
    padding:6px 10px;
  }
  .incentive-screen .incentive-connection {
    min-height:20px;
  }
}

/* ==================================================
33｜登場アニメーション：JS連動状態
対象：.reveal-pending
編集箇所：開始位置 → transform、待機時の透明度 → opacity。
注意：JSがクラスを追加・削除しWeb Animations APIでopacity/transformを操作。時間・遅延はdaito.js。
================================================== */
.reveal-pending {
  opacity:0;
  transform:translateY(28px);
}

@media(prefers-reduced-motion:reduce) {
  .reveal-pending {
    opacity:1;
    transform:none;
  }
}

/* ==================================================
34｜立場を築いて：個別調整と自然な改行
対象：#leader
編集箇所：見出し → #leader-title、原稿の「人」→ .leader-person、「1」→ .leader-start。
================================================== */
#leader-title {
  font-size:clamp(24px,7cqi,32px);
  line-height:1.3;
}

#leader-title>span,#leader .band>span {
  display:block;
  white-space:nowrap;
}

#leader .band {
  font-size:clamp(15px,4.2cqi,18px);
  line-height:1.5;
}

/* 既存の太字と濃紺帯を維持し、「人」「1」にさらに強弱をつける。 */
#leader .statement {
  font-size:clamp(20px,5.7cqi,27px);
  line-height:1.3;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}

#leader .leader-person {
  font-size:clamp(32px,5.5dvh,48px);
  line-height:1;
  font-weight:900;
  margin-left:.12em;
}

#leader .leader-start {
  font-family:Anton,sans-serif;
  font-size:clamp(26px,4.5dvh,38px);
  line-height:1;
  font-weight:400;
  margin-inline:.08em;
}

#leader .closing {
  text-align:center;
  font-weight:900;
}

#leader p {
  text-wrap:pretty;
}

/* ==================================================
35｜インセンティブ：低い画面の文字調整
対象：#incentive
編集箇所：本文・帯・図解見出しの文字サイズ。
注意：共通の低い画面指定より後で優先されるため位置を維持。
================================================== */
@media(max-height:620px) {
  .incentive-screen p,.incentive-screen .incentive-node p {
    font-size:12px;
    line-height:1.55;
  }
  .incentive-screen .band {
    font-size:17px;
  }
  .incentive-screen .incentive-node h2 {
    font-size:18px;
    margin-bottom:4px;
  }
}

/* ==================================================
36｜インセンティブ：縦に余裕のある画面
対象：#incentive
編集箇所：dvhを使った本文・見出し・図解の拡大。
注意：高さ668〜800pxの最終補正は「中間高さ調整」を参照。
================================================== */
@media(min-height:668px) {
  .screen.incentive-screen {
    gap:clamp(8px,calc(.8dvh + 2.65px),10px);
  }
  .incentive-screen p,.incentive-screen .incentive-node p {
    font-size:clamp(13px,calc(1.3dvh + 4.3px),16px);
    line-height:1.6;
  }
  .incentive-screen .band {
    font-size:clamp(18px,2.7dvh,23px);
    padding-block:clamp(6px,calc(.8dvh + .65px),8px);
  }
  .incentive-screen .incentive-node {
    padding-block:clamp(8px,calc(.8dvh + 2.65px),10px);
  }
  .incentive-screen .incentive-node h2 {
    font-size:clamp(20px,3dvh,26px);
  }
  .incentive-screen .incentive-connection {
    min-height:clamp(28px,calc(1.7dvh + 16.65px),32px);
  }
  .incentive-screen .incentive-connection span {
    font-size:clamp(11px,1.65dvh,14px);
  }
  .incentive-screen .incentive-connection i {
    height:clamp(12px,calc(3dvh - 8px),20px);
  }
}

/* ==================================================
37｜お金を稼ぎたい！：数字の画面高調整
対象：#income
編集箇所：数字 → strong の clamp、項目間 → gap、ラベル → padding。
注意：1画面の収まりを決める最終指定。上の基本値だけの変更では反映されない場合があります。
================================================== */
.income-screen .income-facts {
  gap:clamp(6px,calc(3dvh - 14px),18px);
}

.income-screen .income-number strong {
  font-size:clamp(42px,calc(13dvh - 34px),100px);
}

.income-screen .income-number {
  margin:10px 0 2px;
}

.income-screen .income-number:before {
  top:-10px;
  height:8px;
}

.income-screen .income-label {
  padding:3px 6px;
  line-height:1.4;
}

.screen .income-fact p {
  font-size:clamp(11px,1.8dvh,14px);
  line-height:1.45;
}

/* ==================================================
38｜収入UP：画面高調整
対象：#rewards
編集箇所：三つの柱・給与数字・本文を画面高に連動。
================================================== */
#rewards {
  gap:clamp(6px,calc(2dvh - 7px),18px);
}

#rewards .pillars>div {
  padding:4px 8px;
  font-size:clamp(17px,2.8dvh,22px);
}

#rewards .pillars span {
  font-size:clamp(24px,4dvh,36px);
}

#rewards .pillars i {
  font-size:18px;
  line-height:1.1;
}

#rewards .reward-salaries {
  gap:6px;
}

#rewards .reward-amount strong {
  font-size:clamp(34px,6dvh,58px);
}

#rewards p {
  font-size:clamp(12px,1.9dvh,15px);
  line-height:1.55;
}

/* ==================================================
39｜仕事内容：画面高調整
対象：#heavy-work、#electric-work
編集箇所：カード間隔 → .work-details gap、本文 → .screen.work-screen p。
================================================== */
.work-screen {
  gap:clamp(8px,1.5dvh,18px);
}

.work-screen .work-details {
  gap:clamp(26px,4.5dvh,42px);
  padding-top:18px;
}

.work-screen .work-detail {
  padding:0 10px 8px;
}

.work-screen .work-detail h2 {
  font-size:clamp(17px,2.8dvh,21px);
  margin-bottom:6px;
}

.work-screen .work-detail-number {
  font-size:16px;
  top:-30px;
}

.screen.work-screen p {
  font-size:clamp(11px,1.8dvh,14px);
  line-height:1.55;
}

.work-screen .work-detail p+p {
  margin-top:6px;
}

/* ==================================================
40｜共通：1画面表示の最終補正（高さ620px以下）
対象：#future、#leader、#people、#rewards、.work-screen
編集箇所：各セクションの見出し・本文・余白。
注意：複数セクションにまたがる高詳細度指定のため、分割移動せず保持。
================================================== */
@media(max-height:620px) {
  .screen:not(#requirements):not(#company):not(#entry) h1 {
    font-size:25px;
  }
  #leader-title {
    font-size:24px;
  }
  #future .desires>div {
    font-size:16px;
    padding:6px;
  }
  #future .plus {
    font-size:20px;
  }
  #people .steps h3 {
    font-size:14px;
  }
  #people .steps p {
    font-size:11px;
    line-height:1.5;
  }
  #people .job-tabs button {
    padding:6px 4px;
  }
  #people .steps li {
    gap:8px;
  }
  #rewards .reward-job {
    font-size:12px;
  }
  #rewards .reward-amount strong {
    font-size:32px;
  }
  #rewards .reward-amount>span {
    font-size:11px;
  }
  .screen.work-screen>h1 {
    font-size:22px;
    padding:5px;
  }
}

/* ==================================================
41｜インセンティブ：幅350px以下かつ高さ620px以下
対象：#incentive
編集箇所：小型画面の文字と余白。
================================================== */
@media(max-width:350px) and (max-height:620px) {
  .screen.incentive-screen {
    gap:3px;
  }
  .incentive-screen p,.incentive-screen .incentive-node p {
    font-size:11px;
    line-height:1.45;
  }
  .incentive-screen .incentive-node {
    padding:5px 8px;
  }
  .incentive-screen .band {
    font-size:16px;
    padding:5px;
  }
  .screen.incentive-screen h1 {
    font-size:23px;
  }
}

/* ==================================================
42｜インセンティブ：中間高さ調整
対象：#incentive
編集箇所：高さ668〜800pxでの帯・図解余白。
注意：「縦に余裕のある画面」の後から上書きする順序を保持。
================================================== */
@media(min-height:668px) and (max-height:800px) {
  .screen.incentive-screen {
    gap:6px;
  }
  .incentive-screen .band {
    font-size:18px;
    padding-block:6px;
  }
  .incentive-screen .incentive-node {
    padding-block:6px;
  }
  .incentive-screen .incentive-node h2 {
    font-size:20px;
    margin-bottom:4px;
  }
  .incentive-screen .incentive-connection {
    min-height:24px;
  }
}

/* ==================================================
43｜インセンティブ：現場での会話の開いた枠
対象：.incentive-diagram>.incentive-node:first-child
編集箇所：上辺の開口 → :before のグラデーション比率。
注意：濃紺の結果ボックスには適用しません。枠幅を含む既存寸法は保持。
================================================== */
.incentive-diagram>.incentive-node:first-child {
  position:relative;
  border-top-color:transparent;
}

.incentive-diagram>.incentive-node:first-child:before {
  content:"";
  position:absolute;
  top:-2px;
  left:-2px;
  right:-2px;
  height:2px;
  background:linear-gradient(to right,var(--ink) 0 28%,transparent 28% 72%,var(--ink) 72% 100%);
  pointer-events:none;
}


/* ==================================================
44｜募集要項・エントリー：スクロール状態制御
対象：.swipe-container.bounded-scroll
編集箇所：スクロール操作自体は assets/js/daito.js。
注意：JSが対象セクションでこのクラスを付与。境界内の位置制御と
CSSスナップが競合しないよう無効化する指定。削除・常時適用しないこと。
================================================== */
.swipe-container.bounded-scroll {
  scroll-snap-type:none;
}