/* ============================================================
   KASHIWABARA GUILD 採用サイト — style.css
   トークン → ベース → コンポーネント → セクション → ギミック
   正: docs/designs/DESIGN.md（水色+白 / No-Line原則）
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* Base */
  --color-white:        #FFFFFF;
  --color-bg-light:     #EBF3FA;

  /* Accent */
  --color-accent:       #2A9BD6;
  --color-accent-dark:  #1E7FB3;
  --color-accent-light: #5CB8E6;

  /* Text */
  --color-text:         #1A2B3D;
  --color-text-sub:     #5A6B7D;

  --color-border:       #D8E6F0;

  /* インクパレット（ギミック用・青系中心） */
  --ink-1:#2A9BD6; --ink-2:#5CB8E6; --ink-3:#1E7FB3;
  --ink-4:#37C7C2; --ink-5:#7BD0F2; --ink-6:#1C6FA0;

  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Noto Sans JP', sans-serif;

  --fs-hero:  clamp(2.5rem, 6vw, 4.5rem);
  --fs-h2:    clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  --space-md: 1rem;  --space-lg: 1.5rem;  --space-xl: 2rem;
  --space-2xl: 3rem; --space-3xl: 4rem;   --space-4xl: 6rem;

  --container: 1120px;
  --container-pad: 1.5rem;

  --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(26,43,61,0.06);
  --shadow-md: 0 6px 20px rgba(42,155,214,0.10);
  --shadow-lg: 0 16px 40px rgba(42,155,214,0.14);

  --ease-paint: cubic-bezier(.7,0,.2,1);
}

/* ---------- 2. ベース ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; scroll-padding-top:84px; }
html { overflow-x:clip; }
body {
  font-family:var(--font-body); color:var(--color-text); background:var(--color-white);
  line-height:1.8; font-size:var(--fs-body); overflow-x:clip;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--color-accent); }
.font-disp { font-family:var(--font-display); letter-spacing:.04em; font-weight:400; }
.font-en   { font-family:var(--font-heading); letter-spacing:.08em; }
.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad); }

:focus-visible { outline:2px solid var(--color-accent-light); outline-offset:2px; }

/* スキップリンク: 通常はビューポート外へ退避（フォーカス可能なまま）。
   キーボードでフォーカスされた時だけスライドインして可視化する。
   display:none だとフォーカスできず tab 順から外れるため transform で退避する。 */
.skip-link {
  position:fixed; top:0; left:0; z-index:1000;
  transform:translateY(-120%);
  background:var(--color-accent); color:var(--color-white);
  padding:.75rem 1.25rem; border-radius:0 0 var(--radius-md) 0;
  font-family:var(--font-heading); font-weight:700; font-size:.9rem;
  text-decoration:none; box-shadow:var(--shadow-md);
  transition:transform .2s ease;
}
.skip-link:focus {
  transform:translateY(0);
  outline:2px solid var(--color-accent-light); outline-offset:2px;
}

/* ---------- 3. 共通コンポーネント ---------- */
.btn {
  display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:.95rem;
  padding:.9rem 1.75rem; border-radius:var(--radius-full); border:none; cursor:pointer;
  text-decoration:none; text-align:center; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.btn--primary { background:var(--color-accent); color:#fff; box-shadow:var(--shadow-md); }
.btn--primary:hover { background:var(--color-accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn:disabled { cursor:not-allowed; }
/* 送信中: グレーに落として操作不能を明示（浮き上がりも止める） */
.btn--primary.is-loading { background:var(--color-text-sub); box-shadow:none; transform:none; opacity:.9; }
/* 送信完了: 成功を表す緑で固定。チェックを添える */
.btn--primary.is-done { background:#2E9E6B; box-shadow:none; transform:none; }
.btn--primary.is-done::after { content:' ✓'; }
.btn--lg { padding:1.1rem 2.5rem; font-size:1.05rem; }

.badge {
  display:inline-block; font-size:.75rem; font-weight:700; color:var(--color-accent-dark);
  background:rgba(42,155,214,.12); border-radius:var(--radius-full); padding:.15em .9em; margin-left:.6em;
  vertical-align:middle; white-space:nowrap;
}
.badge--soon { color:#8a6d1a; background:rgba(232,184,75,.18); }
.badge--tbd  { color:var(--color-text-sub); background:rgba(90,107,125,.12); }

/* セクション見出しブロック */
.section { padding-block:var(--space-3xl); }
.section--alt { background:var(--color-bg-light); }
.section__head { max-width:760px; margin-bottom:var(--space-2xl); }
.section__label {
  font-weight:700; font-size:.8rem; color:var(--color-accent); text-transform:uppercase;
  margin-bottom:.5rem; display:inline-block; position:relative;
}
/* ペイントスワイプの下線（リビール時にJSで .painted 付与） */
.section__label::after {
  content:""; position:absolute; left:0; bottom:-6px; height:6px; width:100%;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));
  border-radius:2px; filter:url(#roughen);
  transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--ease-paint) .15s;
}
.section__label.painted::after { transform:scaleX(1); }
.section__title { font-size:var(--fs-h2); font-weight:900; line-height:1.35; margin-bottom:var(--space-lg); text-wrap:balance; }
.section__lead { color:var(--color-text-sub); font-size:var(--fs-lead); line-height:2; }

/* リビール（要素タイプごとに動きを変える — 一律フェード禁止） */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.on { opacity:1; transform:none; }
figure.reveal, .reveal figure { }
.msg__banner img { clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease-paint) .1s; }
.msg__banner.on img, .reveal.on.msg__banner img { clip-path:inset(0 0 0 0); }

.section__intro { display:grid; gap:var(--space-xl); align-items:center; margin-bottom:var(--space-2xl); }
@media (min-width:860px){ .section__intro { grid-template-columns:7fr 5fr; } .section__intro .section__head { margin-bottom:0; } }
.section__visual { width:100%; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); max-width:420px; margin-inline:auto; background:linear-gradient(135deg,#dcedf8,var(--color-bg-light)); }
.section__visual img { width:100%; aspect-ratio:4/3; object-fit:cover; clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease-paint) .1s; }
.section__visual.on img, .reveal.on.section__visual img { clip-path:inset(0 0 0 0); }
.section__visual.is-missing img { display:none; }

/* ---------- 4. グレイン & ペイントバー ---------- */
.grain {
  position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.04; animation:grainShift 8s steps(10) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 10%{transform:translate(-2%,1%)} 20%{transform:translate(1%,-2%)}
  30%{transform:translate(-1%,2%)} 40%{transform:translate(2%,1%)} 50%{transform:translate(-2%,-1%)}
  60%{transform:translate(1%,2%)} 70%{transform:translate(2%,-2%)} 80%{transform:translate(-1%,-1%)}
  90%{transform:translate(2%,2%)} 100%{transform:translate(0,0)}
}

.paintbar { position:fixed; top:0; left:0; right:0; height:5px; z-index:1000; pointer-events:none; }
.paintbar span {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--color-accent-dark),var(--color-accent),var(--color-accent-light));
  filter:url(#roughen); border-radius:0 3px 3px 0;
}

/* ---------- 5. ナビ ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled { background:rgba(255,255,255,.86); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); }
/* ヒーロー最上部（未スクロール時）は背景が実写のため、ヘッダーの文字が写真の明部に溶ける。
   上端から薄く落ちるベールを敷いて可読性を確保する（スクロール後は .scrolled の地に置き換わる）。 */
.nav::before {
  content:""; position:absolute; inset:0 0 auto; height:130%; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(246,251,255,.92) 0%, rgba(246,251,255,.62) 55%, rgba(246,251,255,0) 100%);
  transition:opacity .3s ease;
}
.nav.scrolled::before { opacity:0; }
.nav__inner {
  max-width:var(--container); margin-inline:auto; padding:.9rem var(--container-pad);
  display:flex; align-items:center; gap:1.5rem;
}
/* ロゴ = 正式ロゴ（VI シグニチュア2／横組み）+ カタカナの社名/用途。
   カタカナ併記はロゴが入っても残す。
   ロゴは VI 規定色（#54c3f1 / #231815）のまま使う。サイトのアクセント色
   （--color-accent）に寄せて塗り替えるのは VI P.19 で禁止されている。
   gap は VI のアイソレーション規定（シンボルマーク横幅の 0.25 倍以上）を満たす値。
   横組みのシンボルマーク幅は表示高さとほぼ等しいため、高さ 2.2rem に対し
   0.25X ≒ .55rem。区切り線までの padding と合わせて .9rem 確保している。 */
.nav__logo { display:flex; align-items:center; gap:.9rem; line-height:1; text-decoration:none; color:var(--color-text); }
.nav__logo-img { height:2.5rem; width:auto; display:block; flex-shrink:0; }
/* カタカナ側はロゴとの間に細い区切り線を入れて「読み」だと分かるようにする */
.nav__logo-text {
  display:flex; flex-direction:column; gap:.18rem;
  padding-left:.9rem; border-left:1px solid var(--color-border);
}
/* 社名は折り返させない。「カシワバ／ラギルド」と割れると社名として読めなくなる */
.nav__logo-name { font-weight:900; font-size:.9rem; letter-spacing:.02em; white-space:nowrap; }
.nav__logo-role {
  font-weight:700; font-size:.6rem; letter-spacing:.16em; color:var(--color-text-sub);
}
/* 応募導線は全画面共通で常時表示する。ヘッダーはロゴとこの2アクションのみ
   （セクションナビ・ハンバーガーは廃止。ページ内移動はスクロールとフッターが担う）。 */
.nav__actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.nav__req {
  font-weight:700; font-size:.82rem; color:var(--color-text); text-decoration:none;
  padding:.55rem .6rem; border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.nav__req:hover,.nav__req:focus-visible { color:var(--color-accent-dark); border-bottom-color:var(--color-accent); }
.nav__cta { padding:.6rem 1.1rem; font-size:.82rem; white-space:nowrap; }
@media (min-width:1024px) {
  .nav__actions { gap:.8rem; }
  .nav__cta { padding:.6rem 1.3rem; font-size:.85rem; }
}
/* 狭幅では「ロゴ + 募集要項 + 話を聞いてみる」が1行に収まらなくなる。
   ロゴを畳んでカタカナだけ残し、右2アクションを詰めて維持する。
   ロゴを 1.7rem まで縮めて残す案も実測したが、375px 幅では
   カタカナ社名と「募集要項」が重なって読めなくなるため不採用。 */
@media (max-width:640px) {
  .nav__inner { gap:.5rem; padding-inline:.9rem; }
  .nav__logo-img { display:none; }
  .nav__logo-text { padding-left:0; border-left:0; }
  .nav__logo-name { font-size:.85rem; }
  .nav__logo-role { font-size:.55rem; letter-spacing:.12em; }
  .nav__actions { gap:.15rem; }
  .nav__req { padding:.5rem .35rem; font-size:.76rem; }
  .nav__cta { padding:.5rem .75rem; font-size:.76rem; }
}

/* ハンバーガー・セクションナビ（ABOUT/WHY/…）は廃止。
   1枚LPで目次の利用は薄く、ヘッダーは「募集要項」「話を聞いてみる」の
   2アクションだけに絞る。セクション間の移動はスクロールとフッターナビが担う。 */

/* ---------- 6. Hero ---------- */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:linear-gradient(160deg,#f6fbff 0%,var(--color-bg-light) 55%,#dcedf8 100%);
  overflow:hidden; padding-top:76px;
}
/* 背景写真のクロスフェード。全枚を重ね、.is-active の1枚だけを見せる。 */
.hero__bg { position:absolute; inset:0; z-index:0; }
/* トリミング位置は素材ごとに HTML の data-pos / data-pos-m で指定する（main.js が
   カスタムプロパティに移す）。横長素材を縦長ビューポートに cover すると左右が大きく
   削られるため、モバイルは別の位置指定が要る。 */
.hero__bg img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--pos, center bottom);
  opacity:0; transition:opacity 1.6s ease;
}
@media (max-width:767px) {
  .hero__bg img { object-position:var(--pos-m, var(--pos, center 40%)); }
}
.hero__bg img.is-active { opacity:1; }
/* 覆いは「文字が乗る側だけ」を守る。以前は左端 .92 で写真がほぼ白く飛び、
   どの素材に差し替えても印象が変わらない状態だった。 */
.hero__bg::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(246,251,255,.93) 0%, rgba(246,251,255,.80) 42%, rgba(246,251,255,.26) 76%, rgba(246,251,255,0) 100%);
}
/* モバイルは文字が縦に積まれるため、横グラデでは下半分の写真に本文が重なって読めない。
   縦方向の覆いに切り替える。 */
@media (max-width:767px) {
  .hero__bg::after {
    background:linear-gradient(180deg, rgba(246,251,255,.95) 0%, rgba(246,251,255,.90) 52%, rgba(246,251,255,.72) 78%, rgba(246,251,255,.45) 100%);
  }
}
.hero__bg.is-missing img { display:none; }
.hero__splat,.contact__splat { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hero__inner { position:relative; z-index:2; padding-block:var(--space-3xl); }
/* 日本語のため字送りは英字時（.28em）より詰める。左に塗りのマーカーを添えて見出しと分離する。
   display は flex（inline-flex だと後続のインライン要素と同じ行ボックスに乗り得る）。 */
/* 下のロゴとの間隔は VI のアイソレーション（0.25X、X = シンボルマーク横幅）に連動させる。
   縦組みのシンボルマーク幅はロゴ表示高さの約 0.67 倍なので 0.25X ≒ 高さ × 0.17。
   ロゴ高さ clamp(7rem,22vw,15rem) に対応する値が clamp(1.2rem,3.7vw,2.55rem)。
   固定 1.1rem だとデスクトップで規定の半分以下になる（クライアント指摘 2026-08-03）。 */
.hero__eyebrow {
  display:flex; width:fit-content; align-items:center; gap:.6rem;
  font-size:.86rem; font-weight:700; color:var(--color-accent-dark); letter-spacing:.08em;
  margin-bottom:clamp(1.2rem,3.7vw,2.55rem);
}
.hero__eyebrow::before {
  content:""; width:1.8rem; height:3px; border-radius:2px; background:var(--color-accent); flex:none;
}

/* ブランド表示 = VI シグニチュア1（縦組み・メイン）。以前のシステムフォント組みは
   VI P.20「ロゴタイプを他のフォントで代用しない」に反するため廃止した。
   背景が実写のため、写真の明部とロゴが溶けないよう淡いハローで浮かせる。
   ハローはロゴ自体を改変しないレンダリング効果にとどめ、色や形は VI 規定のまま使う。
   下の brandline との間隔は VI のアイソレーション（シンボルマーク横幅の 0.25 倍）を
   満たす値。縦組みのシンボルマーク幅は表示高さの約 0.67 倍なので、
   高さ 15rem 時で 0.25X ≒ 2.5rem。ロゴ高さ clamp(7rem,22vw,15rem) に連動する
   clamp(1.2rem,3.7vw,2.55rem) にする（旧値 max 1.6rem はデスクトップで不足していた）。 */
.hero__guild {
  display:flex; width:fit-content; margin-bottom:clamp(1.2rem,3.7vw,2.55rem); line-height:1;
  filter:drop-shadow(0 0 18px rgba(246,251,255,.95)) drop-shadow(0 2px 6px rgba(246,251,255,.9));
}
/* 下限 7rem はモバイル都合。これ以上大きいと CTA がファーストビューから押し出される
   （縦組みは横組みの倍以上の高さを食う）。7rem 時のシンボルマーク天地は約 83px ≒ 22mm で、
   VI の最小サイズ（シグニチュア1 = 12mm）には十分収まる。 */
.hero__guild-img {
  display:block; height:clamp(7rem,22vw,15rem); width:auto;
}
.splat { position:absolute; transform:translate(-50%,-50%) scale(0); will-change:transform; }
@keyframes splatPop {
  0%   { transform:translate(-50%,-50%) scale(0)    rotate(var(--r)); }
  60%  { transform:translate(-50%,-50%) scale(1.12) rotate(var(--r)); }
  100% { transform:translate(-50%,-50%) scale(1)    rotate(var(--r)); }
}

/* GUILD の巨大タイポ直下に置く、ページの正体（社名＋用途）。
   ロゴが読めない/知らない訪問者が最初に確認するのはここ。 */
.hero__brandline {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.1rem;
  font-size:1.05rem; font-weight:700; color:var(--color-text-sub);
  margin-top:.1rem; margin-bottom:1.4rem;
}
.hero__brandline strong { font-size:1.35rem; font-weight:900; color:var(--color-text); letter-spacing:.02em; }
.hero__brandline-sep { color:var(--color-accent); font-weight:400; }

/* 1文字ずつ塗り付くステートメント */
.hero__statement { font-size:var(--fs-hero); font-weight:900; line-height:1.25; margin-bottom:1rem; }
.spell span {
  display:inline-block; opacity:0; transform:translateY(.25em) rotate(-4deg);
  transition:opacity .4s ease, transform .4s ease;
}
.spell span.on { opacity:1; transform:none; }

.hero__sub { color:var(--color-text-sub); font-size:var(--fs-lead); line-height:2; margin-bottom:var(--space-xl); }

/* ヒーローのCTA。
   旧オーディエンススイッチ（2枚のカードで #foryou へ直行）は撤去した。
   ペルソナ別ページを最初に読ませると会社の正体を知らないまま条件の話に入ってしまうため、
   ここでは #about への1本に絞り、分岐は #foryou のタブに委ねる。 */
.hero__cta { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.6rem; }
.hero__cta-main { padding:1rem 2.2rem; font-size:1rem; }
.hero__cta-sub {
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.95rem; color:var(--color-accent-dark); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:.15rem;
  transition:border-color .2s ease, gap .2s ease;
}
.hero__cta-sub:hover,.hero__cta-sub:focus-visible { border-bottom-color:var(--color-accent); gap:.7rem; }

/* ---------- 7. マーキー帯 ---------- */
.marquee { background:var(--color-accent); overflow:hidden; padding-block:.7rem; transform:rotate(-.6deg) scale(1.02); }
.marquee__track { display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee__track span { font-size:clamp(1.4rem,3vw,2.2rem); color:#fff; white-space:nowrap; opacity:.95; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- 8. スタッツ ---------- */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-xl); margin-top:var(--space-xl); }
@media (min-width:768px){ .stats { grid-template-columns:repeat(4,1fr); } }
/* 3項目版。上の 4 列指定より後に置いて後勝ちさせる。
   モバイルも縦積みにしない — 数字3つが縦に並ぶと1画面近く占有してバランスが崩れる。
   数字・ラベルを詰めて3列のまま収める。 */
.stats--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:767px) {
  .stats--3 { gap:var(--space-md); }
  .stats--3 .stat__num { font-size:clamp(2rem,8.5vw,3rem); }
  .stats--3 .stat__unit { font-size:.8rem; }
  .stats--3 .stat__label { font-size:.72rem; line-height:1.5; }
}
.stat { display:flex; flex-direction:column; align-items:flex-start; }
.stat__num { font-size:clamp(3rem,6vw,4.6rem); color:var(--color-accent); line-height:1; }
.stat__unit { font-weight:700; color:var(--color-accent-dark); margin-top:.1rem; }
.stat__label { color:var(--color-text-sub); font-size:var(--fs-small); margin-top:.35rem; }
.stats__note { color:var(--color-text-sub); font-size:var(--fs-small); margin-top:var(--space-lg); }

/* 実写フォト2枚組（#about・現場と本社の対比 — issue #43） */
.photo-duo { display:grid; gap:var(--space-xl); margin-top:var(--space-2xl); }
@media (min-width:720px){ .photo-duo { grid-template-columns:6fr 5fr; align-items:start; } }
.photo-duo__item { margin:0; position:relative; }
/* 2枚とも同じ高さに固定する。元画像のアスペクト比（1.50 と 1.43）も列幅（6fr:5fr）も違うため、
   height:auto のままだと画像の下端が揃わず、キャプションのY座標が47pxずれる。
   高さを固定して object-fit:cover で吸収し、キャプションの行を揃える。 */
.photo-duo__item img {
  width:100%; height:clamp(240px,26vw,380px); object-fit:cover; display:block;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  clip-path:inset(0 100% 0 0); transition:clip-path .9s var(--ease-paint) .15s;
}
/* 2枚目は時間差でワイプ。以前は方向も逆にしていたが、形（角丸/不定形マスク）・方向・タイミングの
   3層で非対称が重なり「意図のある崩し」に見えなかったため、方向は揃えて時間差だけ残す。 */
.photo-duo__item:nth-child(2) img { transition-delay:.4s; }
.photo-duo__item.on img, .reveal.on.photo-duo__item img { clip-path:inset(0 0 0 0); }
.photo-duo__item.is-missing { display:none; }
.photo-duo__cap {
  margin-top:.7rem; font-size:var(--fs-small); color:var(--color-text-sub);
  display:flex; align-items:baseline; gap:.7em;
}
.photo-duo__cap .font-en {
  font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--color-accent);
}

.data__sub { font-size:var(--fs-h3); font-weight:700; margin-top:var(--space-2xl); }
.data__sub:first-of-type { margin-top:0; }

/* ---------- 9. 3つの柱 ---------- */
/* 等幅3カード。以前は1枚目を1.4倍にして非対称化していたが、幅の差が「意図のある崩し」として
   読み取られず、かつ1枚目だけ本文が短く収まって .pillar__for の下に157pxの死に余白が出る
   （2・3枚目は32px）という実害が出ていたため等幅に戻した（2026-08-06）。
   1枚目の差別化は、写真素材が揃った後のデザインリニューアルで幅以外の軸で行う。 */
.pillars { display:grid; gap:var(--space-xl); }
@media (min-width:768px){ .pillars { grid-template-columns:repeat(3,1fr); } }
.pillar {
  background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-xl);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.pillar:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.pillar::after { /* ホバーで下辺に塗りが走る */
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));
  clip-path:inset(0 100% 0 0); transition:clip-path .45s var(--ease-paint); filter:url(#roughen);
}
.pillar:hover::after { clip-path:inset(0 0 0 0); }
.pillar__num { font-size:3rem; color:var(--color-accent-light); line-height:1; display:block; margin-bottom:.6rem; }
.pillar h3 { font-size:var(--fs-h3); font-weight:900; margin-bottom:.7rem; }
.pillar p { color:var(--color-text-sub); font-size:.95rem; }
/* 本文の長さが3枚で違うため、margin-top:auto でカード下端に固定して3枚のラベル位置を揃える
   （文字サイズ・色のコントラスト改善は #92 Phase 4 で別途） */
.pillar__for { display:block; margin-top:auto; padding-top:var(--space-md); font-size:.65rem; font-weight:700; color:var(--color-accent); }

/* ---------- 10. 代表メッセージ ---------- */
/* 見出し直下の横長バナー。素材は右に人物・左が無地の壁で、左端をミラーで
   延長して 3.2:1 まで広げてある（延長分は元の壁の陰影がそのまま続く）。
   モバイルでは 3.2:1 だと人物が豆粒になるため、右寄りに切って 3:2 で見せる。 */
.msg__banner {
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  margin-bottom:var(--space-2xl);
}
.msg__banner img { width:100%; aspect-ratio:3/2; object-fit:cover; object-position:right center; }
@media (min-width:860px) {
  .msg__banner img { aspect-ratio:2374/739; object-position:center; }
}
.msg { display:flex; flex-direction:column; gap:var(--space-3xl); }
.msg__row { display:grid; gap:var(--space-xl); align-items:start; }
/* 本文カラムは全行で同じ幅・同じ左端。左端はセクション見出し(h2)と揃える。
   幅は 760px＝このサイトの標準 measure（.section__head / .process / .iv-hero__lead と同値）。
   以前は写真を右に置くために 64ch（実測 約510px）まで詰めていたが、写真を冒頭のバナー
   1枚に集約した後もそのままだったため、他セクションより極端に早く折り返して
   左に寄って見えていた。写真が無くなった以上、本文はページ標準の幅に戻す。 */
.msg__text--centered { max-width:720px; text-align:center; }
.msg__text--centered h3 { padding-left:0; }
.msg__text--centered h3::before { display:none; }
.msg__text { max-width:760px; }
.msg__text h3 { font-size:var(--fs-h3); font-weight:900; margin-bottom:.8rem; position:relative; padding-left:1rem; }
.msg__text h3::before {
  content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:5px; border-radius:3px;
  background:linear-gradient(180deg,var(--color-accent),var(--color-accent-light));
}
.msg__text p { color:var(--color-text-sub); }
/* 署名ブロックの呼びかけ。語りの本文より一段大きくして「ここが結び」だと分かるようにする。
   text-wrap:pretty は最終行が1文字だけ残るのを避けるため（非対応ブラウザは通常折り返し） */
.msg__close { font-size:var(--fs-lead); font-weight:700; color:var(--color-text) !important; text-wrap:pretty; }
.msg__sign { margin-top:1.2rem; font-weight:700; display:flex; align-items:center; }

.msg__closing-text { max-width:760px; }

/* ---------- 11. 1日の流れ（タイムライン） ---------- */
.timeline { position:relative; max-width:720px; }
.timeline__line {
  position:absolute; left:84px; top:8px; bottom:8px; width:3px; background:var(--color-border); border-radius:2px;
}
.timeline__line span { display:block; width:100%; height:0; background:linear-gradient(180deg,var(--color-accent),var(--color-accent-light)); border-radius:2px; }
.timeline__list { list-style:none; display:flex; flex-direction:column; gap:var(--space-lg); }
.timeline__item { display:grid; grid-template-columns:64px 40px 1fr; align-items:start; }
.timeline__item time { font-family:var(--font-heading); font-weight:700; color:var(--color-accent-dark); font-size:.95rem; padding-top:.15rem; text-align:right; }
.timeline__item::before { content:""; } /* grid 2列目のスペーサ */
.timeline__item > div { background:var(--color-white); border-radius:var(--radius-md); padding:1rem 1.3rem; box-shadow:var(--shadow-sm); position:relative; }
.timeline__item > div::before { /* ドット */
  content:""; position:absolute; left:-26px; top:1.1rem; width:13px; height:13px; border-radius:50%;
  background:var(--color-accent); box-shadow:0 0 0 4px rgba(42,155,214,.18);
}
.timeline__item h3 { font-size:1.02rem; font-weight:700; }
.timeline__item p { color:var(--color-text-sub); font-size:.92rem; }
.timeline__item .badge { margin-left:0; margin-top:.5rem; }
@media (max-width:560px) {
  .timeline__line { left:58px; }
  .timeline__item { grid-template-columns:44px 28px 1fr; }
  .timeline__item time { font-size:.8rem; }
  .timeline__item > div::before { left:-20px; }
}
.day__rain { margin-top:var(--space-2xl); background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-xl); box-shadow:var(--shadow-sm); max-width:720px; }
.day__rain h3 { font-weight:900; margin-bottom:.5rem; color:var(--color-accent-dark); }
.day__rain p { color:var(--color-text-sub); }

/* ---------- 12. キャリアパス ---------- */
/* キャリアパス一帯（見出し + フローチャート + 注記）。
   階段イラストは独立した1枚絵として置かず、この帯全体の背景に敷く。
   テーマB（ダークネイビー）前提: 明るい空のイラストを低透明度 + 右寄りマスクで
   地に溶かし、ステップカード（不透明地）とテキストの可読性を保つ。 */
.careerwrap {
  position:relative; isolation:isolate;
  /* 背景イラストの矩形が上の柱カードに密着しないよう、外側の余白は wrap 自身が持つ
     （見出しの margin-top は wrap 内に取り込まれたため外側余白としては効かない） */
  margin-top:var(--space-3xl);
  padding-block:var(--space-2xl);
}
/* 見出しブロックの既定 margin-top(3xl) は wrap の padding と二重になるため打ち消し、
   背景矩形内の上下余白を padding-block の 1 本で対称に管理する */
.careerwrap > .panel__block { margin-top:0; }
.careerwrap__bg {
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  object-fit:cover; object-position:80% 30%;
  opacity:.26; border-radius:var(--radius-lg);
  /* 左（見出し側）はフェードさせ、階段が昇っていく右側を見せる */
  -webkit-mask-image:linear-gradient(100deg, transparent 4%, rgba(0,0,0,.5) 42%, #000 78%);
  mask-image:linear-gradient(100deg, transparent 4%, rgba(0,0,0,.5) 42%, #000 78%);
}

.career { list-style:none; display:grid; gap:var(--space-lg); counter-reset:step; margin-top:var(--space-xl); }
@media (min-width:1024px){ .career { grid-template-columns:repeat(5,1fr); gap:var(--space-md); } }
.career__step {
  background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-lg);
  box-shadow:var(--shadow-sm);
  position:relative; transition:transform .25s ease, box-shadow .25s ease;
}
.career__step:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.career__step--branch { background:linear-gradient(135deg,rgba(42,155,214,.14),rgba(92,184,230,.18)); }
.career__phase { font-size:.65rem; font-weight:700; color:var(--color-accent); display:block; margin-bottom:.4rem; }
.career__step h3 { font-size:1.05rem; font-weight:900; line-height:1.4; }
.career__term { font-size:.78rem; font-weight:700; color:var(--color-accent-dark); margin:.15rem 0 .5rem; }
.career__step p:last-child { color:var(--color-text-sub); font-size:.88rem; }
@media (min-width:1024px) {
  .career__step:not(:last-child)::after {
    content:"→"; position:absolute; right:-1.05rem; top:42%; color:var(--color-accent); font-weight:700; z-index:2;
  }
}
.career__note { color:var(--color-text-sub); font-size:var(--fs-small); margin-top:var(--space-lg); }

/* ---------- 13. 職人の声 ---------- */
.voices { display:grid; gap:var(--space-xl); }
@media (min-width:860px){ .voices { grid-template-columns:repeat(3,1fr); } }
.voice { background:var(--color-white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.voice:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.voice blockquote { padding:var(--space-lg) var(--space-lg) 0; position:relative; flex:1; }
.voice blockquote::before {
  content:"“"; font-family:var(--font-display); font-size:3.4rem; line-height:1;
  color:var(--color-accent-light); display:block; margin-bottom:-.6rem;
}
.voice blockquote p { color:var(--color-text-sub); font-size:.93rem; }
.voice footer { padding:var(--space-md) var(--space-lg) var(--space-lg); }
.voice cite { display:block; font-style:normal; font-weight:900; font-size:.98rem; line-height:1.5; }
.voice footer span { color:var(--color-accent-dark); font-size:.8rem; font-weight:700; }
.voices__note { color:var(--color-text-sub); font-size:var(--fs-small); margin-top:var(--space-lg); }

/* ---------- 14. 支援制度 / 求める人物像 / GUILDにないもの ---------- */
.supports, .nogos { display:grid; gap:var(--space-lg); }
@media (min-width:640px){ .supports, .nogos { grid-template-columns:repeat(2,1fr); } }
/* .supports は制度4枚。3カラムだと2行目に1枚だけ取り残されるため2カラムを維持する。
   カード枚数を変えるときは、3の倍数なら3カラムに戻すこと */
@media (min-width:1024px){ .nogos { grid-template-columns:repeat(3,1fr); } }
.support, .nogo { background:var(--color-bg-light); border-radius:var(--radius-lg); padding:var(--space-xl); transition:transform .25s ease, box-shadow .25s ease; }
.support:hover, .nogo:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); background:var(--color-white); }
.support h3, .nogo h3 { font-size:1.05rem; font-weight:900; margin-bottom:.6rem; }
.support p, .nogo p { color:var(--color-text-sub); font-size:.92rem; }

/* 求める人物像。パネル内（section--alt の地）なので白カード＋shadow で分離する */
.traits { display:grid; gap:var(--space-lg); }
@media (min-width:640px){ .traits { grid-template-columns:repeat(2,1fr); } }
.trait {
  background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-xl);
  box-shadow:var(--shadow-sm); border-left:4px solid var(--color-accent);
  transition:transform .25s ease, box-shadow .25s ease;
}
.trait:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.trait h3 { font-size:1.05rem; font-weight:900; margin-bottom:.6rem; }
.trait p { color:var(--color-text-sub); font-size:.92rem; }

/* 「ないもの」は打ち消し線ではなく、左辺の赤で静かに示す */
.nogo { border-left:4px solid #d05a5a; }

/* ---------- 15. 募集要項 ---------- */
.req { background:var(--color-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.req__table > div { display:grid; grid-template-columns:1fr; padding:1.1rem var(--space-xl); }
.req__table > div:nth-child(even) { background:var(--color-bg-light); }
@media (min-width:640px){ .req__table > div { grid-template-columns:180px 1fr; gap:1rem; } }
.req__table dt { font-weight:700; color:var(--color-accent-dark); }
.req__table dd { color:var(--color-text); }
.req__note { display:block; color:var(--color-text-sub); font-size:var(--fs-small); margin-top:.4rem; }
.req__disclaimer { color:var(--color-text-sub); font-size:var(--fs-small); padding:1rem var(--space-xl) 1.2rem; }
.req__cta { margin-top:var(--space-2xl); text-align:center; }
.req__cta-note { color:var(--color-text-sub); font-size:var(--fs-small); margin-top:.8rem; }

/* ---------- 16. 選考フロー ---------- */
.process { list-style:none; display:grid; gap:var(--space-lg); max-width:760px; }
.process__step { display:grid; grid-template-columns:64px 1fr; gap:var(--space-lg); align-items:start; }
.process__step > span {
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--color-white); color:var(--color-accent); font-size:1.9rem; box-shadow:var(--shadow-sm);
}
.process__step h3 { font-weight:900; font-size:1.08rem; }
.process__step p { color:var(--color-text-sub); font-size:.95rem; }

/* ---------- 17. FAQ ---------- */
.faq__group { max-width:820px; margin-bottom:var(--space-2xl); }
/* パネル内では直前ブロック（注記・カード群）と見出しが密着するため上余白を確保 */
.panel .faq__group { margin-top:var(--space-3xl); }
.faq__cat { font-size:var(--fs-h3); font-weight:900; margin-bottom:var(--space-lg); padding-left:.9rem; position:relative; }
.faq__cat::before { content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:5px; border-radius:3px; background:var(--color-accent); }
.faq { background:var(--color-white); border-radius:var(--radius-md); margin-bottom:.7rem; overflow:hidden; box-shadow:var(--shadow-sm); }
.faq summary {
  list-style:none; cursor:pointer; padding:1.05rem 3.2rem 1.05rem 1.3rem; font-weight:700; position:relative;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"＋"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  color:var(--color-accent); font-weight:700; transition:transform .3s ease;
}
.faq[open] summary { color:var(--color-accent-dark); }
.faq[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq p { padding:0 1.3rem 1.1rem; color:var(--color-text-sub); font-size:.95rem; }

/* ---------- 18. Contact ---------- */
.section--contact {
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,var(--color-accent-dark) 0%,var(--color-accent) 55%,var(--color-accent-light) 100%);
}
.section--contact .section__label { color:#fff; }
.section--contact .section__label::after { background:#fff; }
.section--contact .section__title,.section--contact .section__lead { color:#fff; }
.section--contact .section__lead strong { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.contact__form {
  position:relative; z-index:2; background:var(--color-white); color:var(--color-text);
  border-radius:var(--radius-lg); padding:var(--space-xl); max-width:640px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:var(--space-lg);
}
.form__row { display:flex; flex-direction:column; gap:.4rem; }
.form__row label { font-weight:700; font-size:.92rem; }
.form__row label em { font-style:normal; font-size:.7rem; color:#fff; background:var(--color-accent); border-radius:var(--radius-full); padding:.1em .7em; margin-left:.5em; vertical-align:middle; }
.form__row input,.form__row select,.form__row textarea {
  font-family:var(--font-body); font-size:1rem; padding:.8rem 1rem; border-radius:var(--radius-md);
  border:1.5px solid var(--color-border); background:#fff; color:var(--color-text); width:100%;
  transition:border-color .2s ease;
}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus { outline:none; border-color:var(--color-accent); }
.form__pills { display:flex; gap:.6rem; }
.pill { position:relative; }
.pill input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.pill span {
  display:inline-block; padding:.5rem 1.3rem; border-radius:var(--radius-full);
  border:1.5px solid var(--color-border); font-weight:700; font-size:.9rem; color:var(--color-text-sub);
  transition:all .2s ease; cursor:pointer;
}
.pill input:checked + span { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.pill input:focus-visible + span { outline:2px solid var(--color-accent-light); outline-offset:2px; }
.form__optional summary { cursor:pointer; font-weight:700; color:var(--color-accent-dark); font-size:.92rem; margin-bottom:.6rem; }
.form__optional[open] { display:flex; flex-direction:column; gap:var(--space-md); }
/* 完了メッセージ: 緑のカードにチェックアイコンを添えて視認性を上げる */
.form__done {
  font-weight:500; color:#1C7A4D; line-height:1.7;
  background:#EAF7F0; border:1.5px solid #9FD9BC; border-radius:var(--radius-md);
  padding:1.1rem 1.25rem 1.1rem 3.2rem; position:relative;
}
.form__done strong { color:#155F3B; font-weight:800; }
.form__done::before {
  content:'✓'; position:absolute; left:1.1rem; top:1.1rem;
  width:1.5rem; height:1.5rem; border-radius:50%; background:#2E9E6B; color:#fff;
  font-size:.9rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
/* エラーメッセージ: 赤のカードで統一 */
.form__error {
  font-weight:700; color:#B23333; line-height:1.7;
  background:#FDEDED; border:1.5px solid #F0B4B4; border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;
}
/* ハニーポット: 視覚・スクリーンリーダー・Tab 移動のすべてから隠す（display:none だと埋めない bot がいるため画面外配置） */
.form__hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- 19. フッター ---------- */
.footer { background:var(--color-text); color:#c9d6e2; padding-block:var(--space-3xl) var(--space-xl); }
.footer__inner { display:flex; flex-direction:column; gap:var(--space-xl); }
/* フッターロゴ = VI シグニチュア1（縦組み・白抜き）。
   下の footer__name との間隔は VI のアイソレーション（シンボルマーク横幅の 0.25 倍）を
   満たすよう margin で確保する。縦組みのシンボルマーク幅は表示高さの約 0.67 倍なので、
   高さ 5rem に対し 0.25X ≒ .84rem。 */
.footer__logo { display:block; height:6.5rem; width:auto; margin-bottom:1.1rem; }
.footer__name { color:#fff; font-weight:700; font-size:.95rem; }
.footer__brand p { font-size:.9rem; }
.footer__nav { display:flex; flex-wrap:wrap; gap:1rem 1.6rem; }
.footer__nav a { color:#c9d6e2; text-decoration:none; font-size:.88rem; }
.footer__nav a:hover { color:#fff; }
.footer__copy { font-size:.75rem; color:#8fa2b5; }

/* ---------- 20. 追従CTA（モバイル） ----------
   撤去済み。ヘッダーの .nav__cta が全画面・全スクロール位置で常時表示になり、
   同じ「話を聞いてみる」が画面内に二重に出る状態になったため。 */

/* ---------- 22. FOR YOU タブ（選択中はテーマのアクセント色） ---------- */
.tabs__nav { display:grid; grid-template-columns:1fr; gap:.6rem; margin-bottom:var(--space-2xl); }
@media (min-width:640px){ .tabs__nav { grid-template-columns:1fr 1fr; } }
.tabs__btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:1rem 1.4rem; border:1.5px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-white); cursor:pointer; text-align:left;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.tabs__btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
/* 主＝対象者ラベル / 副＝訴求コピー */
.tabs__ttl { font-weight:900; font-size:1.05rem; color:var(--color-text); }
.tabs__sub { font-size:.86rem; color:var(--color-text-sub); }
/* 選択中タブの地は「スコープ内アクセント」1本
   （A=スカイブルー / B=反転セクション内の明るい青）。 */
.tabs__btn.is-active { background:var(--color-accent); border-color:var(--color-accent); box-shadow:var(--shadow-md); }
.tabs__btn.is-active .tabs__ttl, .tabs__btn.is-active .tabs__sub { color:#fff; }

.panel[hidden] { display:none; }
.panel__lead { font-size:var(--fs-lead); font-weight:700; line-height:1.9; margin-bottom:var(--space-xl); max-width:840px; color:var(--color-accent-dark); }
.panel__block { margin-top:var(--space-3xl); margin-bottom:var(--space-lg); }
.panel__h { font-size:var(--fs-h3); font-weight:900; }
.panel__sub { color:var(--color-text-sub); font-size:.95rem; margin-top:.3rem; }
.panel__cta { margin-top:var(--space-2xl); text-align:center; }
.panel__cta-note { color:var(--color-text-sub); font-size:var(--fs-small); margin-top:.8rem; }

/* パネルは「箱」を持たない。他セクションと同じく、セクション背景の上に
   中身のコンポーネントが直接載る見せ方に統一する。
   ペルソナごとの色味は :root[data-theme] のページ全体切替が担当する。 */
.panel--a, .panel--b {
  background:none; border:0; border-radius:0; padding:0;
}

/* ---------- 23. ペルソナ・テーマ切替（B は #foryou のみ反転） ---------- */
/* 全ページ切替トグル。
   以前は常時 fixed 表示で、モバイルでは画面下部に居座って他のUIと帯を奪い合っていた。
   いまは #foryou（切替が意味を持つ唯一のセクション）を見ている間だけ、
   ヘッダー直下にスライドインする。表示制御は main.js の IntersectionObserver。 */
.ptoggle {
  position:fixed; top:70px; left:50%;
  z-index:850; display:flex; gap:.25rem; padding:.28rem;
  background:rgba(255,255,255,.985); backdrop-filter:blur(10px);
  border:1px solid var(--color-border); border-radius:var(--radius-full); box-shadow:var(--shadow-lg);
  transform:translate(-50%,-.75rem); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.ptoggle.is-visible { transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.ptoggle__label { display:none; }
.ptoggle__btn {
  font-family:var(--font-heading); font-weight:700; font-size:.78rem; letter-spacing:.02em;
  padding:.5rem 1.1rem; border:none; border-radius:var(--radius-full);
  background:transparent; color:var(--color-text-sub); cursor:pointer; white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
/* 選択中の地はペルソナの持ち色（A=スカイブルー / B=ダークネイビー）。
   トグルは fixed でセクションの外にあるため、スコープ切替の対象外。
   B の紺は #foryou の反転色と揃え「どちらのモードか」を示す */
.ptoggle__btn.is-active { color:#fff; background:var(--color-accent); }
.ptoggle__btn[data-persona="b"].is-active { background:#1A2B3D; }
/* 狭幅ではヘッダー直下に収まるよう文字を詰める（下端固定はやめた） */
@media (max-width:600px){
  .ptoggle { top:64px; }
  .ptoggle__btn { padding:.45rem .8rem; font-size:.72rem; }
}

/* ===== テーマB: 未経験・異業種 = #foryou セクションだけダークネイビーに反転 =====
   変遷: ページ全体のダーク反転（全体が見にくい）→ 全体のアクセント振替
   （深い青では変化が分からない）を経て、「変化の範囲」を絞り「変化の強さ」を上げる
   現方式に落ち着いた:
   - 色が変わるのは FOR YOU セクション内だけ。ページの他の場所は一切変わらない
   - セクション内は紺地（ブランドの文字色 #1A2B3D 系）に明色テキストの反転で、
     切り替わったことがひと目で分かる
   - アクセントはパレットの明るい青（#5CB8E6/#7BD0F2）— 青系統から出ない
   カスタムプロパティを #foryou 要素に定義することで、セクション内の var() 参照
   （.section--alt の地・カード・見出し・数字）だけが再解決される。 */
:root[data-theme="b"] #foryou {
  --color-white:#1e2f43;
  --color-bg-light:#172536;
  --color-text:#eaf1f8;
  --color-text-sub:#9fb3c6;
  --color-border:rgba(255,255,255,.12);
  --color-accent:#5CB8E6;
  --color-accent-dark:#8fd3f5;
  --color-accent-light:#7BD0F2;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:0 18px 44px rgba(0,0,0,.55);
  /* body から継承する computed color は再解決されないため、セクション自身で宣言し直す */
  color:var(--color-text);
}
/* テーマ切替時、アクセント色を使う要素が一斉に snap しないよう色系プロパティだけ
   淡く遷移させる。:where() で詳細度ゼロにしてあるため、要素固有の transition
   （transform / opacity / clip-path 等のクラス指定）が常に勝つ */
body :where(a, p, h1, h2, h3, dt, dd, li, span, strong, button, input, select, textarea, figcaption, div, section, footer, header) {
  transition-property:color, background-color, border-color, box-shadow;
  transition-duration:.4s;
}

/* ---------- 24. 社員インタビュー（LP #interviews ダイジェスト帯 + interviews/ 詳細ページ） ---------- */
/* LP: #voices 内のインタビューバナー置き場（3カードの下に縦積み。増えたらそのまま追加） */
.ivcards { margin-top:var(--space-xl); display:grid; gap:var(--space-xl); }
.ivcard {
  display:grid; overflow:hidden; text-decoration:none; color:inherit;
  background:var(--color-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  transition:transform .25s ease, box-shadow .25s ease, background-color .4s ease;
}
@media (min-width:860px){ .ivcard { grid-template-columns:5fr 7fr; } }
.ivcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.ivcard__img { overflow:hidden; background:linear-gradient(135deg,#dcedf8,var(--color-bg-light)); }
.ivcard__img img { width:100%; height:auto; object-fit:cover; aspect-ratio:16/10; transition:transform .6s ease; }
/* デスクトップ: 画像を絶対配置にして本文側がカード高さを決める（画像ロードでレイアウトが動かない = CLS 予約） */
@media (min-width:860px){
  .ivcard__img { position:relative; min-height:260px; }
  .ivcard__img img { position:absolute; inset:0; height:100%; aspect-ratio:auto; }
}
.ivcard:hover .ivcard__img img { transform:scale(1.04); }
.ivcard__img.is-missing img { display:none; }
.ivcard__body { padding:var(--space-xl); display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; }
.ivcard__tag {
  font-size:.78rem; font-weight:700; color:var(--color-accent-dark);
  background:rgba(42,155,214,.12); border-radius:var(--radius-full); padding:.2em 1em;
}
.ivcard__title { font-size:var(--fs-h3); font-weight:900; line-height:1.5; text-wrap:balance; }
.ivcard__excerpt { color:var(--color-text-sub); font-size:.95rem; }
.ivcard__more { font-weight:700; color:var(--color-accent-dark); text-decoration:underline; text-underline-offset:.3em; }

/* 詳細ページ（interviews/*.html）: main.js を読まない静的ページ用 */
.iv-nav {
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); box-shadow:var(--shadow-sm);
}
.iv-nav__inner { display:flex; align-items:center; justify-content:space-between; padding-block:.6rem; }
/* 詳細ページのヘッダーも LP と同じ「ロゴ + 募集要項 + 話を聞いてみる」の3点構成。
   .iv-nav .btn は .nav__cta より詳細度が高く狭幅の縮小指定を上書きしてしまうので、
   ここでもブレークポイントを持たせる。 */
.iv-nav .btn { padding:.6rem 1.3rem; font-size:.85rem; }
.iv-nav__inner { gap:.8rem; }
@media (max-width:520px) {
  .iv-nav__inner { gap:.5rem; }
  .iv-nav .btn { padding:.5rem .75rem; font-size:.76rem; }
}

.iv-hero { background:var(--color-bg-light); padding-block:var(--space-3xl); }
.iv-hero__tag {
  display:inline-block; font-size:.78rem; font-weight:700; color:var(--color-accent-dark);
  background:rgba(42,155,214,.12); border-radius:var(--radius-full); padding:.2em 1em;
}
.iv-hero__title { font-size:var(--fs-h2); font-weight:900; line-height:1.4; margin:.9rem 0 var(--space-lg); text-wrap:balance; }
.iv-hero__lead { color:var(--color-text-sub); font-size:var(--fs-lead); line-height:2; max-width:760px; }
.iv-hero__note { margin-top:var(--space-lg); font-size:var(--fs-small); color:var(--color-text-sub); }

.iv-body {
  max-width:calc(760px + var(--container-pad) * 2); margin-inline:auto; padding-inline:var(--container-pad);
  padding-block:var(--space-3xl); display:flex; flex-direction:column; gap:var(--space-2xl);
}
.iv-figure img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.iv-figure figcaption { font-size:var(--fs-small); color:var(--color-text-sub); padding-top:.6rem; }

.iv-profile { background:var(--color-bg-light); border-radius:var(--radius-lg); padding:var(--space-xl); }
.iv-profile h2 { font-size:var(--fs-h3); font-weight:900; margin-bottom:.6rem; }
.iv-profile h2 span { font-size:var(--fs-small); font-weight:500; color:var(--color-text-sub); margin-left:.8em; }
.iv-profile p { font-size:.95rem; color:var(--color-text-sub); }

.iv-section h2 { font-size:clamp(1.35rem, 2.4vw, 1.75rem); font-weight:900; line-height:1.5; margin-bottom:var(--space-lg); text-wrap:balance; }
.iv-q { font-weight:700; color:var(--color-accent-dark); margin:var(--space-xl) 0 .6rem; display:flex; gap:.7rem; align-items:baseline; }
.iv-q::before { content:"Q"; font-family:var(--font-heading); font-weight:800; font-size:1.1em; color:var(--color-accent); flex-shrink:0; }
.iv-section > p, .iv-a { margin-bottom:1rem; }

.iv-voice { background:var(--color-bg-light); border-radius:var(--radius-lg); padding:var(--space-xl); }
.iv-voice h2 { font-size:var(--fs-h3); font-weight:900; margin-bottom:.4rem; }
.iv-voice__prof { font-size:var(--fs-small); color:var(--color-text-sub); margin-bottom:var(--space-lg); }
.iv-voice p { margin-bottom:1rem; }
.iv-voice p:last-child { margin-bottom:0; }

.iv-source { background:var(--color-bg-light); border-radius:var(--radius-md); padding:var(--space-lg) var(--space-xl); font-size:var(--fs-small); color:var(--color-text-sub); }
.iv-source a { word-break:break-all; }

.iv-cta { text-align:center; background:var(--color-bg-light); border-radius:var(--radius-lg); padding:var(--space-2xl) var(--space-xl); }
.iv-cta h2 { font-size:var(--fs-h3); font-weight:900; margin-bottom:.75rem; }
.iv-cta p { color:var(--color-text-sub); margin-bottom:var(--space-lg); }

/* ---------- 21. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .spell span { opacity:1; transform:none; }
  .msg__banner img { clip-path:none; }
  .photo-duo__item img { clip-path:none; }
  .grain { display:none; }
}