/* Hallmark · macrostructure: Marquee Hero + Long Document hybrid (recruit site) · tone: cinematic-austere · anchor hue: deep-navy 262 / logo-blue 232
 * theme: custom (vibe: "夜の鉄鋼倉庫と青×白の誠実" · dark hero oklch(16% 0.03 262) · light content oklch(98% 0.003 240) · accent = logo blue #0080C0 → oklch(57% 0.13 232))
 * display: Shippori Mincho B1 · body: Noto Serif JP · ui/num: Noto Sans JP · mono: IBM Plex Mono
 * axes: dark-hero/light-content / high-contrast-serif-jp / cool · studied: no · jp-typography sheet applied
 * base: FV A-1（夜の鉄鋼倉庫）— FV案決定時は :root トークン差し替えで全ページ追従
 * Hallmark · pre-emit critique: P5 H5 E4 S4 R4 V4 */

:root{
  /* 色：設計書5章の3系統統合ルール */
  --color-dark: oklch(16% 0.03 262);          /* ダーク背景（#0B1120系・ヒーロー/オープニング） */
  --color-dark-2: oklch(20% 0.035 262);
  --color-navy: oklch(30% 0.07 262);          /* 基調紺（#1F3864系） */
  --color-navy-deep: oklch(23% 0.05 262);
  /* 面（ヘッダー・紺セクション）の地色。2026-08-03に navy-deep(23%) から引き上げた。
     設計書のトンマナ指定は #1F3864＝oklch約30%だが、実際に広い面で使っていたのは
     navy-deep(23%)で、指定より1段暗く「重い・沈む」印象になっていた。
     ・16%（--color-dark）＝夜。ヒーローのスクリム／オープニング／フッターの締め＝据え置き
     ・34.5%（ここ）＝昼のUI面。ヘッダー・紺セクション
     ・30%（--color-navy）＝罫線・数字など、面ではなく線と文字
     2026-08-03（2回目）に 27.5% → 34.5% へ。27.5%＝#162746 は設計書のトンマナ指定
     #1F3864 よりまだ1段暗く、紺の面が広いページ（business/company/CTA帯）で
     全体が沈んで見えていた。34.5%/0.084 は #203864 ＝ 指定色 #1F3864 と実質同色。
     白文字 10.67:1／white-soft 6.23:1／明ブルー 5.54:1 でいずれもAA（4.5:1）を満たす */
  --color-navy-solid: oklch(34.5% 0.084 262);
  /* 紺の面が広いと単調に見えるので、明度だけを動かしたグラデを当てる。
     色相・彩度は動かさない（動かすと安っぽくなり、装飾が実写より前に出る）。
     使うのは紺の「カード・ブロック」だけ。セクション全体の地には使わない。

     ここまでに2回外している：
     ・明度差5%＝弱すぎて見えない
     ・斜め150度＝明るい側が声セクの写真の裏に隠れ、紺の帯には暗い側しか出ない
     紺の面は「幅広・高さの浅い帯」なので、階調は横方向に流す必要がある。

     方向つき（左が明るく右へ落ちる）。単独ブロック用＝数字セクの主役 */
  /* 2026-08-03（2回目）：明端は据え置き、暗端だけ 15%→24% に上げる。
     明端を上げると white-soft が 4.18:1（AA未満）に落ちるため、上げてよいのは暗端だけ */
  --grad-navy: linear-gradient(105deg,
    oklch(39% 0.065 262) 0%,
    oklch(32% 0.06 262) 45%,
    oklch(24% 0.05 262) 100%);
  /* 左右対称（中央が明るい）。複数人を等価に並べる面用＝声セクの帯。
     方向つきを当てると右端の1人だけパネルが沈み、3人のあいだに明暗の序列ができる */
  --grad-navy-even: linear-gradient(100deg,
    oklch(26% 0.055 262) 0%,
    oklch(36% 0.065 262) 50%,
    oklch(26% 0.055 262) 100%);
  --color-paper: oklch(98% 0.003 240);        /* 明コンテンツ地 */
  --color-paper-2: oklch(95.5% 0.008 245);
  --color-ink: oklch(25% 0.04 260);
  --color-ink-soft: oklch(46% 0.03 258);
  --color-white: oklch(97% 0.005 250);
  --color-white-soft: oklch(80% 0.02 255);
  --color-accent: oklch(57% 0.13 232);        /* ロゴブルー #0080C0 実測 */
  --color-accent-deep: oklch(46% 0.12 240);
  --color-accent-bright: oklch(76% 0.10 230); /* 暗背景用の明ブルー（ロゴブルーは紺上でコントラスト不足） */
  /* 塗りボタン専用。ロゴブルーをそのまま背景に使うと白文字とのコントラストが3.92:1で、
     AA（通常文字4.5:1）に届かない。明度を57%→52%に落として4.79:1にした（実測）。
     #0072AE ＝ 現行コーポレートサイトで実際に使われている青（#0075C1）ともほぼ同じ色域 */
  --color-accent-btn: oklch(52% 0.14 236);
  --color-line: oklch(88% 0.01 250);
  --color-line-dark: oklch(36% 0.03 260);
  --color-focus: oklch(50% 0.16 240);
  /* ヒーローのスクリム専用。彩度0.03＝ほぼ黒だったが、写真側が暖色に寄っている
     （平均RGBで測ると青が赤より8〜22%少ない）ため、覆いのほうを紺に寄せた。
     写真自体を青くすると人物の肌が冷たくなるので、触るのは覆いだけにしている。
     2026-08-03（2回目）：不透明度 .62→.44、地の明度 14%→17%。
     下段は2層の合成で 82%（中央）〜99%（下端）の覆いになっていて、
     写真が「もや」で見えなくなっていた＝全体が暗い主因 */
  --color-scrim: oklch(17% 0.06 252 / .44);

  /* 書体：和文タイポ規定 */
  --font-display: 'Shippori Mincho B1', 'Noto Serif JP', serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-display: clamp(2rem, 4.6vw, 3.8rem);
  --text-xxl: clamp(1.55rem, 3vw, 2.4rem);
  --text-xl: clamp(1.3rem, 2.2vw, 1.8rem);
  /* 2026-08-03 全体を1〜2px引き上げ（PC時）。SPは従来値のままにするため可変clamp。
     値は PC(1280以上) ← SP(375) の順。ヘッドコピー系（display/xxl/xl）は据え置き。 */
  --text-lg: clamp(1.15rem, .18vw + 1.11rem, 1.25rem);   /* 20px ← 18.4px（mdが18になるので階層を1段上げた） */
  --text-md: clamp(1rem, .22vw + .948rem, 1.125rem);     /* 18px ← 16px（本文base） */
  --text-sm: 1rem;                                       /* 16px ← 15px（UIラベル・カード説明・ナビ・ボタン） */
  --text-xs: clamp(.875rem, .22vw + .823rem, 1rem);      /* 16px ← 14px（キッカー・タグ・注記・フッター） */

  --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem;
  --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms; --dur-mid: 420ms;
  --rule-hair: 1px solid var(--color-line);
  --measure: 38em;
  /* 以下3つは各所で var() 参照されていたのに :root に定義がなかった（2026-08-03に追加）
     ・--band … フォールバック無しで使われていたため、インタビュー記事の区切り余白
       （.iv + .iv の margin-top / padding-top）が丸ごと無効になり、記事が詰まって並んでいた
     ・--text-cap … 注記・キャプションの級数。フォールバック .875rem で表示はされていたが、
       PCで他の注記（--text-xs＝16px）より小さく、規約の階層から外れていた
     ・--text-prose … 記事本文。フォールバック 1rem＝16px で、本文規約のPC18pxを下回っていた */
  --band: clamp(3rem, 6vw, 5rem);
  --text-cap: var(--text-xs);
  --text-prose: var(--text-md);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
/* TOPのヘッダーは position:fixed（透明→実体化）なので、
   アンカー遷移（#vision・recruit.html#driver 等）の着地点が帯の下に潜る。
   ヘッダー高さぶんの余白を確保して見出しが隠れないようにする */
html{scroll-padding-top:5rem}
body{
  font-family:var(--font-serif);
  background:var(--color-paper);
  color:var(--color-ink);
  line-height:2.0;         /* 共通スタイル規約：行間150〜200% */
  letter-spacing:.02em;    /* 共通スタイル規約：字間0.02em前後 */
  font-size:var(--text-md);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}

/* ══ ヘッダー（全ページ共通・紺ソリッド） ══ */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:52;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem clamp(1.25rem,4vw,3rem);
  background:var(--color-navy-solid);
  color:var(--color-white);
}
/* TOPのみ：初期は背景透明でヒーロー写真を帯で切らず、スクロールで紺に実体化する。
   下層ページはこの修飾を付けないので従来どおり紺ベタのまま＝影響しない */
.site-header--overlay{
  position:fixed;background:transparent;
  transition:background var(--dur-mid) var(--ease-out),
             padding var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
/* 透明時でも白文字が写真に負けないよう、上端に薄い暗がりを敷く */
.site-header--overlay::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, oklch(14% 0.03 262 / .55) 0%, oklch(14% 0.03 262 / 0) 100%);
  transition:opacity var(--dur-mid) var(--ease-out);
}
.site-header--overlay.is-stuck{
  background:var(--color-navy-solid);
  padding-block:.75rem;
  box-shadow:0 1px 0 oklch(36% 0.03 260 / .5);
}
.site-header--overlay.is-stuck::before{opacity:0}
.brand{display:flex;align-items:center;gap:.7rem}
/* 支給ロゴ（素材/ロゴ.png・透過PNG）。原寸260×44しかないため、
   高解像度画面で滲まないよう表示幅は130px前後に抑える（＝実質2倍相当）。
   ※CLからベクター（AI/EPS/SVG）を入手できれば差し替えたい。CL確認リストへ追加済み */
/* 2026-08-03に一段大きくした（1.55rem→2rem／SP 1.35→1.7rem）。
   原寸は260×44px。2rem＝32pxなので原寸より縮めて表示している状態は変わらず、
   高解像度画面でも滲まない（等倍を超えない範囲での拡大） */
.brand-logo{
  display:block;width:auto;height:2rem;
  max-width:min(58vw,15rem);object-fit:contain;
}
@media (max-width:768px){
  .brand-logo{height:1.7rem}
}
.brand-mark{
  width:1.7rem;height:1.7rem;flex:none;
  background:var(--color-accent);
  transform:rotate(45deg) scale(.78);
  display:grid;place-items:center;
}
.brand-mark span{
  transform:rotate(-45deg);
  font-family:var(--font-mono);font-weight:500;font-size:.6rem;color:var(--color-navy-deep);
}
.brand-name{font-family:var(--font-mono);font-weight:500;letter-spacing:.16em;font-size:.95rem}
/* 項目が6つ＋CTAボタンになったので、間隔の最小値を1remから0.9remへ詰める。
   文字サイズ（16px）は下げない＝40〜50代が主ターゲットで、ナビの可読性を優先する */
.gnav{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,1.9rem)}
.gnav a{
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--color-white-soft);
  transition:color var(--dur-fast) var(--ease-out);
  position:relative;padding:.2em 0;
}
.gnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--color-accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.gnav a:hover{color:var(--color-white)}
.gnav a:hover::after{transform:scaleX(1)}
.gnav a[aria-current="page"]{color:var(--color-white)}
.gnav a[aria-current="page"]::after{transform:scaleX(1)}
.gnav a.nav-cta{
  background:var(--color-accent-btn);color:var(--color-white);
  padding:.55em 1.4em;font-weight:700;
  transition:background var(--dur-fast) var(--ease-out);
}
.gnav a.nav-cta::after{content:none}
.gnav a.nav-cta:hover{background:var(--color-accent-deep);color:var(--color-white)}
.menu-btn{
  display:none;background:none;border:1px solid var(--color-line-dark);
  width:2.75rem;height:2.75rem;cursor:pointer;position:relative;z-index:55;
}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:50%;translate:-50% 0;
  width:1.15rem;height:1.5px;background:var(--color-white);
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.menu-btn span{top:calc(50% - 1px)}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
/* 閉じているあいだは visibility:hidden まで落とす。
   opacity:0 と pointer-events:none だけだと、中のリンクがキーボードのTabで拾われ、
   読み上げにも残る（画面には何も無いのにフォーカスだけが動く状態になる） */
.sp-menu{
  position:fixed;inset:0;z-index:50;background:oklch(14% 0.03 262 / .97);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-mid) var(--ease-in-out), visibility 0s linear var(--dur-mid);
}
.sp-menu.is-open{
  opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity var(--dur-mid) var(--ease-in-out), visibility 0s;
}
.sp-menu ul{display:grid;gap:1.5rem;text-align:center}
.sp-menu a{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:.08em;color:var(--color-white)}
/* SPではヘッダーのCTAボタンが畳まれて消えるので、メニュー内に主導線を置く。
   他の項目と同じ見た目にすると埋もれるため、唯一の塗りボタンにしている */
.sp-menu-cta{margin-top:var(--space-sm)}
.sp-menu-cta a{
  display:inline-block;background:var(--color-accent-btn);color:var(--color-white);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:700;letter-spacing:.04em;
  padding:.9em 2.2em;
}

/* ══ ページ共通レイアウト ══ */
.section{padding:var(--space-2xl) clamp(1.25rem,5vw,4rem)}
.section-inner{max-width:1200px;margin:0 auto}
.section--tint{background:var(--color-paper-2)}
.section--navy{background:var(--color-navy-solid);color:var(--color-white)}
.section--navy .sec-title{color:var(--color-white)}
.section--navy p{color:var(--color-white-soft)}

.sec-head{margin-bottom:var(--space-lg)}
.sec-kicker{
  display:inline-flex;align-items:center;gap:.9em;
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-xs);letter-spacing:.18em;
  color:var(--color-accent-deep);margin-bottom:var(--space-xs);
}
/* 罫線だけはブランド色（ロゴブルー #0083B6）に固定する。
   文字は可読性のため accent-deep に落としたが、線は装飾でコントラスト制約がかからない。
   キッカーは全ページ・全セクションの頭に出るので、ここを押さえておけば
   ロゴの青がサイト全体に一定量で行き渡る */
.sec-kicker::before{content:"";width:2.4rem;height:2px;background:var(--color-accent);flex:none}
.section--navy .sec-kicker{color:var(--color-accent-bright)}
/* 暗い面の上では罫線も明るい側へ。ロゴブルーそのままだと紺に沈む */
.section--navy .sec-kicker::before,
.split--dark .sec-kicker::before{background:var(--color-accent-bright)}
.sec-title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xxl);line-height:1.5;letter-spacing:.05em;
}
/* タイトル下線バーは廃止（キッカーの罫線と二重になるため。アクセント線はキッカー側に一本化） */
.sec-lead{margin-top:var(--space-md);max-width:var(--measure);color:var(--color-ink-soft);font-size:var(--text-md)}
.section--navy .sec-lead{color:var(--color-white-soft)}

/* サブページヒーロー */
.page-hero{
  background:linear-gradient(160deg, oklch(22% 0.05 262) 0%, var(--color-navy-solid) 100%);
  color:var(--color-white);
  padding:calc(var(--space-2xl) * .9) clamp(1.25rem,5vw,4rem);
}
.page-hero-inner{max-width:1200px;margin:0 auto}
.page-hero .en{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.2em;
  /* 紺／写真の暗いスクリムの上に乗るラベル。ロゴブルー（明度57%）だと約2.5:1で沈むため、
     ヒーローのキッカーと同じ明ブルーにそろえる */
  color:var(--color-accent-bright);margin-bottom:var(--space-xs);
}
.page-hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--text-display);line-height:1.4;letter-spacing:.05em;
  overflow-wrap:anywhere;min-width:0;
  /* SPで「もういら／ない。」のように語の途中で割れていたため文節で折り返す。
     未対応ブラウザは無視するだけで従来どおり（安全に無効化される） */
  word-break:auto-phrase;
}
.page-hero .lead{margin-top:var(--space-md);max-width:var(--measure);color:var(--color-white-soft);font-size:var(--text-md)}

/* サブページヒーロー：写真版（コンテンツ系ページのみ）
   紺ベタは素材があるのに現場を見せていない状態だったので写真に差し替える。
   contact・privacy は実務ページなので無地のまま＝上に大画像を置くと本題が押し出される。
   写真の上に左から暗く落とすグラデを重ね、白文字のコントラストを確保する */
.page-hero--photo{
  position:relative;overflow:clip;
  background-color:var(--color-navy-deep);
  /* 画像はページごとの修飾クラス（下）で --hero-img（PC用1920）／--hero-img-sp（SP用800）に入れる。
     HTMLのインラインstyleに url() を書くと、Chromeはこのcssファイル基準で解決して404になる。
     パスは必ずこのファイル側（../img/…）に書くこと */
  background-image:var(--hero-img);
  background-size:cover;background-position:var(--hero-pos,center);background-repeat:no-repeat;
  min-height:clamp(15rem,32vw,24rem);
  display:flex;align-items:flex-end;
}
.page-hero--photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  /* 2層。斜め＝写真を見せるための全体の覆い（薄め）／下からの縦＝文字の足元だけを固める。
     1層だけで文字を守ろうとすると、写真を見せるために薄くした瞬間に h1 が負ける */
  background:
    linear-gradient(180deg, oklch(16% 0.04 262 / 0) 30%, oklch(16% 0.04 262 / .46) 65%, oklch(15% 0.04 262 / .74) 100%),
    linear-gradient(105deg, oklch(19% 0.04 262 / .62) 0%, oklch(21% 0.05 262 / .44) 42%, oklch(25% 0.055 262 / .20) 100%);
}
.page-hero--photo > .page-hero-inner{position:relative;z-index:1;width:100%}
@media (max-width:768px){
  /* SPは文字が写真の上に広く乗るので暗さを一段強める（可読性優先） */
  .page-hero--photo{min-height:13rem;background-image:var(--hero-img-sp,var(--hero-img))}
  .page-hero--photo::before{
    background:linear-gradient(160deg, oklch(19% 0.04 262 / .78) 0%, oklch(21% 0.05 262 / .68) 60%, oklch(25% 0.055 262 / .50) 100%);
  }
}
/* ページ別のFV写真。--hero-pos は被写体が切れる場合の寄せ指定 */
.page-hero--company{      /* 自社倉庫の外観＝どこにある何の会社かが一目で入る */
  --hero-img:url(../img/photo/DSC02101-1920.webp);
  --hero-img-sp:url(../img/photo/DSC02101-800.webp);
}
.page-hero--business{     /* 倉庫にトラックが入っている絵＝運送と鉄鋼倉庫の両事業が1枚に入る */
  --hero-img:url(../img/photo/DSC01655-1920.webp);
  --hero-img-sp:url(../img/photo/DSC01655-800.webp);
}
.page-hero--recruit{      /* 鋼材倉庫で談笑する3人＝「根性論は、もういらない」の裏づけ */
  --hero-img:url(../img/photo/DSC01494-1920.webp);
  --hero-img-sp:url(../img/photo/DSC01494-800.webp);
}
.page-hero--interview{    /* 3人が笑顔で会話している絵＝「話を聞いた」ページの主題そのもの。
                             当初はDSC01511（男女の会話）だったが、帯にクロップすると
                             相手役が枠外に切れて単独ポートレートに見えたため差し替えた */
  --hero-img:url(../img/photo/DSC01507-1920.webp);
  --hero-img-sp:url(../img/photo/DSC01507-800.webp);
}

/* ══ ボタン・CTA ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-sans);font-weight:700;font-size:var(--text-sm);letter-spacing:.04em;
  padding:1em 2.1em;cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn .arrow{transition:translate var(--dur-fast) var(--ease-out)}
.btn:hover .arrow{translate:4px 0}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-accent-btn);color:var(--color-white)}
.btn-primary:hover{background:var(--color-accent-deep)}
.btn-navy{background:var(--color-navy);color:var(--color-white)}
.btn-navy:hover{background:var(--color-navy-deep)}
.btn-ghost{border-color:var(--color-ink-soft);color:var(--color-ink)}
.btn-ghost:hover{border-color:var(--color-ink);background:oklch(25% 0.04 260 / .05)}
.btn-ghost-light{border-color:var(--color-white-soft);color:var(--color-white)}
.btn-ghost-light:hover{border-color:var(--color-white);background:oklch(97% 0.005 250 / .08)}

.float-cta{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:30;
  width:6.25rem;height:6.25rem;border-radius:50%;
  background:var(--color-accent-btn);color:var(--color-white);
  display:grid;place-items:center;text-align:center;
  /* 0.72rem＝11.5pxで、共通規約の下限14pxを割っていた。
     14pxに上げたぶん、文字が収まるよう直径も5.4rem→6.25rem（100px）に広げている */
  font-family:var(--font-sans);font-size:.875rem;font-weight:700;line-height:1.5;
  /* SPでは本文の上に必ず重なる（追従CTAの宿命）。影を敷いて「本文の上に浮いている」ことを
     はっきりさせる。影がないと、隠れた文字が欠落したように見える */
  box-shadow:0 10px 26px -8px oklch(20% 0.05 250 / .5);
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),
             opacity var(--dur-mid) var(--ease-out),visibility var(--dur-mid) var(--ease-out);
}
/* ヒーローが画面内にある間は出さない（合図はJS側の body.hero-in-view）。
   ヒーローは主CTAを持っており、同じ行き先の常設CTAが重なると視線が割れる。
   SP375では実際に募集職種の行（大型ドライバー）に重なっていた。
   ※クラスが付かない限り見える＝JSが動かないときも導線は残る */
body.hero-in-view .float-cta{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.96);
}
/* 出現の輪（pulse）はヒーロー上では回さない。隠れている間の描画を止める */
body.hero-in-view .float-cta::before{animation:none}
.float-cta::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--color-accent);opacity:.7;
  animation:pulse 3s var(--ease-out) infinite;
}
@keyframes pulse{0%{transform:scale(.92);opacity:.7}70%{transform:scale(1.18);opacity:0}100%{opacity:0}}
.float-cta:hover{background:var(--color-accent-deep);transform:translateY(-2px)}
/* 追従CTAはSPだけに出す。
   PCはヘッダーが常時表示で「職場見学を申し込む」を持っており、同じ行き先の
   常設CTAが2つあると視線が割れる（押される数は増えない）。加えてPCでは
   本文の右下に重なる不具合の原因にもなっていた。
   SPはナビがハンバーガーに畳まれてヘッダーCTAが隠れるため、ここが唯一の常設導線＝残す */
.float-cta{display:none}
@media (max-width:768px){
  .float-cta{display:grid}
}

/* ══ カード・グリッド ══ */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}

.card{
  background:oklch(100% 0 0);border:var(--rule-hair);
  display:flex;flex-direction:column;
  /* 下の .card-link::after をカード全面に広げるための基準 */
  position:relative;
}
.card-img{aspect-ratio:16/10;overflow:clip}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-mid) var(--ease-out)}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:var(--space-md) var(--space-md) var(--space-lg);display:flex;flex-direction:column;gap:.6rem;flex:1}
.card-tag{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;color:var(--color-accent-deep);
}
.card-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:.04em;line-height:1.6}
.card-text{font-size:var(--text-sm);color:var(--color-ink-soft);flex:1}
.card-link{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;color:var(--color-accent-deep);
  border-bottom:1px solid currentColor;padding-bottom:.2em;align-self:flex-start;
  /* ここに position:relative を付けてはいけない。付けると下の ::after が
     カードではなくリンク自身を基準にしてしまい、当たり判定が文字の上だけに戻る */
}
/* カードのどこを押しても記事へ飛べるようにする。
   文字だけがリンクだと当たり判定の高さが約20pxしかなく、SPで押しにくい（推奨は44px）。
   マークアップは変えず、リンクの当たり判定をカード全面に広げるだけにしている。
   写真の上にも乗るので「写真を押しても反応しない」も同時に解消する。
   セレクタは必ず .card の中に限定すること。business.html は .card の外（本文中）でも
   .card-link を使っており、限定しないと祖先に position を持つ要素がないため
   ページ全体が透明なリンクで覆われる */
.card .card-link::after{content:"";position:absolute;inset:0;z-index:1}
/* カード内に別のリンクを足すときは、この ::after より前面に出さないと押せなくなる */
.card a:not(.card-link){position:relative;z-index:2}
/* カードの外に単独で置かれた .card-link（business.htmlの本文中）は全面リンクの恩恵がないので、
   自前で縦の当たり判定を稼ぐ。下線は padding-bottom の外側に出るので位置は変わらない */
.vision-body .card-link{display:inline-block;padding-top:.55em}

/* 数字で見る */
/* 白箱を並べず、太罫＋縦ハアラインの台帳スタイル。数字はアクセント色で主役に */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:2px solid var(--color-navy);border-bottom:1px solid var(--color-line);
}
.stat{
  background:transparent;border:0;
  padding:var(--space-lg) var(--space-md);text-align:left;
}
.stat + .stat{border-left:1px solid var(--color-line)}
/* 数字の書体は明朝（見出しと同じ Shippori Mincho B1）。
   汎用ゴシックの太字だと社名ロゴでも見出しでもない「第3の書体」になり、
   数字だけが浮いて量産の求人ページに見える。明朝に寄せると sec-title と同じ声で読める。
   単位（%・日以上・円・回）はゴシックの中細に落として、数字本体とコントラストを付ける */
.stat .num{
  font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1.15;color:var(--color-accent);
  letter-spacing:-.01em;
  /* せり上がりを枠外に出さないための窓。line-height分の余白を確保する */
  overflow:hidden;
}
.stat .num small{
  font-family:var(--font-sans);font-size:.3em;font-weight:500;
  letter-spacing:.04em;color:var(--color-navy);margin-left:.12em;
}
/* 数字が下からせり上がる。
   カウントアップだと「0円」だけ動かず置き去りになる（0こそ一番の訴求なのに）。
   この形なら 0 でも 120 でも同じように効き、4枠の見え方が揃う。
   1枠ずつ時間差で出して、左から順に読ませる */
.js .stats .num{
  display:inline-block;
  transform:translateY(105%);
  opacity:0;
}
.js .stats.is-shown .num{
  transform:translateY(0);opacity:1;
  transition:transform 750ms var(--ease-out),opacity 550ms var(--ease-out);
}
.js .stats.is-shown .stat:nth-child(1) .num{transition-delay:80ms}
.js .stats.is-shown .stat:nth-child(2) .num{transition-delay:230ms}
.js .stats.is-shown .stat:nth-child(3) .num{transition-delay:380ms}
.js .stats.is-shown .stat:nth-child(4) .num{transition-delay:530ms}
.stat .label{font-family:var(--font-sans);font-weight:500;font-size:var(--text-sm);margin-top:.4rem}
.stat .note{font-size:var(--text-xs);color:var(--color-ink-soft);margin-top:.3rem;line-height:1.7}

/* ── 非対称ヒーロー（TOPの数字セク） ──
   4項目を等しく横に並べるのをやめ、いちばん効く「未経験95%」だけを紺の面に単独で大きく置き、
   残る3項目を右に細いリスト行として添える。横並び等幅から離れることで、
   TOPの他セクション（事業＝写真カード2枚並び／職種＝白箱2枚並び／見学の流れ＝3列）と骨格が重ならない。
   recruit.html は素の .stats を使い続けるので、こちらは修飾クラスで足している。
   .stats を残しているのは、数字のせり上がり演出（site.js の IntersectionObserver）を効かせるため */
.stats--hero{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  border-top:0;border-bottom:0;
}
.stats--hero .stat{padding:0}
.stats--hero .stat + .stat{border-left:0}
/* 主役は左1列を3段ぶん占める。これで残り3項目が右列に自動で積まれる */
.stats--hero .stat:first-child{
  grid-row:1 / span 3;
  background:var(--grad-navy);color:var(--color-white);
  padding:clamp(2rem,4vw,3.2rem);
  display:flex;flex-direction:column;justify-content:center;
}
.stats--hero .stat:first-child .num{
  font-size:clamp(4.5rem,10vw,8rem);color:var(--color-accent-bright);
  letter-spacing:-.02em;
}
.stats--hero .stat:first-child .num small{color:var(--color-white);font-size:.24em}
.stats--hero .stat:first-child .label{
  font-weight:700;font-size:var(--text-lg);margin-top:.9rem;letter-spacing:.03em;
}
.stats--hero .stat:first-child .note{color:var(--color-white-soft);margin-top:.6rem}

/* 残り3項目は、数字を左に置いた横組みの行にする。
   ここが「そこまで目立たない」と言われた箇所。原因は2つあり、両方直してある：
   ①数字がアクセント色（明るい青）で、地色（薄い青みの白）に対する明度差が小さかった
     → 数字を紺＝最大コントラストにし、単位だけアクセント色に回して色の役割を入れ替えた
   ②主役の 95 に対して数字が小さすぎた（7rem : 2.4rem ≒ 3:1）
     → 約2:1 まで詰めた。主従は保ったまま、単体でも十分に読める大きさになる */
.stats--hero .stat:not(:first-child){
  display:grid;
  /* 数字列は「120日以上」＝最長の組み合わせが1行で収まる幅。狭いと単位だけが折り返して
     「120日」「以上」に割れ、ベースラインもラベルとずれる */
  grid-template-columns:clamp(7.5rem,13vw,11.5rem) minmax(0,1fr);
  column-gap:clamp(1rem,2vw,1.75rem);
  align-items:baseline;
  padding-block:clamp(1.1rem,2.4vw,1.7rem);
  border-bottom:1px solid var(--color-line);
}
.stats--hero .stat:nth-child(2){border-top:1px solid var(--color-line)}
/* 120／0／2 と桁数が違うため数字列は固定幅。右寄せにすると単位の位置が3行で縦に揃い、
   バラバラの数値が1つのKPI表として読める（左寄せだと桁数の差がそのまま乱れになる） */
.stats--hero .stat:not(:first-child) .num{
  grid-column:1;text-align:right;white-space:nowrap;
  font-size:clamp(2.5rem,4.2vw,3.4rem);
  color:var(--color-navy);
}
.stats--hero .stat:not(:first-child) .num small{color:var(--color-accent-deep);font-weight:700}
.stats--hero .stat:not(:first-child) .label{
  grid-column:2;margin-top:0;
  font-weight:700;font-size:var(--text-md);color:var(--color-navy);
}
/* 注記は数字列の下に潜り込ませず、ラベルの真下＝右列に置く */
.stats--hero .stat:not(:first-child) .note{grid-column:2;margin-top:.35rem}
@media (max-width:820px){
  .stats--hero{grid-template-columns:1fr}
  .stats--hero .stat:first-child{grid-row:auto}
}

/* ステップ（見学の流れ・キャリアパス） */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);counter-reset:step}
.step{
  background:oklch(100% 0 0);border:var(--rule-hair);
  padding:var(--space-lg) var(--space-md);position:relative;counter-increment:step;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:var(--color-accent);
  display:block;margin-bottom:var(--space-sm);
}
.step h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:.04em;margin-bottom:.5rem}
.step p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.step::after{
  content:"→";position:absolute;right:-1.05rem;top:50%;translate:0 -50%;z-index:1;
  font-family:var(--font-sans);color:var(--color-accent);font-weight:700;
}
.step:last-child::after{content:none}

/* 定義テーブル（会社情報・募集要項） */
.info-table{width:100%;border-collapse:collapse;font-size:var(--text-md)}
.info-table th,.info-table td{
  border-bottom:var(--rule-hair);padding:1em .5em;vertical-align:top;text-align:left;
}
.info-table th{
  font-family:var(--font-sans);font-weight:700;white-space:nowrap;width:11em;color:var(--color-navy);
}
.info-table td{color:var(--color-ink-soft)}
.info-table td ul{display:grid;gap:.25em}

/* 注記 */
.note-text{font-size:var(--text-xs);color:var(--color-ink-soft);line-height:1.8}

/* 環境ハイライト（アイコンなし・タイポ主導） */
.env-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.env-item{border-top:2px solid var(--color-navy);padding-top:var(--space-md)}
.env-item h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:.04em;margin-bottom:.5rem}
.env-item p{font-size:var(--text-sm);color:var(--color-ink-soft)}

/* インタビュー（縮退設計：is-pendingで準備中表示） */
.interview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-md)}
/* 「声」の器＝白カード＋上罫アクセント＋大きな引用符の透かし */
.interview-card{
  position:relative;overflow:clip;
  background:oklch(100% 0 0);border:var(--rule-hair);border-top:3px solid var(--color-accent);
  padding:var(--space-lg) var(--space-md);
  display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 20px 44px -30px oklch(30% 0.07 262 / .4);
}
.interview-card::before{
  content:"\201C";position:absolute;top:-.08em;right:.05em;
  font-family:var(--font-display);font-weight:800;font-size:6.5rem;line-height:1;
  color:var(--color-accent);opacity:.12;pointer-events:none;
}
.interview-card .role{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;color:var(--color-accent-deep);
}
.interview-card h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);line-height:1.6;letter-spacing:.04em}
.interview-card p{font-size:var(--text-sm);color:var(--color-ink-soft);flex:1}
.interview-card.is-pending::after{
  content:"COMING SOON";
  align-self:flex-start;margin-top:.4rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--color-accent);
  border:1px solid var(--color-accent);padding:.35em 1.1em;
}

/* ══ フォーム ══ */
.form{display:grid;gap:var(--space-md);max-width:640px}
.form-row{display:grid;gap:.4rem}
.form-label{font-family:var(--font-sans);font-weight:700;font-size:var(--text-sm)}
.form-label .req{
  font-family:var(--font-sans);font-size:.875rem;font-weight:700;color:oklch(98% 0.005 240);
  background:oklch(45% 0.16 25);padding:.15em .6em;margin-left:.6em;vertical-align:middle;
}
.form-label .opt{
  font-family:var(--font-sans);font-size:.875rem;font-weight:700;color:var(--color-ink-soft);
  background:var(--color-paper-2);padding:.15em .6em;margin-left:.6em;vertical-align:middle;
}
.form input[type="text"],.form input[type="tel"],.form input[type="email"],.form select,.form textarea{
  font-family:var(--font-sans);font-size:var(--text-md);
  padding:.8em 1em;border:1px solid var(--color-line);background:oklch(100% 0 0);color:var(--color-ink);
  transition:border-color var(--dur-fast) var(--ease-out);
  width:100%;
}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--color-ink-soft)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-focus)}
.form textarea{min-height:8em;resize:vertical}
.check-group{display:flex;flex-wrap:wrap;gap:.5rem .5rem}
.check-chip{position:relative}
.check-chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.check-chip span{
  display:inline-block;font-family:var(--font-sans);font-size:var(--text-sm);
  border:1px solid var(--color-line);padding:.5em 1.1em;background:oklch(100% 0 0);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.check-chip input:checked + span{background:var(--color-navy);border-color:var(--color-navy);color:var(--color-white)}
.check-chip input:focus-visible + span{outline:2px solid var(--color-focus);outline-offset:2px}
.radio-group{display:flex;flex-wrap:wrap;gap:.5rem}
.form-consent{font-size:var(--text-sm);display:flex;align-items:baseline;gap:.5em}
.form-consent a{color:var(--color-accent-deep);text-decoration:underline}

/* ══ フッター ══
   プレフッター（.footer-statement「人は、『財産』だ。」）は2026-08-03に全ページから撤去。
   各ページの最下部に紺のCTAセクションを置いたため、その直後に同じ導線が重なっていた */
.site-footer{background:var(--color-dark);color:var(--color-white)}
.footer-info{
  border-top:1px solid var(--color-line-dark);
  padding:var(--space-lg) clamp(1.25rem,5vw,4rem);
}
.footer-info-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-lg);
}
.footer-company{font-size:var(--text-xs);color:var(--color-white-soft);line-height:1.9}
.footer-company .name{font-family:var(--font-sans);font-weight:700;font-size:var(--text-sm);color:var(--color-white);margin-bottom:.4rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-content:start;justify-content:flex-end}
.footer-nav a{
  font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-white-soft);
  transition:color var(--dur-fast) var(--ease-out);white-space:nowrap;
}
.footer-nav a:hover{color:var(--color-white)}
.footer-copy{
  border-top:1px solid var(--color-line-dark);
  padding:var(--space-sm) clamp(1.25rem,5vw,4rem);
  font-family:var(--font-mono);font-size:.875rem;letter-spacing:.08em;color:var(--color-white-soft);
}

/* ══ トップ専用：オープニング演出 ══ */
/* 演出は「夜明け」型（2026-08-03採用。案の比較は _比較用/opener-variants.html に残してある）。
   漆黒から明るい紺へ地の色を上げていき、最後の「財産」だけロゴブルーに変える。

   2026-08-03 改訂：上司FBを受けて5カット→3カットの「案A 間（ま）」へ差し替え。
   文字は動かさず、ぼけから合焦して据わり、消える。カットとカットのあいだに
   何も無い0.5秒を挟む（尺はJS側 site.js のコメント参照。修正案の比較は
   _比較用/opener-r2.html）。動きを足すのではなく引くことで「速すぎる」を解いている。

   なぜ明転させるか：ヒーロー1枚目（DSC01545）の平均輝度を測ると47%あり、
   思っていたより明るい。暗いまま終わると 16% → 47% で跳ぶが、
   34%まで上げておくと段差なくヒーローへつながる。
   --p は JS が入れる進行度（0＝1シーン目 → 1＝最終シーン） */
.opener{
  position:fixed;inset:0;z-index:60;
  background:var(--color-dark);
  display:grid;place-items:center;
  transition:opacity 600ms var(--ease-in-out);
  --p:0;
}
/* 終わったオープニングもSPメニューと同じ理由で visibility まで落とす
   （SKIPボタンがTabで拾える状態のまま残っていた） */
.opener.is-done{
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
/* 地の色は、暗い背景の上に明るい紺を1枚重ねて opacity を上げるだけにしている。
   色関数の中で明度を計算させると、対応していないブラウザで色が飛ぶため */
.op-dawn{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:calc(var(--p) * .92);
  background:linear-gradient(to top,
    oklch(34% 0.062 252) 0%,
    oklch(26% 0.05 256) 55%,
    oklch(19% 0.038 260) 100%);
  transition:opacity 1300ms var(--ease-in-out);
}
/* 最終カットでだけ、上端に夜明けの光の帯を出す */
.op-dawn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, oklch(82% 0.09 226 / .22) 0%, transparent 34%);
  opacity:calc(max(0, var(--p) - .74) * 4);
  transition:opacity 1000ms var(--ease-in-out);
}
/* pointer-events:none は必須。inset:0 で全面を覆うので、これが無いと
   opacity:0 のシーンがSKIPボタンの上に3枚重なってクリックを吸う
   （opacity:0 の要素はクリックを受け取る）。.op-dawn と同じ扱い */
.op-scene{
  position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  opacity:0;transition:opacity 900ms var(--ease-in-out);
  padding:0 7vw;text-align:center;pointer-events:none;
}
/* 文字は動かさない（案A）。ぼけから合焦して据わり、そのまま消える。
   以前は下から浮かせて上へ抜いていたが、カットが5枚あると同じ動きの反復＝
   スライドショーに見え、しかも動いている最中は読めない＝体感の速さを増していた。
   3カットに減らした今は、動きを引いて静止させたほうが1枚ずつ落ち着いて読める。

   2026-08-03（2回目のFB「まだテンポが速い」）：合焦を1100ms→600msに短縮した。
   ぼけている間は読めないので、表示時間からこのぶんを引いた残りが「実際に読める時間」になる。
   1100msだと18字のカットで読める時間が1.95秒しかなく、体感の速さはここが正体だった。

   2026-08-05（3回目のFB「遅すぎる」）：合焦をさらに600→450msへ。
   全体の尺を11.95→10.40秒に詰めるにあたって、削る先を「読む時間」ではなく
   「読めない時間」に寄せている（尺の内訳はJS側のコメントに置いた）。
   scale だけは1600msのまま残す（ゆっくり据わる感じはここが担っている） */
.op-scene p{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2.9vw,2rem);
  line-height:1.85;letter-spacing:.08em;color:var(--color-white-soft);
  filter:blur(6px);transform:scale(1.03);
  transition:filter 300ms var(--ease-out), transform 1600ms var(--ease-out);
}
.op-scene.is-on{opacity:1}
.op-scene.is-on p{filter:blur(0);transform:scale(1)}
/* 退場は入場（900ms）より速い620ms。次のカットが出るまでの暗転を確保するため。
   ただし最終カットには「次のカット」が無いので、この理由は当てはまらない（下で上書き） */
.op-scene.is-out{opacity:0;transition:opacity 620ms var(--ease-in-out)}
/* 最終カットは字間を締めながら据わる＝ここで話が着地する合図。
   字間は1800ms→1200ms。動きが長いほどゆっくり見えるわけではなく、逆に
   「完成形が見えている時間」を食う。1800msだと表示2800msのうち完成形が持つのは
   1000msだけで、カット1・2の2250msより短かった＝締めがいちばん短い状態だった。
   transform も transition に戻す。ここに書き忘れていたため、退場の瞬間に
   scale(1)→scale(1.03) が無補間で当たり、最終カットだけ不透明のまま膨らんでいた */
.op-scene.op-final p{
  font-weight:800;color:var(--color-white);
  font-size:clamp(2rem,6vw,4.2rem);line-height:1.4;
  letter-spacing:.2em;
  transition:filter 300ms var(--ease-out), letter-spacing 900ms var(--ease-out),
             transform 1600ms var(--ease-out);
}
.op-scene.op-final.is-on p{letter-spacing:.09em}
/* 最終カットの退場だけ、ぼかしながら長く溶かす。
   opacity が先に0になると、そのあとの blur は見えない＝blurだけ伸ばしても効かない。
   opacity を1100msに伸ばし、その内側で blur を1000msかける。
   全体の尺は増えない。JSの TAIL 600ms が過ぎた時点で .opener.is-done の600msフェードが
   始まるので、残りはそこに重なって進む（＝文字が黒へ消えてから写真が出るのではなく、
   ぼけながらヒーローへ溶ける）。
   字間はここで固定する。固定しないと .2em へ戻り始め、締めた手つきが巻き戻る */
   ※尺は `TAIL`＋`.opener.is-done` のフェードに収める。はみ出すと途中で切られる */
.op-scene.op-final.is-out{transition:opacity 1000ms var(--ease-in-out)}
.op-scene.op-final.is-out p{
  letter-spacing:.09em;filter:blur(10px);
  transition:filter 900ms var(--ease-out), letter-spacing 0s,
             transform 900ms var(--ease-out);
}
/* 最後に画面へ残る色をロゴブルーにして、そのままヒーローへ受け渡す。
   明度は84%。案4で使った76%だと、明るい紺の地に対して2文字が沈んだ。
   地は彩度0.05・この青は0.14で、色相ではなく彩度差で立たせている。
   最終カットの表示は2650ms。出そろう300ms後から700msかけて青くなりきり、
   残り1.65秒はその状態で持たせる */
.op-key{
  font-style:normal;color:inherit;
  transition:color 700ms var(--ease-in-out) 300ms;
}
.op-scene.op-final.is-on .op-key{color:oklch(84% 0.14 222)}
/* z-index は .op-scene（1）より上に。auto のままだと重なり順で負ける */
.op-skip{
  position:absolute;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);z-index:2;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  color:var(--color-white-soft);background:none;
  border:1px solid var(--color-line-dark);padding:.55em 1.3em;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.op-skip:hover{color:var(--color-white);border-color:var(--color-white-soft)}
.op-skip:active{transform:translateY(1px)}

/* ══ トップ専用：MV（フルスクリーン・シネマティック） ══ */
/* ヒーロー：5カットのクロスフェード＋スローズーム（案Aから移植）
   ヘッダーが overlay（position:fixed）になり版面を占有しなくなったので 100svh を使い切る。
   旧実装はCSS背景＋background-attachment:fixed のパララックスだったが、
   写真を切り替える以上どちらか一方しか成立しないため、動きはスローズームに一本化した */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;overflow:clip;
  background-color:var(--color-dark);
  color:var(--color-white);
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1400ms var(--ease-in-out);
}
/* ズームは 表示5.2s＋フェード1.4s＝6.6s に合わせ、途中で断ち切られないようにする */
.hero-slide.is-on{opacity:1;animation:heroZoom 6600ms var(--ease-out) forwards}
/* 退場中は到達点で固定＝animationが外れた瞬間の跳ねを防ぐ */
.hero-slide.is-out{opacity:0;transform:scale(1.07)}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
/* 偶数枚目は寄りから引きへ。6枚とも同じ方向に寄っていくと、
   クロスフェードのたびに同じ動きが繰り返されて「自動スライド」に見える。
   1枚ごとに寄り／引きを入れ替えると、カットが切り替わったことが動きでも分かる */
.hero-slide:nth-child(2n).is-on{animation-name:heroZoomOut}
.hero-slide:nth-child(2n).is-out{transform:scale(1)}
@keyframes heroZoomOut{from{transform:scale(1.07)}to{transform:scale(1)}}
/* スクリムは2層。斜めの1層だけだと、明るい人物カットに切り替わったとき
   文字の当たる下半分が負ける（旧実装は暗いトラック1枚固定だったので足りていた） */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, oklch(17% 0.06 252 / 0) 30%, oklch(18% 0.06 252 / .38) 68%, oklch(16% 0.065 252 / .72) 100%),
    linear-gradient(200deg, oklch(20% 0.055 252 / .18) 0%, var(--color-scrim) 62%, oklch(16% 0.065 252 / .76) 100%);
}
.hero-bg{display:none} /* 旧imgベース残置 */
/* いま何カット目かの指標。右下は追従CTAの占有域なので右上に置く */
.hero-dots{
  position:absolute;right:clamp(1.25rem,5vw,4rem);top:clamp(5rem,11vh,7rem);z-index:2;
  display:flex;gap:.6rem;
}
.hero-dots i{
  display:block;width:1.75rem;height:2px;background:oklch(97% 0.005 250 / .35);
  transition:background var(--dur-mid) var(--ease-out);
}
.hero-dots i.is-on{background:var(--color-white)}
.hero-inner{
  position:relative;z-index:1;width:100%;
  padding:var(--space-2xl) clamp(1.25rem,5vw,4rem) clamp(3.5rem,7vh,5.5rem);
  max-width:1200px;margin:0 auto;
}
/* ── オープニングからヒーローへの受け渡し（2026-08-03） ──
   これまではオープニングが消えると、その裏で完成していたヒーローがそのまま現れていた。
   演出が「終わってから」ページが始まる形で、1本の流れになっていない。
   オープニングの退場（600ms）と重ねて、キャッチ・リード・ボタンを順に立ち上げる。
   合図は body.is-loaded＝オープニングの終了時にJSが付けるクラス。
   オープニングを飛ばした2回目以降も、同じ合図が即座に付くので同様に立ち上がる。
   ※.js が付くのはJSが動いているときだけ＝JS無効なら最初から見えている

   2026-08-05：ここの尺を約0.65倍に詰めた（900→640ms、遅延も同率）。
   「ローディングが長い」の勘定に、この立ち上がりが入っていなかった。
   オープニングのJSが終わったあとも、退場600ms＋ここの2.0秒が動き続けていて、
   動きが完全に止まるまでは12.40秒あった（オープニング自体は10.40秒）。
   ここは読む時間ではなくページが組み上がる時間なので、削っても本文の可読性に影響しない。
   最後尾（スクロール合図）が 1100+900＝2000ms → 760+640＝1400ms。全体は11.80秒になる */
.js .hero-inner > *{opacity:0;transform:translateY(20px)}
.js body.is-loaded .hero-inner > *{
  opacity:1;transform:none;
  transition:opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.js body.is-loaded .hero-kicker{transition-delay:110ms}
.js body.is-loaded .hero-title{transition-delay:210ms}
.js body.is-loaded .hero-lead{transition-delay:350ms}
.js body.is-loaded .hero-cta{transition-delay:470ms}
/* 注記はCTAの直後。指定しないと .hero-inner > * の既定（遅延0）で先頭に出てしまう */
.js body.is-loaded .hero-note{transition-delay:520ms}
.js body.is-loaded .hero-jobs{transition-delay:620ms}
/* 指標とスクロール合図は本文が出そろってから */
.js .hero-dots,.js .scroll-cue{opacity:0}
.js body.is-loaded .hero-dots,.js body.is-loaded .scroll-cue{
  opacity:1;transition:opacity 640ms var(--ease-out) 760ms;
}
.hero-kicker{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.18em;
  /* 写真の上に乗るので accent（明度57%）では沈む。明るい側の accent-bright を使う */
  color:var(--color-accent-bright);margin-bottom:var(--space-md);
}
.hero-title{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--text-display);line-height:1.42;letter-spacing:.05em;
  overflow-wrap:anywhere;min-width:0;
  margin-bottom:var(--space-md);
}
.hero-lead{
  color:var(--color-white-soft);max-width:var(--measure);line-height:2.0;
  margin-bottom:var(--space-lg);font-size:var(--text-md);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
/* CTA直下の注記。KPI（職場見学の申し込み）に直結する「履歴書不要・見学だけで帰れる」を
   最初の画面で答える。文字は注記の下限（--text-xs＝14〜16px）を守り、
   写真の上でも読めるよう hero-lead と同じ white-soft を使う（2026-08-03） */
.hero-note{
  margin-top:var(--space-sm);max-width:var(--measure);
  font-size:var(--text-xs);color:var(--color-white-soft);
  letter-spacing:.02em;line-height:1.7;
}
/* 募集職種（最初の画面で職種を即視認→recruitの各職種へ直行） */
.hero-jobs{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:var(--space-lg)}
.hero-jobs-label{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.18em;
  color:var(--color-white-soft);margin-right:.4rem;
}
/* 募集職種は「CTA」ではなく職種ページへの案内。
   囲み枠にするとその上のボタン2つと同列に見え、押し先の重みを取り違える。
   枠を外し、下線つきのテキストリンク＋区切り点で"目次"の見え方にする */
.hero-jobs a{
  display:inline-block;padding:.15em 0;
  border:0;color:var(--color-white);
  font-family:var(--font-sans);font-size:var(--text-sm);letter-spacing:.06em;
  border-bottom:1px solid oklch(80% 0.02 255 / .5);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.hero-jobs a:hover{border-bottom-color:var(--color-accent-bright);color:var(--color-accent-bright)}
/* 職種のあいだに細い区切りを置く（最後は付けない） */
.hero-jobs li:not(.hero-jobs-label):not(:last-child)::after{
  content:"/";margin-left:.9rem;
  color:oklch(80% 0.02 255 / .45);font-size:var(--text-xs);
}
.hero-jobs li{display:flex;align-items:center}
.hero-jobs-label::after{content:none}
/* 下端に張り付くと線がヒーローの縁で切れて見づらいので、床から浮かせる */
.scroll-cue{
  position:absolute;right:clamp(8.5rem,11vw,10rem);bottom:clamp(2rem,5vh,3.5rem);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  /* .68rem＝10.9px で共通規約の下限14pxを割っていた。装飾寄りのラベルだが文字である以上
     例外にしない。縦組みなので幅は増えず、伸びるのは高さだけ（約100px＋線64px） */
  font-family:var(--font-mono);font-size:.875rem;letter-spacing:.2em;color:var(--color-white-soft);
  writing-mode:vertical-rl;
}
.scroll-cue::after{
  content:"";width:1px;height:64px;background:var(--color-white-soft);
  animation:cue 2.2s var(--ease-in-out) infinite;transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ══ 想い（2カラム・写真×言葉） ══ */
.vision{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--space-xl);align-items:center}
.vision-img{overflow:clip}
.vision-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* 想い：フル幅50:50（コンテナ飛び出し・画像端まで） */
.section--vision-full{padding-left:0;padding-right:0}
.vision--full{
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:0;align-items:stretch;min-height:640px;
}
.vision--full .vision-img{position:relative}
.vision--full .vision-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto;
}
.vision--full .vision-body{
  padding:clamp(2.5rem,5vw,5rem) clamp(1.5rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--color-white);
}
.vision--full .vision-body-inner{max-width:38em}
@media (max-width:900px){
  .vision--full{grid-template-columns:1fr;min-height:0}
  .vision--full .vision-img{min-height:340px}
  .vision--full .vision-img img{position:relative}
}
/* フル幅レイアウトに負けないスケール。『財産』のみアクセント色
   ※.vision-body p（特異度011）に負けないよう同等以上のセレクタで書く */
.vision-body p.vision-quote{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.55;letter-spacing:.04em;
  color:var(--color-ink);max-width:none;
  margin-bottom:var(--space-md);
}
/* 『財産』だけを少し強調する。
   文字自体は動かさず（読みにくくなるため）、下に細い線を左から引く＝重要語をマークする動き。
   .fx の is-in を合図に、本文が出そろってから引く */
.vision-quote em{
  font-style:normal;color:var(--color-accent);
  position:relative;display:inline-block;
}
.vision-quote em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:3px;
  background:var(--color-accent);opacity:.45;
  transform:scaleX(0);transform-origin:left center;
}
.js .vision-body.is-in .vision-quote em::after{
  transform:scaleX(1);
  transition:transform 900ms var(--ease-out) 700ms;
}
.vision-body p{font-size:var(--text-md);color:var(--color-ink-soft);max-width:var(--measure)}
.vision-body p + p{margin-top:1em}
.vision-name{
  margin-top:var(--space-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:700;
}
.vision-name small{font-weight:400;color:var(--color-ink-soft);display:block;font-size:var(--text-xs)}

/* ══ はたらく仲間ギャラリー（無限スクロール・マーキー） ══
   3枚のカードグリッドをやめ、写真が途切れず流れ続ける帯にする。
   ・同じ列を2セット並べ、1セット分ぶん平行移動したらリセット＝継ぎ目なく無限に流れる
   ・列は左右で逆方向に流し、単調な一方向スクロールにしない
   ・hoverで停止（見たい写真を止められる）
   ・reduced-motion では停止し、横スクロールで見られる状態にする
   ・コンテナを飛び出して画面両端まで使う（グローバル規約のfull-width breakout） */
.gallery-marquee{
  margin-top:var(--space-lg);
  /* .section の左右パディングぶん戻して画面両端まで到達させる
     （グローバル規約のfull-width breakout。overflow:clipなので横スクロールは出ない） */
  margin-inline:calc(-1 * clamp(1.25rem,5vw,4rem));
  display:grid;gap:var(--space-sm);
  overflow:clip;
}
.gm-row{
  display:flex;gap:var(--space-sm);width:max-content;
  animation:gmScroll var(--gm-dur,64s) linear infinite;
  will-change:transform;
}
.gm-row--rev{animation-direction:reverse}
.gallery-marquee:hover .gm-row{animation-play-state:paused}
@keyframes gmScroll{
  from{transform:translate3d(0,0,0)}
  /* 2セット並べているので、半分ぶん動かせば元の見た目に戻る */
  to{transform:translate3d(-50%,0,0)}
}
/* 同じ写真が1画面に2枚映らないための条件：
   「1セットの横幅 > ビューポート幅」。2セット並べているので、これを満たせば
   画面が継ぎ目をまたいでも見えるのは別々の写真になる。
   旧実装は上限20remで頭打ちになり、上段5枚＝1480px・下段4枚＝1182pxとなって
   下段が1265pxのビューポートを下回り、同じ写真が2枚見えていた（実測）。
   上限を外し、枚数×vw幅が必ず100vwを超えるようにする（上段5×21vw=105vw／下段4×26vw=104vw）。
   小さい画面では min 側の rem が効き、こちらも確実に100vwを超える */
.gm-item{
  flex:none;width:max(15rem,21vw);aspect-ratio:4/3;
  overflow:clip;background:var(--color-dark);
  position:relative;
}
.gm-row--rev .gm-item{width:max(16rem,26vw)}
.gm-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.gallery-marquee:hover .gm-item:hover img{transform:scale(1.05)}
/* 両端を紙色へ溶かし、帯が画面外へ続いている感じを出す */
.gallery-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
@media (max-width:768px){
  /* SPは1画面に2枚弱が見える大きさ。5枚・4枚とも合計は余裕で100vwを超える */
  .gm-item,.gm-row--rev .gm-item{width:max(12rem,52vw)}
}
@media (prefers-reduced-motion: reduce){
  /* 動きを止める代わりに、手で横に送って見られるようにする */
  .gm-row{animation:none;width:auto;overflow-x:auto;scrollbar-width:thin}
  .gm-item--dup{display:none} /* 複製ぶんは不要（無限ループしないため） */
  .gallery-marquee{-webkit-mask-image:none;mask-image:none;margin-inline:0}
}

/* ══ 動画プレースホルダ（縮退可能） ══ */
/* フル幅セクション（コンテナ飛び出し・グローバル規約：TOPに最低1箇所） */
.section--full{padding-left:0;padding-right:0}
.section--full > .section-inner{padding-left:clamp(1.25rem,5vw,4rem);padding-right:clamp(1.25rem,5vw,4rem)}

/* 事業ダイジェスト：写真ヒーローカード（暗背景・カード上に重ね）
   レイアウトが大きいぶんタイポも大きく＝面積に負けないスケール */
.card--photo-hero{
  position:relative;background:var(--color-dark);
  border:0;
  min-height:520px;overflow:clip;padding:0;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.card--photo-hero .card-img{
  position:absolute;inset:0;margin:0;
  border-radius:0;overflow:hidden;
}
.card--photo-hero .card-img img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.66) saturate(.95);
  transition:transform .8s var(--ease-out), filter .5s var(--ease-out);
}
.card--photo-hero:hover .card-img img{transform:scale(1.05);filter:brightness(.8) saturate(1)}
.card--photo-hero .card-body{
  position:relative;z-index:2;
  padding:var(--space-xl) var(--space-lg) var(--space-lg);
  background:linear-gradient(180deg, transparent 0%, oklch(17% 0.04 262 / .74) 55%, oklch(16% 0.04 262 / .92) 100%);
  color:var(--color-white);
  gap:.9rem;
  /* ボディはカード高いっぱいに伸びるので、内容を下端へ寄せる。
     上寄せのままだと下半分が空き、かつ文字がグラデの薄い側に乗って読みにくい */
  justify-content:flex-end;
}
.card--photo-hero .card-tag{color:var(--color-accent-bright);font-size:var(--text-sm);letter-spacing:.2em}
/* 見出しは事業名。ここが主。 */
.card--photo-hero .card-title{color:var(--color-white);font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.5}
/* 訴求フレーズは見出しの直下に、アクセント色の一行として置く。
   旧実装は「鉄鋼倉庫業務 — 一生モノの技術」とemダッシュで繋いでいて埋没していたので
   行を分けたが、主従は事業名が上（見出しを食わない大きさに留める） */
.card--photo-hero .card-hook{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.7;letter-spacing:.05em;
  color:var(--color-accent-bright);
  display:flex;align-items:center;gap:.7rem;
}
.card--photo-hero .card-hook::before{
  content:"";flex:none;width:1.6rem;height:2px;background:var(--color-accent-bright);
}
/* 基底の .card-text は flex-grow:1（グリッドで高さを揃えるため）だが、
   写真ヒーローでは本文が余白を全部吸って伸び、リンクだけが下に離れてしまう。
   伸縮を止めて、余った高さは card-body 側の justify-content:flex-end に渡す */
.card--photo-hero .card-text{
  color:var(--color-white-soft);font-size:var(--text-md);max-width:44ch;
  flex-grow:0;
}
.card--photo-hero .card-link{color:var(--color-accent-bright);font-size:var(--text-sm)}

/* （段差修飾は撤去：段差は環境の階段カード1箇所に限定。SPで消える演出を多用しない） */

/* 環境ハイライト：階段状カード（右へ一段ずつ下がる＝仕組みの積み上げ）
   番号を主役に据え、アクセント左罫＋ヘアライン枠＋シャドウで締める */
/* 働く環境：読み物型（見出しを左に据え置き、右を縦に読ませる）
   旧実装は4枚を接合した横並びの「積み上げ」だったが、上の「数字で見る」と
   下の「見学の流れ」がどちらも「番号＋横並び等幅＋明るい地色」で、3つが並ぶと見分けがつかなかった。
   横並び等幅と番号の両方をやめ、TOPで唯一の「見出し固定＋縦読み」の骨格にしている。
   制度は読ませる情報なので、行が伸びても破綻しないこの形が情報量にも強い */
.env-read{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:start;
}
/* 右の一覧を読んでいるあいだ、見出しが視界に残る */
.env-read-head{position:sticky;top:11rem}
.env-read-list{border-top:1px solid var(--color-line)}
.env-read-row{
  /* 見出し列は「休みは暦どおり」7文字が1行で収まる幅を確保する（明朝1.8rem×7＝約13rem）。読点を入れると8文字になり広い画面で折り返す */
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(.8rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3vw,2.3rem);
  border-bottom:1px solid var(--color-line);
}
.env-read-row .lb{
  display:block;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.18em;color:var(--color-accent-deep);margin-bottom:.5rem;
}
.env-read-row h3{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xl);letter-spacing:.05em;line-height:1.6;
}
.env-read-row p{font-size:var(--text-sm);line-height:2;color:var(--color-ink-soft)}
@media (max-width:960px){
  /* 2カラムをやめたら見出しの追従も外す。上に置いたまま固定すると内容を隠す */
  .env-read{grid-template-columns:1fr;gap:var(--space-lg)}
  .env-read-head{position:static}
  .env-read-row{grid-template-columns:1fr;gap:.7rem}
}

/* CTA：フル幅・固定背景で締める */
.section--cta-fixed{
  position:relative;overflow:clip;
  background-color:var(--color-navy-deep);
  background-image:url(../img/photo/DSC01685-1920.webp);
  background-size:cover;background-position:center;background-attachment:fixed;
}
.section--cta-fixed::before{
  content:"";position:absolute;inset:0;z-index:0;
  /* 上：写真を見せて現場を想起 → 下：フッターの闇（--color-dark）へ連続。
     視線はコントラスト最大の中央主ボタンに落ちる */
  background:linear-gradient(180deg, oklch(34% 0.07 262 / .60) 0%, oklch(22% 0.05 262 / .88) 55%, oklch(18% 0.04 262 / .95) 100%);
}
.section--cta-fixed > .section-inner{position:relative;z-index:1}
@media (hover:none){.section--cta-fixed{background-attachment:scroll}}

/* CTA内部：主導線1本＋従導線テキストの階層 */
.cta-inner{text-align:center}
/* SPで見出しが語の途中（「働いてみませ／んか。」等）で割れるのを防ぐ */
.cta-inner .sec-title{word-break:auto-phrase}
.cta-lead{
  margin:var(--space-md) auto var(--space-lg);
  max-width:34em;color:var(--color-white-soft);font-size:var(--text-md);
}
.btn-xl{padding:1.15em 2.8em;font-size:var(--text-md)}
.cta-sub{
  display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;justify-content:center;
  margin-top:var(--space-lg);
}
.cta-sub a{
  font-size:var(--text-sm);color:var(--color-white-soft);
  border-bottom:1px solid oklch(80% 0.02 255 / .45);padding-bottom:.25em;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cta-sub a:hover{color:var(--color-white);border-color:var(--color-white)}

/* 職種カード：罫線をやめてシャドウ（段差は廃止＝3職種を同じ高さで比較しやすく） */
.grid-3--shadow .card{border:0;box-shadow:0 24px 50px -30px oklch(30% 0.07 262 / .4)}

/* 職種カードの番号チップ（画像に重ねる紺ラベル） */
.card-img{position:relative}
.card-num{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--color-navy);color:var(--color-white);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  padding:.45em 1em;
}

/* 見学の流れ：タイムライン化（TOP＋recruitの見学セクション。
   キャリアパス・business の .steps はカード型のまま＝順路ではなく段階の提示なので分ける）
   段ごとに独立した上罫を引いていたが、それだと3つの箱に見えて「順路」として読めなかった。
   1本の線で全体を貫き、各段にノードを置いて繋ぐ。
   線はスクロールで左から右へ引かれ、番号は順に立ち上がる＝進む向きが目で分かる */
.steps--line{
  --node:.9rem;                      /* ノード（点）の直径 */
  --rail-gap:clamp(1.5rem,4vw,3rem); /* 列間の隙間。線がここを渡って次のノードへ繋がる */
  gap:var(--rail-gap);
}
/* 各段は自分のノードと線を持つ。
   ノードと線は flex の align-items:center で縦位置が決まる＝計算が入らないのでズレない。
   （旧実装は容器と段で別々に絶対配置しており、丸め差で必ず数pxずれた） */
.steps--line .step{
  background:transparent;border:0;padding:0;
  display:flex;flex-direction:column;
}
.step-rail{display:flex;align-items:center;margin-bottom:var(--space-lg)}
.step-rail::before{
  content:"";flex:none;
  width:var(--node);height:var(--node);border-radius:50%;
  background:var(--color-accent);
}
.step-rail::after{
  content:"";flex:1;height:2px;background:var(--color-navy);
  /* 列間の隙間を渡って、次の段のノードに接続する */
  margin-right:calc(var(--rail-gap) * -1);
}
/* 最後の段は次が無いので、線を先へ薄れさせる（ここで終わりに見せない） */
.steps--line .step:last-child .step-rail::after{
  margin-right:0;
  background:linear-gradient(90deg,var(--color-navy) 0,var(--color-navy) 50%,transparent 100%);
}
/* DOM順は rail → 番号 → 見出し → 本文。番号は .step::before（基底と共用）なので order で並べる */
.steps--line .step-rail{order:1}
.steps--line .step::before{
  order:2;
  content:"0" counter(step);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1;color:var(--color-accent);
  display:block;margin-bottom:var(--space-sm);
}
.steps--line .step h3{order:3}
.steps--line .step p{order:4}
.steps--line .step::after{content:none}
/* 容器自身はフェードさせず、is-in の合図役にだけ使う。
   子を時間差で出すことで「01→02→03」と進む感じを作る（新しい動きは足さず、
   既存のフェードインに遅延を付けただけ） */
.js .steps--line.fx{opacity:1;transform:none;transition:none}
.js .steps--line .step{
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);
}
.js .steps--line.is-in .step{opacity:1;transform:none}
.js .steps--line.is-in .step:nth-child(1){transition-delay:180ms}
.js .steps--line.is-in .step:nth-child(2){transition-delay:400ms}
.js .steps--line.is-in .step:nth-child(3){transition-delay:620ms}
/* 線は各段が現れたあと、左から右へ引かれる＝進む向きが出る */
.js .steps--line .step-rail::after{transform:scaleX(0);transform-origin:left center;transition:transform 800ms var(--ease-out)}
.js .steps--line.is-in .step:nth-child(1) .step-rail::after{transform:scaleX(1);transition-delay:380ms}
.js .steps--line.is-in .step:nth-child(2) .step-rail::after{transform:scaleX(1);transition-delay:600ms}
.js .steps--line.is-in .step:nth-child(3) .step-rail::after{transform:scaleX(1);transition-delay:820ms}

@media (max-width:768px){
  /* SPは1列に積むので、列間を渡る負のマージンは不要。
     各段が「●———」を頭に持つ形になり、縦の通し線は引かない。
     縦線とノードを別々に配置すると、また基準ズレの温床になるため */
  .step-rail::after{margin-right:0}
  .steps--line .step-rail{margin-bottom:var(--space-md)}
  .steps--line .step:last-child .step-rail::after{
    background:linear-gradient(90deg,var(--color-navy) 0,var(--color-navy) 50%,transparent 100%);
  }
}

/* ══ 未確定項目の注記 ══
   新方針＝未確定でも仮情報＋注記でサイトに載せて初稿を出し、
   初稿提出後のMTGで口頭確認する。CLが見て「ここは答える箇所だ」と分かる強さにする */
.tbd{
  display:inline-block;margin-left:.5em;
  font-family:var(--font-sans);font-size:var(--text-cap,.875rem);font-weight:500;
  color:oklch(52% 0.14 60);letter-spacing:.02em;white-space:nowrap;
}
.tbd-badge{
  display:inline-block;vertical-align:middle;margin-left:.8em;
  padding:.3em .8em;
  background:oklch(94% 0.07 85);border:1px solid oklch(72% 0.13 70);
  font-family:var(--font-sans);font-size:var(--text-cap,.875rem);font-weight:700;
  color:oklch(38% 0.10 60);letter-spacing:.02em;line-height:1.6;
  white-space:nowrap;
}
@media (max-width:768px){
  .tbd-badge{display:block;margin:.7rem 0 0;width:fit-content}
  /* nowrap のままだと「※認定を受けている営業所は要ご確認」のような長い注記が
     SP幅で親からはみ出す。overflow-x:clip があるので横スクロールは出ないが、
     そのぶん文字が見えないところで切れる（実測で発生）。SPでは折り返させる */
  .tbd{white-space:normal;display:inline;margin-left:.3em}
}

/* ══ 働く人の声 ══
   このTOPには写真の使い方が違う3つのセクションが並ぶ。骨格が重ならないよう役割を分けている。
     事業ダイジェスト … 写真の全面に文字を重ねる（紺・2枚）
     募集職種         … 白い箱の中で、写真の下にテキストを置く（2枚）
     声（ここ）       … 正方形に切った顔を隙間なく3枚並べ、一続きの帯にする
   顔が横一列に並ぶこと自体がこのセクションの合図になるので、上2つと取り違えようがない。
   全幅には飛び出さずコンテナ内に収め、地色は明るいまま、カードだけ紺にしている */
.voices{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* gap:0 で3枚を接合する。離すと「帯」ではなく普通のカード並びに戻る */
  gap:0;margin-top:var(--space-lg);
  /* グラデは帯ぜんぶで1枚ぶん。カードごとに当てると継ぎ目で3回繰り返して段が見える。
     3人を等価に見せる面なので、方向つきではなく左右対称のほうを使う */
  background:var(--grad-navy-even);
}
/* 3枚の高さを揃えたうえで、引用の行数が違っても役職とリンクの位置を下端に合わせる。
   .voice-body に height:100% を書くと兄弟の写真ぶんだけ縦に溢れて中身が枠の外に出る。flex:1 が正しい */
/* 地色は .voices 側のグラデに任せる */
.voice{display:flex;flex-direction:column;background:transparent}
.voice-face{aspect-ratio:1;overflow:clip}
.voice-face img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.voice:hover .voice-face img{transform:scale(1.05)}
.voice-body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1.4rem,2.6vw,2.2rem);color:var(--color-white);
}
.voice-quote{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-lg);line-height:1.8;letter-spacing:.04em;
  /* 引用の下に余りを逃がして、役職とリンクを3枚とも下端で揃える */
  margin-bottom:auto;
  /* 鉤括弧ぶんの空きを詰めて左端を揃える（1行目にだけ効く） */
  text-indent:-.5em;
}
.voice-quote::before{content:"「"}
.voice-quote::after{content:"」"}
/* 「WAREHOUSE ／ 倉庫作業員（クレーン担当）」は1行に収まらず1枚目だけ折り返して
   3枚の高さがずれた。字間を詰めても足りないので、英字ラベルと職種名を最初から2段に分けている */
.voice-role{
  margin-top:1.2rem;
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;
  color:var(--color-white-soft);line-height:1.7;
}
.voice-role .en{
  display:block;color:var(--color-accent-bright);letter-spacing:.18em;margin-bottom:.1em;
}
.voice-more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.1rem;
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:700;
  color:var(--color-accent-bright);
}
.voice-more .arrow{transition:translate var(--dur-fast) var(--ease-out)}
.voice:hover .voice-more .arrow{translate:4px 0}
@media (max-width:900px){
  /* 2列に割ると3枚目が余って帯に見えなくなる。縦に積み、写真は横長に切り替える。
     16:9まで浅くするとヘルメットの上が切れる顔が出るので4:3で止める */
  .voices{grid-template-columns:1fr}
  .voice-face{aspect-ratio:4/3}
}

/* ══ インタビュー記事（interview.html） ══ */
/* .dummy-banner は 2026-08-03 に削除（HTML側のブロックごと撤去） */
.iv{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
.iv + .iv{margin-top:var(--band);padding-top:var(--band);border-top:1px solid var(--color-line)}
.iv-photo{overflow:clip;position:sticky;top:6rem}
.iv-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.iv-role{
  font-family:var(--font-mono);font-size:var(--text-cap,.875rem);letter-spacing:.16em;
  color:var(--color-accent-deep);line-height:1.9;
}
.iv-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.55;letter-spacing:.04em;
  margin:.6rem 0 .8rem;
}
.iv-meta{
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-ink-soft);
  padding-bottom:var(--space-md);border-bottom:1px solid var(--color-line);
}
.iv-body h3{
  font-family:var(--font-sans);font-weight:700;font-size:var(--text-md);
  letter-spacing:.04em;line-height:1.8;
  margin:var(--space-lg) 0 .5rem;color:var(--color-navy);
}
.iv-body h3::before{
  content:"";display:inline-block;width:1.4rem;height:2px;
  background:var(--color-accent);vertical-align:.35em;margin-right:.7rem;
}
.iv-body > p{font-size:var(--text-prose,1rem);line-height:2.0;color:var(--color-ink)}
@media (max-width:960px){
  .iv{grid-template-columns:1fr}
  .iv-photo{position:static}
  .iv-photo img{aspect-ratio:3/2}
}

/* 実動画の埋め込み。プレースホルダ(.video-ph)と同じ器のサイズに揃える */
.video-embed{
  position:relative;max-width:880px;margin:var(--space-lg) auto 0;overflow:clip;
  border:var(--rule-hair);background:var(--color-dark);
  aspect-ratio:16/9;
}
.video-embed video{display:block;width:100%;height:100%;object-fit:cover}
/* 再生前に被せる操作面。ネイティブUIだけだとブラウザ差で
   中央の再生ボタンが出たり出なかったりするため、こちらで用意する */
/* 再生前の見た目（暗がりと文字）。★操作は一切受け取らない。
   以前は操作面が動画を覆っており、再生前にシーク・音量・全画面が押せなかった。
   「下端を空ける」対処もしたが、少しでも重なると同じ問題が再発するため、
   装飾（veil）と操作（button）を分離し、押せる領域を中央の丸だけに限定した */
.video-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, oklch(14% 0.03 262 / .25) 0%, oklch(14% 0.03 262 / .5) 100%);
  transition:opacity var(--dur-mid) var(--ease-out);
}
.video-veil.is-hidden{opacity:0}

/* 押せるのはこの丸だけ。他はすべてネイティブUIに素通しする */
.video-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  width:5.2rem;height:5.2rem;padding:0;
  display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:var(--color-white);
  transition:opacity var(--dur-mid) var(--ease-out);
}
.video-play.is-hidden{opacity:0;pointer-events:none}
.video-play .vp-ico{
  width:4.4rem;height:4.4rem;border-radius:50%;
  background:var(--color-accent);
  display:grid;place-items:center;
  transition:transform var(--dur-mid) var(--ease-out);
}
/* 三角は borderで作る（画像を増やさない） */
.video-play .vp-ico::before{
  content:"";display:block;
  border-style:solid;border-width:.7rem 0 .7rem 1.15rem;
  border-color:transparent transparent transparent var(--color-white);
  margin-left:.25rem;
}
.video-play:hover .vp-ico{transform:scale(1.08)}
/* 文字はポスターの絵柄と重なると読めないので上端に置く。
   下端はネイティブのコントロールバーが来るので使わない */
.video-veil .vp-txt{
  position:absolute;left:0;right:0;top:0;
  padding:1.2rem;
  background:linear-gradient(180deg, oklch(14% 0.03 262 / .8) 0%, oklch(14% 0.03 262 / 0) 100%);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-md);letter-spacing:.06em;line-height:1.6;
  text-align:center;color:var(--color-white);
}
.video-veil .vp-txt small{
  display:block;
  font-family:var(--font-mono);font-weight:400;
  font-size:var(--text-cap,.875rem);letter-spacing:.14em;
  color:var(--color-white-soft);margin-top:.35rem;
}

.video-ph{
  position:relative;max-width:880px;margin:var(--space-lg) auto 0;overflow:clip;
  border:var(--rule-hair);
}
.video-ph img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.8)}
.video-ph .vp-label{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--color-white);
  /* 明るいカット（クレーン・倉庫）だとbrightness(.7)だけでは白文字が沈むため、
     中央に向けて暗さを足す。写真全体は暗くしない */
  background:radial-gradient(ellipse 60% 45% at 50% 50%, oklch(14% 0.03 262 / .62) 0%, oklch(14% 0.03 262 / 0) 100%);
}
.video-ph .vp-label .t{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:.06em}
.video-ph .vp-label .s{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;margin-top:.5rem;color:var(--color-white-soft)}
/* フル幅変種は基底の後に置く（カスケード順で負けないように） */
.video-ph--full{max-width:none;margin:var(--space-lg) 0 0;border-left:0;border-right:0}
.video-ph--full img{aspect-ratio:21/9}

@media (max-width:900px){
  .vision{grid-template-columns:1fr;gap:var(--space-lg)}
}
@media (max-width:768px){
  .hero-title{font-size:clamp(1.35rem,7vw,1.9rem);line-height:1.55}
  .hero-lead{font-size:1rem}
  .scroll-cue{display:none}
}

/* ══ スクロール連動フェードイン（JS有効時のみ隠す＝no-JSフォールバック） ══ */
.js .fx{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.js .fx.is-in{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════
   下層ページの骨格（2026-08-03追加）
   下層が「見出し＋テキスト＋テーブル」の一本調子で、TOPだけ作り込まれて見えていた。
   TOPで使っている型（全幅50:50・写真の上に文字を重ねる・階段）を下層にも配り、
   ページごとに骨格が変わるようにする。新しい装飾は足していない＝TOPの語彙の再配分。
   ══════════════════════════════════════════════════════════════ */

/* 下層ページヘッダーの肩に、ロゴブルーの短い罫を1本入れる。
   全下層で共通に出るので「同じサイトの続き」の合図になり、
   ロゴ色（#0080C0）をサイト内で露出させる役目も兼ねる（面ではなく線で使う） */
.page-hero{position:relative}
.page-hero::after{
  content:"";position:absolute;left:0;bottom:0;z-index:3;
  width:clamp(4.5rem,13vw,11rem);height:3px;background:var(--color-accent);
}

/* ── 全幅50:50（写真×読み物） ──
   TOPの「想い」で使っている型を、business の事業紹介・company の代表挨拶にも配る。
   左右反転（--rev）と紺ボディ（--dark）で、同じページ内でも繰り返しに見えないようにする */
.section--flush{padding-left:0;padding-right:0}
/* 全幅の帯が続くときは、あいだの余白を殺して帯を積む。
   上下に6remずつ入ると帯が2枚とも宙に浮いて見え、続きものに読めない */
.section--flush + .section--flush{padding-top:0}
.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:0;align-items:stretch;
  min-height:clamp(26rem,44vw,38rem);
}
.split-img{position:relative;overflow:clip;background:var(--color-dark)}
.split-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.split:hover .split-img img{transform:scale(1.03)}
/* 写真側に通し番号を落とす。番号があること自体が「並んでいる」合図になる。
   白抜き文字だと明るいカット（天井クレーンの倉庫など）で完全に消えるため、
   TOPの職種カードと同じ紺のチップにしている */
.split-num{
  position:absolute;left:0;top:clamp(1.5rem,3vw,2.6rem);z-index:2;
  background:var(--color-navy-solid);color:var(--color-white);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.2em;
  padding:.5em 1.2em .5em clamp(1.2rem,2.5vw,2.2rem);
}
.split-body{
  padding:clamp(2.5rem,5vw,5rem) clamp(1.5rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--color-white);
}
.split-body-inner{max-width:34em}
/* 反転：写真を右へ。DOM順は写真→本文のまま（読み上げ順を変えない）。
   列幅も一緒に入れ替える。入れ替えないと本文が狭いほうの列（5fr）に入り、
   同じ型なのに反転したほうだけ本文が細くなる */
.split--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.split--rev .split-img{order:2}
/* 紺ボディ：主役の1本にだけ当てる。同じページで2本使わない */
.split--dark .split-body{background:var(--color-navy-solid);color:var(--color-white)}
/* 紺ボディの本文色。下の `.split-body > .split-body-inner > p` と詳細度が同じ(0,2,1)で、
   後勝ちで --color-ink-soft（暗いグレー）が当たっていた＝紺の上に 2.09:1 の灰色文字。
   子結合子を足して詳細度で勝たせる（white-soft で実測 7.99:1） */
.split--dark .split-body > .split-body-inner > p{color:var(--color-white-soft)}
.split--dark .sec-kicker{color:var(--color-accent-bright)}
.split--dark .split-title{color:var(--color-white)}
.split--dark .split-hook{color:var(--color-accent-bright)}
.split--dark .card-link{color:var(--color-accent-bright)}
.split-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,3.1vw,2.8rem);line-height:1.45;letter-spacing:.04em;
  color:var(--color-ink);
}
/* 訴求フレーズは見出しの下に、アクセント罫つきの1行で置く
   （TOPの事業ダイジェスト .card--photo-hero .card-hook と同じ組み方に揃えた） */
.split-hook{
  display:flex;align-items:center;gap:.8rem;margin-top:.7rem;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.7;letter-spacing:.06em;
  color:var(--color-accent-deep);
}
.split-hook::before{content:"";flex:none;width:2rem;height:2px;background:currentColor}
.split-body > .split-body-inner > p{font-size:var(--text-md);color:var(--color-ink-soft);line-height:2}
.split-body-inner > p + p{margin-top:1em}
.split-body-inner .sec-kicker + .split-title{margin-top:.2rem}
.split-body-inner .split-hook + p{margin-top:var(--space-md)}
.split-body-inner .card-link{margin-top:var(--space-md);display:inline-block}
@media (max-width:900px){
  .split{grid-template-columns:1fr;min-height:0}
  .split-img{min-height:clamp(15rem,52vw,22rem)}
  .split-img img{position:relative}
  .split--rev .split-img{order:0}
}

/* ── 職種バンド（recruit の各職種の頭） ──
   職種セクションが「見出し＋テキスト＋表」だけで、どれも同じ見た目になっていた。
   頭に現場写真の帯を置いて、職種ごとに絵が変わるようにする */
.job-band{
  position:relative;overflow:clip;
  min-height:clamp(11rem,21vw,15.5rem);
  display:flex;align-items:flex-end;
  margin-bottom:var(--space-lg);
  background:var(--color-dark);
}
.job-band > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.72) saturate(.96);
}
.job-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, oklch(19% 0.04 262 / .76) 0%, oklch(21% 0.05 262 / .48) 52%, oklch(25% 0.055 262 / .16) 100%);
}
.job-band-inner{
  position:relative;z-index:2;width:100%;
  padding:clamp(1.5rem,3vw,2.6rem);color:var(--color-white);
}
.job-band .num{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.22em;
  color:var(--color-accent-bright);
}
.job-band h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.75rem,3.3vw,2.7rem);letter-spacing:.05em;line-height:1.4;
  margin-top:.45rem;
}
.job-band .lead{
  margin-top:.8rem;max-width:44em;
  color:var(--color-white-soft);font-size:var(--text-md);
}
/* 見出しの中に置く注記バッジは、紺の上でも読める配色に */
.job-band .tbd-badge{background:oklch(90% 0.09 88);border-color:oklch(70% 0.14 72)}

/* 職種セクション内の小見出し（旧：インラインstyleでベタ書きしていたもの） */
.job-h3{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
  letter-spacing:.04em;line-height:1.6;margin-bottom:.6rem;
}
.job-h3 + p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.job-h3:not(:first-child){margin-top:1.4rem}

/* ── キャリアパス（階段） ──
   差別化の核（未経験→玉掛け→クレーン）をTOPにも置く。
   TOPには既に「番号＋横並び」（数字セク）と「1本線のタイムライン」（見学の流れ）があるので、
   3つ目の骨格として"右上に登る階段"にした。到達点だけ紺＝頂点が目で分かる */
/* align-items は既定の stretch のまま使う。end にすると各カードが内容の高さで
   下端に揃うだけになり、margin-top を入れても段差にならない（実際そうなっていた）。
   stretch なら margin-top のぶん上端が下がり、下端は3枚とも揃う＝段差が出て、
   かつ月給（margin-top:auto）の位置も横一線で揃う */
.path{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,1.6vw,1.25rem);
}
.path-step{
  background:oklch(100% 0 0);border:var(--rule-hair);border-top:3px solid var(--color-accent);
  padding:clamp(1.4rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:.5rem;
}
.path-step:nth-child(1){margin-top:clamp(2rem,4.5vw,4rem)}
.path-step:nth-child(2){margin-top:clamp(1rem,2.2vw,2rem)}
.path-step:nth-child(3){
  margin-top:0;border:0;
  background:var(--grad-navy);color:var(--color-white);
  box-shadow:0 26px 54px -32px oklch(30% 0.07 262 / .55);
}
.path-step .en{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.2em;color:var(--color-accent-deep);
}
.path-step:nth-child(3) .en{color:var(--color-accent-bright)}
.path-step h3{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
  letter-spacing:.04em;line-height:1.6;
}
.path-step p{font-size:var(--text-sm);color:var(--color-ink-soft)}
.path-step:nth-child(3) p{color:var(--color-white-soft)}
/* 月給は「段が上がると増える」ことが一目で分かる位置＝各段の下端に固定 */
.path-pay{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--color-line);
  font-family:var(--font-sans);font-weight:700;font-size:var(--text-md);
  color:var(--color-navy);letter-spacing:.02em;
}
.path-pay small{font-family:var(--font-sans);font-weight:500;font-size:.8em;color:var(--color-ink-soft);margin-right:.4em}
.path-step:nth-child(3) .path-pay{border-top-color:oklch(80% 0.02 255 / .3);color:var(--color-white)}
.path-step:nth-child(3) .path-pay small{color:var(--color-white-soft)}
@media (max-width:768px){
  .path{grid-template-columns:1fr}
  .path-step:nth-child(1),.path-step:nth-child(2){margin-top:0}
}

/* ── 選考フロー（見学の流れの続き） ──
   見学のあと何が起きるかが分からないと、見学の申し込み自体をためらわせる。
   ただし主役はあくまで見学（上のタイムライン）なので、こちらは1行の帯に畳んで従属させる。
   同じ番号つきの箱を2つ並べると、どちらが本線か分からなくなる */
.flow{
  margin-top:var(--space-xl);
  padding:var(--space-md) clamp(1.2rem,3vw,2rem);
  background:var(--color-paper-2);border-left:3px solid var(--color-navy);
}
.flow-label{
  font-family:var(--font-sans);font-weight:700;font-size:var(--text-sm);
  color:var(--color-navy);margin-bottom:.7rem;
}
.flow-list{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;
  counter-reset:flow;
}
.flow-list li{
  display:flex;align-items:center;gap:.6rem;counter-increment:flow;
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-ink);
}
.flow-list li::before{
  content:counter(flow);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent-deep);
}
.flow-list li:not(:last-child)::after{
  content:"→";margin-left:.4rem;color:var(--color-ink-soft);
}
.flow .note-text{margin-top:.8rem}

/* ── 見学の実務情報（contact） ── */
.visit-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:2px solid var(--color-navy);
}
.visit-facts div{padding:var(--space-md) var(--space-md) var(--space-lg)}
.visit-facts div + div{border-left:1px solid var(--color-line)}
.visit-facts .lb{
  display:block;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.18em;color:var(--color-accent-deep);margin-bottom:.5rem;
}
.visit-facts h3{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
  letter-spacing:.04em;margin-bottom:.4rem;
}
.visit-facts p{font-size:var(--text-sm);color:var(--color-ink-soft)}
@media (max-width:768px){
  .visit-facts{grid-template-columns:1fr}
  .visit-facts div + div{border-left:0;border-top:1px solid var(--color-line)}
}
/* フォームは1200pxの版面の左端に貼り付いていた（640px固定＋左寄せ）。
   フォームは中央に置くのが定石なので版面ごと中央へ寄せる */
.form--center{margin-inline:auto;max-width:44rem}

/* ── 電話導線（contact の主導線） ── */
.tel-block{text-align:center}
.tel-block .sec-kicker{justify-content:center}
.tel-num{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-family:var(--font-sans);font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.1rem);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--color-navy);
  border-bottom:2px solid var(--color-accent);padding-bottom:.15em;
}
.tel-num small{font-size:max(.875rem,.32em);font-weight:500;color:var(--color-ink-soft);letter-spacing:.1em}

/* ── インタビュー名簿（interview の冒頭・記事へのジャンプ台） ── */
/* 罫線は grid の 1px gap ＋ 親の背景色で描く。
   セル数が4→5に増えても、折り返しても、nth-child の指定なしで縦横の線が揃う */
.iv-index{
  display:flex;flex-wrap:wrap;
  gap:1px;background:var(--color-line);
  border-top:2px solid var(--color-navy);border-bottom:1px solid var(--color-line);
}
.iv-index a{
  flex:1 1 13rem;
  display:flex;gap:var(--space-sm);align-items:center;
  padding:var(--space-md) var(--space-sm);
  background:var(--color-paper);
  transition:background var(--dur-fast) var(--ease-out);
}
.iv-index a:hover{background:var(--color-paper-2)}
.iv-index .f{
  flex:none;width:3.6rem;height:3.6rem;border-radius:50%;overflow:clip;
  background:var(--color-paper-2);
}
.iv-index .f img{width:100%;height:100%;object-fit:cover}
.iv-index .r{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  color:var(--color-accent-deep);display:block;
}
.iv-index .n{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  line-height:1.7;letter-spacing:.03em;display:block;margin-top:.2rem;
}
/* 列数と罫線は flex-wrap ＋ 1px gap に任せているので、
   幅ごとの grid-template-columns と nth-child の罫線指定はすべて不要になった（2026-08-07）。
   SPは1列にしたいので、そこだけ flex-basis を100%に倒す */
@media (max-width:480px){
  .iv-index a{flex-basis:100%}
}

/* ── 一言集（interview の末尾・5人全員の「応募を迷っている方へ」） ──
   iv-index と同じく 1px gap ＋ 親の背景色で罫線を描く。
   回答の長さが人によって3倍ちがうので、高さは揃えず、名前だけを margin-top:auto で下端に揃える */
.iv-quotes{
  display:flex;flex-wrap:wrap;
  gap:1px;background:var(--color-line);
  border-top:2px solid var(--color-navy);border-bottom:1px solid var(--color-line);
  margin-top:var(--space-lg);
}
/* grid ではなく flex。5件は奇数なので grid だと折り返した最終行に空きマスができ、
   罫線用の親の背景色がそのまま帯として見えてしまう。
   flex-grow で最終行のカードを伸ばして、必ず行を埋め切る */
.iv-quotes li{
  flex:1 1 13rem;
  display:flex;flex-direction:column;gap:var(--space-md);
  background:var(--color-paper);padding:var(--space-lg) var(--space-sm);
}
.iv-quotes .q{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-sm);line-height:1.9;letter-spacing:.03em;
  color:var(--color-ink);
}
.iv-quotes .a{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;
  color:var(--color-accent-deep);margin-top:auto;
}

/* ── 拠点マップ（company） ── */
.map-embed{
  position:relative;width:100%;aspect-ratio:16/9;
  border:var(--rule-hair);background:var(--color-paper-2);overflow:clip;
}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:768px){.map-embed{aspect-ratio:4/3}}

/* ── フッターのブランド（社名テキスト→ロゴ） ── */
.footer-brand{display:inline-block;margin-bottom:.85rem}
.footer-logo{height:2.1rem;width:auto;max-width:min(60vw,15rem);object-fit:contain;display:block}
@media (max-width:768px){.footer-logo{height:1.8rem}}

/* ══ モック注記 ══ */
.mock-note{
  padding:var(--space-md) clamp(1.25rem,5vw,4rem);
  border-top:var(--rule-hair);
  font-size:var(--text-xs);color:var(--color-ink-soft);
  font-family:var(--font-mono);letter-spacing:.04em;background:var(--color-paper);
}

/* 非表示ユーティリティ（縮退設計用：LINE枠・動画枠など） */
.u-off{display:none !important}

/* ══ レスポンシブ ══ */
@media (max-width:900px){
  .grid-4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 台帳スタイルの罫線を2列折返しに追従 */
  .stat + .stat{border-left:0}
  .stat:nth-child(even){border-left:1px solid var(--color-line)}
  .stat:nth-child(n+3){border-top:1px solid var(--color-line)}
  .footer-info-inner{grid-template-columns:1fr}
  .footer-nav{justify-content:flex-start}
}
/* ハンバーガーへの切替は 768px → 1024px（2026-08-03）。
   ナビ項目が5→6に増えた（働く人の声を昇格）ことで、タブレット幅では
   ロゴ・6項目・CTAボタンが1行に収まらず、ナビがロゴに重なって2行に折れていた（実測785pxで発生）。
   追従CTAはヘッダーのCTAが隠れたぶんの受け皿なので、同じ幅から出す */
@media (max-width:1080px){
  .gnav{display:none}
  .menu-btn{display:block}
  .float-cta{display:grid}
}
/* 定義テーブルの1カラム化も 768px → 900px。
   .grid-2（左＝説明／右＝募集要項テーブル）が2列のまま残る785px前後で、
   見出し11emを引いた本文列が約146pxしかなく、給与欄が1行4〜5文字に潰れていた */
@media (max-width:900px){
  .info-table th{width:auto;display:block;border-bottom:none;padding-bottom:0}
  .info-table td{display:block;padding-top:.3em}
}
@media (max-width:768px){
  .grid-2,.grid-3,.env-list{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-1.35rem;translate:-50% 0}
  .step:last-child::after{content:none}
  /* 追従CTAが実際に表示されるのはSPだけなので、下限14pxが効くのはこちらの値。
     4文字×14px＝56px が2行入る直径にしている */
  .float-cta{width:5.75rem;height:5.75rem;font-size:.875rem}
  body{line-height:1.9}
  /* .info-table の1カラム化は上の 900px ブロックへ移した（重複排除） */
}
@media (max-width:480px){
  .grid-4,.stats{grid-template-columns:1fr}
  .stat:nth-child(even){border-left:0}
  .stat + .stat{border-top:1px solid var(--color-line)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:150ms !important}
  .fx{opacity:1;transform:none;transition:none}
  /* 見学の流れ：時間差の登場と線の描画を止め、最初から完成形で見せる */
  .js .steps--line .step{opacity:1 !important;transform:none !important;transition:none !important}
  .js .steps--line .step-rail::after{transform:none !important;transition:none !important}
  /* 数字のせり上がりと『財産』の下線も止め、最初から完成形で見せる */
  .js .stats .num{transform:none !important;opacity:1 !important;transition:none !important}
  .vision-quote em::after{transform:scaleX(1) !important;transition:none !important}
  /* ヒーローの立ち上がりも止める。is-loaded が付く前に見えている必要があるので
     transition ではなく初期値そのものを打ち消す */
  .js .hero-inner > *,.js .hero-dots,.js .scroll-cue{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  /* オープニングの文字も動かさない（JS側でそもそも再生しないが、保険で打ち消す）。
     案Aは blur も使うので filter も戻す */
  .op-scene p{filter:none !important;transform:none !important;transition:opacity 150ms !important}
}