/*
Theme Name: REFLAME 2026
Theme URI: https://reflame.co.jp/
Author: 株式会社REFLAME
Description: 株式会社REFLAMEコーポレートサイトのオリジナルテーマ（クラシックPHP）。デザイン正本は output/07_webサイト/phase1/デザインルール_v2.md。旧テーマ original からの移行用に旧LPテンプレートを同梱している。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: reflame2026
*/

/* ================================================================
   ここから下は output/07_webサイト/phase1/assets/style.css の逐語コピー。
   デザインを直すときは phase1 側を直してこのファイルへ再同期する
   （WordPress固有の補正は assets/css/wp.css に分離してある）。
   ================================================================ */

/* ================================================================
   デザインルール v2 準拠（正本: デザインルール_v2.md・unidge式翻訳）
   トークン外の生値の直書きは禁止（例外はコメントで宣言）
   ================================================================ */
:root{
  /* fonts */
  --font-mincho: 'Zen Old Mincho', serif;
  --font-en: 'Cormorant Garamond', serif;
  --font-body: 'Noto Sans JP', sans-serif;

  /* sizes */
  --fs-fv: clamp(1.75rem, 2.9vw, 2.8rem); /* 写真グリッド型FVの左カラム用に再定義（2026-07-24） */
  --fs-en-xl: clamp(2.75rem, 5.5vw, 4.375rem);
  --fs-h: clamp(1.5rem, 2.5vw, 2rem);
  --fs-name: clamp(1.4rem, 2.2vw, 1.75rem);
  --fs-lead: 1.125rem;
  --fs-h2: 1.5rem;     /* 中見出し（24px・現行サイト実測 2026-07-27）記事本文h2/serviceの子見出し等 */
  --fs-h3: 1.1875rem;  /* 小見出し（19px） */
  --fs-pull: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-body: 1rem;
  --fs-s: .875rem;
  --fs-xs: .6875rem; /* 必須/任意バッジ等の極小ラベル（11px・2026-07-27追加） */
  --fs-en-s: 1rem;

  /* letter-spacing / line-height */
  --ls-label: .08em;
  --ls-en: .3em; /* 英字ラベルの広い字送り（FVのPHILOSOPHY等）。v2で定義漏れ→2026-07-27復活 */
  --ls-h: -0.04em;
  --ls-body: .04em;
  --ls-0: 0;
  --lh-1: 1.0;
  --lh-tight: 1.35;
  --lh-fv: 1.62;
  --lh-body: 1.75;
  --lh-news: 1.5;

  /* spacing */
  --sp-nudge: .375rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem; /* 大区切り（FVページネーションの上）。v2で定義漏れ→2026-07-27復活 */
  --sp-sec: clamp(6.5rem, 13vw, 11rem);
  --sp-col: clamp(2.5rem, 6vw, 6rem);
  --pad-x: clamp(1.25rem, 4vw, 3rem);

  /* container */
  --w-max: 1140px;
  --w-narrow: 840px;

  /* colors */
  --ink: #101828;
  --ink-2: #39424E;
  --mute: #667085;
  --label: #98A2B3;
  --paper: #FCFCFA;
  --paper-2: #F4F5F1;
  --hair: #E4E7EC;
  --w1: #C62828;
  --w2: #1976D2;
  --w3: #388E3C;
  /* FVスイープ専用のソフトトーン（深色は原色感が強いため使わない・ルールv2）
     ※FVは赤×青のみ（緑sw3は2026-07-24廃止） */
  --sw1: #E57373;
  --sw2: #64B5F6;
  /* 本人提供リファレンス画像の再現（2026-07-23・ブランド規律の例外。理由はルールv2参照）
     ⚠この最新版リファレンスはファイル未保存のため目視推定（旧business.pngより高彩度）。
     正確な値が要る場合は当該画像をimg/へ保存後、実測して差し替える */
  --g-shin: linear-gradient(135deg,#FF7A2E 0%,#F0402F 45%,#C41E3A 100%);
  --g-chu:  linear-gradient(135deg,#14C6E3 0%,#2F6FE4 45%,#1B2E86 100%);
  --g-ken:  linear-gradient(135deg,#D6E14E 0%,#7FCB4A 45%,#159160 100%);

  /* shape / motion */
  --r-card: 8px;
  --r-hero: 2rem; /* 下層ヘッダーに本文パネルが被さる角丸（2026-07-27） */
  --ease-1: cubic-bezier(.25,.1,.25,1);
  --ease-2: cubic-bezier(.75,0,.11,.99);
}
/* 旧テーマの reset.css は *,::before,::after に
   overflow-wrap:break-word; word-break:break-word を掛けており、長いURL・型番・英単語が
   どこでも折り返っていた。新テーマの reset には無く、さらに下の body{overflow-x:hidden} が
   あるため溢れた分は切れてスクロールもできない＝ユーザーから到達不能になる。
   ・word-break:break-word は仕様上非推奨の別名なので採用しない
   ・overflow-wrap:anywhere は min-content 幅を縮めるため flex/grid の内在サイズが
     全ページで動く。break-word は内在サイズに影響しないので副作用が小さい方を選ぶ */
*{margin:0;padding:0;box-sizing:border-box; overflow-wrap:break-word}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}

/* ---- 共通ロール ---- */
.t-en{ /* 英字（Garamond） */
  font-family:var(--font-en); font-weight:500;
  line-height:var(--lh-1); letter-spacing:normal;
}
/* 見出しh2: トップ(.sec)だけでなく下層(.sub-section)にも適用。
   下層は未定義でブラウザ既定(24pxゴシック)になっており、ルール「和文見出し=明朝」から
   外れていた既存バグを2026-07-27に修正。記事本文h2は後段の .article-body h2 が上書きする */
.sec h2,
.sub-section h2{
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-h); letter-spacing:var(--ls-h); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
  margin-bottom:var(--sp-3);
}
.arr{
  flex:none; width:2.2em; height:2.2em; border-radius:999px;
  border:1px solid var(--hair); color:var(--mute);
  display:grid; place-items:center;
  font-family:var(--font-en);
  transition:background .25s, color .25s, border-color .25s;
}

/* ---- セクション頭（unidge式・全セクション共通） ---- */
.sec-head{
  display:grid; grid-template-columns:minmax(220px,320px) 1fr;
  gap:var(--sp-4) var(--sp-col);
  align-items:start;
}
@media (max-width:900px){ .sec-head{grid-template-columns:1fr} }
.sh-jp{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-1);
  font-feature-settings:'palt' 1;
  color:var(--ink);
}
.sh-en{
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-en-xl); line-height:var(--lh-1);
  color:var(--ink);
  margin-top:var(--sp-nudge);
}

/* ================= header ================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-2) var(--pad-x);
  background:rgba(252,252,250,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand-logo{height:1.625rem; width:8.66rem; display:block} /* 例外値: ロゴ原寸比(322.22:60.49)由来 */
.nav{display:flex; align-items:center; gap:clamp(1rem, 2.3vw, 2rem)}
.nav a{
  text-decoration:none;
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-en-s); line-height:var(--lh-1);
}
.nav a:hover{opacity:.55}
.nav .cta{
  background:var(--ink); color:#fff; border-radius:999px;
  padding:.55em 1.3em;
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-s);
  letter-spacing:var(--ls-body);
  /* ★透明の枠線を入れておく理由: 隣の .cta-alt が 1.5px の枠線を持つため、
     こちらに枠線が無いと2つのボタンの高さが3pxずれて並びが崩れる。 */
  border:1.5px solid transparent;
  white-space:nowrap;
  /* min-height（モバイル）を効かせるため。inline のままでは高さ指定が無視される。 */
  display:inline-flex; align-items:center;
}
/* ヘッダーCTAは2本（求職者向け／法人向け）。宛先を明示するための対比なので、
   塗り＝求職者・白抜き＝法人にして役割の違いを形でも伝える（.cv-btn.secondary と同じ作法）。 */
/* ★セレクタは必ず .nav を付ける。土台が .nav .cta（詳細度0,2,0）なので
   .cta-alt や .cta だけ（0,1,0）で書くと読み込み順に関係なく負けて無効になる。
   2026-07-31にこれを踏み、375pxで文字が縮まず法人ボタンも塗りのままになった。 */
.nav .cta-group{display:inline-flex; align-items:center; gap:var(--sp-nudge)}
.nav .cta-alt{background:transparent; color:var(--ink); border-color:var(--ink)}
.nav .cta:hover{opacity:.85}

/* ---- ハンバーガー（980px以下） ----
   PC幅では非表示。ドロワーの中身は .nav をそのまま使い回すのでリンクの二重管理をしない。 */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; cursor:pointer;
  color:var(--ink);
  /* ★「メニュー」の文字ラベルを外した（2026-07-31 本人指示）ため、
     中身は 1.375rem(22px) の線だけになる。ボタンの当たり判定が22pxになると
     指で押しづらいので、幅も高さも 44px を明示で確保する。 */
  min-width:2.75rem; min-height:2.75rem;
}
.nav-toggle-bars{position:relative; display:block; width:1.375rem; height:.75rem}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:var(--ink);
  transition:transform .25s var(--ease-1), top .25s var(--ease-1);
}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars::after{top:calc(.75rem - 1.5px)}
/* 開いている時は×に */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:calc(.375rem - .75px); transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:calc(.375rem - .75px); transform:rotate(-45deg)}

/* 暗幕。ヘッダー(z-index:40)より下に置き、ロゴと×は暗幕の上に残す。
   ★display:none を既定にして、980px以下のブロックでだけ block に戻す理由:
     暗幕とスクロール固定を body.nav-open だけで制御すると、
     「スマホでメニューを開いたままPC幅にリサイズ」した時に nav-open が残り、
     暗幕がページ全面を覆いスクロールも固まる（2026-07-31に実測で再現）。
     どの幅でモバイル扱いかはCSSのメディアクエリが正であり、JSに判断させない。 */
.nav-scrim{
  display:none;
  position:fixed; inset:0; z-index:35;
  background:rgba(16,24,40,.42);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease-1);
}

/* 981〜1200px は「テキストリンク6本 ＋ CTA2本」が同時に並ぶ最も窮屈な帯。
   ★CTAを2本にした結果、981pxでロゴと SERVICE の隙間が0pxになった（実測）。
     1本だった頃は122px空いていたので、増やしたぶんをここで吸収する。 */
@media (max-width:1200px){
  .nav{gap:clamp(.7rem, 1.5vw, 1.25rem)}
  .nav .cta{padding:.5em 1.05em; font-size:.8125rem}
}

@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav-scrim{display:block}
  body.nav-open .nav-scrim{opacity:1; pointer-events:auto}
  body.nav-open{overflow:hidden} /* 背面のスクロールを止める。この幅の中だけで有効 */
  /* ★position:absolute を使う理由: .site-header に backdrop-filter が掛かっており、
     これが fixed 子孫の包含ブロックになるため position:fixed は意図どおり効かない。
     ヘッダー直下にぶら下がるドロップダウン型にする。 */
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--sp-2) var(--pad-x) var(--sp-4);
    background:var(--paper);
    border-top:1px solid var(--hair);
    box-shadow:0 18px 40px rgba(16,24,40,.10);
    max-height:calc(100dvh - 100%);
    overflow-y:auto; overscroll-behavior:contain;
  }
  /* 閉じている状態。★body.js が付いている時だけ閉じる。
     JSが動いていない環境で閉じたままになると、リンクに一切到達できなくなるため。 */
  body.js .nav{
    visibility:hidden; opacity:0; transform:translateY(-.5rem);
    transition:opacity .25s var(--ease-1), transform .25s var(--ease-1), visibility .25s;
  }
  body.js.nav-open .nav{visibility:visible; opacity:1; transform:none}

  .nav a:not(.cta){
    display:flex; align-items:center;
    min-height:3rem; /* 48px */
    font-size:1.0625rem; letter-spacing:var(--ls-en);
    border-bottom:1px solid var(--hair);
  }
  .nav a:not(.cta):hover{opacity:1; color:var(--mute)}
  .nav .cta-group{flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3)}
  .nav .cta{width:100%; justify-content:center; min-height:3.25rem; font-size:var(--fs-s)}
}

@media (max-width:400px){
  .brand-logo{height:1.45rem; width:7.7rem} /* 例外値: ハンバーガーと並べるため少し縮める */
}

/* ================= FV（写真グリッド型・上司指定 2026-07-24） =================
   左=REFLAMEワードマーク＋PHILOSOPHY＋コピー / 右=社員写真グリッド8枚（5セット輪番） */
.fv{
  position:relative; z-index:1;
  min-height:100vh;
  display:grid; grid-template-columns:minmax(380px, 42%) 1fr;
  overflow:hidden;
  background:linear-gradient(105deg, #fff 55%, #F0F3F6 100%);
  padding-top:4rem; /* 例外値: 固定ヘッダー高さぶん */
}
@media (max-width:900px){ .fv{grid-template-columns:1fr; min-height:auto} }
.fv-left{
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-6) var(--pad-x);
}
.fv-wordmark{
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(3.4rem, 6.4vw, 6rem); line-height:var(--lh-1);
  letter-spacing:.02em; color:var(--ink);
}
.fv-phil{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin:var(--sp-3) 0 var(--sp-5);
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-s); letter-spacing:var(--ls-en); color:var(--mute);
}
.fv-phil::before{content:""; width:2.4em; height:1px; background:var(--label)}
/* FVの主見出し（3波スイープ）
   ★2026-07-30 復旧: FVを8枚の写真グリッドに作り替えた際、隣接していたこのブロックを
     .fv-visual と一緒に誤って削除していた。結果、h1がブラウザ既定（ゴシック太字）になり、
     .line の display:block も失われて3行が1段落として流れ、「する／きっかけ」の間で
     禁則を無視した改行が起きていた。charSweep（赤→青→墨）も消えていた。
     コミット 23fef75 の内容を逐語で戻す。 */
.fv-title{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-fv);
  line-height:var(--lh-fv);
  letter-spacing:var(--ls-0); /* char分割でpalt不能のため 0（v2例外則） */
  color:var(--ink);
}
.fv-title .line{display:block}
.fv-title .ch{display:inline-block}
body.js-sweep .fv-title .ch{
  color:transparent;
  animation:charSweep 2.1s var(--ease-1) both;
  animation-delay:calc(.35s + var(--i) * .085s);
}
@keyframes charSweep{
  /* FVは赤×青のみ（緑の波は廃止・2026-07-24） */
  0%   {color:transparent}
  22%  {color:var(--sw1)}
  58%  {color:var(--sw2)}
  100% {color:var(--ink)}
}
.fv-sub{
  margin-top:var(--sp-4);
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-body);
  font-feature-settings:'palt' 1;
  color:var(--ink-2);
}
/* ページネーション（写真セット01-05の輪番表示） */
/* ★2026-07-30時点で未使用（マークアップから外した）。
   写真セットが5組に増えて輪番を再開するときに使うので残している。消さないこと。 */
.fv-pager{
  display:flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-7);
  font-family:var(--font-en); font-size:var(--fs-en-s); color:var(--mute);
}
.fv-pager-track{position:relative; width:9em; height:1px; background:var(--hair)}
.fv-pager-dot{
  position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:999px;
  background:var(--ink);
  transition:left .6s var(--ease-1);
}
/* FV右側=社員写真グリッド（2026-07-30に正式写真8枚へ差し替え。それまでは仮画像1枚だった）
   ★旧実装の .fv-visual img{position:absolute; inset:0} は「1枚を敷く」ための指定で、
     8枚グリッドになると全部が重なって1枚しか見えなくなる。よって削除し、
     画像の指定は .fv-cell img 側に集約した。 */
.fv-visual{
  position:relative; overflow:hidden;
  background:transparent; /* 余白は .fv の淡いグラデを透かす（色を1つ増やさない） */
  min-height:calc(100vh - 4rem);
  display:flex; align-items:center;
}
@media (max-width:900px){ .fv-visual{min-height:auto; display:block} }

/* ================= FVの写真グリッド（8枚・3/2/3）=================
   2026-07-30 正式写真の第一弾8枚を受領して実装（それまでは仮画像1枚を敷いていた）。

   ★余白を完全に均一にするための組み方: 12カラムを基盤にする。
     列幅をu・gapをgとすると
       PC 上下段の1枚(span4) = 4u+3g ／ 中段の1枚(span6) = 6u+5g
       行の総幅 = 3(4u+3g)+2g = 12u+11g ／ 2(6u+5g)+g = 12u+11g  ← どちらの行も一致
     つまり gap を1つ指定するだけで縦横すべての余白が同じになり、
     中段だけ自動的に1.5倍幅になる。
     6カラムでも同じ性質は作れるが、スマホで分割位置を細かく動かしたいので12にしている。

   ★全セルを aspect-ratio 5/4 に固定し object-fit:cover で埋める。
     素材の実寸がバラついても（中段の2枚だけ1402px・他は約1000px）、
     また差し替えてもレイアウトは崩れない＝リサイズ作業が不要。
   ================================================================ */
.fv-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--sp-nudge); /* 縦横で同じ値＝均一余白 */
  align-content:center;
  width:100%; height:100%;
  padding:var(--sp-nudge);
}
.fv-cell{
  position:relative; overflow:hidden;
  aspect-ratio:5 / 4;          /* 支給素材が全て5:4なので素の比率を維持できる */
  background:var(--paper-2);   /* 読み込み前の下地。白飛びを防ぐ */
  grid-column:span 4;          /* PC 上下段=3枚 */
}
.fv-cell.is-wide{grid-column:span 6} /* PC 中段=2枚 */
.fv-cell img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 22%; /* 顔が中心よりやや上にあるため */
}
/* 読み込み後に順に立ち上げる（FVは初期表示なのでIntersectionObserverは即発火する）。
   ★スマホ・タブレットは共通の `body.js .reveal`（下から22pxフェード・0.8秒）に任せる。
     以前ここに `body.js .fv-cell{opacity:0; transform:translateY(14px)}` を置いていたが、
     同詳細度(0,2,1)の `body.js .reveal` が後方の行にあるため負けていて一度も効いていなかった。
     二重定義で読み手を惑わせるだけなので削除した（見た目は変わらない）。
     PC幅の動きは後段の @media (min-width:901px) が担当する。 */
.fv-grid .fv-cell:nth-child(1){transition-delay:.02s}
.fv-grid .fv-cell:nth-child(2){transition-delay:.08s}
.fv-grid .fv-cell:nth-child(3){transition-delay:.14s}
.fv-grid .fv-cell:nth-child(4){transition-delay:.20s}
.fv-grid .fv-cell:nth-child(5){transition-delay:.26s}
.fv-grid .fv-cell:nth-child(6){transition-delay:.32s}
.fv-grid .fv-cell:nth-child(7){transition-delay:.38s}
.fv-grid .fv-cell:nth-child(8){transition-delay:.44s}

@media (max-width:900px){
  /* タブレットは2枚ずつ4行。span を揃えるだけで余白は均一のまま */
  .fv-grid > .fv-cell,
  .fv-grid > .fv-cell.is-wide{grid-column:span 6}
}

@media (max-width:640px){
  /* ★スマホ専用のずらし配置（2026-07-30 本人指示）
     2枚×4行の整列が「顔が並ぶ壁」に見えて怖い、という指摘への対応。
       ①8枚→6枚に絞る
       ②行ごとに分割位置を変えて、縦の継ぎ目が1本の線にならないようにする

     分割（12カラム基盤なので余白は均一のまま）:
       1行目  7 | 5   … 継ぎ目は7列目と8列目の間
       2行目  5 | 7   … 継ぎ目は5列目と6列目の間
       3行目  6 | 6   … 継ぎ目は6列目と7列目の間

     ★最初は 4|2 相当で試したが、幅が2倍差になって小さい方が親指サイズになり、
       下に大きな空白が空いて「抜け」ではなく「崩れ」に見えたので却下した。
       7|5 なら幅差は約1.4倍に収まり、どちらの顔も判別できる。
     ★行の高さを固定して同じ行の2枚を揃える（aspect-ratioを解除）。
       高さが揃わないと下に空白が残って崩れに見える。
       横長写真が正方形寄りに切り取られるが、人物が中央にいるので破綻しない。 */
  .fv-cell{aspect-ratio:auto}
  .fv-grid{grid-auto-rows:clamp(130px, 40vw, 190px)}

  /* 非表示にする2枚。DOM順の3番目と8番目＝どちらもスーツの男性で、
     残る6枚（女性3・男性3）と画づくりが重複するため外した。
     別の2枚にしたい場合はこのnth-childの番号を差し替えるだけでよい。
     ※注意: display:none でも画像の読み込みは発生する（約80KB分）。
       削りたい場合は <picture> で srcset を出し分ける改修が必要。 */
  .fv-grid .fv-cell:nth-child(3),
  .fv-grid .fv-cell:nth-child(8){display:none}

  .fv-grid .fv-cell:nth-child(1){grid-column:1 / span 7}
  .fv-grid .fv-cell:nth-child(2){grid-column:8 / span 5}
  .fv-grid .fv-cell:nth-child(4){grid-column:1 / span 5}
  .fv-grid .fv-cell:nth-child(5){grid-column:6 / span 7}
  .fv-grid .fv-cell:nth-child(6){grid-column:1 / span 6}
  .fv-grid .fv-cell:nth-child(7){grid-column:7 / span 6}
}
/* ================= FV写真の出現アニメーション（PC専用・案A / 2026-07-31 本人選択） =================
   左右から幕が開くワイプ ＋ 中の画像が1.14倍から等倍へゆっくり引く。
   奇数枚は左から・偶数枚は右から開くので、横に並んだ写真が交互にめくれてリズムが出る。

   ★新しい動きを発明していない。下層ヒーローの巨大英字（.sub-title-en）と
     /company/ の宣言文（.stmt）が同じ clip-path ワイプ＋ --ease-2 で出るので、
     サイト全体の所作が揃う。これが4案の中からこれを選んだ理由。

   ★詳細度を `body.js .fv-cell.reveal`（0,3,1）にしている理由:
     共通の `body.js .reveal`（0,2,1）が後方の行にあり、同詳細度だと行順で負ける。
     行の位置に依存しない形にして、将来ファイルを並べ替えても壊れないようにする。

   ★901px以上に限定する理由:
     スマホ・タブレットは共通の .reveal のまま尺を伸ばさない。
     細い回線で2秒の演出は「演出」ではなく「待ち時間」に見える。

   ★尺は実測1.99秒（最大遅延0.49s ＋ 画像の1.5s）。この尺のあいだ写真は
     「まだ描画されていない」と測定されるためLCPが約2秒になる。
     Googleの「良好」2.5秒には収まるが、これ以上伸ばすと余裕が無くなる。
     ずらしを0.07秒より広げたくなったら、先に画像のtransitionを短くすること。 */
@media (min-width:901px){
  body.js .fv-cell.reveal{
    opacity:1; transform:none;              /* フェードと移動は使わない。ワイプだけで見せる */
    clip-path:inset(0 100% 0 0);            /* 右を100%削る＝左から開く */
    transition:clip-path .85s var(--ease-2);
    transition-delay:var(--fvd, 0s);
  }
  body.js .fv-cell.reveal:nth-child(2n){clip-path:inset(0 0 0 100%)} /* 偶数は右から開く */
  body.js .fv-cell.reveal img{
    transform:scale(1.14);
    transition:transform 1.5s var(--ease-1);
    transition-delay:var(--fvd, 0s);
  }
  body.js .fv-cell.reveal.in{clip-path:inset(0 0 0 0)}
  body.js .fv-cell.reveal.in img{transform:none}

  /* ずらし。セルと中の画像で同じ値を使うのでカスタムプロパティに持たせる。
     上の .fv-grid .fv-cell:nth-child(N){transition-delay} はPCではこれに上書きされ、
     スマホ・タブレットではそのまま生きる。 */
  .fv-grid .fv-cell:nth-child(1){--fvd:0s}
  .fv-grid .fv-cell:nth-child(2){--fvd:.07s}
  .fv-grid .fv-cell:nth-child(3){--fvd:.14s}
  .fv-grid .fv-cell:nth-child(4){--fvd:.21s}
  .fv-grid .fv-cell:nth-child(5){--fvd:.28s}
  .fv-grid .fv-cell:nth-child(6){--fvd:.35s}
  .fv-grid .fv-cell:nth-child(7){--fvd:.42s}
  .fv-grid .fv-cell:nth-child(8){--fvd:.49s}
}

/* ================= sections共通 ================= */
main{position:relative; z-index:5}
.sec{position:relative; background:#fff; padding:var(--sp-sec) var(--pad-x)}
.sec-inner{max-width:var(--w-max); margin-inline:auto}
.sec-inner > *{width:100%}

/* reveal */
body.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-1), transform .8s var(--ease-1)}
body.js .reveal.in{opacity:1; transform:none}

/* BUSINESSカードの左→右 順次表示（同じ階段技法・2026-07-23追記） */
.biz-grid .biz-card:nth-child(1){transition-delay:0s}
.biz-grid .biz-card:nth-child(2){transition-delay:.15s}
.biz-grid .biz-card:nth-child(3){transition-delay:.3s}

/* biz-cardはカーソル傾き(transform)と出現(reveal)が衝突するため、
   出現をtranslate個別プロパティに分離（汎用reveal規則より高詳細度で上書き・2026-07-23） */
body.js .biz-card.reveal{
  opacity:0; translate:0 22px;
  transform:perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transition:opacity .8s var(--ease-1), translate .8s var(--ease-1),
             transform .3s var(--ease-1), box-shadow .3s var(--ease-1);
}
body.js .biz-card.reveal.in{
  opacity:1; translate:0 0;
  transform:perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
}

/* ================= VISION（v20ダークシネマ・パーティクルシアター移植 2026-07-26） =================
   出典: 2026-07-08_トップページ_v20.html。粒子=左56%キャンバス・テキスト=右カラム・
   スクロールで墨背景(#0B0C0E)にクロスフェードし文字が白点灯（.lit）。暗背景の許容はVISIONのみ（憲法どおり） */
#vision{padding:0; position:relative; background:#fff}
.vision-theater{position:relative; min-height:215vh}
.vt-bg{
  position:absolute; inset:0; z-index:0;
  background:#0B0C0E; /* 例外値: v20の墨（ネイビー禁止・VISIONダークシネマ専用） */
  opacity:0; pointer-events:none; transition:opacity 200ms linear;
}
.vt-stage{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center}
.vt-canvas{position:absolute; left:0; top:0; bottom:0; width:56%; z-index:0; pointer-events:none}
.vt-canvas canvas{width:100%; height:100%; display:block}
.vt-fg{position:relative; z-index:2; margin-top:-100vh; padding:16vh 0 10vh}
/* v20の幾何担保: コピー左端をビューポート基準58vwに固定（canvas右端56%との丸被り防止） */
.vt-wrap{padding-left:58vw; padding-right:var(--pad-x)}
.vt-copy{
  position:relative; z-index:2;
  max-width:min(36em, 42vw);
  color:var(--ink);
  padding:var(--sp-4) 0;
}
@media (max-width:900px){
  .vt-wrap{padding-left:var(--pad-x)}
  .vt-copy{max-width:36em}
  .vt-canvas{width:100%; opacity:.3}
}
.vt-copy, .vt-copy .sh-jp, .vt-copy .sh-en, .vt-copy .sec-title,
.vt-copy .vision-lead, .vt-copy .verbatim, .vt-copy .vision-ai, .vt-copy .vision-name{
  transition:color .45s var(--ease-1), border-color .45s var(--ease-1);
}
.vt-head{
  grid-template-columns:1fr;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.vt-copy .sec-title{
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-h); letter-spacing:var(--ls-h); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
  margin-bottom:0;
}
.vt-copy .vision-lead{
  font-family:var(--font-mincho); font-weight:500;
  font-size:clamp(1.1rem, 1.7vw, 1.4rem); line-height:2.15; letter-spacing:.03em; /* 例外値: v20実測の踏襲 */
  font-feature-settings:'palt' 1;
  margin-bottom:1.2em;
}
.vt-copy .verbatim{
  border-left:2px solid var(--ink);
  padding-left:clamp(16px, 2vw, 26px); /* 例外値: v20実測の踏襲 */
  font-size:var(--fs-body); line-height:2.15; letter-spacing:var(--ls-body);
  color:var(--ink-2);
  margin:1.6em 0;
}
.vt-copy .vision-ai{
  font-size:var(--fs-body); line-height:2.15;
  border-top:1px solid var(--hair);
  padding-top:clamp(28px, 3.5vw, 40px); margin-top:2em; /* 例外値: v20実測の踏襲 */
}
.vt-copy .vision-name{
  font-family:var(--font-mincho); font-weight:500;
  font-size:clamp(1.15rem, 1.8vw, 1.5rem); line-height:2.05; letter-spacing:.04em; /* 例外値: v20実測の踏襲 */
  font-feature-settings:'palt' 1;
  margin-top:clamp(16px, 2vw, 24px);
}
.vt-copy .vision-name .re{letter-spacing:.06em}
.vt-copy.lit{color:#fff}
.vt-copy.lit .sh-jp, .vt-copy.lit .sh-en{color:#fff}
.vt-copy.lit .sec-title, .vt-copy.lit .vision-lead, .vt-copy.lit .verbatim,
.vt-copy.lit .vision-ai, .vt-copy.lit .vision-name{color:#fff}
.vt-copy.lit .verbatim{border-left-color:#fff}
.vt-copy.lit .vision-ai{border-top-color:rgba(255,255,255,.28)}

/* REFRAME→REFLAME タイポグラフィック・モーション（v20移植・1回のみ） */
.re-flip{
  font-family:var(--font-mincho); font-weight:600;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing:.2em; color:#fff; /* 例外値: v20実測の踏襲 */
  margin-top:clamp(32px, 4vw, 52px); line-height:1.4;
}
.re-flip span{display:inline-block}
.re-flip .rf-stack{position:relative; display:inline-block; overflow:hidden; vertical-align:bottom}
.re-flip .rf-r{position:absolute; left:0; top:0; opacity:0}
.re-flip .rf-l{display:inline-block}
body.js .re-flip .rf-r{opacity:1; transform:none; transition:opacity 450ms var(--ease-1) 900ms, transform 450ms var(--ease-1) 900ms}
body.js .re-flip .rf-l{opacity:0; transform:translateY(45%); transition:opacity 450ms var(--ease-1) 900ms, transform 450ms var(--ease-1) 900ms}
body.js .re-flip.in .rf-r{opacity:0; transform:translateY(-45%)}
body.js .re-flip.in .rf-l{opacity:1; transform:translateY(0)}

/* reduced-motion: 墨背景・粒子を捨て、紙背景＋墨文字の通常フロー（v20移植） */
@media (prefers-reduced-motion: reduce){
  .vision-theater{min-height:0}
  .vt-stage{position:static; height:auto}
  .vt-canvas, .vt-bg{display:none}
  .vt-fg{margin-top:0; padding:var(--sp-sec) 0 calc(var(--sp-sec) * .6)}
  .vt-wrap{padding-left:var(--pad-x)}
  .vt-copy{max-width:36em; margin-inline:auto}
}

/* ================= BUSINESS ================= */
.sec-business{
  background:#fff; /* 本人指示 2026-07-26: 白ベタ（色玉グラデも同日削除） */
}
.sec-business .sec-inner{position:relative; z-index:1}

/* ================= CONSULTANT（2026-07-24新設） ================= */
.sec-ca{background:#fff}
.sec-ca .sec-head{
  grid-template-columns:minmax(30rem, 34rem) 1fr;
}
@media (max-width:1100px){ .sec-ca .sec-head{grid-template-columns:1fr} }
.ca-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3);
  margin-top:var(--sp-5);
}
@media (max-width:900px){ .ca-grid{grid-template-columns:1fr} }
.ca-card{display:flex; flex-direction:column; gap:var(--sp-2); text-decoration:none}
.ca-photo{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  aspect-ratio:3/4; /* 例外値: 写真原寸比 */
  background:#DDE4EA;
}
.ca-photo img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease-1)}
.ca-card:hover .ca-photo img{transform:scale(1.04)}
.ca-tag{
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  color:var(--mute);
}
.ca-name{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-lead); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
  color:var(--ink);
}
.ca-note{font-size:var(--fs-s); color:var(--ink-2); letter-spacing:var(--ls-body); line-height:var(--lh-body)}
.biz-lead{
  font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
  color:var(--ink-2);
}
.biz-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
  margin-top:var(--sp-5);
}
@media (max-width:900px){ .biz-grid{grid-template-columns:1fr} }
.biz-card{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  min-height:clamp(300px, 26vw, 400px); /* 例外値: カード比率専用 */
  padding:var(--sp-4);
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--sp-2);
  text-decoration:none; color:#fff;
  /* カーソル連動の3D傾き（unidgeの視差ニュアンス再現・2026-07-23）。JSが--tiltX/Yを更新 */
  transform:perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transition:transform .3s var(--ease-1), box-shadow .3s var(--ease-1);
  /* グラデーション自体が動く挙動（2026-07-23再調整: 「動いて見えない」FBを受け
     300%面×9秒×大振幅へ増幅。始点=終点の閉ループ＋linearで減速なし） */
  background-size:300% 300%;
  animation:bizGradientMove 9s linear infinite;
}
@keyframes bizGradientMove{
  0%   { background-position:0%   0%; }
  25%  { background-position:100% 40%; }
  50%  { background-position:70%  100%; }
  75%  { background-position:10%  70%; }
  100% { background-position:0%   0%; }
}
/* 周期をカード別に変える（公倍数が大きい=ループが同期せずランダムに見える） */
.biz-card.shin{background-image:var(--g-shin); animation-duration:11s}
.biz-card.chu {background-image:var(--g-chu);  animation-duration:9s}
.biz-card.ken {background-image:var(--g-ken);  animation-duration:13s}
/* 開始位相もずらす */
.biz-grid .biz-card:nth-child(2){animation-delay:-3.7s}
.biz-grid .biz-card:nth-child(3){animation-delay:-7.9s}
.biz-card::before{
  /* 柔らかい光の帯（カーブ）。3枚同柄はNG（本人FB 2026-07-23）
     → 光の方向・カーブ位置・周期をカード別に定義し、量産コピー感を消す
     カーソル視差: translate個別プロパティはkeyframesのtransformと合成される（2026-07-23） */
  content:""; position:absolute; pointer-events:none;
  /* カーソル視差: translate×var×擬似要素はChromiumで更新されないバグがあるためleft/top方式 */
  inset:-20%;
  left:calc(-20% + var(--glowX, 0px));
  top:calc(-20% + var(--glowY, 0px));
  transition:left .35s ease-out, top .35s ease-out;
}
/* 転職支援事業: 右上からの光＋右上起点の大きな弧（基準形）＋シアン/ネイビーの混色ブロブ */
.biz-card.chu::before{
  background:
    radial-gradient(ellipse 55% 130% at 84% 10%, rgba(255,255,255,.6), transparent 58%),
    radial-gradient(circle at 128% -22%, transparent 48%, rgba(255,255,255,.48) 58%, rgba(255,255,255,.14) 66%, transparent 76%),
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(90,225,255,.4), transparent 60%),
    radial-gradient(ellipse 80% 70% at 88% 88%, rgba(15,20,90,.45), transparent 62%);
  animation:cardGlowDrift 11s ease-in-out infinite alternate;
}
/* 就職支援事業: 左上からの光＋左下を回る浅い弧（左右反転系）＋アプリコット/深紅の混色ブロブ */
.biz-card.shin::before{
  background:
    radial-gradient(ellipse 60% 120% at 18% 8%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(circle at -30% 118%, transparent 52%, rgba(255,255,255,.42) 62%, rgba(255,255,255,.12) 70%, transparent 80%),
    radial-gradient(ellipse 75% 65% at 80% 22%, rgba(255,190,110,.42), transparent 58%),
    radial-gradient(ellipse 85% 70% at 20% 92%, rgba(140,10,60,.4), transparent 62%);
  animation:cardGlowDrift2 14s ease-in-out infinite alternate;
}
/* 建設業界向けキャリア支援事業: 天頂からの光＋右下を回る深い弧（縦系）＋ライム/深緑の混色ブロブ */
.biz-card.ken::before{
  background:
    radial-gradient(ellipse 130% 55% at 55% -8%, rgba(255,255,255,.5), transparent 56%),
    radial-gradient(circle at 115% 135%, transparent 44%, rgba(255,255,255,.45) 55%, rgba(255,255,255,.13) 64%, transparent 74%),
    radial-gradient(ellipse 70% 60% at 14% 20%, rgba(235,250,140,.45), transparent 58%),
    radial-gradient(ellipse 85% 75% at 85% 90%, rgba(5,80,55,.45), transparent 62%);
  animation:cardGlowDrift3 17s ease-in-out infinite alternate;
}
@keyframes cardGlowDrift{
  from{ transform:translate(-4%, -3%) rotate(-2deg) scale(1); }
  to{ transform:translate(4%, 3%) rotate(2deg) scale(1.08); }
}
@keyframes cardGlowDrift2{
  from{ transform:translate(3%, -4%) rotate(2deg) scale(1.06); }
  to{ transform:translate(-4%, 2%) rotate(-1.5deg) scale(1); }
}
@keyframes cardGlowDrift3{
  from{ transform:translate(-3%, 4%) rotate(1.5deg) scale(1); }
  to{ transform:translate(3%, -3%) rotate(-2deg) scale(1.07); }
}
.biz-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* 下部スクリム＋グレイン（unidgeの粒子感ニュアンス・2026-07-23） */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E") repeat,
    linear-gradient(to top, rgba(16,24,40,.30), transparent 46%);
}
.biz-card > *{position:relative; z-index:1}
.biz-card:hover{--lift:-5px; box-shadow:0 18px 44px rgba(16,24,40,.18)}
.biz-card > .biz-en{
  position:absolute; z-index:1;
  top:var(--sp-4); left:var(--sp-4); right:var(--sp-4);
  text-align:right;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.92);
}
.biz-name{
  font-family:var(--font-mincho); font-weight:600;
  font-size:clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
  max-width:12em;
}
.biz-row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-2)}
.biz-hook{
  font-size:var(--fs-s); line-height:var(--lh-body); letter-spacing:var(--ls-body);
  color:rgba(255,255,255,.9);
}
.biz-card .arr{border-color:rgba(255,255,255,.75); color:#fff}
.biz-card:hover .arr{background:#fff; color:var(--ink); border-color:#fff}

/* ================= NEWS ================= */
.news-list{list-style:none}
.news-list li{border-bottom:1px solid var(--hair)}
.news-list li:first-child{border-top:1px solid var(--hair)}
.news-list a{display:block; padding:var(--sp-3) 0; text-decoration:none}
.news-meta{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.news-date{font-size:var(--fs-en-s); color:var(--mute)}
.news-cat{
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-s); line-height:var(--lh-1); letter-spacing:var(--ls-label);
  color:var(--mute);
  border:1px solid var(--hair); border-radius:999px; padding:.1em .8em;
}
.news-body{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3)}
.news-title{
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-lead); letter-spacing:var(--ls-label); line-height:var(--lh-news);
  font-feature-settings:'palt' 1;
  color:var(--ink-2);
}
.news-list a:hover .news-title{color:var(--ink)}
.news-list a:hover .arr{background:var(--ink); border-color:var(--ink); color:#fff}
@media (max-width:640px){ .news-body .arr{display:none} }

/* ================= CONTACT ================= */
.sec-contact{position:relative; background:var(--paper-2); overflow:hidden}
.sec-contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* 2026-07-30: 事業部3色（水色/赤/緑）のウォッシュを廃止し、墨の濃淡だけにした（本人決定）。
     3点の配置・大きさ・広がりはそのまま残し、色だけ --ink #101828 の低アルファへ置換している。
     ★ブランド規約（.claude/CLAUDE.md 鉄則7 / skill reflame-brand-colors）は
       「事業部カラーは必ずグラデーション」と定めているが、コーポサイトの背景ウォッシュは
       その例外として事業部色を使わない。グラデに戻さないこと。 */
  background:
    radial-gradient(circle at 8% 18%,  rgba(16,24,40,.055), transparent 46%),
    radial-gradient(circle at 92% 22%, rgba(16,24,40,.038), transparent 46%),
    radial-gradient(circle at 55% 108%, rgba(16,24,40,.05),  transparent 50%);
}
.sec-contact .sec-inner{position:relative}
.cv-grid{display:grid; grid-template-columns:1fr 1fr; margin-top:var(--sp-5)}
@media (max-width:767px){ .cv-grid{grid-template-columns:1fr} }
.cv-col{
  padding:var(--sp-5) var(--sp-col);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-3);
}
.cv-col + .cv-col{border-left:1px solid var(--hair)}
@media (max-width:767px){
  .cv-col + .cv-col{border-left:none; border-top:1px solid var(--hair)}
}
.cv-copy{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-lead); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
}
.cv-note{font-size:var(--fs-s); color:var(--mute); letter-spacing:var(--ls-body); line-height:var(--lh-body)}
.cv-btn{
  display:inline-block; text-decoration:none; font-weight:700;
  font-family:var(--font-body);
  font-size:var(--fs-body); letter-spacing:var(--ls-body);
  border-radius:999px; padding:.9em 2.4em;
  transition:opacity .2s, transform .2s;
  margin-top:var(--sp-2);
}
.cv-btn:hover{opacity:.85; transform:translateY(-2px)}
.cv-btn.primary{background:var(--ink); color:#fff}
.cv-btn.secondary{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
/* セクション末尾の「一覧へ」導線。トップのCONSULTANT/NEWSは3件しか出しておらず、
   一覧への入口がヘッダーとフッターにしか無かった（2026-07-31 本人指摘）。
   新しい部品は起こさず既存の .cv-btn.secondary を中央に置くだけにする。 */
.sec-more{display:flex; justify-content:center; margin-top:var(--sp-5)}

/* ================= footer（墨紺ベタ・横断ニュートラル） ================= */
.site-footer{
  position:relative; z-index:5; /* fixedのFV(z1)/ヴェール(z3)より前面に。無指定だとFVに隠れる */
  background:var(--ink); color:#fff;
  padding:var(--sp-sec) var(--pad-x) var(--sp-4);
}
.foot-inner{max-width:var(--w-max); margin-inline:auto}
.foot-main{
  display:grid; grid-template-columns:1fr auto auto;
  gap:var(--sp-5) var(--sp-col);
  margin-bottom:var(--sp-6);
}
@media (max-width:767px){ .foot-main{grid-template-columns:1fr} }
.foot-brand{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-lead); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
}
.foot-brand small{
  display:block; margin-top:var(--sp-2);
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-en-s); line-height:var(--lh-1);
  color:rgba(255,255,255,.55);
}
.foot-col{display:flex; flex-direction:column; gap:var(--sp-2)}
.foot-col-title{
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-en-s); line-height:var(--lh-1);
  color:rgba(255,255,255,.45);
}
.foot-col a{
  font-size:var(--fs-s); color:rgba(255,255,255,.85);
  text-decoration:none; letter-spacing:var(--ls-body);
}
.foot-col a:hover{color:#fff}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:var(--sp-3);
  display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; justify-content:space-between;
}
.foot-bottom a{
  font-size:var(--fs-s); color:rgba(255,255,255,.6);
  text-decoration:none; letter-spacing:var(--ls-body);
}
.foot-bottom a:hover{color:#fff}
.foot-copy{
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-en-s); line-height:var(--lh-1);
  color:rgba(255,255,255,.45);
}

/* ================= sub pages ================= */
.nav a.is-current{opacity:.55}
.sub{padding-top:4rem; background:#fff}
/* ================= 下層ヘッダー（interg式・2026-07-27）
   構成: ①トップCONTACTと同一のカラーウォッシュ背景 ②英字大＋和文小の見出し（書体は変更なし）
        ③背景を流れる巨大英字マーキー ④本文パネルが角丸で被さる
   ================= */
.sub-hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(320px, 46vh, 500px);
  /* 下は見出しがマーキーに重ならない余白を確保（intergは上下に分離している） */
  padding:calc(var(--sp-sec) * .6) var(--pad-x) clamp(6.5rem, 12vw, 10rem);
  background:var(--paper-2); /* トップCONTACTと同一（本人指定） */
}
.sub-hero::before{ /* CONTACTセクションと同一の墨ウォッシュ（2026-07-30に3色→モノクロ化） */
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  /* 2026-07-30: 事業部3色（水色/赤/緑）のウォッシュを廃止し、墨の濃淡だけにした（本人決定）。
     3点の配置・大きさ・広がりはそのまま残し、色だけ --ink #101828 の低アルファへ置換している。
     ★ブランド規約（.claude/CLAUDE.md 鉄則7 / skill reflame-brand-colors）は
       「事業部カラーは必ずグラデーション」と定めているが、コーポサイトの背景ウォッシュは
       その例外として事業部色を使わない。グラデに戻さないこと。 */
  background:
    radial-gradient(circle at 8% 18%,  rgba(16,24,40,.055), transparent 46%),
    radial-gradient(circle at 92% 22%, rgba(16,24,40,.038), transparent 46%),
    radial-gradient(circle at 55% 108%, rgba(16,24,40,.05),  transparent 50%);
}
.sub-hero > .sub-inner{position:relative; z-index:1; width:100%}

/* 背景を流れる巨大英字（JSが .sub-title-en から生成・装飾） */
.hero-marquee{
  position:absolute; left:0; right:0; bottom:-.14em; z-index:-1;
  display:flex; width:max-content;
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(5rem, 13vw, 13.75rem);
  line-height:1; letter-spacing:.1em; white-space:nowrap;
  color:#fff; opacity:.55;
  pointer-events:none; user-select:none;
}
.hero-marquee span{display:inline-block; padding-inline:.28em}
.hero-marquee .track{display:flex; animation:heroMarquee 90s linear infinite}
.hero-marquee .track:nth-child(2){animation-delay:-45s}
@keyframes heroMarquee{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* 本文パネルが角丸でヒーローに被さる（intergの signature） */
.sub-hero + .sub-section{
  position:relative; z-index:1;
  border-radius:var(--r-hero) var(--r-hero) 0 0;
  margin-top:calc(var(--r-hero) * -1);
}

@media (max-width:767px){ :root{--r-hero:1.25rem} }

.sub-hero .sec-head{
  grid-template-columns:minmax(360px, 420px) 1fr;
  align-items:end;
}
@media (max-width:900px){ .sub-hero .sec-head{grid-template-columns:1fr} }
.sub-title{
  display:grid;
  justify-items:start;
  gap:var(--sp-nudge);
  overflow:hidden;
}
.sub-title-jp{
  display:block;
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
  color:var(--ink);
}
.sub-hero .sub-title-en{
  display:block;
  font-family:var(--font-en); font-weight:500;
  font-size:6.25rem;
  line-height:var(--lh-1); letter-spacing:var(--ls-0);
  color:var(--ink);
}
body.js .sub-title.reveal{
  opacity:1;
  transform:none;
  transition:none;
}
body.js .sub-title.reveal .sub-title-jp{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s var(--ease-1), transform .65s var(--ease-1);
}
body.js .sub-title.reveal .sub-title-en{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateY(18px);
  transition:
    opacity .9s var(--ease-1) .12s,
    clip-path .95s var(--ease-2) .12s,
    transform .95s var(--ease-2) .12s;
}
body.js .sub-title.reveal.in .sub-title-jp{
  opacity:1;
  transform:none;
}
body.js .sub-title.reveal.in .sub-title-en{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transform:none;
}
@media (max-width:840px){
  .sub-hero .sub-title-en{font-size:3.75rem}
}
@media (max-width:420px){
  .sub-hero .sub-title-en{font-size:3.2rem}
}
@media (max-width:360px){
  .sub-hero .sub-title-en{font-size:2.9rem}
}
.sub-hero h1{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-en-xl); line-height:var(--lh-tight); letter-spacing:var(--ls-0);
  font-feature-settings:'palt' 1;
}
.sub-lead{
  margin-top:var(--sp-3);
  font-size:var(--fs-lead); line-height:var(--lh-body); letter-spacing:var(--ls-body);
  color:var(--ink-2);
}
.sub-section{padding:var(--sp-sec) var(--pad-x); background:#fff}
.sub-section.is-paper{background:var(--paper-2)}
.sub-section.is-tight{padding-top:var(--sp-6)}
.sub-inner{max-width:var(--w-max); margin-inline:auto}
.narrow{max-width:var(--w-narrow); margin-inline:auto}
.sub-reading{
  font-size:var(--fs-body); line-height:2; letter-spacing:var(--ls-body);
  color:var(--ink-2);
}
.sub-reading p + p{margin-top:var(--sp-2)}
.quote-block{
  border-left:2px solid var(--ink);
  padding-left:var(--sp-3);
  margin-top:var(--sp-3);
  font-size:var(--fs-body); line-height:2.1; letter-spacing:var(--ls-body);
  color:var(--ink-2);
}

/* ===== companyのVISION: 逐語を1行ずつ立ち上げ、左罫線が上から伸びる（2026-07-27 本人指示） ===== */
.vision-lines{
  position:relative;
  border-left:none; /* 罫線は::beforeで描いてアニメーションさせる */
}
.vision-lines::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--ink);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.4s var(--ease-1);
}
body.js .vision-lines.lit::before{transform:scaleY(1)}
.vision-lines p{line-height:2.1}
.vision-lines p + p{margin-top:1.1em} /* 例外値: 宣言文の行間リズム */
.vision-lines p.key{
  font-family:var(--font-mincho); font-weight:600;
  color:var(--ink);
}
/* 1行ずつの時間差（表示は上から順に） */
.vision-lines p:nth-child(1){transition-delay:.05s}
.vision-lines p:nth-child(2){transition-delay:.13s}
.vision-lines p:nth-child(3){transition-delay:.21s}
.vision-lines p:nth-child(4){transition-delay:.29s}
.vision-lines p:nth-child(5){transition-delay:.37s}
/* 6行目以降が抜けていたので延長（2026-07-30）。宣言文は11行あり、
   途中から時間差が消えると「上から順に読ませる」意図が途切れていた */
.vision-lines p:nth-child(6){transition-delay:.45s}
.vision-lines p:nth-child(7){transition-delay:.53s}
.vision-lines p:nth-child(8){transition-delay:.61s}
.vision-lines p:nth-child(9){transition-delay:.69s}
.vision-lines p:nth-child(10){transition-delay:.77s}
.vision-lines p:nth-child(11){transition-delay:.85s}
.vision-lines p:nth-child(6){transition-delay:.45s}
.vision-lines p:nth-child(7){transition-delay:.53s}
.vision-lines p:nth-child(8){transition-delay:.61s}
.vision-lines p:nth-child(9){transition-delay:.69s}
.vision-lines p:nth-child(10){transition-delay:.77s}
.vision-lines p:nth-child(11){transition-delay:.85s}
@media (prefers-reduced-motion: reduce){
  .vision-lines::before{transform:scaleY(1)}
}

/* ===== PROFILE: 2カラム解除・ラベルの下に詳細（2026-07-27 本人指示） ===== */
.profile-head .company-list{margin-top:var(--sp-5)}
.text-link-btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-4);
  text-decoration:none;
  font-family:var(--font-en); font-size:var(--fs-lead); line-height:var(--lh-1);
}
.text-link-btn:hover .arr{background:var(--ink); border-color:var(--ink); color:#fff}

.company-list{
  display:grid;
  border-top:1px solid var(--hair);
}
.company-list .row{
  display:grid; grid-template-columns:minmax(10rem, 15rem) 1fr;
  gap:var(--sp-3);
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--hair);
}
.company-list dt{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-body);
}
.company-list dd{
  color:var(--ink-2); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 社名が単語途中で折り返すのを防ぐ（2026-07-27修正）
   ①補助情報なのでfs-sへ ②列は入る時だけ2列（auto-fill）③日本語は語中で切らない */
.client-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap:.45rem var(--sp-3);
  list-style:none;
  font-size:var(--fs-s);
}
.client-list li{min-width:0; word-break:keep-all; overflow-wrap:anywhere}
@media (max-width:767px){
  .company-list .row{grid-template-columns:1fr; gap:var(--sp-2)}
  .client-list{grid-template-columns:1fr}
}

/* ================= service（階層構造・2026-07-27 本人指示で並列5件から再編） =================
   ①人材紹介（親）＋3事業（子・画像×テキストの左右交互） ②法人様へ（独立ブロック）
   写真は後日差し込み: figure.svc-photo の中に <img> を入れるだけでプレースホルダが隠れる */
.svc-lead{
  margin-top:var(--sp-3);
  line-height:var(--lh-body); letter-spacing:var(--ls-body); color:var(--ink-2);
}

/* 写真枠（未挿入時はラベル付きプレースホルダ） */
.svc-photo{
  position:relative; overflow:hidden;
  border-radius:var(--r-card);
  aspect-ratio:4/3; /* 例外値: 事業写真の想定比率 */
  background:var(--paper-2);
  display:grid; place-items:center;
}
.svc-photo::after{ /* 未挿入時のラベル。imgが入ると下に隠れる */
  content:attr(data-ph);
  font-family:var(--font-en); font-size:var(--fs-s); letter-spacing:var(--ls-en);
  color:var(--label);
}
.svc-photo img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 子: 3事業（写真なしの連番インデックス型・2026-07-30 本人指示「写真を全廃し区切りとレイアウトでメリハリ」）
   ★以前は「4:3の写真枠｜テキスト」の2カラムを左右交互に並べていた（.svc-children/.svc-item）。
     写真を全廃したのでその構造は撤去し、事業を「索引」として組み直した。
     骨格は既存の .sec-head（狭いラベル左／広い内容右）と同一にしてある＝
     会社概要・お知らせ・コラムと同じ骨格になり、ページ間で組みが1つに揃う。
   ★区切りは1pxの罫線と大きな連番。色の面を使わないので静謐さを保てる。
   ★写真が用意できたら、この右カラムの中に画を足すだけで拡張できる（構造を作り替えずに済む）。 */
.svc-list{margin-top:var(--sp-6); border-top:1px solid var(--hair)}
.svc-row{
  display:grid; grid-template-columns:minmax(14rem, 18rem) 1fr; gap:var(--sp-col);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--hair);
}
.svc-idx{display:flex; flex-direction:column; gap:var(--sp-2)}
.svc-num{
  font-family:var(--font-en); font-weight:500; line-height:var(--lh-1);
  font-size:clamp(3rem, 5.5vw, 4.5rem); /* 例外値: 索引番号。見出しスケールとは別軸の「番号」なので独立させる */
  color:var(--ink); letter-spacing:-.02em;
}
.svc-row h3{
  font-family:var(--font-mincho); font-weight:600;
  /* --fs-h2（24px）を使う。--fs-h（32px）はセクションのh2と同値になり階層が潰れる。
     トークンの定義にも「--fs-h2 = serviceの子見出し」と書いてある。
     このブロックの視覚のアンカーは見出しではなく48pxの連番が担う。 */
  font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:var(--ls-h);
  font-feature-settings:'palt' 1; color:var(--ink);
  margin-bottom:var(--sp-3);
}
.svc-row p{font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); color:var(--ink-2)}
.svc-row p + p{margin-top:var(--sp-2)}
@media (max-width:900px){
  .svc-row{grid-template-columns:1fr; gap:var(--sp-3); padding:var(--sp-5) 0}
}

/* 写真枠。2026-07-30時点で未使用（serviceページから写真を全廃したため）。
   撮影後に .svc-row の右カラムへ差し込めるよう残している。消さないこと。 */
.svc-photo{
  position:relative; overflow:hidden;
  border-radius:var(--r-card);
  aspect-ratio:4/3; /* 例外値: 事業写真の想定比率 */
  background:var(--paper-2);
  display:grid; place-items:center;
}
.svc-photo img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 事業ラベル（英字＋和文・上に事業部色の細帯） */
.svc-eyebrow{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.svc-eyebrow::before{
  content:""; width:3rem; height:3px; border-radius:999px;
  background:var(--hair);
}
.shin .svc-eyebrow::before{background:var(--g-shin)}
.chu  .svc-eyebrow::before{background:var(--g-chu)}
.ken  .svc-eyebrow::before{background:var(--g-ken)}
.corp-text .svc-eyebrow::before{background:var(--ink)}
.svc-en{
  font-family:var(--font-en); font-size:var(--fs-en-s); line-height:var(--lh-1);
  color:var(--mute);
}
.svc-name{ /* 事業名＝識別ラベル。親h2(32px)＞子h3(24px)＞ラベル(18px)の階層を守る */
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-lead); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
}
/* .svc-text は写真全廃に伴い撤去した（見出しと本文の指定は .svc-row 側へ移動）。
   .corp-text は法人様へで生きているので残す。 */
.corp-text p{
  line-height:var(--lh-body); letter-spacing:var(--ls-body); color:var(--ink-2);
}

/* ② 法人様へ */
/* 法人様へ。写真カラムが無くなったので、3事業と同じ「狭いラベル左／広い内容右」に揃える */
.corp-block{
  display:grid; grid-template-columns:minmax(14rem, 18rem) 1fr;
  gap:var(--sp-4) var(--sp-col);
}
@media (max-width:900px){ .corp-block{grid-template-columns:1fr; gap:var(--sp-3)} }
.corp-text p + p{margin-top:var(--sp-2)}
.corp-text h2{margin-bottom:var(--sp-3)}
.corp-text .cv-btn{margin-top:var(--sp-3)}

.consultant-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-5) var(--sp-3);
}
.person-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  text-decoration:none;
}
.person-photo{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  aspect-ratio:3/4; background:#DDE4EA;
}
.person-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-1)}
.person-card:hover .person-photo img{transform:scale(1.04)}
.person-role{
  font-size:var(--fs-s); line-height:var(--lh-1); letter-spacing:var(--ls-label);
  color:var(--mute);
}
.person-name{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-lead); line-height:var(--lh-tight); letter-spacing:var(--ls-label);
  font-feature-settings:'palt' 1;
}
.person-link{
  font-family:var(--font-en); font-size:var(--fs-en-s); line-height:var(--lh-1);
  color:var(--mute);
}
@media (max-width:900px){ .consultant-grid{grid-template-columns:1fr} }

.profile-hero{
  display:grid; grid-template-columns:minmax(18rem, 24rem) 1fr;
  gap:var(--sp-col); align-items:end;
}
.profile-photo{
  overflow:hidden; border-radius:var(--r-card); aspect-ratio:3/4; background:#DDE4EA;
}
.profile-photo img{width:100%; height:100%; object-fit:cover; display:block}
.profile-meta{display:grid; gap:var(--sp-3)}
.profile-role{
  color:var(--mute); font-size:var(--fs-s); letter-spacing:var(--ls-label);
}
.profile-name{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-en-xl); line-height:var(--lh-tight); letter-spacing:var(--ls-0);
  font-feature-settings:'palt' 1;
}
.profile-en{
  font-family:var(--font-en); font-size:var(--fs-lead); line-height:var(--lh-1);
  color:var(--mute);
}
/* ===== コンサルタント個別: 項目ごとに組版を変えてメリハリを付ける（2026-07-27・box-hr構成参考） =====
   ラベル（左・小＋英字）｜回答（右）の2カラム。回答は性格別に組版が異なる */
.cs-facts{display:grid; margin-top:var(--sp-5); border-top:1px solid var(--hair)}
.cs-fact{
  display:grid; grid-template-columns:minmax(9rem, 12rem) 1fr;
  gap:var(--sp-3) var(--sp-col);
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--hair);
}
@media (max-width:767px){ .cs-fact{grid-template-columns:1fr; gap:var(--sp-2)} }
.cs-fact dt{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-lead); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  font-feature-settings:'palt' 1;
  color:var(--ink);
}
.cs-label-en{
  display:block; margin-bottom:var(--sp-nudge);
  font-family:var(--font-en); font-weight:500;
  font-size:var(--fs-xs); letter-spacing:var(--ls-en); line-height:var(--lh-1);
  color:var(--label);
}
/* ①経歴＝読ませる本文 */
.cs-prose{line-height:var(--lh-body); letter-spacing:var(--ls-body); color:var(--ink-2)}
.cs-prose p + p{margin-top:var(--sp-2)}
/* ②得意領域＝タグで一目に */
.cs-tagrow{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2)}
.cs-tagkey{
  flex:none; font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); color:var(--mute);
}
.cs-tags{display:flex; flex-wrap:wrap; gap:.5rem}
.cs-tag{
  font-size:var(--fs-s); letter-spacing:var(--ls-body); color:var(--ink-2);
  border:1px solid var(--hair); border-radius:999px; padding:.3em 1em;
  background:#fff;
}
/* ③主な実績＝before→afterの構造で見せる */
.cs-results{list-style:none; display:grid; gap:var(--sp-3)}
.cs-results li{display:grid; gap:var(--sp-2)}
.cs-person{
  justify-self:start;
  font-family:var(--font-body); font-weight:700;
  font-size:var(--fs-s); letter-spacing:var(--ls-body);
  color:var(--ink);
  border-left:3px solid var(--ink); padding-left:.6em;
}
.cs-move{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--sp-2);
}
@media (max-width:767px){
  .cs-move{grid-template-columns:1fr}
  .cs-move .cs-arrow{transform:rotate(90deg); justify-self:start}
}
.cs-from,.cs-to{
  display:flex; flex-direction:column; gap:.35em;
  font-size:var(--fs-s); letter-spacing:var(--ls-body); line-height:var(--lh-tight);
  border-radius:var(--r-card); padding:var(--sp-2);
}
.cs-from{background:var(--paper-2); color:var(--mute)}
.cs-to{background:#fff; border:1px solid var(--hair); color:var(--ink)}
.cs-pay{
  font-family:var(--font-en); font-weight:500; font-size:var(--fs-en-s);
  font-variant-numeric:tabular-nums; /* 年収の桁を揃える */
}
.cs-to .cs-pay{color:var(--w2)} /* 転職後の年収を事業部色（転職支援=青）で強調 */
.cs-arrow{color:var(--label); font-family:var(--font-en)}
/* ④部活・趣味＝軽い補足 */
.cs-note{font-size:var(--fs-s); line-height:var(--lh-body); color:var(--ink-2)}
.cs-note p + p{margin-top:.3em}
.voice-box{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:var(--sp-4) 0;
  margin-top:var(--sp-5);
}
@media (max-width:767px){ .profile-hero{grid-template-columns:1fr} }

.archive-list{list-style:none; border-top:1px solid var(--hair)}
.archive-list li{border-bottom:1px solid var(--hair)}
.archive-list a{
  display:grid; grid-template-columns:minmax(8rem, 11rem) 1fr auto;
  gap:var(--sp-3);
  align-items:center;
  padding:var(--sp-3) 0;
  text-decoration:none;
}
.archive-meta{display:flex; flex-direction:column; gap:.45rem}
.archive-date{
  font-family:var(--font-en); font-size:var(--fs-en-s); line-height:var(--lh-1);
  color:var(--mute);
}
.archive-cat{
  width:max-content;
  border:1px solid var(--hair); border-radius:999px; padding:.1em .75em;
  font-size:var(--fs-s); color:var(--mute); line-height:var(--lh-tight);
}
.archive-title{
  font-family:var(--font-mincho); font-weight:500;
  font-size:var(--fs-lead); line-height:var(--lh-news); letter-spacing:var(--ls-label);
  font-feature-settings:'palt' 1;
}
.archive-list a:hover .archive-title{color:var(--ink)}
.archive-list a:hover .arr{background:var(--ink); border-color:var(--ink); color:#fff}
.pager{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:var(--sp-5);
}
.pager a,.pager span{
  min-width:2.4rem; min-height:2.4rem;
  display:grid; place-items:center;
  border:1px solid var(--hair); border-radius:999px;
  text-decoration:none; color:var(--ink-2);
  font-family:var(--font-en); line-height:var(--lh-1);
}
.pager .is-current{background:var(--ink); color:#fff; border-color:var(--ink)}
@media (max-width:640px){
  .archive-list a{grid-template-columns:1fr; gap:var(--sp-2)}
  .archive-list .arr{display:none}
}

/* 記事詳細（現行サイト準拠・2026-07-27）
   ヒーロー=セクション名のみ／記事タイトルは本文側の通常h1（実測32px）。
   .sub-hero h1(70px)に飲まれていた問題を、本文側へ移動して解消 */
.article-head{
  max-width:var(--w-narrow); margin-inline:auto;
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--hair);
}
.article-title{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-h); line-height:var(--lh-tight); letter-spacing:var(--ls-h);
  font-feature-settings:'palt' 1;
  /* text-wrap:balance は行長を均等化するため早い位置で折り返す→2026-07-27に削除（本人判断B） */
}
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-3); color:var(--mute); font-size:var(--fs-s);
}
.article-body{
  max-width:var(--w-narrow); margin:var(--sp-5) auto 0;
  color:var(--ink-2); line-height:2; letter-spacing:var(--ls-body);
}
/* 記事本文タイポ（現行サイト準拠・h4まで使用されるため一通り整備 2026-07-27）
   WPエディタが出力する要素（h2-h4/p/ul/ol/blockquote/img/table）に効かせる */
.article-body h2{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:var(--ls-label);
  font-feature-settings:'palt' 1;
  color:var(--ink);
  margin:var(--sp-5) 0 var(--sp-3);
  padding-bottom:.5em; border-bottom:1px solid var(--hair);
}
.article-body h3{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-h3); line-height:var(--lh-tight); letter-spacing:var(--ls-label);
  font-feature-settings:'palt' 1;
  color:var(--ink);
  margin:var(--sp-4) 0 var(--sp-2);
}
.article-body h4{
  font-family:var(--font-body); font-weight:700;
  font-size:var(--fs-body); line-height:var(--lh-tight); letter-spacing:var(--ls-body);
  color:var(--ink);
  margin:var(--sp-3) 0 var(--sp-2);
}
.article-body p + p{margin-top:var(--sp-2)}
.article-body ul,.article-body ol{margin:var(--sp-2) 0 var(--sp-3); padding-left:1.4em}
.article-body li + li{margin-top:.4em}
/* マーカーが本文（--ink-2）と同じ濃さだと文字と競合するので一段落とす。
   旧サイトは reset の list-style:none でマーカー自体が消えていた（=箇条書きが装飾ゼロ）が、
   新テーマは reset で潰さず部品ごとに消す設計なので本文リストにはマーカーを出す（実測170個/42本）。 */
.article-body li::marker{color:var(--mute)}
.article-body blockquote{
  margin:var(--sp-3) 0; padding:var(--sp-2) var(--sp-3);
  border-left:2px solid var(--hair); color:var(--mute);
}
/* 区切り線。reset の *{margin:0} が効いて余白が0になる上、
   .article-body p + p は <p>同士にしか効かないので hr 直後の <p> にも上余白が付かない。
   hr 自身に上下余白を持たせて両方を一度に解決する。 */
.article-body hr{
  margin:var(--sp-4) 0;
  border:0; border-top:1px solid var(--hair);
}
.article-body img{display:block; margin:var(--sp-3) auto; border-radius:var(--r-card)}
/* 段落直下の強調。実測 2,631個/118本（1記事あたり平均22個）。
   旧サイトは linear-gradient のグレー蛍光ペンだったが、その密度では強調が強調として
   機能していないため、装飾レイヤーを足さず「本文 --ink-2 → 強調 --ink」の濃度差＋
   ウェイトだけで階層を作る（新デザインの白＋墨のニュートラル基調に合わせる・2026-07-30決定）。
   ★スコープを p > strong に限定するのが重要。.article-body strong にすると
     見出し内の <strong>（h2内1,007個・h3内1,885個・h4内728個）まで巻き込む。
     子孫（p strong）ではなく直下にするのは、リンク内の強調がリンク色と喧嘩するのを防ぐため。 */
.article-body p > strong{font-weight:700; color:var(--ink)}
/* 本文リンク。実測 202個/116本、うち189個/115本が /job/ への相談CTA。
   旧サイトは #d77373（旧パレットのローズ）＋太字＋下線だったが、新パレットに対応色が無く、
   --w1（中途の赤）で代替すると事業部色が115本に散って「事業部色は点アクセントのみ」の
   ブランドルールを破る。加えて --w1 は必須バッジ／入力エラーに割り当て済みの色なので転用できない。
   → 地の文に対する「濃度＋ウェイト＋下線」で分離し、事業部色は hover（一時的な点）に限る。
   overflow-wrap:anywhere は旧CSSの word-break:break-all の置き換え
   （break-all は英単語を無条件で割るが anywhere は溢れる時だけ割るので副作用が小さい）。 */
.article-body a{
  color:var(--ink); font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:from-font; /* 数値の直書きを避けてキーワードで指定 */
  text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
.article-body a:hover{color:var(--w1)}
/* 本文中の /job/ へのリンク（実測189個/115本）は編集意図としては地の文リンクではなく
   相談への導線なので、押せる見た目に上げる。上の a で色を使わない代償を色以外の手段で埋める。
   属性セレクタなので記事データを1本も触らずに掛かる。
   .text-link-btn の語彙（下線を消して矢印付きの独立要素にする）ではなく、
   本文の流れを切らない「太い下線＋左に細い縦罫」に留める＝段落内で浮かない。 */
.article-body p > a[href*="/job/"]{
  text-decoration-thickness:2px;
  text-underline-offset:.25em;
  padding-left:.5em;
  border-left:2px solid var(--w1);
}
.article-body p > a[href*="/job/"]:hover{border-left-color:var(--ink)}
.article-body table{width:100%; border-collapse:collapse; margin:var(--sp-3) 0; font-size:var(--fs-s)}
.article-body th,.article-body td{border:1px solid var(--hair); padding:.7em 1em; text-align:left}
.article-body th{background:var(--paper-2); font-weight:600}

.tab-controls{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.tab-button{
  appearance:none; border:1px solid var(--hair); background:#fff; color:var(--ink);
  border-radius:999px; padding:.8em 1.4em;
  font-family:var(--font-mincho); font-weight:600; font-size:var(--fs-s);
  letter-spacing:var(--ls-label); cursor:pointer;
}
.tab-button.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}
body.js .tab-panel[hidden]{display:none}
.form-shell{max-width:var(--w-narrow); margin-inline:auto}
.form-grid{display:grid; gap:var(--sp-3)}
.form-field{display:grid; gap:.55rem}
.form-field label,.form-label{
  font-family:var(--font-mincho); font-weight:600;
  font-size:var(--fs-s); letter-spacing:var(--ls-label); line-height:var(--lh-tight);
  display:inline-flex; align-items:center; gap:.6em;
}
/* 必須/任意バッジ（現行サイトに合わせて追加・2026-07-27） */
.req,.opt{
  flex:none;
  font-family:var(--font-body); font-weight:500;
  font-size:var(--fs-xs); letter-spacing:var(--ls-body); line-height:1;
  padding:.35em .7em; border-radius:2px;
}
.req{background:var(--w1); color:#fff}          /* 必須＝注意色 */
.opt{background:var(--hair); color:var(--mute)} /* 任意＝控えめ */
/* ラジオ/チェックボックスは除外（width:100%が効くと丸が伸びてラベルを押し出す・2026-07-27修正） */
.form-field input:not([type="radio"]):not([type="checkbox"]),
.form-field select,.form-field textarea{
  width:100%; border:1px solid var(--hair); border-radius:var(--r-card);
  background:#fff; color:var(--ink);
  font:inherit; line-height:var(--lh-body);
  padding:.9rem 1rem;
}
.form-field textarea{min-height:10rem; resize:vertical}
.choice-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-2)}
.choice-grid.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.choice{
  display:flex; align-items:center; gap:.55rem;
  border:1px solid var(--hair); border-radius:var(--r-card);
  padding:.75rem .9rem; color:var(--ink-2);
  cursor:pointer;
}
.choice input{flex:none; margin:0} /* 伸縮させない（防御・2026-07-27） */
.agree-line{
  display:flex; align-items:flex-start; gap:.65rem;
  color:var(--ink-2); line-height:var(--lh-body);
}
.form-actions{margin-top:var(--sp-3)}
@media (max-width:640px){
  .choice-grid,.choice-grid.two{grid-template-columns:1fr}
}

/* ================= companyページの PHILOSOPHY / VISION に奥行きを与える =================
   2026-07-30 本人指示「ページが質素すぎる」への対応。
   新しい技法は作らず、テーマに既にある3つを組み合わせている:
     ・下層ヒーローの英字ワイプ（clip-path）→ 信念の1行を「宣言」として出す
     ・BUSINESSカードの光のドリフト（translate+scaleのalternate）→ 背景の呼吸に転用
     ・下層ヒーローの巨大英字 → セクションの背景ウォーターマークに転用
   動きは全て20秒超・低コントラストで、本文の可読性より前に出ないことを条件にしている。
   ================================================================================== */
.sec-mark{position:relative; overflow:hidden; isolation:isolate}

/* 巨大英字のウォーターマーク。data-mark の値をそのまま描くのでJSもマークアップも増えない */
.sec-mark::before{
  content:attr(data-mark);
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  left:-.06em; bottom:-.24em;
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(5rem, 17vw, 15rem);
  line-height:var(--lh-1); letter-spacing:.06em; white-space:nowrap;
  color:rgba(16,24,40,.035); /* 例外値: 墨の極薄。トークン化するとウォッシュと用途が混ざる */
}

/* 墨のウォッシュがゆっくり呼吸する。28秒＝「動いている」ではなく「生きている」に見える速度 */
.sec-mark::after{
  content:""; position:absolute; inset:-15%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 18% 22%, rgba(16,24,40,.05), transparent 60%),
    radial-gradient(ellipse 55% 60% at 82% 74%, rgba(16,24,40,.04), transparent 62%);
  animation:secBreath 28s ease-in-out infinite alternate;
}
@keyframes secBreath{
  from{transform:translate(-2%, -1.5%) scale(1)}
  to{transform:translate(2%, 1.5%) scale(1.06)}
}

/* 信念の1行を宣言として出す（下層ヒーローの .sub-title-en と同じワイプ）。
   h2の中身を<span>で包む必要がある（clip-pathを見出しの箱ではなく文字列に掛けるため） */
body.js .stmt.reveal{opacity:1; transform:none; transition:none; overflow:hidden}
body.js .stmt.reveal > span{
  display:block;
  opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(16px);
  transition:
    opacity .9s var(--ease-1) .1s,
    clip-path 1s var(--ease-2) .1s,
    transform 1s var(--ease-2) .1s;
}
body.js .stmt.reveal.in > span{opacity:1; clip-path:inset(0 0 0 0); transform:none}

/* PHILOSOPHYの5行も上から順に。
   このコンテナには見出し(h2)も同居しているので nth-child ではズレる → nth-of-type で数える
   （.vision-lines 側は中身がpだけなので nth-child のままで正しい） */
.philosophy-lines p:nth-of-type(1){transition-delay:.10s}
.philosophy-lines p:nth-of-type(2){transition-delay:.18s}
.philosophy-lines p:nth-of-type(3){transition-delay:.26s}
.philosophy-lines p:nth-of-type(4){transition-delay:.34s}
.philosophy-lines p:nth-of-type(5){transition-delay:.42s}

@media (max-width:640px){
  /* スマホでは巨大英字が本文に被りやすいので、さらに薄く・小さくする */
  .sec-mark::before{font-size:clamp(3.5rem, 22vw, 6rem); color:rgba(16,24,40,.028)}
}

.recruit-cta{background:var(--paper-2)}
.recruit-cta h2{margin-bottom:0}

/* ================= a11y ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .site-header{opacity:1}
  body.js-sweep .fv-title .ch{color:var(--ink)}
  body.js .reveal{opacity:1; transform:none}
  /* FV写真のワイプ（案A）を打ち消す。clip-path と 中の画像の scale は
     transition:none だけでは初期値のまま固まってしまうので明示的に戻す。 */
  body.js .fv-cell.reveal{clip-path:none}
  body.js .fv-cell.reveal img{transform:none}
  body.js .stmt.reveal > span{opacity:1; clip-path:none; transform:none}
  body.js .sub-title.reveal .sub-title-jp,
  body.js .sub-title.reveal .sub-title-en{
    opacity:1;
    clip-path:none;
    transform:none;
  }
}