:root{
  --color-dark: oklch(13.5% 0.045 244);
  --color-dark-2: oklch(17% 0.05 244);
  --color-navy: oklch(38% 0.10 241);
  --color-navy-deep: oklch(32% 0.09 240);
  /* ロゴブルー（#4A9AD5＝oklch 66% 0.118 243）に寄せられる上限がここ。
     白文字のAAで頭打ちになる＝54%で 5.00:1、56%で 4.60:1（実質の限界）、
     66%では 3.07:1 で不合格。白文字を諦めない限りこれ以上は明るくできない */
  --color-navy-solid: oklch(54% 0.118 243);
  /* 紺の面が広いと単調に見えるため、明度だけを動かしたグラデを当てる。色相・彩度は動かさない（動かすと安っぽくなり、装飾が実写より前に出るため）。使うのは紺の「カード・ブロック」だけ（セクション全体の地には使わない）。紺の面は幅広・高さの浅い帯なので、階調は横方向に流す（方向つき＝単独ブロック用）。 */
  --grad-navy: linear-gradient(105deg,
    oklch(54% 0.11 243) 0%,
    oklch(48% 0.10 242) 45%,
    oklch(40% 0.08 241) 100%);
  /* 左右対称（中央が明るい）。複数人を等価に並べる面用＝声セクの帯。
     方向つきを当てると右端の1人だけパネルが沈み、3人のあいだに明暗の序列ができる */
  --grad-navy-even: linear-gradient(100deg,
    oklch(44% 0.09 242) 0%,
    oklch(54% 0.11 243) 50%,
    oklch(44% 0.09 242) 100%);
  --color-paper: oklch(98% 0.003 240);
  --color-paper-2: oklch(94% 0.012 244);
  --color-ink: oklch(21% 0.05 244);
  --color-ink-soft: oklch(41% 0.035 246);
  --color-white: oklch(97% 0.005 250);
  /* 暗い面の上の本文用。地の面の明度が上がると 4.5:1 を割るため、追随して上げる必要がある。暗ヒーロー（13.5%）の上では明るくなるだけで不利にならない。 */
  --color-white-soft: oklch(97% 0.018 246);
  --color-accent: oklch(66% 0.118 243);       /* ロゴブルー #4A9AD5 実測 */
  --color-accent-deep: oklch(46% 0.115 243);
  /* 暗い面／青面の上のキッカー・数字用。地の明度が上がると追随して上げる必要がある。 */
  --color-accent-bright: oklch(84% 0.09 240);
  /* 塗りボタン専用。地をロゴブルー系にした時点で青いボタンは目立たない（青のまま白文字AAを保てる明度は50%前後が限界で、地との差は最大1.9:1にしかならない）。色相を変えるしかなく、青の補色側のオレンジを採用（ヒーロー写真のクレーンフック・安全帯の色とも合う）。文字は白ではなく濃紺（--color-ink）＝白だと2.4:1でAA不合格、濃紺なら6.79:1。青は「リンクの色」、オレンジは「押す物」として役割を分ける。 */
  --color-accent-btn: oklch(72% 0.175 58);
  --color-accent-btn-deep: oklch(64% 0.18 52);   /* ホバー。濃紺文字 4.95:1 */
  --color-on-btn: oklch(21% 0.05 244);
  --color-line: oklch(84% 0.016 244);
  --color-line-dark: oklch(30% 0.04 244);
  --color-focus: oklch(50% 0.16 240);
  /* ヒーローのスクリム専用。彩度0.03≒ほぼ黒だが、写真側が暖色に寄っている（平均RGBで青が赤より8〜22%少ない）ため、覆いのほうを紺に寄せている。写真自体を青くすると人物の肌が冷たくなるため、触るのは覆いだけにする。 */
  --color-scrim: oklch(15% 0.07 244 / .52);

  /* 書体：和文タイポ規定 */
  --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);
  /* 値は PC(1280以上) ← SP(375) の順。ヘッドコピー系（display/xxl/xl）はこの規約の対象外（据え置き）。 */
  --text-lg: clamp(1.15rem, .18vw + 1.11rem, 1.25rem);   /* 20px ← 18.4px（mdが18pxになるため、lgはそれより上の値にしている） */
  --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定義を必ず維持すること（--band…インタビュー記事の区切り余白、--text-cap…注記・キャプションの級数、--text-prose…記事本文の文字サイズ）。 */
  --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 242 / .55) 0%, oklch(14% 0.03 242 / 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 244 / .5);
}
.site-header--overlay.is-stuck::before{opacity:0}
.brand{display:flex;align-items:center;gap:.7rem}
/* 支給ロゴ（透過PNG）は原寸260×44しかないため、高解像度画面で滲まないよう表示幅は130px前後に抑えている（実質2倍相当）。 */
/* 原寸は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-logo--color{display:none}
.site-header--overlay:not(.is-stuck) .brand-logo--white{display:none}
.site-header--overlay:not(.is-stuck) .brand-logo--color{display:block}
.site-header--overlay:not(.is-stuck)::after{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 5rem);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, oklch(100% 0 0 / .55) 0%, oklch(100% 0 0 / .28) 45%, oklch(100% 0 0 / .08) 75%, oklch(100% 0 0 / 0) 100%);
}
@media (max-width:768px){
  .site-header--overlay:not(.is-stuck)::after{height:calc(100% + 3rem)}
}
.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}
/* 文字サイズ（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)}
/* サイト内のCTAは全部この1色に統一する（役割で色を分ける＝青はリンク、オレンジは押す物）。 */
.gnav a.nav-cta{
  background:var(--color-accent-btn);color:var(--color-on-btn);
  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-btn-deep);color:var(--color-on-btn)}
.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 242 / .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-on-btn);
  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{
  /* 明端は var(--color-navy-solid) に追従して自動で変わるため、暗端は手動の固定値。据え置くと下層ヒーローの上下差だけ広がって印象が変わるので、明端の変更時は暗端も合わせて調整する。 */
  background:linear-gradient(160deg, oklch(38% 0.085 242) 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 242 / 0) 30%, oklch(16% 0.04 242 / .46) 65%, oklch(15% 0.04 242 / .74) 100%),
    linear-gradient(105deg, oklch(17% 0.045 242 / .70) 0%, oklch(19% 0.05 242 / .52) 42%, oklch(23% 0.055 242 / .26) 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(17% 0.045 242 / .84) 0%, oklch(19% 0.05 242 / .74) 60%, oklch(23% 0.055 242 / .56) 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{
  --hero-img:url(../img/photo/DSC01655-1920.webp);
  --hero-img-sp:url(../img/photo/DSC01655-800.webp);
}
.page-hero--recruit{
  --hero-img:url(../img/photo/DSC01494-1920.webp);
  --hero-img-sp:url(../img/photo/DSC01494-800.webp);
}
.page-hero--interview{
  --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-on-btn)}
.btn-primary:hover{background:var(--color-accent-btn-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 244 / .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;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  /* 上端に影を落として「本文の上に浮いている」ことをはっきりさせる。
     影がないと、バーに隠れた文字が欠落したように見える */
  box-shadow:0 -6px 22px -10px oklch(20% 0.05 250 / .55);
  /* iOS Safari のホームバーぶんを足す。足さないとタップ領域が指の届かない位置に入る */
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--color-accent-btn);
}
.float-cta-item{
  display:grid;place-items:center;text-align:center;
  /* 共通規約の下限14px。バーは高さが限られるので1行に収める */
  font-family:var(--font-sans);font-size:.875rem;font-weight:700;line-height:1.4;
  padding:1.05em .5em;
  color:var(--color-white);
  transition:background var(--dur-fast) var(--ease-out);
}
/* 従＝電話＝濃紺。主（オレンジ）と色相で割れるが、彩度・明度とも主が上なので主従は保てる。左枠は「お問い合わせ」ではなく電話にしている＝お問い合わせだと主枠と行き先が重複するうえ、SPで最も押しやすい位置に発信導線がなくなるため。 */
.float-cta-item--tel{
  /* 地色を青系のnavy-solidに寄せたため、tel枠を同色にすると地に溶ける。1段暗いnavy（32%）に落として主従・見分けを保っている。 */
  background:var(--color-navy);
  /* 2枠の境目。同系色どうしなので細い明線で割る */
  box-shadow:inset -1px 0 0 oklch(100% 0 0 / .18);
}
.float-cta-item--main{background:var(--color-accent-btn);color:var(--color-on-btn)}
.float-cta-item--tel:hover{background:var(--color-navy-deep)}
/* アイコンを左に置き、右側に「電話する」＋番号を2段で積む。
   番号を出すのは、発信できること自体をバーの上で伝えるため（タップすれば発信なので
   機能上は不要だが、番号が見えているほうが「電話してよい会社」と読める） */
.float-cta-item--tel{
  grid-template-columns:auto auto;
  grid-template-areas:"ico label" "ico num";
  align-items:center;justify-content:center;
  column-gap:.55em;row-gap:.1em;
  padding:.55em .5em;
}
.float-cta-item--tel .tel-ico{grid-area:ico;width:22px;height:22px}
.float-cta-tel-label{grid-area:label;justify-self:start;font-size:.875rem;line-height:1.3}
.float-cta-tel-num{
  grid-area:num;justify-self:start;
  font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;line-height:1.3;
}
.float-cta-item--main:hover{background:var(--color-accent-btn-deep)}
/* バーは画面下端に居座るので、ページ末尾のコンテンツ（フッターのコピーライト）が
   永久に隠れる。バーが出る幅でだけ、その高さぶんの余白を body の下に足す。
   ※高さは padding 1.05em + 行1.4em ≒ 3.4em＝約48px。安全側に56pxを取る */
@media (max-width:1080px){
  body:has(.float-cta){padding-bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px))}
}
/* 追従CTAはSPだけに出す。
   PCはヘッダーが常時表示で「職場見学を申し込む」を持っており、同じ行き先の
   常設CTAが2つあると視線が割れる（押される数は増えない）。加えてPCでは
   本文の右下に重なる不具合の原因にもなっていた。
   SPはナビがハンバーガーに畳まれてヘッダーCTAが隠れるため、ここが唯一の常設導線＝残す */
.float-cta{display:none}
@media (max-width:768px){
  .float-cta{display:grid}
}
/* 上の768pxと下の1080pxで display:grid の指定が2回出るのは意図的（1080px側がハンバーガー切替と対になっているため）。片方だけ変更すると不整合になるので、揃えて直すこと。 */

/* ══ カード・グリッド ══ */
.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}
/* 矢印は .btn・.voice-more と同じ動き。カード内はカードのどこにホバーしても動かす */
.card-link{transition:color var(--dur-fast) var(--ease-out)}
.card-link .arrow{display:inline-block;transition:translate var(--dur-fast) var(--ease-out)}
.card-link:hover,.card-link:focus-visible,.card:hover .card-link{color:var(--color-accent)}
.card-link:hover .arrow,.card-link:focus-visible .arrow,.card:hover .card-link .arrow{translate:4px 0}
.card-link:hover .arrow--out,.card-link:focus-visible .arrow--out,.card:hover .card-link .arrow--out{translate:3px -3px}

/* 数字で見る */
.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)}
.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の項目だけ動かず浮いてしまうため、この形にしている。 */
.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の数字セク） ──
   recruit.html は素の .stats を使い続けるため、TOP用の見た目はこちらの修飾クラスで足している。
   .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}

/* 数字は紺（最大コントラスト）にし、単位だけアクセント色に回している＝他所とは数字・単位の色の役割を逆にしている。主役（95）に対して数字が大きすぎないよう、比率は約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 242 / .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-deep);
  border:1px solid var(--color-accent-deep);padding:.35em 1.1em;
}

/* ══ フォーム ══ */
.form{display:grid;gap:var(--space-md);max-width:640px}
.form-row{display:grid;gap:.4rem}
/* CF7はプライバシーポリシー未同意のあいだ送信ボタンをdisabledにする。
   既定では見た目が変わらず「押せるのに反応しない」ボタンになるため、明示的に落とす */
.wpcf7-submit:disabled{opacity:.45;cursor:not-allowed}
.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}

/* ══ フッター ══ */
.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);
}

/* ══ トップ専用：オープニング演出 ══ */
/* オープニング動画。再生・スキップ・初回だけの判定は site.js */
.opener{
  position:fixed;inset:0;z-index:60;
  background:var(--color-dark);
  display:grid;place-items:center;
  transition:opacity 600ms var(--ease-in-out);
}
/* 終わったオープニングもSPメニューと同じ理由で visibility まで落とす
   （SKIPボタンがTabで拾える状態のまま残っていた） */
.opener.is-skip{display:none}
.opener.is-done{
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
/* 動画は左右を切らない（焼き込みの文字を欠かさない）。余白は黒で動画の地と揃える */
.op-video{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:contain;background:#000;
}
/* z-index は .op-video（1）より上に。auto のままだと重なり順で負ける */
.op-skip,.op-sound{
  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,.op-sound:hover{color:var(--color-white);border-color:var(--color-white-soft)}
.op-skip:active,.op-sound:active{transform:translateY(1px)}
.op-sound{right:auto;left:clamp(1rem,3vw,2.5rem);font-family:var(--font-sans);letter-spacing:.1em}
.op-sound.is-on{border-color:var(--color-accent-bright);color:var(--color-accent-bright)}

/* ══ トップ専用：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層だけだと、明るい人物カットに切り替わったとき文字の当たる下半分のコントラストが不足する。 */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, oklch(17% 0.06 244 / 0) 30%, oklch(18% 0.06 244 / .38) 68%, oklch(16% 0.065 244 / .72) 100%),
    linear-gradient(200deg, oklch(20% 0.055 244 / .18) 0%, var(--color-scrim) 62%, oklch(16% 0.065 244 / .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;
}
/* ── オープニングからヒーローへの受け渡し ──
   オープニングの退場（600ms）と重ねて、キャッチ・リード・ボタンを順に立ち上げる。合図は body.is-loaded＝オープニング終了時にJSが付けるクラス（オープニングを飛ばした2回目以降も同じ合図で立ち上がる）。※.js が付くのはJSが動いているときだけ＝JS無効なら最初から見えている。 */
.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);
}
/* 文節の途中で改行させない。SPは1行に収まらない文節が出るため広い画面だけに効かせる */
@media (min-width:768px){
  .hero-lead .nb{display:inline-block}
}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
/* CTA直下の注記。KPI（職場見学の申し込み）に直結する『履歴書不要・見学だけで帰れる』を最初の画面で答える。文字は注記の下限（--text-xs）を守り、写真の上でも読めるよう hero-lead と同じ white-soft を使う。 */
.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:.75rem 1rem;margin-top:var(--space-lg);
  /* 明るい人物カットに切り替わると下端のスクリムだけでは白文字が負ける。
     帯を敷いて写真から切り離す（囲むのはリスト全体で、リンク個々には枠を付けない） */
  background:oklch(15% 0.07 244 / .55);
  padding:.85rem 1.1rem;width:fit-content;max-width:100%;
}
.hero-jobs-label{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  color:var(--color-white);background:var(--color-accent-deep);
  padding:.3em .75em;margin-right:.2rem;
}
/* 募集職種は「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);font-weight:600;letter-spacing:.06em;
  border-bottom:1px solid oklch(86% 0.02 248 / .8);
  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:1rem;
  color:oklch(86% 0.02 248 / .5);font-size:var(--text-xs);
}
.hero-jobs li{display:flex;align-items:center}
.hero-jobs-label::after{content:none}
/* SPは帯の余白と区切り幅で1行あたりの収容が減る。詰めないと4職種が3行になり、
   最下行が追従CTAバー（約49px）の裏に入って読めない */
/* SPは折り返すと区切りが行末に取り残されるため、区切りを消して間隔で分ける（各リンクに下線があるので判別できる） */
@media (max-width:768px){
  .hero-jobs{gap:.5rem .9rem;padding:.7rem .8rem}
  .hero-jobs li:not(.hero-jobs-label):not(:last-child)::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セット並べているので、これを満たせば画面が継ぎ目をまたいでも見えるのは別々の写真になる。上限を付けると細い画面でこの条件を割り込むため、上限は設けない（枚数×vw幅が必ず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 242 / .74) 55%, oklch(16% 0.04 242 / .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}
/* 訴求フレーズ（card-hook）は見出しの直下に、アクセント色の一行として独立させている。主従は事業名が上＝hookは見出しを食わない大きさに留めること。 */
.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)}
.card--photo-hero:hover .card-link,.card--photo-hero .card-link:focus-visible{color:var(--color-white)}

/* 段差（ずらし配置）の演出は環境の階段カード1箇所に限定する。多用しない。 */

/* 働く環境：読み物型（見出しを左に据え置き、右を縦に読ませる）。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 242 / .60) 0%, oklch(22% 0.05 242 / .88) 55%, oklch(18% 0.04 242 / .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(86% 0.02 248 / .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 242 / .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はカード型のまま＝順路ではなく段階の提示なので分ける）。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列に積むので、線は縦に通す。PCで『●———』が横につながって順路に見えるのと同じ効果を縦で作る。ノードと線は1本の.step-railの中に縦並びで持たせる＝容器と段で別々に配置しないので、丸め差でズレる余地が無い（PCと同じ考え方）。線の高さはtop/bottomで決めるので、段の中身の数が増えても追従する。 */
  .steps--line .step{padding-left:1.75rem}
  .steps--line .step-rail{
    position:absolute;left:0;top:0;
    /* 段の下端から行間のぶん先まで伸ばし、次の段のノードへ接続する */
    bottom:calc(var(--rail-gap) * -1);
    width:var(--node);margin-bottom:0;
    flex-direction:column;
    /* 番号（01）の高さの中心にノードを合わせる */
    padding-top:.4rem;
  }
  .step-rail::after{width:2px;height:auto;margin-right:0}
  /* 最後の段は次が無いので、線を下へ薄れさせる（ここで終わりに見せない） */
  .steps--line .step:last-child .step-rail{bottom:0}
  .steps--line .step:last-child .step-rail::after{
    background:linear-gradient(180deg,var(--color-navy) 0,var(--color-navy) 50%,transparent 100%);
  }
  /* 線は上から下へ引かれる＝PCの左→右と同じで、進む向きが目で分かる。
     transition と delay は上の定義をそのまま使い、向きだけ差し替える */
  .js .steps--line .step-rail::after{transform:scaleY(0);transform-origin:center top}
  .js .steps--line.is-in .step:nth-child(1) .step-rail::after,
  .js .steps--line.is-in .step:nth-child(2) .step-rail::after,
  .js .steps--line.is-in .step:nth-child(3) .step-rail::after{transform:scaleY(1)}
}

/* ══ 未確定項目の注記 ══
   未確定でも仮情報＋注記でサイトに載せる方針のための強調スタイル。 */
.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セクションは骨格を分けている：事業ダイジェスト＝写真全面に文字を重ねる、募集職種＝白い箱の中で写真の下にテキスト、声（ここ）＝正方形の顔を隙間なく3枚並べた帯。全幅には出さずコンテナ内に収め、カードだけ紺にしている。 */
.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） ══ */
.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 242 / .25) 0%, oklch(14% 0.03 242 / .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 242 / .8) 0%, oklch(14% 0.03 242 / 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 242 / .62) 0%, oklch(14% 0.03 242 / 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}

/* ══════════════════════════════════════════════════════════════
   下層ページの骨格
   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}
/* 帯は隙間なく積まず、.section の既定の上下余白を使う（通し番号を持たないため、隙間なく積むと2枚がただくっついて見える）。 */
.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)}
/* 写真側に通し番号は付けない＝順序に意味がなく、他ページからも参照されないため。 */
.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--dark .card-link:hover,.split--dark .card-link:focus-visible,.split--dark .card:hover .card-link{color:var(--color-white)}
.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(17% 0.045 242 / .80) 0%, oklch(19% 0.05 242 / .54) 52%, oklch(23% 0.055 242 / .24) 100%);
}
/* SPは帯の幅いっぱいに文字が乗るため、横方向のグラデだと右端（薄い側）で白文字のコントラストが不足する（明るい写真で発生）。SPだけ上→下方向に切り替えて、文字が乗る面全体を落とす。 */
@media (max-width:768px){
  .job-band::after{
    background:linear-gradient(165deg, oklch(17% 0.045 242 / .82) 0%, oklch(19% 0.05 242 / .70) 55%, oklch(23% 0.055 242 / .52) 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)}

/* 事務・管理者は募集の優先度が下。同じ帯を使い、高さと見出しを落として差をつけている。 */
.job-band--sub{min-height:clamp(7.5rem,13vw,10.5rem)}
.job-band--sub h2{font-size:clamp(1.5rem,2.6vw,2rem)}
/* 帯が低いぶん中央トリミングだと人物の顔が切れる。上寄りに寄せる */
.job-band--sub > img{object-position:center 25%}
.job-band--office > img{object-position:center 62%}
.job-band--manager > img{object-position:center 35%}

/* トップの募集職種：事務・管理者は写真なしのカード2枚で下段に置く（優先度の差を保ったまま、リンク1本だけの不揃いを解消） */
.cards-sub{margin-top:var(--space-md)}

/* 職種セクション内の小見出し。 */
.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 242 / .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(86% 0.02 248 / .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 に任せている。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}}

/* ── アクセスの地図を複数並べる ──
   auto-fit だと5枚のとき3+2で割れて余った1枚が中途半端に伸びる。2列で固定し、1枚目（本社）だけ全幅で大きく置く。見学地は見出しのラベルで示す。 */
.map-grid{
  display:grid;grid-template-columns:1fr;
  gap:var(--space-lg);
}
@media (min-width:768px){
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-grid > .map-item:first-child{grid-column:1 / -1}
}
.map-item-name{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-md);
  letter-spacing:.04em;margin-bottom:var(--space-sm);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
}
/* 見学地がどれかは、地図が2枚以上になった時点で文章だけでは伝わらない。
   見学地の見出しに直接ラベルを付ける（リード文の記載と二重になるが、視線が地図側にある人に効く） */
.map-item-badge{
  font-family:var(--font-sans);font-weight:700;font-size:var(--text-xs);letter-spacing:.06em;
  color:var(--color-on-btn);background:var(--color-accent-btn);
  padding:.3em .8em;border-radius:999px;white-space:nowrap;
}
/* 電話番号は途中で改行させない。実測で名古屋事業所が「0567-68-／2400」と割れていた
   （住所が長いぶん、番号が行末に来る）。番号が2行に割れると読み取れない */
.map-item .note-text a{text-decoration:underline;white-space:nowrap}

.map-item-meta{margin-top:var(--space-sm);display:grid;gap:.35rem}
.map-item-addr{margin:0}
.map-item-line{margin:0;display:flex;align-items:center;gap:.4em}
.map-item-line .mi{flex:none;width:1.2em;height:1.2em}

/* ── 職種セクション末尾のCTA ──
   ページ末尾の共通CTA帯（紺・全幅）と役割が重なるので、あちらより一段弱く見せる。帯にせず、明るい地の上にボタン＋テキストリンクを置くだけにしている（帯にすると1ページに紺の全幅CTAが3本並ぶため）。 */
.job-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);
  margin-top:var(--space-xl);
  padding-top:var(--space-lg);border-top:var(--rule-hair);
}
@media (max-width:600px){
  /* SPは横並びだとボタンとリンクが半端な幅で割れるので縦積み。左揃えのまま */
  .job-cta{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
  .job-cta .btn{width:100%;justify-content:center}
}

/* ── 拠点別の電話リスト ──
   本社1本だった電話導線が拠点ごとに5本になる。等幅のボタンで並べると主ボタン（職場見学を申し込む）より面積を取って主従が逆転するため、テキストリンクのまま『拠点名＋番号』を1組にして折り返す。 */
.tel-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem 1.6rem;
}
.tel-list a{
  display:inline-flex;align-items:baseline;gap:.5em;
  font-size:var(--text-sm);
  border-bottom:1px solid transparent;padding-bottom:.2em;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tel-list-name{font-family:var(--font-sans);font-weight:700;font-size:max(.875rem,.92em)}
.tel-list-num{
  font-family:var(--font-sans);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:max(1rem,1.05em);letter-spacing:.02em;
}
/* 紺のCTA帯の上（暗背景）。主ボタン（職場見学を申し込む）とは面積でなく彩度で主従を付ける＝ボタンはオレンジの塗り、こちらは枠線＋白文字に留める。 */
.cta-tel{
  margin-top:var(--space-lg);margin-inline:auto;max-width:46rem;
  padding:var(--space-md) var(--space-sm);
  border:1px solid oklch(86% 0.02 248 / .38);
  background:oklch(100% 0 0 / .07);
}
.cta-tel-lead{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-sans);font-weight:700;
  font-size:var(--text-md);color:var(--color-white);
  text-align:center;margin-bottom:.35rem;
}
.cta-tel-note{
  font-size:var(--text-xs);color:var(--color-white-soft);
  text-align:center;margin-bottom:var(--space-sm);
}
/* 折り返しても時刻が単独行にならないよう、受付時間は塊のまま送る */
.cta-tel-time{white-space:nowrap}
.cta-tel .tel-list{gap:.8rem 1.8rem}
.cta-tel .tel-list-num{font-size:clamp(1.25rem,1.6vw,1.45rem)}
.cta-tel .tel-list a{color:var(--color-white-soft);border-bottom-color:oklch(86% 0.02 248 / .45)}
.cta-tel .tel-list a:hover{color:var(--color-white);border-bottom-color:var(--color-white)}
.cta-tel .tel-list-num{color:var(--color-white)}
/* 明るい地の上（contact の電話ブロック）。縦積みで住所と並べても崩れない形 */
.tel-list--block{
  flex-direction:column;align-items:center;gap:.4rem;
  margin-top:var(--space-sm);
}
.tel-list--block a{
  color:var(--color-navy);border-bottom-color:var(--color-line);
  gap:.8em;min-width:min(100%,20rem);justify-content:space-between;
}
.tel-list--block a:hover{color:var(--color-accent-deep);border-bottom-color:var(--color-accent)}
@media (max-width:480px){
  /* SPでは拠点名と番号が1行に収まらない組み合わせが出る（例：習志野事業所＋047-454-0006）。縦1列＋行内で拠点名と番号を左右に振り分ける形にして、行数を抑えている。 */
  .tel-list{gap:.9rem 1.2rem}
  .cta-tel .tel-list{flex-direction:column;align-items:center;gap:.55rem}
  .cta-tel .tel-list a{
    flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:.8em;min-width:min(100%,17rem);
  }
  .cta-tel .tel-list-num{font-size:1.125rem}
}

/* ── 電話アイコン（追従バー・ヘッダー・CTA帯で共用） ── */
.tel-ico{flex:none;display:block}

/* ── フッターの電話 ── */
.footer-tel{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .6em;
  margin-top:.6rem;
}
.footer-tel a{
  font-family:var(--font-sans);font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--color-white);
  border-bottom:2px solid var(--color-accent);padding-bottom:.05em;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.footer-tel a:hover{border-bottom-color:var(--color-white)}
.footer-tel-sub{font-size:var(--text-xs)}
.footer-tel-note{font-size:var(--text-xs);color:var(--color-white-soft)}

/* ── ヘッダーの電話（PCのみ） ── */
/* ナビ6項目＋CTAと同じ行に置くので、幅が足りなくなる順に落とす：
   1339px以下＝受付時間を落として番号だけ／1239px以下＝電話ごと落とす。
   閾値は実測値（1200pxではロゴの右端とナビの左端が余白0で接する）。
   1080px以下はハンバーガーに畳まれるので、そこから先はSPメニュー側が担当する */
.nav-tel{
  display:inline-flex;align-items:center;gap:.5em;
  color:var(--color-white);padding:.2em 0;
}
.nav-tel::after{content:none}
.nav-tel:hover .nav-tel-num{color:var(--color-white)}
.nav-tel-body{display:grid;gap:.05em;line-height:1.25}
.nav-tel-num{
  font-family:var(--font-sans);font-size:1.0625rem;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--color-white);
}
.nav-tel-note{
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  letter-spacing:.02em;color:var(--color-white-soft);white-space:nowrap;
}
@media (max-width:1339px){.nav-tel-note{display:none}}
@media (max-width:1239px){.nav-tel{display:none}}

/* ── SPメニューの電話 ── */
/* ハンバーガーに畳まれるとヘッダーの電話が消えるので、メニュー内にも置く。
   主導線（オレンジの塗りボタン）と競合しないよう、こちらは枠線だけに留める */
.sp-menu-tel{margin-top:var(--space-sm)}
.sp-menu-tel a{
  display:inline-flex;align-items:center;gap:.7em;
  border:1px solid var(--color-line-dark);
  padding:.75em 1.6em;
}
.sp-menu-tel .tel-ico{width:20px;height:20px}
.sp-menu-tel-body{display:grid;gap:.15em;text-align:left}
.sp-menu-tel-num{
  font-family:var(--font-sans);font-size:1.25rem;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.sp-menu-tel-num small{font-size:.875rem;font-weight:500;color:var(--color-white-soft);margin-left:.6em}
.sp-menu-tel-note{
  font-family:var(--font-sans);font-size:.875rem;font-weight:500;
  letter-spacing:.02em;color:var(--color-white-soft);
}

/* ── フッターのブランド（社名テキスト→ロゴ） ── */
.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}
}
/* ハンバーガーへの切替は1080px。ナビ項目が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}
  /* 円形時代の直径指定は下端バー化で不要。文字サイズは共通規約の下限14px＝.875remを.float-cta-item側で持たせている。2枠は等分（1:1）にし、主従は色で付けている（従＝紺navy-solid／主＝ロゴブルーaccent-btn）ため、幅で差を付けなくても読める。 */
  .float-cta-item{padding:1em .4em;font-size:.875rem}
  body{line-height:1.9}
  /* この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;
  }
}

/* ══ セクション幅の緩急 ══
   全セクションが1200px固定だと単調なため、『横に並ぶ要素があるセクション』に限って外へ広げる。
   ・テキスト主体のセクションは広げない。本文は --measure:38em で別途止めてあり、広げても行長は伸びず間延びするだけ
   ・sticky見出し＋説明列の2カラム（.env-read）も動かさない。狭めると右列が潰れる
   ・見出し（.sec-head）は1200pxの軸に残す。ここまで動かすと基準線が消えて散らかる
   ・1200px未満では一切効かせない。.section の左右padding（最大64px）に阻まれてそもそも1200pxに届かない */
@media (min-width:1200px){
  /* 1320px＝1440pxで実質上限（画面端64px）に当たる値。これ以上大きくすると
     1600px超だけ急に広がって、画面幅によって印象が変わってしまう */
  .section-inner--wide{max-width:1320px}
  .section-inner--wide > .sec-head{max-width:1200px;margin-inline:auto}

  /* 中身が薄いのに標準の縦余白（6rem）を取っていたセクションを詰め、
     前後のセクションを相対的に立たせる */
  .section--compact{padding-top:4.5rem;padding-bottom:4.5rem}

  /* TOPで唯一の映像。880pxは16:9で高さ495pxしかなく、
     前後のカード（1枚あたり高さ600px超）に対して弱かった。
     1024pxで高さ576px。21:9の全幅化はしない（既存のbreakoutと競合し、
     天地も足りなくなるため16:9に収めた経緯がある） */
  .video-embed{max-width:1024px}
}

/* ══ 下層ページの幅の緩急 ══
   原則はTOPと同じで、幅を変えて効くのは『横に並ぶ要素があるセクション』だけ。business（全幅splitが2本）・contact（電話とフォームが中央寄せ）・privacy（44em）は既に幅のリズムを持っているので触らない。 */
@media (min-width:1200px){
  /* company のアクセス。地図は width:100% の16:9なので1200px幅だと高さ675pxあり、
     中身（地図1枚＋住所1行）に対して大きすぎる。1040pxで585px。
     .map-embed だけ絞ると左寄せのまま右に空白が出て、見出し・地図・注記の左端が
     3段階にずれるので、セクションのinnerごと絞る */
  .section-inner--narrow{max-width:1040px}

  /* recruit の職種帯を両端まで届かせる。--wide の1320pxは差が97pxしかなく、
     しかもビューポート1343px以下では効かない。帯は写真背景なので幅を広げても
     壊れるものが無く、ここだけは全画面幅で確実に差が出せる。

     100vw を使うとスクロールバー分（15px前後）だけ横スクロールが出るので、
     .section の左右padding と同じ式をそのまま打ち消して外へ出す。
     結果はビューポート幅ちょうどで、横スクロールは発生しない。

     min-height の上限を 15.5rem→18.75rem に上げるのは、幅が1297→1425pxに
     伸びるぶん帯が横長になりすぎないため。1425×300pxで横長比4.75＝
     変更前（1297×268＝4.84）よりむしろ緩む */
  .job-band--full{
    margin-inline:calc(-1 * clamp(1.25rem,5vw,4rem));
    min-height:clamp(11rem,21vw,18.75rem);
  }
}

/* interview の記事の列比。.iv-body > p には行長の上限が無く、1200px幅だと1行30文字＝
   日本語としては短く改行が増える。--wide(1320)と併せて写真:本文を .9:1.1 → .8:1.2 に
   振り、1440pxで本文を36文字（適正35〜45）にする。sticky と 960px以下の1列化には影響しない。

   1344px という半端な値は、--wide が実際に効き始める幅。.section の左右padding（最大64px）と
   スクロールバーがあるため、セクションが1200pxより広くなるのはビューポートが約1343pxを
   超えてから。それ未満でこの列比だけを効かせると、セクションの幅は1200pxのまま写真から
   本文へ幅を移し替えるだけになり、1280pxでは本文＋2文字に対して写真−55px＝割に合わない。

   写真側に minmax(490px,…) の下限を置く案は却下。1200〜1265pxの帯で下限が写真を
   押し広げてしまい（写真450→490px）、本文が26→25文字と変更前より狭くなった。
   下限は写真を守るのではなく膨らませる方に働く */
@media (min-width:1344px){
  .iv--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}

/* ══ Contact Form 7 の橋渡し ══
   CF7は入力欄を <span class="wpcf7-form-control-wrap"> で包み、ラジオ/チェックを
   <span class="wpcf7-list-item"><label><input><span class="wpcf7-list-item-label">
   という独自の入れ子で出す。静的版の .check-chip は label 直下に span を置く前提だったため、
   そのままではチップの見た目が全部外れる。ここで対応づけを与えている。
   ※フォーム本体の .form / .form--center は shortcode の html_class で付けている（functions.php） */

/* 入力欄のラッパはブロックにする（インラインのままだと width:100% が効かない） */
.form .wpcf7-form-control-wrap{display:block}

/* ラジオ・チェックボックスのチップ化＝.check-chip と同じ見た目にする。
   .check-group の中だけに限定する（同意チェックは別の見た目のため巻き込まない） */
.check-group .wpcf7-form-control{display:flex;flex-wrap:wrap;gap:.5rem}
.check-group .wpcf7-list-item{margin:0}
.check-group .wpcf7-list-item label{position:relative;display:inline-block;cursor:pointer}
.check-group .wpcf7-list-item input{position:absolute;inset:0;opacity:0;cursor:pointer}
.check-group .wpcf7-list-item-label{
  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-group .wpcf7-list-item input:checked + .wpcf7-list-item-label{
  background:var(--color-navy);border-color:var(--color-navy);color:var(--color-white);
}
.check-group .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label{
  outline:2px solid var(--color-focus);outline-offset:2px;
}

/* プライバシーポリシー同意＝静的版の .form-consent と同じ扱い（チップにしない） */
.form-consent-wrap .wpcf7-list-item{margin:0}
.form-consent-wrap label{font-size:var(--text-sm);display:block;position:relative;cursor:pointer}
.form-consent-wrap a{color:var(--color-accent-deep);text-decoration:underline}

/* 同意チェックの見た目。OS既定のチェックボックスは色も大きさもブラウザ任せで、
   フォーム内の他の部品と揃わない。inputは残したまま（キーボード操作とCF7の検証は既定のまま）
   ラベル側に枠とチェックを描く */
.form-consent-wrap input[type="checkbox"]{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.form-consent-wrap .wpcf7-list-item-label{position:relative;display:inline-block;padding-left:2em}
.form-consent-wrap .wpcf7-list-item-label::before{
  content:"";position:absolute;left:0;top:.1em;width:1.2em;height:1.2em;
  border:1px solid var(--color-line);background:oklch(100% 0 0);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.form-consent-wrap .wpcf7-list-item-label::after{
  content:"";position:absolute;left:.42em;top:.26em;width:.34em;height:.68em;
  border:solid oklch(100% 0 0);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform var(--dur-fast) var(--ease-out);
}
.form-consent-wrap input:checked + .wpcf7-list-item-label::before{
  background:var(--color-navy-solid);border-color:var(--color-navy-solid);
}
.form-consent-wrap input:checked + .wpcf7-list-item-label::after{transform:rotate(45deg) scale(1)}
.form-consent-wrap input:focus-visible + .wpcf7-list-item-label::before{
  outline:2px solid var(--color-focus);outline-offset:2px;
}

/* 送信ボタンは左右中央。CF7はボタンを素の <p> に入れて出すため、その段落ごと中央寄せする
   （スピナーがボタンと同じ行に並ぶ既定はそのまま） */
.form p:has(> .wpcf7-submit){text-align:center}

/* 不備のある項目は枠でも示す。赤字の文言は先頭の1件だけに絞っている（site.js） */
.form .wpcf7-not-valid{border-color:oklch(52% 0.19 26)}
/* 上の .wpcf7-not-valid-tip は display:block を当てているため、hidden 属性だけでは消えない */
.form .wpcf7-not-valid-tip[hidden]{display:none}

/* CF7のエラー・完了メッセージ。既定は赤枠だけで本文の書体から浮くので、サイト側へ寄せる */
.form .wpcf7-not-valid-tip{
  display:block;margin-top:.4em;font-family:var(--font-sans);font-size:var(--text-sm);
  color:oklch(52% 0.19 26);
}
.wpcf7-response-output{
  margin:var(--space-md) 0 0;padding:.9em 1.1em;
  font-family:var(--font-sans);font-size:var(--text-sm);line-height:1.8;
}
/* 送信中のスピナーが送信ボタンの右に出る。ボタンと同じ行に収める */
.form .wpcf7-spinner{margin:0 0 0 .6em;vertical-align:middle}

/* 語の途中で折り返さない。u-phrase は <wbr> を置いた位置でだけ折り返す（入り切らない塊だけ任意位置で折る）。
   word-break:auto-phrase は Safari 未対応のため、iPhone でも効くよう区切りを手で置く */
.u-phrase{word-break:keep-all;overflow-wrap:anywhere}
.u-nw{white-space:nowrap}