/* ============================================================
   採用TOP「FORWARD」ページ専用スタイル（V3 / 品質引き上げ版）
   - 基本フォントは site.css の Noto Sans JP を継承（独自フォント追加なし）
   - 色は site.css のカスタムプロパティ（--brand 系）のみを使用
   - 装飾のための曲線・ノードは廃止。編集グリッド・タイポグラフィ・
     実在するフローチャート（罫線＋直角コネクタ）・データUIで密度をつくる
   ============================================================ */

/* site.css は body/html に overflow-x: hidden のみを指定しており、CSS仕様上
   （overflow-x/overflow-yの一方が visible でない場合、他方の visible は auto に
   変換される）これが body に overflow-y: auto を発生させ、body 自身が独立した
   スクロールコンテナになってしまう。結果として window.scrollY と body の実スク
   ロール位置がズれ、配下の position: sticky が「常にズレたまま」＝実質無効化
   される。header/footer や他ページを変更せず、採用TOPページ内でのみ body の
   overflow を visible に戻すことで sticky を正しく機能させる（横スクロールの
   抑止は html 側の overflow-x: hidden がビューポートへ伝播して引き続き有効）。*/
body {
  overflow: visible;
}

.fwd {
  position: relative;
  overflow: clip;
  background: var(--background);
  color: var(--foreground);
}

.fwd-only-mobile {
  display: inline;
}
@media (min-width: 768px) {
  .fwd-only-mobile {
    display: none;
  }
}

/* ------------------------------------------------------------
   セクション索引（.fwd-rail）
   装飾ではなく「今どのセクションにいるか」を示す実在のUI。
   ⚠️ 見た目の定義はここには持たない。サイト共通の
      `.corp-rail, .fwd-rail`（assets/css/site.css）へ集約済み。
      Corporate 側の同じレールと1箇所で管理するため、ここで
      上書きしないこと。挙動は assets/js/main.js が担当する。
------------------------------------------------------------ */

/* ------------------------------------------------------------
   共通：見出し・リード・セクション枠
------------------------------------------------------------ */
.fwd-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
}
.fwd-eyebrow--light {
  color: var(--brand-cyan);
}

.fwd-scene {
  position: relative;
  padding: 4.5rem 0;
}
@media (min-width: 768px) {
  .fwd-scene {
    padding: 7rem 0;
  }
}
.fwd-scene--white {
  background: var(--background);
  color: var(--foreground);
}
.fwd-scene--light {
  background: var(--brand-light);
  color: var(--foreground);
}
.fwd-scene--navy {
  background-color: var(--brand-deep);
  color: #fff;
  background-image: radial-gradient(1000px 480px at 85% -10%, rgba(255, 255, 255, 0.06), transparent 60%);
}
/* WHAT WE DO / TEAM 限定：紺ベタ塗り感をなくすための質感。
   ChatGPT制作のザラつき素材（写真）を、コーナーのネットワーク装飾部分を
   除いた中央のクリーンな質感のみ切り出して使用。単純な引き伸ばし表示に
   せず、背景色とのblend-modeで濃紺トーンに馴染ませ、素材そのものが
   目立つ「画像を貼った」印象にならないよう調整する。
   他のnavyセクション（JOBS等）には適用しない。 */
.fwd-scene--textured {
  background-image: radial-gradient(1000px 480px at 85% -10%, rgba(255, 255, 255, 0.05), transparent 60%);
  background-size: auto;
  background-position: 85% -10%;
  background-repeat: no-repeat;
}
/* ------------------------------------------------------------
   統一fine grain system（採用サイト全体共通）。
   従来は「.fwd-scene--textured / .fwd-scene--grain-light」（ラスターwebp、
   opacity 0.5〜0.55、multiply）と「.fwd-scene--noise」（SVG feTurbulence、
   baseFrequency 0.85 / 2 octaves、opacity 0.07〜0.11）という2系統が
   混在し、同じ「白い面」「濃紺の面」でもセクションによって質感の見え方が
   食い違っていた（低周波のfractalNoiseは粒ではなく雲状のムラとして見え、
   特に濃紺で「粗い」印象になっていた）。
   今回、粒子キャラクター（baseFrequency 1.9 / 4 octaves / 72pxタイル。
   旧レシピの0.85 / 2 / 180pxより大幅に細かく密で、雲状のムラが出ない）は
   統一しつつ、白／淡いブルー面と濃紺面で「合成の仕方」を分ける：
   - 白／淡いブルー面（--fwd-grain）：黒地・alpha変調＋multiply。
     白地を微量に暗くする方向。ピクセル計測でstd≈2.1〜2.9/255
     （opacity 0.075〜0.115）の、ごく僅かな陰影のみ。
   - 濃紺面（--fwd-grain-navy）：白地・alpha変調をfeComponentTransferで
     中間調を抑えたスパースな粒に整形し、通常合成（blend未指定）で
     微量に明るくする方向。単純に暗い粒を重ねても濃紺自体が暗いため
     ほぼ視認できず（実測std<1/255）、逆に白地と同じ発想で明るい方向の
     粒にする必要があった（/tmp配下の比較検証で確認済み）。opacity 0.10で
     std≈3.5〜4/255、平均輝度の底上げも僅か（+8〜10/255程度）に収める。
   ラスター画像（recruit-bg-grain-navy/light.webp）はこのレシピ群では
   使用しない（HeroとPHOTO FEATUREは対象外・現状維持）。
------------------------------------------------------------ */
:root {
  --fwd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fwd-grain-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0' result='w'/%3E%3CfeComponentTransfer in='w'%3E%3CfeFuncA type='linear' slope='1.4' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 写真用grain：同じ粒子キャラクター（1.9 / 4 / 72px）だが、背景用の
     黒地・白地（片方向にしか輝度を動かせない）とは異なり、turbulenceの
     alphaをそのままR=G=Bへ写した中立グレーの不透明ピクセルにする。
     overlay合成はグレー50%を「変化なし」の中心点として扱うため、
     明暗どちらへも均等にごく僅かに振れるフィルム粒子的な質感になり、
     写真全体が暗く/明るく寄る事故が起きない。 */
  --fwd-grain-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------------
   写真texture（採用サイト全体で再利用可能）。
   写真そのものは加工せず、上に重ねるCSS overlayとして提供する。
   使い方：写真を覆う要素（写真と同じサイズ・position:relative）の中に
   position:absolute; inset:0; pointer-events:noneな要素を1つ置き、
   このクラスを付与する（現在はPHOTO FEATUREの既存.fwd-photo-feature__grain
   がこの実装を採用）。今後Sales / Creative / Engineerに写真を追加する
   際も、同じ.fwd-photo-grainを再利用できる。
------------------------------------------------------------ */
.fwd-photo-grain {
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain-photo);
  opacity: 0.065;
  mix-blend-mode: overlay;
}
.fwd-scene--textured::before,
.fwd-scene--grain-light::before,
.fwd-scene--noise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain);
  opacity: 0.115;
  mix-blend-mode: multiply;
}
/* 白い面：最も弱く（清潔感・余白感を優先） */
.fwd-scene--grain-light::before,
.fwd-scene--white.fwd-scene--noise::before {
  opacity: 0.075;
}
/* 濃紺の面：白地・スパース粒のレシピへ切り替え、通常合成でごく僅かに
   明るい方向の粒を乗せる（黒地multiply/overlayでは濃紺の暗さに対して
   視認できるコントラストが出ないため）。 */
.fwd-scene--textured::before,
.fwd-scene--noise.fwd-scene--navy::before {
  background-image: var(--fwd-grain-navy);
  opacity: 0.112;
  mix-blend-mode: normal;
}
/* 図解・見出しなどの実コンテンツは、上記::beforeのグレインより
   常に手前に重なるようスタッキングを明示する（可読性を落とさないため）。 */
.fwd-scene--textured > .fwd-scene__inner,
.fwd-scene--textured > .fwd-team,
.fwd-scene--grain-light > .fwd-scene__inner,
.fwd-scene--noise > .fwd-scene__inner,
.fwd-scene--noise > .fwd-why,
.fwd-scene--noise > .fwd-jobs {
  position: relative;
  z-index: 1;
}
.fwd-scene__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1180px) {
  .fwd-scene__inner {
    padding: 0 1.25rem 0 4.5rem;
  }
}

.fwd-scene__title {
  margin-top: 0.9rem;
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  text-wrap: balance;
}
/* SP限定の意味区切り改行。PCでは非表示（=改行しない）にし、767px以下で
   だけ改行として機能させる。日本語は原則どこでも折り返せるため、
   .fwd-scene__title のような大きな見出しではSPの自動折り返しが語の途中
   （「ひと／つ」「して／いる」等）で分断されることがある。その位置だけを
   意味の切れ目へ固定するために使う（文言・文字サイズは変更しない）。 */
.fwd-break-sp {
  display: none;
}
@media (max-width: 767px) {
  .fwd-break-sp {
    display: inline;
  }
}
.fwd-scene__title--light {
  color: #fff;
}
.fwd-scene__lead {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--muted-foreground);
}
.fwd-scene__lead--light {
  color: rgba(255, 255, 255, 0.82);
}

/* ------------------------------------------------------------
   共通リビール（.fwd-reveal） — 全体で使う演出の1つに過ぎない
------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .fwd-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 650ms ease, transform 650ms ease;
  }
  .fwd-reveal--d2 {
    transition-delay: 120ms;
  }
  .fwd-reveal--d3 {
    transition-delay: 240ms;
  }
  .fwd-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------
   HERO — DEEP FIELD
   ------------------------------------------------------------
   設計方針：HEROをページ本体と同じ「濃紺の紙面」として扱う。
   従来のHEROは白〜パステルの明るい面に濃紺の文字を中央寄せで置いており、
   (1) 動く背景の上で濃色文字のコントラストが場所によって変動する
   (2) WHAT WE DO以降の濃紺・左揃え・エディトリアルな紙面と分断される
   という2つの問題を同時に抱えていた。
   HEROを濃紺側に寄せ、白文字＋左揃え＋本文と同一グリッドにすることで、
   コントラストは背景の動きに左右されなくなり（可読性のための白い台座や
   text-shadowが不要）、HEROはページの一部として連続する。
   背景の実体は #sg-hero-mount（poster + ShaderGradient canvas）が持つ。
------------------------------------------------------------ */
.fwd-hero {
  position: relative;
  /* WHAT WE DO と同一の濃紺。HEROの下端とWHAT WE DOの上端で色が変わらず、
     セクションの継ぎ目そのものが視覚的に発生しない。 */
  background: var(--brand-deep);
  color: #fff;
}

/* 2画面目が「止まって読める」時間、かつ cover transitionの実距離。
   --------------------------------------------------------------------------
   sticky要素(beat--a/beat--b)は「自身の静的位置がsticky offsetに達してから、
   containing block（.fwd-hero）の残り高さがビューポート未満になるまで」
   固定され続ける。つまりbeat--a/beat--bが固定され続ける終端は
   共通して (.fwd-hero の総高さ − ビューポート高さ) で決まる。

   一方 #sg-hero-mount は height:100vh + margin-bottom:-100vh
   （自身のflow高さを相殺するテクニック）を使っているため、
   containing blockの残り高さの計算に「自身の高さぶんの余白」を
   要求しない。結果として、mount の固定終端は beat--a/beat--b の終端より
   ちょうど1ビューポート分だけ遅い（＝.fwd-hero の総高さそのもの）
   ことを実測で確認した（1440×900で beat: 1836px、mount: 2736pxで固定解除
   ＝ 差はちょうど900px = 1ビューポート）。

   このズレ（mount限定で1ビューポート分だけ長く固定される性質）こそが
   cover transitionの実体で、追加のバッファ要素は一切不要だった。
   spacerの高さぶんだけ beat--b の「止まって読める」時間を作れば、
   その直後の1ビューポート分は自動的に：
     - mount（ShaderGradient背景）は完全に静止したまま
     - beat--b（コピー）は自然にスクロールして退場し
     - #whatwedo が画面下から上へ現れて覆う
   という3つが同時に揃う（実測で確認済み）。
   高さ＝2画面目の滞留量。ここは背景も濃紺のままなので空白面には見えない。 */
.fwd-hero__spacer {
  height: 16vh;
}

.fwd-hero__beat {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 背景は持たない。奥の poster / canvas をそのまま見せる。 */
  background: transparent;
}
.fwd-hero__beat--a {
  z-index: 1;
}
.fwd-hero__beat--b {
  z-index: 2;
}

/* ==========================================================================
   HERO → WHAT WE DO の引き継ぎ（1→2 と同一原理での 2→WHAT WE DO）
   --------------------------------------------------------------------------
   1画面目→2画面目の切り替え（beat-a → beat-b）を実測で分析した結果：

     ・beat-a/beat-bは同じcontaining block（.fwd-hero）を共有するsticky要素
     ・beat-bの静的な開始位置は「beat-aの高さ(100vh)ぶん下」で固定
     ・scrollYが0→100vhの間、beat-bはまだstickyが発動せず、通常のflow位置の
       まま画面下（top:100vh）から上（top:0）へスクロールと1:1で上がる
     ・100vhに達した瞬間、静的位置がtop:0と一致してstickyが発動し、
       画面に張り付く（z-index:2 > beat-aのz-index:1で常にbeat-aを覆う）
     ・張り付いたまま.fwd-hero__spacer（16vh）ぶん保持され、その後
       「containing blockの総高さ − viewport高さ」で共通に決まる解除点で
       beat-a/beat-bはまとめて通常スクロールへ戻る

   今回、WHAT WE DOを「見出しだけを別sceneとして先出しする」構成
   （旧BEAT C）は撤回した。#whatwedoの背景・見出し・リード・図解を
   分割・複製せず、単一の<section>のまま同じ体験を実現するため、
   beat-a/beat-bと同じ仕組みを「中身を複製せずに」延長する。

   ポイントは、beat-bの後ろにDOMの見えない占有要素
   （.fwd-hero__handoff）を1ビューポート分だけ置くこと。これにより：

     1) .fwd-hero の総高さが1ビューポート分伸びるため、beat-a/beat-bの
        固定解除点（総高さ − viewport）が、ちょうど1ビューポート分
        後ろへ延びる。
     2) #whatwedo（.fwd-heroの外の、元のまま・単一の<section>）に
        margin-top: -100vh を与える。.handoffが押し出した分だけ
        #whatwedoの見かけの開始位置を引き戻すことで、#whatwedoの
        「画面下→top:0」への到達点が、ちょうど(1)の固定解除点と
        数式レベルで一致する（実測で位置を追って確認済み）。

   結果として#whatwedoは一切stickyにしないまま：
     ・beat-a/beat-bが完全に静止したままの1ビューポート分のスクロールで、
       #whatwedoが画面下から上へ、beat-bとまったく同じ速度・軌道で
       上がってくる（同じcontaining block・同じ1ビューポートのズレに
       よる、数式レベルで同一の挙動）
     ・z-index:3でbeat-a/beat-bを常に覆いながら上がる
     ・上がりきると同時にbeat-a/beat-bが通常スクロールへ戻り、
       #whatwedoも（一度もstickyになっていないため）そのまま通常flowの
       スクロールを継続する。長時間の固定は発生しない
     ・#whatwedoの背景・見出し・リード・図解は常に1つの塊のまま動くため、
       「見出しだけ先行」「本体だけ遅れて別scene」は構造上起こり得ない

   z-indexは beat-a(1) / beat-b(2) の続きとして 3 を使う。ヘッダー
   （fixed; z-index:50）・左サイドナビ（fixed; z-index:30）はこれより高い
   スタッキングコンテキストにあるため常に上に残る。 */
.fwd-hero__handoff {
  height: 100vh;
}
#whatwedo {
  z-index: 3;
  margin-top: -100vh;
}
/* SP実機で「1画面目→2画面目」の途中にWHAT WE DOの濃紺が見える不具合の修正。
   --------------------------------------------------------------------------
   第一段階（100svh化）だけでは実機で不十分だった。
   原因は静的な単位のズレではなく、Safari自体のvisual viewportが
   スクロール中に動的に変化すること：ページ最上部でaddress bar／
   下部ツールバーが表示された状態のviewport高さ（100svh）を基準に
   beat / mount / watermark-layer / handoff / #whatwedoの全高さを揃えても、
   スクロールが進んでtoolbarが収納されると、実際に見えているvisual viewport
   はsvhより大きくなる。sticky要素はCSSで指定した高さ（=固定値のsvh）の
   ままなので、拡張されたviewportの下端に「まだ100svh分しか描画していない
   HERO」の外＝#whatwedoの濃紺が覗いてしまう。
   100dvh（dynamic viewport height）は「その瞬間の実際のvisual viewport」に
   追従するため、toolbarの出入りに関わらずHERO側の1画面分と実際に見える
   高さが常に一致し、隙間が生まれない。
   dvh未対応環境向けに、既存のvh→svhのfallback段の後ろへdvhを追加する
   （非対応ブラウザは無効な宣言として無視し、その場合はsvhのまま動作する）。
   PC（デスクトップブラウザ）はtoolbarの出入りが無くvh=svh=dvhのため
   実害はないが、挙動を変えないことを優先し、修正はSP幅のみに限定する。 */
@media (max-width: 767px) {
  .fwd-hero__beat {
    min-height: 100dvh;
  }
  .fwd-hero__watermark-layer {
    height: 100dvh;
    margin-bottom: -100dvh;
  }
  .fwd-hero__handoff {
    height: 100svh;
    height: 100dvh;
  }
  #whatwedo {
    margin-top: -100svh;
    margin-top: -100dvh;
  }
}

/* 本文セクション（.fwd-scene__inner）と同一のグリッド。
   HEROの見出し左端と「02 — WHAT WE DO」の左端が完全に揃うため、
   スクロールしても紙面の軸が動かず、1枚の誌面として連続して見える。 */
.fwd-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 1180px) {
  .fwd-hero__inner {
    padding: 0 1.25rem 0 4.5rem;
  }
}

/* Beat A: FORWARD. → ローカルビジネスの未来を、→ 変える側へ。
   ------------------------------------------------------------
   完成条件は「bounding boxが重ならないこと」ではなく「①と②が同時に
   読めるフレームが無いこと」。この2つは別の基準で、bounding box基準の
   前回実装（0.14まで完全表示・0.34で消え切る）では、②の見出し
   （.fwd-hero__pitch-title）が画面下端から見え始める時点（実測で
   進捗0.17〜0.19付近、PC1440/SP390とも同水準）で①のopacityがまだ
   0.6〜0.8残っており、bounding boxこそ重ならないものの、①と②が
   画面上の別の高さで同時に読める状態になっていた。

   ここでは①の消滅を「②の見出しが画面内に見え始める進捗」より確実に
   手前へ前倒しする。Playwrightで.fwd-hero__pitch-titleのtopがviewport内へ
   入り始める進捗を実測すると PC1440で0.185、SP390で0.173。この手前へ
   safety marginを取り、進捗0.03まで完全表示を保ち、0.13で消え切るように
   する（0.13時点では.fwd-hero__pitch-titleはまだ1pxも画面に入っていない
   ＝①と②が同時に見えるフレームは生じない）。
   0.13で①が消えてから②の見出しが見え始める0.17〜0.19までの間は、
   ①・②とも文字が無い区間だが、ShaderGradient背景は動き続けており
   （HEROデザイン自体は無変更）、次にすぐ②の文字が下から伸びて来るため
   「間を置かずに引き継ぐ」という体感を壊さない短い区間にとどめている。

   opacity/transformはスクロール位置に1:1で連動する計算結果であり、
   自律的なアニメーションではないため prefers-reduced-motion でも適用する
   （外すと①が常にopacity:1のままになり、②と重なるバグが再発する）。

   transitionは付けない。--fwd-hero-progressはscrollイベントのたびrAFで
   毎フレーム更新されているため、値自体がすでに滑らかにフェードする
   （calc()の結果が1フレームごとに連続的に変化する）。ここへ
   transition: opacity 0.5sを重ねると、描画される値が「今のスクロール位置」
   ではなく「0.5秒前のスクロール位置」を追いかける遅延になり、速いスクロール
   では①が消え切った後の位置まで②が上がってきているのに、遅れた①がまだ
   薄く残って見える＝実質的な重なりが再発する（実測動画で確認済み）。 */
.fwd-hero__intro {
  position: relative;
  /* 0.03まで1、0.13で0（範囲外はブラウザ側で0〜1にクランプされる） */
  opacity: calc((0.13 - var(--fwd-hero-progress, 0)) / 0.1);
  transform: translateY(calc(var(--fwd-hero-progress, 0) * -220px));
}
.fwd-hero__intro-title {
  display: block;
  text-align: center;
}

/* 巨大・極薄のwatermark：HERO共通の背景Typography層
   --------------------------------------------------------------------------
   以前は.fwd-hero__intro（①専用のfadeコンテナ）の子だったため、
   ①のscroll-linked opacity fadeを継承して①と一緒に消えてしまっていた。
   「1画面目→2画面目を貫く共通背景」にするため、①にも②にも属さない
   HERO直下の独立レイヤーへ移した。

   位置決めは#sg-hero-mountと同じ「sticky + margin-bottomでflow高さを
   相殺する」トリックを流用する。これによりwatermark-layerは
   beat-a/beat-bの表示期間を通してviewportに張り付いたまま静止し続け、
   #whatwedo（z-index:3）が下から上がってきて物理的に覆うまで
   同じ位置・同じ見た目で存在する。①→②間で消える/動く処理は一切ない。

   z-indexは0（#sg-hero-mountと同値）。DOM順でmountの直後に置くことで
   同じ0のスタッキング順序内でmountの手前・beat-a(1)/beat-b(2)の
   奥に自然に収まる（別途z-index調整は不要）。

   .fwd-hero__innerをそのまま再利用しているのは、①の見出しが
   使っているのと同じ「rail込みの実質コンテンツ幅・同じ左右padding」の
   中でwatermarkを中央に置くため。既存の中央配置ロジックを複製せずに
   数値を完全一致させられる。 */
.fwd-hero__watermark-layer {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* .fwd-hero__watermark-frameは.fwd-hero__introの代役。
   .fwd-hero__inner自身はpadding-boxが絶対配置の基準になるため、
   そこへ直接top/left:50%を置くと、rail分のpadding-leftが中心位置の
   計算に含まれてしまい、以前（.fwd-hero__intro基準）と中心がずれる
   （実測でPC1440: 746px→720pxへ26pxずれることを確認）。
   paddingを持たないこのframeを一枚挟むことで、以前と数値レベルで
   同じ中心位置を再現する。 */
.fwd-hero__watermark-layer .fwd-hero__inner,
.fwd-hero__watermark-frame {
  height: 100%;
}
.fwd-hero__watermark-frame {
  position: relative;
}
.fwd-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: max-content;
  font-size: clamp(6rem, 22vw, 19rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(4, 28, 61, 0.05);
  white-space: nowrap;
  user-select: none;
}
/* PCでは.fwd-hero__watermark-segは何も指定しない＝spanのデフォルトである
   inlineのまま。"FOR"+"WARD"が隙間なく連結し、見た目は現行の1行
   "FORWARD"と完全に同一（DOM上は2つのspanだが視覚的な差はゼロ）。 */
@media (max-width: 767px) {
  /* SPは縦長を活かし、"FOR" / "WARD" の2行構成にする。文字を増やしたり
     複製するのではなく、同じ1個のwatermarkを2行に組み替えるだけ。
     1行表示のまま7文字を収めようとすると画面幅を大きく超えて
     端が中途半端に見切れる（実測: SP390でwidth約504px、viewportは390px）。
     2行にすることで最長行が4文字（WARD）になり、巨大サイズのまま
     画面内に収まる。 */
  .fwd-hero__watermark {
    text-align: center;
    font-size: clamp(6.5rem, 28vw, 8.5rem);
    line-height: 0.86;
  }
  .fwd-hero__watermark-seg {
    display: block;
  }
}

/* FORWARD.：小さな飾り英字にはしない。字間を大きく開き、
   本文サイズではなく「もう一つの見出し」として置く。
   色は淡いブルーホワイト。背景が鮮やかなシアンになったため、
   ここをブランドシアンのままにすると地と同系色で沈み、
   さらに「変える側へ。」の暖色と3色で競合する。
   左右の細いラインは::before/::afterで作る（DOM追加なし）。 */
.fwd-hero__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  font-size: clamp(1.15rem, 0.75rem + 1.7vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.35em;
  line-height: 1;
  color: #cfeaf7;
  margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
}
.fwd-hero__kicker::before,
.fwd-hero__kicker::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(20px, 4vw, 56px);
  height: 1px;
  background: rgba(207, 234, 247, 0.32);
}

/* 主コピー2行は同一サイズ・同一weight。強調はサイズではなく色で行う。
   添付の中央揃えデザインに合わせ、HEROの横幅を大きく使うサイズへ拡大。 */
.fwd-hero__intro-line,
.fwd-hero__intro-accent {
  display: block;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.fwd-hero__intro-line {
  color: #fff;
  /* 上限5remは.fwd-hero__inner（コンテンツ幅1060px、PC全breakpoint共通の
     max-width:72rem由来）の中で「ローカルビジネスの未来を、」が
     1行に収まる実測値。5remで幅約1019px（余白約41px）、6.5remでは
     幅約1325pxとなり1060pxを超えて2行に折り返してしまうことを実測で確認。 */
  font-size: clamp(2.2rem, 0.9rem + 6.4vw, 5rem);
}
/* 「ローカルビジネス」が行末で語中改行しないよう1単位として扱う */
.fwd-hero__nowrap {
  white-space: nowrap;
}
/* 「変える側へ。」＝この会社を選ぶ側の姿勢。
   色は青系のまま、明度でいちばん高いところへ持っていく。
   地（コピー面）は深いネイビーに落としてあるので、白よりさらに明るい
   水色を置くと、サイズを一切変えなくても視線が確実にここへ落ちる。
   暖色を使わないのは、この面が青〜シアンの世界で完結しているため。
   ここだけ補色を入れると世界観が割れる。 */
.fwd-hero__intro-accent {
  margin-top: 0.2em;
  color: #8fe8ff;
  font-size: clamp(2rem, 0.8rem + 5.6vw, 4.4rem);
}

/* ------------------------------------------------------------
   HERO Beat B — 2つ目のメッセージ
   1画面目と同じ左軸・同じ縦位置に入れ替わりで現れる。位置が動かないため
   「スライドが切り替わった」ではなく「同じ紙面で話が進んだ」と読める。
------------------------------------------------------------ */
.fwd-hero__pitch {
  position: relative;
  /* 「ローカルビジネスの可能性を広げる。」が1行に収まる幅。
     ここより狭いと「る。」だけが3行目に落ちる。
     margin:0 autoで.fwd-hero__inner（実質コンテンツ幅1060px）の中で
     このブロック自体を中央に置き、text-align:centerで中の行を中央揃えにする。
     1画面目と同じ「rail込みの実質領域内で中央」という考え方を踏襲。 */
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}
/* beat-bのFORWARD.：1画面目と同じ.fwd-hero__kickerをそのまま再利用し、
   「同じTypographyシステムの続き」に見せる（別デザインを作らない）。
   本文の説明文の直前に付くラベルのため、余白だけ気持ち控えめにする。 */
.fwd-hero__kicker--pitch {
  margin-bottom: clamp(1rem, 0.7rem + 1.1vw, 1.8rem);
}
/* beat-bには独自のscroll progressフェードを持たせない。
   #whatwedo（z-index:3）はbeat-b（z-index:2）を覆いながら画面下から
   上がってくる構造で、beat-bはbeat-a同様、#whatwedoが覆い切るまで
   常に静止している。#whatwedoの物理的な被さりだけでbeat-bは自然に
   隠れる（beat-a→beat-bの関係と同じ）ため、コピー側で先に消す処理は
   不要かつ「コピーだけ先に消すのは禁止」という要件にも合わない。 */
.fwd-hero__pitch-title {
  font-size: clamp(1.5rem, 0.95rem + 2.1vw, 2.6rem);
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  letter-spacing: -0.01em;
}
/* 2画面目は説明の段。ここに色の強調を置くと、1画面目の暖色
   （HERO唯一の焦点）と competing になり、焦点が2つに割れる。
   また背景が鮮やかなシアンになったため、シアン文字は地に沈む。
   強調はweightだけで持たせ、色は白のまま置く。 */
.fwd-hero__pitch-accent {
  font-weight: 900;
  white-space: nowrap;
  color: #fff;
}
.fwd-hero__pitch-lead {
  margin: 1.75rem auto 0;
  font-size: 0.95rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.74);
  max-width: 34rem;
}

/* ------------------------------------------------------------
   WHY ESPROT — 4項目を1つのエディトリアルグリッドとして統一
   （PC: 2列×2段＋列オフセットでリズムをつける、SP: 1列。
   01〜04は番号・罫線・見出し・本文の階層をすべて共通化し、完全に
   同格として扱う。03のみを強調する配色・背景は使用しない。
   区切りは「4分割の表罫線」に見せないよう、列間の縦線は使わず、
   段と段の間の1本の水平線のみで構成する。）
------------------------------------------------------------ */
.fwd-why {
  max-width: 72rem;
  margin: 3rem auto 0;
  padding: 0 1.25rem;
}
@media (min-width: 1180px) {
  .fwd-why {
    padding: 0 1.25rem 0 4.5rem;
  }
}
.fwd-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
}
@media (min-width: 860px) {
  .fwd-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 5rem;
    /* 左右の列を必ず同じ上端から始める。高さは揃えない（stretch させない）。 */
    align-items: start;
    padding-top: 2.5rem;
  }
}
.fwd-why__item {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}
.fwd-why__item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
@media (min-width: 860px) {
  .fwd-why__item {
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
}
.fwd-why__divider {
  display: none;
}
@media (min-width: 860px) {
  .fwd-why__divider {
    display: block;
    grid-column: 1 / -1;
    height: 1px;
    background: var(--border);
    margin: 3rem 0;
  }
}
.fwd-why__num {
  display: block;
  font-size: clamp(2.1rem, 1.8rem + 1vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  color: var(--brand-deep);
  opacity: 0.24;
  font-variant-numeric: tabular-nums;
}
.fwd-why__rule {
  display: block;
  width: 2.25rem;
  height: 2px;
  margin: 0.65rem 0 1rem;
  background: var(--brand-cyan);
}
.fwd-why__body {
  min-width: 0;
}
/* 見出しに max-width を掛けると「ではないマー／ケティング。」のように
   語中で折り返される。列幅をそのまま使わせて自然な位置で折り返す。 */
.fwd-why__title {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--brand-deep);
  text-wrap: balance;
}
.fwd-why__text {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}
@media (max-width: 859px) {
  .fwd-why__text {
    max-width: 34rem;
  }
}
.fwd-why__item .fwd-flowchain {
  margin-top: 1.1rem;
  padding-top: 0;
  border-top: none;
}

/* ------------------------------------------------------------
   JOBS — 大きな導線（3職種均等の横帯）
------------------------------------------------------------ */
.fwd-jobs {
  margin-top: 3rem;
  max-width: 72rem;
  padding: 0 1.25rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1180px) {
  .fwd-jobs {
    padding: 0 1.25rem 0 4.5rem;
  }
}
.fwd-jobrow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  overflow: hidden;
}
.fwd-jobs .fwd-jobrow:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 860px) {
  .fwd-jobrow {
    grid-template-columns: 3.5rem 16rem 1fr auto;
    align-items: center;
  }
}
.fwd-jobrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-jobrow::before {
    transition: transform 300ms ease;
  }
}
.fwd-jobrow:hover::before,
.fwd-jobrow:focus-visible::before {
  transform: scaleX(1);
}
.fwd-jobrow__num {
  position: relative;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-cyan);
}
.fwd-jobrow__name {
  position: relative;
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.01em;
}
.fwd-jobrow__name small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-cyan);
}
.fwd-jobrow__desc {
  position: relative;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  max-width: 30rem;
}
@media (min-width: 860px) {
  .fwd-jobrow__desc {
    margin: 0;
  }
}
.fwd-jobrow__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-cyan);
  white-space: nowrap;
}
@media (min-width: 860px) {
  .fwd-jobrow__cta {
    margin-top: 0;
  }
}
.fwd-jobrow__cta span {
  transition: transform 250ms ease;
}
.fwd-jobrow:hover .fwd-jobrow__cta span,
.fwd-jobrow:focus-visible .fwd-jobrow__cta span {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   PROCESS
------------------------------------------------------------ */
.fwd-process {
  margin-top: 3.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
@media (min-width: 768px) {
  .fwd-process {
    flex-direction: row;
    align-items: flex-start;
  }
}
.fwd-process__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0 0 2.25rem;
}
.fwd-process__step::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  width: 2px;
  height: calc(100% - 3rem);
  background: var(--border);
  transform: scaleY(0);
  transform-origin: top;
}
.fwd-process__step:last-child::before {
  display: none;
}
.fwd-build.is-built .fwd-process__step::before {
  transform: scaleY(1);
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-process__step::before {
    transition: transform 500ms ease;
  }
}
@media (min-width: 768px) {
  .fwd-process__step {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0 1.5rem 0 0;
  }
  .fwd-process__step::before {
    top: 1.5rem;
    left: 3rem;
    right: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }
  @media (prefers-reduced-motion: no-preference) {
    .fwd-process__step::before {
      transition: transform 500ms ease;
    }
  }
  .fwd-build.is-built .fwd-process__step::before {
    transform: scaleX(1);
  }
}
.fwd-process__node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: var(--background);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brand-deep);
}
.fwd-process__step--goal .fwd-process__node {
  border-color: var(--brand-cyan);
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.14);
}
.fwd-process__label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-deep);
}
.fwd-process__step--goal .fwd-process__label {
  color: var(--brand-cyan);
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-process__step:nth-child(2)::before { transition-delay: 90ms; }
  .fwd-process__step:nth-child(3)::before { transition-delay: 180ms; }
  .fwd-process__step:nth-child(4)::before { transition-delay: 270ms; }
}

/* ------------------------------------------------------------
   FAQ
------------------------------------------------------------ */
.fwd-faq {
  margin-top: 2.5rem;
}
.fwd-faq__item {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
}
.fwd-faq__item:last-child {
  border-bottom: 1px solid var(--border);
}
.fwd-faq__q {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-deep);
}
.fwd-faq__q::-webkit-details-marker {
  display: none;
}
.fwd-faq__num {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand);
}
.fwd-faq__q-text {
  flex: 1;
}
.fwd-faq__mark {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--brand);
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-faq__mark {
    transition: transform 200ms ease;
  }
}
.fwd-faq__item[open] .fwd-faq__mark {
  transform: rotate(45deg);
}
.fwd-faq__a {
  margin-top: 0.9rem;
  padding-left: 1.85rem;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------
   ENTRY — FORWARDの完成
------------------------------------------------------------ */
.fwd-entry {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-deep);
  background-image: radial-gradient(1100px 560px at 90% -12%, rgba(94, 190, 255, 0.18), transparent 62%),
    radial-gradient(760px 460px at 2% 112%, rgba(94, 190, 255, 0.12), transparent 60%);
  padding: 6rem 1.25rem 6.5rem;
}
@media (min-width: 1180px) {
  .fwd-entry {
    padding-left: 4.5rem;
  }
}
/* 粒状のグレイン質感。他のnavyセクションと同じ素材を再利用し、統一感を保つ */
.fwd-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain-navy);
  opacity: 0.112;
}
.fwd-entry__inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .fwd-entry__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: end;
  }
}
.fwd-entry__title {
  margin-top: 1rem;
  font-size: clamp(2.75rem, 2rem + 5vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1;
}
.fwd-entry__lead {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.8);
}
.fwd-entry__roles {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0 0;
}
@media (max-width: 480px) {
  .fwd-entry__roles {
    flex-direction: column;
    gap: 0.9rem;
  }
}
.fwd-entry__roles a {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.25rem;
}
@media (max-width: 480px) {
  .fwd-entry__roles a {
    padding: 0.4rem 0;
    white-space: nowrap;
  }
}
.fwd-entry__roles a:hover,
.fwd-entry__roles a:focus-visible {
  color: #fff;
  border-color: #fff;
}
.fwd-entry__roles-num {
  font-size: 0.65rem;
  color: var(--brand-cyan);
}
.fwd-entry__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 900px) {
  .fwd-entry__actions {
    align-items: stretch;
  }
}
.fwd-entry__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 60px;
  padding: 1.05rem 2.25rem;
  background: #fff;
  color: var(--brand-deep);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  /* サイト共通のCTA文法に合わせ、shadow と translateY をやめて
     色の反転で押せることを示す（角型・shadowなし） */
  border: 2px solid #fff;
  border-radius: 2px;
  transition:
    background 200ms ease,
    color 200ms ease;
}
.fwd-entry__primary:hover,
.fwd-entry__primary:focus-visible {
  background: transparent;
  color: #fff;
}
.fwd-entry__primary:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}
.fwd-entry__secondary {
  border-radius: 2px;
}
.fwd-entry__secondary:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}
.fwd-entry__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.95rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.fwd-entry__secondary:hover,
.fwd-entry__secondary:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.fwd-entry__main {
  min-width: 0;
}
.fwd-entry__note {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------
   WHAT WE DO — 集客チャネル横断分析の図解（HTML/CSS/SVGネイティブ）
   添付のChatGPT画像はテイスト参考のみ。チップ（接点）→収束線→分析ハブ→
   結果、という構造を罫線とタイポグラフィで整理し、発光や近未来感を
   足さずページ全体のトーンに合わせる。
------------------------------------------------------------ */
.fwd-flowviz {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
@media (min-width: 860px) {
  .fwd-flowviz {
    flex-direction: row;
    align-items: center;
    margin-top: 3.5rem;
  }
}
.fwd-flowviz__panel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
@media (min-width: 860px) {
  .fwd-flowviz__panel {
    padding: 1.85rem 2.1rem;
  }
}
.fwd-flowviz__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 0.85rem;
}
@media (min-width: 500px) {
  .fwd-flowviz__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 860px) {
  .fwd-flowviz__grid {
    gap: 0.75rem 1rem;
  }
}
.fwd-flowviz__chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.fwd-flowviz__chip svg {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 860px) {
  .fwd-flowviz__chip {
    font-size: 0.85rem;
    padding: 0.65rem 0.85rem;
  }
  .fwd-flowviz__chip svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.fwd-flowviz__converge {
  display: none;
}
@media (min-width: 860px) {
  .fwd-flowviz__converge {
    display: block;
    flex: 0 0 6.5rem;
    width: 6.5rem;
    height: 7.5rem;
  }
}
.fwd-flowviz__cline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.fwd-flowviz__hub,
.fwd-flowviz__result {
  flex: 0 0 auto;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0.5rem;
}
.fwd-flowviz__result {
  border-color: var(--brand-cyan);
  background: rgba(33, 189, 234, 0.1);
}
.fwd-flowviz__hub svg,
.fwd-flowviz__result svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fwd-flowviz__hub span,
.fwd-flowviz__result span {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
}
@media (min-width: 860px) {
  .fwd-flowviz__hub,
  .fwd-flowviz__result {
    width: 9rem;
    height: 9rem;
  }
  .fwd-flowviz__hub svg,
  .fwd-flowviz__result svg {
    width: 1.9rem;
    height: 1.9rem;
  }
  .fwd-flowviz__hub span,
  .fwd-flowviz__result span {
    font-size: 0.82rem;
  }
}
.fwd-flowviz__arrow {
  flex: 0 0 auto;
  text-align: center;
  font-size: 1.3rem;
  color: var(--brand-cyan);
  opacity: 0.7;
}
@media (min-width: 860px) {
  .fwd-flowviz__arrow {
    font-size: 1.6rem;
  }
}
.fwd-flowviz__arrow--mobile {
  display: block;
}
@media (min-width: 860px) {
  .fwd-flowviz__arrow--mobile {
    display: none;
  }
}
@media (max-width: 859px) {
  .fwd-flowviz__arrow,
  .fwd-flowviz__arrow--mobile {
    transform: rotate(90deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-flowviz__chip,
  .fwd-flowviz__hub,
  .fwd-flowviz__arrow,
  .fwd-flowviz__arrow--mobile,
  .fwd-flowviz__result {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms ease, transform 500ms ease;
  }
  .fwd-flowviz__arrow,
  .fwd-flowviz__arrow--mobile {
    transform: rotate(0deg) translateY(8px);
  }
  .fwd-build.is-built .fwd-flowviz__chip,
  .fwd-build.is-built .fwd-flowviz__hub,
  .fwd-build.is-built .fwd-flowviz__result {
    opacity: 1;
    transform: none;
  }
  .fwd-build.is-built .fwd-flowviz__arrow,
  .fwd-build.is-built .fwd-flowviz__arrow--mobile {
    opacity: 0.7;
    transform: rotate(0deg);
  }
  .fwd-flowviz__cline {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    transition: stroke-dashoffset 700ms ease;
  }
  .fwd-build.is-built .fwd-flowviz__cline {
    stroke-dashoffset: 0;
  }
  .fwd-build.is-built .fwd-flowviz__hub {
    transition-delay: 250ms;
  }
  .fwd-build.is-built .fwd-flowviz__arrow {
    transition-delay: 380ms;
  }
  .fwd-build.is-built .fwd-flowviz__result {
    transition-delay: 450ms;
  }
}
@media (max-width: 859px) and (prefers-reduced-motion: no-preference) {
  .fwd-build.is-built .fwd-flowviz__arrow,
  .fwd-build.is-built .fwd-flowviz__arrow--mobile {
    transform: rotate(90deg);
  }
}

.fwd-equation {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
}
.fwd-equation__terms {
  font-size: clamp(1.3rem, 1rem + 2.5vw, 2.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.fwd-equation__op {
  color: var(--brand-cyan);
  font-weight: 700;
}
.fwd-equation__caption {
  margin-top: 1.5rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

/* ------------------------------------------------------------
   PROJECT — CASE 01 / CASE 02
------------------------------------------------------------ */
/* PROJECT はセクション全体で1つの地色を持つ。CASE 01 / CASE 02 に個別の
   背景を与えると、背景を塗る要素（.fwd-case）とセクションの padding が
   ずれて末尾に地色が露出するため（実測 112px の白帯の原因）、地色は
   #project 側だけに置く。 */
#project.fwd-scene {
  --fwd-project-bg: #f7f9fc;
  background-color: var(--fwd-project-bg);
}
.fwd-case {
  position: relative;
  overflow: hidden;
  padding: 2.75rem 0 2.25rem;
}
@media (min-width: 700px) {
  .fwd-case {
    padding: 3.5rem 0 3rem;
  }
}
.fwd-case:last-child {
  padding-bottom: 0;
}
/* CASE 01 → CASE 02 は「別セクション」ではなく「同じ話の続き」。
   全幅の太い罫線にはしないが、本文の右端（.fwd-scene__innerの
   右paddingの内側）までは自然に伸ばす。以前はwidthを30remに
   固定していたため、本文の右端よりだいぶ手前で線が途切れて見える
   問題があった（leftの起点は維持し、rightのみ追加）。 */
.fwd-case + .fwd-case > .fwd-scene__inner::before {
  content: "";
  position: absolute;
  top: -1.75rem;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: rgba(11, 31, 58, 0.14);
}
@media (min-width: 700px) {
  .fwd-case + .fwd-case > .fwd-scene__inner::before {
    top: -2.25rem;
  }
}
@media (min-width: 1180px) {
  .fwd-case + .fwd-case > .fwd-scene__inner::before {
    left: 4.5rem;
  }
}
.fwd-case > .fwd-scene__inner {
  position: relative;
  z-index: 1;
}
.fwd-case__num {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff;
  background: var(--brand-deep);
  padding: 0.35rem 0.9rem;
}
.fwd-case__title {
  margin-top: 0.6rem;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 900;
  color: var(--brand-deep);
  max-width: 40rem;
}
.fwd-case__text {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--muted-foreground);
}
/* ------------------------------------------------------------
   CASE 01 — 現状分析から成果までの一方向プロセス
   （タイポグラフィ中心、HTML/CSSネイティブ）
   添付の参考画像はデザインディレクションとしてのみ使用し、そのまま
   画像として貼らない。架空のKPI・成果数値は掲載しない。
   CASE02（循環サイクル・大きな円アイコン）とは視覚文法を明確に分け、
   丸アイコンを主役にせず、大きな番号＋細いレール＋小さなドット＋
   短い見出しで「一方向に進むビジネスプロセス」として表現する。
   色・線の太さ・シアン・余白・アイコンの線画テイストはCASE02/TEAMと
   共通のデザインシステムを維持する。
------------------------------------------------------------ */
.fwd-stepline {
  margin-top: 1.75rem;
}
@media (max-width: 699px) {
  .fwd-stepline {
    margin-top: 1.25rem;
  }
}
.fwd-stepline__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
}
.fwd-stepline__step:last-child {
  grid-column: 1 / -1;
  max-width: 14rem;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .fwd-stepline__row {
    display: flex;
    gap: 0;
  }
  .fwd-stepline__step:last-child {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
}
.fwd-stepline__rail {
  display: none;
}
@media (min-width: 700px) {
  .fwd-stepline__rail {
    display: block;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 2.95rem;
    height: 1px;
    background: rgba(33, 189, 234, 0.4);
  }
  .fwd-stepline__rail::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent rgba(33, 189, 234, 0.55);
  }
}
.fwd-stepline__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 700px) {
  .fwd-stepline__step {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.5rem;
  }
}
.fwd-stepline__num {
  display: block;
  height: 2.1rem;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  line-height: 2.1rem;
}
.fwd-stepline__dot {
  position: relative;
  z-index: 1;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--brand-cyan);
  margin: 0.6rem 0;
}
.fwd-stepline__head {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-deep);
}
.fwd-stepline__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fwd-stepline__note {
  margin-top: 0.35rem;
  max-width: 9.5rem;
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.fwd-stepline__footnote {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.fwd-stepline__footnote-line {
  flex: 0 1 3.5rem;
  height: 0;
  border-top: 1px solid rgba(11, 31, 58, 0.18);
}
.fwd-stepline__footnote-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
  white-space: nowrap;
}
@media (max-width: 699px) {
  .fwd-stepline__footnote {
    margin-top: 0.9rem;
  }
}
@media (max-width: 480px) {
  .fwd-stepline__footnote-line {
    flex-basis: 1.5rem;
  }
  .fwd-stepline__footnote-label {
    white-space: normal;
    font-size: 0.68rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-stepline__step {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 450ms ease, transform 450ms ease;
  }
  .fwd-build.is-built .fwd-stepline__step {
    opacity: 1;
    transform: none;
  }
  .fwd-stepline__step:nth-child(3) { transition-delay: 80ms; }
  .fwd-stepline__step:nth-child(4) { transition-delay: 160ms; }
  .fwd-stepline__step:nth-child(5) { transition-delay: 240ms; }
  .fwd-stepline__step:nth-child(6) { transition-delay: 320ms; }
  .fwd-stepline__footnote {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 500ms ease 500ms, transform 500ms ease 500ms;
  }
  .fwd-build.is-built .fwd-stepline__footnote {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------
   CASE 02 — 現場発の改善サイクル図解（01〜06、HTML/CSS/SVGネイティブ）
   添付ChatGPT画像はテイスト参考のみ。承認済みの方向性（円ノード＋矢印＋
   下部の戻りアーク）を、線幅・発光感を抑えてページのトーンへ整理する。
   Marketing Platform（.fwd-product）はこのブロックとは独立しており、
   このラウンドでは一切変更しない。
------------------------------------------------------------ */
.fwd-cycle {
  margin-top: 3rem;
  padding: 0.5rem 0 1.5rem;
}
.fwd-cycle__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem 0;
}
@media (max-width: 700px) {
  .fwd-cycle__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 0.5rem;
    justify-items: center;
  }
}
.fwd-cycle__node {
  flex: 0 0 auto;
  width: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
@media (max-width: 700px) {
  .fwd-cycle__node {
    width: 100%;
    max-width: 6.5rem;
  }
}
.fwd-cycle__badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwd-cycle__icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--brand-cyan);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  .fwd-cycle__icon {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.fwd-cycle__icon svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 700px) {
  .fwd-cycle__icon svg {
    width: 1.55rem;
    height: 1.55rem;
  }
}
.fwd-cycle__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.4;
}
.fwd-cycle__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 2.1rem;
  font-size: 1.15rem;
  color: var(--brand-cyan);
  opacity: 0.75;
}
@media (max-width: 700px) {
  .fwd-cycle__arrow {
    display: none;
  }
}
.fwd-cycle__return {
  position: relative;
  margin-top: 1.25rem;
}
.fwd-cycle__return-svg {
  display: block;
  width: 100%;
  height: 2.5rem;
}
.fwd-cycle__return-path {
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: 0.55;
}
.fwd-cycle__return-arrowhead {
  fill: var(--brand-cyan);
  opacity: 0.75;
}
.fwd-cycle__return-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--brand-deep);
  background: var(--fwd-project-bg, #f7f9fc);
  padding: 0.15rem 0.65rem;
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-cycle__node,
  .fwd-cycle__arrow {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 450ms ease, transform 450ms ease;
  }
  .fwd-build.is-built .fwd-cycle__node,
  .fwd-build.is-built .fwd-cycle__arrow {
    opacity: 1;
    transform: none;
  }
  .fwd-cycle__row > *:nth-child(1) { transition-delay: 0ms; }
  .fwd-cycle__row > *:nth-child(2) { transition-delay: 60ms; }
  .fwd-cycle__row > *:nth-child(3) { transition-delay: 120ms; }
  .fwd-cycle__row > *:nth-child(4) { transition-delay: 180ms; }
  .fwd-cycle__row > *:nth-child(5) { transition-delay: 240ms; }
  .fwd-cycle__row > *:nth-child(6) { transition-delay: 300ms; }
  .fwd-cycle__row > *:nth-child(7) { transition-delay: 360ms; }
  .fwd-cycle__row > *:nth-child(8) { transition-delay: 420ms; }
  .fwd-cycle__row > *:nth-child(9) { transition-delay: 480ms; }
  .fwd-cycle__row > *:nth-child(10) { transition-delay: 540ms; }
  .fwd-cycle__row > *:nth-child(11) { transition-delay: 600ms; }
  .fwd-cycle__return {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 500ms ease 650ms, transform 500ms ease 650ms;
  }
  .fwd-build.is-built .fwd-cycle__return {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------
   PRODUCT — Marketing Platform（自社プロダクト専用ブランドUI）
   PC表示は既存デザインを維持。SPのみ下部のメディアクエリでサイドメニューを
   格納表現に変更し、ダッシュボード（数値・グラフ）を主役にする。
------------------------------------------------------------ */
.fwd-product {
  margin-top: 3.5rem;
}
.fwd-product__frame {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--brand-deep);
  box-shadow: 0 40px 90px -25px rgba(6, 15, 32, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.fwd-product__nav {
  width: 8rem;
  flex-shrink: 0;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
}
.fwd-product__navbrand {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
  line-height: 1.4;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fwd-product__navitem {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 0.6rem;
  border-left: 2px solid transparent;
}
.fwd-product__navitem.is-active {
  color: #fff;
  border-left-color: var(--brand-cyan);
  font-weight: 700;
}
.fwd-product__main {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}
.fwd-product__tabs {
  display: flex;
  gap: 1.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 0.75rem;
}
.fwd-product__tabs span.is-active {
  color: #fff;
  position: relative;
}
.fwd-product__tabs span.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.8rem;
  height: 2px;
  background: var(--brand-cyan);
}
.fwd-product__kpis {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
@media (min-width: 640px) {
  .fwd-product__kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}
.fwd-product__kpi {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}
.fwd-product__kpi-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
}
.fwd-product__kpi-value {
  margin-top: 0.3rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fwd-product__kpi-delta {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
}
.fwd-product__kpi-delta.is-up {
  color: var(--brand-cyan);
}
.fwd-product__chartwrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.fwd-product__chart-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}
.fwd-product__chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.fwd-product__gridline {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.fwd-product__bars rect {
  fill: rgba(255, 255, 255, 0.14);
  transform-box: fill-box;
  transform-origin: bottom;
}
.fwd-product__line {
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fwd-product__chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-product__bars rect {
    transform: scaleY(0);
    transition: transform 600ms ease;
  }
  .fwd-product.is-built .fwd-product__bars rect {
    transform: scaleY(1);
  }
  .fwd-product__bars rect:nth-child(2) { transition-delay: 30ms; }
  .fwd-product__bars rect:nth-child(3) { transition-delay: 60ms; }
  .fwd-product__bars rect:nth-child(4) { transition-delay: 90ms; }
  .fwd-product__bars rect:nth-child(5) { transition-delay: 120ms; }
  .fwd-product__bars rect:nth-child(6) { transition-delay: 150ms; }
  .fwd-product__bars rect:nth-child(7) { transition-delay: 180ms; }
  .fwd-product__bars rect:nth-child(8) { transition-delay: 210ms; }
  .fwd-product__bars rect:nth-child(9) { transition-delay: 240ms; }
  .fwd-product__bars rect:nth-child(10) { transition-delay: 270ms; }
  .fwd-product__bars rect:nth-child(11) { transition-delay: 300ms; }
  .fwd-product__bars rect:nth-child(12) { transition-delay: 330ms; }
  .fwd-product__line {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1100ms ease 250ms;
  }
  .fwd-product.is-built .fwd-product__line {
    stroke-dashoffset: 0;
  }
  .fwd-product__nav,
  .fwd-product__kpis,
  .fwd-product__chartwrap {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms ease, transform 500ms ease;
  }
  .fwd-product.is-built .fwd-product__nav {
    opacity: 1;
    transform: none;
  }
  .fwd-product.is-built .fwd-product__kpis {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
  }
  .fwd-product.is-built .fwd-product__chartwrap {
    opacity: 1;
    transform: none;
    transition-delay: 220ms;
  }
}
/* 注記はダッシュボード（濃紺パネル）の外・明るい地色の上に置かれるため、
   白文字では読めない。地色に合わせた濃紺系の低コントラスト色にする。 */
.fwd-product__note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: rgba(11, 31, 58, 0.55);
}
/* SP専用：左サイドメニューを横幅の大半を占める一覧表示ではなく、
   「格納された状態」の細いバーに変え、ダッシュボード本体（数値・グラフ）に
   横幅を譲る。実際の開閉機能は追加せず、あくまで見た目上の格納表現。 */
@media (max-width: 700px) {
  .fwd-product__frame {
    flex-direction: column;
  }
  .fwd-product__nav {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .fwd-product__navbrand {
    padding-bottom: 0;
    border-bottom: none;
    white-space: nowrap;
  }
  .fwd-product__navbrand-br {
    display: none;
  }
  .fwd-product__navitem {
    display: none;
  }
  .fwd-product__navtoggle {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .fwd-product__navtoggle span {
    display: block;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.55);
  }
  .fwd-product__main {
    padding: 1.1rem 1rem 1.25rem;
  }
}

/* ------------------------------------------------------------
   汎用フローチェーン（現場→PRODUCT / ANALYSIS→PLANNING→IMPROVEMENT 等で共用）
------------------------------------------------------------ */
.fwd-flowchain {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
}
.fwd-flowchain__node {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-deep);
}
.fwd-flowchain__node--accent {
  color: var(--brand-cyan);
}
.fwd-flowchain__arrow {
  color: var(--brand);
  opacity: 0.55;
  font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-flowchain__node,
  .fwd-flowchain__arrow {
    opacity: 0;
    transition: opacity 400ms ease;
  }
  .fwd-build.is-built .fwd-flowchain__node,
  .fwd-build.is-built .fwd-flowchain__arrow {
    opacity: 1;
  }
  .fwd-flowchain__node:nth-child(2),
  .fwd-flowchain__arrow:nth-child(2) { transition-delay: 100ms; }
  .fwd-flowchain__node:nth-child(3),
  .fwd-flowchain__arrow:nth-child(3) { transition-delay: 200ms; }
  .fwd-flowchain__node:nth-child(4),
  .fwd-flowchain__arrow:nth-child(4) { transition-delay: 300ms; }
  .fwd-flowchain__node:nth-child(5) { transition-delay: 400ms; }
}

/* ------------------------------------------------------------
   TEAM — SALES / CREATIVE / ENGINEER の関係図（HTML/CSS/SVGネイティブ）
   添付ChatGPT画像はテイスト参考のみ。三角形の関係線＋中心のONE GOALで
   全体像を示す。下のSales/Creative/Engineer説明ブロックは変更しない。
   グロー・リング等の過剰演出は使わず、線と余白だけで構成する。
------------------------------------------------------------ */
.fwd-onegoal {
  position: relative;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 480 / 230;
  margin: 2rem auto 0;
}
@media (min-width: 860px) {
  .fwd-onegoal {
    max-width: 57rem;
    margin-top: 1rem;
  }
}
@media (max-width: 480px) {
  .fwd-onegoal {
    max-width: none;
    width: auto;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    aspect-ratio: 480 / 195;
  }
}
.fwd-onegoal__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fwd-onegoal__edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.fwd-onegoal__spoke {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.fwd-onegoal__arrowhead {
  fill: rgba(255, 255, 255, 0.5);
}
.fwd-onegoal__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  width: 6.5rem;
}
@media (max-width: 480px) {
  .fwd-onegoal__node {
    width: 5rem;
    gap: 0.15rem;
  }
  .fwd-onegoal__node-pitch {
    display: none;
  }
}
.fwd-onegoal__node--sales {
  left: 50%;
  top: 27%;
}
.fwd-onegoal__node--creative {
  left: 15%;
  top: 81.7%;
}
.fwd-onegoal__node--engineer {
  left: 85%;
  top: 81.7%;
}
.fwd-onegoal__node-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  .fwd-onegoal__node-icon {
    width: 2.75rem;
    height: 2.75rem;
  }
}
.fwd-onegoal__node-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 480px) {
  .fwd-onegoal__node-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.fwd-onegoal__node-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.fwd-onegoal__node-pitch {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 480px) {
  .fwd-onegoal__node-label {
    font-size: 0.62rem;
  }
  .fwd-onegoal__node-pitch {
    font-size: 0.56rem;
  }
}
.fwd-onegoal__center {
  position: absolute;
  left: 50%;
  top: 64.3%;
  transform: translate(-50%, -50%);
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--brand-cyan);
  background: rgba(33, 189, 234, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2rem;
}
@media (max-width: 480px) {
  .fwd-onegoal__center {
    width: 4.5rem;
    height: 4.5rem;
  }
}
.fwd-onegoal__center-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
}
.fwd-onegoal__center b {
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .fwd-onegoal__center-label {
    font-size: 0.5rem;
  }
  .fwd-onegoal__center b {
    font-size: 0.7rem;
  }
}
.fwd-onegoal__flow {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(11, 31, 58, 0.6);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .fwd-onegoal__flow {
    font-size: 0.55rem;
    padding: 0.1rem 0.35rem;
  }
}
.fwd-onegoal__flow--a {
  left: 26%;
  top: 55%;
}
.fwd-onegoal__flow--b {
  left: 50%;
  top: 93%;
}
.fwd-onegoal__flow--c {
  left: 74%;
  top: 55%;
}
@media (min-width: 860px) {
  .fwd-onegoal__node {
    width: 10rem;
    gap: 0.45rem;
  }
  .fwd-onegoal__node-icon {
    width: 5.6rem;
    height: 5.6rem;
  }
  .fwd-onegoal__node-icon svg {
    width: 2.6rem;
    height: 2.6rem;
  }
  .fwd-onegoal__node-label {
    font-size: 1.05rem;
  }
  .fwd-onegoal__node-pitch {
    font-size: 0.9rem;
  }
  .fwd-onegoal__center {
    width: 10.2rem;
    height: 10.2rem;
    gap: 0.35rem;
  }
  .fwd-onegoal__center-label {
    font-size: 0.8rem;
  }
  .fwd-onegoal__center b {
    font-size: 1.25rem;
  }
  .fwd-onegoal__flow {
    font-size: 0.86rem;
    padding: 0.3rem 0.8rem;
  }
  .fwd-onegoal__edge {
    stroke-width: 1.8;
  }
  .fwd-onegoal__spoke {
    stroke-width: 1.3;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-onegoal__node,
  .fwd-onegoal__center,
  .fwd-onegoal__flow {
    opacity: 0;
    transition: opacity 500ms ease, transform 500ms ease;
  }
  .fwd-onegoal__node {
    transform: translate(-50%, -50%) translateY(8px);
  }
  .fwd-onegoal__center {
    transform: translate(-50%, -50%) translateY(8px);
  }
  .fwd-onegoal__flow {
    transform: translate(-50%, -50%) translateY(6px);
  }
  .fwd-build.is-built .fwd-onegoal__node,
  .fwd-build.is-built .fwd-onegoal__center {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .fwd-build.is-built .fwd-onegoal__flow {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .fwd-build.is-built .fwd-onegoal__node--creative {
    transition-delay: 120ms;
  }
  .fwd-build.is-built .fwd-onegoal__node--engineer {
    transition-delay: 220ms;
  }
  .fwd-build.is-built .fwd-onegoal__center {
    transition-delay: 380ms;
  }
  .fwd-build.is-built .fwd-onegoal__flow {
    transition-delay: 500ms;
  }
  .fwd-onegoal__edge {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 900ms ease;
  }
  .fwd-build.is-built .fwd-onegoal__edge {
    stroke-dashoffset: 0;
  }
  .fwd-onegoal__spoke {
    opacity: 0;
    transition: opacity 600ms ease 300ms;
  }
  .fwd-build.is-built .fwd-onegoal__spoke {
    opacity: 1;
  }
}

.fwd-team {
  margin-top: 1.5rem;
  max-width: 72rem;
  padding: 0 1.25rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1180px) {
  .fwd-team {
    padding: 0 1.25rem 0 4.5rem;
  }
}
@media (min-width: 860px) {
  .fwd-team {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 0.85rem;
  }
}
/* 関係図の拡大分をセクション下部の余白で吸収し、TEAM全体の縦の高さを
   増やさないための調整。見出し位置（セクション上端との距離）は変えない
   よう、padding-bottomのみを詰める。 */
@media (min-width: 768px) {
  #team.fwd-scene {
    padding-bottom: 4.6rem;
  }
}
.fwd-team__col {
  padding-top: 1.75rem;
  border-top: 2px solid rgba(255, 255, 255, 0.25);
}
.fwd-team__num {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-cyan);
}
.fwd-team__name {
  margin-top: 0.5rem;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.01em;
}
.fwd-team__pitch {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-cyan);
  line-height: 1.6;
}
.fwd-team__text {
  margin-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}
.fwd-team__cta {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  padding: 0.7rem 1.4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fwd-team__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-cyan);
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
}
.fwd-team__cta span {
  transition: transform 200ms ease;
}
.fwd-team__cta:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}
.fwd-team__cta:hover,
.fwd-team__cta:focus-visible {
  color: var(--brand-deep);
  border-color: var(--brand-cyan);
}
.fwd-team__cta:hover span,
.fwd-team__cta:focus-visible span {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .fwd-team__cta::before {
    transition: transform 250ms ease;
  }
}
.fwd-team__cta:hover::before,
.fwd-team__cta:focus-visible::before {
  transform: scaleX(1);
}

/* 3カラムになるPC幅でのみ、3つのCTAの縦位置を揃える。
   説明文の行数が職種ごとに違う（Creativeだけ3行）ため、そのままだと
   CTAのY位置がバラつく。gridの各列はもともと同じ高さへ伸びているので、
   列をflexにしてCTAを margin-top:auto で下端へ寄せれば、カード化も
   セクション高さの増加もなしに下揃えになる。
   最も背の高い列では余った空間が0になり、.fwd-team__text の margin-bottom
   （＝従来のCTA上マージンと同値）だけが残るため、既存の余白感は変わらない。
   align-self をCTAだけに与えるのは、列を stretch のままにして本文の折り返し幅を
   変えないため（列に flex-start を指定すると本文が shrink-to-fit で細くなる）。
   ⚠️ このブロックは .fwd-team__cta の基本定義より後ろに置くこと。メディア
   クエリは詳細度を上げないため、前に置くと後方の margin-top: 1.75rem に
   負けて margin-top: auto が効かない（実測で下揃えにならないことを確認した）。 */
@media (min-width: 860px) {
  .fwd-team__col {
    display: flex;
    flex-direction: column;
  }
  .fwd-team__text {
    margin-bottom: 1.75rem;
  }
  .fwd-team__cta {
    margin-top: auto;
    align-self: flex-start;
  }
}

/* ------------------------------------------------------------
   REAL VOICE — 横スクロールカード（PC/SP共通・ライブラリ不使用）
------------------------------------------------------------ */
.fwd-voice-wrap {
  margin-top: 2.5rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  position: relative;
}
@media (min-width: 1180px) {
  .fwd-voice-wrap {
    margin-left: -4.5rem;
    margin-right: -1.25rem;
  }
}
/* 「まだ続きがある」ことを示す右端のフェード。カードが唐突に切れる印象を避ける */
.fwd-voice-wrap::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  right: 0;
  bottom: 1.25rem;
  width: 2.5rem;
  background: linear-gradient(to right, transparent, var(--brand-light));
  pointer-events: none;
}
@media (min-width: 768px) {
  .fwd-voice-wrap::after {
    display: none;
  }
}
.fwd-voice-nav {
  display: none;
}
@media (min-width: 768px) {
  .fwd-voice-nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0 1.25rem 0.75rem;
  }
}
@media (min-width: 1180px) {
  .fwd-voice-nav {
    padding-right: 1.25rem;
  }
}
.fwd-voice-arrow {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--brand-deep);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.fwd-voice-arrow:hover,
.fwd-voice-arrow:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}
.fwd-voice-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 1.25rem;
  padding: 0.25rem 1.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (min-width: 1180px) {
  .fwd-voice-track {
    scroll-padding-left: 4.5rem;
    padding-left: 4.5rem;
  }
}
.fwd-voice-card {
  flex: 0 0 auto;
  width: min(78vw, 38rem);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.75rem;
}
@media (max-width: 480px) {
  .fwd-voice-card {
    width: 76vw;
  }
}
.fwd-voice__who {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.fwd-voice-card blockquote {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand-cyan);
}
.fwd-voice-card blockquote p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--foreground);
}
.fwd-voice-card blockquote span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--brand-deep);
}
.fwd-voice-dots {
  margin: 1rem 1.25rem 0;
  display: flex;
  gap: 1.5rem;
}
@media (min-width: 1180px) {
  .fwd-voice-dots {
    margin-left: 4.5rem;
  }
}
.fwd-voice-dots button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  cursor: pointer;
}
/* タップ領域だけを44px以上へ広げる（#audit-C2）。
   ⚠️ padding を増やすとドット列の高さが変わって下の余白がずれるため、
      レイアウトに影響しない疑似要素で当たり判定だけを外へ広げる。
      隣のドットとは gap 1.5rem（24px）空いており、左右±8pxでは重ならない。
      ::before はドットの丸で使用済みなので ::after を使う。 */
.fwd-voice-dots button::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
.fwd-voice-dots button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  transition: background 200ms ease;
}
.fwd-voice-dots button.is-active {
  color: var(--brand-deep);
}
.fwd-voice-dots button.is-active::before {
  background: var(--brand);
}

/* ------------------------------------------------------------
   CULTURE / WHO WE WANT / NOT FOR EVERYONE
------------------------------------------------------------ */
.fwd-values {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.fwd-values li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.35rem 0.85rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.fwd-values li:last-child {
  border-bottom: 1px solid var(--border);
}
@media (min-width: 700px) {
  .fwd-values li {
    grid-template-columns: 1.75rem 11rem 9rem 1fr;
    align-items: baseline;
    gap: 1rem;
  }
}
.fwd-values__icon {
  grid-row: 1;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
  align-self: start;
}
@media (min-width: 700px) {
  .fwd-values__icon {
    align-self: center;
  }
}
.fwd-values__icon::before,
.fwd-values__icon::after {
  content: "";
  position: absolute;
  background: var(--brand);
}
.fwd-values__icon--think::before {
  inset: 0.15rem;
  border-radius: 999px;
  background: none;
  border: 2px solid var(--brand);
}
.fwd-values__icon--think::after {
  width: 2px;
  height: 0.4rem;
  left: 50%;
  bottom: -0.15rem;
  transform: translateX(-50%);
}
.fwd-values__icon--fast::before {
  width: 0;
  height: 0;
  top: 0.3rem;
  left: 0.15rem;
  background: none;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left: 0.9rem solid var(--brand);
}
.fwd-values__icon--fast::after {
  display: none;
}
.fwd-values__icon--data::before,
.fwd-values__icon--data::after {
  width: 0.32rem;
  bottom: 0.1rem;
}
.fwd-values__icon--data::before {
  left: 0.3rem;
  height: 0.6rem;
}
.fwd-values__icon--data::after {
  left: 0.95rem;
  height: 1.1rem;
}
.fwd-values__icon--ai {
  width: 1.5rem;
  height: 1.5rem;
}
.fwd-values__icon--ai::before {
  inset: 0.4rem;
  border-radius: 999px;
}
.fwd-values__icon--ai::after {
  inset: -0.05rem;
  background: none;
  border: 1px solid var(--brand);
  border-radius: 999px;
}
.fwd-values__icon--team::before {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  left: 0;
  bottom: 0;
}
.fwd-values__icon--team::after {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  right: 0;
  top: 0;
  opacity: 0.5;
}
.fwd-values__en {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--brand-deep);
  letter-spacing: 0.01em;
}
.fwd-values__ja {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
}
.fwd-values li p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}
/* SP専用：日本語ラベルが「考／え／る」のように縦に強制折り返しされていた問題を解消。
   アイコン＋英語見出しを1行目、日本語ラベルをその下、説明文を全幅の3段構成にする。
   PC（min-width:700px）は既存の4カラム構成のまま変更しない。 */
@media (max-width: 699px) {
  .fwd-values__icon {
    grid-column: 1;
    grid-row: 1;
  }
  .fwd-values__en {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    line-height: 1.2;
  }
  .fwd-values__ja {
    grid-column: 2;
    grid-row: 2;
    white-space: nowrap;
  }
  .fwd-values li p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.5rem;
  }
}

.fwd-fit {
  margin-top: 3.5rem;
  display: grid;
  gap: 3rem;
  position: relative;
}
@media (min-width: 860px) {
  .fwd-fit {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
  }
  .fwd-fit::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 50%;
    width: 1px;
    background: var(--border);
  }
}
/* SPは縦積みになるため、列間の縦線の代わりに横罫線でWHO WE WANT / NOT FOR EVERYONEを分ける */
@media (max-width: 859px) {
  .fwd-fit__col--not {
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
  }
}
.fwd-fit__col {
  padding: 0;
}
.fwd-fit__title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--brand-deep);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--brand);
}
.fwd-fit__col--not .fwd-fit__title {
  border-bottom-color: var(--border);
}
.fwd-fit__title span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.fwd-fit__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fwd-fit__list li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--foreground);
  padding-left: 1.9rem;
  position: relative;
}
/* 記号は「四角い枠に入った＋」から、1pxの線だけで描く＋へ。
   枠があると独立したボタンのように見え、押せそうに誤読されるうえ、
   このページの他の要素（thin rule主体のエディトリアルな紙面）から浮いていた。
   グリフではなく背景の線で描くことで、フォント差による大きさ・位置の
   ばらつきもなくなり、本文の1行目に対して光学的に揃う。
   WHO WE WANT は「＋（加える）」＝横線＋縦線の2本、
   NOT FOR EVERYONE は「−（外す）」＝横線1本、と意味の差も線の数で表す。 */
.fwd-fit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.75rem;
  height: 0.75rem;
  background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand));
  background-size:
    100% 1px,
    1px 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.fwd-fit__list--not li::before {
  background-image: linear-gradient(var(--muted-foreground), var(--muted-foreground));
  background-size: 100% 1px;
}
.fwd-fit__lead {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}
.fwd-fit__closing {
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--brand-cyan);
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 800;
  color: var(--brand);
}

/* ------------------------------------------------------------
   JOBS badge / PROCESS note
------------------------------------------------------------ */
.fwd-jobrow__badge {
  display: inline-block;
  margin-left: 0.9rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-cyan);
  border: 1px solid rgba(33, 189, 234, 0.5);
}
.fwd-process__note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
@media (max-width: 767px) {
  .fwd-process__note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.fwd-process__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.75rem;
  padding: 0.35rem 0.85rem;
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid var(--border);
  background: #fff;
  transition: border-color 200ms ease, color 200ms ease;
}
@media (max-width: 767px) {
  .fwd-process__link {
    margin-left: 0;
  }
}
.fwd-process__link span {
  transition: transform 200ms ease;
}
.fwd-process__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.fwd-process__link:hover,
.fwd-process__link:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}
.fwd-process__link:hover span,
.fwd-process__link:focus-visible span {
  transform: translateX(3px);
}

/* ==========================================================================
   HERO の grain（#design-audit）
   採用TOPのHEROだけ、面に grain が乗っていなかった。ShaderGradient の
   ライブなグラデーションの上に、他の濃紺面と同じ質感を薄く重ねる。
   ⚠️ グラデーションそのもの・watermark・beat の構成には手を入れない。
      pointer-events: none の装飾レイヤーを1枚足すだけ。
   ⚠️ 濃度は他の濃紺面（0.112）より一段落とす。動くグラデーションの上では
      同じ値だとノイズとして目についてしまうため。
   ========================================================================== */
.fwd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain-navy);
  opacity: 0.082;
}

/* 日本語の折り返しを文節単位にする（#design-audit）。
   コーポレート側（site.css の .corp-scene 等）と同じ考え方を採用面にも
   適用する。文言・font-size・行長は変更していない。 */
.fwd-scene,
.fwd-hero,
.fwd-entry {
  word-break: auto-phrase;
}