/* ============================================================
   GLOBE-ING トップページ ベーススタイル
   ============================================================ */

/* --- リセット（最小限） --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
ul,
ol {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img,
picture,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 視覚的に隠すがスクリーンリーダーには読み上げさせるユーティリティ (live region 等に使用)。 */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ============================================================
   流体スケーリング基盤
   Figma基準フレーム 1280×720 (16:9) を root font-size に等比連動させる。
   1rem = min(1/128vw, 1/72vh) で width / height 両方に追従:
     - 16:9 以下 (= 縦長/通常 16:9 viewport): width 基準 (= 1280px時に 10px)
     - 16:9 より横長 (= ブラウザ chrome で実効 vh が狭い 1280×600 等): height 基準
   これにより縦スクロール不可能な領域 (sticky pin / 横スクロール) でも上下の要素が
   見切れず、設計通りの比率を保ったまま縮小して viewport にフィットする。
   超ワイド (21:9 等) では height-based 縮小により左右に余白が生じるが、上下見切れ
   よりは許容範囲。Figma の px 値は ÷10 で rem に置換できる慣習を維持。
   ============================================================ */
html {
    font-size: min(calc(100vw / 128), calc(100vh / 72));
    /* iOS Safari のテキスト自動拡大(-webkit-text-size-adjust)を抑止。これが効くと幅広コンテナ内の
       テキストが想定より太く/広く描画され、Philosophy SP 等で右へはみ出す原因になりうる
       (PC/DevTools では発生せず iPhone 実機でのみ顕在化する典型)。メインページの reset に無かったため追加。 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ============================================================
   SP (スマホ/タブレット) 流体スケール基盤  (docs/SPResponsive.md)
   境界 768px 以下を SP とみなし、root を 390px 基準 (rem = vw/39, 390px時 10px) に
   切替える。これにより PC の vw/128 基準で文字が潰れる問題を解消する。
   px÷10=rem 慣習は SP でも維持。広帯域 (〜768px) で過大化しないよう上限キャップを付ける。
   ※ キャップ値 (暫定 12px) と各セクションの SP 専用寸法は後続フェーズで確定する。
   ============================================================ */
@media (max-width: 768px) {
    html {
        /* vw/42 (420px=10px) を基準に、vh/80 で高さにもフィット。
           SP スロット幅 420units を viewport 幅ぴったりに収め、ピン時の左右見切れを解消する
           (旧 vw/39=390 基準では slot420 が画面より約7.7%広く左右がはみ出していた)。
           JS の phUnit = min(vw/420, stableVh/800, 1.2) と一致させること。
           ※ vh 項は素の 100vh ではなく var(--stable-vh)(=JS stableVh) を使う。iOS で syncTouch を使うと
             アドレスバーが収納されず 100vh(常に大) と stableVh(小のまま) が食い違い、テキストがスロット
             より広がって右にはみ出すため。両者を同じ高さに揃えて防ぐ (u_vh.js が --stable-vh を公開)。 */
        font-size: min(calc(100vw / 42), calc(var(--stable-vh, 100vh) / 80), 12px);
    }
}

/* --- 基本設定 --- */
:root {
    --color-bg: #000000; /* FirstView 開始時の背景。アニメで黒→青へ */
    --color-text: #ffffff;
    --color-primary: #0000ff; /* サイトの primary color。Philosophy のテキスト/ライン色、News 背景等で使用 */
    --color-body: #333333; /* TLS の本文 (.tls__message) / 氏名 (.tls__member-name) に使用 */
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family:
        'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 1.6rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    /* 注: html, body には overflow-x: hidden を付けないこと。
     position: sticky / ScrollTrigger.pin が祖先の overflow クリップで無効化される既知挙動のため。 */
}

/* --- ページ本体 --- */
.app {
    position: relative;
    z-index: 0;
}

/* ============================================================
   グローバルヘッダー枠 (Philosophy 上部に固定表示)
   中身は別担当者が後から実装するため、ここでは「位置 + 高さ + 下罫線」だけを確保する。
   - position: fixed で viewport 上端に張り付き
   - height 8rem (= 80px @1280) は旧 Philosophy SVG 内の y=79.5 ラインと同位置
   - border-block-end: 1px solid var(--color-primary) が旧 line の代替
   - pointer-events: none で中身が決まるまでクリックを通過させる
   - z-index は全 section を上回る (Philosophy track z:6 などより上に)
   ============================================================ */
.page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem;
    border-block-end: 1px solid var(--color-primary);
    z-index: 50;
    pointer-events: none;
    /* 初期は非表示。Philosophy.js が phase に応じて opacity を 0→1→0 と制御する。 */
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* ============================================================
   Globe Stage: GS + Recruit + 共通 3D canvas を 1 つの stacking context にまとめる。
   isolation:isolate で内部 z を page-level から隔離し、その中で
     .gs__back (z:1) → .globe-canvas (z:2) → .gs__front (z:3) → .gs__case-study
   の重ね順を成立させる。これにより Case Study カードが 3D mesh より前面に描画される。
   ============================================================ */
.globe-stage {
    position: relative;
    z-index: 10;
    isolation: isolate;
}

/* ============================================================
   ページ共通 3D canvas (GS + Recruit を貫く単一 3D「G」mesh をホスト)
   position:fixed で常に viewport をカバー。GS pin 中も Recruit 表示中も同じ
   canvas の同じ mesh が描画される (= GS の 3D ロゴがそのまま Recruit へ移動する)。
   alpha:true な WebGL renderer なので、mesh.visible=false で透過し、背後の
   セクションが見える。pointer-events:none で UI 操作を妨げない。
   z-index は .globe-stage 内で 2 (back:1 < canvas:2 < front:3、内部のみで競合)。
   ============================================================ */
.globe-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* canvas 自体は selection に含めない。これがないと canvas 上をドラッグした際に
       後背の DOM テキスト (gs__back のヘッダー等) を選択できない。 */
    user-select: none;
    -webkit-user-select: none;
}

/* ============================================================
   FirstView セクション（パーティクル → ロゴ）
   position: fixed で常に viewport top。
   スクロール距離は #scroll-spacer が確保する。
   ============================================================ */
.firstview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg);
    z-index: 1; /* Philosophy(z=5) より下 */
}

.firstview__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* スクロール誘導（画面中央やや下。opacity は JS が scrollY から駆動してフェード）。
   縦ラインの中を primary(#0000ff) の光が上→下へ流れるミニマルなインジケータ。 */
.firstview__scroll-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* 星空から浮かせる薄い背景パネル（半透明＋微ぼかし＋極細ボーダー） */
    padding: 22px 34px 26px;
    border-radius: 16px;
    background: rgba(4, 4, 22, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* opacity は main.js が毎フレーム設定（先頭=1 → 0.5vh で 0）。初期値は 1。 */
}
.firstview__scroll-label {
    font-size: 15px;
    letter-spacing: 0.46em;
    /* letter-spacing の末尾アキを相殺して視覚中央化 */
    padding-left: 0.46em;
    font-weight: 700;
    color: #ffffff;
    /* パネル＋ダークハローで星空に埋もれないよう確保 */
    text-shadow:
        0 0 8px rgba(0, 0, 0, 0.85),
        0 0 14px rgba(60, 90, 255, 0.4);
}
.firstview__scroll-line {
    position: relative;
    width: 4px;
    height: 60px;
    overflow: hidden;
    border-radius: 2px;
    /* 白いトラック（バー）。この上を primary の青い光が流れる */
    background: rgba(255, 255, 255, 0.85);
}
/* 流れる光（白地に映える brand 青のセグメントが下方向へループ） */
.firstview__scroll-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(to bottom, transparent, #0000ff 60%, #4a6bff);
    box-shadow: 0 0 8px 1px rgba(0, 0, 255, 0.7);
    animation: firstview-scroll-flow 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes firstview-scroll-flow {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(190%);
        opacity: 0;
    }
}

/* ============================================================
   ソリッド G ロゴ（パーティクルGが完成した後にクロスフェードで現れる）
   サイズは設計指定の 32rem（= 1280px時に320px / 流体で常にviewport幅の25%）。
   位置は画面中央（JSの _syncLogoToParticleG が top/left を中心に微調整）。
   ============================================================ */
.firstview__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* サイズは FirstView.js(_syncLogoToParticleG)が粒子G実測値で width/height を設定する。
       ここは JS 実行前の fallback (PC の 25%vw 相当)。G サイズの真実の源は JS 側 G_TARGET_VW_*。 */
    width: 25vw;
    height: 25vw;
    z-index: 20;
    pointer-events: none;
    opacity: 0; /* GSAP で 0→1 にフェードイン */
}

.firstview__logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   イントロ最終フェーズ(splash)の右ナビ (PC 二校 FB)
   Figma Home-B-splash05 (1280×720) 準拠。1 design px = 0.1rem。
     - 右端をアンカーに縦中央配置: 右端 x=937 (= 枠中央 640 から +29.7rem)、縦中央 y=360。
     - 3 項目は右揃え・中心間 82px(8.2rem) 間隔 (= line-height:1 の 2.4rem box + gap 5.8rem)。
     - opacity / pointer-events / transform は IntroNav が phase から毎フレーム駆動 (初期は非表示・不可)。
   ============================================================ */
.firstview__nav {
    /* firstview の外 (.app 直下) に置き position:fixed で viewport 基準に配置。firstview(z:1) の
       stacking を抜け、Philosophy(z:6) より前面 (z:40) に立てる。header(z:50) より下。 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%); /* 右端をアンカー点 (中央+margin) に、縦中央 */
    margin-left: 29.7rem;              /* アンカー点 = 枠中央 +29.7rem = Figma x=937 (右端) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5.8rem;                       /* box(2.4rem) + gap(5.8) = 中心間 8.2rem */
    z-index: 40;                       /* Philosophy(z:6) より前面 (被り防止)。header(z:50) より下 */
    color: #ffffff;
    opacity: 0;                        /* IntroNav が splash で 0→1 */
    pointer-events: none;              /* IntroNav が可視時に auto */
    will-change: opacity;
}

.firstview__nav-item {
    display: inline-flex;
    align-items: flex-end;             /* テキストと矢印を下揃え (矢印の下線=テキスト下端) */
    gap: 1rem;                         /* テキスト↔矢印 10px */
    color: inherit;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    /* 出現時の個別トランスフォームは IntroNav が JS で設定 (stagger)。ラベル/矢印の transform は
       JS が触らないためホバー演出に使える (下記)。 */
}

/* ホバー演出 (先方FB): テキストと矢印が進行方向(右)へ寄り、矢印がより大きく伸びて「進む」を示唆。
   ラベル/矢印の transform のみを使い、IntroNav が制御する item の transform/opacity とは干渉しない。
   作用するのは pointer-events:auto の rest 時のみ (slideIn 以降は無効)。 */
.firstview__nav-label,
.firstview__nav-arrow {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.firstview__nav-item:hover .firstview__nav-label,
.firstview__nav-item:focus-visible .firstview__nav-label {
    transform: translateX(0.3rem);
}
.firstview__nav-item:hover .firstview__nav-arrow,
.firstview__nav-item:focus-visible .firstview__nav-arrow {
    transform: translateX(0.9rem);
}

.firstview__nav-label {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-weight: 500;                  /* Medium (Figma) */
    font-size: 2.4rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.firstview__nav-arrow {
    width: 5.1rem;                     /* 51px */
    height: 1.2rem;                    /* 12px */
    flex: none;
    display: block;
    color: inherit;                    /* stroke=currentColor */
    overflow: visible;                 /* stroke がビュー端で欠けないように */
}

/* SP (二校FB): ロゴを上・ナビを下に配置。ナビは画面下寄りで水平中央・縦積み・各項目中央揃え。
   (PC は右端揃え。SP はこのブロックで上書きする。) */
@media (max-width: 768px) {
    .firstview__nav {
        top: 60%;
        left: 50%;
        transform: translateX(-50%);   /* 水平中央のみ (縦は top 起点で下方向へ流す) */
        margin-left: 0;
        align-items: center;           /* 各項目を中央揃え */
        gap: 3.6rem;                   /* SP 縦積みの間隔 */
    }
    .firstview__nav-label {
        font-size: 2.4rem;             /* SP は基本サイズに縮小 (先方FB: 少し大きい) */
    }
    .firstview__nav-arrow {
        width: 4.9rem;
        height: 1.1rem;
    }
}

/* ============================================================
   Philosophy 横スクロール操作ボタン (NEXT / SKIP) — 二校FB
   Figma Home (node 1803-130) 準拠。画面右下に固定 (1280 基準で端から 17px = 1.7rem)。
   青文字(#0000ff)・塗り三角矢印 (NEXT=1 / SKIP=2)・間にグレー区切り線。
   表示/クリック可否は PhilosophyControls が phase から駆動 (初期は非表示・不可)。
   ============================================================ */
/* AI「AI」リンクを画面右下に固定 (Philosophy NEXT/SKIP と同じ配置)。AI セクション中だけ表示。
   スタイル自体は .ai__badge のまま流用し、ここでは位置・表示のみ上書きする (先方FB)。 */
#ai-dock-link {
    position: fixed;
    right: 1.7rem;
    bottom: 1.7rem;
    left: auto;
    top: auto;
    z-index: 45;                 /* ph-controls と同列。header(z:50) より下 */
    opacity: 0;                  /* home.js が AI 区間で is-visible を付与 */
    pointer-events: none;        /* 可視時のみ auto */
    /* 先方FB: 退場(TLS移行)は「徐々に」ではなく瞬時に消す → opacity の transition は登場(.is-visible)側
       だけに置き、base(非表示化)は opacity 遷移なしで即座に消える。hover の色遷移は常時。 */
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: opacity;
}
#ai-dock-link.is-visible {
    opacity: 1;
    pointer-events: auto;
    transition:
        opacity 0.3s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.ph-controls {
    position: fixed;
    right: 1.7rem;               /* 画面端から 17px @1280 */
    bottom: 1.7rem;              /* 画面端から 17px @1280 */
    z-index: 45;                 /* Philosophy(z:6) より前面 / header(z:50) より下 */
    display: flex;
    align-items: center;
    gap: 1.6rem;
    color: var(--color-primary); /* #0000ff */
    opacity: 0;                  /* PhilosophyControls が horizontal で 1 に */
    pointer-events: none;        /* 可視時のみ auto */
    will-change: opacity;
}
.ph-controls__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;                 /* テキスト↔矢印 */
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-weight: 500;            /* Medium (Figma) */
    font-size: 1.6rem;           /* 16px */
    line-height: 1;
}
.ph-controls__arrows {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;                 /* SKIP の二重矢印の間隔 */
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ph-controls__tri {
    width: 0.8rem;               /* 8px */
    height: 1.2rem;              /* 12px */
    display: block;
}
.ph-controls__btn:hover .ph-controls__arrows,
.ph-controls__btn:focus-visible .ph-controls__arrows {
    transform: translateX(0.4rem); /* ホバーで矢印がわずかに進む */
}
.ph-controls__divider {
    width: 1px;
    height: 1.4rem;
    background: #bdbdbd;         /* Figma グレー区切り線 */
}

/* ============================================================
   セクションナビ (News 以降・画面左端に固定) — 二校FB
   Figma Home (node 1803-160) 準拠。32×32 グレー(#e0e0e0)の角ボタン 2 段:
     - 上: 二重下向き三角 (▼▼) = 次セクションへスキップ (AI→TLS→GS→Recruit)
     - 下: 上向き三角 + "TOP" = イントロ最後のナビ(splash)へ戻る
   青アイコン(#0000ff)。表示/クリック可否は SectionNav が phase='done' で駆動 (初期は非表示・不可)。
   ============================================================ */
.section-nav {
    position: fixed;
    right: 0;                    /* 画面右端に密着 (追従) */
    top: 9.7rem;                 /* ヘッダー(8rem=80px) の 17px(1.7rem) 下 (先方FB) */
    z-index: 45;                 /* 各セクションより前面 / header(z:50) より下 */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;                 /* ボタン間 4px */
    opacity: 0;                  /* SectionNav が done で 1 に */
    pointer-events: none;        /* 可視時のみ auto */
    will-change: opacity;
}
.section-nav__btn {
    width: 3.2rem;               /* 32px */
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: #e0e0e0;         /* Figma グレー */
    color: var(--color-primary); /* 青アイコン #0000ff */
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}
.section-nav__btn:hover,
.section-nav__btn:focus-visible {
    background: #d2d2d2;         /* ホバーで少し濃く */
}
.section-nav__icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section-nav__icon svg {
    display: block;
    width: 1.2rem;               /* 12px */
    height: 0.8rem;              /* 8px */
}
.section-nav__icon--skip {
    gap: 0.4rem;                 /* 二重シェブロンの間隔 */
}
.section-nav__icon--top {
    gap: 0.15rem;                /* 上向き三角 ↔ TOP */
}
.section-nav__label {
    font-family: 'Roboto Condensed', 'Arial Narrow', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;           /* 12px */
    line-height: 1;
    letter-spacing: 0.02em;
}
/* SP: ナビが小さいとの先方FB。SP は 1rem≈9.3px で PC(10px)より縮むぶんも重なり実寸 30px 弱しか
   なかった → 約1.45倍に拡大し、ボタン実寸を指で押しやすい 43px 前後まで引き上げる。 */
@media (max-width: 768px) {
    .section-nav {
        gap: 0.6rem;             /* ボタン間 */
    }
    .section-nav__btn {
        width: 4.6rem;
        height: 4.6rem;
    }
    .section-nav__icon svg {
        width: 1.75rem;
        height: 1.15rem;
    }
    .section-nav__icon--skip {
        gap: 0.55rem;
    }
    /* 先方FB: 「TOP」と△が接していて、かつボックス内で上寄りに見える。
       ①gap を広げて三角とラベルを離す。
       ②ラベルは line-height:1 でも box 下端に descender ぶん(≒0.115em)の空きが残るため、
         flex の中央寄せ(box基準)だと ink がその半分だけ上へ寄る。padding-top で box を下へ
         広げ、ink の上下余白が揃うよう補正する (実測で調整)。 */
    .section-nav__icon--top {
        gap: 0.65rem;
        padding-top: 0.2rem;
    }
    .section-nav__label {
        font-size: 1.7rem;
    }
}

/* ============================================================
   Philosophy セクション
   FirstView のイントロ完了後、画面右からスライドインして全画面を白く覆う。
   position: fixed の全画面オーバーレイ。初期は translateX(100%) で画面外右。
   GSAP+ScrollTrigger で translateX を 100% → 0% にスライドさせる。
   ============================================================ */
/* BG層: 白パネルだけ。slideIn 中に translateX で右→左にスライドし、左端で固定。 */
.philosophy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 5; /* FirstView(default z-index 0) より上、track(6) より下 */
    transform: translateX(100%);
    will-change: transform;
}

/* Philosophy track のビューポート窓。fixed・幅広 (8983u) な track をこの窓内にクリップする。
   will-change: transform で「fixed な track の包含ブロック」となり overflow:hidden が track にも効く
   (これが無いと track の右端が画面外へ出て、GS/Recruit 表示中に横スクロールで背面の Philosophy が見える)。
   窓自身は translateX しないので track の slideIn/horizontal の transform と二重化しない。 */
.philosophy__viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 6; /* track と同じ層 (BG=5 の上) */
    pointer-events: none;
    will-change: transform;
}

/* track 専用の窓。既定 (PC / 十分な縦幅) は inset:0 で .philosophy__viewport と同一＝従来無変化。
   SP で縦が短い端末では phUnit が vh/800 基準になり、viewport の design 幅 (vw/phUnit) が
   スロット幅 420u を超える → 隣ブロックが左右に見切れる。そこで窓を 42rem(=420u) に絞り、
   はみ出した隣ブロックを overflow:hidden で断つ (露出した左右は白BG がそのまま見える)。
   will-change: transform でこの要素が fixed な track の包含ブロックになる (= track の left:0/クリップ基準)。 */
.philosophy__window {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 6;
    pointer-events: none;
    will-change: transform;
}

/* CONTENT層: BG層とは独立した兄弟要素として配置 (上記 .philosophy__window の中)。
   position: fixed。包含ブロックは .philosophy__viewport (inset:0 = viewport) なので位置は従来どおり。
   構成: 左端 1280 units が初期表示 (Frame 153)、右側 7703 units がワイド図 (Frame 1:13)。
   slideIn 中は BG と同期して右から流れ込み（translateX 100vw → 0、初期表示が viewport に収まる）、
   horizontal で更に translateX を 0 → -hDist にスライドし、初期表示は左外へ、ワイドが右から流入。 */
.philosophy__track {
    position: fixed;
    /* GS と同じ min() レターボックス: 設計 720 高 = 72rem。画面が縦長(幅不足)のとき
       72rem < 100vh となるため、上下中央へ寄せて track 内容の左右見切れを防ぐ。 */
    top: max(0px, calc((100vh - 72rem) / 2));
    left: 0;
    /* (1280 初期表示 + 7703 ワイド) × 0.1rem (= min(vw/1280, vh/720) ベース) */
    width: calc(8983 * 0.1rem);
    height: 72rem;
    z-index: 6; /* BG層(.philosophy = z:5)の上 */
    transform: translateX(100vw); /* 初期: 画面外右で待機 */
    pointer-events: none; /* 初期表示中は誤クリックを通さない */
    will-change: transform;
}

/* ワイド図SVG: トラック左端から 1280 units 分オフセットして配置 */
.philosophy__graphics {
    position: absolute;
    top: 0;
    left: calc(1280 * 0.1rem);
    width: calc(7703 * 0.1rem);
    height: 100%;
    display: block;
    pointer-events: none;
}

.philosophy__labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 各テキストノード（DOM）。位置・サイズ・フォントは inline style で指定 */
.ph-label {
    position: absolute;
    margin: 0;
    white-space: pre-wrap; /* Figma の改行 (<br>) と長文の自動折返し両対応 */
    color: #0000ff; /* デフォルト青。例外は inline style で上書き */
    /* Figma の AUTO line-height (Roboto≈1.19, Noto≈1.5) を CSS の `normal` で近似する。
       明示的 px 値は inline style で上書きされる。 */
    line-height: normal;
}

/* ============================================================
   Philosophy ブロックの意味構造 (docs/PhilosophyMarkup.md)
   ------------------------------------------------------------
   構造と配置を分離する:
   - .ph-block-layer : 各 section を track 全面に重ねる透明レイヤー。
     子の絶対配置 % 基準を .philosophy__labels と揃えるためだけに存在。
   - .ph-wrap        : article/header/ul/li 等の意味ラッパー。display:contents で
     レイアウトに影響させず、見出し階層・リスト・landmark の意味のみ担う。
   - .ph-label       : 実テキスト。従来通り track 座標で絶対配置 (inline style)。
     これがアニメーション (anchorCenter / chain / impact) の単位。
   ============================================================ */
.ph-block-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ph-wrap {
    display: contents;
}

/* 1 entry を ul/ol > li に展開した葉ラベル (戒めの # リスト等)。
   ul/ol 自体が絶対配置され、li は通常フローで縦に積む。 */
.ph-list {
    list-style: none;
    padding: 0;
}
.ph-list > li {
    margin: 0;
}

/* リンク (Explore / 創業者メッセージ) は下線・色を継承に揃える。
   見た目のボタン枠は SVG 側 (filter 付き rect) が担当。 */
.ph-label:where(a) {
    text-decoration: none;
    color: inherit;
    pointer-events: auto; /* レイヤーは none だがリンクは押せるように */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 枠は SVG ではなく a タグの border で描画 (JSON の w/h = 枠サイズ 105x32 等)。
       高さは行送りでなく枠高で確定させ、border 込みで揃える。 */
    box-sizing: border-box;
    height: calc(32 * 0.1rem);
    border: 1px solid var(--color-primary);
    background: #ffffff;
    box-shadow: calc(2 * 0.1rem) calc(2 * 0.1rem) calc(2 * 0.1rem) rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* 強調語 (ink-write の「しない」「やらない宣言」等)。常時 bold+primary、JS が登場時に発光+微パンチ。 */
.ph-emph {
    display: inline-block;
    font-weight: 700;
    color: var(--color-primary, #0000ff);
    transform-origin: center bottom;
    will-change: transform;
}

/* 文字分割 (decode/typeon)。各文字を JS が個別に明滅/ジッター/逐次表示。
   inline-block 文字は幅がわずかに増えボックス幅で不自然に折り返すため nowrap。
   意図した改行は元テキストの \n → <br> が担保する。 */
.ph-chars {
    white-space: nowrap;
}
.ph-ch {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* 帯 wipe を行ごとに分離する行コンテナ (内側 .u-band は inline-block で帯幅=行テキスト幅)。 */
.ph-bandline {
    display: block;
}
/* 行ごとの帯は上下のはみ出し(既定 -0.08em)を抑え、隣の行に帯がかぶらないよう行内に収める。 */
.ph-bandline .u-band-bar {
    top: 0.06em;
    bottom: 0.06em;
}

/* 経営OS タイトル。先方FB: 末尾の点滅カーソル「_」は不要になったため削除 (nowrap は折返し防止で維持)。 */
.ph-os__title--boot {
    white-space: nowrap;
}

/* --- Section 0/1: 初期表示 & イントロの等式 --- */
/* 等式ラッパー (p) は display:contents、各 span が絶対配置で並ぶ。 */

/* スロット数式リール (PC 専用)。GLB 据え置きの右側で縦回転して「≠/CONSULTING →
   =/ "GROWTH" IFRASTRUCTURE」に入れ替える。container は窓高でクリップ、内部 reel を
   JS が translateY (Philosophy._applyElementVisual の 'slot')。SP は別構成のため適用外。 */
/* スロット(リール)/strike-swap/line-wipe の構造CSS。PC/SP 共通 (SP も intro 数式モーフで使用するためグローバル)。 */
.ph-slot {
        overflow: hidden;          /* 窓 (height = windowLines 行) で縦クリップ */
        white-space: nowrap;
    }
    .ph-slot__reel {
        display: block;
        will-change: transform;
    }
    .ph-slot__cell {
        display: block;
        white-space: nowrap;       /* 各行は折返さず 1 行 */
    }
    /* 演算子「=」に引かれる斜線(/)。--draw 0→1 で左下→右上に描画され「≠」を作る (PC 冒頭数式・
       _updateEquationImpact 駆動)。= の字面中央を対称に貫くよう中央配置し、clip で下左→上右へ現す。
       em は演算子 font-size(132px) 基準。位置(left/top)は = 字面に合わせ微調整。--glow は衝撃発光。 */
    .ph-op-slash {
        position: absolute;
        /* 位置/角度/長さ/太さは CSS 変数で GUI(u_slashTweakGui) から live 調整可能。既定=先方調整の確定値。 */
        left: var(--slash-left, 50.5%);     /* = 字面の中央付近 */
        top: var(--slash-top, 58.5%);
        /* 長さ = 既定 × overshoot 倍率(--slash-len-mul: 派手化で一瞬長く出して既定へ収束・JS駆動)。 */
        width: calc(var(--slash-len, 0.59em) * var(--slash-len-mul, 1)); /* 斜線の長さ */
        height: var(--slash-thick, 0.075em); /* 斜線の太さ */
        background: var(--color-primary, #0000ff); /* 青一色 */
        /* 先方FB: 「巨大出現→回転しながら縮小して=へ」= 動きのみ(エフェクトなし)。
           --slash-scale(巨大→1) と --slash-spin(余分回転→0) を _updateEquationImpact が駆動。 */
        transform: translate(-50%, -50%)
                   rotate(calc(var(--slash-angle, -68deg) + var(--slash-spin, 0deg)))
                   scale(var(--slash-scale, 1));
        transform-origin: 50% 50%; /* = の位置(中央)基準で拡大 → 縮小しても = に留まる */
        /* 断面(両端)を水平にする平行四辺形。--slash-slant = 端の傾き幅% (GUI が angle/len/thick から算出)。 */
        clip-path: polygon(0% 0%, calc(100% - var(--slash-slant, 5.14%)) 0%, 100% 100%, var(--slash-slant, 5.14%) 100%);
        /* マスクwipe/発光は廃止 (動きのみで表現)。 */
        opacity: 0;
        pointer-events: none;
    }

    /* 打消し→置換 (CONSULTING に打消し線 → "GROWTH" IFRASTRUCTURE へ差し替え)。
       pre/post を同位置に重ね、JS が opacity / 打消し線 scaleX を駆動する。 */
    .ph-strikeswap {
        white-space: nowrap;
    }
    .ph-strikeswap .ph-ss__pre,
    .ph-strikeswap .ph-ss__post {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        will-change: opacity, transform;
    }
    /* post の各行 (GROWTH / IFRASTRUCTURE)。行ごとに padding-left でインデント可能。 */
    .ph-ss__line {
        display: block;
    }
    .ph-ss__pretext {
        position: relative;        /* 打消し線の絶対配置基準 */
        display: inline-block;
    }
    .ph-ss__strike {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: calc(10 * 0.1rem);
        background: var(--color-primary, #0000ff);
        transform: translateY(-50%) scaleX(0);
        transform-origin: left center;
    }
    /* SP: 打消し線を細く (文字が小さいぶん 10→5 units)。 */
    @media (max-width: 768px) {
        .ph-ss__strike { height: calc(5 * 0.1rem); }
    }
    /* 文字単位の破壊→再創造スラム。各文字を JS が個別に飛散/収束 (transform/opacity/filter)。 */
    .ph-ss__ch {
        display: inline-block;
        white-space: pre;          /* span 内の空白を保持 */
        will-change: transform, opacity, filter;
        transform-origin: center center;
    }
    /* 補足テキストの行ワイプ。各行を block 化し JS が clip-path で左→右に開く。 */
    .ph-lw__line {
        display: block;
        clip-path: inset(0 100% 0 0); /* 初期は全クリップ (JS が開く) */
        will-change: clip-path, transform;
    }
    /* Don'ts 本文 (PC): 各行は設計上の単一行 (手動 \n で行分割済み)。Mac の和文グリフが Win より僅かに
       広く w(565px 等) に収まらず「しない」が3行目へ落ちる崩れを防ぐため自動折返しを禁止。
       本文 x=2791・枠右辺 3543 で右に 30px 以上の余白があり、滲み出ても溢れない。
       SP は狭幅での再折返しが必須なので対象外 (下の SP メディアで normal に戻す)。 */
    .ph-donts__body .ph-lw__line {
        white-space: nowrap;
    }
    @media (max-width: 768px) {
        .ph-donts__body .ph-lw__line { white-space: normal; }
    }

/* 戒/め の impact 残像。main(実体) に ghost 層を重ね、JS が個別に scale/opacity/blur (Don'ts 風トレイル)。
   PC/SP 共通 (SP も imashime-impact を適用するためグローバルに置く)。 */
.ph-im__layer { transform-origin: center center; }
.ph-im__main { position: relative; display: inline-block; }
.ph-im__ghost {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

/* --- Section 2: 戒め --- */
/* 番号・記号なしのプレーンリスト (Figma に bullet なし) */
.ph-imashime__list > li {
    white-space: nowrap;
}

/* --- Section 3: Don'ts の番号バッジ --- */
/* 白数字 + 青円。元 SVG rect (28x28 青円) の代替。JSON 座標はテキスト基準なので、
   円 (28x28) の中心をテキスト中心に合わせるよう負方向に寄せる。 */
.ph-donts__num {
    box-sizing: border-box;
    width: calc(28 * 0.1rem);
    height: calc(28 * 0.1rem);
    background: var(--color-primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    line-height: 1;
    /* 位置は JSON を rect 座標 (28x28) にしたので中心ずらしは不要。
       飛び込み (translateY) は Philosophy.js の text 描画が transform で行う。 */
}

/* --- Section 4: 動的平衡マネジメント (equil) --- */
/* 5 概念名/英語サブ: 散乱→収束 (equil-converge) の回転・縮小基点を文字中心に。
   Philosophy.js が transform(translate+rotate)/filter(blur) を制御する。 */
.ph-equil__concept-name,
.ph-equil__concept-sub {
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
}
/* 英語サブは小さく上品に (字間) + 折返し防止。 */
.ph-equil__concept-sub {
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* --- Section 5: エントロピー思考 ノード名 --- */
/* 旧 wrapLines の行 span 用。現在は文字分割(.ph-ch)なので文字 span には当てない
   (当てると各文字がブロック化＝縦積みになる)。改行は <br> が担保。 */
.ph-entropy__node-name > span:not(.ph-ch) {
    display: block;
}
/* タイトル/node名の settle (ゆらぎ・散乱→整列): 回転・縮小の基点を文字中心に。
   Philosophy.js が transform(translate+scale+rotate)/filter(blur) を en1 pin で制御する。 */
.ph-entropy__title,
.ph-entropy__node-name {
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
}

/* === Don'ts hero: 全画面アウトライン文字 (track 外の fixed レイヤー) ===
   donts pin 区間で Philosophy.js が opacity/scale/color を制御する。
   初期は opacity:0。z-index は track(6) より前面、page-header(50) より背面。 */
.ph-donts__hero {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    will-change: opacity;
}
/* 残像 (モーションブラー) 用に span を同じ grid セルへ重ねる。塗りのまま左へ流す。 */
.ph-donts__hero span {
    grid-area: 1 / 1;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: calc(160 * 0.1rem); /* scale 2.6 倍で画面いっぱいの宣言になる base */
    line-height: 1;
    white-space: nowrap;
    color: var(--color-primary);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}
/* 「積極的破壊と再創造」を囲む循環矢印 (index.html の SVG)。
   回転は Philosophy.js が en1 pin の局所進捗でスクロール駆動 (加速→静止)。
   CSS 無限回転は廃止し、transform-box/origin だけ与えて回転原点を bbox 中心にする。 */
.ph-entropy-cycle {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0; /* 初期は非表示。en1 pin 中に Philosophy.js が opacity/scale/blur で「渦が出現」 */
    will-change: transform, opacity, filter;
}
/* JI / AX 巨大タイポの os-snap (機械的スナップ): scale 基点を文字中心に。 */
.ph-os__stage-title {
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    white-space: nowrap; /* 「AI-X」等が枠幅で折返さないよう1行固定 (JI/AX 共通) */
}

/* --- Section 7: GLOBE-INGの経営体系 (2 行 span) --- */
.ph-globe__title > span {
    display: block;
    white-space: nowrap; /* 「GLOBE-ING」と「の」の間で折り返さない */
}
/* フィナーレのタイトル行: 固定幅を外しテキスト幅に縮める (バーをテキスト幅に一致させるため)。 */
.ph-globe__title-line {
    width: auto;
}
/* 文字 child: バーの裏で左→右に出現 (clip-path)。バーより背面。 */
.ph-globe__title-text {
    display: inline-block;
    white-space: nowrap;
    z-index: 1;
    will-change: clip-path, opacity;
}
/* 青い不透明バー child: 行 (=テキスト幅) を覆う。上下に少し bleed して字形を完全に隠す。文字より前面。 */
.ph-globe__title-bar {
    position: absolute;
    top: -0.08em;
    bottom: -0.08em;
    left: 0;
    right: 0;
    background: var(--color-primary, #0000ff);
    pointer-events: none;
    z-index: 2;
    clip-path: inset(0 100% 0 0); /* 初期は幅 0 (非表示) */
    will-change: clip-path;
}

/* SP 専用コネクタ線/接続点 (.ph-sp-conn) は PC では非表示。
   PC は従来の横フロー図 spine を使うため、SP コネクタは出さない (data-viewport は applyViewportFlag が付与)。 */
html[data-viewport='pc'] .ph-sp-conn {
    display: none;
}

/* ============================================================
   Philosophy SP (≤768px) レスポンシブ
   ------------------------------------------------------------
   16:9 ワイド図 (8983×720) を縦長 portrait に流用できないため、track を
   「縦 1 画面 × 横 8 ブロック」のタイル列へ切替える。寸法は u_phase.js の
   PH_TRACK_WIDTH_SP(3360units) / PH_SP_TRACK_H(800units) と一致させること
   (CSS rem と JS phUnit が SP で一致＝0.1rem≈1px@390 のため units をそのまま rem 換算)。
   各要素の SP 座標は Philosophy.js の PH_SP_LAYOUT が与える。
   ============================================================ */
@media (max-width: 768px) {
    /* 先方FB(SP): 「1画面に1ブロックのみ」を厳守する。窓幅をスロット幅 42rem(=420units) に固定し、
       viewport がそれより広いぶん(縦短端末で phUnit が vh/800 になるケース)は左右を白BGに逃がす。
       窓が 420u ちょうど = track 右端着地(gl1)でも窓は [2940,3360] = globe スロットのみになる。
       幅は JS の phViewW と同じ 100vw 軸で採る (left/right を % で採ると包含ブロック幅=スクロールバーを
       除いた clientWidth 基準になり、JS(innerWidth)と食い違って窓が 420u ちょうどにならない)。 */
    .philosophy__window {
        left: max(0px, calc((100vw - 42rem) / 2));
        right: auto;
        width: min(100vw, 42rem);
    }
    .philosophy__track {
        /* 縦 80rem(=800units)。実 vh との差は上下中央寄せ + 軽レターボックス。
           先方FB「縦の低い端末で下が見切れる」: vh 項は root font-size(96行)と同じ var(--stable-vh) を
           使うこと。iOS は 100vh がアドレスバー非表示時の“大きい方”で固定される一方 rem は stableVh(小)
           基準なので、素の 100vh だと (100vh - 80rem)/2 ぶん track が下へ押し出され、その分そのまま
           画面外＝下が切れる (390幅/実効664高で約90px)。両者を同じ高さに揃えれば top=0 で収まる。 */
        top: max(0px, calc((var(--stable-vh, 100vh) - 80rem) / 2));
        /* 横 336rem(=3360units = PH_SP_TRACK_WIDTH_SP) */
        width: calc(3360 * 0.1rem);
        height: 80rem;
    }
    /* SVG graphics: SP では JS(_applySpSvg) が viewBox を 0 0 3360 800 (=SP track 座標) に
       再設定するため、コンテナを track 全面に重ねる。未対応 SVG は JS 側で display:none。 */
    .philosophy__graphics {
        left: 0;
        width: 100%;
        height: 100%;
    }
    /* imashime のリストは PC では white-space:nowrap。SP の狭い枠内では折返しを許可。 */
    .ph-imashime__list > li {
        white-space: normal;
    }
    /* donts hero (全画面の塗り Don'ts): scale 2.6 倍でも画面幅に収まるサイズ (≈360px<390)。 */
    .ph-donts__hero span {
        font-size: calc(46 * 0.1rem);
    }
    /* 6つのDon'ts の番号バッジ: 高さを幅(inline 24px)に合わせて正円にする (PC base 28 は縦長化の原因)。 */
    .ph-donts__num {
        height: calc(24 * 0.1rem);
    }
}

/* ============================================================
   PC (Figma 1280×720) 専用の微調整。
   SP(≤768) は Philosophy.js の PH_SP_LAYOUT が別座標/別行送りを与えるため適用外にする。
   ============================================================ */
@media (min-width: 769px) {
    /* Don'ts 番号バッジ: JSON 座標では本文ブロック中心より一律 8px 上に出る (全6項目で実測 -8px)
       ため下げて中央寄せ。margin は JS の fly-in transform に影響されず abs 要素(top 指定)を下げる。 */
    .ph-donts__num {
        margin-top: calc(8 * 0.1rem);
    }
    /* 経営OS 本文: JSON bbox 由来の line-height(15px < 16px font) で 2 行が潰れるため引き上げる。
       body1 は下の body2 まで 54px・body2 は水平にずれた Explore を避け AX 段(top 508)まで余裕あり
       → 1.5(=24px・2行48px) で重なりなく可読性を確保。inline 指定を上書きするため !important。 */
    .ph-os__body {
        line-height: 1.5 !important;
    }
}

/* 先方FB(SP): JI 本文(.ph-os__body は .ph-chars 由来で white-space:nowrap)は、SP でフォント拡大すると
   固定1行が枠幅を超えて右へはみ出す。SP は枠幅で折り返させる(char span は inline-block なので normal で
   自然に wrap)。line-height も可読性のため確保。 */
@media (max-width: 768px) {
    .ph-os__body {
        white-space: normal !important;
        line-height: 1.55 !important;
    }
}

/* 全フェーズ合計のスクロール距離を確保する不可視 spacer。
   高さは main.js の updateScrollSpacer() が viewport から算出して設定。
   全セクションが position: fixed なので、ページのスクロール距離はここだけ。 */
#scroll-spacer {
    width: 100%;
    pointer-events: none;
}

/* ============================================================
   News セクション（Figma Frame 2021:2 / SP: Frame 1055）
   spacer の後ろに通常フロー配置。position:relative + z-index で fixed の Philosophy(z:5/6) を上書き。
   スクロールが Philosophy 終端を超えると下から自然にスライドアップ（CSS の通常スクロール挙動）。

   ★レスポンシブ方針 (docs/SPResponsive.md):
   News は「通常セクション」のため、ページ全体の 16:9 流体 rem (vw/128) から切り離し、
   px + clamp + auto-fill グリッドで組む。これにより:
     - PC で viewport 幅が狭まっても本文が小さくなりすぎない (px/clamp で下限を担保)
     - 列が auto-fill で reflow し、最終的に 1 列 (SP) になる
   寸法: PC=1280基準 (content 1121 / 4列272px / title 40 / pad 80)、SP=390基準 (content 358 / 1列 / title 32 / pad 16)。
   ============================================================ */
.news {
    position: relative;
    z-index: 10;
    background-color: var(--color-primary);
    color: #ffffff;
    /* PC 80px → SP 16px の流体パディング (下限 16 / 上限 80) */
    padding-block: clamp(40px, 6vw, 80px);
    padding-inline: clamp(16px, 6.25vw, 80px);
    width: 100%;
    min-height: 100vh; /* アイテムが少なくても最低 viewport を覆う */
}

.news__inner {
    width: 100%;
    max-width: 1121px; /* Figma の content width = 1121px (固定) */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 3vw, 48px); /* タイトル ↔ body 間 = PC48 → SP24 */
}

.news__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4vw, 40px); /* PC 40px → SP 32px */
    letter-spacing: 0;
    line-height: 1;
    color: #ffffff;
    text-align: center;
}

.news__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 2.5vw, 32px); /* tabs ↔ 区切り線 ↔ grid ↔ 区切り線 */
}

.news__tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px; /* PC: 全 flex 子 (タブ + 区切り線) 間 24px (Figma Frame 26 gap) */
}

.news__tab {
    flex: 0 0 auto; /* 横スクロール時に縮まない */
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    line-height: 1;
    text-decoration: none;
}

.news__tab-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 16px; /* Figma の Line 70 (高さ 16px) */
    background-color: #ffffff;
}

/* SP: タブの白帯を白枠(1px border)いっぱいに広げる (枠全体に帯) + 文字折返し防止。 */
@media (max-width: 768px) {
    .news__tab .u-band-text {
        white-space: nowrap; /* pre-wrap を上書きし 1 行に (折返し防止) */
    }
    .news__tab .u-band-bar {
        inset: -6px; /* padding(6px)分はみ出させ、白帯を 1px枠いっぱいに表示する */
    }
}

.news__divider {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    border: 0;
    margin: 0;
}

/* タイトル直下の罫線は SP のみ (既定は非表示)。罫線位置が PC/SP で異なる。 */
.news__divider--sp {
    display: none;
}

/* グリッド: auto-fill で reflow。260px が PC content(1121) で 4 列 (各272px)、
   SP content(358) で 1 列に収束する境界値。min(260px,100%) で極狭幅でも溢れない。 */
.news__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    column-gap: 11px;
    row-gap: 12px;
    list-style: none;
}

/* カード: 白背景。高さは内容駆動 (min-height で下限確保) にして、
   列数が変わって幅が伸びても破綻しないようにする。
   タグはカード左上に密着 (padding-box 原点 = カード角) させ、本文は flow + padding。 */
.news-card {
    position: relative;
    display: block;
    background-color: #ffffff;
    color: #333333;
    min-height: 216px; /* PC 272x216 基準 */
    padding: 53px 14px 32px; /* 上=タグ回避53 / 左右14 / 下=+アイコン回避32 */
    text-decoration: none;
}

/* News 出現アニメ: 領域INで1回だけ再生 (News.js が .news--in を付与・逆再生なし)。
   タイトル → タブ → カード(li, stagger) の順にフェードアップ。
   ※カードの reveal は li に当てる (.news-card は hover で transform を使うため衝突回避)。 */
.news__title,
.news__tabs,
.news__grid > li {
    opacity: 0;
    transform: translateY(2.4rem);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
.news--in .news__title,
.news--in .news__tabs,
.news--in .news__grid > li {
    opacity: 1;
    transform: translateY(0);
}
.news--in .news__tabs {
    transition-delay: 0.12s;
}
.news--in .news__grid > li {
    transition-delay: calc(0.24s + var(--i, 0) * 0.05s);
}

/* タグ: カード左上 (0, 0) に密着配置 (border なしなので padding-box 原点 = カード角) */
.news-card__tag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333333;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    padding: 10px;
}

/* 本文: flow 配置 (カード padding で位置決め)。内容が増えればカードが伸びる。 */
.news-card__text {
    margin: 0;
    color: #333333;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
}

/* 右下「+」アイコン (16x16, 8px inset)。Figma の BOOLEAN_OPERATION を疑似要素で再現。 */
.news-card__plus {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
}
.news-card__plus::before,
.news-card__plus::after {
    content: '';
    position: absolute;
    background-color: #d9d9d9; /* Figma の Rectangle 115/116 = #D9D9D9 */
}
.news-card__plus::before {
    /* 縦棒 */
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}
.news-card__plus::after {
    /* 横棒 */
    top: 50%;
    left: 0;
    height: 2px;
    width: 100%;
    transform: translateY(-50%);
}

/* News の SP 微調整 (Figma Home-SP / Frame 1055)。1 列・カード 358x182・行間 16。 */
@media (max-width: 768px) {
    .news__grid {
        row-gap: 16px;
    }
    .news-card {
        min-height: 182px; /* SP 基準 358x182 */
    }

    /* 罫線位置の差: SP はタイトル直下のみ。PC 用 (タブ↔grid / grid 下) は隠す。 */
    .news__divider--sp {
        display: block;
    }
    .news__divider--pc {
        display: none;
    }

    /* タブ: 各タブは max-content(文字+余白の自然幅)のまま横並び → 横スクロール。
       full-bleed(画面端まで)・右端に余白を作らない。区切り線なし。 */
    .news__tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        width: 100vw;
        margin-inline: calc(50% - 50vw); /* 画面左右端まで full-bleed */
        padding-inline: 16px;
        overflow-x: auto;                /* はみ出しは横スクロール */
        scrollbar-width: none;           /* Firefox */
        -ms-overflow-style: none;        /* 旧 Edge/IE */
    }
    .news__tabs::-webkit-scrollbar {
        display: none;                   /* Chrome/Safari スクロールバー非表示 */
    }
    .news__tab-sep {
        display: none; /* SP は区切り線なし */
    }
    /* SP タブ: 白1px枠・角丸なし・内側6px (Figma Frame 1039 等)。塗りなし。自然幅を保つ。 */
    .news__tab {
        flex: 0 0 auto;                  /* 縮めず自然幅 (max-content 挙動) */
        border: 1px solid #ffffff;
        padding: 6px;
    }
}

/* ============================================================
   AI セクション（Figma Frame 2023:3）— 初期表示のみ
   ・primary 背景が viewport を覆う (min-height 100vh)
   ・スクロール演出に備え `.ai__sticky` (position:sticky) を内包する構造を先に組む。
     将来 `--ai-scroll-extent` を増やせば、その分だけ sticky inner が viewport top に
     張りついたまま中身を scroll-progress でアニメーションさせられる。
   ・`.ai__inner` は Figma フレーム (1280×590) と同じアスペクトで viewport 幅にスケール。
     内部要素はその座標系に対して absolute 配置（rem は 1/128vw なのでスケール追従）。
   ============================================================ */
.ai {
    position: relative;
    z-index: 10; /* Philosophy(z:6) を上書き */
    background-color: var(--color-primary);
    color: #ffffff;
    /* AI.js が JS 側の AI_SCROLL_EXTENT_VH に合わせて上書きする初期既定値。
       transition12 (1.2) + phase2 hold (0.3) + transition23 (1.2) + phase3 hold (0.3)
       + transition3b (4.0) + phase3b hold (0.3) + transition34 (1.2) + phase4 hold (0.3)
       + transition4b (1.5) + phase4b hold (0.3) + transition4c (1.4) + phase4c hold (0.3)
       + transition45 (1.2) = 13.5vh = 1350vh。Phase 5 (EMERGENCE) は ai__final で通常フロー。 */
    --ai-scroll-extent: 1350vh;
}

/* sticky pin 領域: ai__sticky を pin する parent。pin extent = この高さ - sticky 高さ。 */
.ai__pin {
    position: relative;
    height: calc(100vh + var(--ai-scroll-extent));
}

.ai__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden; /* 縦ラインの translateY(-100%) で上にはみ出すぶんをクリップ */
}

/* --- 背景レイヤー: 永続的に viewport を覆う。縦/横ラインの土台。 --- */
.ai__bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* --- 縦ライン 30本: flex で等分配、gap 4px --- */
.ai__vert-lines {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 4px;
}

.ai__vert-line {
    flex: 1;
    height: 100%;
    /* Figma 由来の linear gradient (top→bottom):
     0%   = #000077 (navy / 暗い青)
     48%  = #0000c8 (中明度の青)。それ以降は同色で hold。
     線と線の間の 4px gap からは section bg (primary #0000ff) が透ける。 */
    background: linear-gradient(to bottom, #000077 0%, #0000c8 48%, #0000c8 100%);
    /* 初期は translateY(-100%) で viewport 上に隠れる。JS が transform を更新する。 */
    will-change: transform;
}

/* viewport をフルで使う。各要素は上下どちらかの端からの距離で絶対配置。
   距離は rem (= 1/128vw) なので画面幅に応じて流動的にスケールする。 */
.ai__inner {
    position: relative;
    z-index: 1; /* 背景レイヤーの上 */
    width: 100%;
    height: 100%;
    will-change: transform; /* Phase 1→2 で translateY(-100vh) で上にスクロールアウト */
}

/* --- 右上「embedされた知が、動き出す」: 上端から 8rem (= 横 padding と同じ余白)、右端から 9.3rem。
   width は付けずコンテンツ幅で右端アンカー (= 不意の折返しを防ぐ)。 --- */
.ai__embed {
    position: absolute;
    top: 8rem;
    right: 9.3rem;
    white-space: nowrap;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 4rem; /* 40px */
    line-height: 1;
    color: #ffffff;
}

/* --- 中央「AI」: embed の bottom と statement の top の中点に来るよう calc で算出。
   どんな viewport 高さでも、上下の要素の中間位置に配置される。
     embed bottom y       = 8rem (top) + 4rem (font高さ) = 12rem
     statement top y      = 100vh - 8rem (bottom) - 26.8rem (height) = 100vh - 34.8rem
     midpoint y           = (12rem + (100vh - 34.8rem)) / 2 = 50vh - 11.4rem
     AI top y (中央寄せ)  = midpoint - 10rem (= AI 高さ/2) = 50vh - 21.4rem
   ※ statement height = 3行 × 4.8rem + 4 gaps × 3.1rem = 26.8rem
   ※ AI 高さ = font-size 20rem × line-height 1 = 20rem
 --- */
.ai__big {
    position: absolute;
    top: calc(50% - 21.4rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* 巨大化して画面を覆う瞬間に embed/statement の前面に来る */
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20rem; /* 200px */
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
}

/* --- 左下 statement: 下端から 8rem (= 横 padding と同じ余白)、左端から 8rem --- */
.ai__statement {
    position: absolute;
    bottom: 8rem;
    left: 8rem;
    width: 55.6rem;
    display: flex;
    flex-direction: column;
    gap: 3.1rem; /* Frame 66 itemSpacing 31 */
}

.ai__statement-line {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 4.8rem; /* 48px */
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
}

/* divider 既定は親幅いっぱい (Line 66 = 556) */
.ai__statement-divider {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    border: 0;
    margin: 0;
}

/* 先方FB: 下線は直上の行のテキスト幅に合わせる。1本目=「全産業を」(≒192px)、2本目=「AIネイティブに変え、成長を支える」(≒767px)。 */
.ai__statement-divider--short {
    width: 19.2rem;
}
.ai__statement-divider--long {
    width: 76.7rem;
}

/* --- 「AI & DATA」badge: statement と相対位置を保持するため、statement の bottom 増分(4.9rem)
   を同じだけ加算して上にシフト。Figma の statement bottom 3.1rem / badge bottom 9.6rem の差 6.5rem
   は維持しつつ、新ベース 8rem の statement に合わせて 8rem + 6.5rem = 14.5rem。 --- */
.ai__badge {
    position: absolute;
    text-decoration: none; /* span → a 化に伴い下線を抑止 */
    text-transform: uppercase; /* HTML は "AI & Data"、表示は大文字 */
    bottom: 14.5rem;
    left: 66rem;
    width: max-content; /* 先方FB: 文言を可変幅で収める。2行(AIプラットフォームについて/詳しく見る)は最長行幅 */
    white-space: nowrap; /* <br> で明示改行・各行は折返さない */
    min-height: 3.2rem; /* 先方FB: 2行化に伴い高さ可変(下辺 bottom 固定で上へ伸びる) */
    padding: 0.7rem 2.4rem; /* 上下 7px で2行に余白・左右 24px */
    background-color: #ffffff;
    border: 1px solid var(--color-primary); /* 他バッジと統一・hover で白に反転 */
    box-sizing: border-box;
    color: var(--color-primary);
    z-index: 2; /* 装飾の ai__keywords より前面にしてクリック可能域を確保 */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.6rem; /* 16px */
    line-height: 1.35; /* 2行の行間 */
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   AI Phase 2: 垂直知 (Figma Frame 2027:37, frame size 1280×720)
   aspect-ratio 固定 frame の中に absolute 配置で再現。frame は viewport 内に収まる
   よう width / max-height で制約する。
   ============================================================ */
.ai__phase2 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* bg-layer(0), inner(1) より上 */
    pointer-events: none; /* テキストは選択不要、クリック透過 */
    will-change: transform; /* transition23 で translateX(-100vw) で左にスライドアウト */
}
/* 先方FB: pointer-events:none は子孫に伝播しない (仕様上 子はデフォルト auto で hit 対象のまま)。
   加えて出現演出用の一括規則 (.ai__desc/.ai__stack-char… { pe:auto }) が phase2 テキストにも pe:auto を
   与えているため、透明な垂直知テキストが Phase1 の ai__badge リンクの上に被りクリック/pointer を奪う。
   phase2 内は非インタラクティブ(テキスト/装飾のみ)なので子孫すべてを !important で none にし確実に透過。 */
.ai__phase2 * {
    pointer-events: none !important;
}

.ai__phase2-frame {
    position: relative;
    /* 16:9 (1280:720) を保ちつつ viewport を超えない: 横は 100%, 縦は 100vh */
    width: min(100%, calc(100vh * 1280 / 720));
    aspect-ratio: 1280 / 720;
}

/* 先方FB: 左側の縦書き "VERTICAL INTELLIGENCE" は廃止 (.ai__vintel の規則も撤去)。 */

/* --- 中央上: "垂直知" 3 文字スタック (Figma 位置 x=602, y=40, w=78, h=242) --- */
.ai__stack {
    position: absolute;
    /* 先方FB: 少し下へ (半文字ぶん = font-size 7.8rem の 1/2 ≒ 3.9rem)。旧 4rem。
       SP は @media で縦積み flex のため top:auto（中央寄せのまま・この指定は効かない）。 */
    top: 7.9rem;
    left: 60.2rem;
    width: 7.8rem;
    height: 24.2rem;
}

.ai__stack-char {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 7.8rem;
    line-height: 1;
    color: #ffffff;
    will-change: transform;
}
/* 3 文字を Figma の y 値に基づき積み上げ位置に固定 */
.ai__stack-char[data-stack='0'] {
    top: 0;
} /* 垂 */
.ai__stack-char[data-stack='1'] {
    top: 8.2rem;
} /* 直 */
.ai__stack-char[data-stack='2'] {
    top: 16.5rem;
} /* 知 */

/* --- 中央コンテンツブロック --- */
/* .ai__center: Figma Frame 162 と同サイズの絶対位置コンテナ。子要素は Figma の y 座標で個別 absolute 配置。
   flex+margin だと CSS の line-height 余白で Figma の itemSpacing がズレるため、絶対座標で固定する。 */
.ai__center {
    position: absolute;
    /* 先方FB(英文の全廃): 下部の SECI 行が無くなり画面下 1/4 が空いたため、テキスト群を
       「垂直知スタックの下端(282) 〜 フレーム下端(720)」の上下中央へ寄せ直す。
       ブロック高 ≒ 21.4rem なので top = (28.2 + 72)/2 - 21.4/2 ≒ 39.4rem (旧 31.2rem)。 */
    top: 39.4rem;
    left: 29.1rem; /* = Frame 162 left (291px) */
    width: 69.9rem; /* = Frame 162 width (699px) */
}

/* 子要素共通: 親幅いっぱい + 中央寄せ + 絶対位置 */
.ai__desc,
.ai__sub-desc,
.ai__keywords {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    color: #ffffff;
    pointer-events: none; /* 装飾テキスト。下層の ai__badge 等のクリックを奪わない */
}

/* desc: top 0、line-height は Figma BBox h=74 ≒ 3行×24.7 に合わせて 1.25 */
.ai__desc {
    top: 0;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 2rem; /* 20px */
    line-height: 1.25;
    will-change: opacity, filter;
}

/* 先方FB: 英文サブ (Industry-Specific Ontology / .ai__subtitle) は廃止。
   空いた 1 段ぶん、sub-desc と keywords を上へ詰めて desc との間隔を元の呼吸に戻す。 */

/* sub-desc: subtitle 廃止で その位置(12.3rem)へ繰り上げ (旧 17rem) */
.ai__sub-desc {
    top: 12.3rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 2.25rem; /* 22.5px。「…オントロジーPFを構築」を 699px 幅で1行に収めるため 24→22.5 に微縮小 (PCのみ。SPは@mediaで2.4rem) */
    line-height: 1;
    white-space: nowrap; /* 1行固定 (PC)。SP は @media で white-space:normal に戻す */
    will-change: opacity, transform;
}
/* PC は <br> を無効化し1行維持 (SP専用の改行位置指定を PC に漏らさない)。SP は @media で復帰。 */
.ai__sub-desc br {
    display: none;
}

/* keywords: 先方FB(desc 4行化) → +2.5rem (20.4→22.9rem)。PC は 1行表示 (nowrap)。
   実幅(≒831px)が枠(.ai__center 699px)を超えるため text-align:center では左寄せになり右へはみ出す。
   width:max-content + left:50% + translateX(-50%) で枠を跨いで viewport 中央に配置する
   (SP は @media で left/width/transform をリセットし flex 中央寄せに戻す)。 */
.ai__keywords {
    top: 18.2rem; /* subtitle 廃止で sub-desc と一緒に繰り上げ (旧 22.9rem・sub-desc との間隔 5.9rem は維持) */
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 3.2rem; /* 32px */
    line-height: 1;
    white-space: nowrap; /* PC 1行固定 (SP は @media で normal に戻す) */
    /* 各文字 stagger 用に JS が span 化する */
    /* コンテナを半透明にして装飾扱いに (子文字の reveal 0→1 と乗算で最終 0.5・先方FB) */
    opacity: 0.5;
}

.ai__keywords .ai__keyword-char {
    display: inline-block;
    will-change: opacity, transform;
}

/* 先方FB: 下部 "SECI →→→ Tacit to Explicit" と 背景の英語タグ群 (.ai__bg-tags) は廃止。
   それぞれの規則 (.ai__seci / .ai__bg-tags / .ai__bg-tag) も撤去。 */

/* ============================================================
   AI Phase 3: 水平知 (Figma Frame 2030:43)
   2本の太い横バー (top / bottom) と中央の「水平知」3文字。
   ・bg-layer の縦ラインの上、ai__phase2 と並列の layer。z-index 3 で最前面。
   ・JS が transition23 進捗で scaleX (bars) と translateX (chars) を制御。
   ============================================================ */
.ai__phase3 {
    position: absolute;
    inset: 0;
    z-index: 3; /* bg-layer(0), inner(1), phase2(2) より上 */
    pointer-events: none;
    overflow: hidden; /* scaleX 中の bar が viewport 外にはみ出さない */
}

/* 太い横バー: viewport top / bottom から 8rem の余白を取って配置 (Figma の Frame 164 が y=85 から
   始まることに相当)。厚みは 25vh。
   scaleX 0→1 で左端から右に伸ばす。
   mix-blend-mode: multiply で背景の縦ライン上に乗算合成され、ラインが透けて見える形になる。 */
.ai__hbar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 25vh;
    background-color: #0000ba; /* Figma Vector fill */
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    mix-blend-mode: multiply;
}
.ai__hbar--top {
    top: 8rem;
}
.ai__hbar--bottom {
    bottom: 8rem;
}

/* 「水平知」: viewport 中央に水平書き、80px Noto Sans JP Bold 白。 */
.ai__hcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 8rem; /* 80px */
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

.ai__hchar {
    display: inline-block;
    /* 初期は viewport 右外 (translateX 100vw)。JS が data-stagger ごとに順番に
       0 にスライドさせる。垂直知と同様 easeOutBack で着地。 */
    transform: translateX(100vw);
    will-change: transform;
}

/* ============================================================
   AI Phase 3 左パネル (新デザイン: 水平知 + 補助4テキスト)
   phase3 hold で1画面に静止 → transition3b で AI.js が translateX して左へ退場。
   補助テキスト .ai__p3-text は .ai__p3b-text とは別クラス (pan loop に拾われない)。
   ============================================================ */
.ai__p3-panel {
    position: absolute;
    inset: 0;
    will-change: transform; /* AI.js が退場 translateX を設定 */
}
.ai__p3-text {
    position: absolute;
    /* .ai__p3b-text と同じ縦中央基準の配置。--top/--left は Figma px÷10=rem。 */
    top: calc(50vh + var(--top, 36rem) - 36rem);
    left: var(--left);
    width: var(--w, auto); /* 2行折返し用 (未指定は内容幅) */
    margin: 0;
    color: #ffffff;
    opacity: var(--opacity, 1);
    line-height: 1.5;
    white-space: normal;
    will-change: opacity, transform;
}
.ai__p3-text--jp {
    /* 先方FB: 上下の日本語は水平知と同じく「画面幅(100vw)に対して左右中央」。
       --left/--w に依存せず全幅に広げて text-align:center で中央寄せ (水平知の中央と一致)。 */
    left: 0;
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    text-align: center;
}
/* 先方FB: 左パネルの装飾英文 (Foundation / Upper Ontology) は廃止したため .ai__p3-text--rc も撤去。 */
/* 先方FB: 上下の日本語を背景の2本の帯(.ai__hbar)の上下中央に、アスペクト比が変わっても追従して配置する。
   帯と同じ「端8rem + 高さ25vh」の枠に重ね、flex で枠内を上下中央寄せ → テキスト中央 = 帯中央
   (top: 8rem+12.5vh / bottom: 100vh-8rem-12.5vh) に一致。vh 係数が帯と揃うのでどの縦横比でも中央を保つ。 */
.ai__p3-text--band-top,
.ai__p3-text--band-bottom {
    left: 0;
    width: 100%;
    height: 25vh;              /* .ai__hbar と同じ厚み */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* 帯内で上下中央 */
}
.ai__p3-text--band-top {
    top: 8rem;                 /* .ai__hbar--top と同じ枠 */
    bottom: auto;
}
.ai__p3-text--band-bottom {
    top: auto;
    bottom: 8rem;              /* .ai__hbar--bottom と同じ枠 */
}

/* travel センチネル: キャンバス右端 (Figma3297=329.7rem)。offsetLeft のみ利用し不可視。
   loop から除外されるので transform は初期の translateX(100vw) のまま (offsetLeft は transform 非依存)。 */
.ai__p3b-travel-anchor {
    width: 0;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

/* SP: 1rem≈9.28px で Figma1280 座標が viewport(390) に収まらないため、左パネルを中央寄せ縦積みへ再構成。
   垂直知(phase2)と同様「1画面に全要素」。文字は縮小し、日本語は折返す。水平知は中央のフロー要素にする。 */
@media (max-width: 768px) {
    .ai__p3-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3.2rem;
        padding: 0 4rem;
        text-align: center;
    }
    .ai__p3-panel > .ai__p3-text,
    .ai__p3-panel > .ai__hcenter {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: 100%;
        height: auto;   /* PC の帯枠(25vh)を解除。SP は縦積み(flex)で並べる */
        display: block; /* 帯中央寄せの flex を解除 */
    }
    .ai__p3-panel > .ai__hcenter {
        transform: none; /* 中央寄せは flex が担当 (絶対中央の translate は不要) */
    }
    /* 先方FB(SP): 財務/企業(band-top/bottom)は縦積みから外し、PC同様 背景の帯(.ai__hbar)の上下中央へ載せる。
       文字サイズは両者統一＆縮小(1.8rem)で帯内に収める。(上の static リセットを band 要素だけ上書き。
       インライン font-size 3.2/2.4rem に勝つため !important。) */
    .ai__p3-panel > .ai__p3-text--band-top,
    .ai__p3-panel > .ai__p3-text--band-bottom {
        position: absolute;
        left: 0;
        width: 100%;
        height: 25vh;              /* .ai__hbar と同じ厚み */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;   /* 帯内で上下中央 */
        font-size: 1.8rem !important;
        line-height: 1.4;
        padding-left: 0.3rem;      /* 先方FB(SP): 画面いっぱいを避け少し余白。企業の最長行が折返さない上限 */
        padding-right: 0.3rem;
    }
    /* 先方FB(SP): band-top は改行(<br>)を無効化し、横幅で自然に折り返す (文章量増加のため) */
    .ai__p3-panel > .ai__p3-text--band-top br {
        display: none;
    }
    /* 先方FB(SP): band-top は右側の固定ナビ(section-nav ≒右端43px)と重なるため、左右に余白を追加して
       テキストがナビ域(左端≒332px)に届かないようにする。band-bottom はナビと重ならないので据置(0.3rem)。 */
    .ai__p3-panel > .ai__p3-text--band-top {
        top: 8rem;
        bottom: auto;
        padding-left: 6rem;
        padding-right: 6rem;
    }
    .ai__p3-panel > .ai__p3-text--band-bottom { top: auto; bottom: 8rem; }
    /* 先方FB(SP): 横スクロールの「さらに全業種」(rc-black)の文字を少し小さく、左の横ラインを短く(2/3)。
       インライン(font-size:3.2rem / width:33.8rem)に勝つため !important。PC は不変。 */
    .ai__p3b-text--rc-black { font-size: 2.8rem !important; }
    /* chain(暗黙知→…) は PC 側の要望で 6.4→7.6rem に拡大したが、SP は元々 viewport より横に長く、
       拡大すると1画面に映る文字数が減って読みづらい。SP は従来どおり 6.4rem に戻す。
       インライン(font-size:7.6rem)に勝つため !important。PC は 7.6rem のまま。 */
    .ai__p3b-text--chain { font-size: 6.4rem !important; }
    /* 線を短く(2/3)＋右へ寄せ直し: 左端固定で短くすると右端が左に下がり、線と「さらに全業種」の間が開くため、
       --left を 168.8→180rem に右送りして線の右端を元位置(≈202.6rem)へ戻し、テキストとの間隔(≈3.2rem)を維持。 */
    .ai__p3b-line { width: 22.5rem !important; --left: 180rem !important; } /* 33.8rem の約2/3・右寄せ(線右端を rc-black 直前へ) */
    .ai__p3-text--jp {
        font-size: 2.4rem;
        line-height: 1.7;
    }
    .ai__p3-text--sm {
        font-size: 2rem;
    }
}

/* ============================================================
   AI Phase 3b: HORIZONTAL INTELLIGENCE 横スクロール + パララックス
   各要素は Figma frame 1:6659 (5120×720) の座標で絶対配置。
   --rate (parallax rate) は HTML inline style で指定し、JS が translateX を毎フレーム算出。
   ============================================================ */
.ai__phase3b {
    position: absolute;
    inset: 0;
    z-index: 4; /* phase3 (z:3) より上、必要なら phase3 と overlap させて見せる */
    pointer-events: none;
    overflow: hidden; /* 画面外に出る要素をクリップ */
}

.ai__p3b-text {
    position: absolute;
    /* viewport 縦中央 (= Figma frame center 36rem) からの相対オフセットで配置。
       これにより画面が縦長/正方形に近くなって rem が縮んでも、
       テキストが viewport 中央 (= 0 のとき 50vh) を基準に上下対称にスケールし、
       下側 (--top>36rem) のテキストが「上に寄ってしまう」現象を防ぐ。
       --top はFigma frame (720px) 内 y 座標 (rem 単位、0〜72rem)。 */
    top: calc(50vh + var(--top, 36rem) - 36rem);
    left: var(--left);
    margin: 0;
    white-space: nowrap;
    color: #ffffff;
    opacity: var(--opacity, 1);
    /* 初期: viewport 右外 (translateX 100vw)。JS が rate に応じた値で上書き */
    transform: translateX(100vw);
    will-change: transform;
    line-height: 1;
}

/* 先方FB: 横スクロール帯の装飾英文 (主英字2行 / Management as Code / Knowledge-Creating Company) は
   全廃したため、.ai__p3b-text--main / --rc-medium / --know 用の規則も撤去。 */
.ai__p3b-text--rc-black {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-weight: 900;
    /* 先方FB: 「さらに全業種…」を背景の下帯(.ai__hbar--bottom: 上下中央 = 100vh - 8rem - 12.5vh)の上下中央に。
       font 3.2rem・line-height1 でボックス半分 = 1.6rem を引きボックス中心 = 帯中央。アスペクト比に追従。
       +1.5rem は親 .ai__phase3b の translateY(-1.5rem) 打ち消し(帯は transform 外・詳細は --main 参照)。 */
    top: calc(100vh - 8rem - 12.5vh - 1.6rem + 1.5rem);
}
/* さらに全業種 の左の横ライン: テキスト(rc-black)と同じ下帯中央に co-center (2px 厚の半分 = 1px を引く)。
   +1.5rem は親 .ai__phase3b の translateY(-1.5rem) 打ち消し。 */
.ai__p3b-line {
    top: calc(100vh - 8rem - 12.5vh - 1px + 1.5rem);
}
.ai__p3b-text--jp-black {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
}
/* chain は --left が大きく(218.8rem)絶対配置の shrink-to-fit が包含ブロック幅で頭打ちになり、
   箱(offsetWidth)が中身(nowrap: 暗黙知→…→機械可読知)より狭くなる→最終項がはみ出してクリップ。
   内容幅に固定して箱=中身にし、JS の dwell/HI 内クランプ/band-wipe 中心が正しい幅で計算されるようにする。 */
.ai__p3b-text--chain {
    width: max-content;
    /* 先方FB: chain を画面の上下中央(50vh)に置く。font 7.6rem・line-height1 なので
       ボックス半分 3.8rem を引いてボックス中心を 50vh に一致させる。
       +1.5rem は親 .ai__phase3b の translateY(-1.5rem) 打ち消し (--rc-black 参照)。 */
    top: calc(50vh - 3.8rem + 1.5rem);
}
/* 「暗黙知→形式知→構造知→機械可読知」の各語。中央通過中に AI.js が opacity+text-shadow で
   左から順に点灯・発光させる。 */
.ai__p3b-chain-term {
    opacity: 0.35; /* 初期 dim (JS が毎フレーム上書き) */
    will-change: opacity, text-shadow;
}

/* ============================================================
   AI Phase 4: 交差知 (初期表示)
   背景 (縦ライン + 太線) はそのまま。Phase 3b 全体をフェードアウトしつつ、
   上下の 2 テキスト ("Convergence Point" / "n(n-1)/2") を縦スクロールで一つずつ表示。
   ============================================================ */
.ai__phase4 {
    position: absolute;
    inset: 0;
    z-index: 5; /* Phase 3b (z:4) より上 */
    pointer-events: none;
}

.ai__p4-text {
    position: absolute;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    /* 初期は不可視。JS がフェード進捗で opacity/translateY を更新。
       最終 opacity は Figma の 0.5。 */
    opacity: 0;
    will-change: opacity, transform;
}

/* 先方FB: 上部の Convergence Point は廃止 (.ai__p4-convergence の規則も撤去)。 */

/* 下部: n(n-1)/2。viewport 横中央寄せ + 縦は viewport bottom 基準。
   top:Xrem だと正方形に近い画面 (rem が小さくなる) で要素が上寄せされてしまうため、
   下端基準にして「ビューポート下端から固定 rem」のレイアウトに固定する。
   Figma y=596, h=80 (font-size×line-height), frame h=720 → bottom 余白 4.4rem。 */
.ai__p4-formula {
    bottom: 4.4rem;
    left: calc(50vw - 14.95rem); /* width 29.9rem の半分を 50vw から減算 */
    width: 29.9rem; /* Figma w=299 */
    font-size: 8rem; /* 80px */
    text-align: center;
}

/* ============================================================
   Phase 4b 追加要素: 交差する 2 本のライン
   先方FB: "Pattern Recognition across Industries" は廃止 (.ai__p4-pattern の規則も撤去)。
   ============================================================ */

/* 交差ライン group ラッパー: viewport を完全に覆い、transform-origin が viewport 中心 (= X 字の交点)
   になるように inset: 0 配置。transition45 で group ごと回転 + scale でコマのように回す。 */
.ai__cross-group {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

/* 交差ライン: 水平な太線 bar を rotate(±30deg) して X 字に配置。
   厚みは .ai__hbar と同じ 25vh。長軸は 200vw で viewport 対角を十分カバー。
   pivot を viewport 中央に置き、scaleX(0→1) で中央から左右両方向へ対称に伸びる。
   これによりどの viewport 高さでも X の交点が常に viewport 中央 (vw/2, vh/2) になる。
   .ai__bg-layer 内に配置することで、背景縦ライン + 既存太線と同じ stacking context で
   mix-blend-mode: multiply が正しく乗算合成され、縦ラインが透けて見える。 */
.ai__cross-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vw;
    height: 25vh; /* .ai__hbar と同じ厚み */
    /* 半透明 + multiply: 背景の縦ライン/横ラインがはっきり透けて見えるようにする
       (不透明 #0000ba だと青×青で判別しにくいため alpha を下げて素の背景を覗かせる)。 */
    background-color: rgba(0, 0, 186, 0.6);
    mix-blend-mode: multiply;
    will-change: transform;
    transform-origin: 50% 50%; /* element center = pivot (= viewport center 上) */
}

/* Line A: viewport 中央から両側へ rotate(-30deg) で伸びる ("/" 形)。
   element 中心が viewport 中央、scaleX(0→1) で対称に展開。
   "Vector Embedding × Semantic Inference" テキストと同方向に走る。 */
.ai__cross-line--a {
    /* transform は AI.js が translate(-50%, -50%) rotate(-30deg) scaleX(e) を設定 */
    transform: translate(-50%, -50%) rotate(-30deg) scaleX(0);
}

/* Line B: viewport 中央から両側へ rotate(30deg) で伸びる ("\" 形)。
   "Ontology Alignment" テキストと同方向に走る。 */
.ai__cross-line--b {
    transform: translate(-50%, -50%) rotate(30deg) scaleX(0);
}


/* 先方FB: 交差ライン上のテキスト (Vector Embedding × Semantic Inference / Ontology Alignment)
   は廃止 (.ai__cross-text / --a / --b の規則も撤去)。ライン本体は .ai__bg-layer 内に残る。 */

/* ============================================================
   Phase 4c: 中央の "Cross Intelligence" + "交差知"
   viewport 中央に top:50% left:50% で配置 (Figma Frame 169 構成: 288×125)。
   - Cross Intelligence (32px, white, center) 上段
   - 32px gap
   - 交差知 (96px, Noto Sans CJK JP Bold, white, center) 下段
   ============================================================ */
/* 交差知 がコンテナの主体 (in-flow)。Cross Intelligence は absolute で上に重ねる。
   → コンテナサイズ = 交差知 サイズ → コンテナ中心 = 交差知 中心 → viewport 中心に 交差知 が来る。 */
.ai__cross-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    z-index: 6;
}

/* Cross Intelligence: 交差知 の真上に absolute 配置。gap = 1.2rem (= 12px) */
.ai__cross-en {
    position: absolute;
    bottom: calc(100% + 1.2rem); /* コンテナ上端 (= 交差知 top) より 1.2rem 上 */
    left: 0;
    right: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 3.2rem; /* 32px */
    line-height: 1;
    color: #ffffff;
    text-align: center;
    opacity: 0;
    will-change: opacity, transform;
}

.ai__cross-jp {
    margin: 0;
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    font-weight: 900;
    font-size: 9.6rem; /* 96px */
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

/* 各文字: 拡大 + ボケ + 少し回転した状態から、scale 1 / blur 0 / rotate 0 へ。
   JS が transition4c で stagger 付きで補間。 */
.ai__cross-jp-char {
    display: inline-block;
    opacity: 0;
    will-change: opacity, transform, filter;
    transform-origin: 50% 50%;
}

/* ============================================================
   AI Phase 5: 最終フェーズ EMERGENCE (sticky 外の通常フロー)
   sticky pin 終了後、自然な document flow でこの領域がスクロールイン。
   各 .reveal 要素は IntersectionObserver で viewport に入ったら is-visible が
   付与され、CSS transition で順次表示される (上から下へ自然なスクロール順)。
   ============================================================ */
.ai__final {
    position: relative;
    /* 二校FB: EMERGENCE は最低1画面分の高さを確保し、スナップ着地(下端合わせ)で画面全体が青背景で
       埋まるようにする。コンテンツは下寄せ(flex-end)にして現状の位置感を保ちつつ上側に青を広げる。
       bottom padding は EMERGENCE が末尾で画面下端に着地するため、コンテンツをヘッダー下へ収める。 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* 二校FB: 高さが要素より高いときは下揃えでなくヘッダー下領域で中央揃え */
    align-items: center;
    /* 上パディングにヘッダー高さ(8rem)を含め、コンテンツをヘッダー下の領域で中央化する。 */
    padding: 8rem 4rem 4vh;
    background-color: var(--color-primary);
    color: #ffffff;
    margin-block-start: -1px;
}

.ai__final-inner {
    width: 100%;
    max-width: 97.2rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0; /* .ai__final(flex) 内で内容が圧縮されないように (要素間隔を設計どおり保つ) */
}

.ai__final-inner > * {
    margin: 0;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}

/* Reveal 共通の初期 state (JS が起動するまでの first paint 用、および JS off 時の fallback)。
   JS は毎フレーム getBoundingClientRect で scroll-linked に inline style を上書きする。
   CSS transition は使わない (JS の per-frame 計算が連続的なため、補間は scroll 自体が担う)。 */
.ai__final .reveal {
    opacity: 0;
    transform: translateY(4rem);
}

/* EMERGENCE タイトル「暗黙知PF」96px (Phase4c の中央 暗黙知PF と同寸で連続)。
   既定は opacity:0 のレイアウト確保用スロット。可視は Phase4c の cross-center overlay 側で、
   タイトル位置に達した瞬間に AI.js _updateCrossTitleHandoff が opacity を 1 に切替えて受け渡す。 */
.ai__final-title {
    font-size: 9.6rem;
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    font-weight: 900;
    line-height: 1;
    /* Phase4c の cross-jp は文字を個別 <span>(inline-block) に分割しており、HTML 改行による
       inline-block 間の空白で字間が広い (文字間ギャップ実測 0.229em)。ft はプレーンテキストで詰まる
       ため、handoff で字間が変わらないよう同じギャップ(0.229em)を letter-spacing で付与。
       letter-spacing は末尾にも入り中央寄せが左へずれるので、その分を margin-inline-end で打ち消し、
       グリフ位置を cross-jp と完全一致させる。 */
    letter-spacing: 0.229em;
    margin-inline-end: -0.229em;
    margin-bottom: 3.2rem; /* 1画面に収めるため gap 縮小 (4.8→3.2・先方FB) */
    opacity: 0;
}

/* 説明テキスト 16px, line-height 1.5 (1画面に収めるため 20→16px・先方FB) */
.ai__final-desc {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 3.2rem; /* gap 縮小 (5.6→3.2) */
}
/* SP 専用の改行は PC では無効 (SP の @media で inline に戻す)。 */
.ai__br-sp {
    display: none;
}

/* "垂直×水平の収束..." 32px */
.ai__final-subtitle {
    font-size: 3.2rem;
    margin-bottom: 2.4rem; /* gap 縮小 (3.2→2.4・先方FB) */
}

/* "EMERGENCE" 120px。text-shadow で常時 glow halo (climax 演出)。
   親 <p> 自体は reveal の opacity/transform を適用しない (各 char が個別に持つ)。 */
.ai__final-emergence {
    font-size: 12rem;
    text-transform: uppercase; /* HTML は "Emergence"、表示は大文字 */
    letter-spacing: 0.02em;
    margin-bottom: 3.2rem;
    text-shadow:
        0 0 4rem rgba(255, 255, 255, 0.35),
        0 0 8rem rgba(255, 255, 255, 0.18);
}

/* EMERGENCE 親 <p> 自体は常に visible (chars が個別に opacity/transform を持つ)。
   .reveal の初期 hidden state を override。 */
.ai__final .ai__final-emergence.reveal {
    opacity: 1;
    transform: none;
}

/* 各文字: 初期 state (JS が毎フレーム scroll-linked に上書きする) */
.ai__final-emergence-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(4rem) scale(1.4);
    filter: blur(0.8rem);
}

/* 先方FB: タグライン "The More We Embed, The More AI Sees" は廃止 (.ai__final-tagline の規則も撤去)。 */

/* G ロゴ 138×138 SVG vector。 */
.ai__final-logo {
    display: block;
    width: 13.8rem;
    height: 13.8rem;
    margin-bottom: 0; /* footer 削除で末尾要素になったため trailing gap を撤去 (6.4→0・先方FB) */
}

/* G ロゴ専用 reveal の初期 state (JS が毎フレーム scale + rotate + slide で更新) */
.ai__final .ai__final-logo.reveal {
    opacity: 0;
    transform: translateY(4rem) scale(0.5) rotate(-45deg);
}

/* ============================================================
   AI セクションの SP レスポンシブ (docs/SPResponsive.md / Figma 2010:31/39/47)
   PC の choreography(横スクロール pin・ライン・per-char・bg-words) は AI.js で無改変流用し、
   各フェーズの DOM 要素の base 配置/font-size のみ SP 幅(390)向けに @media で再レイアウトする。
   AI.js は transform のみ設定し top/left は触らないため、ここで base 配置を上書きできる。
   横スクロール距離・looming 等 vw 前提の動的計算は AI.js 側で isSP 分岐 (フェーズC)。
   ============================================================ */
@media (max-width: 768px) {
    /* --- フェーズA: 初期表示 (phase1). 1280分散配置 → 縦中央スタック
           (embed 右 → AI 120 中央 → statement 3行 → AI&DATA バッジ)。Figma 2010:31。 --- */
    .ai__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 1.6rem;
    }
    .ai__embed {
        position: static;
        order: 1;
        font-size: 2.4rem; /* 中央寄せ (align-items:center + nowrap で中央) */
    }
    .ai__big {
        position: static;
        top: auto;
        left: auto;
        transform: none; /* PC の translateX(-50%) を解除 (AI.js は .ai__big を触らない) */
        order: 2;
        margin-top: 4rem;
        font-size: 12rem; /* 120px */
    }
    .ai__statement {
        position: static;
        bottom: auto;
        left: auto;
        order: 3;
        align-self: flex-start; /* 左寄せ */
        width: 23.8rem; /* SP statement 238px */
        margin-top: 4rem;
        gap: 1.2rem;
    }
    .ai__statement-line {
        font-size: 2.2rem; /* 先方FB(SP): 大きすぎるため 24→22px */
    }
    /* 下線は直上行のテキスト幅に合わせる (SP実測後の値)。--short=「全産業を」/--long=「AIネイティブに変え、成長を支える」 */
    .ai__statement-divider--short {
        width: 8.8rem;
    }
    .ai__statement-divider--long {
        width: 35.2rem;
    }
    .ai__badge {
        position: static;
        bottom: auto;
        left: auto;
        width: auto; /* SP は flex カラム内で content ベース (PC の Explore 幅揃えは適用しない) */
        order: 4;
        align-self: flex-start; /* 左寄せ */
        margin-top: 2.4rem;
    }

    /* --- フェーズB: 垂直知 (phase2). 16:9小箱frame → 全画面・中央縦カラム。
           並び: VERTICAL INTELLIGENCE(横24) → 垂直知stack → desc20 → subtitle32 → sub-desc24
                 → keywords16 → SECI28。bg-words(10)は散在(SP座標)。Figma 2010:39。
           vintel の rotate 解除は AI.js 側 isSP 分岐。 --- */
    .ai__phase2-frame {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 2rem;
        gap: 3.2rem;
    }
    .ai__phase2-head {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* relative: flex フローに乗せつつ、中の absolute な stack-char(垂直知) の基準を保つ
       (static にすると char が祖先frame基準で画面最上部へ飛ぶ) */
    .ai__stack {
        position: relative;
        top: auto;
        left: auto;
        width: 5.6rem;
        height: 17.4rem;
    }
    .ai__stack-char {
        font-size: 5.6rem;
    }
    .ai__stack-char[data-stack='0'] {
        top: 0;
    }
    .ai__stack-char[data-stack='1'] {
        top: 5.8rem;
    }
    .ai__stack-char[data-stack='2'] {
        top: 11.6rem;
    }
    .ai__center {
        position: static;
        top: auto;
        left: auto;
        width: 33.7rem; /* SP content 337 */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.4rem;
    }
    .ai__desc,
    .ai__sub-desc,
    .ai__keywords {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
    }
    .ai__desc {
        font-size: 2rem;
    }
    /* 先方FB(SP): desc は改行(<br>)を無効化し、横幅で自然に折り返す */
    .ai__desc br {
        display: none;
    }
    .ai__sub-desc {
        font-size: 2.2rem; /* 先方FB(SP): 指定改行の中段(各機能別の固有オントロジーPFを)が枠を超え折返すため 2.4→2.2 に微縮小し1行に収める */
        white-space: normal; /* SP は幅 337px なので複数行折り返しに戻す (PC の nowrap を打ち消す) */
        line-height: 1.5; /* 先方FB(SP): 行高が低いので広げる */
    }
    /* 先方FB(SP): 指定位置で改行 (産業×バリューチェーン / 各機能別の固有オントロジーPFを / 構築)。PC の br:none を復帰。 */
    .ai__sub-desc br {
        display: inline;
    }
    .ai__keywords {
        font-size: 1.6rem;
        white-space: normal; /* PC の nowrap を打ち消し SP は折返し可 */
        line-height: 1.5; /* 先方FB(SP): 行高が低いので広げる */
        left: auto; /* PC の viewport 中央寄せ(left:50%+translateX)を打ち消し、SP は flex 中央寄せに戻す */
        width: 100%;
        transform: none;
    }
    /* 先方FB: SECI 行・背景の英語タグ群は廃止したため、SP 用の座標/サイズ指定も撤去。 */

    /* --- フェーズD: 交差知/収束 (phase4)。多くは 50vw 中央寄せで既にSP適合。
           X交差(cross-line 200vw×25vh)は vw でそのまま流用。溢れる要素のみ幅/サイズ調整。 --- */
    .ai__p4-formula {
        font-size: 6.4rem;
    }
    .ai__cross-jp {
        font-size: 6.4rem;
    } /* 暗黙知PF (5字): 8rem だと viewport 超過(実測419>390)で見切れ → 6.4rem で1行に収め、
         ハンドオフ先 .ai__final-title と同寸に揃える (サイズ激変を解消)。 */
    .ai__cross-en {
        font-size: 2rem;
    }

    /* --- 最終 EMERGENCE (phase5 / .ai__final, 通常フロー・既に中央flex)。Figma 2010:47。 --- */
    .ai__final {
        /* padding-top はヘッダー下領域で中央化するための上余白(base の意図)。先方FB「縦短端末で暗黙知PF が
           ヘッダーに被る」: 旧 8vh は vh 依存で、8vh がヘッダー高さ(--header-height-sp=60px)を下回る端末
           (vh<750) ではコンテンツエリア上端がヘッダー下端より上に来て、中央化しても先頭(暗黙知PF)がヘッダー
           領域へ侵入していた(vh600 実測 padding-top 48px<60px・余白25px)。ヘッダー高さ+余白の固定値にして、
           どの vh でもエリア上端をヘッダー直下に置き、暗黙知PF がヘッダーに被らないようにする。
           bottom は着地(下端合わせ)時のコンテンツ位置調整で 4vh 維持(12vh→4vh・先方FB)。 */
        padding: calc(var(--header-height-sp) + 1.6rem) 1.6rem 4vh;
    }
    .ai__final-title {
        font-size: 6.4rem;
        margin-bottom: 3.2rem;
        white-space: nowrap; /* 暗黙知PF は1行固定 (cross-jp と同様)。折返すと handoff で形が変わるため */
    } /* 暗黙知PF: Phase4c 中央(cross-jp)から Sticky 風に受け渡される先頭タイトル。
         cross-jp(SP 6.4rem) と同寸にして、切替時のフォントサイズ激変をなくす。 */
    .ai__final-desc {
        font-size: 1.6rem;
        line-height: 1.6;
        margin-bottom: 4rem;
    } /* 通常交わる 16 */
    /* タイプライターで .u-char(inline span) 化すると text-wrap:balance が効かないため、SP は全改行を
       明示制御する。PC用の素<br>(達した時、/踏み込む——/加速し、)はSPの改行位置とも一致するので表示し、
       SP専用 .ai__br-sp(産業知が、/集まり/人間の)を追加で有効化 → 計7行に固定。 */
    .ai__final-desc br.ai__br-sp {
        display: inline;
    }
    .ai__final-subtitle {
        font-size: 2rem;
        line-height: 1.4;      /* 折返し時に行が詰まらないよう leading を確保 (継承 lh:1 を上書き) */
        text-wrap: balance;    /* 2 行を均等割りし「リー/ド」等の語中改行を避ける (非対応端末は通常折返し) */
        margin-bottom: 2.4rem;
    } /* 垂直×水平 20 */
    .ai__final-emergence {
        font-size: 5.6rem;
        margin-bottom: 2.4rem;
    } /* EMERGENCE 56 */
    .ai__final-logo {
        width: 8.6rem;
        height: 8.6rem;
        margin-bottom: 1.6rem; /* trailing gap 縮小 (4→1.6) */
    } /* Group2 86 */
}

/* ============================================================
   Thought Leadership Strategy セクション (Figma Frame 2085:28, 1324×3704)
   通常の縦スクロール (pin なし)。Figma 座標を px ÷ 10 = rem で absolute 配置。

   レイヤー構成:
     .tls__parallax (z:1) — 8 枚の背景画像 (個別速度パララックス)
     .tls__head / .tls__title-block / .tls__cards (z:2) — 前景テキスト/カード

   カード 4 枚は奇数 (01/03) と偶数 (02/04) で左右配置が反転:
     01, 03: industry-LEFT / person-CENTER / message-RIGHT
     02, 04: message-LEFT  / person-CENTER / industry-RIGHT
   ============================================================ */
.tls {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: #ffffff;
    color: var(--color-primary);
    /* パララックス画像が section 外にはみ出すと News/AI/GS 等と重なるため clip。
       中央アンカー方式 (ThoughtLeadership.js) で各画像は section 内に収まる。 */
    overflow: hidden;
}

.tls__inner {
    position: relative;
    /* main 内容は 1280 (128rem) を基準にする。Figma section は 1324 だが超過分 (44px) は
       右側にパララックス画像がはみ出すための余白なので、inner は main 幅に揃え、
       はみ出す parallax img は `.tls { overflow: hidden }` で clip する。 */
    width: 128rem;
    margin: 0 auto;
    min-height: 370.4rem; /* Figma section height */
}

/* --- パララックス背景 (z:1) --- */
.tls__parallax {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.tls__parallax-img {
    position: absolute;
    display: block;
    /* 位置 (top/left/width/height) は HTML の inline style で個別に指定 (Figma 座標 px÷10=rem)。
       picture/img でなく span にしているのは「位置 + パララックス transform を
       1 要素で完結」させたいため。 */
    background-color: #e6ecff; /* 画像読み込み中の薄色背景 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform, opacity, filter; /* パララックス + 被写界深度エンベロープ */
}

/* 背景画像 (parallax-01〜08.jpg)。
   ⚠ かつては HTML の inline style で `url('src/assets/...')` と書いていたが、inline style の
   url() は **ページの URL 基準** で解決されるため、WordPress のフロントページ (`/` や `/home/`)
   では 404 になる。CSS ファイル内の url() は **CSS ファイル基準** で解決されるため、ここに
   置けばテーマ URL に依存せずどこに配置しても解決できる (person-*.png と同じ方式)。
   → 新しい画像を足すときも必ずこちら側に書くこと。inline style へ戻さない。
   nth-child は .tls__parallax 直下の span 8 個と 1:1 (下の SP 上書きと同じ索引)。 */
.tls__parallax-img:nth-child(1) { background-image: url('../src/assets/images/parallax-01.jpg'); }
.tls__parallax-img:nth-child(2) { background-image: url('../src/assets/images/parallax-02.jpg'); }
.tls__parallax-img:nth-child(3) { background-image: url('../src/assets/images/parallax-03.jpg'); }
.tls__parallax-img:nth-child(4) { background-image: url('../src/assets/images/parallax-04.jpg'); }
.tls__parallax-img:nth-child(5) { background-image: url('../src/assets/images/parallax-05.jpg'); }
.tls__parallax-img:nth-child(6) { background-image: url('../src/assets/images/parallax-06.jpg'); }
.tls__parallax-img:nth-child(7) { background-image: url('../src/assets/images/parallax-07.jpg'); }
.tls__parallax-img:nth-child(8) { background-image: url('../src/assets/images/parallax-08.jpg'); }

/* --- 前景レイヤー (z:2) --- */
.tls__head,
.tls__title-block,
.tls__cards {
    position: relative;
    z-index: 2;
}

/* セクション最上部: 縦線 + STRATEGY ラベル (Figma Frame 193, h=113) */
.tls__head {
    position: relative;
    height: 11.3rem;
}
.tls__head-line {
    position: absolute;
    /* Figma Line 79 は Frame 193 の最上端 (y=0) から下に 48px。STRATEGY ラベルは
       その下 (y=72) に配置される。 */
    top: 0;
    /* main 1280 の中央 (= 64rem) に 1px 縦線。section 1324 内では (132.4 - 128) / 2 = 2.2rem オフセット。
       inner の中央寄りでいいので 50% center で配置。 */
    left: 50%;
    width: 1px;
    height: 4.8rem;
    background: var(--color-primary);
}
.tls__head-label {
    position: absolute;
    text-transform: uppercase; /* HTML は "Strategy"、表示は大文字 */
    top: 7.2rem;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 5.6rem;
    line-height: 1;
    letter-spacing: 0;
}

/* タイトルブロック sect-head: Figma y=243, main 内 left:80 (8rem) -- section 内で 2.2rem オフセット込み
   Figma sect-head height は 299 だが、ローカルでは subtitle (lh=80) + 38px gap + title 2lines (=226) = 344。
   title-block の height は 344 px (34.4rem) に拡張。badge は内側で top:24.9rem に absolute。 */
.tls__title-block {
    position: absolute;
    top: 24.3rem;
    left: 8rem; /* Figma main 内 x=80 */
    width: 112rem;
    height: 34.4rem;
}
.tls__subtitle {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 4.8rem; /* テキスト増量で3行化したため 6.4→4.8rem に縮小し2行に収める (PC。SPは@mediaで2.4rem) */
    line-height: 1.25; /* Figma lineHeight 80px / fontSize 64 */
    font-weight: 400;
}
/* subtitle は <br> 区切りで行ごとの span (.tls__subtitle-line) に分割され、行単位で帯wipe される */
.tls__subtitle-line {
    display: block;
}
/* SP 専用改行 (「事業を変え、」の後ろ)。PC は非表示=改行なし、SP のみ @media で inline=改行。
   JS の行分割は素の<br>のみ対象 (正規表現が <br class=...> に非マッチ) のため、この br は
   .tls__subtitle-line 内に残り、SP で行内改行として効く。 */
.tls__br-sp {
    display: none;
}
.tls__title {
    /* Figma 上 subtitle top (y=243) → title row1 top (y=361) = 118px。
       subtitle 自体は lh=80 (1.25 × 64) なので、その下端 (y=323) からの margin-top は
       118 - 80 = 38px (= 3.8rem) で title の top が y=361 に揃う。 */
    margin: 3.8rem 0 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    line-height: 1.18; /* Roboto Bold AUTO: Figma 行間 113 / 96 = 1.177 */
}
.tls__title-line {
    display: block;
    font-size: 9.6rem;
}
.tls__badge {
    position: absolute;
    text-decoration: none; /* span → a 化に伴い下線を抑止 */
    color: var(--color-primary);
    top: 24.9rem;
    left: 97.3rem;
    display: inline-flex;
    align-items: center;
    /* 親 .tls__title-block (width 112rem) 内で left:97.3rem の場合、abspos の
       shrink-to-fit available width が 14.7rem に制限される。Inter 16px の
       "Strategy TLS" は browser rendering で ~102px 必要なので、デフォルトの
       padding 2.4rem では収まらず 2 行になってしまう。
       white-space: nowrap で改行を抑止しつつ、padding を 2rem に詰めて 147px
       に収める。 */
    padding: 0.8rem 2rem;
    border: 1px solid var(--color-primary);
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

/* カード群: Figma body y=243+500=743, left=80 (8rem) */
.tls__cards {
    position: absolute;
    top: 78.3rem; /* subtitle 2行化(高さ+4rem)で詰まった card01 上の余白を回復するため 74.3→78.3rem に下げる */
    left: 8rem;
    width: 115.1rem;
}
.tls__card {
    position: relative;
}
.tls__card--01 {
    height: 56.6rem;
}
.tls__card--02 {
    height: 64.7rem;
    margin-top: 10.8rem;
}
.tls__card--03 {
    height: 58.1rem;
    margin-top: 7.9rem;
}
.tls__card--04 {
    height: 62.7rem;
    margin-top: 10.9rem;
}

/* 各カード内の 3 要素を absolute 配置 (Figma 各 frame の x/y を rem 換算) */
.tls__card--01 .tls__industry {
    position: absolute;
    top: 0;
    left: 0;
    width: 30.3rem;
}
.tls__card--01 .tls__person {
    position: absolute;
    top: 0;
    left: 34.1rem;
    width: 43.875rem;
}
.tls__card--01 .tls__message {
    position: absolute;
    top: 0;
    left: 75.1rem;
    width: 32.7rem;
}

.tls__card--02 .tls__message {
    position: absolute;
    top: 0;
    left: 2.3rem;
    width: 32.7rem;
}
.tls__card--02 .tls__person {
    position: absolute;
    top: 4.8rem;
    left: 31.2rem;
    width: 43.875rem;
}
.tls__card--02 .tls__industry {
    position: absolute;
    top: 0;
    left: 66.5rem;
    width: 48.6rem;
    z-index: 2; /* 原稿差替で英名が長くなり grid 左端が人物画像(右端)と重なるため前面へ (画像右側は余白で可読) */
}
/* 原稿差替: タイトルが長くなり 6.4rem では 4 行化するため PC のみ縮小し 2 行に収める。
   SP は下の @media で 4rem 指定があるため、この PC 用縮小が SP に漏れないよう min-width で限定する
   (詳細度 0,2,0 が SP の 0,1,0 に勝ってしまうため)。 */
@media (min-width: 769px) {
    .tls__card--02 .tls__industry-title {
        font-size: 4.6rem;
    }
}

.tls__card--03 .tls__industry {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 22.3rem;
    z-index: 2;
}
@media (min-width: 769px) {
    .tls__card--03 .tls__industry-title {
        width: 45rem;
        font-size: 4.4rem;
    }
}
.tls__card--03 .tls__person {
    position: absolute;
    top: 0;
    left: 34.9rem;
    width: 42.12rem;
}
.tls__card--03 .tls__message {
    position: absolute;
    top: 1rem;
    left: 75.1rem;
    width: 32.7rem;
}

.tls__card--04 .tls__message {
    position: absolute;
    top: 0;
    left: 2.3rem;
    width: 32.7rem;
}
.tls__card--04 .tls__person {
    position: absolute;
    top: 4.8rem;
    left: 34.1rem;
    width: 43.875rem;
}
.tls__card--04 .tls__industry {
    position: absolute;
    top: 0;
    left: 85.7rem;
    width: 26.3rem;
}

/* 業種リスト (Industry) スタイル */
.tls__industry-title {
    /* Figma: Roboto Light 64px, AUTO line-height ≈ 0.95 (2 行 → box h=121)。
       タイトル下端から最初のリスト項目までの gap は 40px (= 4rem)。 */
    margin: 0 0 4rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 6.4rem;
    line-height: 0.95;
    text-align: start;
}
.tls__industry-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    row-gap: 1.563rem;
}
/* 各リスト項目は ja + en を縦に並べる。Figma では ja/en それぞれ line-height 30px、
   項目間に追加 margin は無く、line-box の積み重ねで 60px / 行高さになる。 */
.tls__industry-list li {
    display: block;
    margin-bottom: 0;
}

/* card 02 (Auto & Products) は 2 列 grid。
   Figma Frame 92 (414px): 左カラム x0 / 右カラム x215。左カラム幅をピッチ 21.5rem に固定して
   右カラム左端を 215px に合わせる (1fr 1fr の引き伸ばしをやめ、デザイン通りの幅にする)。 */
.tls__industry-list--2col {
    display: grid;
    grid-template-columns: 21.5rem auto;
    justify-content: end;
    column-gap: 0;
    row-gap: 1.563rem;
}
.tls__industry-list--2col li {
    margin-bottom: 0;
}
.tls__industry-ja {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    line-height: 1.5; /* Figma 30 / 20 */
    font-weight: 700;
}
.tls__industry-en {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    line-height: 1.25; /* Figma 20 / 16 */
    font-weight: 500;
    opacity: 1;
}
.tls__explore {
    display: inline-flex;
    align-items: center;
    margin-top: 3.2rem;
    padding: 0.8rem 2.4rem;
    border: 1px solid var(--color-primary);
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap; /* 日本語文言「事業の詳細を見る」を1行で表示 */
    color: var(--color-primary);
}
/* Card 02 (Auto & Products) / Card 04 (Chemical & Utility) は industry が右側のため、
   Explore ボタンを右寄せにする (fit-content 幅 + margin-left:auto)。リスト/タイトルの整列には影響しない。 */
.tls__card--02 .tls__explore,
.tls__card--04 .tls__explore {
    display: flex;
    width: fit-content;
    margin-left: auto;
}
/* Card 04 (Chemical & Utility) はタイトルが右寄せ。リストも右端揃えにしてタイトル右端に合わせる。
   grid の単一列は max-content 幅のまま既定で左に packing されるため、justify-content:end で
   列(=最長テキスト幅)を右端へ寄せ、text-align:right で各行の右端を揃える。
   (Card 02 は 2 列 grid なので対象外、左詰めのまま) */
.tls__card--04 .tls__industry-list {
    justify-content: end;
    text-align: right;
}

/* 人物カード (Person) スタイル: Figma 438.75×505 rounded rect + line + member info */
.tls__person {
    margin: 0;
}
.tls__person-img {
    width: 100%;
    /* Figma 438.75×505 (アスペクト 0.869) */
    aspect-ratio: 438.75 / 505;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* 各カードごとの person 画像 */
.tls__card--01 .tls__person-img {
    background-image: url('../src/assets/images/person-finance.png');
}
.tls__card--02 .tls__person-img {
    background-image: url('../src/assets/images/person-auto.png');
}
.tls__card--03 .tls__person-img {
    background-image: url('../src/assets/images/person-cht.png');
}
.tls__card--04 .tls__person-img {
    background-image: url('../src/assets/images/person-chemical.png');
}
.tls__person-line {
    display: block; /* hr → span 化に伴い block 化 (margin auto 中央寄せ/width を有効に) */
    width: 31.9rem; /* Figma Line 45 (w=319) */
    height: 1px;
    margin: 0 auto;
    border: 0;
    background: var(--color-primary);
    /* image bottom と line の間に微小余白。Figma では line が rect の真下に重なる位置 (y=505) */
}
.tls__person-info {
    margin: 1.6rem auto 0;
    width: 25.1rem; /* Figma Frame 99 (w=251) */
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.5; /* Figma 30 / 20 */
}
.tls__member-label {
    display: block;
    text-transform: uppercase; /* HTML は "Member："、表示は大文字 */
}
/* 氏名のみ #333333 (Figma 1:5524 等)。MEMBER： ラベル側は primary 色のまま。 */
.tls__member-name {
    display: block;
    position: relative; /* hover 下線 ::after の基準 */
    margin-top: 0.1rem;
    color: var(--color-body);
    white-space: nowrap; /* 氏名差し替えで長くなっても折返さず 1 行に保つ */
    transition: color 0.25s ease;
}

/* 先方FB: メンバー全体(氏名＋役職)をリンク化＋ホバーアクション。 */
.tls__member-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.tls__member-role {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-body);
    font-size: 1.5rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: color 0.25s ease;
}
/* 氏名の下線: hover/focus で左からスライドイン (news__tab と同系のアクション) */
.tls__member-name::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.2rem;
    width: 100%;
    height: 1px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}
.tls__member-link:hover .tls__member-name,
.tls__member-link:focus-visible .tls__member-name,
.tls__member-link:hover .tls__member-role,
.tls__member-link:focus-visible .tls__member-role {
    color: var(--color-primary);
}
.tls__member-link:hover .tls__member-name::after,
.tls__member-link:focus-visible .tls__member-name::after {
    transform: scaleX(1);
}

/* メッセージテキスト
   Figma: Noto Sans CJK JP Bold (700), 16px, line-height 24px, color #333333、
   段落 3 行 + 空行 + 段落 2 行 (最後の文は wrap して計 ~8 行)。HTML 側で <br> 改行指定。*/
.tls__message {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.5; /* Figma 24 / 16 */
    color: var(--color-body);
}

/* Reveal 初期 state (JS が getBoundingClientRect 進入率で opacity/translateY 上書き) */
.tls .reveal {
    opacity: 0;
    transform: translateY(4rem);
}

/* === TLS 出現演出 (ThoughtLeadership.js 駆動・スクロール連動) === */
/* 縦ライン: 上→下に伸長 (scaleY 0→1, 原点=上端) */
.tls__head-line {
    transform-origin: top center;
    transform: scaleY(0);
}
/* char 分割 (点滅 / タイプライター)。display:inline で通常の語単位折り返しを維持
   (inline-block だと英単語が文字ごとに分断され語中で改行されるため)。opacity のみ駆動。 */
.u-char {
    display: inline;
    opacity: 0;
    will-change: opacity;
}
/* STRATEGY の land-in だけ transform(translateY/scale) が必要なので inline-block。 */
.tls__head-label .u-char {
    display: inline-block;
}
/* 帯wipe (Philosophy globe-title と同一構造 = u_bandWipe)。bar 色は JS が文字色で上書き。
   .u-band は text を包む inline-block ラッパー = bar を文字幅に一致させる。 */
.u-band {
    position: relative;
    display: inline-block;
}
.u-band-text {
    display: inline-block;
    white-space: pre-wrap;
    position: relative;
    z-index: 1;
    will-change: clip-path, opacity;
}
.u-band-bar {
    position: absolute;
    top: -0.08em;
    bottom: -0.08em;
    left: 0;
    right: 0;
    z-index: 2;
    clip-path: inset(0 100% 0 0); /* 初期: 右100% inset = 非表示 */
    pointer-events: none;
    will-change: clip-path;
}
/* globe 結語 (1:156): 各行は手動 \n で .ph-bandline に分割済み。PC は 1 行目
   「これまでのコンサルティングファームとは」が w(606px) に対し 605px と余裕 1px しかなく、
   Mac の和文グリフが Win より僅かに広いため「は」が 2 行目へ折返す崩れが出る。nowrap で防止。
   globe は track 右端で右に十分な余白があり、数px はみ出しても他要素に干渉しない。
   SP は狭幅に収める明示 3 行のため pre-wrap のまま (下の SP メディアで戻す)。 */
.ph-globe__catch .u-band-text {
    white-space: nowrap;
}
/* さらに確実化: PC は箱幅を「テキスト幅(約60.5rem)より明確に広い」固定 rem にし、positive な余白を作る。
   JSON 由来の固定幅 606px は 1px しか余裕がなく、max-content も箱=内容と同幅(余白0)で Safari の
   小数px丸めで最後の CJK「は」が折返る癖を踏む。68rem あれば Mac の僅かに広いグリフでも余裕で 1 行。
   rem 連動でフォントと一緒にスケールし、左揃え・globe は track 右端で右に余白十分なので干渉しない。
   SP は固定幅(明示3行)を維持。 */
/* intro 補足リード(1:127): 5行化で行が増え、既定 line-height 1.0 では行間が詰まりすぎるため確保。
   PC/SP 共通。数式とは縦に余裕があり重ならない (PC: bottom≈429 < INFRASTRUCTURE top 481)。 */
.ph-intro__lead { line-height: 1.55 !important; }
@media (min-width: 769px) {
    .ph-globe__catch { width: 68rem !important; }
    /* OS「常駐型コンサルティング」等の帯ラベルも、box が design 幅ぴったりで Mac の広いグリフだと
       最後の文字「グ」が折返す。band ラベルは _makeBandLabel が \n で行分割済み＝各行1行が前提なので
       nowrap で自動折返しを禁止 (右に僅か溢れても可)。 */
    .ph-os__stage-sub .u-band-text { white-space: nowrap; }
    /* intro 補足リード(1:127): テキスト差し替えに合わせ改行位置を見直し各行を短くした
       (philosophy-text.json で5行化)。元の文字サイズ(JSON fs32)のまま各行1行で収める。
       4行目「「なくてはならない存在」」が design 幅384pxに対し382pxと余裕2pxしかなく Mac の
       広いグリフで溢れるため、枠を 40rem(400px) に少し広げて余裕を確保 (x828+400=1228<1280)。
       nowrap で末尾折返しを防止。SP は brLines で同じ改行を反映 (狭幅でも各行短く収まる)。 */
    /* 5行化で下へ伸びた分、数式の strike-swap 横ライン(GROWTH ~y338)に下部が被るため上へ移動。 */
    .ph-intro__lead { width: 40rem !important; margin-top: -9rem !important; }
    /* 行ワイプの clip-path は行ボックス基準のため、左へぶら下げた約物 (text-indent 負) が
       ボックス外に出てクリップされる。padding-left で行ボックスを左へ広げてぶら下げ分を内側に
       収め、同量の negative margin で本文位置を元に戻す (clip は padding 含む border-box 基準)。 */
    .ph-intro__lead .ph-lw__line { white-space: nowrap; padding-left: 1.1em; margin-left: -1.1em; }
}
@media (max-width: 768px) {
    .ph-globe__catch .u-band-text { white-space: pre-wrap; }
}
/* container 内の非 .reveal 子要素 (JS フェード/スライド駆動) の初期非表示 = FOUC 回避 */
.tls__industry-list,
.tls__explore,
.tls__person-img,
.tls__person-line,
.tls__member-label,
.tls__member-name,
.tls__member-role {
    opacity: 0;
}
/* Member ラベル/氏名: transform(左右スライド)を効かせるため inline-block */
.tls__member-label,
.tls__member-name {
    display: inline-block;
}
/* メッセージのタイプライター用カーソル (チャットAI 風の点滅ブロック・文字色に追従) */
.u-caret {
    display: inline-block;
    width: 0.5em;
    height: 1.05em;
    margin-left: 0.04em;
    background: currentColor;
    vertical-align: -0.18em;
    animation: u-caret-blink 1.05s step-end infinite;
}
@keyframes u-caret-blink {
    0%,
    50% {
        opacity: 1;
    }
    50.01%,
    100% {
        opacity: 0;
    }
}

/* ============================================================
   TLS の SP レスポンシブ (docs/SPResponsive.md / Figma Home-SP Frame 1061)
   PC は全要素 rem 絶対配置だが、SP では縦積みフローへ全面リフローする。
   SP root=vw/39 のため rem は px÷10 慣習のまま SP デザイン値を使える。
   並び順 (全カード統一): 人物写真 → 業種(タイトル+リスト+Explore) → メッセージ。
   要素・コンテンツは PC を維持 (SP デザインで省略の会員情報/Explore も残す)。
   カード間 64px。パララックス 8 枚は SP 用に左右へ振り分け再配置 (装飾・低 opacity)。
   ============================================================ */
@media (max-width: 768px) {
    /* --- コンテナ: 128rem 固定 → 全幅フロー (左右 16px) --- */
    .tls__inner {
        width: auto;
        min-height: 0;
        padding: 0 1.6rem 8rem;
    }

    /* --- Head: 横線(40px) + STRATEGY(32px) を中央寄せ --- */
    .tls__head {
        height: auto;
        text-align: center;
    }
    .tls__head-line {
        display: block; /* span のインライン化で width/height が無効化され消えるのを防ぐ */
        position: static;
        width: 1px;
        height: 4rem; /* SP Line 208 は rotation -90 の縦線 40px */
        margin: 0 auto;
    }
    .tls__head-label {
        position: static;
        margin-top: 1.6rem;
        font-size: 3.2rem;
        text-align: center;
    }

    /* --- タイトルブロック: 静的フロー・左揃え (relative+z で parallax 前面に) --- */
    .tls__title-block {
        position: relative;
        top: auto; /* PC absolute の top:24.3rem を relative オフセットとして残さない */
        left: auto;
        z-index: 2;
        width: auto;
        height: auto;
        margin-top: 5.6rem; /* head → title 56 */
    }
    .tls__subtitle {
        font-size: 2.4rem;
    }
    /* SP 専用改行を有効化: 「事業を変え、」の後ろで改行する */
    .tls__br-sp {
        display: inline;
    }
    .tls__title {
        margin-top: 2.9rem;
    }
    .tls__title-line {
        font-size: 6.4rem;
    }
    .tls__badge {
        position: static;
        margin-top: 3.2rem;
        padding: 1rem 2.4rem; /* SP Frame 38 padding */
    }

    /* --- カード群: 静的フロー --- */
    .tls__cards {
        position: relative;
        top: auto; /* PC absolute の top:74.3rem を relative オフセットとして残さない */
        left: auto;
        z-index: 2;
        width: auto;
        margin-top: 5.6rem; /* title → 1枚目 56 */
    }
    .tls__card {
        height: auto !important; /* PC 固定高 (56.6rem 等) を解除 */
        margin-top: 0;
        display: flex;
        flex-direction: column;
    }
    .tls__card + .tls__card {
        margin-top: 6.4rem; /* カード間 64 (指定) */
    }

    /* カード内 3 要素: PC の per-card absolute を解除し全幅フロー。並び順を order で統一。 */
    .tls__card .tls__industry,
    .tls__card .tls__person,
    .tls__card .tls__message {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }
    .tls__person {
        order: 1;
    }
    .tls__industry {
        order: 2;
        margin-top: 2.4rem; /* 写真 → 業種 24 */
    }
    .tls__message {
        order: 3;
        margin-top: 3.2rem; /* 業種 → メッセージ 32 */
        /* ブレイクポイント直前(広い SP 幅)で 1 行が横長になり読みづらいので最大幅を制限し左寄せ。
           narrow な端末では card 幅の方が狭く効かない (= 全幅)。 */
        max-width: 43rem;
        align-self: flex-start;
    }

    /* 人物: 写真(216幅,中央)・線(240,中央)・会員情報(維持,中央) */
    .tls__person-img {
        width: 21.6rem;
        margin: 0 auto;
    }
    .tls__person-line {
        width: 24rem;
    }

    /* 業種: 左揃え・タイトル40px・リストは 1 列左 (2col も 1 列化) */
    .tls__industry-title {
        font-size: 4rem;
        text-align: left !important;
    }
    .tls__card--03 .tls__industry-title {
        font-size: 3.5rem;
    }
    .tls__industry-list,
    .tls__industry-list--2col {
        grid-template-columns: 1fr !important;
        justify-content: start !important;
        justify-items: start !important;
        text-align: left !important;
        row-gap: 2.5rem; /* SP gap 25 */
    }
    /* Auto & Products (card02) は SP でも 2 カラム (column-gap 24px) */
    .tls__industry-list--2col {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 2.4rem !important; /* SP デザイン column-gap 24px */
    }
    /* Explore: 全カード左揃え */
    .tls__explore,
    .tls__card--02 .tls__explore,
    .tls__card--04 .tls__explore {
        margin-left: 0 !important;
        margin-top: 3.2rem;
    }

    /* --- パララックス (Figma Home-SP Frame 1063 / parallax-images):
           各カードの人物写真とほぼ同じ Y に、左右へ振り分け配置 (端へブリード)。
           カードごとに概ね 2 枚ずつ。top% はセクション高に対する人物写真の概略位置。
           スクロールで上下に揺れるため、テキスト重なり時の可読性確保に opacity を抑える。 --- */
    .tls__parallax-img {
        opacity: 0.6;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
    }
    /* card01 (Corporate Finance) 人物背後。人物名と重なるため base を -2.5% 上へ
       (SP DEPTH 0.15 の sweep±40px でも名前と交差しない位置)。 */
    .tls__parallax-img:nth-child(1) {
        top: 10.5% !important;
        left: -1rem !important;
        width: 15rem !important;
    }
    .tls__parallax-img:nth-child(2) {
        top: 11.5% !important;
        right: -3rem !important;
        width: 20rem !important;
    }
    /* card02 (Auto & Products) 人物背後。人物名と重なるため base を -2.5% 上へ。 */
    .tls__parallax-img:nth-child(3) {
        top: 31.5% !important;
        right: -3rem !important;
        width: 18rem !important;
    }
    .tls__parallax-img:nth-child(4) {
        /* 先方FB: card02(輪島)の MEMBER 情報の左側と重なり暗い工場写真で読みにくいため上へ(33.5→30%)。 */
        top: 30% !important;
        left: -1rem !important;
        width: 15rem !important;
    }
    /* card03 (CHT) 人物背後。人物名に少し重なるため base を -1.0% 上へ。 */
    .tls__parallax-img:nth-child(5) {
        top: 54% !important;
        left: 0 !important;
        width: 23rem !important;
    }
    .tls__parallax-img:nth-child(6) {
        top: 56% !important;
        right: -3rem !important;
        width: 15rem !important;
    }
    /* card04 (Chemical & Utility) 人物背後。人物中心は ~80% だが、高スクロール進捗で
       parallax が下方向に最も押し下げられるため、その分 base を上げて写真背後に収める。 */
    .tls__parallax-img:nth-child(7) {
        top: 75% !important;
        right: -1rem !important;
        width: 14rem !important;
    }
    .tls__parallax-img:nth-child(8) {
        /* 先方FB: card04(森野)の MEMBER 情報の左側に少し重なるため上へ。当初75%は上げ過ぎで76%に(移動量を半分)。 */
        top: 76% !important;
        left: -1rem !important;
        width: 18rem !important;
    }
}

/* ============================================================
   GrowthStrategy セクション（横スクロール 4枚 + 3D ロゴ「G」）

   レイヤー構成（z-index 順）:
     .gs__back   - DOM 背面層（3D ロゴの背後）
     .gs__canvas - Three.js 中間層（3D ロゴ）
     .gs__front  - DOM 前面層（3D ロゴの前）
   3 層は同一 stacking context (.gs__sticky) 内に重ね、ロゴが DOM の前後に
   挟まれる構造を作る。canvas は pointer-events: none で操作を貫通させる。

   本セクションは sticky pin の上に横スクロール（後続実装）を載せる。
   初期表示 (GS-01) は scrollY = aiBottom 時点に GS-01 が見える状態。
   ============================================================ */
.gs {
    position: relative;
    /* .globe-stage の context 内で z:10 (= .recruit z:5 より上)。
       canvas は .gs__sticky 内に置かれ、その position:sticky stacking context 内で
       back(1) / canvas(2) / front(3) の順に描画される。GS section 自体が z:10 で
       Recruit (z:5) より上にあるため、canvas (≡ mesh) は Recruit 表示時にも前面に
       描画されるが、canvas は alpha:true なので Recruit テキストは透過部分から見える。 */
    z-index: 10;
    background-color: #ffffff;
    /* GS_PHASE_BOUNDS_VH と整合: GS-00 hold 2.0vh + (他 4 hold × 0.5vh) + 4 transition × 1.5vh = 10.0vh。
       GS-00 を 2.0vh に拡張し、ロゴ登場演出 (中央出現 → 回転上昇 → 右スライド) を実施。 */
    --gs-scroll-extent: 1000vh;
    margin-block-start: -1px;
}

/* sticky pin 領域。height = 100vh + extent。 */
.gs__pin {
    position: relative;
    height: calc(100vh + var(--gs-scroll-extent));
}

.gs__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
    /* position:sticky 自体が stacking context を作る。内部の back(z:1)/canvas(z:2)/
       front(z:3) はこの context 内で重ねられ、外部 (Recruit など) と干渉しない。 */
}

/* --- 背面 DOM 層: 3D ロゴ canvas の背後に置くテキスト要素群 ---
   z 階層: テキスト(z:1) < canvas(z:2) < Case Study(z:3)。
   3D「G」mesh はテキストと Case Study の間に挟まれる設計 (Figma の意図)。 */
.gs__back {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

/* --- 3D ロゴ canvas は .globe-canvas (ページ共通) に統合した。
       GS+Recruit を貫く単一 mesh をホストするため、section 内ではなく
       <main> 直下に position:fixed で配置する。 --- */

/* --- 前面 DOM 層: Case Study カードを 3D ロゴより手前に表示する ---
   inset:0 で viewport 全体を覆うため、ここを pointer-events:auto にすると Case Study
   カード以外の「透明な領域」までドラッグ・selection hit を奪ってしまい、背面 (.gs__back)
   のテキスト選択を物理的に遮断する。.gs__front 自体は透過させ、内部の .gs__case-study
   のみ pointer-events:auto を明示してクリック可能にする (canvas も既に透過設定済み)。
   これで back テキストへの selection / drag hit が層を貫通して届くようになる。 */
.gs__front {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

/* 横スクロール track。GS-01〜04 を横並びにする想定。
   現状は GS-01 のみで translate なしの初期表示。 */
.gs__track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    height: 100%;
    will-change: transform;
}

/* 各カードは 1 viewport (100vw × 100vh)。
   Figma フレームは 1280×720 だが、ここでは viewport にフィット。
   1rem = 1/128vw のため、Figma 座標 (px) は ÷10 で rem に置換できる。
   背景は .gs__sticky で白を確保しているため、card 自身は透明にする。
   (card に白 BG を付けると canvas (z:2) を覆い、3D ロゴが見えなくなる)

   ## 縦中央配置 (transform: translateY)
   画面が縦長 (vh > 72rem 換算) のとき、Figma 設計フレーム 72rem 高を viewport 縦中央へ。
   全 absolute 配置子 (テキスト・Case Study・logo-anchor) がまとめて下方オフセットされる
   ため、card 内の Figma 座標で組まれた要素群がスケールごと中央に揃う。logo-anchor の
   getBoundingClientRect も transform 込みで返るため、3D mesh 位置同期は自動追従する。
   `.gs__track` 側の JS translateX (横スクロール) とは合成され、横送りと縦中央寄せが両立。 */
.gs__card {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    transform: translateY(max(0px, calc((100vh - 72rem) / 2)));
    /* pointer-events は親から継承。.gs__back (auto) 内の card は auto、.gs__front (none)
       内の card は none。.gs__front の card は子 .gs__case-study だけが auto に戻る。
       これにより front 側の透明領域は selection / drag を透過し、背面テキストへ届く。 */
}

/* === GS-00 (Figma Frame 175, 1280x720) ===
   intro card。Figma 座標から相対化した値を rem (= px/10) で配置。 */

/* 上段大見出し「情報技術変革」(Figma: x=71, y=119, w=720, h=88, font 120px Noto Sans CJK JP Regular) */
.gs__lead {
    position: absolute;
    /* PC: 1行目「機能、成長の」の上下中央(top+約4.8rem)が line(16.3rem)中央に重なるよう微調整。元 11.9rem。 */
    top: 11.5rem;
    left: 7.1rem;
    margin: 0;
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    /* <br>で2行化(機能、成長の / エンジンを埋め込む)しコンパクトになったため、太字+少し大きく。
       長い行は9文字×8rem=720px で Gロゴ手前(~800px)に収まる。元: 400/12rem(1行)。 */
    font-weight: 700;
    font-size: 8rem;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-primary);
    white-space: nowrap;
}

/* 5 枚共通の横線 (Figma Line 81, w=452 / stroke 1px)。
   GS-00 は右側 (left:82.8rem)、GS-01〜04 は左側 (left:0)。 */
.gs__line {
    position: absolute;
    top: 16.3rem;
    left: 0;
    width: 45.2rem;
    height: 1px;
    background-color: var(--color-primary);
}
/* GS-00 の線は元の長さ(45.2rem)のまま「右端」に固定 (right:0)。これで GS-00→GS-01 の
   境界(カード右端)にぴったり接し、左隣の GS-01 線(left:0)と隙間なく繋がる。
   left:82.8rem だと viewport 幅が 1280 を超えると右端に届かず隙間が出るため right:0 に変更。 */
.gs__card--00 .gs__line {
    /* リード1行目「機能、成長の」の右端(≈55.1rem)+約2rem から右端まで伸ばす (見出し＋罫線)。
       右端は frame 右(right:0)のまま=隣 GS-01 線と連続。 */
    left: 57rem;
    right: 0;
    width: auto;
}

/* サブタイトル (Figma: x=93, y=332, w=480, h=23, font 32px Inter Bold, right-aligned) */
.gs__subtitle {
    position: absolute;
    top: 33.2rem;
    left: 9.3rem;
    width: 48rem;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.21;
    letter-spacing: 0;
    text-align: right;
    color: var(--color-primary);
}

/* 大タイトル "Growth Strategy" (Figma: x=80, y=419, w=952, h=85, font 120px Roboto Bold) */
.gs__title {
    position: absolute;
    top: 41.9rem;
    left: 8rem;
    width: 95.2rem;
    margin: 0;
    font-family: 'Roboto', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12rem;
    line-height: 1.171;
    letter-spacing: 0;
    color: var(--color-primary);
}

/* バッジ "Strategy GS" (GS-00) と "Explore" (GS-01〜04, SP) は同一デザイン要素。
   視覚スタイルを共有 (DRY)。位置・min-width は個別指定。 */
.gs__badge,
.gs__explore {
    position: absolute;
    text-decoration: none; /* span/a の下線を抑止 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 3.2rem;
    padding: 0 2.4rem;
    background-color: #ffffff;
    border: 1px solid var(--color-primary);
    box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.25);
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.21;
    letter-spacing: 0;
    white-space: nowrap;
}
/* Strategy GS バッジ (GS-00) 固有: min-width と PC 位置 (Figma x=1060, y=447) */
.gs__badge {
    min-width: 14rem;
    top: 44.7rem;
    left: 100rem; /* 先方FB: 右余白が約5pxしかなく画面幅により見切れるため左へ(106→100rem/右余白≒65px)。タイトル(Growth Strategy)テキスト右端95.3remとの間も確保 */
}

/* === GS-01 〜 GS-04 (Figma Frame 176, 1280x720) ===
   pillar card 4 枚共通スタイル。フォント・色・サイズのみここで宣言し、
   各要素の position (top/left/width) はカードごとに後段で上書きする。
   Figma 「Roboto」指定の日本語文字はブラウザのフォント自動フォールバック (Noto Sans JP) に任せる。 */

/* 小見出し (日本語 32px Roboto Medium 青、全カード共通位置)
   Figma: 各カード x=80, y=107, font 32px Roboto Medium、color #0000ff */
.gs__pillar-header {
    position: absolute;
    top: 10.7rem;
    left: 8rem;
    margin: 0;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--color-primary);
    white-space: nowrap;
}

/* 大タイトル (英語 120px Roboto Light 青、改行は <br>)
   Figma の 2 行 bbox h=205 ≒ font-size × 1.71 だが、これは「cap-top 〜 last line baseline」
   の visual 高さ。CSS line-height で同等の見え方にするには 1.0 (= font-size 単位) が最も近い。
   1.171 を使うと行間が広すぎて下の説明文と重なるため不可。 */
.gs__pillar-title {
    position: absolute;
    margin: 0;
    font-family: 'Roboto', 'Inter', sans-serif;
    font-weight: 300;
    font-size: 12rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-primary);
}

/* 説明文 (日本語 20px Roboto ExtraBold 相当, #333333)
   Figma の Roboto ExtraBold は欧文用。日本語は Noto Sans JP に自動フォールバック。 */
.gs__pillar-desc {
    position: absolute;
    margin: 0;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.5;
    color: #333333;
}

/* 3D ロゴアンカー: 0×0 absolute 要素。
   width/height とも 0 なので getBoundingClientRect の top/left がそのまま
   G ロゴの世界座標中心。Stage 5 で data-scale / data-rotate を読み取り
   mesh の scale / rotation.z に反映する。 */
.gs__logo-anchor {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* --- 各カードの大タイトル / 説明文 個別 position (Figma px ÷ 10 = rem) --- */

.gs__card--01 .gs__pillar-title {
    top: 19.6rem;
    left: 8rem;
    width: 81.4rem;
}
.gs__card--01 .gs__pillar-desc {
    top: 44.9rem;
    left: 8rem;
    width: 78.4rem;
}

.gs__card--02 .gs__pillar-title {
    top: 35rem;
    left: 49.9rem;
    width: 71.4rem;
}
.gs__card--02 .gs__pillar-desc {
    top: 25.8rem;
    left: 51.1rem;
    width: 54.4rem;
}

.gs__card--03 .gs__pillar-title {
    top: 28.8rem;
    left: 8rem;
    width: 68.5rem;
}
.gs__card--03 .gs__pillar-desc {
    top: 19.6rem;
    left: 8.6rem;
    width: 56rem; /* 1行目(約26文字×2rem≒52rem)が折り返さないよう拡幅 (旧 52rem) */
}

.gs__card--04 .gs__pillar-title {
    top: 23.8rem;
    left: 49.7rem;
    width: 70.1rem;
}
.gs__card--04 .gs__pillar-desc {
    top: 49.1rem;
    left: 49.9rem;
    width: 62rem;
}

/* === 出現アニメの初期状態 (JS 起動前の FOUC 回避) ===
   GsReveal が毎フレーム opacity / transform / filter を上書きする。
   will-change で合成レイヤを事前確保し、再描画コストを抑える。 */
.gs__pillar-header,
.gs__pillar-desc,
.gs__line,
.gs__lead,
.gs__subtitle,
.gs__title,
.gs__badge,
.gs__case-study,
.gs__case-tag,
.gs__case-desc,
.gs__case-explore {
    opacity: 0;
    will-change: opacity, transform, filter;
}

/* .gs__line は scaleX 0→1 で左から wipe する。transform-origin を左端固定。 */
.gs__line {
    transform-origin: left center;
}

/* pillar-title 自体は常に visible (各 char span が個別に opacity を持つ)。
   container の opacity が 0 だと中の span も見えなくなるので明示。 */
.gs__pillar-title {
    opacity: 1;
}

/* pillar-title を 1 文字ずつ span 化したもの。
   display は inline (default) のままにする — inline-block にすると英単語が
   char 単位で wrap してしまい "Transformation" の "n" だけ改行されてしまう。
   opacity アニメは inline でも問題なく効く。 */
.gs__char {
    opacity: 0;
    will-change: opacity;
}

/* === Case Study 子カード ===
   各 pillar カードに 2 枚配置。Figma で 262×147 / 青背景 + 白枠、内部に
   タグ・説明文・Explore サブボタン。WordPress 連携時にこの構造で動的差し替え。
   位置 (top/left) は HTML 側 inline style で個別指定 (Figma px ÷ 10 = rem)。
   .gs__front (z-index:3) 内に置くので canvas (z-index:2) より前面に描画される。
   .gs__front は pointer-events:none で透過させているため、Case Study 自身は
   auto を明示してクリック可能性を確保する。 */
/* Case Study リスト: 2 件を ul でグループ化。子の .gs__case-study は absolute なので
   ul/li は in-flow 上 0 高さ。レイアウトに影響しないよう余白・マーカーを除去する。 */
.gs__case-list,
.gs__case-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gs__case-study {
    position: absolute;
    width: 30rem; /* 先方FB: 青ブロックを 26.2→30rem に拡幅(右余白確保)。事例は高さ(top)違いで配置のため x 重なりは視覚的に問題なし */
    height: 14.7rem;
    background-color: var(--color-primary);
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    display: block;
    pointer-events: auto;
}

/* タグ (左上): Figma Group 33 内テキスト位置 (14, 16) */
.gs__case-tag {
    position: absolute;
    top: 1.6rem;
    left: 1.4rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
}

/* 説明文 (タグ下): Figma 位置 (16, 43), w=162, h=50 (3 行で 16.67px/行)。
   Explore ボタン (右下 120×32) とは縦方向で被らないため、description は card 全幅近く
   (24.6rem 余裕) に広げてよい。Figma の 162 では Inter+Noto Sans JP の rendering で
   <br> の意図に反する追加 wrap が起こるため、24rem に拡張。 */
.gs__case-desc {
    position: absolute;
    top: 4.3rem;
    left: 1.6rem;
    width: 26.8rem; /* 先方FB: box を 30rem に拡幅したのに合わせ、右余白を左(1.6rem)と揃える(30 - 1.6*2) */
    margin: 0;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.5; /* 先方FB: 行高が低いため 1.05→1.5 */
}

/* Explore サブボタン (右下): Figma 120×32, 白枠のみ。card 内 right:0/bottom:0 で隅にぴったり */
.gs__case-explore {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12rem;
    height: 3.2rem;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
}

/* GS sticky pin 終了から Recruit 出現までの追加スクロール余白 (1vh)。
   この間、3D「G」mesh が globe-canvas 上をコイン着地風に gs04 → Recruit へゆっくり
   遷移する。背景は白でセクション間の違和感を抑える。
   z:5 で .gs (z:10) より下、.recruit と同レベル。canvas は .gs__sticky 内で常に
   viewport にあり、この spacer 領域でも mesh が見える。 */
.gs-recruit-spacer {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
}

/* Explore バッジ (GS ピラーカード GS-01〜04)。PC は各カード右下 (Figma GS-01 frame相対 x1135/y648)、
   SP は @media 側で右上へ再配置。視覚は .gs__badge と共有 (白地・青枠・反転ホバー)。 */
.gs__explore {
    display: inline-flex;
    /* 先方FB(日本語化): 文言が長くカード右端(128rem)を超えるため、left 固定→right 基準へ。
       各ピラーで文字数が異なっても右端を揃え、カード内に収める。 */
    right: 6rem;
    left: auto;
    top: 64.8rem;
}

/* ============================================================
   GrowthStrategy の SP レスポンシブ (docs/SPResponsive.md / Figma Home-SP)
   横ピン機構 (pin/sticky/track/100vw card) は寸法的にそのまま流用し、
   各カード内要素を SP デザイン座標 (px÷10=rem) へ再配置する (配置は4カード共通)。
   3DロゴG の位置/スケールはフェーズ② (GrowthStrategy.js) で再調整する。
   ============================================================ */
@media (max-width: 768px) {
    /* カード: 72rem フレーム前提の縦中央 translateY を解除 (SP は 844 設計) */
    .gs__card {
        transform: translateY(0) !important;
    }

    /* 横線: SP は y=168(16.8rem) の全幅線。全カード共通高さで横スクロール時に連続する。 */
    .gs__line {
        top: 16.8rem;
        width: 100% !important;
    }
    /* GS-00 の線はリード1行目「機能、成長の」の右端(≈25.4rem)+1rem余白から右端まで伸ばす
       (見出し＋罫線の体裁)。高さは共通の 16.8rem のまま (リード1行目中央に重なる)。 */
    .gs__card--00 .gs__line {
        left: 26.4rem;
        right: 0;
        width: auto !important;
    }

    /* --- GS-00 イントロ: pillar と同じ縦リズムに整列 (情報技術変革=線の上 / Growth Strategy=線の下)。
           これで線が全カードで一直線に連続し、GS-00 だけ高すぎる問題を解消。 --- */
    .gs__lead {
        /* ライン(16.8rem)は固定。リードを上げて 1行目「機能、成長の」の上下中央がライン高さに重なる
           ように配置 (1行目中央 = top + 約2.37rem = 16.85rem → top 14.5rem)。ライン自身は下の
           .gs__card--00 .gs__line で「の」の右端から右へ伸ばす。 */
        top: 14.5rem;
        left: 1.4rem;
        font-size: 4rem;
        white-space: normal;
    }
    .gs__subtitle {
        top: 19.5rem;
        left: 1.4rem;
        width: auto;
        font-size: 2.4rem;
        text-align: left;
    }
    .gs__title {
        top: 29rem; /* リード下げに合わせ +6rem (元 23rem)。 */
        left: 1.4rem;
        width: auto;
        font-size: 6.4rem;
    }
    .gs__badge {
        top: 48rem; /* title が 2 行(~15rem)で bottom と密着していたため余白を確保。リード下げに合わせ +6rem (元 42rem)。 */
        left: 1.4rem;
    }

    /* --- GS-01〜04 ピラーカード (共通配置・PC per-card 規則を !important で上書き) --- */
    .gs__pillar-header {
        top: 12.8rem;
        left: 2.3rem;
        font-size: 2.4rem;
    }
    .gs__pillar-title {
        top: 19.7rem !important;
        left: 2.3rem !important;
        width: auto !important;
        font-size: 4rem;
    }
    .gs__pillar-desc {
        top: 31.5rem !important;
        left: 2.3rem !important;
        width: 28.8rem !important;
        font-size: 1.6rem;
    }

    /* Explore (各ピラーカード右上)。視覚は .gs__badge と共有 (上の共有ルール)、位置のみ指定。
       先方FB(SP): 共有ルールの PC 側 right:6rem が残ったまま left:26.9rem も効き、両端固定で
       幅が潰れ日本語テキストが見切れていた。right 基準へ統一(left:auto)し内容幅で収める。 */
    .gs__explore {
        display: inline-flex;
        top: 12.1rem;
        right: 3rem;
        left: auto;
    }

    /* Case Study: サイズ (26.2rem×14.7rem) は SP と一致済み、位置のみ共通上書き。 */
    .gs__case-list li:nth-child(1) .gs__case-study {
        top: 43.7rem !important;
        left: 2.3rem !important;
    }
    /* 2枚目は右寄せ + 下端基準 (狭い/低い画面でも下に見切れない)。
       card下端から 2.9rem (= 844-668-147), card右端から 4.5rem。
       先方FB: card は height:100vh(=大きい方/アドレスバー込み)基準のため、素の bottom:2.9rem だと
       iOS でアドレスバー表示中に下端が可視域外へ隠れる。lvh-svh(=アドレスバー高)分だけ上へ寄せて
       可視域内に収める (svh/lvh 非対応ブラウザは直前の bottom:2.9rem にフォールバック)。 */
    .gs__case-list li:nth-child(2) .gs__case-study {
        top: auto !important;
        bottom: 2.9rem !important;
        bottom: calc(2.9rem + (100lvh - 100svh)) !important;
        left: auto !important;
        right: 4.5rem !important;
    }
}

/* ============================================================
   Recruit セクション (Figma Frame 179, 747×933 を 1280 viewport で中央配置)
   GS の sticky pin が終了した後、通常縦スクロールで出現する。
   inner box は 74.7rem × 93.3rem の固定 box (Figma フレーム相当) として中央寄せ。
   内部要素は Figma 座標 (px ÷ 10 = rem) で absolute 配置 — gs__pillar-* と同方針。
   ============================================================ */
.recruit {
    position: relative;
    /* .globe-stage の context 内で z:5 (= .gs z:10 より下)。
       .gs__sticky 内 (canvas を含む) が常に Recruit より前面に描画される。
       canvas は alpha:true なので mesh 以外の領域は透過し、Recruit テキストは
       透過部分から見える。 */
    z-index: 5;
    width: 100%;
    /* 出現演出 (u_linkReveal) で recruit__top-btn 等が transform:scale(2) → 一時的に画面幅を超え
       右へはみ出し、横スクロールが発生していた。scale が settle する間だけ横をクリップする。
       overflow-x:clip は縦に影響せず (overflow-y:visible 維持)・スクロールコンテナも作らない。 */
    overflow-x: clip;
    /* recruit__inner は 93.3rem 固定。画面比率により 1rem = min(vw/128, vh/72) が
       縮むと recruit__inner が vh より短くなり、ページ末尾までスクロールしても recruit が
       viewport 上端に到達できず、ポストピン transition (gs04 → recruit anchor) の tRaw が
       1 未満で止まる → mesh が JOIN! と重なる。min-height:100vh で recruit セクション自体は
       常に viewport 高さ以上を確保し、scrollY が finalScrollY (= recruit.docTop) に確実に
       到達できるようにする。recruit__inner の余白は section 下端側に出る (= 採用リンクの
       下に白い空白)。 */
    min-height: 100vh;
    background-color: #ffffff;
}

.recruit__inner {
    position: relative;
    width: 74.7rem;
    /* 二校FB: 罫線削除＋行間圧縮でセクション高さを削減 (93.3 → 73rem)。 */
    height: 73rem;
    margin: 0 auto;
}

/* "RECRUIT" 小ラベル (Figma y=88, w=747, Inter Bold 56px center) */
.recruit__label {
    position: absolute;
    text-transform: uppercase; /* HTML は "Recruit"、表示は大文字 */
    top: 12.5rem; /* 二校FB: JOIN 側へ下げて RECRUIT↔JOIN の間を詰める (8.8→12.5) */
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 5.6rem;
    line-height: 1;
    color: var(--color-primary);
}

/* "JOIN!" メインタイトル (Figma y=193, w=747, Roboto Black 120px center) */
.recruit__join {
    position: absolute;
    text-transform: uppercase; /* HTML は "Join!"、表示は大文字 */
    top: 19.3rem;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 12rem;
    line-height: 1;
    color: var(--color-primary);
}

/* G ロゴ位置 (Figma Group 72: x=241.5, y=325, 264×264) には DOM 要素を置かない。
   代わりに 3D「G」mesh が .globe-canvas 内で .recruit__inner 内の .gs__logo-anchor
   (data-card="recruit") の getBoundingClientRect 位置に追従する。 */

/* 横線 (recruit__line) は先方FBで削除。 */

/* RECRUIT 上の縦ライン (Figma Line 83, 縦 189px)。SP のみ表示 (PC は既存挙動維持)。 */
.recruit__vline {
    display: none;
}

/* "Be a growth infrastructure" (Figma y=683, w=747, Roboto Light 48px center) */
.recruit__tagline {
    position: absolute;
    top: 60rem; /* 二校FB: 罫線削除に合わせ G 直下へ上げ、行間を圧縮 */
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 4.8rem;
    line-height: 1;
    color: var(--color-primary);
}

/* "RECRUIT TOP" ボタン (Figma Frame 11: x=87.5, y=797, 264×56.32, 1px border)
   ボタン内の "RECRUIT TOP" テキスト: Inter Regular 24px、中央寄せ */
.recruit__top-btn {
    position: absolute;
    text-transform: uppercase; /* HTML は "Recruit Top"、表示は大文字 */
    top: 66rem; /* 二校FB: 行間圧縮 */
    left: 8.75rem;
    width: 26.4rem;
    height: 5.632rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 枠線は border ではなく inset box-shadow で描く。border は overflow:hidden / Retina の小数px端で
       上下の 1px が飲まれて「ボーダー見切れ」になる (iPhone 下辺 / Mac 上辺)。inset box-shadow は
       要素自身の塗りでクリップされず、四辺とも確実に 1px 描画される。 */
    box-shadow: inset 0 0 0 1px var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1;
}
/* hover/focus 反転時は枠線(=box-shadow)も白へ。共有 hover ルールの border-color では box-shadow に効かないため個別指定。 */
.recruit__top-btn:hover,
.recruit__top-btn:focus-visible {
    box-shadow: inset 0 0 0 1px #ffffff;
}

/* "新卒採用 / 中途採用" リンク群 (Figma Frame 7: x=412.5, y=817.66, w=247, h=15)
   2 リンクが横並び (gap 5.5rem = 中間 55px)。各リンクに ▶ 三角アイコン。 */
.recruit__sublinks {
    position: absolute;
    list-style: none; /* p → ul 化に伴いマーカー除去 */
    padding: 0;
    top: 68.07rem; /* 二校FB: 行間圧縮 (top-btn と同じ行) */
    left: 41.25rem;
    width: 24.7rem;
    margin: 0;
    display: flex;
    gap: 5.5rem;
    align-items: center;
    color: var(--color-primary);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
}

.recruit__sublink {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

/* ▶ 三角アイコン (Figma Vector: 10×15)。CSS triangle で実装。 */
.recruit__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.6rem;
    border-style: solid;
    border-width: 0.75rem 0 0.75rem 1rem;
    border-color: transparent transparent transparent var(--color-primary);
}

/* ============================================================
   Recruit の SP レスポンシブ (Figma Home-SP Frame 1072)
   PC は 74.7rem 固定 box 内 absolute。SP は縦積み中央寄せフローへ。
   並び (DOM 順と一致): RECRUIT(40px) → JOIN!(64px) → 3DロゴG(着地) → 線 → tagline(24px) → Recruit Top → 新卒/中途
   3DロゴG はフェーズ④で gs04 から着地。ここではレイアウト + 着地スロット確保まで。
   ============================================================ */
@media (max-width: 768px) {
    .recruit__inner {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 4rem 1.6rem 6.4rem;
    }
    /* RECRUIT 上の縦ライン (189px)。transform-origin:top で上→下に伸びる。
       初期 scaleY(0)、GrowthStrategy.js が G コイン着地の進捗で 0→1 に駆動。 */
    .recruit__vline {
        display: block;
        width: 1px;
        height: 18.9rem;
        margin: 0 auto 2.3rem; /* ライン↔RECRUIT 間 23px (デザイン値) */
        background-color: var(--color-primary);
        transform: scaleY(0);
        transform-origin: top center;
        will-change: transform;
    }
    /* 全要素を静的フロー化 (PC の absolute top/left を解除) */
    .recruit__label,
    .recruit__join,
    .recruit__tagline,
    .recruit__top-btn,
    .recruit__sublinks {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .recruit__label {
        font-size: 4rem;
    }
    .recruit__join {
        margin-top: 1.6rem;
        font-size: 6.4rem;
    }
    /* 3DロゴG 着地スロット: 0×0 anchor の上下 margin で空間確保 + 中央寄せ。
       _finalState('recruit') は anchor の getBoundingClientRect(top-left) を G 中心に使う。 */
    .gs__logo-anchor[data-card='recruit'] {
        position: static;
        display: block;
        width: 0;
        height: 0;
        /* G(160px=±8rem) の上下に 24px(2.4rem) ずつ余白 → 8+2.4=10.4rem。
           JOIN!↔G と G↔線 を共にデザインの 24px に揃える。 */
        margin: 10.4rem auto;
    }
    .recruit__tagline {
        margin-top: 2.4rem;
        font-size: 2.4rem;
    }
    .recruit__top-btn {
        margin-top: 4rem;
    }
    .recruit__sublinks {
        /* Recruit Top ボタンとの gap を拡大 (iPhone でボタン下ボーダーが隠れる対策)。2.4→5rem。 */
        margin-top: 5rem;
        width: auto;
        justify-content: center;
    }
}

/* ============================================================
   リンクのホバー / フォーカス演出
   ・opacity / transform を JS が毎フレーム制御する要素 (GS case study /
     .reveal 要素) は、JS と競合しない background-color / color / box-shadow /
     子要素の transform で表現する。
   ・キーボード操作にも効くよう :focus-visible を併記。
   ============================================================ */

/* Philosophy の Explore / 創業者メッセージ を枠線ボタン化 (GS/TLS の Explore と統一)。
   位置はインライン座標(_makeLabel)のまま。border-box + padding で text を枠で囲む(高さは padding 由来)。
   ※登場アニメ(Philosophy.js)が color/transform を一時上書きするが、枠・背景は CSS が担当。 */
.ph-equil__link,
.ph-os__link,
.ph-globe__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.7rem 2.4rem;
    border: 1px solid var(--color-primary);
    background-color: #ffffff;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

/* 先方FB(SP): Explore は日本語文言が長く、PC の 2.4rem 左右パディングだと枠内にテキストが
   収まらず見切れる。SP は枠幅(PH_SP_LAYOUT の w)を広げた上で左右パディングを圧縮して収める。 */
@media (max-width: 768px) {
    .ph-equil__link,
    .ph-os__link {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

/* 枠線(アウトライン)型リンク・バッジ: hover/focus で primary 塗り + 白文字に反転。全セクション統一。
   対象: TLS / Recruit / GS(badge・PC explore) / Philosophy(Explore・創業者メッセージ) / AI(badge)。 */
.tls__explore,
.tls__badge,
.recruit__top-btn,
.gs__badge,
.gs__explore,
.ph-equil__link,
.ph-os__link,
.ph-globe__btn,
.ai__badge {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}
/* !important: 一部リンクは登場アニメで inline style.color が当たるため、それを上書きして確実に反転。
   背景=primary / 文字=白 / 枠線=白 に反転。 */
.tls__explore:hover,
.tls__explore:focus-visible,
.tls__badge:hover,
.tls__badge:focus-visible,
.recruit__top-btn:hover,
.recruit__top-btn:focus-visible,
.gs__badge:hover,
.gs__badge:focus-visible,
.gs__explore:hover,
.gs__explore:focus-visible,
.ph-equil__link:hover,
.ph-equil__link:focus-visible,
.ph-os__link:hover,
.ph-os__link:focus-visible,
.ph-globe__btn:hover,
.ph-globe__btn:focus-visible,
.ai__badge:hover,
.ai__badge:focus-visible {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* リンクである合図: 枠線リンクに「リフレクション(光の反射)」を周期で煌めかせる。
   疑似要素を一定時間 scale 0 で待機 → 一気に弾けて拡大しながらフェード = 2 秒おきの自然な煌めき。
   contain:layout で static/absolute 問わず疑似要素の配置基準を作り (position は変えない)、
   overflow:hidden で拡大した glint をボタン形状にクリップ。hover 反転とも両立。矢印は付けない。 */
.tls__explore,
.tls__badge,
.recruit__top-btn,
.gs__badge,
.gs__explore,
.ph-equil__link,
.ph-os__link,
.ph-globe__btn,
.ai__badge {
    overflow: hidden;
    contain: layout;
}
.tls__explore::after,
.tls__badge::after,
.recruit__top-btn::after,
.gs__badge::after,
.gs__explore::after,
.ph-equil__link::after,
.ph-os__link::after,
.ph-globe__btn::after,
.ai__badge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6em;
    height: 1.6em;
    margin: -0.8em 0 0 -0.8em;        /* リンク中心へ */
    background: linear-gradient(135deg, transparent 38%, rgba(130, 160, 255, 0.9) 50%, transparent 62%);
    transform: scale(0) rotate(45deg);
    animation: phLinkReflection 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes phLinkReflection {
    0%   { transform: scale(0) rotate(45deg);  opacity: 0; }    /* 待機 (透明) */
    80%  { transform: scale(0) rotate(45deg);  opacity: 0.25; } /* ~2s 待機 */
    81%  { transform: scale(4) rotate(45deg);  opacity: 0.4; }  /* 一気に弾ける */
    100% { transform: scale(50) rotate(45deg); opacity: 0; }    /* 拡大しながら消失 */
}
@media (prefers-reduced-motion: reduce) {
    .tls__explore::after, .tls__badge::after, .recruit__top-btn::after, .gs__badge::after, .gs__explore::after,
    .ph-equil__link::after, .ph-os__link::after, .ph-globe__btn::after, .ai__badge::after { animation: none; opacity: 0; }
}

/* テキストリンク (News タブ): hover で白い下線を左からスライドイン (先方FB: ホバーアクション追加) */
.news__tab {
    position: relative;
}
.news__tab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.news__tab:hover::after,
.news__tab:focus-visible::after {
    transform: scaleX(1);
}

/* Recruit サブリンク: hover で矢印を右へ送る + 減光 */
.recruit__sublink {
    transition: opacity 0.2s ease;
}
.recruit__sublink:hover,
.recruit__sublink:focus-visible {
    opacity: 0.65;
}
.recruit__arrow {
    transition: transform 0.2s ease;
}
.recruit__sublink:hover .recruit__arrow,
.recruit__sublink:focus-visible .recruit__arrow {
    transform: translateX(0.3rem);
}

/* News カード: hover で浮き上がり + 「+」を primary 色に */
.news-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.news-card:hover,
.news-card:focus-visible {
    /* 先方FB: _header/common.css の a:hover{opacity:0.7} でカードが半透明になるのを打ち消す
       (.news-card:hover は specificity で a:hover に勝つため !important 不要)。 */
    opacity: 1;
    transform: translateY(-0.4rem);
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.18);
}
/* reveal 途中(li に JS がインライン opacity 設定)の hover でも透過させない保険 (!important でインライン上書き)。 */
.news__grid > li:hover,
.news__grid > li:focus-within {
    opacity: 1 !important;
}
.news-card__plus::before,
.news-card__plus::after {
    transition: background-color 0.25s ease;
}
.news-card:hover .news-card__plus::before,
.news-card:hover .news-card__plus::after {
    background-color: var(--color-primary);
}

/* GS Case Study: opacity/transform は JS 制御のため、box-shadow と内部 Explore の
   反転で hover を表現する。 */
.gs__case-study {
    transition: box-shadow 0.25s ease;
}
.gs__case-study:hover,
.gs__case-study:focus-visible {
    box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.35);
}
.gs__case-explore {
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}
.gs__case-study:hover .gs__case-explore,
.gs__case-study:focus-visible .gs__case-explore {
    background-color: #ffffff;
    color: var(--color-primary);
}

/* ============================================================
   テキスト選択の有効化
   一部セクション (Philosophy / AI Phase 2〜4 / GS back layer) は演出のため
   親コンテナに pointer-events:none を設定している。内部のテキストもブロック
   されてユーザーが選択・コピーできないため、テキスト要素側で auto に戻す。
   ============================================================ */
.ph-label:not(.ph-chars),
.ai__embed,
.ai__big,
.ai__statement-line,
.ai__badge,
.ai__stack-char,
.ai__desc,
.ai__sub-desc,
.ai__hcenter,
.ai__p3b-text,
.ai__p4-text,
.ai__cross-en,
.ai__cross-jp,
.gs__lead,
.gs__subtitle,
.gs__title,
.gs__badge,
.gs__pillar-header,
.gs__pillar-title,
.gs__pillar-desc,
.gs__case-tag,
.gs__case-desc,
.gs__case-explore {
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

/* 先方FB: SP では調整GUI(tweakpane)が内容に被って邪魔なので非表示にする。
   ?debug=1 時のみ生成される要素で本番には出ないが、SP実機確認の妨げになるため。PCは表示のまま。 */
@media (max-width: 768px) {
    .tp-dfwv { display: none !important; }
}

/* ============================================================
   デバッグUI（utility / プロジェクト共通・固定pxサイズ）
   `src/utils/debug.js` から制御。?debug=1 か localhost で自動有効化。
   ============================================================ */
.debug-ui {
    position: fixed;
    top: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 14px;
    font-size: 12px;
    font-family: 'Input Mono', 'Menlo', monospace;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    z-index: 9999;
    line-height: 1.6;
    min-width: 220px;
    /* テキスト選択可能にする（コピー用） */
    user-select: text;
    -webkit-user-select: text;
}
.debug-ui__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.debug-ui__label {
    opacity: 0.6;
    display: inline-block;
    min-width: 90px;
}
.debug-ui__value {
    color: #00bfff;
}
.debug-ui__bar {
    display: flex;
    gap: 2px;
    margin-top: 6px;
}
.debug-ui__cell {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
}
.debug-ui__cell.is-active {
    background: #00bfff;
}

/* デバッグ用セクションジャンプナビ（右上固定）。`debug.enabled` 時のみ DOM 生成。
   ボタンクリックで scrollY 瞬間ジャンプ。 */
.debug-nav {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    z-index: 9999;
    font-family: 'Input Mono', 'Menlo', monospace;
    font-size: 11px;
    min-width: 180px;
}
.debug-nav button {
    display: block;
    width: 100%;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    white-space: nowrap;
    transition:
        background-color 80ms ease,
        color 80ms ease,
        border-color 80ms ease;
}
.debug-nav button:hover {
    background: #00bfff;
    border-color: #00bfff;
    color: #000;
}

/* デバッグ UI 全体のトグル（D キーで切り替え）。`body.debug-hidden` で一括非表示。 */
body.debug-hidden .debug-ui,
body.debug-hidden .debug-nav {
    display: none;
}

/* TEMP（SP 未対応セクションの一時非表示）ブロックは全セクション SP 対応完了に伴い撤去。 */

/* ============================================================
   ローディングオーバーレイ (src/utils/u_loading.js が数値駆動・退場制御)
   青パネル(#0000ff)+白%カウンター。退場: 青パネル(数字ごと)が上方向へはける。
   ============================================================ */
.loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
}
/* 青背景 (二校FB: 白レイヤーは廃止)。ローディング進捗に合わせて opacity を 1→0 にフェードし、
   100% で完全に透明化して背後の FirstView(宇宙) を露出する (u_loading.js が opacity を駆動)。 */
.loading__bg {
    position: absolute;
    inset: 0;
    background: #0000ff;
    z-index: 1;
    /* 初期は不透明で全画面を覆い FOUC を防ぐ。opacity は JS が数値駆動 (transition 不要)。 */
}
/* 退場: 青が透明化し切った後、%カウンター/バーをフェードで消す (→ INTRO 開始)。 */
.loading--fade-out .loading__counter,
.loading--fade-out .loading__bar {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
/* %カウンター (左下・白)。 */
.loading__counter {
    position: absolute;
    left: 5vw;
    bottom: 5vh;
    z-index: 2;
    color: #ffffff;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 600;
    font-size: 9vw;
    line-height: 1;
    letter-spacing: 0.01em;
}
.loading__pct {
    font-size: 4vw;
    margin-left: 0.08em;
    vertical-align: baseline; /* 数字と % を下揃え (baseline) */
}
/* 最下部の進捗バー (白・左→右に伸びる)。太さは従来の 3 倍 (4px→12px)。 */
.loading__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 12px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 2;
}

/* ローディング退場後に下から立ち上がる青レイヤー (スクロール誘導を表示)。
   立ち上げ: u_loading が .intro-veil--shown を付与 → translateY(100%→0)。
   退場   : main.js が scrollY に応じて translateY を上方向へ + opacity をフェード (スクロール純関数)。 */
.intro-veil {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 255, 0.9);   /* 既定で少し透過 (背後の FirstView が僅かに透ける) */
    transform: translateY(100%);   /* 初期は画面下に隠す */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform, opacity;
}
.intro-veil--shown {
    transform: translateY(0);      /* 下から立ち上がる */
    transition: transform 0.7s cubic-bezier(0, 0.26, 0.04, 0.99);
}
/* スクロール誘導: ゆっくり回る「SCROLL DOWN」リング + 中央でバウンドするシェブロン (青地に白)。 */
.intro-veil__hint {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    transform-origin: center center;
    will-change: transform, opacity, filter; /* JS が先行ディゾルブ (滲み散り) を駆動 */
}
.intro-veil__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: intro-veil-spin 11s linear infinite;
}
.intro-veil__ring-text {
    fill: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}
@keyframes intro-veil-spin {
    to { transform: rotate(360deg); }
}
.intro-veil__chevron {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: intro-veil-chevron 1.6s ease-in-out infinite;
}
@keyframes intro-veil-chevron {
    0%, 100% { transform: translateY(-3px); opacity: 0.45; }
    50%      { transform: translateY(3px);  opacity: 1; }
}