/* ================================================================
   PHILOSOPHY PAGE
   /philosophy/ ページ固有のスタイル。共通の reset / tokens / base /
   layout / 共通コンポーネント (header, footer, breadcrumb, cta-v2 等)
   は style.css 側で定義済み。ここでは philosophy-hero とその内部の
   ダーク背景上のトーン上書きだけを持つ。
   style.css 冒頭で `@layer reset, tokens, base, layout, components,
   utilities;` の順が宣言されているので、本ファイルでも同じ
   `@layer components` に乗せて詳細度衝突を避ける。
   ================================================================ */
@layer components {

  /* ----------------------------------------------------------------
     PHILOSOPHY HERO + INTRO STAGE
     hero と philosophy-intro を共通 stage で wrap し、stage の sticky bg-wrap
     に hero 画像を持たせる。hero スクロール中も intro に入っても画像が画面上端に
     貼り付き続け、intro 自身は背景透過で hero bg をそのまま表示する。
     (craftsmanship-hero-stage と同パターン)
     ---------------------------------------------------------------- */
  .philosophy-hero-stage {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg-deep);
  }

  /* hero-stage の末尾を次セクション (philosophy-history の entry 開始時の
     ダーク色) と滑らかに繋ぐためのグラデーション overlay。
     absolute で stage 下端に貼り付け、 bg-wrap (z:0) と前面 content (z:1+)
     の間に置くことで hero 画像下部だけをダークへ落とす。
     hero-stage 中盤では viewport 外、末尾に近づくと viewport 下端に現れて
     画像→ダークの自然な転換を作る。 */
  .philosophy-hero-stage::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: clamp(10rem, 30dvh, 24rem);
    background-image: linear-gradient(to bottom, transparent, var(--color-bg-deep) 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* sticky bg-wrap (hero 画像)。stage 全体の containing block 内で sticky。
     bg1 / bg2 の 2 枚を ::before / ::after に乗せ、 12 秒サイクル (1 枚あたり 6 秒)
     でふわっと交互に重なるクロスフェードループを行う。 */
  .philosophy-hero-stage__bg-wrap {
    position: sticky;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100dvh;
    z-index: 0;
    background-color: var(--color-bg-deep);
    pointer-events: none;
  }

  /* 2 枚の画像レイヤー。 同じ位置に absolute で重ねて opacity でクロスフェード。
     ::before = bg1 (初期に表示)、 ::after = bg2 (フェードイン側)。 */
  .philosophy-hero-stage__bg-wrap::before,
  .philosophy-hero-stage__bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top right;
    pointer-events: none;
    /* opacity crossfade を GPU 合成レイヤーに promote。 Safari でスクロール中に
       compositor がレイヤーを作り直すコストを抑える。 */
    will-change: opacity;
  }

  .philosophy-hero-stage__bg-wrap::before {
    background-image: image-set(
      url(../../images/under-philosophy/under-philosophy-hero-bg1.webp) 1x,
      url(../../images/under-philosophy/under-philosophy-hero-bg1@2x.webp) 2x
    );
    animation: philosophy-hero-bg-fade-a 12s ease-in-out infinite;
  }

  .philosophy-hero-stage__bg-wrap::after {
    background-image: image-set(
      url(../../images/under-philosophy/under-philosophy-hero-bg2.webp) 1x,
      url(../../images/under-philosophy/under-philosophy-hero-bg2@2x.webp) 2x
    );
    animation: philosophy-hero-bg-fade-b 12s ease-in-out infinite;
  }

  @media (width < 1024px) {
    .philosophy-hero-stage__bg-wrap::before {
      background-image: image-set(
        url(../../images/under-philosophy/under-philosophy-hero-bg1-sp.webp) 1x,
        url(../../images/under-philosophy/under-philosophy-hero-bg1-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }

    .philosophy-hero-stage__bg-wrap::after {
      background-image: image-set(
        url(../../images/under-philosophy/under-philosophy-hero-bg2-sp.webp) 1x,
        url(../../images/under-philosophy/under-philosophy-hero-bg2-sp@2x.webp) 2x
      );
      background-position: center;
      background-size: cover;
    }
  }

  /* 12s サイクル: 3s ホールド + 3s フェード を 2 回繰り返す。
     0-25%  bg1 表示 (bg2 隠れ)
     25-50% bg1 → bg2 にクロスフェード (6 秒地点で完全切替)
     50-75% bg2 表示 (bg1 隠れ)
     75-100% bg2 → bg1 にクロスフェード (12 秒地点で初期状態に戻る)
     ::before と ::after は対称位相。 */
  @keyframes philosophy-hero-bg-fade-a {
    0%   { opacity: 1; }
    25%  { opacity: 1; }
    50%  { opacity: 0; }
    75%  { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes philosophy-hero-bg-fade-b {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-hero-stage__bg-wrap::before,
    .philosophy-hero-stage__bg-wrap::after {
      animation: none;
    }
    .philosophy-hero-stage__bg-wrap::after {
      opacity: 0;
    }
  }

  /* ----------------------------------------------------------------
     PHILOSOPHY HERO
     ページタイトル(EN) + サブタイトル(JP) + 右下タグラインを束ねた
     ヒーロー。背景は stage 側の bg-wrap に移譲、ここは透過。
     craftsmanship-hero と同じ grid (1fr auto) で heading を中央、tagline を
     右下に配置する。
     ---------------------------------------------------------------- */
  .philosophy-hero {
    background-color: transparent;
    position: relative;
    z-index: 1;
    /* stage の 1 番目の子である bg-wrap (100dvh) を打ち消して hero を stage の頭に揃える */
    margin-block-start: -100dvh;
    min-block-size: 80svh;
    /* 上端は固定ヘッダー回避用の余白。下端はコンテンツ末尾の呼吸スペース。 */
    padding-block: clamp(13rem, 24vw, 18rem) clamp(2.5rem, 5vw, 4.5rem);
    /* 行 1 (1fr) で heading を中央に置き、行 2 (auto) で tagline を bottom-right に固定。 */
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: clamp(2rem, 4vw, 4rem);
  }

  /* PC (>=1024) では 16:9 比率に固定。超ワイドでは 100svh で頭打ち。 */
  @media (width >= 1024px) {
    .philosophy-hero {
      min-block-size: min(56.25vw, 100svh);
    }
  }

  .philosophy-hero__heading {
    margin: 0;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
    padding-inline-start: 0;
    margin-block-end: clamp(3rem, 8vw, 8rem);
  }

  .philosophy-hero__title {
    font-family: var(--font-en);
    /* SP/TB (< 1024): 375 で 44px (min)、767 で ~60px、1023 で ~70px */
    font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  /* PC (1024~): 1024 で 70px、1280+ で 80px (max) を維持。独立に編集可能。 */
  @media (width >= 1024px) {
    .philosophy-hero__title {
      font-size: clamp(4.375rem, calc(1.9rem + 3.9vw), 5rem);
    }
  }

  /* hero title の mask + translate (intro / logic と同パターン) */
  .philosophy-hero__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .philosophy-hero__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .philosophy-hero__title.is-revealed .philosophy-hero__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-hero__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  .philosophy-hero__subtitle {
    font-family: var(--font-jp);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.4;
    color: oklch(0.88 0.01 70);
    margin: 0;
    margin-block-start: 1.0rem;
    /* 光学調整: 英字キャピタル(P)の左サイドベアリング分だけ和文を内側へ */
    padding-inline-start: 0.1rem;
  }

  /* 右下タグライン: grid 行 2 で bottom-right に固定 (craftsmanship-hero と同型)。 */
  .philosophy-hero__tagline {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.8;
    color: oklch(0.88 0.01 70);
    text-align: end;
    margin: 0;
    grid-row: 2;
    justify-self: end;
    padding-inline-end: clamp(1.5rem, 3vw, 4rem);
  }

  /* SP では tagline 非表示 */
  @media (width < 768px) {
    .philosophy-hero__tagline {
      display: none;
    }
  }

  /* ----------------------------------------------------------------
     PHILOSOPHY INTRO
     hero-stage の中のセクション。BG は stage 側 (sticky hero 画像) が
     持つので、ここでは透過。
     padding (block + inline) は craftsmanship-intro と揃えて section 側で
     持つ。 __inner は 80rem 中央寄せのみで、padding は持たない。
     これにより __body の x 軸位置が craftsmanship-intro__body と一致する。
     ---------------------------------------------------------------- */
  .philosophy-intro {
    position: relative;
    z-index: 1; /* stage の sticky bg-wrap (z:0) より前面 */
    overflow: clip;
    background-color: transparent;
    padding-block: clamp(5rem, 14vw, 11rem);
    padding-inline: clamp(1.5rem, 5vw, 3.75rem);
  }

  @media (width < 768px) {
    .philosophy-intro {
      /* SP padding を旧 1x の 1.5 倍に拡張 (375 で 45px、 767 で 114px)。
         下 padding は左右と同値に揃える (上 padding は base の clamp(5rem, 14vw, 11rem) を維持)。 */
      padding-inline: clamp(2.8125rem, calc(-1.305rem + 17.55vw), 7.125rem);
      padding-block-end: clamp(2.8125rem, calc(-1.305rem + 17.55vw), 7.125rem);
    }

    /* SP: hero-stage の sticky 背景画像が intro 区間にも引き続き映るため、本文が
       画像と重なって読みづらい。 intro が viewport に入るに従って黒オーバーレイを
       fade-in させて可読性を担保する。 ::before は .philosophy-intro
       (position: relative; z-index: 1) の stacking context 内、 __inner (z:2) より
       背面・ section の透明 bg より前面に置かれる。 */
    .philosophy-intro::before {
      content: "";
      position: absolute;
      inset: 0;
      /* hero 側との境を硬く割らないよう、 section 上端 6rem (=96px) だけ
         透明 → 50% 黒のグラデで繋ぎ、そこから下は 50% 黒の単色。 */
      background-image: linear-gradient(
        to bottom,
        oklch(0 0 0 / 0),
        oklch(0 0 0 / 0.5) 6rem
      );
      z-index: 0;
      pointer-events: none;
    }

    @supports (animation-timeline: view()) {
      .philosophy-intro::before {
        opacity: 0;
        animation: philosophy-intro-overlay-in linear forwards;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
      }

      @media (prefers-reduced-motion: reduce) {
        .philosophy-intro::before {
          opacity: 1;
          animation: none;
        }
      }
    }
  }

  @keyframes philosophy-intro-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* inner は __text (= body) を抱える単純なラッパ。
     padding は section 側 (.philosophy-intro) に移譲したので、ここでは
     幅制限 (80rem) と中央寄せのみ。
     hero-stage の sticky bg-wrap は hero 側の margin-block-start: -100dvh で
     打ち消し済みなので、intro は通常フローで hero の直後に続く。 */
  .philosophy-intro__inner {
    position: relative;
    z-index: 2;
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    text-align: start;
  }

  /* テキスト行: body のみを内包。
     justify-items: start で max-content サイズ、text-align: start で左詰め。
     craftsmanship-intro__text と同じ宣言。 */
  .philosophy-intro__text {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: start;
  }

  /* リード文の段落群。段落間の間隔はここで一元管理する。
     craftsmanship-intro__body と揃える。 max-inline-size で本文ブロック自体を絞り、
     __text の justify-items: start によって __inner (80rem 中央寄せ) の左寄りに配置。 */
  .philosophy-intro__body {
    display: grid;
    row-gap: clamp(1.25rem, 2.5vw, 1.75rem);
    max-inline-size: 50rem;
  }

  .philosophy-intro__lead {
    font-family: var(--font-jp);
    /* SP: 16px (1rem) */
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.2;
    color: oklch(0.92 0.005 70);
    text-wrap: wrap;
    max-inline-size: 38rem;
    margin: 0;
  }

  @media (width >= 768px) {
    .philosophy-intro__lead {
      /* TB / PC: 20px (1.25rem) */
      font-size: 1.25rem;
      /* TB / PC では __text と同じ幅まで広げる (= 折り返しを抑える) */
      max-inline-size: none;
    }
  }


  /* ================================================================
     PHILOSOPHY HISTORY
     明るめのオフホワイト背景。見出し左 / 本文右の 2 カラム。
     intro セクションのダーク動画背景と対比をつけて、読み物としての
     ストーリー区画にする。
     ================================================================ */
  .philosophy-history {
    position: relative;
    z-index: 1; /* stage の sticky bg-wrap (z:0) より前面で fade in する */
    /* top ページ craftsmanship セクションと同色 (#E2E1DA 相当) */
    background-color: oklch(0.909 0.009 100);
    color: oklch(0.25 0.005 70);
    padding-block: clamp(5rem, 14vw, 11rem);
    padding-inline: clamp(1.5rem, 5vw, 3.75rem);
  }

  /* PC (>=1024) のみ 下 padding を base の 1/2 に詰める。
     上は base の clamp(5rem, 14vw, 11rem) を維持。 */
  @media (width >= 1024px) {
    .philosophy-history {
      padding-block-end: clamp(3rem, 7vw, 5.5rem);
    }
  }

  /* scroll-driven animation 対応ブラウザでは、history 自身の view-timeline を使い、
     entry 100% (= history が viewport を埋め切った瞬間 = intro__inner が完全に画面外)
     から 25dvh スクロールするまでの間で bg を hero と同系の dark → 明色オフホワイト
     へ fade させる。 hero-stage を抜けた直後に history がダークから明るく転じる演出。
     同じ range で文字色も切り替える: bg が dark の間は白字、 bg が明色に到達した
     タイミングで通常のダーク字へスナップ (steps(1, end))。 これで bg 遷移中も
     文字が読めて、 終了後は通常のダーク文字に戻る。
     非対応ブラウザは上の static な background-color / color (即 opaque オフホワイト
     × ダーク文字) にフォールバック。 */
  @supports (animation-timeline: view()) {
    .philosophy-history {
      background-color: var(--color-bg-deep);
      color: oklch(0.98 0 0); /* アニメ発火前 (entry 中) も白字を確保 */
      /* 子孫要素 (__title / __title-en / __chapter p) からこの view-timeline を
         参照できるよう名前を公開する。 */
      view-timeline-name: --philosophy-history-tl;
      animation:
        philosophy-history-bg-in linear forwards,
        philosophy-history-color-in steps(1, end) forwards;
      animation-timeline: --philosophy-history-tl;
      animation-range: entry 100% contain 25dvh;
    }

    /* color を個別に上書きしている子要素 (__title / __title-en / __chapter p) は、
       static rule がこの @supports よりソース順で後ろにあるため、ここで color を
       上書きしてもソース順で負ける。 そのため static rule の後 (philosophy-history
       __chapter p 宣言の直後) にもう一度 @supports を置いて color/animation を
       上書きしている。 */
  }

  @keyframes philosophy-history-bg-in {
    from { background-color: var(--color-bg-deep); }
    to   { background-color: oklch(0.909 0.009 100); }
  }

  /* 文字色は steps(1, end) で「end でだけ値が切り替わる」 挙動にする。
     animation 中は from の白字を維持し、 animation 完了 (= bg が明色に到達)
     と同時に to のダーク字へスナップする。 forwards で完了後も維持。
     親 (.philosophy-history) の継承用 default keyframes と、 個別 color を
     持つ子要素 (__title / __title-en / __chapter p) 用のそれぞれ。 */
  @keyframes philosophy-history-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.25 0.005 70); }
  }

  @keyframes philosophy-history-title-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.2 0.005 70); }
  }

  @keyframes philosophy-history-title-en-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.45 0.008 70); }
  }

  @keyframes philosophy-history-chapter-color-in {
    from { color: oklch(0.98 0 0); }
    to   { color: oklch(0.28 0.005 70); }
  }

  /* hero-stage と history を縦断するアクセント画像。
     philosophy-history (z:1) の中に置き、 absolute で section の top-right
     を基準に translate -50% で自身の半分を上方へ押し出す。
     philosophy-history > philosophy-hero-stage (z:auto) なので画像は hero
     画像と ::after グラデの上に重なる。 bg fade-in は <img> の見た目に
     影響しない。 */
  .philosophy-history__bridge-image {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: clamp(2rem, 6vw, 6rem);
    inline-size: clamp(8rem, 18vw, 18rem);
    translate: 0 -50%;
    z-index: 1;
    margin: 0;
    pointer-events: none;
  }

  .philosophy-history__bridge-image img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* SP (<768): bridge image は装飾要素のため非表示。
     狭い viewport ではレイアウトを圧迫しがちなので消す。 */
  @media (width < 1024px) {
    .philosophy-history__bridge-image {
      display: none;
    }
  }

  .philosophy-history__inner {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: clamp(2rem, 5vw, 4rem);
  }

  /* PC (>=1024): 2 カラムレイアウト。TB 以下は base の 1fr (= SP-like) を維持。 */
  @media (width >= 1024px) {
    .philosophy-history__inner {
      grid-template-columns: 1fr 1.6fr;
      /* 1024 で約 5rem、徐々に 12rem 最大値へ */
      column-gap: clamp(5rem, 8vw, 12rem);
    }
  }

  /* TB (768-1023): SP-like レイアウトのまま、コンテンツ max 幅を 800px (50rem) に */
  @media (width >= 768px) and (width < 1024px) {
    .philosophy-history__inner {
      max-inline-size: 50rem;
    }
  }

  /* SP + TB (<1024) で row-gap を広めに (history は TB も SP-like) */
  @media (width < 1024px) {
    .philosophy-history__inner {
      row-gap: clamp(4.5rem, 11vw, 7rem);
    }
  }

  /* __heading 直後の SP/TB 専用画像。 PC では非表示 (左カラムの sticky 画像が代替)。
     SP では 3 枚 (history1/2/3) が absolute レイヤーで重なって右からスライドインする
     ループアニメーション (craftsmanship-leather__detail-image と同ロジック、3 枚版)。
     TB では layer 1 のみ表示 (従来通り単一画像)。 */
  .philosophy-history__heading-image {
    display: none;
  }

  @media (width < 1024px) {
    .philosophy-history__heading-image {
      display: block;
      margin: 0 auto;
      inline-size: 80%;
      max-inline-size: 22rem;
    }

    .philosophy-history__heading-image-layer {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }
  }

  /* SP + TB (<1024): 3 枚スタックループ。 leather と同じ slidein + step-end zindex ロジックを
     3 枚版に拡張 (cycle 15s、 1/3 ずつズラす delay 0 / -10s / -5s でスライド順を 1→2→3 に)。
     1 周内訳 (各 layer の own cycle 視点):
       0-10%     右画面外 (z 1)
       10-20%    右外 → 中央へスライドイン (z 3 = 最高)
       20-43.33% 中央固定 (z 3 = 最新)
       43.33-76.67% 中央固定 (z 2 = 次の layer に上書きされた)
       76.67-100%   中央固定 (z 1 = さらに次に上書きされ最下層、 100% で右外へ snap)
     z=2/z=1 への drop タイミングは「次の layer が slidein を始める瞬間」と一致させる。
     1/3 オフセットなので 10% + 33.33% = 43.33%、 + 33.33% = 76.67%。
     これが揃わないと source-order tiebreak で前の layer が z=3 のまま居続け、
     新しい layer の slidein が見えない瞬間が発生する。 */
  @media (width < 1024px) {
    .philosophy-history__heading-image {
      position: relative;
      aspect-ratio: 700 / 900;
      overflow: hidden;
    }

    .philosophy-history__heading-image-layer {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    .philosophy-history__heading-image-layer[data-layer="1"] {
      animation:
        history-heading-slidein 15s ease-in-out infinite,
        history-heading-zindex 15s step-end infinite;
      animation-delay: 0s, 0s;
    }

    .philosophy-history__heading-image-layer[data-layer="2"] {
      animation:
        history-heading-slidein 15s ease-in-out infinite,
        history-heading-zindex 15s step-end infinite;
      animation-delay: -10s, -10s;
    }

    .philosophy-history__heading-image-layer[data-layer="3"] {
      animation:
        history-heading-slidein 15s ease-in-out infinite,
        history-heading-zindex 15s step-end infinite;
      animation-delay: -5s, -5s;
    }
  }

  @keyframes history-heading-slidein {
    0%   { transform: translateX(100%); }
    10%  { transform: translateX(100%); }
    20%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }

  @keyframes history-heading-zindex {
    0%      { z-index: 1; }
    10%     { z-index: 3; }
    43.33%  { z-index: 2; }
    76.67%  { z-index: 1; }
    100%    { z-index: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-history__heading-image-layer {
      animation: none;
      transform: translateX(0);
    }
    .philosophy-history__heading-image-layer[data-layer="2"],
    .philosophy-history__heading-image-layer[data-layer="3"] {
      opacity: 0;
    }
  }

  /* 左カラム: sticky で viewport 中央に常駐する 100dvh のステージ。
     セクション内 (= grid 行) をスクロールしている間、画像が画面中央に固定される。 */
  .philosophy-history__images {
    position: sticky;
    inset-block-start: 0;
    block-size: 100dvh;
    display: grid;
    place-items: center;
  }

  /* sticky ステージ内の画像コンテナ。position: relative で --2 の絶対配置の基準にする。 */
  .philosophy-history__images-inner {
    position: relative;
    inline-size: 100%;
  }

  .philosophy-history__image {
    display: block;
    margin: 0;
  }

  .philosophy-history__image img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* 2 枚目: 1 枚目の左下にずらして小さめに配置。
     inset で 1 枚目の境界よりやや外側へはみ出させる。 */
  .philosophy-history__image--2 {
    position: absolute;
    inline-size: 55%;
    inset-inline-start: clamp(-6rem, -8vw, -2rem);
    inset-block-end: clamp(-6rem, -8vw, -2rem);
  }

  /* SP + TB (<1024): __images (sticky 左カラム) は SP/TB では使わない。
     代わりに __heading の直後に置いた __heading-image を表示するため、
     __images 全体を非表示にする。 base 宣言 (display: grid) の後で
     cascade で確実に勝たせるため、 ここに display: none を置く。 */
  @media (width < 1024px) {
    .philosophy-history__images {
      display: none;
    }
    .philosophy-history__image--2 {
      display: none;
    }
  }

  /* 全幅で 1 カラム。h2 と本文を縦並びにする (画像との左右並びは外側コンテナで作る想定)。 */
  .philosophy-history__text {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: clamp(3rem, 8vw, 6rem);
  }

  /* PC (>=1024): 左カラムの sticky 画像が viewport 中央に来た時、
     h2 の上端が画像の上端あたりに揃うように padding-block-start で下げる。TB 以下は不要。 */
  @media (width >= 1024px) {
    .philosophy-history__text {
      padding-block-start: 38dvh;
    }
  }

  /* SP + TB (<1024) で row-gap を intro に揃える */
  @media (width < 1024px) {
    .philosophy-history__text {
      row-gap: 4rem;
    }
  }

  /* PC (1024~): 1024 で約 28rem (448px)、1920+ で 43rem (688px) の現状 max に到達する fluid。
     1.6fr セル内に max-inline-size で囲い込み、テキストブロックが必要以上に広がらないようにする。
     1920 付近で全体 (heading + chapters + body-image) を +40px (2.5rem) 右にずらす微調整。
     - 1600 で 0, 1920 で 2.5rem に到達、 1920+ で 2.5rem 固定 (clamp で打ち切り)
     - __body-image は __text 内の子孫 (__body の grid item) なので、 __text の
       translate だけで body-image も一緒に右へシフトする */
  @media (width >= 1024px) {
    .philosophy-history__text {
      max-inline-size: clamp(28rem, calc(10.9rem + 27vw), 43rem);
      translate: clamp(0rem, calc(12.5vw - 12.5rem), 2.5rem) 0;
    }
  }

  /* PC narrow (1024~1279) では grid 比率を 1.1fr 1.4fr に。
     fr は clamp で書けないのでブレイクポイント分けが必要だが、それ以外の位置は下の fluid で吸収。 */
  @media (width >= 1024px) and (width < 1280px) {
    .philosophy-history__inner {
      grid-template-columns: 1.1fr 1.4fr;
    }
  }

  /* PC (1024~) の image--2 と body-image の位置を fluid clamp で連続変化。
     ブレイクポイント追加なしで 1024 と 1280+ を滑らかに繋げる。 */
  @media (width >= 1024px) {
    .philosophy-history__image--2 {
      /* X: 1024 で -2rem、1280 で -4rem (history1 と左揃いを避けて少し外へ extend)、1600+ で -6rem (元の base)。 */
      inset-inline-start: clamp(-6rem, calc(-12.5vw + 6rem), -2rem);
      /* Y: 1024 で -2rem (上寄り)、1280 で -6rem (元の base 値) に到達。 */
      inset-block-end: clamp(-6rem, calc(-25vw + 14rem), -2rem);
    }
    .philosophy-history__body-image {
      /* X: 1024 で 5rem、1920 で 12rem (max) に到達する fluid (linear)。 */
      translate: clamp(5rem, calc(12.5vw - 3rem), 12rem) 0;
    }
  }

  /* hgroup: h2 と英字を 1 セルにまとめる */
  .philosophy-history__heading {
    margin: 0;
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* font-size は intro と同じく SP/TB/PC で 3 段ステップ */
  .philosophy-history__title {
    font-family: var(--font-jp);
    /* SP (~767): 375 で 24px、767 で 30px の fluid */
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.8;
    color: oklch(0.2 0.005 70);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  /* SP + TB (<1024): text-wrap: balance が短いセルで無理に折り返すのを防ぐ */
  @media (width < 1024px) {
    .philosophy-history__title {
      text-wrap: pretty;
    }
  }

  /* h2 各行の mask + translate (hero と同パターン) */
  .philosophy-history__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .philosophy-history__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .philosophy-history__title.is-revealed .philosophy-history__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .philosophy-history__title.is-revealed .philosophy-history__title-line:nth-child(2) > span {
    transition-delay: 0.15s;
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-history__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  /* TB は base の SP fluid (24-30px) を継続。PC でステップアップ。 */
  @media (width >= 1024px) {
    .philosophy-history__title {
      /* PC (1024~): 1024px で 30px、1440px で 36px (max) に到達する fluid */
      font-size: clamp(1.875rem, 0.95rem + 1.44vw, 2.25rem);
    }
  }

  .philosophy-history__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(0.45 0.008 70);
    margin: 0;
    margin-inline-end: -0.2em;
  }

  /* TB は base の 13px を継続。PC でステップアップ。 */
  @media (width >= 1024px) {
    .philosophy-history__title-en {
      font-size: 1rem;
    }
  }

  /* 本文: 章ごとの 3 セットに分割。章と章の間は大きめの gap、章内の段落間は narrow。 */
  .philosophy-history__body {
    display: grid;
    /* logic__detail-body と揃える。 history は __body > __chapter > p 構造で
       chapter が p1つだけのラッパー扱いになっているので、 ここの gap が
       段落間距離として効く。 */
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  .philosophy-history__chapter {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* SP + TB (<1024): chapter 本文内の <br> による改行を無効化して、 自然な折り返しに任せる。 */
  @media (width < 1024px) {
    .philosophy-history__chapter br {
      display: none;
    }
  }

  .philosophy-history__chapter p {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.2;
    color: oklch(0.28 0.005 70);
    /* Safari で text-wrap: pretty (global p) が block 幅を意図せず縮めるので上書き。 */
    text-wrap: wrap;
    margin: 0;
  }

  /* color を個別に上書きしている子要素は親の color (白字) を継承しないので、
     各々に同じ steps(1, end) 挙動を持たせて、 bg 遷移完了の瞬間に元のデザ
     イン色 (0.2 / 0.45 / 0.28) へスナップさせる。 animation-timeline は親と
     同じ --philosophy-history-tl を参照することで全テキストが同タイミングで
     スナップする。 ソース順で static rule (上の __title / __title-en /
     __chapter p) より後ろに置くことで初期 white を確実に勝たせる。 */
  @supports (animation-timeline: view()) {
    .philosophy-history__title,
    .philosophy-history__title-en,
    .philosophy-history__chapter p {
      color: oklch(0.98 0 0);
      animation-timing-function: steps(1, end);
      animation-fill-mode: forwards;
      animation-timeline: --philosophy-history-tl;
      animation-range: entry 100% contain 25dvh;
    }

    .philosophy-history__title {
      animation-name: philosophy-history-title-color-in;
    }
    .philosophy-history__title-en {
      animation-name: philosophy-history-title-en-color-in;
    }
    .philosophy-history__chapter p {
      animation-name: philosophy-history-chapter-color-in;
    }
  }

  /* 本文末尾の右下に置く小さめの画像。
     __body は 1 カラム grid なので justify-self: end で右寄せ、
     さらに translate で grid 範囲より右に少しはみ出させて「より右」に置く。 */
  .philosophy-history__body-image {
    display: block;
    margin: 0;
    /* GSAP parallax の transform と分離するため Y は margin-block-start で。X は translate のまま */
    margin-block-start: clamp(2rem, 4vw, 4rem);
    justify-self: end;
    inline-size: 50%;
    max-inline-size: 20rem;
    translate: clamp(4rem, 8vw, 9rem) 0;
  }

  .philosophy-history__body-image img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* SP + TB (<1024): history3 は中央寄せ、translate も解除、上余白を広げて下へ */
  @media (width < 1024px) {
    .philosophy-history__body-image {
      justify-self: center;
      translate: 0;
      margin-block-start: 4rem;
    }
  }

  /* base: wrap は display: contents で body grid に消えるので、 PC/TB の挙動は
     これまでと変わらない。 __body-image-sp は SP 以外では非表示。 */
  .philosophy-history__body-image-wrap {
    display: contents;
  }

  .philosophy-history__body-image-sp {
    display: none;
  }

  /* SP + TB (<1024): __body-image-wrap は丸ごと非表示 (history2 + history3 の旧 2 列レイアウトは廃止)。
     代わりに __heading-image が 3 枚スライドのループで history1/2/3 を見せる。 */
  @media (width < 1024px) {
    .philosophy-history__body-image-wrap {
      display: none;
    }
  }

  /* SP + TB (<1024): body 末尾に bridge-image (intro3) を中央配置で表示。
     PC では bridge-image 自体が hero-stage の上に absolute で出ているため重複しないよう
     SP/TB 限定。 __heading-image (80% / max 22rem) より一回り小さめに。 */
  .philosophy-history__body-foot-image {
    display: none;
  }

  @media (width < 1024px) {
    .philosophy-history__body-foot-image {
      display: block;
      margin: clamp(2.5rem, 6vw, 4rem) auto 0;
      inline-size: 60%;
      max-inline-size: 17rem;
    }

    .philosophy-history__body-foot-image img {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }
  }


  /* ================================================================
     PHILOSOPHY LOGIC (引き算の美学)
     PC では section の sticky 背景レイヤー (::before) として bg 画像を持つ。
     section 上端 (padding box top) が viewport 上端に達した瞬間に画像が
     画面上部に貼り付き、__inner / __details はその上を流れる。
     画像は alpha 付きなので、透過部分は section の background-color
     (scroll-driven で off-white → 暖グレーへ fade) が透けて見える。
     ================================================================ */
  .philosophy-logic {
    position: relative;
    z-index: 1; /* stage の sticky bg-wrap (z:0) より前面で表示 */
    /* 直前の philosophy-history の最終色 (= top craftsmanship と同じ #E2E1DA 相当) と揃える */
    background-color: oklch(0.909 0.009 100);
    color: oklch(0.25 0.005 70);
    /* 上は heading の上余白。下は subtraction (full-bleed dark area) の
       padding-block-end が担うので 0。 */
    padding-block: clamp(5rem, 14vw, 11rem) 0;
    padding-inline: clamp(1.5rem, 5vw, 3.75rem);
  }

  /* PC (>=1024) では上 padding を base の 1/2 に詰める */
  @media (width >= 1024px) {
    .philosophy-logic {
      padding-block-start: clamp(3rem, 7vw, 5.5rem);
    }
  }

  /* SP + TB (<1024) は上 padding を 0 に */
  @media (width < 1024px) {
    .philosophy-logic {
      padding-block-start: 0;
    }
  }

  /* SP (<768): history / logic / logic__subtraction の横 padding を統一して
     fluid 化。全 base 宣言の後に置くことで、カスケードで確実に上書きする。
     375 で 24px → 767 で ~76px (= base 値の約 2倍)。
     philosophy-intro は section 側 (.philosophy-intro) が SP padding を持つ
     ので、 __inner には padding-inline を当てない。 */
  @media (width < 768px) {
    .philosophy-history,
    .philosophy-logic,
    .philosophy-logic__subtraction {
      padding-inline: clamp(1.875rem, calc(-0.87rem + 11.7vw), 4.75rem);
    }
  }

  /* PC narrow (1024~1279): intro / logic / logic__subtraction の横 padding を 1.5x に広げて
     窮屈さを和らげる。
     base: clamp(1.5rem, 5vw, 3.75rem) → 1024 で 51.2px、1200+ で 60px (cap)。
     1.5x: clamp(2.25rem, 7.5vw, 5.625rem) → 1024 で 76.8px、1200+ で 90px (cap)。
     subtraction も含めることで、 subtraction 内に置いた heading の左端が
     intro__body の左端と揃う。
     intro / logic / subtraction 全てのベース宣言より後に置いて、カスケードで確実に上書きする。 */
  @media (width >= 1024px) and (width < 1280px) {
    .philosophy-intro,
    .philosophy-logic,
    .philosophy-logic__subtraction {
      padding-inline: clamp(2.25rem, 7.5vw, 5.625rem);
    }
  }

  .philosophy-logic__inner {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    display: grid;
    row-gap: clamp(3rem, 8vw, 6rem);
    text-align: center;
  }

  /* ================================================================
     PHILOSOPHY LOGIC SUBTRACTION
     __points (3円) + __details (本文) を包む full-bleed のダーク領域。
     section の padding を超えて viewport 幅まで張り、内側にもう一度
     padding-inline を設けて content を中央寄せする。
     ::before に旧 subtraction-bg 画像を sticky で持たせ、 entry に合わせて
     opacity fade-in させる (philosophy-intro / craftsmanship-intro と同パターン)。
     ================================================================ */
  .philosophy-logic__subtraction {
    position: relative;
    isolation: isolate; /* ::before の z-index: -1 を内側に閉じ込める */
    /* full-bleed: section の padding-inline を打ち消して viewport 幅に展開 */
    margin-inline: calc(50% - 50vw);
    inline-size: 100vw;
    /* bg1 / bg2 の 2 枚 sticky レイヤーが常時 subtraction を覆うので、 sticky
       終了後の "白い空白" 問題は解消。 base bg-color は philosophy-logic と同色
       (#E2E1DA 相当) — clip-path expand 中の左右の帯にもこの色が見える。 */
    background-color: oklch(0.909 0.009 100);
    color: oklch(0.95 0.005 70);
    padding-block: clamp(5rem, 14vw, 11rem);
    padding-inline: clamp(1.5rem, 5vw, 3.75rem);
    overflow: clip; /* viewport 幅まで張る ::before を閉じ込める */
    /* heading → __details を縦に積む grid。
       row-gap は使わない (::before が row 1 を占めるため row-gap が h2 上の
       gap として見えてしまう問題を回避)。 heading → details-wrap の縦間隔は
       __details-wrap 側の margin-block-start で持つ。 */
    display: grid;
    /* ::before fade-in 用 view-timeline を公開 */
    view-timeline-name: --logic-subtraction-tl;
    view-timeline-axis: block;
  }

  /* SP padding-inline 再設定:
     前方 (line ~839) の共通 SP override は subtraction の base 宣言より前にあって
     カスケードで負けてしまうため、ここで base の後に再宣言して history と揃える。
     375 で 30px → 767 で 76px (history と同値)。 */
  @media (width < 768px) {
    .philosophy-logic__subtraction {
      padding-inline: clamp(1.875rem, calc(-0.87rem + 11.7vw), 4.75rem);
    }
  }

  /* sticky 背景レイヤー (旧 .philosophy-logic::before と同じパターン)。
     subtraction wrapper の padding-block-start の下端が viewport 上端に達した
     瞬間に sticky 起動 → 画像が画面上端に貼り付き、 __points / __details は
     その上を流れる。
     SP/TB base = 縦構図 768×1284 の SP 専用画像。
     PC (>=1024) = 横構図 1920×1284 の PC 用画像に切り替え。
     block-size は画像の縦横比から算出。
     inline-size: 100vw + margin-inline: calc(50% - 50vw) で wrapper の padding を
     打ち消して viewport 端まで届かせる (これで clip-path expand の end が両端に到達)。
     margin-block-{start,end} で block 方向の flow 寄与を 0 に均す。 */
  /* bg1 / bg2 を ::before / ::after に乗せて、 hero と同じく 12s サイクル
     (3s ホールド + 3s フェードを 2 回) のクロスフェードループ。
     ::before と ::after は同じ grid セル (row 1) に重ねて配置し、 opacity を
     対称位相で animate することで切り替える。
     scroll-driven の clip-path expand 演出は両方に適用 (entry 0% → 100%)。
     block-size は 250dvh と十分大きく取り、 subtraction が縦に伸びても dark
     な bg-color が常に下までカバーするようにする。 画像は top に固定アスペクト
     (background-size: 100% auto + position: top) で配置し、 残り (画像より下) は
     ::before/::after の dark bg-color で埋まる。 */
  .philosophy-logic__subtraction::before,
  .philosophy-logic__subtraction::after {
    content: "";
    display: block;
    position: sticky;
    inset-block-start: 0;
    /* heading / details-wrap と独立して row 1 に重ねる */
    grid-row: 1;
    grid-column: 1;
    block-size: 250dvh;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block-start: calc(-1 * clamp(5rem, 14vw, 11rem));
    margin-block-end: calc(clamp(5rem, 14vw, 11rem) - 250dvh);
    background-color: var(--color-bg-deep);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    z-index: -1;
    pointer-events: none;
  }

  /* ::before は常時表示 (opacity 1 固定)。 dark bg-color + bg1 を一枚の安定したベースに。
     ::after だけ opacity を toggle して bg2 を被せる形にすることで、 crossfade 中に
     dark が薄まる (= 背後の subtraction の white bg-color が透ける) のを防ぐ。 */
  .philosophy-logic__subtraction::before {
    background-image: image-set(
      url(../../images/under-philosophy/under-philosophy-subtraction-bg1-sp.webp) 1x,
      url(../../images/under-philosophy/under-philosophy-subtraction-bg1-sp@2x.webp) 2x
    );
  }

  .philosophy-logic__subtraction::after {
    background-image: image-set(
      url(../../images/under-philosophy/under-philosophy-subtraction-bg2-sp.webp) 1x,
      url(../../images/under-philosophy/under-philosophy-subtraction-bg2-sp@2x.webp) 2x
    );
    /* bg2 が透過のとき ::before の bg1 + dark を見せるため、 dark bg-color はここでは不要 */
    background-color: transparent;
    animation: philosophy-logic-subtraction-bg2-toggle 12s ease-in-out infinite;
    /* opacity toggle を GPU 合成レイヤーに promote (Safari スクロール時の repaint 抑制) */
    will-change: opacity;
  }

  /* PC (1024~): 横構図画像 (1920×1284) に切り替え。block-size と margin-block-end も再計算。
     100vw × (1284/1920) ≈ 66.875vw。 */
  @media (width >= 1024px) {
    .philosophy-logic__subtraction::before {
      background-image: image-set(
        url(../../images/under-philosophy/under-philosophy-subtraction-bg1.webp) 1x,
        url(../../images/under-philosophy/under-philosophy-subtraction-bg1@2x.webp) 2x
      );
    }

    .philosophy-logic__subtraction::after {
      background-image: image-set(
        url(../../images/under-philosophy/under-philosophy-subtraction-bg2.webp) 1x,
        url(../../images/under-philosophy/under-philosophy-subtraction-bg2@2x.webp) 2x
      );
    }
  }

  /* scroll-driven 対応ブラウザでは clip-path expand を入れる。
     ::before は時間ベース animation は持たず clip-path expand のみ (constant opacity)。
     ::after は時間ベースの toggle (bg2 を被せる/離す) と clip-path expand を多重指定し、
     animation-timeline / -range を個別指定して共存させる。
     range は entry 50% まで = section 上端が画面中央に来た時点で開ききる
     (top ページの craftmanship-bg-window と同じタイミング)。 */
  @supports (animation-timeline: --t) {
    .philosophy-logic__subtraction::before {
      clip-path: inset(0 clamp(2rem, 12vw, 12rem));
      animation-name: philosophy-logic-bg-expand;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-timeline: --logic-subtraction-tl;
      animation-range: entry 0% entry 50%;
    }

    .philosophy-logic__subtraction::after {
      clip-path: inset(0 clamp(2rem, 12vw, 12rem));
      animation-name: philosophy-logic-subtraction-bg2-toggle, philosophy-logic-bg-expand;
      animation-duration: 12s, 1s;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, forwards;
      animation-timeline: auto, --logic-subtraction-tl;
      animation-range: normal, entry 0% entry 50%;
    }
  }

  /* 12s サイクルで bg2 (::after) を toggle する:
     0-25%   bg2 隠れ (opacity 0) → ::before の bg1 + dark が見えてる
     25-50%  bg2 が ::before の上に fade-in (25-50% で完全に被せ切る)
     50-75%  bg2 表示 (opacity 1)
     75-100% bg2 fade-out して ::before の bg1 を再表示
     ::before は常時 opacity 1 なので dark backdrop は絶対に薄まらない。 */
  @keyframes philosophy-logic-subtraction-bg2-toggle {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes philosophy-logic-bg-expand {
    from { clip-path: inset(0 clamp(2rem, 12vw, 12rem)); }
    to   { clip-path: inset(0 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-logic__subtraction::before,
    .philosophy-logic__subtraction::after {
      animation: none;
      /* @supports 側で宣言された inset(0 12rem) が animation 停止で固定化されないよう解除 */
      clip-path: none;
    }
    .philosophy-logic__subtraction::after {
      opacity: 0;
    }
  }

  /* hgroup: h2 と英字あしらいを 1 セルにまとめる (intro と同じ) */
  .philosophy-logic__heading {
    margin: 0;
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* h2: intro セクションと同じデザイン (24/32/(36→40 fluid) px、weight 600) */
  .philosophy-logic__title {
    font-family: var(--font-jp);
    /* SP (~767): 375 で 24px、767 で 30px の fluid */
    font-size: clamp(1.625rem, calc(1.27rem + 1.53vw), 2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.7;
    color: oklch(0.2 0.005 70);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  /* h2 各行の mask + translate (hero と同パターン) */
  .philosophy-logic__title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .philosophy-logic__title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .philosophy-logic__title.is-revealed .philosophy-logic__title-line > span {
    transform: translate3d(0, 0, 0);
  }

  .philosophy-logic__title.is-revealed .philosophy-logic__title-line:nth-child(2) > span {
    transition-delay: 0.15s;
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-logic__title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  /* SP (<768): 他 h2 と揃えて 26-32px。 text-wrap: balance だとネストした __title-line
     と相性が悪いので pretty に切替。
     注: 26px では "クニスタインを形成する、" (12 字 + letter-spacing 0.16em) が
     subtraction の SP padding 込み幅 (~315px @375) を超えるので 2 行折り返しが発生する。
     不格好なら font-size を独自に下げるか、 タイトル文言の改行位置を調整。 */
  @media (width < 768px) {
    .philosophy-logic__title {
      text-wrap: pretty;
    }
  }

  @media (width >= 768px) {
    .philosophy-logic__title {
      font-size: 2rem; /* 32px — TB (768~1023) */
    }
  }

  @media (width >= 1024px) {
    .philosophy-logic__title {
      /* PC (1024~): 1024px で 30px、1440px で 40px (max) に到達する fluid */
      font-size: clamp(1.875rem, 0.34rem + 2.4vw, 2.5rem);
    }
  }

  /* h2 下の英字あしらい (intro と同じ設定。ただし中央揃えなので光学調整の margin は外す) */
  .philosophy-logic__title-en {
    font-family: var(--font-en);
    font-size: 0.8125rem; /* 13px */
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: oklch(0.45 0.008 70);
    margin: 0;
    /* letter-spacing 末尾分の左方向への寄りを相殺してビジュアル中央へ */
    padding-inline-start: 0.2em;
    text-transform: none;
  }

  @media (width >= 768px) {
    .philosophy-logic__title-en {
      font-size: 0.875rem;
    }
  }

  @media (width >= 1024px) {
    .philosophy-logic__title-en {
      font-size: 1rem;
    }
  }

  /* heading をテキスト左詰めに。
     title / title-en の左端を philosophy-intro__body の左端に揃える。
     title-en の center 用光学調整 (padding-inline-start: 0.2em) も解除。 */
  .philosophy-logic__heading {
    text-align: start;
  }

  .philosophy-logic__heading .philosophy-logic__title-en {
    padding-inline-start: 0;
  }

  /* heading が subtraction の中にある場合の補正:
     1) subtraction は full-bleed (100vw)。 heading をそのまま置くと左端が
        subtraction の padding-inline 端 (= viewport - padding) になり、
        80rem cap で中央寄せされる __details / intro__body の左端と PC 広域で
        ずれる。 inline-size: min(100%, 80rem) + margin-inline: auto で
        __details と同じ x 範囲に収める。
     2) title / title-en は subtraction の dark sticky bg 上に来るので、
        元の dark color では読めない。 light color に切り替える。 */
  .philosophy-logic__subtraction .philosophy-logic__heading {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
  }

  .philosophy-logic__subtraction .philosophy-logic__title {
    color: oklch(0.98 0 0);
  }

  .philosophy-logic__subtraction .philosophy-logic__title-en {
    color: oklch(0.85 0.005 70);
  }

  /* details を取り囲む 2 カラム wrap。 PC では左に装飾画像、右に __details。
     80rem 中央寄せ枠は wrap 側に移譲した (__details からは外す)。
     align-items: start で 左カラム (画像) の上面と 右カラム (__details) の
     上面を揃える。
     subtraction の row-gap を捨てた代わりに、 heading → details-wrap の
     縦間隔はこの margin-block-start で持つ。 */
  .philosophy-logic__details-wrap {
    inline-size: min(100%, 80rem);
    margin-inline: auto;
    margin-block-start: clamp(4rem, 8vw, 7rem);
    display: grid;
    grid-template-columns: 1fr;
  }

  @media (width >= 1024px) {
    .philosophy-logic__details-wrap {
      /* col 1 (空) をさらに縮めて、本文セル (__details) に多めの横幅を渡す。 */
      grid-template-columns: 1fr 4fr;
      column-gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }
  }

  /* TB (768-1023): subtraction の content (heading / details-wrap) を 50rem に絞り、
     philosophy-history__inner と同じ最大幅にする。 */
  @media (width >= 768px) and (width < 1024px) {
    .philosophy-logic__subtraction .philosophy-logic__heading,
    .philosophy-logic__details-wrap {
      inline-size: min(100%, 50rem);
    }
  }

  /* h3 + 本文の 2 カラム詳細セクション。各 detail 間は border-top で区切る。
     PC では wrap の grid 右カラム (col 2) に明示配置することで、画像 (col 1) を
     消した後もテキストの x 位置と横幅を変えずに維持する。 col 1 は空のまま。
     80rem の幅キャップは wrap 側が持つ。
     上下 border は detail 間 divider と同色・同間隔で揃える。 */
  .philosophy-logic__details {
    inline-size: 100%;
    border-block: 1px solid oklch(0.98 0 0 / 0.2);
    padding-block: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  @media (width >= 1024px) {
    .philosophy-logic__details {
      grid-column: 2;
    }
  }

  /* 縦並び固定: heading (h3) の下に body を縦に積む。
     全ブレイクポイントで 1 カラム。 */
  .philosophy-logic__detail {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: clamp(1.25rem, 2.5vw, 2rem);
  }

  /* セット間の区切り線 (一番上の detail には付かない) */
  .philosophy-logic__detail + .philosophy-logic__detail {
    border-block-start: 1px solid oklch(0.98 0 0 / 0.2);
    margin-block-start: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-block-start: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  /* SP (~767): 線とテキストの間隔は SP 用に少し広めに上書き。
     __details の外側 padding-block も同じ値で揃える。 */
  @media (width < 768px) {
    .philosophy-logic__detail + .philosophy-logic__detail {
      margin-block-start: 2.5rem;
      padding-block-start: 2.5rem;
    }
    .philosophy-logic__details {
      padding-block: 2.5rem;
    }
  }

  /* PC (>=1024): base の clamp(1.25rem, 2.5vw, 2.5rem) だと 1024 付近で 25.6px と
     詰まり気味に感じるので min を 1.875rem (30px) に引き上げる。 1200+ で 2.5vw が
     min を追い抜いて自然に成長、 1600+ で 2.5rem max に到達。 */
  @media (width >= 1024px) {
    .philosophy-logic__detail + .philosophy-logic__detail {
      margin-block-start: clamp(1.875rem, 2.5vw, 2.5rem);
      padding-block-start: clamp(1.875rem, 2.5vw, 2.5rem);
    }
    .philosophy-logic__details {
      padding-block: clamp(1.875rem, 2.5vw, 2.5rem);
    }
  }

  /* h3 を番号と 1 セットにまとめる ヘッダー */
  .philosophy-logic__detail-heading {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
  }

  /* 番号 (01, 02, 03)。philosophy-logic__point-num と同じ設定。 */
  .philosophy-logic__detail-num {
    font-family: var(--font-en);
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
    color: oklch(0.98 0 0);
  }

  .philosophy-logic__detail-title {
    font-family: var(--font-jp);
    font-size: 1.25rem; /* 20px — SP/TB */
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.7;
    color: oklch(0.98 0 0);
    text-wrap: balance;
    margin: 0;
    display: block;
  }

  /* h3 各行の mask + translate。h2 より発動を遅らせる (transition-delay) */
  .philosophy-logic__detail-title-line {
    display: block;
    overflow: hidden;
    padding-block-end: 0.2em;
  }

  .philosophy-logic__detail-title-line > span {
    display: block;
    transform: translate3d(0, calc(100% + 0.2em), 0);
    transition: transform 1.2s cubic-bezier(0.87, 0, 0.13, 1);
  }

  .philosophy-logic__detail-title.is-revealed .philosophy-logic__detail-title-line > span {
    transform: translate3d(0, 0, 0);
    transition-delay: 0.35s; /* IO 発火後にもう一拍待ってから発動 */
  }

  .philosophy-logic__detail-title.is-revealed .philosophy-logic__detail-title-line:nth-child(2) > span {
    transition-delay: 0.5s; /* 2 行目はさらに stagger */
  }

  @media (prefers-reduced-motion: reduce) {
    .philosophy-logic__detail-title-line > span {
      transform: translate3d(0, 0, 0);
      transition: none;
    }
  }

  @media (width >= 1024px) {
    .philosophy-logic__detail-title {
      /* PC (1024~): 1024px で 24px、1440px で 28px (max) に到達する fluid */
      font-size: clamp(1.5rem, calc(0.88rem + 0.96vw), 1.75rem);
    }
  }

  .philosophy-logic__detail-body {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  .philosophy-logic__detail-body p {
    font-family: var(--font-jp);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.2;
    color: oklch(0.93 0.005 70);
    /* Safari で text-wrap: pretty (global p) が block 幅を意図せず縮めるので上書き。 */
    text-wrap: wrap;
    margin: 0;
  }

  /* 詳細セット (02 / 03) の本文末尾に置く遷移リンク。
     philosophy 風シンプル: 細い下線 + 矢印、 hover で矢印が右へ少しスライド。
     grid item として配置されるが、 inline-flex + justify-self: start で
     幅をコンテンツ分に絞り左寄せ。 */
  .philosophy-logic__detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.85em;
    justify-self: start;
    margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
    padding-block-end: 0.6em;
    font-family: var(--font-jp);
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.6;
    color: oklch(0.98 0 0);
    text-decoration: none;
    border-block-end: 1px solid oklch(0.98 0 0 / 0.4);
    transition:
      color 0.3s var(--ease-out, ease-out),
      border-color 0.3s var(--ease-out, ease-out);
  }

  .philosophy-logic__detail-link-arrow {
    display: block;
    /* viewBox 21:11 のアスペクトを維持。 高さは行の中央寄せに馴染む 0.7em 程度 */
    inline-size: auto;
    block-size: 0.7em;
    flex-shrink: 0;
    transition: translate 0.3s var(--ease-out, ease-out);
  }

  @media (hover: hover) {
    .philosophy-logic__detail-link:hover {
      color: oklch(0.88 0.005 70);
      border-block-end-color: oklch(0.98 0 0 / 0.7);
    }

    .philosophy-logic__detail-link:hover .philosophy-logic__detail-link-arrow {
      translate: 0.3em 0;
    }
  }

  .philosophy-logic__detail-link:focus-visible {
    outline: 2px solid oklch(0.98 0 0 / 0.7);
    outline-offset: 0.25em;
  }

  /* SP のみ: 本文系 p の line-height を一律 1.9 に縮めて、 縦の詰まりを少し増す。
     PC/TB は各ブロックの既存値 (2.2) を維持する。 */
  @media (width < 768px) {
    .philosophy-intro__lead,
    .philosophy-history__chapter p,
    .philosophy-logic__detail-body p {
      line-height: 1.9;
    }

    /* 本文 body の段落間 gap を 0.75rem に統一して少し詰める。
       PC/TB は各ブロックの既存 clamp 値を維持する。
       __history__chapter は既に SP で 0.75rem なので対象外。 */
    .philosophy-intro__body,
    .philosophy-history__body,
    .philosophy-logic__detail-body {
      gap: 0.75rem;
    }

    /* history の bg + color fade-in を SP では title 上部が viewport 中央に到達した
       タイミング (entry 60%) で完全終了させる。 開始は entry 25% (section が画面下から
       1/4 入ったあたり) で控えめに。 PC/TB は外側の 25dvh contain ベースを維持。 */
    @supports (animation-timeline: view()) {
      .philosophy-history,
      .philosophy-history__title,
      .philosophy-history__title-en,
      .philosophy-history__chapter p {
        animation-range: entry 25% entry 60%;
      }
    }
  }

}