/* =========================================================
   EXTERNALIZED STYLE BLOCK 01 / static-shell
   Original cascade position: 1 of 11
========================================================= */
    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      overflow-x: hidden;
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 02 / 00-common-ui
   Original cascade position: 2 of 11
========================================================= */
  :root {
    /* =====================================================
      Z-index
    ===================================================== */

    --pi-header-z: 99990;
    --pi-global-ui-z: 99980;
    --pi-cursor-z: 100010;

    /* =====================================================
      共通配置
    ===================================================== */

    --pi-ui-origin: clamp(22px, 2.2vw, 32px);
    --pi-logo-offset: clamp(14px, 2vw, 30px);

    --pi-header-top: 34px;

    --pi-header-logo-left:
      calc(
        var(--pi-ui-origin) +
        var(--pi-logo-offset)
      );

    --pi-header-logo-width:
      clamp(132px, 10.5vw, 176px);

    --pi-header-nav-right:
      clamp(34px, 5.6vw, 92px);

    --pi-header-nav-gap:
      clamp(28px, 4.1vw, 68px);

    /* =====================================================
      Color
    ===================================================== */

    --pi-ink: #061a3f;
    --pi-white: #ffffff;

    /* =====================================================
      Static page top offset
      CMS管理バーは存在しないため0pxで固定
    ===================================================== */

    --pi-admin-bar-offset: 0px;
  }

  .pi-header,
  .pi-header *,
  .pi-global-ui,
  .pi-global-ui *,
  .pi-custom-cursor,
  .pi-custom-cursor * {
    box-sizing: border-box;
  }

  /* =========================================================
    Header
  ========================================================= */

  .pi-header {
    position: fixed;
    inset: 0 0 auto 0;

    height: 0;

    z-index: var(--pi-header-z);
    pointer-events: none;

    font-family:
      "Helvetica Neue",
      Helvetica,
      Arial,
      "Noto Sans JP",
      sans-serif;
  }

  /*
    初期判定が終わるまでは非表示。

    最初に誤った色のロゴやナビが
    一瞬表示されるのを防止する。
  */

  .pi-header:not(.is-ready)
  .pi-header__logo,
  .pi-header:not(.is-ready)
  .pi-header__nav {
    opacity: 0;
  }

  .pi-header.is-ready
  .pi-header__logo,
  .pi-header.is-ready
  .pi-header__nav {
    opacity: 1;
  }

  /*
    ヒーローのサブコピー表示完了までは、
    ヘッダーだけを完全に非表示にする。

    左側のラインとセクションラベル
    （.pi-global-ui）は対象外。
  */

  .pi-header.is-hero-pending
  .pi-header__logo,
  .pi-header.is-hero-pending
  .pi-header__nav {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform:
      translate3d(0, -16px, 0);

    transition: none !important;
  }

  /*
    ヒーロー側から完了イベントを受けた後、
    ロゴとナビを同時に静かに表示する。
  */

  .pi-header.is-ready.is-hero-visible
  .pi-header__logo,
  .pi-header.is-ready.is-hero-visible
  .pi-header__nav {
    opacity: 1;
    visibility: visible;
    transform:
      translate3d(0, 0, 0);

    transition:
      opacity 0.9s
      cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s
      cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* =========================================================
    Logo
  ========================================================= */

  .pi-header__logo {
    position: fixed;

    top:
      calc(
        var(--pi-header-top) +
        var(--pi-admin-bar-offset)
      );

    left: var(--pi-header-logo-left);

    width: var(--pi-header-logo-width);
    height: auto;

    display: block;

    z-index: calc(var(--pi-header-z) + 2);

    pointer-events: auto;

    color: inherit;
    text-decoration: none;

    transition:
      opacity 0.24s ease;
  }

  .pi-header__logo-stack {
    position: relative;

    display: block;
    width: 100%;
  }

  .pi-header__logo img {
    display: block;

    width: 100%;
    height: auto;

    user-select: none;
    pointer-events: none;

    transition:
      opacity 0.24s ease;
  }

  .pi-header__logo-img--dark-text {
    position: relative;
    opacity: 1;
  }

  .pi-header__logo-img--white-text {
    position: absolute;
    inset: 0;

    opacity: 0;
  }

  /*
    明るい背景では濃色ロゴ
  */

  .pi-header[data-pi-tone="light"]
  .pi-header__logo-img--dark-text {
    opacity: 1;
  }

  .pi-header[data-pi-tone="light"]
  .pi-header__logo-img--white-text {
    opacity: 0;
  }

  /*
    暗い背景では白色ロゴ
  */

  .pi-header[data-pi-tone="dark"]
  .pi-header__logo-img--dark-text {
    opacity: 0;
  }

  .pi-header[data-pi-tone="dark"]
  .pi-header__logo-img--white-text {
    opacity: 1;
  }

  /* =========================================================
    Navigation
  ========================================================= */

  .pi-header__nav {
    position: fixed;

    top:
      calc(
        var(--pi-header-top) +
        var(--pi-admin-bar-offset) +
        14px
      );

    right: var(--pi-header-nav-right);

    display: flex;
    align-items: center;

    gap: var(--pi-header-nav-gap);

    z-index: calc(var(--pi-header-z) + 2);

    white-space: nowrap;
    pointer-events: auto;

    transition:
      opacity 0.24s ease;
  }

  .pi-header__nav a {
    position: relative;

    display: inline-block;

    padding: 4px 0 7px;

    color: var(--pi-ink);

    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    text-decoration: none;

    opacity: 0.8;

    transition:
      color 0.24s ease,
      opacity 0.24s ease;
  }

  .pi-header[data-pi-tone="light"]
  .pi-header__nav a {
    color: var(--pi-ink);
  }

  .pi-header[data-pi-tone="dark"]
  .pi-header__nav a {
    color: var(--pi-white);
  }

  /*
    下線はホバー・フォーカス時のみ
  */

  .pi-header__nav a::after {
    content: "";

    position: absolute;

    right: 0.22em;
    bottom: 0;
    left: 0;

    height: 1px;

    background: currentColor;

    opacity: 0.64;

    transform: scaleX(0);
    transform-origin: right center;

    transition:
      transform 0.34s
      cubic-bezier(0.22, 0.9, 0.24, 1);
  }

  .pi-header__nav a:hover,
  .pi-header__nav a:focus-visible {
    opacity: 1;
  }

  .pi-header__nav a:hover::after,
  .pi-header__nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  /*
    ナビクリック後、目的セクションへ移動している間は
    クリックした項目の文字と下線を点灯させる。
  */

  .pi-header__nav a.is-scroll-target {
    opacity: 1;
  }

  .pi-header__nav a.is-scroll-target::after {
    opacity: 0.92;
    transform: scaleX(1);
    transform-origin: left center;
  }

  /*
    独自スクロール中は、CSS側のscroll-behaviorを停止する。
    requestAnimationFrameの座標制御と二重に補間されるのを防ぐ。
  */

  html.pi-programmatic-scroll,
  html.pi-programmatic-scroll body {
    scroll-behavior: auto !important;
  }

  .pi-header__nav a:focus-visible,
  .pi-header__logo:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 6px;
  }

  /* =========================================================
    Global UI
  ========================================================= */

  .pi-global-ui {
    /*
      明るい背景用の初期変数
    */

    --pi-line-color:
      rgba(6, 26, 63, 0.31);

    --pi-line-transition-color:
      rgba(35, 79, 163, 0.68);

    --pi-label-color:
      var(--pi-ink);

    position: fixed;

    top: var(--pi-admin-bar-offset);
    right: 0;
    bottom: 0;
    left: 0;

    z-index: var(--pi-global-ui-z);

    pointer-events: none;

    font-family:
      "Helvetica Neue",
      Helvetica,
      Arial,
      "Noto Sans JP",
      sans-serif;
  }

  /*
    セクション判定前は左線とラベルを非表示。

    HEROという誤った初期値が
    表示され続ける問題を防ぐ。
  */

  .pi-global-ui:not(.is-ready)
  .pi-global-ui__line,
  .pi-global-ui:not(.is-ready)
  .pi-global-ui__label {
    opacity: 0;
  }

  .pi-global-ui.is-ready
  .pi-global-ui__line,
  .pi-global-ui.is-ready
  .pi-global-ui__label {
    opacity: 1;
  }

  .pi-global-ui[data-pi-tone="light"] {
    --pi-line-color:
      rgba(6, 26, 63, 0.31);

    --pi-line-transition-color:
      rgba(35, 79, 163, 0.68);

    --pi-label-color:
      var(--pi-ink);
  }

  .pi-global-ui[data-pi-tone="dark"] {
    --pi-line-color:
      rgba(255, 255, 255, 0.35);

    --pi-line-transition-color:
      rgba(185, 210, 255, 0.72);

    --pi-label-color:
      var(--pi-white);
  }

  /* =========================================================
    Full-height Rail
  ========================================================= */

  .pi-global-ui__line {
    position: fixed;

    top: var(--pi-admin-bar-offset);
    bottom: 0;
    left: var(--pi-ui-origin);

    width: 2px;

    overflow: hidden;

    background: transparent;

    transition:
      opacity 0.24s ease;
  }

  /*
    常時表示されるベースライン
  */

  .pi-global-ui__line::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--pi-line-color);

    opacity: 1;

    transform: scaleY(1);
    transform-origin: top center;

    transition:
      background-color 0.3s ease;
  }

  /*
    セクション切替時の再描画ライン
  */

  .pi-global-ui__line::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
      var(--pi-line-transition-color);

    opacity: 0;

    transform: scaleY(0);
    transform-origin: top center;
  }

  .pi-global-ui.is-rail-transitioning
  .pi-global-ui__line::before {
    animation:
      piRailBaseTransition
      0.82s
      cubic-bezier(0.76, 0, 0.24, 1)
      both;
  }

  .pi-global-ui.is-rail-transitioning
  .pi-global-ui__line::after {
    animation:
      piRailRedraw
      0.82s
      cubic-bezier(0.76, 0, 0.24, 1)
      both;
  }

  @keyframes piRailBaseTransition {
    0% {
      opacity: 1;
    }

    20% {
      opacity: 0.2;
    }

    44% {
      opacity: 0.12;
    }

    72% {
      opacity: 0.56;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes piRailRedraw {
    0% {
      opacity: 0;
      transform: scaleY(0);
    }

    10% {
      opacity: 0.82;
    }

    68% {
      opacity: 0.72;
      transform: scaleY(1);
    }

    100% {
      opacity: 0;
      transform: scaleY(1);
    }
  }

  /*
    ナビ移動の到着時だけ、左レールとラベルを短く点灯する。
    座標やサイズは動かさず、明度と濃度だけで到着を伝える。
  */

  .pi-global-ui.is-nav-arriving
  .pi-global-ui__line::before {
    animation:
      piRailArrivalBase
      0.56s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }

  .pi-global-ui.is-nav-arriving
  .pi-global-ui__line::after {
    animation:
      piRailArrivalFlash
      0.56s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }

  .pi-global-ui.is-nav-arriving
  .pi-global-ui__label {
    animation:
      piLabelArrival
      0.52s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }

  @keyframes piRailArrivalBase {
    0% {
      opacity: 1;
      filter: brightness(1);
    }

    32% {
      opacity: 1;
      filter: brightness(1.85);
    }

    100% {
      opacity: 1;
      filter: brightness(1);
    }
  }

  @keyframes piRailArrivalFlash {
    0% {
      opacity: 0;
      transform: scaleY(0.82);
    }

    28% {
      opacity: 1;
      transform: scaleY(1);
    }

    100% {
      opacity: 0;
      transform: scaleY(1);
    }
  }

  @keyframes piLabelArrival {
    0% {
      opacity: 0.76;
    }

    34% {
      opacity: 1;
    }

    100% {
      opacity: 0.92;
    }
  }



  /* =========================================================
    Cursor-linked Rail Marker
  ========================================================= */

  .pi-global-ui__cursor-marker {
    --pi-cursor-marker-rest-height: 18px;

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--pi-cursor-marker-rest-height);

    z-index: 3;

    background:
      var(--pi-line-transition-color);

    opacity: 0;

    transform:
      translate3d(
        0,
        var(--pi-cursor-marker-y, 50vh),
        0
      )
      translateY(-50%);

    transform-origin: center;

    will-change:
      transform,
      height,
      opacity;

    transition:
      height 0.34s
      cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease,
      background-color 0.24s ease;
  }

  .pi-global-ui.is-cursor-active
  .pi-global-ui__cursor-marker {
    opacity: 0.86;
  }

  .pi-global-ui.is-cursor-interactive
  .pi-global-ui__cursor-marker {
    --pi-cursor-marker-rest-height: 36px;

    opacity: 1;
  }

  .pi-global-ui.is-cursor-pressed
  .pi-global-ui__cursor-marker {
    height: 6px;
    opacity: 1;
  }

  .pi-global-ui.is-cursor-releasing
  .pi-global-ui__cursor-marker {
    animation:
      piRailCursorRelease
      0.42s
      cubic-bezier(0.22, 1, 0.36, 1)
      both;
  }

  @keyframes piRailCursorRelease {
    0% {
      height: 6px;
    }

    48% {
      height:
        calc(
          var(--pi-cursor-marker-rest-height) +
          12px
        );
    }

    100% {
      height:
        var(--pi-cursor-marker-rest-height);
    }
  }

  /* =========================================================
    Custom Cursor
  ========================================================= */

  .pi-custom-cursor {
    position: fixed;

    top: 0;
    left: 0;

    width: 30px;
    height: 30px;

    z-index: var(--pi-cursor-z);

    color: var(--pi-ink);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
    user-select: none;

    transform:
      translate3d(-100px, -100px, 0);

    will-change:
      transform,
      opacity;

    transition:
      opacity 0.16s ease,
      visibility 0s linear 0.16s,
      color 0.24s ease;
  }

  .pi-custom-cursor[data-pi-tone="light"] {
    color: var(--pi-ink);
  }

  .pi-custom-cursor[data-pi-tone="dark"] {
    color: var(--pi-white);
  }

  .pi-custom-cursor.is-visible {
    opacity: 1;
    visibility: visible;

    transition:
      opacity 0.16s ease,
      visibility 0s linear 0s,
      color 0.24s ease;
  }

  .pi-custom-cursor.is-native-zone {
    opacity: 0;
  }

  .pi-custom-cursor__core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    background: currentColor;

    transform:
      translate(-50%, -50%)
      rotate(0deg);

    transform-origin: center;

    transition:
      width 0.26s
      cubic-bezier(0.22, 1, 0.36, 1),
      height 0.26s
      cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.14s
      cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.16s ease;
  }

  /*
    クリック時にだけ点灯する中央の輪郭。

    位置と大きさは固定し、
    拡大や横移動を一切行わない。
  */

  .pi-custom-cursor__click-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 17px;
    height: 17px;

    border: 1px solid currentColor;

    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(45deg);

    transform-origin: center;

    pointer-events: none;

    will-change: opacity;

    transition:
      opacity 0.08s linear;
  }

  .pi-custom-cursor__corner {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    opacity: 0;

    transform-origin: center;

    transition:
      opacity 0.18s ease,
      transform 0.32s
      cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pi-custom-cursor__corner--tl {
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;

    transform:
      translate(-8px, -8px)
      scale(0.56);
  }

  .pi-custom-cursor__corner--tr {
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    transform:
      translate(1px, -8px)
      scale(0.56);
  }

  .pi-custom-cursor__corner--bl {
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;

    transform:
      translate(-8px, 1px)
      scale(0.56);
  }

  .pi-custom-cursor__corner--br {
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform:
      translate(1px, 1px)
      scale(0.56);
  }

  /*
    クリック可能な要素では、
    中央の正方形を残したまま四隅だけを開く。
  */

  .pi-custom-cursor.is-interactive
  .pi-custom-cursor__core {
    width: 5px;
    height: 5px;
  }

  .pi-custom-cursor.is-interactive
  .pi-custom-cursor__corner {
    opacity: 0.94;
  }

  .pi-custom-cursor.is-interactive
  .pi-custom-cursor__corner--tl {
    transform:
      translate(-13px, -13px)
      scale(1);
  }

  .pi-custom-cursor.is-interactive
  .pi-custom-cursor__corner--tr {
    transform:
      translate(6px, -13px)
      scale(1);
  }

  .pi-custom-cursor.is-interactive
  .pi-custom-cursor__corner--bl {
    transform:
      translate(-13px, 6px)
      scale(1);
  }

  .pi-custom-cursor.is-interactive
  .pi-custom-cursor__corner--br {
    transform:
      translate(6px, 6px)
      scale(1);
  }

  /*
    クリック時はカーソル本体と四隅の位置を固定する。

    ・中央の正方形だけを45度回転してひし形化
    ・四隅は座標を変えず、線の濃さだけを強調
    ・中央の輪郭を一瞬点灯
    ・全体のscale、横伸び、跳ね返りは使用しない
  */

  .pi-custom-cursor.is-pressed
  .pi-custom-cursor__core {
    width: 7px;
    height: 7px;

    opacity: 1;

    transform:
      translate(-50%, -50%)
      rotate(45deg);

  }

  .pi-custom-cursor.is-pressed
  .pi-custom-cursor__corner {
    opacity: 1;
    border-width: 2px;

    transition-duration: 0.08s;
  }

  .pi-custom-cursor.is-pressed
  .pi-custom-cursor__click-ring {
    opacity: 0.96;
  }

  /*
    指を離した後は位置を動かさず、
    輪郭の透明度だけを落として消す。
  */

  .pi-custom-cursor.is-releasing
  .pi-custom-cursor__click-ring {
    animation:
      piCursorClickRingRelease
      0.22s
      ease-out
      both;
  }

  @keyframes piCursorClickRingRelease {
    0% {
      opacity: 0.96;
    }

    100% {
      opacity: 0;
    }
  }

  /*
    マウス操作が可能な端末だけで
    標準カーソルを非表示にする。
  */

  @media (hover: hover) and (pointer: fine) {
    html.pi-custom-cursor-enabled,
    html.pi-custom-cursor-enabled body,
    html.pi-custom-cursor-enabled a,
    html.pi-custom-cursor-enabled button,
    html.pi-custom-cursor-enabled [role="button"],
    html.pi-custom-cursor-enabled summary,
    html.pi-custom-cursor-enabled label[for],
    html.pi-custom-cursor-enabled
    [data-pi-cursor-interactive] {
      cursor: none !important;
    }

    html.pi-custom-cursor-enabled input,
    html.pi-custom-cursor-enabled textarea,
    html.pi-custom-cursor-enabled select,
    html.pi-custom-cursor-enabled
    [contenteditable="true"] {
      cursor: auto !important;
    }
  }


  /* =========================================================
    Section Label
  ========================================================= */

  .pi-global-ui__label {
    position: fixed;

    left:
      calc(
        var(--pi-ui-origin) +
        18px
      );

    bottom: 34px;

    display: flex;
    align-items: baseline;

    gap: 10px;

    color: var(--pi-label-color);

    opacity: 0.92;

    transform: translateY(0);

    overflow: hidden;

    transition:
      color 0.24s ease,
      opacity 0.25s ease,
      transform 0.38s
      cubic-bezier(0.22, 0.9, 0.24, 1);
  }

  .pi-global-ui__no {
    display: inline-block;

    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.15em;
  }

  .pi-global-ui__name {
    display: inline-block;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
  }

  /*
    ラベル切替アニメーション
  */

  .pi-global-ui.is-label-changing
  .pi-global-ui__label {
    opacity: 0;

    transform:
      translateY(5px);
  }

  /* =========================================================
    Responsive
  ========================================================= */

  /* =========================================================
    Mobile Layout

    PC版の値や配置には触れず、768px以下だけを再設計する。

    ・縦線は画面左端へ完全に密着
    ・ロゴとラベルは縦線から独立した安全な余白を確保
    ・ナビゲーションは画面幅に応じて段階的に整理
    ・文字を過度に大きくせず、情報密度と余白を両立
    ・タッチ端末ではカスタムカーソル関連を完全停止
  ========================================================= */

  @media (max-width: 768px) {
    :root {
      /*
        縦線の基準点そのものを画面左端へ移動する。
        ロゴは --pi-logo-offset で独立して余白を持たせる。
      */

      --pi-ui-origin: 0px;
      --pi-logo-offset:
        clamp(14px, 4.2vw, 18px);

      --pi-header-top: 16px;
      --pi-header-logo-width:
        clamp(108px, 28vw, 118px);

      --pi-header-nav-right:
        max(14px, env(safe-area-inset-right));

      --pi-header-nav-gap:
        clamp(12px, 3.2vw, 16px);
    }

    /* =====================================================
      Header
    ===================================================== */

    .pi-header__logo {
      top:
        calc(
          var(--pi-header-top) +
          var(--pi-admin-bar-offset) +
          env(safe-area-inset-top)
        );
    }

    .pi-header__nav {
      top:
        calc(
          var(--pi-header-top) +
          var(--pi-admin-bar-offset) +
          env(safe-area-inset-top) +
          3px
        );

      align-items: center;
    }

    .pi-header__nav a {
      padding: 3px 0 6px;

      font-size: 9px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.13em;

      opacity: 0.88;
    }

    .pi-header__nav a::after {
      right: 0.13em;
    }

    /*
      スマホでは情報量を整理し、
      USE SCENEをヘッダーから外す。
    */

    .pi-header__nav a:nth-child(3) {
      display: none;
    }

    /*
      モバイルの導入表示は移動量を抑え、
      PC版より短い距離で静かに現れる。
    */

    .pi-header.is-hero-pending
    .pi-header__logo,
    .pi-header.is-hero-pending
    .pi-header__nav {
      transform:
        translate3d(0, -8px, 0);
    }

    .pi-header.is-ready.is-hero-visible
    .pi-header__logo,
    .pi-header.is-ready.is-hero-visible
    .pi-header__nav {
      transition:
        opacity 0.72s
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s
        cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
    }

    /* =====================================================
      Left Rail
    ===================================================== */

    .pi-global-ui__line {
      /*
        画面左端に完全密着。
        親要素やWordPress側の余白には影響されない。
      */

      left: 0;
      width: 2px;
    }

    /*
      タッチ端末ではカーソル追従マーカーを表示しない。
      セクション切替時の縦線アニメーションは維持する。
    */

    .pi-global-ui__cursor-marker {
      display: none;
    }

    /* =====================================================
      Section Label
    ===================================================== */

    .pi-global-ui__label {
      left:
        max(
          14px,
          env(safe-area-inset-left)
        );

      right: 14px;

      bottom:
        max(
          16px,
          env(safe-area-inset-bottom)
        );

      max-width:
        calc(
          100vw -
          28px
        );

      gap: 7px;

      opacity: 0.88;
    }

    .pi-global-ui__no {
      flex: 0 0 auto;

      font-size: 9px;
      line-height: 1;
      letter-spacing: 0.13em;
    }

    .pi-global-ui__name {
      min-width: 0;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      font-size: 8px;
      line-height: 1;
      letter-spacing: 0.15em;
    }

    .pi-global-ui.is-label-changing
    .pi-global-ui__label {
      transform:
        translateY(3px);
    }

    /* =====================================================
      Touch Device Cleanup
    ===================================================== */

    .pi-custom-cursor {
      display: none !important;
    }
  }

  @media (max-width: 520px) {
    :root {
      --pi-logo-offset:
        max(
          14px,
          env(safe-area-inset-left)
        );

      --pi-header-logo-width:
        clamp(102px, 29vw, 108px);

      --pi-header-nav-gap: 13px;
    }

    .pi-header__nav a {
      font-size: 8.5px;
      letter-spacing: 0.115em;
    }

    /*
      一般的なスマホ幅では、
      CONCEPTとCONTACTだけを残して
      ヘッダーを窮屈にしない。
    */

    .pi-header__nav a:nth-child(2) {
      display: none;
    }

    .pi-global-ui__label {
      left:
        max(
          13px,
          env(safe-area-inset-left)
        );

      right: 13px;

      bottom:
        max(
          14px,
          env(safe-area-inset-bottom)
        );

      max-width:
        calc(
          100vw -
          26px
        );
    }
  }

  @media (max-width: 360px) {
    :root {
      --pi-header-logo-width: 98px;
      --pi-header-nav-gap: 10px;
    }

    .pi-header__nav a {
      font-size: 8px;
      letter-spacing: 0.1em;
    }

    .pi-global-ui__no {
      font-size: 8.5px;
    }

    .pi-global-ui__name {
      font-size: 7.5px;
      letter-spacing: 0.13em;
    }
  }

  /* =========================================================
    Reduced Motion
  ========================================================= */

  @media (prefers-reduced-motion: reduce) {
    .pi-header__logo,
    .pi-header__logo img,
    .pi-header__nav,
    .pi-header__nav a,
    .pi-header__nav a::after,
    .pi-global-ui__line,
    .pi-global-ui__line::before,
    .pi-global-ui__line::after,
    .pi-global-ui__cursor-marker,
    .pi-global-ui__label,
    .pi-custom-cursor,
    .pi-custom-cursor * {
      animation: none !important;
      transition: none !important;
    }

    html.pi-custom-cursor-enabled,
    html.pi-custom-cursor-enabled body,
    html.pi-custom-cursor-enabled * {
      cursor: auto !important;
    }

    .pi-custom-cursor,
    .pi-global-ui__cursor-marker {
      display: none !important;
    }
  }

/* =========================================================
   EXTERNALIZED STYLE BLOCK 03 / 01-hero
   Original cascade position: 3 of 11
========================================================= */
    /* =========================================================
       PUBLIC INSIGHT HERO
       - 背景画像は固定に近い状態で緩やかに移動
       - オブジェクトは初期表示から常時存在
       - 常時アニメーションとスクロール連動を別レイヤーで合成
    ========================================================= */

    .pi-hero-section {
      --pi-bg-y: -12px;
      --pi-bg-x: 0px;
      --pi-bg-scale: 1.118;

      /* 読み込み完了直後からコピー演出を開始 */
      --pi-copy-start: 1.98s;
      --pi-scroll-start: 5.35s;
      --pi-first-view-center-y: 54.5%;

      --pi-core-x: 0px;
      --pi-core-y: 0px;
      --pi-core-scale: 1;
      --pi-core-rotate: 0deg;
      --pi-core-opacity: 0.94;

      /* 右側の大きな楕円・呼吸レイヤー */
      --pi-orbit-x: 0px;
      --pi-orbit-y: 0px;
      --pi-orbit-scale: 1;
      --pi-orbit-rotate: -1deg;
      --pi-orbit-opacity: 0.66;

      /* 斜めに横切る半透明の面・流線レイヤー */
      --pi-ribbon-x: 0px;
      --pi-ribbon-y: 0px;
      --pi-ribbon-scale: 1;
      --pi-ribbon-rotate: 0deg;
      --pi-ribbon-opacity: 0.48;

      /* 右端に残る余韻・点群レイヤー */
      --pi-echo-x: 0px;
      --pi-echo-y: 0px;
      --pi-echo-scale: 1;
      --pi-echo-rotate: 0deg;
      --pi-echo-opacity: 0.52;

      /* 線の流れ。スクロールでも動かす */
      --pi-flow-a: 0;
      --pi-flow-b: 0;
      --pi-flow-c: 0;

      position: relative;
      width: 100vw;
      max-width: 100vw;
      margin-right: calc(50% - 50vw);
      margin-left: calc(50% - 50vw);

      overflow: clip;
      background: #ffffff;
      color: #17263a;

      font-family:
        "Helvetica Neue",
        Helvetica,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        Arial,
        sans-serif;

      box-sizing: border-box;
    }

    .pi-hero-section,
    .pi-hero-section * {
      box-sizing: border-box;
    }

    .pi-hero-scroll-lock,
    .pi-hero-scroll-lock body {
      overflow: hidden;
    }


    /* =========================================================
       オープニング
       中央の正方形そのものを全画面まで拡大し、
       同じ位置へそのまま縮小して帰着させる。
    ========================================================= */

    .pi-hero-section.is-opening .pi-hero-sticky {
      z-index: 1;
    }

    .pi-hero-section.is-opening .pi-hero-first-view {
      z-index: 100;
    }

    .pi-hero-section.is-opening .pi-hero-core {
      z-index: 110;
      box-shadow: none;

      animation:
        piHeroCoreOpeningCollapse
        1.5s
        cubic-bezier(0.22, 1, 0.36, 1)
        0s
        both;
    }

    /*
     * 暗い全画面に載せるのは数字と細い進捗線だけ。
     * 別アイコンや別パネルは置かず、正方形の演出を主役にする。
     */
    .pi-hero-loading {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 120;

      display: grid;
      justify-items: center;
      gap: 12px;
      width: clamp(118px, 10vw, 156px);

      transform: translate3d(-50%, -50%, 0);

      color: rgba(244, 248, 255, 0.82);
      pointer-events: none;

      animation:
        piHeroLoadingFade
        1.5s
        linear
        both;
    }

    .pi-hero-section.is-opened .pi-hero-loading {
      display: none;
    }

    .pi-hero-loading-count {
      min-width: 3.4em;
      margin: 0;

      font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
      font-size: clamp(0.68rem, 0.72vw, 0.78rem);
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.16em;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .pi-hero-loading-line {
      position: relative;
      display: block;
      width: 100%;
      height: 1px;
      overflow: hidden;
      background: rgba(244, 248, 255, 0.16);
    }

    .pi-hero-loading-line::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(244, 248, 255, 0.78);
      transform: translateX(-100%);
      animation:
        piHeroLoadingProgress
        1.25s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
    }

    /* =========================================================
       スクロール領域
    ========================================================= */

    .pi-hero-track {
      position: relative;
      width: 100%;
      min-height: 230vh;
    }

    .pi-hero-sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;

      width: 100%;
      height: 100vh;
      height: 100svh;

      z-index: 1;
      overflow: hidden;
      isolation: isolate;
      background: #edf3fb;
    }

    /* =========================================================
       背景
    ========================================================= */

    .pi-hero-background {
      position: absolute;
      inset: 0;
      z-index: 1;

      overflow: hidden;
      background: #edf3fb;

      pointer-events: none;
    }

    .pi-hero-background img {
      position: absolute;
      top: -8%;
      left: -7%;

      width: 114%;
      height: 116%;
      max-width: none;

      object-fit: cover;
      object-position: center center;

      transform:
        translate3d(var(--pi-bg-x), var(--pi-bg-y), 0)
        scale(var(--pi-bg-scale));

      transform-origin: center center;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;

      user-select: none;
      -webkit-user-drag: none;
    }

    .pi-hero-background::after {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.055) 0%,
          rgba(255, 255, 255, 0.012) 43%,
          rgba(255, 255, 255, 0.035) 100%
        ),
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.02) 0%,
          rgba(255, 255, 255, 0) 58%,
          rgba(255, 255, 255, 0.045) 100%
        );

      pointer-events: none;
    }

    /* =========================================================
       オブジェクト全体

       以前の「時間差で図形群が現れる」構成を廃止。
       3レイヤーを最初から表示し、
       それぞれに常時運動とスクロール運動を重ねる。
    ========================================================= */

    .pi-hero-objects {
      position: absolute;
      inset: 0;
      z-index: 2;

      overflow: hidden;
      pointer-events: none;
    }

    .pi-hero-object-layer {
      position: absolute;
      inset: -8%;

      transform-origin: 68% 48%;
      will-change: transform, opacity;
      pointer-events: none;
    }

    .pi-hero-object-layer svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* =========================================================
       レイヤー01：右側の呼吸する楕円
    ========================================================= */

    .pi-hero-orbit-layer {
      opacity: var(--pi-orbit-opacity);

      transform:
        translate3d(var(--pi-orbit-x), var(--pi-orbit-y), 0)
        rotate(var(--pi-orbit-rotate))
        scale(var(--pi-orbit-scale));
    }

    .pi-orbit-float {
      transform-box: fill-box;
      transform-origin: center;

      animation:
        piHeroOrbitFloat
        17s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-orbit-breathe {
      transform-box: fill-box;
      transform-origin: center;

      animation:
        piHeroOrbitBreathe
        8.5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-orbit-turn {
      transform-box: fill-box;
      transform-origin: center;

      animation:
        piHeroOrbitTurn
        34s
        linear
        infinite;
    }

    .pi-orbit-turn-reverse {
      animation-direction: reverse;
      animation-duration: 27s;
    }

    .pi-object-orbit-line {
      fill: none;
      stroke: rgba(255, 255, 255, 0.68);
      stroke-width: 1.2;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;

      filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.09));
    }

    .pi-object-orbit-line-soft {
      stroke: rgba(255, 255, 255, 0.4);
      stroke-width: 0.9;
    }

    .pi-object-orbit-broken {
      stroke-dasharray: 92 28 20 35 44 22;
      stroke-dashoffset: var(--pi-flow-a);
    }

    .pi-object-orbit-broken-secondary {
      stroke-dasharray: 54 18 12 30 25 20;
      stroke-dashoffset: var(--pi-flow-b);
    }

    .pi-object-lens {
      fill: rgba(255, 255, 255, 0.05);
      stroke: rgba(255, 255, 255, 0.26);
      stroke-width: 0.8;
      vector-effect: non-scaling-stroke;
    }

    .pi-object-lens-soft {
      fill: rgba(255, 255, 255, 0.036);
      stroke: rgba(255, 255, 255, 0.18);
    }

    /* =========================================================
       レイヤー02：斜めに流れる面と線
    ========================================================= */

    .pi-hero-ribbon-layer {
      opacity: var(--pi-ribbon-opacity);

      transform:
        translate3d(var(--pi-ribbon-x), var(--pi-ribbon-y), 0)
        rotate(var(--pi-ribbon-rotate))
        scale(var(--pi-ribbon-scale));
    }

    .pi-ribbon-float {
      transform-box: fill-box;
      transform-origin: center;

      animation:
        piHeroRibbonFloat
        20s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-ribbon-breathe {
      transform-box: fill-box;
      transform-origin: center;

      animation:
        piHeroRibbonBreathe
        11s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-object-ribbon-fill {
      fill: rgba(255, 255, 255, 0.17);
      stroke: rgba(255, 255, 255, 0.22);
      stroke-width: 0.65;
      vector-effect: non-scaling-stroke;
    }

    .pi-object-ribbon-fill-soft {
      fill: rgba(255, 255, 255, 0.095);
      stroke: rgba(255, 255, 255, 0.135);
    }

    .pi-object-flow-line {
      fill: none;
      stroke: rgba(255, 255, 255, 0.58);
      stroke-width: 1.08;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;

      stroke-dasharray: 150 42 62 30;
      stroke-dashoffset: var(--pi-flow-c);

      animation:
        piHeroLineTravel
        24s
        linear
        infinite;
    }

    .pi-object-flow-line-soft {
      stroke: rgba(255, 255, 255, 0.32);
      stroke-width: 0.84;
      stroke-dasharray: 92 36 26 44;
      animation-duration: 31s;
      animation-direction: reverse;
    }

    .pi-flow-particle {
      fill: rgba(255, 255, 255, 0.8);
      filter:
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.24));
    }

    .pi-flow-particle-soft {
      fill: rgba(255, 255, 255, 0.52);
    }

    /* =========================================================
       レイヤー03：右端の余韻・点群
    ========================================================= */

    .pi-hero-echo-layer {
      opacity: var(--pi-echo-opacity);

      transform:
        translate3d(var(--pi-echo-x), var(--pi-echo-y), 0)
        rotate(var(--pi-echo-rotate))
        scale(var(--pi-echo-scale));
    }

    .pi-echo-float {
      transform-box: fill-box;
      transform-origin: center;

      animation:
        piHeroEchoFloat
        15s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-echo-arc {
      fill: none;
      stroke: rgba(255, 255, 255, 0.54);
      stroke-width: 1.02;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;

      stroke-dasharray: 80 28 18 38;

      animation:
        piHeroEchoDash
        21s
        linear
        infinite;
    }

    .pi-echo-arc-soft {
      stroke: rgba(255, 255, 255, 0.3);
      stroke-width: 0.82;
      animation-direction: reverse;
      animation-duration: 28s;
    }

    .pi-echo-dot,
    .pi-echo-dot-ring {
      transform-box: fill-box;
      transform-origin: center;
    }

    .pi-echo-dot {
      fill: rgba(255, 255, 255, 0.8);

      animation:
        piHeroEchoDot
        7s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-echo-dot-ring {
      fill: none;
      stroke: rgba(255, 255, 255, 0.34);
      stroke-width: 0.8;
      vector-effect: non-scaling-stroke;

      animation:
        piHeroEchoRing
        7s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-delay-1 {
      animation-delay: -1.8s;
    }

    .pi-delay-2 {
      animation-delay: -3.6s;
    }

    .pi-delay-3 {
      animation-delay: -5.2s;
    }

    .pi-delay-4 {
      animation-delay: -6.4s;
    }

    /* =========================================================
       センターコア：濃色の正方形
    ========================================================= */

    .pi-hero-core {
      position: absolute;
      z-index: 4;

      top: var(--pi-first-view-center-y);
      left: 50%;

      width: clamp(116px, 11.4vw, 164px);
      aspect-ratio: 1 / 1;

      opacity: var(--pi-core-opacity);
      background: #9ec1c8;
      box-shadow: none;

      transform:
        translate3d(
          calc(-50% + var(--pi-core-x)),
          calc(-50% + var(--pi-core-y)),
          0
        )
        rotate(var(--pi-core-rotate))
        scale(var(--pi-core-scale));

      will-change: transform, opacity;
      pointer-events: none;
    }

    /* =========================================================
       1画面目
       背景だけをstickyに残し、文字は通常のスクロール座標に置く。
       これにより、メインコピーも本文と同じように上へ流れ、
       そのまま画面外へ抜けていく。
    ========================================================= */

    .pi-hero-first-view {
      position: absolute;
      z-index: 7;

      top: 0;
      left: 0;

      width: 100%;
      height: 100vh;
      height: 100svh;

      pointer-events: none;
    }

    .pi-hero-main {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .pi-hero-main-title {
      position: absolute;
      top: var(--pi-first-view-center-y);
      left: clamp(28px, 5.4vw, 78px);
      width: min(520px, calc(50vw - 108px));
      margin: 0;
      color: #17263a;
      text-align: left;
      transform: translate3d(0, -50%, 0);

      font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        "Noto Serif JP",
        "Times New Roman",
        serif;

      font-size: clamp(2.05rem, 3.22vw, 2.96rem);
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: 0.038em;

      font-feature-settings: "palt" 1;
      text-wrap: balance;

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .pi-hero-main-title-line,
    .pi-hero-main-subtitle-text {
      position: relative;
      display: inline-block;

      color: rgba(23, 38, 58, 0.96);
      opacity: 0;

      animation:
        piHeroCopyReveal
        2.75s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
      animation-delay: var(--pi-copy-start);
    }

    /*
     * 左から走るデジタルなスイープではなく、
     * 青い気配が文字の奥からゆっくり浮かび、
     * 最後に黒へ馴染む余韻として扱う。
     */
    /*
     * 同じ文章を疑似要素でもう一度描画すると、
     * コピーが二重に登場したように見えるため残像レイヤーは使用しない。
     */
    .pi-hero-main-title-line::before,
    .pi-hero-main-subtitle-text::before {
      content: none;
      display: none;
      animation: none;
    }

    .pi-hero-main-title-line {
      display: block;
      width: max-content;
      max-width: 100%;
      white-space: nowrap;
    }

    .pi-hero-main-title-line + .pi-hero-main-title-line {
      margin-top: 0.02em;
    }

    .pi-hero-main-title-line:nth-child(2) {
      animation-delay: calc(var(--pi-copy-start) + 0.38s);
    }

    .pi-hero-main-subtitle {
      position: absolute;
      top: var(--pi-first-view-center-y);
      right: clamp(24px, 3.2vw, 52px);
      left: auto;
      width: max-content;
      max-width: none;
      margin: 0;

      color: rgba(23, 38, 58, 0.72);
      text-align: right;
      white-space: nowrap;
      transform:
        translate3d(0, -50%, 0)
        scaleX(0.84);
      transform-origin: right center;

      font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        "Noto Serif JP",
        "Times New Roman",
        serif;

      font-size: clamp(1.4rem, 1.58vw, 1.55rem);
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 0.026em;

      font-feature-settings: "palt" 1;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .pi-hero-main-subtitle-text {
      animation-delay: calc(var(--pi-copy-start) + 0.82s);
    }


    /* =========================================================
       スクロールサイン
    ========================================================= */

    .pi-hero-scroll {
      position: absolute;

      bottom: clamp(20px, 3.2vh, 34px);
      left: 50%;

      width: 54px;
      height: 84px;

      opacity: 0;
      transform: translateX(-50%);

      animation:
        piHeroScrollFadeIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        var(--pi-scroll-start)
        both;

      pointer-events: none;
    }


    .pi-hero-scroll-label {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);

      color: rgba(23, 38, 58, 0.58);
      font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
      font-size: 0.54rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.24em;
      white-space: nowrap;
    }

    .pi-hero-scroll-line {
      position: absolute;
      top: 18px;
      bottom: 0;
      left: 50%;

      width: 1px;

      background:
        linear-gradient(
          180deg,
          rgba(23, 38, 58, 0) 0%,
          rgba(23, 38, 58, 0.17) 18%,
          rgba(23, 38, 58, 0.28) 58%,
          rgba(23, 38, 58, 0) 100%
        );

      transform: translateX(-50%);
    }

    .pi-hero-scroll-dot {
      position: absolute;
      top: 24px;
      left: 50%;

      width: 6px;
      height: 6px;
      border-radius: 50%;

      background: rgba(23, 38, 58, 0.56);
      transform: translateX(-50%);

      animation:
        piHeroScrollDot
        2.5s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite;
    }

    /* =========================================================
       ストーリーセクション
       通常の文書フローで、下から自然に上がってくる見え方にする
    ========================================================= */

    .pi-hero-story {
      position: relative;
      z-index: 6;

      /*
       * 2画面目は横幅を無理に絞らず、周囲の余白で静かに読ませる。
       * 本文そのものは中央に置き、背景の広がりも残す。
       */
      width: min(1120px, calc(100% - 72px));
      margin: 0 auto;
      padding: 26vh 0 34vh;
    }

    .pi-hero-story-inner {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
    }

    .pi-hero-lead {
      margin: 0;
      color: rgba(23, 38, 58, 0.88);
      text-align: center;

      font-family:
        "Hiragino Mincho ProN",
        "Yu Mincho",
        YuMincho,
        "Noto Serif JP",
        "Times New Roman",
        serif;
      font-size: clamp(1.5rem, 2.34vw, 1.98rem);
      font-weight: 500;
      line-height: 1.95;
      letter-spacing: 0.06em;
    }

    .pi-hero-story-block {
      margin-top: 0;
    }

    .pi-hero-story-block + .pi-hero-story-block {
      margin-top: clamp(84px, 10vh, 124px);
    }

    .pi-hero-description {
      max-width: 1080px;
      margin: 0 auto;

      color: rgba(23, 38, 58, 0.82);
      text-align: center;

      font-size: clamp(1.25rem, 1.4vw, 1.38rem);
      font-weight: 400;
      line-height: 2.62;
      letter-spacing: 0.055em;

      font-feature-settings: "palt" 1;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .pi-hero-description + .pi-hero-description {
      margin-top: clamp(30px, 4.8vh, 48px);
    }

    @media (min-width: 768px) {
      .pi-hero-description {
        white-space: nowrap;
      }
    }

    /* =========================================================
       CTA
    ========================================================= */

    .pi-hero-cta {
      display: flex;
      justify-content: center;

      margin-top: clamp(54px, 7vh, 76px);
    }

    .pi-hero-cta-link {
      position: relative;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-width: 404px;
      min-height: 68px;
      padding: 17px 36px;

      overflow: hidden;

      border: 1px solid rgba(23, 38, 58, 0.28);
      border-radius: 999px;

      background: rgba(255, 255, 255, 0.14);
      color: #17263a;

      font-size: 1.09rem;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.065em;

      text-decoration: none;

      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);

      transition:
        color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pi-hero-cta-link::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;

      background: #17263a;
      transform: translateY(102%);

      transition:
        transform
        0.65s
        cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pi-hero-cta-link:hover {
      color: #ffffff;
      border-color: #17263a;
      transform: translateY(-2px);
    }

    .pi-hero-cta-link:hover::before {
      transform: translateY(0);
    }

    .pi-hero-cta-link:focus-visible {
      outline: 2px solid rgba(23, 38, 58, 0.34);
      outline-offset: 5px;
    }

    .pi-hero-mark {
      margin-top: clamp(140px, 19vh, 210px);
      text-align: center;
    }

    .pi-hero-mark img {
      display: inline-block;
      width: min(260px, 42vw);
      height: auto;
      opacity: 0.96;
    }

    /* =========================================================
       常時アニメーション
    ========================================================= */

    @keyframes piHeroOrbitFloat {
      0% {
        transform:
          translate3d(-12px, 8px, 0)
          rotate(-0.7deg);
      }

      48% {
        transform:
          translate3d(14px, -14px, 0)
          rotate(0.55deg);
      }

      100% {
        transform:
          translate3d(24px, 9px, 0)
          rotate(1.1deg);
      }
    }

    @keyframes piHeroOrbitBreathe {
      0% {
        opacity: 0.76;
        transform: scale(0.985, 1.01);
      }

      52% {
        opacity: 1;
        transform: scale(1.018, 0.992);
      }

      100% {
        opacity: 0.82;
        transform: scale(1.038, 1.02);
      }
    }

    @keyframes piHeroOrbitTurn {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes piHeroRibbonFloat {
      0% {
        transform:
          translate3d(-14px, 14px, 0)
          rotate(-0.6deg);
      }

      45% {
        transform:
          translate3d(12px, -10px, 0)
          rotate(0.45deg);
      }

      100% {
        transform:
          translate3d(30px, -22px, 0)
          rotate(1deg);
      }
    }

    @keyframes piHeroRibbonBreathe {
      0% {
        opacity: 0.68;
        transform: scaleY(0.97);
      }

      50% {
        opacity: 1;
        transform: scaleY(1.035);
      }

      100% {
        opacity: 0.78;
        transform: scaleY(1.01);
      }
    }

    @keyframes piHeroLineTravel {
      from {
        stroke-dashoffset: 0;
      }

      to {
        stroke-dashoffset: -520;
      }
    }

    @keyframes piHeroEchoFloat {
      0% {
        transform:
          translate3d(8px, -10px, 0)
          rotate(0.6deg);
      }

      50% {
        transform:
          translate3d(-14px, 13px, 0)
          rotate(-0.5deg);
      }

      100% {
        transform:
          translate3d(-26px, -3px, 0)
          rotate(-1.1deg);
      }
    }

    @keyframes piHeroEchoDash {
      from {
        stroke-dashoffset: 0;
      }

      to {
        stroke-dashoffset: 360;
      }
    }

    @keyframes piHeroEchoDot {
      0% {
        opacity: 0.22;
        transform:
          translate3d(-3px, 5px, 0)
          scale(0.74);
      }

      42% {
        opacity: 0.92;
        transform:
          translate3d(5px, -5px, 0)
          scale(1.08);
      }

      100% {
        opacity: 0.35;
        transform:
          translate3d(11px, -10px, 0)
          scale(0.82);
      }
    }

    @keyframes piHeroEchoRing {
      0% {
        opacity: 0.16;
        transform: scale(0.76);
      }

      52% {
        opacity: 0.68;
        transform: scale(1.12);
      }

      100% {
        opacity: 0.12;
        transform: scale(1.46);
      }
    }

    @keyframes piHeroScrollDot {
      0% {
        opacity: 0;
        transform:
          translate3d(-50%, 0, 0)
          scale(0.75);
      }

      18% {
        opacity: 0.75;
      }

      76% {
        opacity: 0.62;
        transform:
          translate3d(-50%, 36px, 0)
          scale(1);
      }

      100% {
        opacity: 0;
        transform:
          translate3d(-50%, 48px, 0)
          scale(0.8);
      }
    }

    @keyframes piHeroScrollFadeIn {
      0% {
        opacity: 0;
        transform: translate3d(-50%, 10px, 0);
      }

      100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
      }
    }

    @keyframes piHeroCoreOpeningCollapse {
      0%,
      55% {
        background: #01040d;
        transform:
          translate3d(
            calc(-50% + var(--pi-core-x)),
            calc(-50% + var(--pi-core-y)),
            0
          )
          rotate(var(--pi-core-rotate))
          scale(var(--pi-core-scale))
          scale(38);
      }

      72% {
        background: #263a52;
      }

      100% {
        background: #9ec1c8;
        transform:
          translate3d(
            calc(-50% + var(--pi-core-x)),
            calc(-50% + var(--pi-core-y)),
            0
          )
          rotate(var(--pi-core-rotate))
          scale(var(--pi-core-scale))
          scale(1);
      }
    }

    @keyframes piHeroLoadingProgress {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(0);
      }
    }

    @keyframes piHeroLoadingFade {
      0%,
      68% {
        opacity: 1;
      }

      90%,
      100% {
        opacity: 0;
      }
    }

    @keyframes piHeroCopyReveal {
      0% {
        opacity: 0;
        filter: blur(9px);
        transform:
          translate3d(0, 19px, 0)
          scale(0.995);
      }

      24% {
        opacity: 0;
        filter: blur(8px);
      }

      68% {
        opacity: 0.88;
      }

      100% {
        opacity: 1;
        filter: blur(0);
        transform:
          translate3d(0, 0, 0)
          scale(1);
      }
    }

    @keyframes piHeroCopyMemory {
      0% {
        opacity: 0;
        filter: blur(10px);
        transform:
          translate3d(0, 13px, 0)
          scale(1.012);
      }

      28% {
        opacity: 0;
      }

      48% {
        opacity: 0.44;
      }

      72% {
        opacity: 0.16;
        filter: blur(4px);
        transform:
          translate3d(0, 2px, 0)
          scale(1.004);
      }

      100% {
        opacity: 0;
        filter: blur(1px);
        transform:
          translate3d(0, 0, 0)
          scale(1);
      }
    }

    /* =========================================================
       タブレット
    ========================================================= */

    @media (max-width: 1024px) {
      .pi-hero-main-title {
        left: clamp(22px, 4.2vw, 42px);
        width: min(420px, calc(50vw - 68px));
        font-size: clamp(1.77rem, 3.04vw, 2.37rem);
        line-height: 1.38;
      }

      .pi-hero-main-subtitle {
        right: clamp(16px, 3.2vw, 32px);
        left: auto;
        width: max-content;
        max-width: none;
        text-align: right;
        white-space: nowrap;
        font-size: clamp(1.14rem, 1.48vw, 1.32rem);
        transform:
          translate3d(0, -50%, 0)
          scaleX(0.8);
        transform-origin: right center;
        letter-spacing: 0.022em;
      }

      .pi-hero-story {
        width: min(920px, calc(100% - 56px));
        padding-top: 23vh;
      }

      .pi-hero-mark img {
        width: min(220px, 36vw);
      }

      .pi-hero-object-layer {
        inset: -6%;
      }
    }

    /* =========================================================
       スマートフォン
    ========================================================= */

    @media (max-width: 767px) {
      .pi-hero-track {
        min-height: 215vh;
      }

      .pi-hero-background img {
        top: -7%;
        left: -20%;

        width: 140%;
        height: 114%;
        object-position: 58% center;
      }

      .pi-hero-object-layer {
        inset: -2% -22% -2% -16%;
        transform-origin: 68% 48%;
      }

      .pi-hero-orbit-layer {
        opacity: calc(var(--pi-orbit-opacity) * 0.82);
      }

      .pi-hero-ribbon-layer {
        opacity: calc(var(--pi-ribbon-opacity) * 0.76);
      }

      .pi-hero-echo-layer {
        opacity: calc(var(--pi-echo-opacity) * 0.72);
      }

      .pi-object-mobile-hide {
        display: none;
      }

      .pi-hero-section {
        --pi-first-view-center-y: 56%;
      }

      .pi-hero-core {
        width: min(34vw, 138px);
      }

      .pi-hero-main {
        inset: 0;
      }

      .pi-hero-main-title {
        top: var(--pi-first-view-center-y);
        left: 18px;
        width: min(226px, calc(50% - 48px));
        font-size: clamp(1.4rem, 6.24vw, 1.79rem);
        line-height: 1.38;
        letter-spacing: 0.032em;
        transform:
          translate3d(0, -50%, 0)
          scaleX(0.78);
        transform-origin: left center;
      }

      .pi-hero-main-subtitle {
        top: var(--pi-first-view-center-y);
        right: 14px;
        left: auto;
        width: max-content;
        max-width: none;
        text-align: right;
        white-space: nowrap;
        font-size: clamp(0.8rem, 2.68vw, 0.94rem);
        line-height: 1.55;
        letter-spacing: 0.008em;
        transform:
          translate3d(0, -50%, 0)
          scaleX(0.66);
        transform-origin: right center;
      }

      .pi-hero-story {
        width: calc(100% - 38px);
        padding: 18vh 0 24vh;
      }

      .pi-hero-mark {
        margin-top: 108px;
      }

      .pi-hero-mark img {
        width: min(180px, 52vw);
      }

      .pi-hero-lead {
        font-size: clamp(1.32rem, 5.72vw, 1.56rem);
        line-height: 1.9;
      }

      .pi-hero-description {
        max-width: 34em;
        font-size: 1.2rem;
        line-height: 2.18;
        letter-spacing: 0.035em;
      }

      .pi-hero-description + .pi-hero-description {
        margin-top: 28px;
      }

      .pi-hero-description br {
        display: none;
      }

      .pi-hero-cta {
        margin-top: 44px;
      }

      .pi-hero-cta-link {
        width: 100%;
        min-width: 0;
        min-height: 62px;
        padding: 16px 20px;

        font-size: 1.04rem;
        letter-spacing: 0.035em;
      }

      .pi-hero-scroll {
        bottom: 18px;
        height: 60px;
      }
    }

    /* =========================================================
       動きを減らす設定
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      .pi-hero-core,
      .pi-hero-loading,
      .pi-hero-loading-line::after,
      .pi-hero-main-title-line,
      .pi-hero-main-subtitle-text,
      .pi-orbit-float,
      .pi-orbit-breathe,
      .pi-orbit-turn,
      .pi-ribbon-float,
      .pi-ribbon-breathe,
      .pi-object-flow-line,
      .pi-echo-float,
      .pi-echo-arc,
      .pi-echo-dot,
      .pi-echo-dot-ring,
      .pi-hero-scroll,
      .pi-hero-scroll-dot {
        animation: none !important;
      }

      .pi-flow-particle animateMotion {
        display: none;
      }

      .pi-hero-main-title-line,
      .pi-hero-main-subtitle-text {
        opacity: 1;
        filter: none;
        transform: none;
      }

      .pi-hero-cta-link,
      .pi-hero-cta-link::before {
        transition: none;
      }
    }
  

    /* =========================================================
       BALANCED PERFORMANCE + CIRCLE OPENING OVERRIDES
       - 背景はヒーロー全体でsticky固定
       - スクロール連動JS・ズーム・パララックスは使用しない
       - 背景上の図形は2レイヤーだけ、ごく小さく低速で漂わせる
       - 最初だけ黒い全画面長方形が中央の円へ収束する
       - 収束後はアニメーション要素をDOMから削除する
    ========================================================= */

    /* Safariのstickyを安定させるため、祖先側では切り抜かない */
    .pi-hero-section {
      width: 100vw;
      max-width: none;
      margin-right: calc(50% - 50vw);
      margin-left: calc(50% - 50vw);
      overflow: visible;
      background: #edf3fb;
    }

    .pi-hero-track {
      overflow: visible;
      background: transparent;
    }

    .pi-hero-sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      overflow: hidden;
      isolation: isolate;
      background: #edf3fb;
      transform: none;
      -webkit-transform: none;
    }

    .pi-hero-background,
    .pi-hero-objects,
    .pi-hero-story,
    .pi-hero-story-inner {
      background: transparent;
    }

    /* 背景画像は固定。スクロール中のscale・translateは行わない */
    .pi-hero-background img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transform: none !important;
      -webkit-transform: none !important;
      will-change: auto;
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }

    /* SVG内部の常時再描画は停止。形だけを残す */
    .pi-orbit-float,
    .pi-orbit-breathe,
    .pi-orbit-turn,
    .pi-ribbon-float,
    .pi-ribbon-breathe,
    .pi-object-flow-line,
    .pi-echo-float,
    .pi-echo-arc,
    .pi-echo-dot,
    .pi-echo-dot-ring {
      animation: none !important;
    }

    .pi-flow-particle {
      display: none !important;
    }

    .pi-object-orbit-broken {
      stroke-dashoffset: 0;
    }

    .pi-object-orbit-broken-secondary {
      stroke-dashoffset: 80;
    }

    .pi-object-flow-line {
      stroke-dashoffset: -40;
    }

    .pi-hero-object-layer {
      will-change: auto;
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }

    /* 楕円と斜めの面だけを、ごく小さく低速で漂わせる */
    .pi-hero-orbit-layer {
      opacity: 0.7;
      transform: translate3d(0, 0, 0);
      animation:
        piHeroAmbientOrbit
        28s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-hero-ribbon-layer {
      opacity: 0.5;
      transform: translate3d(0, 0, 0);
      animation:
        piHeroAmbientRibbon
        34s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate;
    }

    .pi-hero-echo-layer {
      opacity: 0.5;
      transform: none;
      animation: none;
    }

    @keyframes piHeroAmbientOrbit {
      0% {
        transform: translate3d(-4px, 3px, 0);
      }

      100% {
        transform: translate3d(7px, -5px, 0);
      }
    }

    @keyframes piHeroAmbientRibbon {
      0% {
        transform: translate3d(5px, -3px, 0);
      }

      100% {
        transform: translate3d(-6px, 5px, 0);
      }
    }

    /* 最終形は正方形ではなく円 */
    .pi-hero-core {
      border-radius: 50%;
      will-change: auto;
    }

    /* =========================================================
       OPENING：黒い長方形 → 中央の円

       120vw × 120vhの単独レイヤーを中央へ縮小する。
       scale値は読み込み時に一度だけ計算するため、
       requestAnimationFrameやスクロール監視は使用しない。
    ========================================================= */

    .pi-hero-opening-shape {
      position: fixed;
      top: var(--pi-first-view-center-y);
      left: 50%;
      z-index: 110;

      display: none;
      width: 120vw;
      height: 120vh;
      height: 120svh;

      border-radius: 0;
      background: #01040d;
      transform:
        translate3d(-50%, -50%, 0)
        scale3d(1, 1, 1);
      transform-origin: center center;

      pointer-events: none;
    }

    .pi-hero-section.is-opening .pi-hero-opening-shape {
      display: block;
      will-change: transform, border-radius, background-color;
      animation:
        piHeroOpeningMorphToCircle
        1.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
    }

    .pi-hero-section.is-opened .pi-hero-opening-shape {
      display: none;
    }

    @keyframes piHeroOpeningMorphToCircle {
      0%,
      29% {
        border-radius: 0;
        background: #01040d;
        transform:
          translate3d(-50%, -50%, 0)
          scale3d(1, 1, 1);
      }

      67% {
        border-radius: 34%;
        background: #07111e;
      }

      84% {
        border-radius: 50%;
        background: #263a52;
      }

      100% {
        border-radius: 50%;
        background: #9ec1c8;
        transform:
          translate3d(-50%, -50%, 0)
          scale3d(
            var(--pi-opening-scale-x, 0.1),
            var(--pi-opening-scale-y, 0.16),
            1
          );
      }
    }

    /* 下にある静的な円を最後だけ表示し、完全に同じ位置で引き継ぐ */
    .pi-hero-section.is-opening .pi-hero-core {
      border-radius: 50%;
      opacity: 0;
      animation:
        piHeroCoreCircleHandoff
        1.9s
        linear
        both;
    }

    @keyframes piHeroCoreCircleHandoff {
      0%,
      88% {
        opacity: 0;
      }

      96%,
      100% {
        opacity: var(--pi-core-opacity);
      }
    }

    /* ローディング表示は収束が始まる前に静かに消す */
    .pi-hero-loading {
      animation:
        piHeroLoadingFadeCircle
        1.9s
        linear
        both;
    }

    .pi-hero-loading-line::after {
      animation:
        piHeroLoadingProgressCircle
        0.68s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
    }

    @keyframes piHeroLoadingFadeCircle {
      0%,
      29% {
        opacity: 1;
      }

      43%,
      100% {
        opacity: 0;
      }
    }

    @keyframes piHeroLoadingProgressCircle {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(0);
      }
    }

    /* blurを使わず、コピーはopacity＋小さな移動だけで出す */
    .pi-hero-main-title-line,
    .pi-hero-main-subtitle-text {
      animation-name: piHeroCopyRevealBalanced;
    }

    @keyframes piHeroCopyRevealBalanced {
      0%,
      22% {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    .pi-hero-cta-link {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    /* スマホ・タッチ端末では背景図形のみ静止。開幕演出は残す */
    @media (max-width: 767px), (hover: none), (pointer: coarse) {
      .pi-hero-background img {
        width: 100%;
        height: 100%;
        object-position: 58% center;
      }

      .pi-hero-orbit-layer,
      .pi-hero-ribbon-layer,
      .pi-hero-echo-layer {
        animation: none !important;
        transform: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pi-hero-opening-shape {
        display: none !important;
        animation: none !important;
      }

      .pi-hero-section.is-opening .pi-hero-core {
        opacity: var(--pi-core-opacity);
        animation: none !important;
      }

      .pi-hero-orbit-layer,
      .pi-hero-ribbon-layer,
      .pi-hero-echo-layer {
        animation: none !important;
        transform: none !important;
      }
    }

    /* =========================================================
       SEAMLESS OPENING HANDOFF — COMPLETE STABILITY OVERRIDES
       - 背景画像を読み込み・decode・事前描画してから開幕
       - overflowを変更せず、スクロール入力だけ一時停止
       - 開幕円と通常円を実測値で完全一致
       - 背景・円・stickyのレイアウトを受け渡し時に変更しない
       - 開幕レイヤーは同色の通常円へ短くクロスフェードしてから削除
       - 背景の低速アニメーションは受け渡し完了後に開始
    ========================================================= */

    /* 開幕中も通常時と同じ重なり順を維持する */
    .pi-hero-section.is-opening .pi-hero-sticky {
      z-index: 1;
    }

    .pi-hero-section.is-opening .pi-hero-first-view {
      z-index: 7;
    }

    .pi-hero-section.is-opening .pi-hero-core {
      z-index: 4;
      opacity: var(--pi-core-opacity);
      animation: none !important;
    }

    /* overflow変更によるスクロールバー幅の変化を発生させない */
    .pi-hero-scroll-lock,
    .pi-hero-scroll-lock body {
      overflow: initial;
    }

    /* 背景は最初から完成位置で描画し、クラス切替で一切動かさない */
    .pi-hero-background,
    .pi-hero-background img,
    .pi-hero-objects,
    .pi-hero-sticky {
      opacity: 1;
      visibility: visible;
    }

    .pi-hero-background img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transform: none !important;
      -webkit-transform: none !important;
      animation: none !important;
      transition: none !important;
      will-change: auto;
    }

    /* 背景図形は開幕〜受け渡し中は完全静止 */
    .pi-hero-orbit-layer,
    .pi-hero-ribbon-layer,
    .pi-hero-echo-layer {
      animation: none !important;
      transform: none !important;
      transition: none !important;
      will-change: auto;
    }

    /* 受け渡し完了後のみ、0pxからごく小さく動き始める */
    .pi-hero-section.is-ambient-ready .pi-hero-orbit-layer {
      animation:
        piHeroAmbientOrbitStable
        30s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate !important;
    }

    .pi-hero-section.is-ambient-ready .pi-hero-ribbon-layer {
      animation:
        piHeroAmbientRibbonStable
        36s
        cubic-bezier(0.45, 0, 0.55, 1)
        infinite
        alternate !important;
    }

    @keyframes piHeroAmbientOrbitStable {
      0% {
        transform: translate3d(0, 0, 0);
      }

      100% {
        transform: translate3d(6px, -4px, 0);
      }
    }

    @keyframes piHeroAmbientRibbonStable {
      0% {
        transform: translate3d(0, 0, 0);
      }

      100% {
        transform: translate3d(-5px, 4px, 0);
      }
    }

    /* 通常円は開幕前から完成位置に存在させる */
    .pi-hero-core {
      border-radius: 50%;
      background: #9ec1c8;
      opacity: var(--pi-core-opacity);
      animation: none !important;
      transition: none !important;
      will-change: auto;
    }

    /*
     * 黒い長方形は静止状態で先に表示する。
     * 背景画像のdecodeとレイアウト確定後にだけアニメーションを開始する。
     * top/leftと最終scaleはJSで通常円の実測値から設定する。
     */
    .pi-hero-opening-shape,
    .pi-hero-section.is-opening .pi-hero-opening-shape {
      position: fixed;
      top: var(--pi-opening-target-y, 54.5vh);
      left: var(--pi-opening-target-x, 50vw);
      z-index: 99990;

      display: block;
      width: 120vw;
      height: 120vh;
      height: 120svh;

      border-radius: 0;
      opacity: 1;
      background: #01040d;

      transform:
        translate3d(-50%, -50%, 0)
        scale3d(1, 1, 1);
      -webkit-transform:
        translate3d(-50%, -50%, 0)
        scale3d(1, 1, 1);
      transform-origin: center center;

      animation: none !important;
      transition: none;
      will-change: auto;
      pointer-events: none;
    }

    .pi-hero-section.is-opening.is-opening-ready
      .pi-hero-opening-shape {
      will-change: transform, border-radius, background-color;
      animation:
        piHeroOpeningMorphToCircleStable
        1.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        both !important;
    }

    /* 同じ円へ受け渡す際は、位置や寸法を変えずopacityだけを落とす */
    .pi-hero-opening-shape.is-handoff {
      opacity: 0;
      transition: opacity 130ms linear;
      will-change: opacity;
    }

    @keyframes piHeroOpeningMorphToCircleStable {
      0%,
      29% {
        border-radius: 0;
        background: #01040d;
        transform:
          translate3d(-50%, -50%, 0)
          scale3d(1, 1, 1);
      }

      67% {
        border-radius: 34%;
        background: #07111e;
      }

      84% {
        border-radius: 50%;
        background: #263a52;
      }

      100% {
        border-radius: 50%;
        background: #9ec1c8;
        transform:
          translate3d(-50%, -50%, 0)
          scale3d(
            var(--pi-opening-scale-x, 0.1),
            var(--pi-opening-scale-y, 0.16),
            1
          );
      }
    }

    /* ローディングも画像準備後の開幕開始に同期 */
    .pi-hero-loading {
      z-index: 99991;
      opacity: 1;
      animation: none !important;
      transition: none;
    }

    .pi-hero-loading-line::after {
      animation: none !important;
      transform: scaleX(var(--pi-loading-progress, 0));
      transform-origin: left center;
      transition: none;
    }

    /*
     * 数字と進捗線が100に到達するまでは、黒い長方形を完全静止させる。
     * 100を短く見せた後にだけ is-opening-ready を付与し、円への収束を開始する。
     */
    .pi-hero-section.is-opening.is-opening-ready
      .pi-hero-loading {
      animation:
        piHeroLoadingFadeCircleStable
        1.9s
        linear
        both !important;
    }

    .pi-hero-section.is-opening.is-opening-ready
      .pi-hero-loading-line::after {
      animation: none !important;
      transform: scaleX(1);
    }

    @keyframes piHeroLoadingFadeCircleStable {
      0%,
      8% {
        opacity: 1;
      }

      24%,
      100% {
        opacity: 0;
      }
    }

    /* コピーはページ読込時ではなく、受け渡し完了後に開始する */
    .pi-hero-main-title-line,
    .pi-hero-main-subtitle-text {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
      animation: none !important;
    }

    .pi-hero-section.is-copy-ready
      .pi-hero-main-title-line:nth-child(1) {
      animation:
        piHeroCopyRevealStable
        1.35s
        cubic-bezier(0.16, 1, 0.3, 1)
        0s
        both !important;
    }

    .pi-hero-section.is-copy-ready
      .pi-hero-main-title-line:nth-child(2) {
      animation:
        piHeroCopyRevealStable
        1.35s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.3s
        both !important;
    }

    .pi-hero-section.is-copy-ready
      .pi-hero-main-subtitle-text {
      animation:
        piHeroCopyRevealStable
        1.45s
        cubic-bezier(0.16, 1, 0.3, 1)
        0.68s
        both !important;
    }

    @keyframes piHeroCopyRevealStable {
      from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    .pi-hero-scroll {
      opacity: 0;
      animation: none !important;
    }

    .pi-hero-section.is-copy-ready .pi-hero-scroll {
      animation:
        piHeroScrollFadeIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.75s
        both !important;
    }

    @media (max-width: 767px), (hover: none), (pointer: coarse) {
      .pi-hero-section.is-ambient-ready .pi-hero-orbit-layer,
      .pi-hero-section.is-ambient-ready .pi-hero-ribbon-layer,
      .pi-hero-section.is-ambient-ready .pi-hero-echo-layer {
        animation: none !important;
        transform: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pi-hero-opening-shape {
        display: none !important;
      }

      .pi-hero-main-title-line,
      .pi-hero-main-subtitle-text {
        opacity: 1;
        transform: none;
        animation: none !important;
      }

      .pi-hero-scroll {
        opacity: 1;
        animation: none !important;
      }
    }

    /* =========================================================
       MOBILE TYPOGRAPHY REFINEMENT
       - 背景画像・白い図形・世界観は前回版のまま維持
       - 奇抜な位置ずらしをやめ、一本の中央軸で端正に再配置
       - 文字サイズだけでなく、幅・改行・字間・行間をまとめて設計
       - Noto Serif JP / Noto Sans JPをスマホ版で明示的に使用
       - オープニングは画面外まで十分に覆い、ヘッダーより前面に固定
    ========================================================= */

    /* 開幕中はブラウザ最外周まで黒で統一し、一瞬の白抜けも防ぐ */
    html.pi-hero-opening-active,
    html.pi-hero-opening-active body {
      background: #01040d !important;
    }

    html.pi-hero-opening-active #piHeader,
    #piHeader.is-hero-pending {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    html.pi-hero-opening-active #piHeader::before,
    html.pi-hero-opening-active #piHeader::after,
    #piHeader.is-hero-pending::before,
    #piHeader.is-hero-pending::after {
      opacity: 0 !important;
    }

    @media (max-width: 767px) {
      .pi-hero-section {
        --pi-first-view-center-y: 54%;
        --pi-mobile-core-hold: 0px;
        --pi-mobile-core-scale: 1;
        --pi-mobile-core-opacity: 0.94;
        --pi-mobile-title-shift: 0px;
        --pi-mobile-title-opacity: 1;
        --pi-mobile-subtitle-shift: 0px;
        --pi-mobile-subtitle-opacity: 1;

        margin-top: 0 !important;
        padding-top: 0 !important;
      }

      .pi-hero-track {
        min-height: 198vh;
        margin-top: 0 !important;
        padding-top: 0 !important;
      }

      .pi-hero-sticky,
      .pi-hero-first-view {
        top: 0;
        margin-top: 0 !important;
        padding-top: 0 !important;
      }

      /* 背景と図形は前回版の見え方をそのまま維持 */
      .pi-hero-background img {
        width: 100%;
        height: 100%;
        object-position: 61% center;
      }

      .pi-hero-object-layer {
        inset: -1% -35% -1% -23%;
        transform-origin: 67% 49%;
      }

      .pi-hero-orbit-layer {
        opacity: 0.52;
      }

      .pi-hero-ribbon-layer {
        opacity: 0.36;
      }

      .pi-hero-echo-layer {
        opacity: 0.26;
      }

      .pi-hero-first-view {
        height: 100vh;
        height: 100svh;
      }

      .pi-hero-main {
        inset: 0;
      }

      /* 前回追加した斜めの補助線は削除。文字組みそのものを主役にする */
      .pi-hero-main::before,
      .pi-hero-main::after {
        content: none;
        display: none;
      }

      /* =======================================================
         FIRST VIEW：タイトル → 円 → サブコピーを一本の中央軸へ
      ======================================================= */

      .pi-hero-main-title {
        top: 31.5%;
        left: 50%;
        width: min(86vw, 344px);
        max-width: none;
        margin: 0;

        color: #17263a;
        text-align: center;

        font-family:
          "Noto Serif JP",
          "Hiragino Mincho ProN",
          "Yu Mincho",
          YuMincho,
          serif;
        font-size: clamp(1.28rem, 5.55vw, 1.46rem);
        font-weight: 500;
        line-height: 1.54;
        letter-spacing: 0.038em;
        font-kerning: normal;
        font-feature-settings: "palt" 1;

        transform:
          translate3d(
            -50%,
            calc(-50% + var(--pi-mobile-title-shift)),
            0
          );
        transform-origin: center;
        opacity: var(--pi-mobile-title-opacity);
        will-change: transform, opacity;
      }

      .pi-hero-main-title-line {
        display: block;
        width: max-content;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        white-space: nowrap;
      }

      .pi-hero-main-title-line + .pi-hero-main-title-line {
        margin-top: 0.05em;
        margin-right: auto;
        margin-left: auto;
      }

      /* 開幕で生まれる円は中央に固定し、上下のコピーをつなぐ基準点にする */
      .pi-hero-section .pi-hero-core {
        top: 53.8%;
        left: 50%;
        width: clamp(80px, 22.8vw, 94px);
        opacity: var(--pi-mobile-core-opacity);
        transform:
          translate3d(-50%, -50%, 0)
          translate3d(0, var(--pi-mobile-core-hold), 0)
          scale(var(--pi-mobile-core-scale)) !important;
        transform-origin: center;
        will-change: transform, opacity;
      }

      .pi-hero-main-subtitle {
        top: 70.2%;
        right: auto;
        left: 50%;
        width: min(84vw, 326px);
        max-width: none;
        margin: 0;

        color: rgba(23, 38, 58, 0.7);
        text-align: center;
        white-space: normal;
        text-wrap: balance;

        font-family:
          "Noto Serif JP",
          "Hiragino Mincho ProN",
          "Yu Mincho",
          YuMincho,
          serif;
        font-size: clamp(0.69rem, 2.95vw, 0.79rem);
        font-weight: 400;
        line-height: 1.82;
        letter-spacing: 0.035em;
        font-kerning: normal;
        font-feature-settings: "palt" 1;

        transform:
          translate3d(
            -50%,
            calc(-50% + var(--pi-mobile-subtitle-shift)),
            0
          );
        transform-origin: center;
        opacity: var(--pi-mobile-subtitle-opacity);
        will-change: transform, opacity;
      }

      .pi-hero-main-subtitle-text {
        display: block;
        width: 100%;
        white-space: normal;
      }

      /* スクロールサインも中央軸へ戻し、サイズだけ小さく保つ */
      .pi-hero-scroll {
        bottom: 18px;
        left: 50%;
        width: 46px;
        height: 60px;
        transform: translateX(-50%);
      }

      .pi-hero-section.is-copy-ready .pi-hero-scroll {
        animation:
          piHeroScrollFadeIn
          0.9s
          cubic-bezier(0.22, 1, 0.36, 1)
          1.72s
          both !important;
      }

      .pi-hero-scroll-label {
        left: 50%;
        transform: translateX(-50%);
        font-family:
          "Noto Sans JP",
          "Helvetica Neue",
          Helvetica,
          Arial,
          sans-serif;
        font-size: 0.47rem;
        font-weight: 500;
        letter-spacing: 0.21em;
      }

      .pi-hero-scroll-line {
        top: 16px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      .pi-hero-scroll-dot {
        top: 20px;
        left: 50%;
      }

      /* =======================================================
         STORY：中央揃えを維持しながら、文字密度を適正化
      ======================================================= */

      .pi-hero-story {
        width: min(88vw, 430px);
        max-width: none;
        padding: 13vh 0 18vh;
      }

      .pi-hero-story::before,
      .pi-hero-story::after {
        content: none;
        display: none;
      }

      .pi-hero-story-inner,
      .pi-hero-story-block {
        width: 100%;
        max-width: none;
      }

      .pi-hero-description {
        width: 100%;
        max-width: none;
        margin-right: auto;
        margin-left: auto;

        color: rgba(23, 38, 58, 0.82);
        text-align: center;
        white-space: normal;
        text-wrap: pretty;
        font-kerning: normal;
        font-feature-settings: "palt" 1;
      }

      /* 1段落目は静かな導入文。大見出し化せず、明朝の品だけを残す */
      .pi-hero-description:first-child {
        width: min(100%, 26em);
        margin-right: auto;
        margin-left: auto;

        font-family:
          "Noto Serif JP",
          "Hiragino Mincho ProN",
          "Yu Mincho",
          YuMincho,
          serif;
        font-size: clamp(1.04rem, 4.45vw, 1.18rem);
        font-weight: 400;
        line-height: 1.92;
        letter-spacing: 0.04em;
      }

      /* 2段落目は小さなゴシックで、文章として端正に読ませる */
      .pi-hero-description:nth-child(2) {
        width: min(100%, 32em);
        margin-top: 42px;
        margin-right: auto;
        margin-left: auto;

        font-family:
          "Noto Sans JP",
          "Hiragino Sans",
          "Yu Gothic",
          "Noto Sans",
          sans-serif;
        font-size: clamp(0.84rem, 3.55vw, 0.91rem);
        font-weight: 400;
        line-height: 1.98;
        letter-spacing: 0.028em;
      }

      .pi-hero-description + .pi-hero-description {
        margin-top: 42px;
      }

      .pi-hero-description br {
        display: none;
      }

      /* JSが有効な場合だけ段階表示。配置は動かさず、短い上昇だけにする */
      .pi-hero-section.has-mobile-editorial-motion
        .pi-hero-story
        .pi-hero-description,
      .pi-hero-section.has-mobile-editorial-motion
        .pi-hero-story
        .pi-hero-cta,
      .pi-hero-section.has-mobile-editorial-motion
        .pi-hero-story
        .pi-hero-mark {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        transition:
          opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .pi-hero-section.has-mobile-editorial-motion.is-mobile-story-visible
        .pi-hero-description:first-child {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: 0s;
      }

      .pi-hero-section.has-mobile-editorial-motion.is-mobile-story-visible
        .pi-hero-description:nth-child(2) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.14s;
      }

      .pi-hero-section.has-mobile-editorial-motion.is-mobile-story-visible
        .pi-hero-cta {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.26s;
      }

      .pi-hero-section.has-mobile-editorial-motion.is-mobile-story-visible
        .pi-hero-mark {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.34s;
      }

      /* =======================================================
         CTA：PC版の丸い導線を保ち、スマホだけ適切な大きさへ
      ======================================================= */

      .pi-hero-cta {
        display: flex;
        justify-content: center;
        margin-top: 42px;
      }

      .pi-hero-cta-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: min(86vw, 320px);
        min-width: 0;
        min-height: 52px;
        padding: 13px 21px;

        overflow: hidden;
        border: 1px solid rgba(23, 38, 58, 0.28);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        color: #17263a;

        font-family:
          "Noto Sans JP",
          "Hiragino Sans",
          "Yu Gothic",
          sans-serif;
        font-size: clamp(0.78rem, 3.28vw, 0.86rem);
        font-weight: 500;
        line-height: 1.45;
        letter-spacing: 0.042em;
        text-align: center;
      }

      .pi-hero-cta-link::before {
        content: "";
        display: block;
      }

      .pi-hero-cta-link::after {
        content: none;
        display: none;
      }

      .pi-hero-cta-link:hover {
        color: #ffffff;
        border-color: #17263a;
        transform: translateY(-2px);
      }

      .pi-hero-mark {
        margin-top: 84px;
        text-align: center;
      }

      .pi-hero-mark img {
        width: min(148px, 42vw);
        opacity: 0.92;
      }

      /* 黒い開幕面は最終円がどこにあっても全画面を確実に覆う */
      .pi-hero-opening-shape,
      .pi-hero-section.is-opening .pi-hero-opening-shape {
        width: 220vmax;
        height: 220vmax;
        max-width: none;
        max-height: none;
        z-index: 2147483000;
        clip-path: none;
        -webkit-clip-path: none;
      }

      .pi-hero-loading {
        z-index: 2147483001;
      }
    }

    /* 小型端末でも構成は変えず、文字と間隔だけ少し調整 */
    @media (max-width: 374px) {
      .pi-hero-main-title {
        top: 31%;
        width: calc(100% - 36px);
        font-size: clamp(1.18rem, 5.65vw, 1.31rem);
        letter-spacing: 0.03em;
      }

      .pi-hero-section .pi-hero-core {
        top: 53.5%;
        width: clamp(74px, 22vw, 84px);
      }

      .pi-hero-main-subtitle {
        top: 70.5%;
        width: calc(100% - 42px);
        font-size: clamp(0.65rem, 2.9vw, 0.72rem);
      }

      .pi-hero-story {
        width: calc(100% - 38px);
      }

      .pi-hero-description:first-child {
        font-size: clamp(0.99rem, 4.45vw, 1.07rem);
      }

      .pi-hero-cta-link {
        width: 100%;
        font-size: 0.77rem;
        letter-spacing: 0.032em;
      }
    }

    /* 低い画面では上下の衝突だけを防ぐ */
    @media (max-width: 767px) and (max-height: 620px) {
      .pi-hero-main-title {
        top: 27.5%;
      }

      .pi-hero-section .pi-hero-core {
        top: 51.5%;
        width: clamp(68px, 17vw, 78px);
      }

      .pi-hero-main-subtitle {
        top: 72.5%;
        width: min(80vw, 310px);
      }

      .pi-hero-scroll {
        display: none;
      }
    }

    @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
      .pi-hero-main-title,
      .pi-hero-main-subtitle,
      .pi-hero-section .pi-hero-core {
        will-change: auto;
      }

      .pi-hero-section.has-mobile-editorial-motion
        .pi-hero-story
        .pi-hero-description,
      .pi-hero-section.has-mobile-editorial-motion
        .pi-hero-story
        .pi-hero-cta,
      .pi-hero-section.has-mobile-editorial-motion
        .pi-hero-story
        .pi-hero-mark {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 04 / 02-problem
   Original cascade position: 4 of 11
========================================================= */
    .pi-problem-section {
      --pi-bg: #041327;
      --pi-bg-deep: #020b1c;

      /* アイコン画像の背景色に合わせたカード色 */
      --pi-card: #040d28;
      --pi-card-border: rgba(141, 182, 255, 0.12);

      --pi-text: #f7f9ff;
      --pi-text-soft: rgba(247, 249, 255, 0.72);
      --pi-text-muted: rgba(247, 249, 255, 0.54);
      --pi-blue: rgba(141, 182, 255, 0.78);

      position: relative;
      width: 100vw;
      min-height: 118vh;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      background: var(--pi-bg);
      color: var(--pi-text);

      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;

      letter-spacing: 0.05em;
      isolation: isolate;
      box-sizing: border-box;

      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      font-synthesis: none;
      font-kerning: normal;
      line-break: strict;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .pi-problem-section *,
    .pi-problem-section *::before,
    .pi-problem-section *::after {
      box-sizing: border-box;
    }

    .pi-problem-bg {
      position: absolute;
      inset: 0;
      z-index: 0;

      background-image:
        url("../images/02back.png");
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;

      transform: scale(1.01);
      opacity: 0.76;
    }

    .pi-problem-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;

      background:
        linear-gradient(
          90deg,
          rgba(2, 8, 22, 0.98) 0%,
          rgba(2, 8, 22, 0.93) 30%,
          rgba(2, 8, 22, 0.72) 56%,
          rgba(2, 8, 22, 0.44) 100%
        ),
        linear-gradient(
          180deg,
          rgba(2, 8, 22, 0.10) 0%,
          rgba(2, 8, 22, 0.36) 50%,
          rgba(2, 8, 22, 0.86) 100%
        );
    }

    .pi-problem-inner {
      position: relative;
      z-index: 2;

      width: min(84vw, 1320px);
      margin: 0 auto;
      padding: 142px 0 124px;
    }

    .pi-problem-copy {
      width: min(960px, 100%);
    }

    .pi-problem-copy h2 {
      margin: 0;
      color: #ffffff;

      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;

      text-wrap: balance;
    }

    .pi-problem-copy p {
      margin: 40px 0 0;
      color: var(--pi-text-soft);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    .pi-problem-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;

      margin-top: 88px;
    }

    .pi-problem-card {
      position: relative;
      min-height: 330px;
      padding: 40px 36px 36px;

      border: 1px solid var(--pi-card-border);
      border-radius: 0;

      background: var(--pi-card);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 14px 36px rgba(0, 0, 0, 0.18);

      overflow: hidden;

      transition:
        transform 0.32s ease,
        border-color 0.32s ease,
        box-shadow 0.32s ease;
    }

    .pi-problem-card:hover {
      transform: translateY(-2px);
      border-color: rgba(141, 182, 255, 0.20);

      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 18px 42px rgba(0, 0, 0, 0.22);
    }

    .pi-problem-card__meta {
      display: inline-flex;
      align-items: center;
      gap: 12px;

      margin-bottom: 22px;
    }

    .pi-problem-card__signal {
      position: relative;

      width: 10px;
      height: 10px;
      flex: 0 0 10px;

      border-radius: 50%;

      background: rgba(141, 182, 255, 0.20);
      box-shadow: 0 0 0 1px rgba(141, 182, 255, 0.16);

      overflow: visible;
    }

    .pi-problem-card__signal::before,
    .pi-problem-card__signal::after {
      content: "";

      position: absolute;
      inset: 0;

      border-radius: 50%;
      pointer-events: none;
    }

    .pi-problem-card__signal::before {
      background: rgba(175, 209, 255, 0.94);

      opacity: 0.18;
      transform: scale(0.72);

      animation:
        piProblemSignalCore 4.8s ease-in-out infinite;
    }

    .pi-problem-card__signal::after {
      border: 1px solid rgba(175, 209, 255, 0.42);

      opacity: 0;
      transform: scale(0.6);

      animation:
        piProblemSignalRing 4.8s ease-out infinite;
    }

    .pi-problem-card:nth-child(1)
      .pi-problem-card__signal::before,
    .pi-problem-card:nth-child(1)
      .pi-problem-card__signal::after {
      animation-delay: 0s;
    }

    .pi-problem-card:nth-child(2)
      .pi-problem-card__signal::before,
    .pi-problem-card:nth-child(2)
      .pi-problem-card__signal::after {
      animation-delay: 1.6s;
    }

    .pi-problem-card:nth-child(3)
      .pi-problem-card__signal::before,
    .pi-problem-card:nth-child(3)
      .pi-problem-card__signal::after {
      animation-delay: 3.2s;
    }

    @keyframes piProblemSignalCore {
      0%,
      24%,
      100% {
        opacity: 0.18;
        transform: scale(0.72);
      }

      8%,
      14% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes piProblemSignalRing {
      0%,
      5%,
      100% {
        opacity: 0;
        transform: scale(0.6);
      }

      8% {
        opacity: 0.55;
        transform: scale(0.9);
      }

      20% {
        opacity: 0;
        transform: scale(2.4);
      }
    }

    .pi-problem-card__icon {
      position: absolute;
      z-index: 1;

      right: -28px;
      top: 50%;

      width: 205px;
      height: 205px;

      transform: translateY(-50%);
      pointer-events: none;
    }

    .pi-problem-card__icon img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: contain;
      opacity: 1;
      filter: none;
      mix-blend-mode: normal;

      transition: transform 0.32s ease;
    }

    .pi-problem-card:hover .pi-problem-card__icon img {
      transform: translateY(-2px) scale(1.015);
    }

    .pi-problem-card__body {
      position: relative;
      z-index: 2;

      min-width: 0;
      padding-right: 58px;

      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .pi-problem-card__num {
      display: inline-block;
      color: var(--pi-blue);

      font-size: 16.5px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.18em;
    }

    .pi-problem-card h3 {
      margin: 0 0 22px;
      color: rgba(255, 255, 255, 0.94);

      font-size: 22.5px;
      font-weight: 600;
      line-height: 1.68;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    .pi-problem-card p {
      margin: 0;
      color: var(--pi-text-muted);

      font-size: 18.5px;
      font-weight: 400;
      line-height: 1.9;
      letter-spacing: 0.05em;

      text-wrap: pretty;
    }

    .pi-problem-closing {
      position: relative;

      width: min(1120px, 100%);
      margin: 86px 0 0;

      color: rgba(255, 255, 255, 0.90);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1100px) {
      .pi-problem-inner {
        width: min(88vw, 920px);
        padding-top: 124px;
        padding-bottom: 104px;
      }

      .pi-problem-copy {
        width: min(860px, 100%);
      }

      .pi-problem-copy h2 {
        font-size: clamp(30px, 4vw, 40px);
      }

      .pi-problem-copy p {
        font-size: 18px;
      }

      .pi-problem-cards {
        grid-template-columns: 1fr;
        gap: 18px;

        margin-top: 72px;
      }

      .pi-problem-card {
        min-height: 270px;
        padding: 38px 38px 36px;
      }

      .pi-problem-card__icon {
        right: -18px;

        width: 220px;
        height: 220px;
      }

      .pi-problem-card__body {
        padding-right: 190px;
      }

      .pi-problem-card h3 {
        font-size: 22px;
      }

      .pi-problem-card p {
        font-size: 18px;
      }

      .pi-problem-closing {
        font-size: 18px;
      }
    }

    /* =========================================================
       SMARTPHONE
       PC版の構造・世界観を残しながら、
       文字組みとカード密度のみスマホ用に再設計
    ========================================================= */

    @media (max-width: 780px) {
      .pi-problem-section {
        min-height: auto;
      }

      .pi-problem-bg {
        background-position: 70% top;
        transform: scale(1.015);
        opacity: 0.64;
      }

      .pi-problem-overlay {
        background:
          linear-gradient(
            90deg,
            rgba(2, 8, 22, 0.99) 0%,
            rgba(2, 8, 22, 0.955) 58%,
            rgba(2, 8, 22, 0.82) 100%
          ),
          linear-gradient(
            180deg,
            rgba(2, 8, 22, 0.22) 0%,
            rgba(2, 8, 22, 0.50) 45%,
            rgba(2, 8, 22, 0.92) 100%
          );
      }

      .pi-problem-inner {
        width: min(calc(100% - 40px), 560px);
        padding: 76px 0 68px;
      }

      .pi-problem-copy {
        width: 100%;
      }

      .pi-problem-copy h2 {
        max-width: 100%;
        margin: 0;

        font-size: clamp(21px, 5.75vw, 23px);
        font-weight: 600;
        line-height: 1.52;
        letter-spacing: 0.04em;

        text-align: left;
        text-wrap: pretty;
        word-break: normal;
        overflow-wrap: normal;
      }

      /*
        PC版の最初の強制改行だけ解除。
        「物語・テーマ」前の意味のある改行は維持する。
      */
      .pi-problem-heading-break--desktop {
        display: none;
      }

      .pi-problem-copy p {
        max-width: 100%;
        margin: 24px 0 0;

        font-size: clamp(14px, 3.7vw, 14.5px);
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0.028em;

        text-align: left;
        text-wrap: pretty;
        word-break: normal;
      }

      .pi-problem-cards {
        grid-template-columns: 1fr;
        gap: 12px;

        margin-top: 42px;
      }

      .pi-problem-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 96px;
        grid-template-areas: "body icon";
        align-items: center;
        column-gap: 12px;

        width: 100%;
        min-height: 0;
        padding: 22px 17px 22px 20px;

        border-color: rgba(141, 182, 255, 0.13);

        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.016),
          0 10px 26px rgba(0, 0, 0, 0.15);
      }

      .pi-problem-card__body {
        grid-area: body;

        width: 100%;
        min-width: 0;
        padding-right: 0;
      }

      .pi-problem-card__icon {
        position: relative;
        grid-area: icon;
        align-self: center;
        justify-self: end;

        top: auto;
        right: auto;

        width: 96px;
        height: 96px;
        margin-right: -8px;

        transform: none;
      }

      .pi-problem-card__icon img {
        width: 100%;
        height: 100%;
      }

      .pi-problem-card__meta {
        gap: 8px;
        margin-bottom: 12px;
      }

      .pi-problem-card__signal {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
      }

      .pi-problem-card__num {
        font-size: clamp(11.5px, 3vw, 12.5px);
        line-height: 1;
        letter-spacing: 0.16em;
      }

      .pi-problem-card h3 {
        max-width: 100%;
        margin: 0 0 9px;

        font-size: clamp(15.5px, 4.2vw, 16.5px);
        font-weight: 600;
        line-height: 1.46;
        letter-spacing: 0.03em;

        text-wrap: pretty;
        word-break: normal;
      }

      .pi-problem-card p {
        max-width: 100%;
        margin: 0;

        font-size: clamp(13.5px, 3.6vw, 14px);
        font-weight: 400;
        line-height: 1.72;
        letter-spacing: 0.022em;

        text-wrap: pretty;
        word-break: normal;
      }

      .pi-problem-closing {
        width: 100%;
        margin: 42px 0 0;

        font-size: clamp(14px, 3.7vw, 14.5px);
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0.028em;

        text-align: left;
        text-wrap: pretty;
        word-break: normal;
      }
    }

    /* =========================================================
       SMALL SMARTPHONE
       320px〜360px付近の横幅に合わせた微調整
    ========================================================= */

    @media (max-width: 360px) {
      .pi-problem-inner {
        width: calc(100% - 32px);
        padding-top: 68px;
        padding-bottom: 60px;
      }

      .pi-problem-copy h2 {
        font-size: 21px;
        line-height: 1.5;
        letter-spacing: 0.035em;
      }

      .pi-problem-copy p {
        margin-top: 22px;

        font-size: 13.75px;
        line-height: 1.78;
        letter-spacing: 0.024em;
      }

      .pi-problem-cards {
        gap: 10px;
        margin-top: 38px;
      }

      .pi-problem-card {
        grid-template-columns: minmax(0, 1fr) 82px;
        column-gap: 9px;

        padding: 19px 13px 19px 16px;
      }

      .pi-problem-card__icon {
        width: 82px;
        height: 82px;
        margin-right: -6px;
      }

      .pi-problem-card__meta {
        gap: 7px;
        margin-bottom: 10px;
      }

      .pi-problem-card__signal {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
      }

      .pi-problem-card__num {
        font-size: 11.5px;
      }

      .pi-problem-card h3 {
        margin-bottom: 8px;

        font-size: 15.5px;
        line-height: 1.44;
        letter-spacing: 0.026em;
      }

      .pi-problem-card p {
        font-size: 13.25px;
        line-height: 1.7;
        letter-spacing: 0.018em;
      }

      .pi-problem-closing {
        margin-top: 38px;

        font-size: 13.75px;
        line-height: 1.78;
        letter-spacing: 0.024em;
      }
    }

    /* タッチ端末ではPC用のホバー移動を発生させない */
    @media (hover: none), (pointer: coarse) {
      .pi-problem-card:hover {
        transform: none;
        border-color: var(--pi-card-border);

        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.018),
          0 10px 26px rgba(0, 0, 0, 0.15);
      }

      .pi-problem-card:hover .pi-problem-card__icon img {
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pi-problem-card,
      .pi-problem-card__icon img {
        transition: none;
      }

      .pi-problem-card__signal::before,
      .pi-problem-card__signal::after {
        animation: none;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 05 / 03-concept
   Original cascade position: 5 of 11
========================================================= */
    .pi-concept-section {
      --pi-bg: #f5f8fd;
      --pi-navy: #03123a;
      --pi-navy-soft: rgba(3, 18, 58, 0.72);
      --pi-navy-muted: rgba(3, 18, 58, 0.5);
      --pi-blue: #0668f3;
      --pi-blue-mid: #4a96ff;
      --pi-blue-light: #dceaff;
      --pi-bg-image: url("../images/03back.png");

      position: relative;
      width: 100vw;
      min-height: 100svh;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      isolation: isolate;

      background: var(--pi-bg);
      color: var(--pi-navy);

      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;

      font-kerning: normal;
      font-synthesis: none;
      line-break: strict;
      word-break: normal;
      overflow-wrap: break-word;

      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      letter-spacing: 0.05em;
      box-sizing: border-box;
    }

    .pi-concept-section *,
    .pi-concept-section *::before,
    .pi-concept-section *::after {
      box-sizing: border-box;
    }

    .pi-concept-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background-image:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.88) 0%,
          rgba(255, 255, 255, 0.78) 34%,
          rgba(255, 255, 255, 0.56) 68%,
          rgba(255, 255, 255, 0.46) 100%
        ),
        var(--pi-bg-image);

      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;

      transform: scale(1.015);
      transform-origin: center;

      animation:
        pi-concept-bg-drift
        28s
        ease-in-out
        infinite
        alternate;
    }

    .pi-concept-bg::after {
      content: "";
      position: absolute;
      inset: 0;

      background:
        radial-gradient(
          circle at 76% 48%,
          rgba(28, 118, 255, 0.1),
          transparent 32%
        ),
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.08),
          rgba(235, 242, 253, 0.12)
        );
    }

    @keyframes pi-concept-bg-drift {
      0% {
        transform:
          scale(1.015)
          translate3d(-0.18%, -0.12%, 0);
      }

      100% {
        transform:
          scale(1.026)
          translate3d(0.22%, 0.16%, 0);
      }
    }

    .pi-concept-inner {
      position: relative;
      z-index: 2;

      width: min(86vw, 1360px);
      min-height: 100svh;
      margin: 0 auto;
      padding: 126px 0 108px;

      display: grid;
      grid-template-columns:
        minmax(560px, 0.92fr)
        minmax(620px, 1.08fr);

      column-gap: clamp(28px, 3vw, 56px);
      align-items: center;
    }

    .pi-concept-copy {
      width: min(620px, 100%);

      opacity: 0;
      transform: translateY(18px);

      transition:
        opacity 0.85s ease,
        transform 0.95s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-concept-section.is-inview .pi-concept-copy {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-concept-title {
      margin: 0;
      color: var(--pi-navy);

      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;

      text-wrap: balance;
    }

    .pi-concept-title span {
      display: block;
    }

    .pi-concept-lead {
      width: 100%;
      margin: 40px 0 0;

      color: var(--pi-navy-soft);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    .pi-concept-transition {
      width: 100%;
      margin: 28px 0 0;
      padding: 0;

      opacity: 0;
      transform: translateY(10px);

      transition:
        opacity 0.8s ease 0.16s,
        transform 0.9s cubic-bezier(.2, .75, .2, 1) 0.16s;
    }

    .pi-concept-section.is-inview .pi-concept-transition {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-concept-transition p {
      margin: 0;

      color: rgba(3, 18, 58, 0.7);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
    }

    .pi-concept-br--desktop {
      display: inline;
    }

    .pi-concept-visual {
      --public-x: 0px;
      --public-y: 0px;

      position: relative;
      min-width: 0;

      display: grid;
      grid-template-columns:
        clamp(270px, 20.5vw, 310px)
        52px
        clamp(270px, 20.5vw, 310px);

      grid-template-rows: auto auto auto;

      column-gap: 18px;
      row-gap: 6px;

      justify-content: center;
      align-items: center;
      justify-items: center;

      opacity: 0;
      transform: translateY(20px);

      transition:
        opacity 0.9s ease 0.1s,
        transform 1s cubic-bezier(.2, .75, .2, 1) 0.1s;
    }

    .pi-concept-section.is-inview .pi-concept-visual {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-concept-orb-title {
      width: max-content;
      max-width: none;
      margin: 0 0 10px;

      color: var(--pi-navy);

      font-size: 25.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.08em;
      text-align: center;

      white-space: nowrap;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    .pi-concept-orb-title--private {
      grid-column: 1;
      grid-row: 1;
    }

    .pi-concept-orb-title--public {
      grid-column: 3;
      grid-row: 1;

      color: var(--pi-blue);
    }

    .pi-concept-orb {
      position: relative;

      width: clamp(270px, 20.5vw, 310px);
      height: clamp(270px, 20.5vw, 310px);
      min-width: 0;
      min-height: 0;

      border-radius: 50%;
      pointer-events: none;
      transform-style: preserve-3d;
    }

    .pi-concept-orb--private {
      grid-column: 1;
      grid-row: 2;

      transform: none;
    }

    .pi-concept-orb--public {
      grid-column: 3;
      grid-row: 2;

      transform:
        translate3d(
          var(--public-x),
          var(--public-y),
          0
        );

      transition: transform 0.18s ease-out;
    }

    .pi-concept-orb__surface {
      position: absolute;
      inset: 0;

      overflow: hidden;

      border-radius: 50%;
      border: 1px solid rgba(6, 104, 243, 0.2);

      background:
        radial-gradient(
          circle at 42% 34%,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(246, 250, 255, 0.97) 42%,
          rgba(230, 240, 255, 0.92) 100%
        );

      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        0 28px 64px rgba(13, 57, 122, 0.07);
    }

    .pi-private-ring {
      position: absolute;
      left: 50%;
      top: 50%;

      width: 58%;
      height: 58%;

      border: 1px solid rgba(6, 104, 243, 0.12);
      border-radius: 50%;

      transform: translate(-50%, -50%);
    }

    .pi-private-core {
      position: absolute;
      left: 50%;
      top: 50%;

      width: 32px;
      height: 32px;

      border-radius: 50%;

      transform: translate(-50%, -50%);

      background:
        radial-gradient(
          circle at 32% 27%,
          #a9d0ff 0%,
          #0a6df5 68%,
          #0755c4 100%
        );

      box-shadow:
        0 0 0 24px rgba(6, 104, 243, 0.075),
        0 18px 34px rgba(6, 104, 243, 0.18);
    }

    .pi-private-orbit {
      position: absolute;
      left: 50%;
      top: 50%;

      width: var(--orbit-w);
      height: var(--orbit-h);

      border-radius: 50%;

      transform:
        translate(-50%, -50%)
        rotate(var(--orbit-r));
    }

    .pi-private-node {
      position: absolute;
      left: 50%;
      top: -7px;

      width: var(--node-size);
      height: var(--node-size);

      border-radius: 50%;

      transform: translateX(-50%);

      background:
        radial-gradient(
          circle at 32% 28%,
          #d8e9ff 0%,
          #64a5fa 66%,
          #2779e9 100%
        );

      box-shadow:
        0 0 0 7px rgba(6, 104, 243, 0.055),
        0 8px 18px rgba(6, 104, 243, 0.13);
    }

    .pi-private-orbit--a {
      --orbit-w: 72%;
      --orbit-h: 44%;
      --orbit-r: 14deg;
      --orbit-dur: 9s;
      --orbit-dir: normal;
      --node-size: 15px;
      --node-delay: -0.5s;
    }

    .pi-private-orbit--b {
      --orbit-w: 48%;
      --orbit-h: 78%;
      --orbit-r: -34deg;
      --orbit-dur: 12s;
      --orbit-dir: reverse;
      --node-size: 11px;
      --node-delay: -1.1s;
    }

    .pi-private-orbit--c {
      --orbit-w: 86%;
      --orbit-h: 60%;
      --orbit-r: 62deg;
      --orbit-dur: 15s;
      --orbit-dir: normal;
      --node-size: 9px;
      --node-delay: -1.8s;
    }

    .pi-private-orbit--d {
      --orbit-w: 57%;
      --orbit-h: 54%;
      --orbit-r: 116deg;
      --orbit-dur: 7.5s;
      --orbit-dir: reverse;
      --node-size: 12px;
      --node-delay: -0.9s;
    }

    .pi-concept-arrow {
      grid-column: 2;
      grid-row: 2;

      display: grid;
      place-items: center;

      width: 52px;
      height: 52px;

      color: var(--pi-blue);

      font-family: Arial, sans-serif;
      font-size: 51px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0;

      transform: translateY(-1px);
      animation: none;
    }

    .pi-concept-arrow::before {
      content: "→";
      display: block;
    }

    .pi-public-halo {
      position: absolute;
      inset: 4%;

      border-radius: 50%;
      border: 1px solid rgba(6, 104, 243, 0.16);
      border-left-color: transparent;
      border-bottom-color: rgba(6, 104, 243, 0.05);

      animation: pi-public-halo 22s linear infinite;
    }

    .pi-public-mass {
      position: absolute;
      inset: 13%;

      overflow: hidden;

      border: 1px solid rgba(6, 104, 243, 0.2);
      border-radius:
        58% 42% 46% 54% /
        44% 58% 42% 56%;

      background:
        radial-gradient(
          circle at 28% 24%,
          rgba(193, 222, 255, 0.96) 0%,
          transparent 32%
        ),
        radial-gradient(
          circle at 76% 70%,
          rgba(28, 119, 255, 0.28) 0%,
          transparent 38%
        ),
        linear-gradient(
          135deg,
          rgba(235, 245, 255, 0.92),
          rgba(129, 183, 255, 0.56)
        );

      box-shadow:
        inset 0 0 32px rgba(255, 255, 255, 0.38),
        0 24px 50px rgba(6, 104, 243, 0.1);

      animation: pi-public-mass 13s ease-in-out infinite;
    }

    .pi-public-mass::before {
      content: "";

      position: absolute;
      left: -18%;
      top: 18%;

      width: 78%;
      height: 58%;

      border-radius: 50%;

      background:
        linear-gradient(
          120deg,
          rgba(255, 255, 255, 0.76),
          rgba(58, 139, 255, 0.08)
        );

      transform: rotate(-22deg);

      animation: pi-public-sweep 10s ease-in-out infinite;
    }

    .pi-public-layer {
      position: absolute;
      inset: 23%;

      border-radius:
        42% 58% 63% 37% /
        60% 38% 62% 40%;

      border: 1px solid rgba(6, 104, 243, 0.24);

      background:
        radial-gradient(
          circle at 62% 36%,
          rgba(255, 255, 255, 0.82),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          rgba(91, 158, 255, 0.26),
          rgba(220, 236, 255, 0.74)
        );

      animation:
        pi-public-layer
        11s
        ease-in-out
        infinite
        reverse;
    }

    .pi-public-core {
      position: absolute;
      left: 50%;
      top: 50%;

      width: 54px;
      height: 54px;

      border-radius: 50%;

      transform: translate(-50%, -50%);

      background:
        radial-gradient(
          circle at 33% 26%,
          #cbe3ff 0%,
          #1b7df8 62%,
          #0757c7 100%
        );

      box-shadow:
        0 0 0 19px rgba(6, 104, 243, 0.1),
        0 0 0 51px rgba(6, 104, 243, 0.045),
        0 22px 46px rgba(6, 104, 243, 0.24);

      animation:
        pi-public-core
        5.8s
        ease-in-out
        infinite;
    }

    .pi-public-anchor {
      position: absolute;
      left: var(--x);
      top: var(--y);

      width: var(--size);
      height: var(--size);

      border-radius: 50%;

      transform: translate(-50%, -50%);

      background:
        radial-gradient(
          circle at 32% 27%,
          #e6f1ff 0%,
          #5ba1ff 62%,
          #1b70dc 100%
        );

      box-shadow:
        0 0 0 8px rgba(6, 104, 243, 0.065),
        0 12px 24px rgba(6, 104, 243, 0.16);

      animation:
        pi-public-anchor
        var(--dur)
        ease-in-out
        infinite;

      animation-delay: var(--delay);
    }

    .pi-public-anchor--a {
      --x: 28%;
      --y: 34%;
      --size: 22px;
      --dur: 8.8s;
      --delay: -0.4s;
    }

    .pi-public-anchor--b {
      --x: 76%;
      --y: 33%;
      --size: 16px;
      --dur: 9.6s;
      --delay: -1.7s;
    }

    .pi-public-anchor--c {
      --x: 69%;
      --y: 75%;
      --size: 20px;
      --dur: 9.2s;
      --delay: -2.4s;
    }

    @keyframes pi-public-halo {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pi-public-mass {
      0%,
      100% {
        transform:
          rotate(-7deg)
          scale(0.96)
          translate3d(-1%, 1%, 0);

        border-radius:
          58% 42% 46% 54% /
          44% 58% 42% 56%;
      }

      50% {
        transform:
          rotate(6deg)
          scale(1.025)
          translate3d(1.2%, -1%, 0);

        border-radius:
          51% 49% 55% 45% /
          53% 47% 50% 50%;
      }
    }

    @keyframes pi-public-layer {
      0%,
      100% {
        transform:
          rotate(9deg)
          scale(0.94)
          translate3d(1.5%, -1%, 0);

        border-radius:
          42% 58% 63% 37% /
          60% 38% 62% 40%;
      }

      50% {
        transform:
          rotate(-9deg)
          scale(1.035)
          translate3d(-1.5%, 1.5%, 0);

        border-radius:
          55% 45% 47% 53% /
          46% 56% 44% 54%;
      }
    }

    @keyframes pi-public-sweep {
      0%,
      100% {
        transform:
          translate3d(-4%, 3%, 0)
          rotate(-18deg)
          scale(0.94);

        opacity: 0.34;
      }

      50% {
        transform:
          translate3d(26%, -2%, 0)
          rotate(-4deg)
          scale(1.04);

        opacity: 0.58;
      }
    }

    @keyframes pi-public-core {
      0%,
      100% {
        transform:
          translate(-50%, -50%)
          scale(0.94);
      }

      50% {
        transform:
          translate(-50%, -50%)
          scale(1.06);
      }
    }

    @keyframes pi-public-anchor {
      0%,
      100% {
        transform:
          translate(-50%, -50%)
          scale(0.92)
          translate3d(-3px, 3px, 0);
      }

      50% {
        transform:
          translate(-50%, -50%)
          scale(1.07)
          translate3d(4px, -4px, 0);
      }
    }

    .pi-concept-caption {
      width: min(320px, 100%);
      margin: 18px auto 0;

      text-align: center;
    }

    .pi-concept-caption--private {
      grid-column: 1;
      grid-row: 3;
    }

    .pi-concept-caption--public {
      grid-column: 3;
      grid-row: 3;
    }

    .pi-concept-caption p {
      margin: 0;
      padding: 5px 0;

      color: rgba(3, 18, 58, 0.72);

      font-size: 18.75px;
      font-weight: 400;
      line-height: 1.58;
      letter-spacing: 0.055em;
    }

    .pi-concept-caption p + p {
      border-top: 1px solid rgba(3, 18, 58, 0.06);
    }

    @media (max-width: 1280px) {
      .pi-concept-section {
        min-height: auto;
      }

      .pi-concept-inner {
        width: min(84vw, 960px);
        min-height: auto;
        padding: 124px 0 104px;

        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 54px;
      }

      .pi-concept-copy {
        width: min(660px, 100%);
      }

      .pi-concept-visual {
        grid-template-columns:
          clamp(246px, 31vw, 286px)
          40px
          clamp(246px, 31vw, 286px);

        column-gap: 12px;
        justify-content: center;
      }

      .pi-concept-orb {
        width: clamp(246px, 31vw, 286px);
        height: clamp(246px, 31vw, 286px);
      }
    }

    /*
      スマホ版
      位置をずらさず、全要素を同じグリッドへ整列。
    */
    @media (max-width: 780px) {
      .pi-concept-section {
        min-height: auto;
        overflow-x: clip;
      }

      .pi-concept-bg {
        background-image:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.84) 36%,
            rgba(255, 255, 255, 0.66) 72%,
            rgba(255, 255, 255, 0.56) 100%
          ),
          var(--pi-bg-image);

        background-position: 64% center;
        transform: scale(1.01);
        animation: none;
      }

      .pi-concept-bg::after {
        background:
          radial-gradient(
            circle at 72% 66%,
            rgba(28, 118, 255, 0.085),
            transparent 34%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(235, 242, 253, 0.09)
          );
      }

      .pi-concept-inner {
        width: min(calc(100% - 36px), 440px);
        min-height: auto;
        margin: 0 auto;

        padding:
          max(78px, calc(62px + env(safe-area-inset-top)))
          0
          max(72px, calc(58px + env(safe-area-inset-bottom)));

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 44px;
      }

      .pi-concept-copy {
        width: 100%;
        max-width: none;
      }

      .pi-concept-title {
        margin: 0;

        font-size: clamp(21.5px, 6vw, 24px);
        font-weight: 600;
        line-height: 1.48;
        letter-spacing: 0.045em;

        text-wrap: initial;
      }

      .pi-concept-title span {
        display: block;
        white-space: nowrap;
      }

      .pi-concept-lead {
        width: 100%;
        max-width: none;
        margin-top: 23px;

        color: rgba(3, 18, 58, 0.75);

        font-size: clamp(14px, 3.85vw, 15px);
        line-height: 1.8;
        letter-spacing: 0.03em;

        text-wrap: initial;
      }

      .pi-concept-br--desktop {
        display: none;
      }

      .pi-concept-transition {
        width: 100%;
        max-width: none;
        margin: 17px 0 0;
        padding: 0;
      }

      .pi-concept-transition p {
        color: rgba(3, 18, 58, 0.62);

        font-size: clamp(13.5px, 3.7vw, 14.5px);
        line-height: 1.76;
        letter-spacing: 0.028em;
      }

      /*
        円はスマホでも横並びを維持。
        PC版の比較構造を残しつつ小さく整理。
      */
      .pi-concept-visual {
        --mobile-orb-size: clamp(108px, 32vw, 140px);

        width: 100%;
        max-width: none;
        min-width: 0;

        display: grid;
        grid-template-columns:
          minmax(0, 1fr)
          26px
          minmax(0, 1fr);

        grid-template-rows:
          auto
          auto
          auto;

        column-gap: 7px;
        row-gap: 0;

        justify-content: stretch;
        align-items: center;
        justify-items: center;
      }

      .pi-concept-orb-title {
        width: 100%;
        max-width: 100%;
        margin: 0 0 12px;

        font-size: clamp(12.5px, 3.55vw, 14.5px);
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.035em;
        text-align: center;

        white-space: nowrap;
      }

      .pi-concept-orb-title--private {
        grid-column: 1;
        grid-row: 1;
      }

      .pi-concept-orb-title--public {
        grid-column: 3;
        grid-row: 1;
      }

      .pi-concept-orb {
        width: var(--mobile-orb-size);
        height: var(--mobile-orb-size);
        min-width: 0;
        min-height: 0;
      }

      .pi-concept-orb--private {
        grid-column: 1;
        grid-row: 2;

        justify-self: center;
      }

      .pi-concept-orb--public {
        grid-column: 3;
        grid-row: 2;

        justify-self: center;

        transform: none;
        transition: none;
      }

      .pi-concept-arrow {
        grid-column: 2;
        grid-row: 2;

        width: 26px;
        height: 34px;
        margin: 0;

        font-size: 27px;

        transform: none;
      }

      .pi-concept-orb__surface {
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 16px 32px rgba(13, 57, 122, 0.06);
      }

      .pi-private-core {
        width: 21px;
        height: 21px;

        box-shadow:
          0 0 0 14px rgba(6, 104, 243, 0.07),
          0 11px 22px rgba(6, 104, 243, 0.16);
      }

      .pi-private-node {
        top: -5px;

        box-shadow:
          0 0 0 4px rgba(6, 104, 243, 0.05),
          0 6px 12px rgba(6, 104, 243, 0.12);
      }

      .pi-private-orbit--a {
        --node-size: 10px;
      }

      .pi-private-orbit--b {
        --node-size: 8px;
      }

      .pi-private-orbit--c {
        --node-size: 7px;
      }

      .pi-private-orbit--d {
        --node-size: 9px;
      }

      .pi-public-core {
        width: 34px;
        height: 34px;

        box-shadow:
          0 0 0 12px rgba(6, 104, 243, 0.09),
          0 0 0 31px rgba(6, 104, 243, 0.04),
          0 14px 28px rgba(6, 104, 243, 0.2);

        animation-duration: 7s;
      }

      .pi-public-anchor--a {
        --size: 14px;
      }

      .pi-public-anchor--b {
        --size: 10px;
      }

      .pi-public-anchor--c {
        --size: 13px;
      }

      .pi-public-anchor {
        box-shadow:
          0 0 0 5px rgba(6, 104, 243, 0.055),
          0 7px 14px rgba(6, 104, 243, 0.14);

        animation: none;
      }

      .pi-public-halo {
        animation: none;
      }

      .pi-public-mass {
        animation-duration: 15s;
      }

      .pi-public-mass::before {
        animation-duration: 13s;
      }

      .pi-public-layer {
        animation-duration: 13s;
      }

      /*
        説明文も左右同じ位置・同じ幅で揃える。
      */
      .pi-concept-caption {
        width: 100%;
        max-width: 100%;
        margin: 13px 0 0;

        align-self: start;
        text-align: center;
      }

      .pi-concept-caption--private {
        grid-column: 1;
        grid-row: 3;
      }

      .pi-concept-caption--public {
        grid-column: 3;
        grid-row: 3;
      }

      .pi-concept-caption p {
        min-height: 0;
        margin: 0;
        padding: 6px 1px;

        color: rgba(3, 18, 58, 0.69);

        font-size: clamp(10.75px, 3vw, 12px);
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: 0.018em;
      }

      .pi-concept-caption p + p {
        border-top: 1px solid rgba(3, 18, 58, 0.065);
      }
    }

    @media (max-width: 360px) {
      .pi-concept-inner {
        width: calc(100% - 28px);

        padding:
          max(72px, calc(58px + env(safe-area-inset-top)))
          0
          max(66px, calc(54px + env(safe-area-inset-bottom)));

        row-gap: 40px;
      }

      .pi-concept-title {
        font-size: 21px;
        line-height: 1.46;
        letter-spacing: 0.035em;
      }

      .pi-concept-lead {
        margin-top: 21px;

        font-size: 13.5px;
        line-height: 1.78;
        letter-spacing: 0.022em;
      }

      .pi-concept-transition {
        margin-top: 16px;
      }

      .pi-concept-transition p {
        font-size: 13px;
        line-height: 1.74;
        letter-spacing: 0.02em;
      }

      .pi-concept-visual {
        --mobile-orb-size: clamp(100px, 31vw, 112px);

        grid-template-columns:
          minmax(0, 1fr)
          22px
          minmax(0, 1fr);

        column-gap: 5px;
      }

      .pi-concept-orb-title {
        margin-bottom: 10px;

        font-size: 12px;
        letter-spacing: 0.02em;
      }

      .pi-concept-arrow {
        width: 22px;
        font-size: 23px;
      }

      .pi-concept-caption {
        margin-top: 11px;
      }

      .pi-concept-caption p {
        padding: 5px 0;

        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 0.01em;
      }

      .pi-private-core {
        width: 18px;
        height: 18px;

        box-shadow:
          0 0 0 12px rgba(6, 104, 243, 0.07),
          0 9px 18px rgba(6, 104, 243, 0.15);
      }

      .pi-public-core {
        width: 30px;
        height: 30px;

        box-shadow:
          0 0 0 10px rgba(6, 104, 243, 0.09),
          0 0 0 27px rgba(6, 104, 243, 0.04),
          0 12px 24px rgba(6, 104, 243, 0.19);
      }
    }

    @media
      (orientation: landscape)
      and (max-height: 560px)
      and (max-width: 980px) {
      .pi-concept-inner {
        padding: 68px 0 62px;
        row-gap: 36px;
      }

      .pi-concept-title {
        line-height: 1.46;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pi-concept-bg,
      .pi-concept-copy,
      .pi-concept-visual,
      .pi-concept-transition,
      .pi-private-ring,
      .pi-private-core,
      .pi-private-orbit,
      .pi-private-node,
      .pi-concept-arrow,
      .pi-public-halo,
      .pi-public-mass,
      .pi-public-mass::before,
      .pi-public-layer,
      .pi-public-core,
      .pi-public-anchor {
        animation: none !important;
        transition: none !important;
      }

      .pi-concept-copy,
      .pi-concept-visual,
      .pi-concept-transition {
        opacity: 1;
        transform: none;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 06 / 04-core
   Original cascade position: 6 of 11
========================================================= */
    .pi-core-section {
      --core-bg: #f7faff;
      --core-white: #ffffff;
      --core-navy: #03123a;
      --core-text: rgba(3, 18, 58, 0.72);
      --core-muted: rgba(3, 18, 58, 0.70);
      --core-blue: #1b74e8;
      --core-border: rgba(18, 61, 126, 0.10);

      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      isolation: isolate;
      background: var(--core-bg);
      color: var(--core-navy);
      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;
      font-synthesis: none;
      font-kerning: normal;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      letter-spacing: 0.05em;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      box-sizing: border-box;
    }

    .pi-core-section *,
    .pi-core-section *::before,
    .pi-core-section *::after {
      box-sizing: border-box;
    }

    /* =========================================================
       BACKGROUND
    ========================================================= */

    .pi-core-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(
          circle at 82% 24%,
          rgba(182, 212, 250, 0.22),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          #ffffff 0%,
          #fbfcff 52%,
          #f1f6fc 100%
        );
    }

    /* =========================================================
       LAYOUT
    ========================================================= */

    .pi-core-inner {
      position: relative;
      z-index: 2;
      width: min(84vw, 1320px);
      margin: 0 auto;
      padding: 112px 0 92px;
    }

    .pi-core-top {
      display: grid;
      grid-template-columns:
        minmax(720px, 0.96fr)
        minmax(540px, 0.84fr);
      align-items: center;
      column-gap: clamp(36px, 3vw, 52px);
    }

    /* =========================================================
       COPY
    ========================================================= */

    .pi-core-copy {
      width: min(730px, 100%);
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity 0.8s ease,
        transform 0.95s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-core-section.is-inview .pi-core-copy {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-core-title {
      width: 100%;
      margin: 0;
      padding-left: 0;
      color: var(--core-navy);
      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;
      text-wrap: balance;
      word-break: normal;
      line-break: strict;
    }

    .pi-core-lead {
      width: 100%;
      margin: 40px 0 0;
      padding-left: 0;
      color: var(--core-text);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
      word-break: normal;
      line-break: strict;
    }

    .pi-core-note {
      width: 100%;
      margin: 28px 0 0;
      padding-left: 0;
      color: var(--core-muted);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
      word-break: normal;
      line-break: strict;
    }

    .pi-core-note p {
      margin: 0;
    }

    .pi-core-copy,
    .pi-core-title,
    .pi-core-lead,
    .pi-core-note {
      margin-left: 0;
      padding-left: 0;
    }

    .pi-core-br--desktop {
      display: inline;
    }

    .pi-core-br--mobile {
      display: none;
    }

    /* =========================================================
       CORE DIAGRAM
    ========================================================= */

    .pi-core-diagram {
      position: relative;
      width: min(100%, 640px);
      aspect-ratio: 1 / 0.88;
      justify-self: end;
      opacity: 0;
      transition: opacity 0.9s ease 0.08s;
    }

    .pi-core-section.is-inview .pi-core-diagram {
      opacity: 1;
    }

    .pi-core-circle {
      position: absolute;
      width: 54%;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(18, 45, 85, 0.055);
      box-shadow:
        0 22px 48px rgba(16, 39, 73, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      isolation: isolate;
    }

    /*
      3つとも同じ青系の中で差をつける。
      色相を大きく振らず、明度と深さだけを変える。
    */

    .pi-core-circle--customer {
      left: 23%;
      top: 0;
      background:
        radial-gradient(
          circle at 34% 27%,
          #fbfdff 0%,
          #e8f1fb 42%,
          #cadbf0 100%
        );
    }

    .pi-core-circle--company {
      left: 0;
      top: 42%;
      background:
        radial-gradient(
          circle at 34% 27%,
          #f8fbff 0%,
          #deebf8 42%,
          #b8d1ea 100%
        );
    }

    .pi-core-circle--society {
      right: 0;
      top: 42%;
      background:
        radial-gradient(
          circle at 34% 27%,
          #fbfdff 0%,
          #e5eef6 42%,
          #c7d8e8 100%
        );
    }

    /*
      3円共通の「厚みのある面」。
      透明な光ではなく、円の中に静かな面が一枚動く。
    */

    .pi-core-circle__motion {
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: 50%;
      overflow: hidden;
      pointer-events: none;
    }

    .pi-core-circle__motion::before,
    .pi-core-circle__motion::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    /* 顧客の本音 */

    .pi-core-circle--customer .pi-core-circle__motion::before {
      width: 76%;
      height: 58%;
      left: 12%;
      top: 14%;
      border-radius: 34% 46% 38% 44%;
      background:
        linear-gradient(
          148deg,
          #ffffff 0%,
          #dce9f7 52%,
          #a8c0db 100%
        );
      box-shadow:
        0 16px 28px rgba(22, 48, 82, 0.035),
        inset 10px 12px 18px rgba(255, 255, 255, 0.24);
      opacity: 0.49;
      transform: rotate(-11deg) translate3d(0, 0, 0);
      animation:
        core-customer-surface
        10.8s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-core-circle--customer .pi-core-circle__motion::after {
      width: 52%;
      height: 18%;
      left: 22%;
      top: 24%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.22);
      filter: blur(5px);
      animation:
        core-customer-light
        11.6s
        ease-in-out
        infinite;
    }

    /* 企業の意志 */

    .pi-core-circle--company .pi-core-circle__motion::before {
      width: 72%;
      height: 62%;
      left: 14%;
      bottom: 10%;
      border-radius: 30% 44% 34% 40%;
      background:
        linear-gradient(
          145deg,
          #fbfdff 0%,
          #d4e3f3 54%,
          #97b6d5 100%
        );
      box-shadow:
        0 17px 29px rgba(18, 47, 83, 0.04),
        inset 10px 12px 18px rgba(255, 255, 255, 0.22);
      opacity: 0.52;
      transform: rotate(-9deg) translate3d(0, 0, 0);
      animation:
        core-company-surface
        9.9s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-core-circle--company .pi-core-circle__motion::after {
      width: 48%;
      height: 19%;
      left: 24%;
      top: 22%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.21);
      filter: blur(5px);
      animation:
        core-company-light
        10.9s
        ease-in-out
        infinite;
    }

    /* 社会文脈 */

    .pi-core-circle--society .pi-core-circle__motion::before {
      width: 78%;
      height: 60%;
      right: 7%;
      bottom: 8%;
      border-radius: 40% 30% 44% 34%;
      background:
        linear-gradient(
          136deg,
          #ffffff 0%,
          #d8e4ef 54%,
          #acc1d4 100%
        );
      box-shadow:
        0 16px 28px rgba(20, 47, 78, 0.035),
        inset 8px 12px 18px rgba(255, 255, 255, 0.21);
      opacity: 0.47;
      transform: rotate(9deg) translate3d(0, 0, 0);
      animation:
        core-society-surface
        11.3s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-core-circle--society .pi-core-circle__motion::after {
      width: 50%;
      height: 18%;
      left: 19%;
      top: 25%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.20);
      filter: blur(5px);
      animation:
        core-society-light
        12.2s
        ease-in-out
        infinite;
    }

    @keyframes core-customer-surface {
      0%,
      100% {
        transform:
          rotate(-17deg)
          translate3d(-14px, -10px, 0)
          scale(0.96, 1.04);
      }

      38% {
        transform:
          rotate(-3deg)
          translate3d(19px, 14px, 0)
          scale(1.06, 0.96);
      }

      72% {
        transform:
          rotate(-13deg)
          translate3d(-9px, 20px, 0)
          scale(0.98, 1.05);
      }
    }

    @keyframes core-customer-light {
      0%,
      100% {
        transform:
          translate3d(-10px, -7px, 0)
          scale(0.88);
        opacity: 0.22;
      }

      45% {
        transform:
          translate3d(17px, 13px, 0)
          scale(1.17);
        opacity: 0.40;
      }

      76% {
        transform:
          translate3d(-4px, 20px, 0)
          scale(1.04);
        opacity: 0.28;
      }
    }

    @keyframes core-company-surface {
      0%,
      100% {
        transform:
          rotate(-16deg)
          translate3d(-16px, 11px, 0)
          scale(0.95, 1.05);
      }

      42% {
        transform:
          rotate(2deg)
          translate3d(21px, -17px, 0)
          scale(1.07, 0.95);
      }

      74% {
        transform:
          rotate(-8deg)
          translate3d(8px, 19px, 0)
          scale(1.01, 1.04);
      }
    }

    @keyframes core-company-light {
      0%,
      100% {
        transform:
          translate3d(-12px, 8px, 0)
          scale(0.87);
        opacity: 0.20;
      }

      40% {
        transform:
          translate3d(18px, -15px, 0)
          scale(1.19);
        opacity: 0.38;
      }

      72% {
        transform:
          translate3d(11px, 16px, 0)
          scale(1.02);
        opacity: 0.26;
      }
    }

    @keyframes core-society-surface {
      0%,
      100% {
        transform:
          rotate(17deg)
          translate3d(15px, 11px, 0)
          scale(0.96, 1.04);
      }

      40% {
        transform:
          rotate(1deg)
          translate3d(-21px, -16px, 0)
          scale(1.06, 0.96);
      }

      75% {
        transform:
          rotate(11deg)
          translate3d(-8px, 21px, 0)
          scale(0.99, 1.05);
      }
    }

    @keyframes core-society-light {
      0%,
      100% {
        transform:
          translate3d(11px, 7px, 0)
          scale(0.88);
        opacity: 0.19;
      }

      44% {
        transform:
          translate3d(-19px, -14px, 0)
          scale(1.18);
        opacity: 0.36;
      }

      76% {
        transform:
          translate3d(-5px, 18px, 0)
          scale(1.03);
        opacity: 0.25;
      }
    }

    .pi-core-circle__label {
      position: relative;
      z-index: 3;
      color: rgba(6, 24, 61, 0.84);
      font-size: clamp(20px, 1.75vw, 27px);
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.1em;
      text-align: center;
      transform: translateY(-2px);
      white-space: nowrap;
    }

    /*
      中心は円とは違う「静かな核」。
      発光やカラフルな膜を使わず、
      濃紺の小さなプレートとして見せる。
    */

    .pi-core-center {
      position: absolute;
      z-index: 6;
      left: 50%;
      top: 58%;
      width: 20.5%;
      aspect-ratio: 1;
      border-radius: 31%;
      display: grid;
      place-items: center;
      transform:
        translate(-50%, -50%)
        rotate(0.001deg);
      overflow: hidden;
      background:
        linear-gradient(
          145deg,
          #20467a 0%,
          #12305b 52%,
          #081d3f 100%
        );
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow:
        0 18px 34px rgba(6, 24, 61, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
      isolation: isolate;
    }

    .pi-core-center::before,
    .pi-core-center::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .pi-core-center::before {
      display: none;
    }

    .pi-core-center::after {
      z-index: 1;
      inset: 11%;
      border-radius: 25%;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .pi-core-center__text {
      position: relative;
      z-index: 2;
      color: rgba(255, 255, 255, 0.96);
      font-size: clamp(14px, 1.2vw, 18px);
      font-weight: 600;
      line-height: 1.55;
      letter-spacing: 0.08em;
      text-align: center;
    }

    /* =========================================================
       CO-CREATION
    ========================================================= */

    .pi-core-cocreation {
      position: relative;
      margin-top: 62px;
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity 0.9s ease 0.22s,
        transform 1s cubic-bezier(.2, .75, .2, 1) 0.22s;
    }

    .pi-core-section.is-inview .pi-core-cocreation {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-core-cocreation__label {
      display: block;
      margin-bottom: 15px;
      color: rgba(6, 24, 61, 0.40);
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.22em;
      text-align: center;
      text-transform: uppercase;
    }

    .pi-core-cocreation__intro {
      width: min(980px, 100%);
      margin: 0 auto 28px;
      color: rgba(3, 18, 58, 0.70);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
      text-align: center;
      text-wrap: balance;
      word-break: normal;
      line-break: strict;
    }

    .pi-core-brand-lockup {
      display: grid;
      grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
      align-items: center;
      width: min(860px, 100%);
      min-height: 92px;
      margin: 0 auto 28px;
      column-gap: clamp(28px, 4vw, 54px);
    }

    .pi-core-brand-lockup__logo {
      display: grid;
      align-items: center;
      min-width: 0;
    }

    .pi-core-brand-lockup__logo img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }

    .pi-core-brand-lockup__logo--daiko {
      width: 100%;
      justify-items: end;
    }

    .pi-core-brand-lockup__logo--daiko img {
      width: min(236px, 100%);
      max-height: 88px;
    }

    .pi-core-brand-lockup__logo--diginno {
      width: 100%;
      justify-items: start;
    }

    .pi-core-brand-lockup__logo--diginno img {
      width: min(336px, 100%);
      max-height: 66px;
    }

    .pi-core-brand-lockup__join {
      flex: 0 0 auto;
      color: var(--core-blue);
      font-size: 44px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0;
    }

    .pi-core-fusion {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--core-border);
      background: rgba(255, 255, 255, 0.82);
    }

    .pi-core-partner {
      min-width: 0;
      padding: 30px 34px 28px;
    }

    .pi-core-partner:first-child {
      border-right: 1px solid rgba(18, 61, 126, 0.08);
    }

    .pi-core-partner__title {
      margin: 0 0 18px;
      color: var(--core-navy);
      font-size: clamp(21.5px, 1.55vw, 25.5px);
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0.07em;
    }

    .pi-core-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .pi-core-list__item {
      min-height: 49px;
      display: flex;
      align-items: center;
      color: rgba(3, 18, 58, 0.70);
      font-size: 17.5px;
      font-weight: 500;
      line-height: 1.7;
      letter-spacing: 0.065em;
    }

    .pi-core-list__item + .pi-core-list__item {
      border-top: 1px solid rgba(6, 24, 61, 0.055);
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1540px) {
      .pi-core-inner {
        width: min(84vw, 1320px);
        padding: 106px 0 86px;
      }

      .pi-core-top {
        grid-template-columns: 1fr;
        row-gap: 42px;
      }

      .pi-core-copy {
        width: min(900px, 100%);
      }

      .pi-core-diagram {
        width: min(76vw, 700px);
        justify-self: center;
      }

      .pi-core-cocreation {
        margin-top: 52px;
      }
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 780px) {
      .pi-core-inner {
        width: min(88vw, 500px);
        padding:
          clamp(62px, 16vw, 74px)
          0
          clamp(48px, 12.5vw, 58px);
      }

      .pi-core-top {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: clamp(22px, 6.5vw, 28px);
      }

      .pi-core-copy {
        width: 100%;
      }

      .pi-core-title {
        width: 100%;
        max-width: 15.5em;
        font-size: clamp(22px, 6vw, 24px);
        font-weight: 600;
        line-height: 1.52;
        letter-spacing: 0.04em;
        text-wrap: wrap;
      }

      .pi-core-lead {
        width: 100%;
        max-width: none;
        margin-top: clamp(20px, 5.5vw, 24px);
        color: rgba(3, 18, 58, 0.72);
        font-size: clamp(14px, 3.85vw, 15px);
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0.03em;
      }

      .pi-core-note {
        width: 100%;
        max-width: none;
        margin-top: clamp(14px, 4.2vw, 18px);
        color: rgba(3, 18, 58, 0.59);
        font-size: clamp(13px, 3.55vw, 14px);
        font-weight: 400;
        line-height: 1.76;
        letter-spacing: 0.025em;
      }

      .pi-core-br--desktop {
        display: none;
      }

      .pi-core-br--mobile {
        display: inline;
      }

      /* -----------------------------------------
         MOBILE DIAGRAM
      ----------------------------------------- */

      .pi-core-diagram {
        width: min(84vw, 408px);
        max-width: 100%;
        margin: 0;
        justify-self: center;
      }

      .pi-core-circle {
        width: 54%;
        box-shadow:
          0 13px 30px rgba(16, 39, 73, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.62);
      }

      .pi-core-circle--customer {
        left: 23%;
      }

      .pi-core-circle--company {
        left: 0;
      }

      .pi-core-circle--society {
        right: 0;
      }

      .pi-core-circle__label {
        width: 86%;
        font-size: clamp(12.5px, 3.55vw, 14px);
        font-weight: 500;
        line-height: 1.42;
        letter-spacing: 0.055em;
        transform: translateY(-1px);
      }

      .pi-core-center {
        width: 20.5%;
        border-radius: 30%;
        box-shadow:
          0 10px 21px rgba(6, 24, 61, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.10);
      }

      .pi-core-center::after {
        inset: 10%;
      }

      .pi-core-center__text {
        font-size: clamp(10.5px, 2.95vw, 12px);
        line-height: 1.48;
        letter-spacing: 0.045em;
      }

      /*
        スマホでは補助光の動きを止め、
        主となる面だけを小さな移動量で残す。
      */

      .pi-core-circle__motion::after {
        animation: none !important;
        filter: blur(3px);
        opacity: 0.18;
        transform: none;
      }

      .pi-core-circle--customer .pi-core-circle__motion::before {
        animation:
          core-customer-surface-mobile
          14.8s
          cubic-bezier(.45, 0, .55, 1)
          infinite;
      }

      .pi-core-circle--company .pi-core-circle__motion::before {
        animation:
          core-company-surface-mobile
          14.2s
          cubic-bezier(.45, 0, .55, 1)
          infinite;
      }

      .pi-core-circle--society .pi-core-circle__motion::before {
        animation:
          core-society-surface-mobile
          15.4s
          cubic-bezier(.45, 0, .55, 1)
          infinite;
      }

      @keyframes core-customer-surface-mobile {
        0%,
        100% {
          transform:
            rotate(-14deg)
            translate3d(-5px, -4px, 0)
            scale(0.98, 1.02);
        }

        42% {
          transform:
            rotate(-6deg)
            translate3d(7px, 5px, 0)
            scale(1.025, 0.985);
        }

        74% {
          transform:
            rotate(-11deg)
            translate3d(-3px, 7px, 0)
            scale(0.99, 1.025);
        }
      }

      @keyframes core-company-surface-mobile {
        0%,
        100% {
          transform:
            rotate(-13deg)
            translate3d(-6px, 4px, 0)
            scale(0.98, 1.025);
        }

        43% {
          transform:
            rotate(-4deg)
            translate3d(7px, -6px, 0)
            scale(1.03, 0.985);
        }

        75% {
          transform:
            rotate(-8deg)
            translate3d(3px, 7px, 0)
            scale(1.005, 1.02);
        }
      }

      @keyframes core-society-surface-mobile {
        0%,
        100% {
          transform:
            rotate(14deg)
            translate3d(5px, 4px, 0)
            scale(0.98, 1.02);
        }

        42% {
          transform:
            rotate(5deg)
            translate3d(-7px, -5px, 0)
            scale(1.025, 0.985);
        }

        76% {
          transform:
            rotate(10deg)
            translate3d(-3px, 7px, 0)
            scale(0.995, 1.025);
        }
      }

      /* -----------------------------------------
         MOBILE CO-CREATION
      ----------------------------------------- */

      .pi-core-cocreation {
        margin-top: clamp(36px, 10.5vw, 44px);
      }

      .pi-core-cocreation__label {
        margin-bottom: 9px;
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0.20em;
      }

      .pi-core-cocreation__intro {
        width: 100%;
        margin: 0 auto clamp(15px, 4.8vw, 19px);
        color: rgba(3, 18, 58, 0.64);
        font-size: clamp(13.5px, 3.7vw, 14.5px);
        font-weight: 400;
        line-height: 1.78;
        letter-spacing: 0.03em;
        text-align: center;
        text-wrap: wrap;
      }

      /* -----------------------------------------
         MOBILE BRAND LOCKUP
      ----------------------------------------- */

      .pi-core-brand-lockup {
        grid-template-columns:
          minmax(0, 0.82fr)
          auto
          minmax(0, 1.18fr);
        width: min(92%, 400px);
        min-height: 46px;
        margin: 0 auto clamp(15px, 4.6vw, 19px);
        column-gap: clamp(7px, 2.3vw, 10px);
      }

      .pi-core-brand-lockup__logo--daiko img {
        width: min(104px, 100%);
        max-height: 34px;
      }

      .pi-core-brand-lockup__logo--diginno img {
        width: min(160px, 100%);
        max-height: 34px;
      }

      .pi-core-brand-lockup__join {
        font-size: clamp(21px, 5.9vw, 25px);
        font-weight: 300;
      }

      /* -----------------------------------------
         MOBILE FUSION
      ----------------------------------------- */

      .pi-core-fusion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        border-color: rgba(18, 61, 126, 0.095);
        background: rgba(255, 255, 255, 0.78);
      }

      .pi-core-partner {
        min-width: 0;
        padding:
          clamp(14px, 4vw, 18px)
          clamp(11px, 3.25vw, 15px)
          clamp(12px, 3.5vw, 16px);
      }

      .pi-core-partner:first-child {
        border-right: 1px solid rgba(18, 61, 126, 0.08);
        border-bottom: 0;
      }

      .pi-core-partner__title {
        min-height: 3.05em;
        display: flex;
        align-items: flex-start;
        margin: 0 0 7px;
        font-size: clamp(13.5px, 3.75vw, 15px);
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: 0.03em;
      }

      .pi-core-list__item {
        min-height: clamp(33px, 9vw, 37px);
        color: rgba(3, 18, 58, 0.67);
        font-size: clamp(11.5px, 3.15vw, 12.5px);
        font-weight: 500;
        line-height: 1.55;
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
      }
    }

    /* =========================================================
       LARGE MOBILE / SMALL TABLET
    ========================================================= */

    @media (min-width: 600px) and (max-width: 780px) {
      .pi-core-inner {
        width: min(86vw, 640px);
      }

      .pi-core-title {
        max-width: 16em;
        font-size: 24px;
      }

      .pi-core-lead {
        max-width: 42em;
        font-size: 15px;
      }

      .pi-core-note {
        max-width: 42em;
        font-size: 14px;
      }

      .pi-core-diagram {
        width: min(56vw, 420px);
      }

      .pi-core-cocreation__intro {
        width: min(42em, 94%);
      }

      .pi-core-brand-lockup {
        width: min(72%, 470px);
      }

      .pi-core-partner {
        padding: 18px 20px 16px;
      }

      .pi-core-partner__title {
        min-height: auto;
        margin-bottom: 8px;
        font-size: 15px;
      }

      .pi-core-list__item {
        min-height: 37px;
        font-size: 12.5px;
      }
    }

    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 360px) {
      .pi-core-inner {
        width: 91vw;
        padding: 58px 0 46px;
      }

      .pi-core-top {
        row-gap: 21px;
      }

      .pi-core-title {
        max-width: 15em;
        font-size: clamp(21px, 6.4vw, 22.5px);
        line-height: 1.5;
        letter-spacing: 0.03em;
      }

      .pi-core-lead {
        margin-top: 18px;
        font-size: 13.5px;
        line-height: 1.78;
        letter-spacing: 0.025em;
      }

      .pi-core-note {
        margin-top: 13px;
        font-size: 12.5px;
        line-height: 1.74;
        letter-spacing: 0.02em;
      }

      .pi-core-diagram {
        width: min(86vw, 310px);
      }

      .pi-core-circle__label {
        font-size: clamp(11.5px, 3.55vw, 12.5px);
        letter-spacing: 0.045em;
      }

      .pi-core-center {
        width: 20.5%;
      }

      .pi-core-center__text {
        font-size: 9.8px;
        letter-spacing: 0.035em;
      }

      .pi-core-cocreation {
        margin-top: 34px;
      }

      .pi-core-cocreation__label {
        margin-bottom: 8px;
        font-size: 9.5px;
      }

      .pi-core-cocreation__intro {
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.76;
        letter-spacing: 0.025em;
      }

      .pi-core-brand-lockup {
        width: 96%;
        min-height: 42px;
        margin-bottom: 14px;
        column-gap: 6px;
      }

      .pi-core-brand-lockup__logo--daiko img {
        width: min(90px, 100%);
        max-height: 30px;
      }

      .pi-core-brand-lockup__logo--diginno img {
        width: min(140px, 100%);
        max-height: 30px;
      }

      .pi-core-brand-lockup__join {
        font-size: 20px;
      }

      .pi-core-partner {
        padding: 12px 9px 11px;
      }

      .pi-core-partner__title {
        min-height: 3.1em;
        margin-bottom: 6px;
        font-size: clamp(12.5px, 3.75vw, 13.5px);
        line-height: 1.45;
        letter-spacing: 0.025em;
      }

      .pi-core-list__item {
        min-height: 31px;
        font-size: clamp(10.5px, 3.25vw, 11.5px);
        line-height: 1.5;
        letter-spacing: 0.015em;
      }
    }

    /* =========================================================
       LANDSCAPE MOBILE
    ========================================================= */

    @media
      (min-width: 781px)
      and (max-width: 960px)
      and (orientation: landscape) {

      .pi-core-inner {
        width: min(90vw, 860px);
        padding: 68px 0 62px;
      }

      .pi-core-top {
        grid-template-columns:
          minmax(0, 1.08fr)
          minmax(300px, 0.92fr);
        align-items: center;
        column-gap: 28px;
        row-gap: 0;
      }

      .pi-core-copy {
        width: 100%;
      }

      .pi-core-title {
        font-size: clamp(22px, 3vw, 25px);
        line-height: 1.58;
        letter-spacing: 0.045em;
      }

      .pi-core-lead {
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.78;
        letter-spacing: 0.03em;
      }

      .pi-core-note {
        width: 100%;
        margin-top: 18px;
        font-size: 13px;
        line-height: 1.74;
        letter-spacing: 0.025em;
      }

      .pi-core-br--desktop {
        display: none;
      }

      .pi-core-br--mobile {
        display: none;
      }

      .pi-core-diagram {
        width: min(41vw, 400px);
        justify-self: end;
      }

      .pi-core-circle__label {
        font-size: clamp(13px, 1.8vw, 15px);
        letter-spacing: 0.065em;
      }

      .pi-core-center {
        width: 20.5%;
      }

      .pi-core-center__text {
        font-size: clamp(10.5px, 1.45vw, 12.5px);
      }

      .pi-core-cocreation {
        margin-top: 48px;
      }

      .pi-core-cocreation__label {
        margin-bottom: 11px;
        font-size: 10.5px;
      }

      .pi-core-cocreation__intro {
        width: min(680px, 90%);
        margin-bottom: 20px;
        font-size: 14.5px;
        line-height: 1.78;
        letter-spacing: 0.035em;
      }

      .pi-core-brand-lockup {
        width: min(540px, 76%);
        min-height: 58px;
        margin-bottom: 21px;
        column-gap: 14px;
      }

      .pi-core-brand-lockup__logo--daiko img {
        width: min(126px, 100%);
        max-height: 42px;
      }

      .pi-core-brand-lockup__logo--diginno img {
        width: min(196px, 100%);
        max-height: 41px;
      }

      .pi-core-brand-lockup__join {
        font-size: 28px;
      }

      .pi-core-fusion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pi-core-partner {
        padding: 21px 22px 19px;
      }

      .pi-core-partner__title {
        min-height: auto;
        margin-bottom: 9px;
        font-size: 17px;
      }

      .pi-core-list__item {
        min-height: 39px;
        font-size: 13.5px;
        line-height: 1.65;
      }
    }


    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      .pi-core-copy,
      .pi-core-diagram,
      .pi-core-cocreation,
      .pi-core-circle__motion::before,
      .pi-core-circle__motion::after,
      .pi-core-center::before {
        animation: none !important;
        transition: none !important;
      }

      .pi-core-copy,
      .pi-core-diagram,
      .pi-core-cocreation {
        opacity: 1 !important;
        transform: none !important;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 07 / 05-method
   Original cascade position: 7 of 11
========================================================= */
    .pi-method-section {
      --method-bg: #ffffff;
      --method-navy: #06183d;
      --method-text: rgba(6, 24, 61, 0.73);
      --method-blue: #1766cf;
      --method-blue-deep: #104c9c;
      --method-border: rgba(54, 92, 149, 0.14);
      --method-border-active: rgba(54, 105, 181, 0.30);

      position: relative;
      width: 100vw;
      min-height: 100svh;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      isolation: isolate;
      background: var(--method-bg);
      color: var(--method-navy);
      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;
      letter-spacing: 0.065em;
      box-sizing: border-box;
    }

    .pi-method-section *,
    .pi-method-section *::before,
    .pi-method-section *::after {
      box-sizing: border-box;
    }

    .pi-method-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: #ffffff;
    }

    /* =========================================================
       LAYOUT
    ========================================================= */

    .pi-method-inner {
      position: relative;
      z-index: 2;
      width: min(84vw, 1320px);
      min-height: 100svh;
      margin: 0 auto;
      padding:
        clamp(108px, 10.5vh, 136px)
        0
        clamp(88px, 8.5vh, 116px);
    }

    /* =========================================================
       COPY
    ========================================================= */

    .pi-method-copy {
      width: 100%;
      margin-left: 0;
      padding-left: 0;
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 0.82s ease,
        transform 0.96s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-section.is-inview .pi-method-copy {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-method-title,
    .pi-method-lead,
    .pi-method-supplement {
      width: 100%;
      margin-left: 0;
      padding-left: 0;
    }

    .pi-method-title {
      margin: 0;
      color: var(--method-navy);
      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;
      text-wrap: balance;
    }

    .pi-method-lead {
      margin: 40px 0 0;
      color: var(--method-text);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
    }

    /* =========================================================
       PROCESS
    ========================================================= */

    .pi-method-process {
      position: relative;
      width: 100%;
      margin-top: clamp(70px, 7.8vh, 96px);
    }

    .pi-method-list {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      column-gap: clamp(10px, 0.9vw, 16px);
      align-items: stretch;
      margin: 0;
      padding: 0;
      list-style: none;
      isolation: isolate;
    }

    /* 全体の流れを示す静かな基準線 */

    .pi-method-flow-line {
      position: absolute;
      z-index: 0;
      left: 4%;
      right: 4%;
      top: 137px;
      height: 1px;
      pointer-events: none;
      overflow: hidden;
      background: rgba(77, 118, 180, 0.08);
    }

    .pi-method-flow-line::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          90deg,
          rgba(78, 119, 183, 0.10),
          rgba(72, 122, 199, 0.24),
          rgba(78, 119, 183, 0.10)
        );
      transform: scaleX(0);
      transform-origin: left center;
    }

    .pi-method-section.is-inview .pi-method-flow-line::before {
      animation:
        pi-method-flow-draw
        1.4s
        cubic-bezier(.22, .72, .2, 1)
        0.34s
        forwards;
    }

    @keyframes pi-method-flow-draw {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    /* =========================================================
       STEP WRAPPER
    ========================================================= */

    .pi-method-step {
      --step-delay: calc(0.18s + var(--step-index) * 0.11s);

      position: relative;
      min-width: 0;
      min-height: 480px;
      outline: none;
      cursor: default;
      opacity: 0;
      transform: translateY(18px);
    }

    .pi-method-section.is-inview .pi-method-step {
      animation:
        pi-method-card-enter
        0.72s
        cubic-bezier(.2, .75, .2, 1)
        var(--step-delay)
        forwards;
    }

    @keyframes pi-method-card-enter {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* =========================================================
       GLOW
    ========================================================= */

    .pi-method-step__glow {
      position: absolute;
      z-index: 0;
      left: -18px;
      right: -18px;
      top: 3px;
      bottom: -25px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(7px) scale(0.93);
      transition:
        opacity 0.42s ease,
        transform 0.58s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-step__glow::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(
          ellipse at 50% 58%,
          rgba(103, 146, 211, 0.19) 0%,
          rgba(114, 157, 219, 0.105) 38%,
          rgba(128, 167, 222, 0.045) 57%,
          transparent 74%
        );
      filter: blur(16px);
    }

    .pi-method-step__glow::after {
      content: "";
      position: absolute;
      left: 16%;
      right: 16%;
      bottom: 1px;
      height: 30px;
      border-radius: 50%;
      background: rgba(56, 103, 173, 0.14);
      filter: blur(15px);
      transform: scaleX(0.78);
      transition:
        transform 0.58s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-step.is-active .pi-method-step__glow {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .pi-method-step.is-active .pi-method-step__glow::after {
      transform: scaleX(1);
    }

    /* =========================================================
       CARD
    ========================================================= */

    .pi-method-card {
      position: relative;
      z-index: 2;
      min-height: 480px;
      padding:
        28px
        clamp(16px, 1vw, 22px)
        32px;
      overflow: visible;
      border: 1px solid var(--method-border);
      border-radius: 0;
      background:
        linear-gradient(
          180deg,
          #ffffff 0%,
          #ffffff 55%,
          #f9fbfe 100%
        );
      box-shadow:
        0 10px 25px rgba(18, 43, 81, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      transform: translateY(0);
      transition:
        transform 0.5s cubic-bezier(.2, .75, .2, 1),
        border-color 0.35s ease,
        box-shadow 0.42s ease;
    }

    .pi-method-step.is-active .pi-method-card {
      border-color: var(--method-border-active);
      box-shadow:
        0 17px 36px rgba(23, 51, 94, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
      transform: translateY(-5px);
    }

    /* =========================================================
       CONNECTOR
       円は移動させず、カード間の線を順番に描画
    ========================================================= */

    .pi-method-connector {
      position: absolute;
      z-index: 5;
      top: 131px;
      left: calc(100% + 1px);
      width: calc(clamp(10px, 0.9vw, 16px) - 2px);
      height: 10px;
      pointer-events: none;
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left center;
    }

    .pi-method-section.is-inview .pi-method-connector {
      animation:
        pi-method-connector-enter
        0.42s
        cubic-bezier(.2, .75, .2, 1)
        calc(0.72s + var(--step-index) * 0.11s)
        forwards;
    }

    .pi-method-connector::before {
      content: "";
      position: absolute;
      left: 0;
      right: 4px;
      top: 5px;
      height: 1px;
      background:
        linear-gradient(
          90deg,
          rgba(93, 133, 193, 0.12),
          rgba(86, 132, 200, 0.28)
        );
    }

    .pi-method-connector::after {
      content: "";
      position: absolute;
      right: 0;
      top: 3px;
      width: 5px;
      height: 5px;
      border-top: 1px solid rgba(76, 121, 190, 0.42);
      border-right: 1px solid rgba(76, 121, 190, 0.42);
      transform: rotate(45deg);
    }

    @keyframes pi-method-connector-enter {
      from {
        opacity: 0;
        transform: scaleX(0);
      }

      to {
        opacity: 1;
        transform: scaleX(1);
      }
    }

    /* =========================================================
       CARD CONTENT
    ========================================================= */

    .pi-method-step__accent {
      position: absolute;
      z-index: 4;
      left: 22px;
      top: -1px;
      width: 0;
      height: 2px;
      background: rgba(38, 101, 198, 0.72);
      transition:
        width 0.52s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-step.is-active .pi-method-step__accent {
      width: 42px;
    }

    .pi-method-step__number {
      position: relative;
      z-index: 3;
      display: block;
      margin-bottom: 16px;
      color: rgba(6, 24, 61, 0.66);
      font-size: 16.5px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.14em;
      transition:
        color 0.3s ease,
        transform 0.45s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-step.is-active .pi-method-step__number {
      color: var(--method-blue);
      transform: translateY(-1px);
    }

    .pi-method-step__icon {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 148px;
      margin-bottom: 24px;
      background-image: var(--icon-image);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      transform: translateZ(0);
      transition:
        transform 0.52s cubic-bezier(.2, .75, .2, 1),
        filter 0.4s ease;
    }

    .pi-method-step.is-active .pi-method-step__icon {
      transform: translateY(-3px) scale(1.02);
      filter:
        drop-shadow(0 9px 12px rgba(48, 91, 155, 0.08));
    }

    .pi-method-step__title {
      position: relative;
      z-index: 3;
      margin: 0;
      color: var(--method-navy);
      font-size: clamp(20.25px, 1.5vw, 24px);
      font-weight: 600;
      line-height: 1.48;
      letter-spacing: 0.055em;
      transition:
        color 0.3s ease,
        transform 0.45s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-step.is-active .pi-method-step__title {
      color: var(--method-blue-deep);
      transform: translateY(-1px);
    }

    .pi-method-step__description {
      position: relative;
      z-index: 3;
      margin: 18px 0 0;
      color: rgba(6, 24, 61, 0.60);
      font-size: 16.95px;
      font-weight: 400;
      line-height: 1.78;
      letter-spacing: 0.04em;
      transition:
        color 0.3s ease,
        transform 0.45s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-method-step.is-active .pi-method-step__description {
      color: rgba(16, 76, 156, 0.74);
      transform: translateY(-1px);
    }

    /* =========================================================
       SUPPLEMENT
    ========================================================= */

    .pi-method-supplement {
      position: relative;
      width: 100%;
      margin: clamp(48px, 5.5vh, 68px) 0 0;
      padding-top: 28px;
      opacity: 0;
      transform: translateY(14px);
      transition:
        opacity 0.85s ease 0.68s,
        transform 0.95s cubic-bezier(.2, .75, .2, 1) 0.68s;
    }

    .pi-method-section.is-inview .pi-method-supplement {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-method-supplement::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 74px;
      height: 1px;
      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(67, 108, 169, 0.46),
          transparent
        );
    }

    .pi-method-supplement p {
      margin: 0;
      color: rgba(6, 24, 61, 0.65);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.05em;
      text-align: left;
      text-wrap: balance;
    }

    /* =========================================================
       TABLET
       PC版の見え方を維持した横スクロール
    ========================================================= */

    @media (max-width: 1320px) {
      .pi-method-inner {
        width: min(90vw, 1120px);
        padding-top: 102px;
      }

      .pi-method-process {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
      }

      .pi-method-process::-webkit-scrollbar {
        display: none;
      }

      .pi-method-list {
        width: max-content;
        grid-template-columns: repeat(6, 296px);
        column-gap: 16px;
        padding:
          22px
          max(5vw, calc((100vw - 296px) / 2))
          40px;
      }

      .pi-method-step {
        min-height: 470px;
        scroll-snap-align: center;
      }

      .pi-method-card {
        min-height: 470px;
        padding: 27px 22px 31px;
      }

      .pi-method-step__icon {
        height: 145px;
      }

      .pi-method-step__title {
        font-size: 20.25px;
      }

      .pi-method-step__description {
        font-size: 16.2px;
      }

      .pi-method-connector {
        left: 100%;
        width: 16px;
      }

      .pi-method-flow-line {
        display: none;
      }
    }

    /* =========================================================
       MOBILE
       6工程を横スワイプで分断せず、縦方向の連続した工程図へ再編集
    ========================================================= */

    @media (max-width: 780px) {
      .pi-method-section {
        min-height: auto;
        overflow: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-synthesis: none;
        font-kerning: normal;
        line-break: strict;
        -webkit-font-smoothing: antialiased;
      }

      .pi-method-inner {
        width: min(calc(100% - 40px), 430px);
        min-height: auto;
        padding:
          clamp(68px, 9.5vh, 82px)
          0
          clamp(58px, 7.5vh, 70px);
      }

      /* -------------------------
         INTRO COPY
      ------------------------- */

      .pi-method-copy,
      .pi-method-title,
      .pi-method-lead,
      .pi-method-supplement {
        width: 100%;
      }

      .pi-method-title {
        max-width: 390px;
        font-size: clamp(22px, 5.9vw, 24px);
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.04em;
        text-wrap: pretty;
      }

      .pi-method-lead {
        max-width: 390px;
        margin-top: 22px;
        color: rgba(6, 24, 61, 0.70);
        font-size: clamp(14px, 3.75vw, 15px);
        line-height: 1.8;
        letter-spacing: 0.025em;
        text-wrap: pretty;
      }

      /* -------------------------
         VERTICAL PROCESS
      ------------------------- */

      .pi-method-process {
        width: 100%;
        margin-top: 32px;
        margin-left: 0;
        overflow: visible;
        scroll-snap-type: none;
        scroll-padding-inline-start: 0;
        overscroll-behavior-inline: auto;
      }

      .pi-method-list {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10px;
        column-gap: 0;
        align-items: stretch;
        padding: 0;
      }

      .pi-method-flow-line {
        display: none;
      }

      .pi-method-step {
        --step-delay: calc(0.12s + var(--step-index) * 0.07s);

        min-width: 0;
        min-height: 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        transform: translateY(10px);
      }

      .pi-method-section.is-inview .pi-method-step {
        animation-duration: 0.64s;
      }

      @keyframes pi-method-card-enter {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* -------------------------
         COMPACT MOBILE CARD
      ------------------------- */

      .pi-method-card {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 14px;
        row-gap: 8px;
        align-items: start;
        width: 100%;
        min-height: 126px;
        padding: 14px 15px 15px 14px;
        overflow: hidden;
        border-color: rgba(54, 92, 149, 0.14);
        background:
          linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 58%,
            #fafcff 100%
          );
        box-shadow:
          0 6px 16px rgba(18, 43, 81, 0.028),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
        transform: none;
      }

      .pi-method-step.is-active .pi-method-card {
        border-color: rgba(54, 105, 181, 0.27);
        box-shadow:
          0 7px 18px rgba(23, 51, 94, 0.042),
          inset 0 1px 0 rgba(255, 255, 255, 0.98);
        transform: none;
      }

      /* スマホではカードの輪郭と情報の整列を優先し、グローは停止 */

      .pi-method-step__glow {
        display: none;
      }

      /* -------------------------
         VERTICAL CONNECTOR
      ------------------------- */

      .pi-method-connector {
        position: absolute;
        z-index: 5;
        top: 100%;
        left: 47px;
        width: 8px;
        height: 10px;
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top center;
      }

      .pi-method-section.is-inview .pi-method-connector {
        animation:
          pi-method-connector-enter-mobile
          0.34s
          cubic-bezier(.2, .75, .2, 1)
          calc(0.48s + var(--step-index) * 0.07s)
          forwards;
      }

      .pi-method-connector::before {
        left: 3px;
        right: auto;
        top: 0;
        width: 1px;
        height: 8px;
        background:
          linear-gradient(
            180deg,
            rgba(93, 133, 193, 0.13),
            rgba(86, 132, 200, 0.30)
          );
      }

      .pi-method-connector::after {
        right: auto;
        left: 1px;
        top: 4px;
        width: 5px;
        height: 5px;
        border-top: 0;
        border-right: 1px solid rgba(76, 121, 190, 0.40);
        border-bottom: 1px solid rgba(76, 121, 190, 0.40);
        transform: rotate(45deg);
      }

      @keyframes pi-method-connector-enter-mobile {
        from {
          opacity: 0;
          transform: scaleY(0);
        }

        to {
          opacity: 1;
          transform: scaleY(1);
        }
      }

      /* -------------------------
         CARD TYPOGRAPHY / GRID
      ------------------------- */

      .pi-method-step__accent {
        left: 14px;
        top: -1px;
        height: 1px;
      }

      .pi-method-step.is-active .pi-method-step__accent {
        width: 28px;
      }

      .pi-method-step__number {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        margin: 0;
        color: rgba(6, 24, 61, 0.57);
        font-size: clamp(11px, 2.85vw, 12px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.12em;
      }

      .pi-method-step.is-active .pi-method-step__number {
        color: var(--method-blue);
        transform: none;
      }

      .pi-method-step__icon {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        width: 100%;
        height: 66px;
        margin: 0;
        background-position: center top;
        transform: none;
      }

      .pi-method-step.is-active .pi-method-step__icon {
        transform: none;
        filter:
          drop-shadow(0 4px 7px rgba(48, 91, 155, 0.045));
      }

      .pi-method-step__title {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        margin: 0;
        font-size: clamp(13px, 3.5vw, 14.5px);
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: 0.025em;
        text-wrap: pretty;
      }

      .pi-method-step.is-active .pi-method-step__title {
        color: var(--method-blue-deep);
        transform: none;
      }

      .pi-method-step__description {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
        margin: 0;
        color: rgba(6, 24, 61, 0.60);
        font-size: clamp(11.25px, 2.95vw, 12px);
        font-weight: 400;
        line-height: 1.62;
        letter-spacing: 0.015em;
        text-wrap: pretty;
      }

      .pi-method-step.is-active .pi-method-step__description {
        color: rgba(16, 76, 156, 0.72);
        transform: none;
      }

      /* -------------------------
         SUPPLEMENT
      ------------------------- */

      .pi-method-supplement {
        max-width: 390px;
        margin-top: 30px;
        padding-top: 18px;
      }

      .pi-method-supplement::before {
        width: 52px;
      }

      .pi-method-supplement p {
        color: rgba(6, 24, 61, 0.63);
        font-size: clamp(13.5px, 3.6vw, 14.5px);
        line-height: 1.76;
        letter-spacing: 0.025em;
        text-align: left;
        text-wrap: pretty;
      }

      /* PC用の固定改行はスマホでは解除 */

      .pi-br--desktop {
        display: none;
      }
    }

    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 360px) {
      .pi-method-inner {
        width: calc(100% - 32px);
        padding-top: 64px;
        padding-bottom: 56px;
      }

      .pi-method-title {
        font-size: clamp(21px, 6.2vw, 22.5px);
        line-height: 1.5;
        letter-spacing: 0.035em;
      }

      .pi-method-lead {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.78;
        letter-spacing: 0.02em;
      }

      .pi-method-process {
        margin-top: 28px;
      }

      .pi-method-list {
        row-gap: 9px;
      }

      .pi-method-card {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 7px;
        min-height: 118px;
        padding: 13px 13px 14px;
      }

      .pi-method-step__accent {
        left: 13px;
      }

      .pi-method-step__number {
        font-size: 10.75px;
      }

      .pi-method-step__icon {
        height: 56px;
      }

      .pi-method-step__title {
        font-size: clamp(12.5px, 3.65vw, 13.5px);
        line-height: 1.44;
      }

      .pi-method-step__description {
        font-size: clamp(10.75px, 3.05vw, 11.5px);
        line-height: 1.58;
      }

      .pi-method-connector {
        left: 39px;
        height: 9px;
      }

      .pi-method-supplement {
        margin-top: 27px;
        padding-top: 17px;
      }

      .pi-method-supplement p {
        font-size: 13.5px;
        line-height: 1.74;
      }
    }

    /* =========================================================
       MOBILE LANDSCAPE
    ========================================================= */

    @media
      (max-width: 780px)
      and (orientation: landscape)
      and (max-height: 560px) {

      .pi-method-inner {
        width: min(calc(100% - 48px), 680px);
        padding-top: 54px;
        padding-bottom: 50px;
      }

      .pi-method-title {
        max-width: 620px;
        font-size: 22px;
        line-height: 1.48;
      }

      .pi-method-lead {
        max-width: 640px;
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.72;
      }

      .pi-method-process {
        margin-top: 26px;
      }

      .pi-method-card {
        grid-template-columns: 66px minmax(0, 1fr);
        min-height: 116px;
        padding-top: 13px;
        padding-bottom: 13px;
      }

      .pi-method-step__icon {
        height: 58px;
      }

      .pi-method-supplement {
        margin-top: 26px;
      }
    }

    /* =========================================================
       LINE BREAK CONTROL
    ========================================================= */

    .pi-br--desktop {
      display: inline;
    }

    @media (max-width: 780px) {
      .pi-br--desktop {
        display: none;
      }
    }

    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      .pi-method-copy,
      .pi-method-step,
      .pi-method-step__glow,
      .pi-method-card,
      .pi-method-connector,
      .pi-method-flow-line::before,
      .pi-method-step__icon,
      .pi-method-step__number,
      .pi-method-step__title,
      .pi-method-step__description,
      .pi-method-step__accent,
      .pi-method-supplement {
        animation: none !important;
        transition: none !important;
      }

      .pi-method-copy,
      .pi-method-step,
      .pi-method-connector,
      .pi-method-supplement {
        opacity: 1 !important;
        transform: none !important;
      }

      .pi-method-flow-line::before {
        transform: scaleX(1) !important;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 08 / 06-use-scene
   Original cascade position: 8 of 11
========================================================= */
    /* =========================================================
       06 USE SCENE / V6
       MULTI OPEN LANDSCAPE ACCORDION

       ・各項目を独立して開閉
       ・別項目を開いても既存項目は開いたまま
       ・同じ項目を再クリックすると閉じる
       ・すべて開く / すべて閉じるを搭載
       ・3項目以上展開時は自動で一覧密度へ切り替え
       ・ホバーでは開閉せず、視覚的な反応だけを付与
       ・初期状態はすべて閉じる
       ========================================================= */

    .pi-use-scene-v6 {
      --use-bg-top: #06142d;
      --use-bg: #07152e;
      --use-bg-deep: #030d20;

      --use-white: #ffffff;
      --use-text: rgba(244, 248, 255, 0.94);
      --use-text-soft: rgba(247, 249, 255, 0.72);
      --use-text-muted: rgba(203, 218, 243, 0.4);

      --use-line: rgba(184, 205, 237, 0.14);
      --use-line-active: rgba(128, 167, 250, 0.38);
      --use-line-control: rgba(184, 205, 237, 0.2);

      --use-accent: #7198ff;

      --scene-closed-height: 96px;
      --scene-open-height: 204px;
      --scene-dense-open-height: 176px;

      position: relative;
      isolation: isolate;

      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);

      overflow: hidden;

      color: var(--use-text);

      background:
        radial-gradient(
          circle at 83% 48%,
          rgba(45, 82, 153, 0.14) 0%,
          rgba(28, 58, 111, 0.055) 31%,
          transparent 58%
        ),
        radial-gradient(
          circle at 18% 17%,
          rgba(37, 71, 129, 0.055) 0%,
          transparent 37%
        ),
        linear-gradient(
          180deg,
          var(--use-bg-top) 0%,
          var(--use-bg) 48%,
          var(--use-bg-deep) 100%
        );

      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;

      box-sizing: border-box;
    }

    .pi-use-scene-v6 *,
    .pi-use-scene-v6 *::before,
    .pi-use-scene-v6 *::after {
      box-sizing: border-box;
    }

    .pi-use-scene-v6 button {
      font: inherit;
    }

    .pi-use-scene-v6 .pi-br--desktop {
      display: inline;
    }

    /* =========================================================
       SECTION BACKGROUND
       ========================================================= */

    .pi-use-scene-v6__background {
      position: absolute;
      inset: 0;
      z-index: 0;

      overflow: hidden;
      pointer-events: none;
    }

    .pi-use-scene-v6__background::before {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.011) 0%,
          transparent 23%,
          transparent 78%,
          rgba(255, 255, 255, 0.008) 100%
        );

      opacity: 0.75;
    }

    .pi-use-scene-v6__background::after {
      content: "";
      position: absolute;

      right: -17%;
      bottom: -23%;

      width: min(72vw, 1080px);
      aspect-ratio: 1;
      border-radius: 50%;

      border: 1px solid rgba(115, 154, 230, 0.026);

      box-shadow:
        0 0 0 110px rgba(55, 91, 158, 0.009),
        0 0 0 240px rgba(55, 91, 158, 0.006);

      opacity: 0.8;
    }

    /* =========================================================
       INNER
       ========================================================= */

    .pi-use-scene-v6__inner {
      position: relative;
      z-index: 2;

      width: min(84vw, 1320px);
      margin: 0 auto;

      padding:
        clamp(112px, 11vh, 144px)
        0
        clamp(96px, 10vh, 126px);
    }

    /* =========================================================
       INTRO / COMMON TYPOGRAPHY
       ========================================================= */

    .pi-use-scene-v6__intro {
      width: min(100%, 900px);
      margin-left: 0;
      padding-left: 0;
    }

    .pi-use-scene-v6__title,
    .pi-use-scene-v6__lead-group,
    .pi-use-scene-v6__lead {
      width: 100%;
      margin-left: 0;
      padding-left: 0;
    }

    .pi-use-scene-v6__title {
      margin: 0;

      color: var(--use-white);

      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;

      text-wrap: pretty;
    }

    .pi-use-scene-v6__lead-group {
      margin-top: 40px;
    }

    .pi-use-scene-v6__lead {
      margin: 0;

      color: var(--use-text-soft);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    .pi-use-scene-v6__lead + .pi-use-scene-v6__lead {
      margin-top: 28px;
    }

    /* =========================================================
       LIST HEADER / CONTROLS
       ========================================================= */

    .pi-use-scene-v6__list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;

      width: 100%;
      margin-top: clamp(62px, 6.8vw, 88px);
      margin-bottom: 18px;
    }

    .pi-use-scene-v6__list-kicker {
      margin: 0;

      color: rgba(202, 216, 240, 0.42);

      font-size: 9px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .pi-use-scene-v6__controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .pi-use-scene-v6__control {
      position: relative;

      min-width: 108px;
      min-height: 34px;
      padding: 0 15px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      appearance: none;
      -webkit-appearance: none;

      border: 1px solid var(--use-line-control);
      border-radius: 0;

      color: rgba(224, 233, 248, 0.64);
      background: rgba(255, 255, 255, 0.012);

      font-size: 10px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.09em;

      cursor: pointer;

      transition:
        color 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        opacity 260ms ease;
    }

    .pi-use-scene-v6__control-icon {
      position: relative;

      width: 10px;
      height: 10px;

      flex: 0 0 10px;
    }

    .pi-use-scene-v6__control-icon::before,
    .pi-use-scene-v6__control-icon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;

      width: 10px;
      height: 1px;

      background: currentColor;
      transform: translate(-50%, -50%);
    }

    .pi-use-scene-v6__control--open
      .pi-use-scene-v6__control-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .pi-use-scene-v6__control:disabled {
      opacity: 0.28;
      cursor: default;
      pointer-events: none;
    }

    .pi-use-scene-v6__control:focus-visible {
      outline: 1px solid rgba(126, 165, 250, 0.62);
      outline-offset: 3px;
    }

    @media (hover: hover) and (pointer: fine) {
      .pi-use-scene-v6__control:not(:disabled):hover {
        color: rgba(244, 248, 255, 0.96);
        border-color: rgba(113, 152, 255, 0.52);
        background: rgba(113, 152, 255, 0.055);
      }
    }

    /* =========================================================
       SCENE LANDSCAPES
       ========================================================= */

    .pi-use-scene-v6__scenes {
      position: relative;

      width: 100%;

      border-top: 1px solid var(--use-line);
      border-bottom: 1px solid var(--use-line);
    }

    .pi-use-scene-v6__scene {
      position: relative;
      isolation: isolate;

      width: 100%;
      height: var(--scene-closed-height);
      margin: 0;
      padding: 0;

      display: grid;
      grid-template-columns:
        clamp(48px, 5vw, 68px)
        minmax(310px, 470px)
        minmax(0, 1fr)
        34px;

      align-items: center;
      column-gap: clamp(18px, 2.2vw, 34px);

      appearance: none;
      -webkit-appearance: none;

      border: 0;
      border-radius: 0;
      border-bottom: 1px solid var(--use-line);

      color: inherit;
      background: transparent;

      text-align: left;
      cursor: pointer;
      overflow: hidden;

      transition:
        height 620ms cubic-bezier(0.22, 0.72, 0.16, 1),
        border-color 340ms ease;
    }

    .pi-use-scene-v6__scene:last-child {
      border-bottom: 0;
    }

    .pi-use-scene-v6__scene::after {
      content: "";
      position: absolute;

      top: 19px;
      bottom: 19px;
      left: 0;

      z-index: 6;

      width: 2px;

      background:
        linear-gradient(
          180deg,
          rgba(113, 152, 255, 0.15),
          var(--use-accent),
          rgba(113, 152, 255, 0.12)
        );

      opacity: 0;
      transform: scaleY(0.22);
      transform-origin: center;

      transition:
        opacity 300ms ease,
        transform 500ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__scene.is-active {
      height: var(--scene-open-height);
      border-color: var(--use-line-active);
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active {
      height: var(--scene-dense-open-height);
    }

    .pi-use-scene-v6__scene.is-active::after {
      opacity: 1;
      transform: scaleY(1);
    }

    /* =========================================================
       LARGE BACKGROUND IMAGE
       ========================================================= */

    .pi-use-scene-v6__visual {
      position: absolute;
      inset: -8% -2%;
      z-index: 0;

      background-image: var(--scene-image);
      background-repeat: no-repeat;
      background-size: clamp(700px, 66vw, 1040px) auto;
      background-position: var(--scene-position, right 63%);

      opacity: 0.39;

      transform:
        translate3d(18px, 0, 0)
        scale(1.025);

      transform-origin: right center;

      filter:
        saturate(0.88)
        brightness(0.78);

      transition:
        opacity 560ms ease,
        transform 860ms cubic-bezier(0.22, 0.72, 0.16, 1),
        filter 560ms ease;
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__visual {
      opacity: 0.86;

      transform:
        translate3d(0, 0, 0)
        scale(1);

      filter:
        saturate(1)
        brightness(0.96);
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__visual {
      opacity: 0.68;
    }

    .pi-use-scene-v6__veil {
      position: absolute;
      inset: 0;
      z-index: 1;

      background:
        linear-gradient(
          90deg,
          rgba(3, 13, 32, 0.99) 0%,
          rgba(4, 16, 38, 0.97) 23%,
          rgba(5, 19, 43, 0.86) 43%,
          rgba(5, 19, 43, 0.48) 64%,
          rgba(4, 16, 37, 0.12) 84%,
          rgba(3, 13, 31, 0.1) 100%
        ),
        linear-gradient(
          180deg,
          rgba(4, 16, 37, 0.08) 0%,
          transparent 48%,
          rgba(2, 10, 25, 0.15) 100%
        );

      pointer-events: none;

      transition: background 520ms ease;
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__veil {
      background:
        linear-gradient(
          90deg,
          rgba(3, 13, 32, 0.99) 0%,
          rgba(4, 16, 38, 0.95) 22%,
          rgba(5, 19, 43, 0.75) 43%,
          rgba(5, 19, 43, 0.32) 65%,
          rgba(4, 16, 37, 0.06) 84%,
          rgba(3, 13, 31, 0.04) 100%
        ),
        linear-gradient(
          180deg,
          rgba(4, 16, 37, 0.04) 0%,
          transparent 50%,
          rgba(2, 10, 25, 0.16) 100%
        );
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__veil {
      background:
        linear-gradient(
          90deg,
          rgba(3, 13, 32, 0.995) 0%,
          rgba(4, 16, 38, 0.97) 27%,
          rgba(5, 19, 43, 0.81) 49%,
          rgba(5, 19, 43, 0.42) 69%,
          rgba(4, 16, 37, 0.1) 87%,
          rgba(3, 13, 31, 0.07) 100%
        );
    }

    /* =========================================================
       NUMBER
       ========================================================= */

    .pi-use-scene-v6__number {
      position: relative;
      z-index: 4;

      display: block;
      padding-left: clamp(14px, 1.6vw, 22px);

      color: var(--use-text-muted);

      font-size: 10px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.16em;

      transition:
        color 340ms ease,
        transform 500ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__number {
      color: rgba(155, 185, 251, 0.94);
      transform: translate3d(0, -28px, 0);
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__number {
      transform: translate3d(0, -20px, 0);
    }

    /* =========================================================
       SCENE COPY
       ========================================================= */

    .pi-use-scene-v6__copy {
      position: relative;
      z-index: 4;

      display: block;
      min-width: 0;

      transform: translate3d(0, 0, 0);

      transition:
        transform 560ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__scene-title {
      display: block;

      width: min(100%, 460px);

      color: rgba(231, 238, 250, 0.66);

      font-size: clamp(17px, 1.32vw, 20px);
      font-weight: 500;
      line-height: 1.58;
      letter-spacing: 0.065em;

      text-wrap: pretty;

      transition:
        color 360ms ease,
        font-size 520ms cubic-bezier(0.22, 0.72, 0.16, 1),
        transform 520ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__scene-title {
      color: var(--use-white);

      font-size: clamp(21px, 1.72vw, 26px);
      font-weight: 600;
      line-height: 1.5;

      transform: translate3d(0, -1px, 0);
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__scene-title {
      font-size: clamp(19px, 1.5vw, 23px);
    }

    .pi-use-scene-v6__description {
      display: block;

      width: min(100%, 520px);
      max-height: 0;
      margin-top: 0;

      overflow: hidden;

      color: rgba(226, 235, 250, 0);

      font-size: 15px;
      font-weight: 400;
      line-height: 1.82;
      letter-spacing: 0.052em;

      opacity: 0;
      transform: translate3d(0, 9px, 0);

      text-wrap: pretty;

      transition:
        max-height 560ms cubic-bezier(0.22, 0.72, 0.16, 1),
        margin-top 460ms ease,
        color 420ms ease,
        opacity 380ms ease,
        transform 560ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__description {
      max-height: 118px;
      margin-top: 14px;

      color: rgba(226, 235, 250, 0.72);

      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__description {
      max-height: 92px;
      margin-top: 9px;

      font-size: 14px;
      line-height: 1.72;
    }

    /* =========================================================
       SUBTLE RIGHT LABEL
       ========================================================= */

    .pi-use-scene-v6__scene-label {
      position: relative;
      z-index: 4;

      justify-self: end;
      align-self: end;

      margin:
        0
        clamp(4px, 0.8vw, 12px)
        clamp(18px, 2vw, 28px)
        0;

      color: rgba(211, 224, 246, 0);

      font-size: 9px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.17em;

      opacity: 0;
      transform: translate3d(0, 7px, 0);

      transition:
        color 380ms ease,
        opacity 380ms ease,
        transform 560ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__scene-label {
      color: rgba(211, 224, 246, 0.34);

      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .pi-use-scene-v6.is-density-compact
      .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__scene-label {
      opacity: 0.5;
    }

    /* =========================================================
       PLUS / MINUS INDICATOR
       ========================================================= */

    .pi-use-scene-v6__indicator {
      position: relative;
      z-index: 5;

      justify-self: end;

      width: 22px;
      height: 22px;
      margin-right: 4px;

      color: rgba(205, 219, 243, 0.43);

      transition:
        color 320ms ease,
        transform 520ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__indicator::before,
    .pi-use-scene-v6__indicator::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;

      width: 13px;
      height: 1px;

      background: currentColor;
      transform: translate(-50%, -50%);

      transition:
        opacity 320ms ease,
        transform 460ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6__indicator::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__indicator {
      color: rgba(150, 181, 248, 0.9);
      transform: rotate(180deg);
    }

    .pi-use-scene-v6__scene.is-active
      .pi-use-scene-v6__indicator::after {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
    }

    /* =========================================================
       HOVER
       ========================================================= */

    @media (hover: hover) and (pointer: fine) {
      .pi-use-scene-v6__scene:not(.is-active):hover
        .pi-use-scene-v6__visual {
        opacity: 0.55;

        transform:
          translate3d(8px, 0, 0)
          scale(1.014);

        filter:
          saturate(0.95)
          brightness(0.88);
      }

      .pi-use-scene-v6__scene:not(.is-active):hover
        .pi-use-scene-v6__scene-title {
        color: rgba(247, 250, 255, 0.9);
        transform: translate3d(4px, 0, 0);
      }

      .pi-use-scene-v6__scene:not(.is-active):hover
        .pi-use-scene-v6__number,
      .pi-use-scene-v6__scene:not(.is-active):hover
        .pi-use-scene-v6__indicator {
        color: rgba(208, 222, 245, 0.74);
      }
    }

    .pi-use-scene-v6__scene:focus-visible {
      outline: 1px solid rgba(126, 165, 250, 0.62);
      outline-offset: -1px;
    }

    /* =========================================================
       INITIAL REVEAL
       ========================================================= */

    .pi-use-scene-v6[data-use-scene-motion="true"]
      .pi-use-scene-v6__intro {
      opacity: 0;
      transform: translate3d(0, 18px, 0);

      transition:
        opacity 720ms ease,
        transform 840ms cubic-bezier(0.22, 0.72, 0.16, 1);
    }

    .pi-use-scene-v6[data-use-scene-motion="true"]
      .pi-use-scene-v6__list-head,
    .pi-use-scene-v6[data-use-scene-motion="true"]
      .pi-use-scene-v6__scenes {
      opacity: 0;
      transform: translate3d(0, 24px, 0);

      transition:
        opacity 760ms ease 100ms,
        transform 920ms cubic-bezier(0.22, 0.72, 0.16, 1) 80ms;
    }

    .pi-use-scene-v6[data-use-scene-motion="true"].is-inview
      .pi-use-scene-v6__intro,
    .pi-use-scene-v6[data-use-scene-motion="true"].is-inview
      .pi-use-scene-v6__list-head,
    .pi-use-scene-v6[data-use-scene-motion="true"].is-inview
      .pi-use-scene-v6__scenes {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1000px) {
      .pi-use-scene-v6 {
        --scene-closed-height: 90px;
        --scene-open-height: 194px;
        --scene-dense-open-height: 168px;
      }

      .pi-use-scene-v6__inner {
        width: min(88vw, 900px);
        padding-top: 106px;
        padding-bottom: 96px;
      }

      .pi-use-scene-v6__intro {
        width: min(100%, 760px);
      }

      .pi-use-scene-v6__scene {
        grid-template-columns:
          48px
          minmax(270px, 400px)
          minmax(0, 1fr)
          30px;

        column-gap: 16px;
      }

      .pi-use-scene-v6__visual {
        background-size: 820px auto;
      }

      .pi-use-scene-v6__veil {
        background:
          linear-gradient(
            90deg,
            rgba(3, 13, 32, 0.99) 0%,
            rgba(4, 16, 38, 0.96) 29%,
            rgba(5, 19, 43, 0.78) 51%,
            rgba(5, 19, 43, 0.28) 78%,
            rgba(3, 13, 31, 0.08) 100%
          );
      }
    }

    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 780px) {
      .pi-use-scene-v6 {
        --scene-closed-height: 68px;
        --scene-open-height: 158px;
        --scene-dense-open-height: 144px;

        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-synthesis: none;
        font-kerning: normal;
        line-break: strict;
        -webkit-font-smoothing: antialiased;
      }

      .pi-use-scene-v6 .pi-br--desktop {
        display: none;
      }

      .pi-use-scene-v6__inner {
        width: min(89vw, 560px);

        padding-top: 68px;
        padding-bottom: 60px;
      }

      .pi-use-scene-v6__intro {
        width: 100%;
      }

      .pi-use-scene-v6__title {
        width: min(100%, 430px);

        font-size: clamp(22px, 5.85vw, 24px);
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.04em;
      }

      .pi-use-scene-v6__lead-group {
        width: min(100%, 500px);
        margin-top: 24px;
      }

      .pi-use-scene-v6__lead {
        font-size: clamp(14px, 3.65vw, 14.5px);
        font-weight: 400;
        line-height: 1.78;
        letter-spacing: 0.028em;
      }

      .pi-use-scene-v6__lead + .pi-use-scene-v6__lead {
        margin-top: 16px;
      }

      /* -----------------------------------------
         LIST HEADER / CONTROLS
         ----------------------------------------- */

      .pi-use-scene-v6__list-head {
        align-items: flex-end;
        gap: 12px;

        margin-top: 38px;
        margin-bottom: 12px;
      }

      .pi-use-scene-v6__list-kicker {
        font-size: 8px;
        letter-spacing: 0.17em;
      }

      .pi-use-scene-v6__controls {
        gap: 5px;
      }

      .pi-use-scene-v6__control {
        min-width: 0;
        min-height: 29px;
        padding: 0 9px;
        gap: 5px;

        font-size: 8.5px;
        letter-spacing: 0.055em;
      }

      .pi-use-scene-v6__control-icon {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
      }

      .pi-use-scene-v6__control-icon::before,
      .pi-use-scene-v6__control-icon::after {
        width: 8px;
      }

      /* -----------------------------------------
         SCENE LIST
         ----------------------------------------- */

      .pi-use-scene-v6__scene {
        grid-template-columns:
          27px
          minmax(0, 1fr)
          24px;

        grid-template-rows: 1fr;

        align-items: center;
        column-gap: 8px;

        padding: 0;

        touch-action: manipulation;

        transition:
          height 520ms cubic-bezier(0.22, 0.72, 0.16, 1),
          border-color 300ms ease;
      }

      .pi-use-scene-v6__scene::after {
        top: 14px;
        bottom: 14px;

        width: 2px;
      }

      /* -----------------------------------------
         NUMBER
         ----------------------------------------- */

      .pi-use-scene-v6__number {
        align-self: center;

        padding-left: 6px;
        margin-top: 0;

        font-size: 8.5px;
        line-height: 1;
        letter-spacing: 0.14em;

        transform: none;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__number,
      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__number {
        align-self: start;

        margin-top: 31px;

        color: rgba(155, 185, 251, 0.92);

        transform: none;
      }

      /* -----------------------------------------
         COPY
         ----------------------------------------- */

      .pi-use-scene-v6__copy {
        align-self: center;

        width: 100%;
        min-width: 0;
        margin-top: 0;
        padding-right: 2px;

        transform: none;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__copy {
        align-self: start;

        margin-top: 26px;

        transform: none;
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__copy {
        margin-top: 23px;
      }

      .pi-use-scene-v6__scene-title {
        width: 100%;

        color: rgba(231, 238, 250, 0.7);

        font-size: clamp(13.5px, 3.55vw, 14.5px);
        font-weight: 500;
        line-height: 1.47;
        letter-spacing: 0.03em;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__scene-title {
        width: 100%;

        color: var(--use-white);

        font-size: clamp(16px, 4.15vw, 17px);
        font-weight: 600;
        line-height: 1.43;
        letter-spacing: 0.032em;

        transform: none;
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__scene-title {
        font-size: clamp(15.5px, 4vw, 16.5px);
      }

      .pi-use-scene-v6__description {
        width: min(100%, 335px);
        max-height: 0;
        margin-top: 0;

        font-size: clamp(12.5px, 3.2vw, 13.25px);
        font-weight: 400;
        line-height: 1.66;
        letter-spacing: 0.019em;

        opacity: 0;
        transform: translate3d(0, 6px, 0);
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__description {
        max-height: 82px;
        margin-top: 8px;

        color: rgba(226, 235, 250, 0.75);

        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__description {
        max-height: 74px;
        margin-top: 6px;

        font-size: clamp(12px, 3.1vw, 12.75px);
        line-height: 1.62;
      }

      /* -----------------------------------------
         BACKGROUND IMAGE
         ----------------------------------------- */

      .pi-use-scene-v6__visual {
        inset: -7% -16% -7% 10%;

        background-size:
          clamp(390px, 108vw, 500px)
          auto;

        background-position:
          var(
            --scene-mobile-position,
            70% 63%
          );

        opacity: 0.27;

        transform:
          translate3d(8px, 0, 0)
          scale(1.01);

        filter:
          saturate(0.86)
          brightness(0.76);

        transition:
          opacity 480ms ease,
          transform 680ms cubic-bezier(0.22, 0.72, 0.16, 1),
          filter 480ms ease;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__visual {
        opacity: 0.64;

        transform:
          translate3d(0, 0, 0)
          scale(1);

        filter:
          saturate(0.95)
          brightness(0.9);
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__visual {
        opacity: 0.52;
      }

      /* -----------------------------------------
         VEIL
         ----------------------------------------- */

      .pi-use-scene-v6__veil {
        background:
          linear-gradient(
            90deg,
            rgba(3, 13, 32, 0.995) 0%,
            rgba(4, 16, 38, 0.985) 35%,
            rgba(5, 19, 43, 0.86) 58%,
            rgba(5, 19, 43, 0.42) 82%,
            rgba(3, 13, 31, 0.2) 100%
          ),
          linear-gradient(
            180deg,
            rgba(3, 13, 31, 0.11) 0%,
            transparent 48%,
            rgba(2, 9, 23, 0.2) 100%
          );
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__veil {
        background:
          linear-gradient(
            90deg,
            rgba(3, 13, 32, 0.995) 0%,
            rgba(4, 16, 38, 0.965) 33%,
            rgba(5, 19, 43, 0.72) 58%,
            rgba(5, 19, 43, 0.25) 83%,
            rgba(3, 13, 31, 0.1) 100%
          ),
          linear-gradient(
            180deg,
            rgba(3, 13, 31, 0.07) 0%,
            transparent 48%,
            rgba(2, 9, 23, 0.22) 100%
          );
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__veil {
        background:
          linear-gradient(
            90deg,
            rgba(3, 13, 32, 0.998) 0%,
            rgba(4, 16, 38, 0.98) 38%,
            rgba(5, 19, 43, 0.8) 64%,
            rgba(5, 19, 43, 0.35) 85%,
            rgba(3, 13, 31, 0.15) 100%
          );
      }

      .pi-use-scene-v6__scene-label {
        display: none;
      }

      .pi-use-scene-v6__indicator {
        grid-column: 3;

        width: 19px;
        height: 19px;
        margin-right: 1px;
      }

      .pi-use-scene-v6__indicator::before,
      .pi-use-scene-v6__indicator::after {
        width: 11px;
      }

      .pi-use-scene-v6[data-use-scene-motion="true"]
        .pi-use-scene-v6__intro {
        transform: translate3d(0, 10px, 0);
      }

      .pi-use-scene-v6[data-use-scene-motion="true"]
        .pi-use-scene-v6__list-head,
      .pi-use-scene-v6[data-use-scene-motion="true"]
        .pi-use-scene-v6__scenes {
        transform: translate3d(0, 14px, 0);
      }

      .pi-use-scene-v6[data-use-scene-motion="true"].is-inview
        .pi-use-scene-v6__intro,
      .pi-use-scene-v6[data-use-scene-motion="true"].is-inview
        .pi-use-scene-v6__list-head,
      .pi-use-scene-v6[data-use-scene-motion="true"].is-inview
        .pi-use-scene-v6__scenes {
        transform: translate3d(0, 0, 0);
      }
    }

    /* =========================================================
       SMALL MOBILE
       ========================================================= */

    @media (max-width: 360px) {
      .pi-use-scene-v6 {
        --scene-closed-height: 64px;
        --scene-open-height: 154px;
        --scene-dense-open-height: 140px;
      }

      .pi-use-scene-v6__inner {
        width: calc(100% - 28px);

        padding-top: 60px;
        padding-bottom: 54px;
      }

      .pi-use-scene-v6__title {
        font-size: 21.5px;
        line-height: 1.5;
        letter-spacing: 0.035em;
      }

      .pi-use-scene-v6__lead-group {
        margin-top: 22px;
      }

      .pi-use-scene-v6__lead {
        font-size: 13.75px;
        line-height: 1.76;
        letter-spacing: 0.024em;
      }

      .pi-use-scene-v6__lead + .pi-use-scene-v6__lead {
        margin-top: 14px;
      }

      .pi-use-scene-v6__list-head {
        margin-top: 34px;
      }

      .pi-use-scene-v6__list-kicker {
        display: none;
      }

      .pi-use-scene-v6__controls {
        width: 100%;
        justify-content: flex-end;
      }

      .pi-use-scene-v6__control {
        min-height: 28px;
        padding: 0 8px;

        font-size: 8.25px;
      }

      .pi-use-scene-v6__scene {
        grid-template-columns:
          26px
          minmax(0, 1fr)
          22px;

        column-gap: 7px;
      }

      .pi-use-scene-v6__number {
        padding-left: 5px;

        font-size: 8px;
        letter-spacing: 0.13em;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__number,
      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__number {
        margin-top: 29px;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__copy {
        margin-top: 24px;
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__copy {
        margin-top: 22px;
      }

      .pi-use-scene-v6__scene-title {
        font-size: 13px;
        line-height: 1.45;
        letter-spacing: 0.025em;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__scene-title {
        font-size: 15.5px;
        line-height: 1.42;
        letter-spacing: 0.027em;
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__scene-title {
        font-size: 15px;
      }

      .pi-use-scene-v6__description {
        width: 100%;

        font-size: 12px;
        line-height: 1.62;
        letter-spacing: 0.016em;
      }

      .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__description {
        max-height: 78px;
        margin-top: 7px;
      }

      .pi-use-scene-v6.is-density-compact
        .pi-use-scene-v6__scene.is-active
        .pi-use-scene-v6__description {
        max-height: 70px;
        margin-top: 5px;

        font-size: 11.75px;
      }

      .pi-use-scene-v6__visual {
        inset: -7% -20% -7% 8%;

        background-size:
          clamp(370px, 120vw, 440px)
          auto;
      }
    }

    /* =========================================================
       REDUCED MOTION
       ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      .pi-use-scene-v6__intro,
      .pi-use-scene-v6__list-head,
      .pi-use-scene-v6__scenes,
      .pi-use-scene-v6__scene,
      .pi-use-scene-v6__scene::after,
      .pi-use-scene-v6__visual,
      .pi-use-scene-v6__veil,
      .pi-use-scene-v6__number,
      .pi-use-scene-v6__copy,
      .pi-use-scene-v6__scene-title,
      .pi-use-scene-v6__description,
      .pi-use-scene-v6__scene-label,
      .pi-use-scene-v6__indicator,
      .pi-use-scene-v6__indicator::before,
      .pi-use-scene-v6__indicator::after,
      .pi-use-scene-v6__control {
        transition: none !important;
        animation: none !important;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 09 / 07-output
   Original cascade position: 9 of 11
========================================================= */
    /* =========================================================
       07 OUTPUT
       PC版維持・スマホ版再設計 完全置き換え版
       ========================================================= */

    .pi-output-section {
      --output-bg: #041327;
      --output-bg-deep: #020b1c;
      --output-bg-soft: #071a34;

      --output-text: #f7f9ff;
      --output-text-soft: rgba(247, 249, 255, 0.72);
      --output-text-muted: rgba(228, 236, 249, 0.36);

      --output-line: rgba(183, 204, 235, 0.16);
      --output-line-soft: rgba(183, 204, 235, 0.09);

      --output-card: #fefefe;
      --output-card-border: rgba(112, 143, 190, 0.14);
      --output-card-text: #06183d;
      --output-card-text-soft: rgba(6, 24, 61, 0.68);

      --output-image-bg:
        url("../images/06back.png");

      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      isolation: isolate;

      color: var(--output-text);

      background:
        radial-gradient(
          circle at 82% 18%,
          rgba(29, 74, 137, 0.11),
          transparent 31%
        ),
        linear-gradient(
          180deg,
          var(--output-bg-deep) 0%,
          var(--output-bg) 48%,
          var(--output-bg-deep) 100%
        );

      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;

      letter-spacing: 0.05em;
      box-sizing: border-box;

      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      font-synthesis: none;
      font-kerning: normal;
      line-break: strict;
      -webkit-font-smoothing: antialiased;
    }

    .pi-output-section *,
    .pi-output-section *::before,
    .pi-output-section *::after {
      box-sizing: border-box;
    }

    .pi-output-section button {
      font: inherit;
    }

    /* =========================================================
       BACKGROUND
       ========================================================= */

    .pi-output-section__base {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .pi-output-section__base::before {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.012),
          transparent 30%,
          rgba(255, 255, 255, 0.006) 72%,
          transparent
        );

      opacity: 0.64;
    }

    /* =========================================================
       INTRO
       背景画像は高さを作らず、右側だけに限定して使用
       ========================================================= */

    .pi-output-hero {
      position: relative;
      z-index: 1;
      min-height: clamp(720px, 88svh, 900px);
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .pi-output-hero__background {
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .pi-output-hero__background::before {
      content: "";
      position: absolute;
      top: -9%;
      right: -5%;
      bottom: -5%;
      width: min(62vw, 960px);

      background-image: var(--output-image-bg);
      background-size: cover;
      background-position: 50% 38%;
      background-repeat: no-repeat;

      opacity: 0.72;
      transform: scale(1.02);
    }

    .pi-output-hero__background::after {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          var(--output-bg-deep) 0%,
          rgba(2, 11, 28, 0.98) 36%,
          rgba(2, 11, 28, 0.70) 62%,
          rgba(2, 11, 28, 0.18) 100%
        ),
        linear-gradient(
          180deg,
          rgba(2, 11, 28, 0.08) 0%,
          rgba(2, 11, 28, 0.04) 68%,
          var(--output-bg) 100%
        );
    }

    .pi-output-hero__inner,
    .pi-output-content {
      position: relative;
      z-index: 2;
      width: min(84vw, 1320px);
      margin: 0 auto;
    }

    .pi-output-hero__inner {
      padding: clamp(112px, 11vh, 148px) 0 clamp(76px, 8vh, 104px);
    }

    .pi-output-copy {
      width: min(1120px, 100%);
      margin-left: 0;
      padding-left: 0;
    }

    .pi-output-title,
    .pi-output-lead,
    .pi-output-ai-note {
      margin-left: 0;
      padding-left: 0;
    }

    .pi-output-title {
      width: 100%;
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;

      color: #ffffff;

      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;

      text-wrap: pretty;
    }

    .pi-output-lead,
    .pi-output-ai-note {
      width: min(1040px, 100%);
      margin-right: 0;
      margin-bottom: 0;

      color: var(--output-text-soft);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    .pi-output-lead {
      margin-top: 40px;
    }

    .pi-output-ai-note {
      margin-top: 28px;
      color: rgba(247, 249, 255, 0.54);
    }

    .pi-br--desktop {
      display: inline;
    }

    /* =========================================================
       CONTENT
       ========================================================= */

    .pi-output-content {
      padding:
        clamp(48px, 4.4vw, 62px)
        0
        clamp(66px, 7vw, 94px);
    }

    .pi-output-heading {
      margin: 0;
      color: rgba(255, 255, 255, 0.94);

      font-size: clamp(27px, 2.2vw, 34px);
      font-weight: 600;
      line-height: 1.62;
      letter-spacing: 0.08em;
    }

    /* =========================================================
       SHOWCASE
       sticky・画面高固定を完全撤去
       ========================================================= */

    .pi-output-showcase {
      position: relative;
      margin-top: clamp(34px, 3vw, 42px);
    }

    .pi-output-showcase__sticky {
      position: relative;
      top: auto;
      min-height: 0;
      display: block;
    }

    .pi-output-stage {
      position: relative;
      width: 100%;

      display: grid;
      grid-template-columns: minmax(205px, 238px) minmax(0, 1fr);
      column-gap: clamp(28px, 3.8vw, 56px);
      align-items: stretch;
    }

    /* =========================================================
       NAVIGATION
       ========================================================= */

    .pi-output-nav {
      position: relative;
      min-width: 0;
    }

    .pi-output-nav__line {
      display: none;
    }

    .pi-output-nav__indicator {
      display: none;
    }

    .pi-output-nav__list {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
    }

    .pi-output-nav__item {
      min-width: 0;
    }

    .pi-output-nav__button {
      position: relative;
      width: 100%;
      min-height: 88px;

      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;

      padding: 12px 13px 12px 20px;

      border: 0;
      border-bottom: 1px solid var(--output-line-soft);
      outline: none;

      background:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0)
        );
      background-size: 170% 100%;
      background-position: 100% 50%;

      color: rgba(223, 233, 248, 0.39);
      text-align: left;
      cursor: pointer;

      transition:
        color 0.38s ease,
        background-color 0.5s ease,
        background-position 0.8s cubic-bezier(.2, .75, .2, 1),
        border-color 0.45s ease;
    }

    .pi-output-nav__item:first-child .pi-output-nav__button {
      border-top: 1px solid var(--output-line-soft);
    }

    .pi-output-nav__index {
      display: block;
      color: rgba(205, 220, 242, 0.27);

      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.12em;

      transform: translate3d(0, 0, 0);

      transition:
        color 0.38s ease,
        opacity 0.38s ease,
        transform 0.58s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-output-nav__label {
      display: block;

      font-size: 15px;
      font-weight: 500;
      line-height: 1.55;
      letter-spacing: 0.06em;

      text-wrap: pretty;
      transform: translate3d(0, 0, 0);

      transition:
        transform 0.58s cubic-bezier(.2, .75, .2, 1),
        letter-spacing 0.45s ease,
        font-weight 0.3s ease,
        opacity 0.38s ease;
    }

    .pi-output-nav__button:hover {
      color: rgba(240, 246, 255, 0.72);

      background:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.018) 0%,
          rgba(255, 255, 255, 0.006) 62%,
          rgba(255, 255, 255, 0) 100%
        );
      background-size: 170% 100%;
      background-position: 58% 50%;
    }

    .pi-output-nav__button:hover .pi-output-nav__label {
      transform: translate3d(2px, 0, 0);
    }

    .pi-output-nav__button.is-active {
      color: rgba(255, 255, 255, 0.98);
      border-bottom-color: rgba(190, 211, 242, 0.16);

      background:
        linear-gradient(
          102deg,
          rgba(255, 255, 255, 0.054) 0%,
          rgba(255, 255, 255, 0.018) 44%,
          rgba(255, 255, 255, 0) 76%
        );
      background-size: 170% 100%;
      background-position: 0% 50%;

      animation: pi-output-nav-breathe 5.8s ease-in-out infinite alternate;
    }

    .pi-output-nav__button.is-active .pi-output-nav__index {
      color: rgba(214, 231, 255, 0.78);
      transform: translate3d(2px, 0, 0);
    }

    .pi-output-nav__button.is-active .pi-output-nav__label {
      transform: translate3d(5px, 0, 0);
      font-weight: 600;
      letter-spacing: 0.066em;
    }

    .pi-output-nav__button:focus-visible {
      color: #ffffff;
      outline: 1px solid rgba(126, 172, 239, 0.28);
      outline-offset: -1px;
    }

    @keyframes pi-output-nav-breathe {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 22% 50%;
      }
    }

    /* =========================================================
       CARD
       ========================================================= */

    .pi-output-card-shell {
      position: relative;
      min-width: 0;
      min-height: 400px;

      display: grid;
      isolation: isolate;
      overflow: hidden;

      border: 1px solid var(--output-card-border);
      border-radius: 0;

      background: var(--output-card);

      box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.15),
        0 6px 16px rgba(0, 0, 0, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

      transform: translateZ(0);

      transition:
        box-shadow 0.68s ease,
        transform 0.68s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-output-card-shell.is-switching {
      animation: pi-output-card-settle 0.72s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-output-card-shell::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;

      background:
        linear-gradient(
          100deg,
          rgba(232, 240, 252, 0.21) 0%,
          rgba(247, 250, 255, 0.075) 32%,
          transparent 58%
        );

      background-size: 150% 100%;
      background-position: 0% 50%;
      animation: pi-output-card-ambient 12s ease-in-out infinite alternate;

      pointer-events: none;
    }

    .pi-output-card-shell::after {
      content: "";
      position: absolute;
      z-index: 5;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;

      background:
        linear-gradient(
          180deg,
          transparent,
          rgba(56, 120, 219, 0.36) 22%,
          rgba(56, 120, 219, 0.13) 76%,
          transparent
        );

      pointer-events: none;
    }

    .pi-output-panel {
      position: relative;
      z-index: 1;
      grid-area: 1 / 1;
      min-width: 0;
      min-height: 400px;

      display: grid;
      grid-template-columns: minmax(290px, 0.9fr) minmax(340px, 1.1fr);
      column-gap: clamp(32px, 3.4vw, 54px);
      align-items: center;

      padding: clamp(36px, 3.4vw, 48px) clamp(38px, 3.8vw, 56px);

      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(0, 7px, 0) scale(0.997);
      filter: blur(2px);

      transition:
        opacity 0.34s ease,
        transform 0.66s cubic-bezier(.2, .75, .2, 1),
        filter 0.5s ease,
        visibility 0s linear 0.66s;
    }

    .pi-output-panel.is-active {
      z-index: 3;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);

      transition:
        opacity 0.42s ease,
        transform 0.7s cubic-bezier(.2, .75, .2, 1),
        filter 0.54s ease,
        visibility 0s linear 0s;
    }

    .pi-output-panel__copy,
    .pi-output-panel__visual {
      transition:
        opacity 0.46s ease,
        transform 0.7s cubic-bezier(.2, .75, .2, 1),
        filter 0.56s ease;
    }

    .pi-output-panel:not(.is-active) .pi-output-panel__copy {
      opacity: 0;
      transform: translate3d(0, 10px, 0);
      filter: blur(1.5px);
    }

    .pi-output-panel:not(.is-active) .pi-output-panel__visual {
      opacity: 0;
      transform: translate3d(16px, 0, 0) scale(0.985);
      filter: blur(2.5px);
    }

    .pi-output-panel.is-active .pi-output-panel__copy,
    .pi-output-panel.is-active .pi-output-panel__visual {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    .pi-output-panel.is-active .pi-output-panel__copy {
      transition-delay: 0.02s;
    }

    .pi-output-panel.is-active .pi-output-panel__visual {
      transition-delay: 0.09s;
    }

    .pi-output-panel__copy {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .pi-output-panel__meta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 14px;

      color: rgba(6, 24, 61, 0.47);

      font-size: 10.2px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .pi-output-panel__meta::after {
      content: "";
      width: 23px;
      height: 1px;
      background: rgba(57, 103, 176, 0.18);
    }

    .pi-output-panel__title {
      margin: 0 0 16px;

      color: var(--output-card-text);

      font-size: clamp(24px, 1.9vw, 30px);
      font-weight: 600;
      line-height: 1.58;
      letter-spacing: 0.068em;

      text-wrap: pretty;
    }

    .pi-output-panel__description {
      margin: 0;

      color: var(--output-card-text-soft);

      font-size: 16.5px;
      font-weight: 400;
      line-height: 1.92;
      letter-spacing: 0.055em;

      text-wrap: pretty;
    }

    .pi-output-panel__visual {
      position: relative;
      z-index: 2;
      min-width: 0;
      min-height: 280px;

      display: grid;
      place-items: center;
    }

    .pi-output-panel__image {
      position: relative;
      z-index: 2;
      display: block;

      width: min(100%, 420px);
      max-height: 300px;

      object-fit: contain;
      object-position: center;
      transform: translateZ(0);
    }

    @keyframes pi-output-card-settle {
      0% {
        transform: scale(1);

        box-shadow:
          0 22px 48px rgba(0, 0, 0, 0.15),
          0 6px 16px rgba(0, 0, 0, 0.065),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }

      38% {
        transform: scale(0.997);

        box-shadow:
          0 18px 38px rgba(0, 0, 0, 0.13),
          0 5px 13px rgba(0, 0, 0, 0.055),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }

      100% {
        transform: scale(1);

        box-shadow:
          0 22px 48px rgba(0, 0, 0, 0.15),
          0 6px 16px rgba(0, 0, 0, 0.065),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }
    }

    @keyframes pi-output-card-ambient {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 24% 50%;
      }
    }

    /* =========================================================
       DELIVERY
       ========================================================= */

    .pi-output-delivery {
      position: relative;
      margin-top: clamp(48px, 5vw, 68px);
      padding-top: clamp(40px, 4.2vw, 54px);
      border-top: 1px solid rgba(183, 204, 235, 0.11);
    }

    .pi-output-delivery__copy {
      width: min(1040px, 100%);
      margin-left: 0;
      padding-left: 0;
    }

    .pi-output-delivery__title,
    .pi-output-delivery__description {
      width: 100%;
      margin-left: 0;
      padding-left: 0;
    }

    .pi-output-delivery__title {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;

      color: rgba(255, 255, 255, 0.93);

      font-size: clamp(27px, 2.2vw, 34px);
      font-weight: 600;
      line-height: 1.62;
      letter-spacing: 0.08em;
    }

    .pi-output-delivery__description {
      margin-top: 28px;
      margin-right: 0;
      margin-bottom: 0;

      color: var(--output-text-soft);

      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;

      text-wrap: pretty;
    }

    .pi-output-delivery__visual {
      display: none;
    }

    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1160px) {
      .pi-output-hero__inner,
      .pi-output-content {
        width: min(84vw, 1120px);
      }

      .pi-output-hero__background::before {
        right: -11%;
        width: min(68vw, 820px);
      }

      .pi-output-copy {
        width: min(980px, 100%);
      }

      .pi-output-stage {
        grid-template-columns: minmax(182px, 208px) minmax(0, 1fr);
        column-gap: 26px;
      }

      .pi-output-nav__button {
        min-height: 82px;
        grid-template-columns: 23px minmax(0, 1fr);
        column-gap: 9px;
        padding-left: 18px;
      }

      .pi-output-nav__label {
        font-size: 14px;
      }

      .pi-output-card-shell,
      .pi-output-panel {
        min-height: 420px;
      }

      .pi-output-panel {
        grid-template-columns: minmax(250px, 0.92fr) minmax(290px, 1.08fr);
        column-gap: 28px;
        padding: 34px 32px;
      }

      .pi-output-panel__visual {
        min-height: 270px;
      }

      .pi-output-panel__image {
        max-height: 290px;
      }
    }

    /* =========================================================
       SHORT DESKTOP
       ========================================================= */

    @media (min-width: 901px) and (max-height: 760px) {
      .pi-output-hero {
        min-height: 680px;
      }

      .pi-output-hero__inner {
        padding-top: 96px;
        padding-bottom: 70px;
      }

      .pi-output-title {
        font-size: clamp(31px, 2.65vw, 39px);
      }

      .pi-output-card-shell,
      .pi-output-panel {
        min-height: 380px;
      }

      .pi-output-panel {
        padding-top: 30px;
        padding-bottom: 30px;
      }

      .pi-output-panel__visual {
        min-height: 240px;
      }

      .pi-output-panel__image {
        max-height: 270px;
      }
    }

    /* =========================================================
       MOBILE / SMALL TABLET
       781px〜900pxは既存の比較構造を保ちながら圧縮
       ========================================================= */

    @media (max-width: 900px) {
      .pi-output-hero {
        min-height: auto;
      }

      .pi-output-hero__background::before {
        top: -2%;
        right: -28%;
        bottom: -2%;
        width: 94vw;

        opacity: 0.44;
        background-position: 58% 38%;
      }

      .pi-output-hero__background::after {
        background:
          linear-gradient(
            90deg,
            rgba(2, 11, 28, 0.99) 0%,
            rgba(2, 11, 28, 0.91) 58%,
            rgba(2, 11, 28, 0.58) 100%
          ),
          linear-gradient(
            180deg,
            rgba(2, 11, 28, 0.13) 0%,
            rgba(2, 11, 28, 0.18) 58%,
            var(--output-bg) 100%
          );
      }

      .pi-output-hero__inner,
      .pi-output-content {
        width: min(88vw, 620px);
      }

      .pi-output-hero__inner {
        padding: 84px 0 56px;
      }

      .pi-output-copy {
        width: 100%;
      }

      .pi-output-title {
        font-size: clamp(25px, 4.6vw, 29px);
        line-height: 1.62;
        letter-spacing: 0.055em;
      }

      .pi-output-lead,
      .pi-output-ai-note {
        width: 100%;
        font-size: 16px;
        line-height: 1.86;
        letter-spacing: 0.045em;
      }

      .pi-output-lead {
        margin-top: 30px;
      }

      .pi-output-ai-note {
        margin-top: 21px;
      }

      .pi-br--desktop {
        display: none;
      }

      .pi-output-content {
        padding: 34px 0 54px;
      }

      .pi-output-heading,
      .pi-output-delivery__title {
        font-size: 25px;
        line-height: 1.58;
      }

      .pi-output-showcase {
        margin-top: 26px;
      }

      .pi-output-stage {
        grid-template-columns: 1fr;
        row-gap: 12px;
      }

      .pi-output-nav__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .pi-output-nav__button,
      .pi-output-nav__item:first-child .pi-output-nav__button {
        min-height: 56px;
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 7px;
        padding: 8px 10px;
        border: 1px solid rgba(181, 203, 235, 0.11);
        background: rgba(255, 255, 255, 0.018);
      }

      .pi-output-nav__button.is-active {
        border-color: rgba(214, 228, 248, 0.22);
        background:
          linear-gradient(
            102deg,
            rgba(255, 255, 255, 0.058),
            rgba(255, 255, 255, 0.016) 68%,
            rgba(255, 255, 255, 0)
          );
      }

      .pi-output-nav__button.is-active .pi-output-nav__label,
      .pi-output-nav__button.is-active .pi-output-nav__index {
        transform: none;
      }

      .pi-output-nav__index {
        font-size: 9px;
      }

      .pi-output-nav__label {
        font-size: 12.5px;
        line-height: 1.42;
        letter-spacing: 0.042em;
      }

      .pi-output-card-shell,
      .pi-output-panel {
        min-height: 0;
      }

      .pi-output-panel {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.82fr);
        column-gap: 24px;
        padding: 30px 28px;
      }

      .pi-output-panel__title {
        font-size: 21px;
      }

      .pi-output-panel__description {
        font-size: 15px;
        line-height: 1.82;
      }

      .pi-output-panel__visual {
        min-height: 210px;
      }

      .pi-output-panel__image {
        max-height: 220px;
      }

      .pi-output-delivery {
        margin-top: 36px;
        padding-top: 30px;
      }

      .pi-output-delivery__description {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.86;
        letter-spacing: 0.045em;
      }
    }

    /* =========================================================
       MOBILE
       CONCEPTセクションの密度感を基準に再編集
       ========================================================= */

    @media (max-width: 780px) {
      .pi-output-hero__background::before {
        top: 0;
        right: -24%;
        bottom: 0;
        width: 88vw;
        opacity: 0.38;
        background-position: 56% 38%;
        transform: scale(1);
      }

      .pi-output-hero__background::after {
        background:
          linear-gradient(
            90deg,
            rgba(2, 11, 28, 0.995) 0%,
            rgba(2, 11, 28, 0.94) 58%,
            rgba(2, 11, 28, 0.68) 100%
          ),
          linear-gradient(
            180deg,
            rgba(2, 11, 28, 0.08) 0%,
            rgba(2, 11, 28, 0.16) 62%,
            var(--output-bg) 100%
          );
      }

      .pi-output-hero__inner,
      .pi-output-content {
        width: min(calc(100% - 32px), 520px);
      }

      .pi-output-hero__inner {
        padding: 76px 0 48px;
      }

      .pi-output-title {
        font-size: clamp(22px, 5.9vw, 24px);
        font-weight: 600;
        line-height: 1.52;
        letter-spacing: 0.045em;
        text-wrap: pretty;
      }

      .pi-output-lead {
        margin-top: 24px;
        color: rgba(247, 249, 255, 0.74);
        font-size: clamp(14px, 3.85vw, 15px);
        line-height: 1.8;
        letter-spacing: 0.028em;
      }

      .pi-output-ai-note {
        margin-top: 18px;
        color: rgba(247, 249, 255, 0.52);
        font-size: clamp(13px, 3.55vw, 14px);
        line-height: 1.76;
        letter-spacing: 0.022em;
      }

      .pi-output-content {
        padding: 30px 0 48px;
      }

      .pi-output-heading,
      .pi-output-delivery__title {
        font-size: clamp(21px, 5.5vw, 23px);
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.045em;
      }

      .pi-output-showcase {
        margin-top: 20px;
      }

      .pi-output-stage {
        row-gap: 10px;
      }

      .pi-output-nav__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .pi-output-nav__button,
      .pi-output-nav__item:first-child .pi-output-nav__button {
        min-height: 52px;
        grid-template-columns: 17px minmax(0, 1fr);
        column-gap: 6px;
        align-items: center;
        padding: 7px 8px;
        border: 1px solid rgba(181, 203, 235, 0.10);
        background: rgba(255, 255, 255, 0.016);
        color: rgba(226, 236, 250, 0.45);
      }

      .pi-output-nav__button:hover {
        color: rgba(240, 246, 255, 0.72);
        background: rgba(255, 255, 255, 0.025);
      }

      .pi-output-nav__button:hover .pi-output-nav__label,
      .pi-output-nav__button.is-active .pi-output-nav__label,
      .pi-output-nav__button.is-active .pi-output-nav__index {
        transform: none;
      }

      .pi-output-nav__button.is-active {
        border-color: rgba(214, 228, 248, 0.22);
        background:
          linear-gradient(
            104deg,
            rgba(255, 255, 255, 0.058) 0%,
            rgba(255, 255, 255, 0.015) 72%,
            rgba(255, 255, 255, 0) 100%
          );
        animation: none;
      }

      .pi-output-nav__index {
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0.09em;
      }

      .pi-output-nav__label {
        font-size: clamp(11.5px, 3.15vw, 13px);
        font-weight: 500;
        line-height: 1.38;
        letter-spacing: 0.028em;
        overflow-wrap: anywhere;
      }

      .pi-output-card-shell {
        min-height: 0;
        box-shadow:
          0 15px 32px rgba(0, 0, 0, 0.14),
          0 4px 10px rgba(0, 0, 0, 0.05),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }

      .pi-output-card-shell.is-switching {
        animation: none;
      }

      .pi-output-card-shell::before {
        animation: none;
        background-position: 10% 50%;
      }

      .pi-output-panel {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) clamp(88px, 25vw, 124px);
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 0;
        align-items: center;
        align-content: start;
        padding: 19px 16px 18px;
        transform: translate3d(0, 4px, 0);
        filter: none;
        transition:
          opacity 0.28s ease,
          transform 0.42s cubic-bezier(.2, .75, .2, 1),
          visibility 0s linear 0.42s;
      }

      .pi-output-panel.is-active {
        transform: translate3d(0, 0, 0);
        filter: none;
        transition:
          opacity 0.32s ease,
          transform 0.44s cubic-bezier(.2, .75, .2, 1),
          visibility 0s linear 0s;
      }

      .pi-output-panel__copy {
        display: contents;
      }

      .pi-output-panel:not(.is-active) .pi-output-panel__copy,
      .pi-output-panel.is-active .pi-output-panel__copy {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
      }

      .pi-output-panel__meta {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        margin: 0 0 8px;
        font-size: 9.5px;
        line-height: 1;
        letter-spacing: 0.12em;
      }

      .pi-output-panel__meta::after {
        width: 18px;
      }

      .pi-output-panel__title {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin: 0;
        font-size: clamp(16px, 4.4vw, 18px);
        font-weight: 600;
        line-height: 1.46;
        letter-spacing: 0.04em;
        text-wrap: pretty;
      }

      .pi-output-panel__description {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 15px 0 0;
        font-size: clamp(13.75px, 3.72vw, 14.5px);
        line-height: 1.78;
        letter-spacing: 0.024em;
        text-wrap: pretty;
      }

      .pi-output-panel__visual {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 0;
        min-height: 0;
        align-self: center;
        display: grid;
        place-items: center;
        opacity: 0;
        transform: translate3d(5px, 0, 0);
        filter: none;
        transition:
          opacity 0.28s ease,
          transform 0.42s cubic-bezier(.2, .75, .2, 1);
      }

      .pi-output-panel:not(.is-active) .pi-output-panel__visual {
        opacity: 0;
        transform: translate3d(5px, 0, 0);
        filter: none;
      }

      .pi-output-panel.is-active .pi-output-panel__visual {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: none;
        transition-delay: 0.04s;
      }

      .pi-output-panel__image {
        width: 100%;
        max-width: 124px;
        max-height: 112px;
        object-fit: contain;
      }

      .pi-output-delivery {
        margin-top: 30px;
        padding-top: 25px;
      }

      .pi-output-delivery__description {
        margin-top: 19px;
        font-size: clamp(14px, 3.85vw, 15px);
        line-height: 1.8;
        letter-spacing: 0.028em;
      }
    }

    /* =========================================================
       SMALL MOBILE
       ========================================================= */

    @media (max-width: 360px) {
      .pi-output-hero__inner,
      .pi-output-content {
        width: calc(100% - 28px);
      }

      .pi-output-hero__inner {
        padding-top: 70px;
        padding-bottom: 44px;
      }

      .pi-output-title {
        font-size: 21px;
        line-height: 1.52;
        letter-spacing: 0.038em;
      }

      .pi-output-lead {
        margin-top: 21px;
        font-size: 13.75px;
      }

      .pi-output-ai-note {
        margin-top: 16px;
        font-size: 12.75px;
      }

      .pi-output-content {
        padding-top: 27px;
        padding-bottom: 44px;
      }

      .pi-output-heading,
      .pi-output-delivery__title {
        font-size: 20.5px;
      }

      .pi-output-nav__list {
        gap: 5px;
      }

      .pi-output-nav__button,
      .pi-output-nav__item:first-child .pi-output-nav__button {
        min-height: 50px;
        grid-template-columns: 15px minmax(0, 1fr);
        column-gap: 5px;
        padding: 6px 7px;
      }

      .pi-output-nav__index {
        font-size: 8.5px;
      }

      .pi-output-nav__label {
        font-size: 11.2px;
        line-height: 1.36;
        letter-spacing: 0.02em;
      }

      .pi-output-panel {
        grid-template-columns: minmax(0, 1fr) minmax(76px, 92px);
        column-gap: 9px;
        padding: 17px 13px 16px;
      }

      .pi-output-panel__meta {
        margin-bottom: 7px;
        font-size: 9px;
      }

      .pi-output-panel__title {
        font-size: 15.5px;
        line-height: 1.44;
        letter-spacing: 0.032em;
      }

      .pi-output-panel__description {
        margin-top: 13px;
        font-size: 13.4px;
        line-height: 1.76;
        letter-spacing: 0.018em;
      }

      .pi-output-panel__image {
        max-width: 92px;
        max-height: 88px;
      }

      .pi-output-delivery {
        margin-top: 27px;
        padding-top: 22px;
      }

      .pi-output-delivery__description {
        margin-top: 17px;
        font-size: 13.75px;
      }
    }

    /* =========================================================
       REDUCED MOTION
       ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      .pi-output-nav__indicator,
      .pi-output-nav__button,
      .pi-output-nav__index,
      .pi-output-nav__label,
      .pi-output-card-shell,
      .pi-output-card-shell::before,
      .pi-output-panel,
      .pi-output-panel__copy,
      .pi-output-panel__visual {
        animation: none !important;
        transition: none !important;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 10 / 08-contact
   Original cascade position: 10 of 11
========================================================= */
    .pi-contact-section {
      --contact-bg: #f8fbff;
      --contact-white: #ffffff;
      --contact-navy: #03123a;
      --contact-text: rgba(3, 18, 58, 0.72);
      --contact-subcopy: rgba(3, 18, 58, 0.7);
      --contact-blue: #1468df;
      --contact-blue-deep: #0b4db3;
      --contact-blue-dark: #073b8f;

      position: relative;
      width: 100vw;
      min-height: 100svh;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      isolation: isolate;
      background: var(--contact-bg);
      color: var(--contact-navy);
      font-family:
        "Helvetica Neue",
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;
      letter-spacing: 0.05em;
      box-sizing: border-box;
    }

    .pi-contact-section *,
    .pi-contact-section *::before,
    .pi-contact-section *::after {
      box-sizing: border-box;
    }

    /* =========================================================
       BACKGROUND
    ========================================================= */

    .pi-contact-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(255, 255, 255, 0.88) 34%,
          rgba(246, 250, 255, 0.72) 69%,
          rgba(238, 245, 253, 0.76) 100%
        ),
        linear-gradient(
          145deg,
          #ffffff 0%,
          #fbfdff 48%,
          #eff5fc 100%
        );
    }

    .pi-contact-bg::before {
      content: "";
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 46%;
      width: min(82vw, 1260px);
      aspect-ratio: 1.7 / 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background:
        radial-gradient(
          ellipse at center,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(255, 255, 255, 0.79) 42%,
          rgba(234, 243, 255, 0.28) 72%,
          transparent 100%
        );
      filter: blur(7px);
      animation:
        pi-contact-center-light
        19s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-contact-bg::after {
      content: "";
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 54%;
      width: min(118vw, 1880px);
      aspect-ratio: 1.75 / 1;
      border: 1px solid rgba(68, 123, 197, 0.1);
      border-radius: 50%;
      transform: translate(-50%, -50%) rotate(-7deg);
      animation:
        pi-contact-arc-drift
        27s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-contact-bg__surface {
      position: absolute;
      z-index: 2;
      display: block;
      overflow: hidden;
      pointer-events: none;
    }

    .pi-contact-bg__surface--left {
      left: -19vw;
      bottom: -29vw;
      width: min(73vw, 1110px);
      aspect-ratio: 1;
      border-radius: 42% 58% 54% 46%;
      background:
        linear-gradient(
          132deg,
          rgba(255, 255, 255, 0.75) 0%,
          rgba(218, 232, 250, 0.31) 50%,
          rgba(172, 205, 242, 0.12) 100%
        );
      box-shadow:
        inset -1px 1px 0 rgba(70, 125, 197, 0.07);
      transform: rotate(14deg);
      animation:
        pi-contact-left-surface
        22s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-contact-bg__surface--left::before {
      content: "";
      position: absolute;
      inset: 12% 9% 13% 17%;
      border: 1px solid rgba(66, 123, 199, 0.055);
      border-radius: inherit;
    }

    .pi-contact-bg__surface--right {
      right: -23vw;
      top: -27vw;
      width: min(76vw, 1170px);
      aspect-ratio: 1;
      border-radius: 55% 45% 39% 61%;
      background:
        linear-gradient(
          145deg,
          rgba(211, 228, 249, 0.14) 0%,
          rgba(246, 250, 255, 0.48) 45%,
          rgba(182, 211, 244, 0.17) 100%
        );
      box-shadow:
        inset 1px -1px 0 rgba(69, 124, 198, 0.065);
      transform: rotate(-13deg);
      animation:
        pi-contact-right-surface
        26s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    .pi-contact-bg__surface--right::before {
      content: "";
      position: absolute;
      inset: 16% 15% 10% 11%;
      border: 1px solid rgba(66, 123, 199, 0.05);
      border-radius: inherit;
    }

    .pi-contact-bg__surface--bottom {
      z-index: 1;
      left: 50%;
      bottom: -30%;
      width: min(98vw, 1520px);
      height: 58%;
      border-radius: 50% 50% 0 0;
      transform: translateX(-50%);
      background:
        linear-gradient(
          180deg,
          rgba(224, 237, 252, 0.04) 0%,
          rgba(209, 227, 248, 0.22) 100%
        );
      filter: blur(2px);
      animation:
        pi-contact-bottom-surface
        25s
        cubic-bezier(.45, 0, .55, 1)
        infinite;
    }

    @keyframes pi-contact-center-light {
      0%,
      100% {
        transform:
          translate(-52%, -51%)
          scale(0.97, 1.02);
      }

      43% {
        transform:
          translate(-47%, -48%)
          scale(1.035, 0.98);
      }

      76% {
        transform:
          translate(-50%, -46%)
          scale(1.01, 1.025);
      }
    }

    @keyframes pi-contact-arc-drift {
      0%,
      100% {
        transform:
          translate(-52%, -53%)
          rotate(-9deg);
      }

      46% {
        transform:
          translate(-48%, -49%)
          rotate(-4deg);
      }

      74% {
        transform:
          translate(-50%, -46%)
          rotate(-7deg);
      }
    }

    @keyframes pi-contact-left-surface {
      0%,
      100% {
        transform:
          translate3d(-20px, 22px, 0)
          rotate(12deg);
      }

      42% {
        transform:
          translate3d(32px, -18px, 0)
          rotate(17deg);
      }

      74% {
        transform:
          translate3d(11px, -30px, 0)
          rotate(14deg);
      }
    }

    @keyframes pi-contact-right-surface {
      0%,
      100% {
        transform:
          translate3d(22px, -18px, 0)
          rotate(-15deg);
      }

      40% {
        transform:
          translate3d(-32px, 24px, 0)
          rotate(-10deg);
      }

      73% {
        transform:
          translate3d(-10px, 34px, 0)
          rotate(-13deg);
      }
    }

    @keyframes pi-contact-bottom-surface {
      0%,
      100% {
        transform:
          translate3d(-51%, 12px, 0);
      }

      48% {
        transform:
          translate3d(-48%, -13px, 0);
      }

      76% {
        transform:
          translate3d(-50%, -4px, 0);
      }
    }

    /* =========================================================
       LAYOUT
    ========================================================= */

    .pi-contact-inner {
      position: relative;
      z-index: 3;
      width: min(84vw, 1320px);
      min-height: 100svh;
      margin: 0 auto;
      padding:
        clamp(108px, 12vh, 144px)
        0
        clamp(82px, 9vh, 110px);
      display: grid;
      place-items: center;
    }

    .pi-contact-content {
      position: relative;
      width: min(960px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    /* =========================================================
       MAIN COPY
    ========================================================= */

    .pi-contact-copy {
      position: relative;
      z-index: 3;
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }

    .pi-contact-title {
      margin: 0;
      color: var(--contact-navy);
      font-size: clamp(31px, 3vw, 45px);
      font-weight: 600;
      line-height: 1.72;
      letter-spacing: 0.09em;
      text-align: center;
      text-wrap: balance;
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity 0.92s ease,
        transform 1.05s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-contact-section.is-inview
    .pi-contact-title {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-contact-copy__accent {
      position: relative;
      display: block;
      width: 58px;
      height: 1px;
      margin: 20px auto 0;
      overflow: hidden;
      background: rgba(41, 103, 191, 0.09);
      opacity: 0;
      transition: opacity 0.5s ease 0.34s;
    }

    .pi-contact-copy__accent::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(24, 106, 227, 0.86),
          rgba(53, 191, 229, 0.72),
          transparent
        );
      transform: translateX(-105%);
    }

    .pi-contact-section.is-inview
    .pi-contact-copy__accent {
      opacity: 1;
    }

    .pi-contact-section.is-inview
    .pi-contact-copy__accent::before {
      animation:
        pi-contact-accent-enter
        1.15s
        cubic-bezier(.2, .75, .2, 1)
        0.36s
        forwards;
    }

    @keyframes pi-contact-accent-enter {
      from {
        transform: translateX(-105%);
      }

      to {
        transform: translateX(0);
      }
    }

    .pi-contact-lead {
      width: min(860px, 100%);
      margin: 24px auto 0;
      color: var(--contact-text);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
      text-align: center;
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity 0.84s ease 0.16s,
        transform 0.96s cubic-bezier(.2, .75, .2, 1) 0.16s;
    }

    .pi-contact-section.is-inview
    .pi-contact-lead {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-contact-lead p {
      margin: 0;
    }

    .pi-contact-lead p + p {
      margin-top: 18px;
    }

    .pi-br--desktop {
      display: inline;
    }

    /* =========================================================
       CO-CREATION
    ========================================================= */

    .pi-contact-cocreation {
      position: relative;
      z-index: 3;
      width: min(760px, 100%);
      margin: clamp(52px, 6vh, 70px) auto 0;
      padding-top: 30px;
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 0.88s ease 0.34s,
        transform 1s cubic-bezier(.2, .75, .2, 1) 0.34s;
    }

    .pi-contact-section.is-inview
    .pi-contact-cocreation {
      opacity: 1;
      transform: translateY(0);
    }

    .pi-contact-cocreation::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 50%;
      top: 56%;
      width: 118%;
      height: 180%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background:
        radial-gradient(
          ellipse at center,
          rgba(219, 234, 253, 0.19) 0%,
          rgba(234, 243, 255, 0.09) 48%,
          transparent 75%
        );
      filter: blur(10px);
      pointer-events: none;
    }

    .pi-contact-cocreation::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      width: 116px;
      height: 1px;
      transform: translateX(-50%);
      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(50, 101, 171, 0.29),
          transparent
        );
    }

    .pi-contact-brand-lockup {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(28px, 4vw, 54px);
      min-height: 92px;
      margin: 0 auto;
    }

    .pi-contact-brand {
      display: grid;
      place-items: center;
      min-width: 0;
      opacity: 0;
      transition:
        opacity 0.72s ease,
        transform 0.9s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-contact-brand img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }

    /*
      各ロゴ全体を公式サイトへのリンクにする。
      見た目と登場アニメーションは既存のまま維持。
    */

    .pi-contact-brand__link {
      display: grid;
      place-items: center;
      width: 100%;
      max-width: 100%;
      color: inherit;
      text-decoration: none !important;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
      transform: translateZ(0);
      transition:
        opacity 0.32s ease,
        transform 0.44s cubic-bezier(.2, .75, .2, 1),
        box-shadow 0.32s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .pi-contact-brand__link:hover {
        opacity: 0.78;
        transform: translateY(-2px) scale(1.015);
      }
    }

    .pi-contact-brand__link:focus-visible {
      box-shadow: 0 0 0 3px rgba(20, 104, 223, 0.18);
      transform: translateY(-2px) scale(1.015);
    }

    .pi-contact-brand__link:active {
      opacity: 0.86;
      transform: translateY(0) scale(0.99);
    }

    .pi-contact-brand--daiko {
      width: 236px;
      transform: translateX(-13px);
      transition-delay: 0.46s;
    }

    .pi-contact-brand--daiko img {
      width: min(236px, 100%);
      max-height: 88px;
    }

    .pi-contact-brand--diginno {
      width: 336px;
      transform: translateX(13px);
      transition-delay: 0.52s;
    }

    .pi-contact-brand--diginno img {
      width: min(336px, 100%);
      max-height: 66px;
    }

    .pi-contact-brand-lockup__join {
      flex: 0 0 auto;
      color: var(--contact-blue);
      font-size: 44px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: 0;
      opacity: 0;
      transform: scale(0.72);
      transition:
        opacity 0.62s ease 0.63s,
        transform 0.78s cubic-bezier(.2, .75, .2, 1) 0.63s;
    }

    .pi-contact-section.is-inview
    .pi-contact-brand {
      opacity: 1;
      transform: translateX(0);
    }

    .pi-contact-section.is-inview
    .pi-contact-brand-lockup__join {
      opacity: 1;
      transform: scale(1);
    }

    .pi-contact-cocreation__text {
      width: min(780px, 100%);
      margin: 28px auto 0;
      color: var(--contact-subcopy);
      font-size: 19.5px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.065em;
      text-align: center;
      text-wrap: balance;
    }

    .pi-contact-cocreation__text p {
      margin: 0;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .pi-contact-action {
      position: relative;
      z-index: 4;
      width: min(500px, 100%);
      margin: clamp(38px, 4.8vh, 54px) auto 0;
      opacity: 0;
      transform: translateY(16px);
      isolation: isolate;
      transition:
        opacity 0.82s ease 0.58s,
        transform 0.96s cubic-bezier(.2, .75, .2, 1) 0.58s;
    }

    .pi-contact-section.is-inview
    .pi-contact-action {
      opacity: 1;
      transform: translateY(0);
    }

    /*
      エフェクトは必ずボタンの背面だけ。
      文字や矢印の上には一切重ならない。
    */

    .pi-contact-action__glow {
      position: absolute;
      z-index: 0;
      left: 9%;
      right: 9%;
      top: 23px;
      bottom: -14px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.16;
      transform: scale(0.92, 0.72);
      transform-origin: center;
      background:
        radial-gradient(
          ellipse at center,
          rgba(20, 104, 223, 0.22) 0%,
          rgba(20, 104, 223, 0.1) 43%,
          transparent 75%
        );
      filter: blur(18px);
      transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-contact-button {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 68px;
      padding: 18px 74px 18px 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(3, 53, 132, 0.15);
      border-radius: 1px;
      background:
        linear-gradient(
          102deg,
          #0b4db3 0%,
          #1268df 57%,
          #176ee2 100%
        );
      box-shadow:
        0 11px 25px rgba(8, 57, 137, 0.12);
      color: #ffffff !important;
      text-decoration: none !important;
      outline: none;
      cursor: pointer !important;
      isolation: isolate;
      mix-blend-mode: normal !important;
      transform: translateZ(0);
      transition:
        border-color 0.35s ease,
        box-shadow 0.48s ease;
    }

    /*
      ホバー時は濃い青い面だけが静かに現れる。
      カーソル追従光は使用しない。
    */

    .pi-contact-button::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          102deg,
          rgba(3, 43, 108, 0.72) 0%,
          rgba(5, 64, 150, 0.42) 57%,
          rgba(7, 79, 178, 0.24) 100%
        );
      opacity: 0;
      transition: opacity 0.48s ease;
    }

    .pi-contact-button::after {
      content: "";
      position: absolute;
      z-index: 1;
      left: 13%;
      right: 13%;
      top: 0;
      height: 1px;
      pointer-events: none;
      background:
        linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.5),
          transparent
        );
      opacity: 0.35;
      transform: scaleX(0.45);
      transform-origin: center;
      transition:
        opacity 0.42s ease,
        transform 0.58s cubic-bezier(.2, .75, .2, 1);
    }

    /*
      文字は常時、最前面・白・不透明で固定。
    */

    .pi-contact-button__label {
      position: relative;
      z-index: 5;
      display: block;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 1 !important;
      visibility: visible !important;
      mix-blend-mode: normal !important;
      filter: none !important;
      transform: none !important;
      pointer-events: none;
      font-size: clamp(13px, 1vw, 15px);
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0.075em;
      text-align: center;
      text-shadow:
        0 1px 1px rgba(2, 27, 68, 0.18);
      transition: none !important;
    }

    .pi-contact-button__arrow {
      position: absolute;
      z-index: 5;
      right: 31px;
      top: 50%;
      width: 25px;
      height: 14px;
      color: #ffffff;
      opacity: 1 !important;
      visibility: visible !important;
      mix-blend-mode: normal !important;
      filter: none !important;
      pointer-events: none;
      transform: translateY(-50%);
    }

    .pi-contact-button__arrow::before {
      content: "";
      position: absolute;
      left: 0;
      right: 1px;
      top: 6px;
      height: 1px;
      background: currentColor;
      opacity: 0.92;
      transform: scaleX(0.72);
      transform-origin: right center;
      transition:
        transform 0.48s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-contact-button__arrow::after {
      content: "";
      position: absolute;
      right: 1px;
      top: 3px;
      width: 7px;
      height: 7px;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      opacity: 0.92;
      transform: rotate(45deg);
    }

    @media (hover: hover) and (pointer: fine) {
      .pi-contact-button:hover {
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow:
          0 14px 30px rgba(8, 57, 137, 0.16);
      }

      .pi-contact-button:hover::before {
        opacity: 1;
      }

      .pi-contact-button:hover::after {
        opacity: 0.7;
        transform: scaleX(1);
      }

      .pi-contact-button:hover
      .pi-contact-button__label {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
      }

      .pi-contact-button:hover
      .pi-contact-button__arrow {
        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
      }

      .pi-contact-button:hover
      .pi-contact-button__arrow::before {
        transform: scaleX(1);
      }

      .pi-contact-action:hover
      .pi-contact-action__glow {
        opacity: 0.29;
        transform: scale(1, 0.86);
      }
    }

    .pi-contact-button:focus-visible {
      color: #ffffff !important;
      border-color: rgba(255, 255, 255, 0.34);
      box-shadow:
        0 0 0 3px rgba(20, 104, 223, 0.16),
        0 14px 30px rgba(8, 57, 137, 0.16);
    }

    .pi-contact-button:focus-visible::before {
      opacity: 1;
    }

    .pi-contact-button:focus-visible::after {
      opacity: 0.7;
      transform: scaleX(1);
    }

    .pi-contact-button:focus-visible
    .pi-contact-button__label {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .pi-contact-button:focus-visible
    .pi-contact-button__arrow::before {
      transform: scaleX(1);
    }

    .pi-contact-action:focus-within
    .pi-contact-action__glow {
      opacity: 0.29;
      transform: scale(1, 0.86);
    }

    .pi-contact-button:active {
      color: #ffffff !important;
      box-shadow:
        0 9px 21px rgba(8, 57, 137, 0.14);
    }

    .pi-contact-button:visited,
    .pi-contact-button:link {
      color: #ffffff !important;
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1100px) {
      .pi-contact-inner {
        width: min(88vw, 960px);
        padding-top: 108px;
        padding-bottom: 84px;
      }

      .pi-contact-bg__surface--left {
        left: -31vw;
        bottom: -28vw;
      }

      .pi-contact-bg__surface--right {
        right: -31vw;
        top: -23vw;
      }

      .pi-contact-brand--daiko {
        width: 236px;
      }

      .pi-contact-brand--diginno {
        width: 336px;
      }
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 780px) {
      .pi-contact-section {
        min-height: auto;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-synthesis: none;
        font-kerning: normal;
        line-break: strict;
        -webkit-font-smoothing: antialiased;
      }

      .pi-contact-inner {
        width: min(calc(100vw - 32px), 520px);
        min-height: auto;
        padding: 76px 0 62px;
      }

      .pi-contact-content {
        width: 100%;
      }

      .pi-contact-title {
        width: min(100%, 360px);
        margin-inline: auto;
        font-size: clamp(22px, 6vw, 24px);
        font-weight: 600;
        line-height: 1.52;
        letter-spacing: 0.04em;
        text-wrap: balance;
        transform: translateY(10px);
      }

      .pi-contact-copy__accent {
        width: 42px;
        margin-top: 14px;
      }

      .pi-contact-lead {
        width: min(100%, 390px);
        margin-top: 18px;
        font-size: clamp(14px, 3.85vw, 14.5px);
        line-height: 1.78;
        letter-spacing: 0.028em;
        transform: translateY(10px);
      }

      .pi-contact-title
      .pi-br--desktop {
        display: inline;
      }

      .pi-contact-lead
      .pi-br--desktop,
      .pi-contact-cocreation__text
      .pi-br--desktop {
        display: none;
      }

      .pi-contact-lead p + p {
        margin-top: 12px;
      }

      .pi-contact-cocreation {
        width: min(100%, 420px);
        margin-top: 34px;
        padding-top: 22px;
        transform: translateY(10px);
      }

      .pi-contact-cocreation::before {
        top: 52%;
        width: 110%;
        height: 145%;
        filter: blur(8px);
      }

      .pi-contact-cocreation::after {
        width: 88px;
      }

      .pi-contact-brand-lockup {
        width: min(100%, 360px);
        min-height: 56px;
        margin-inline: auto;
        display: grid;
        grid-template-columns:
          minmax(0, 0.84fr)
          auto
          minmax(0, 1.16fr);
        justify-content: stretch;
        align-items: center;
        gap: 10px;
      }

      .pi-contact-brand {
        width: 100%;
      }

      .pi-contact-brand--daiko {
        width: 100%;
        max-width: 112px;
        justify-self: end;
        transform: translateX(-7px);
      }

      .pi-contact-brand--daiko img {
        width: 100%;
        max-height: 58px;
      }

      .pi-contact-brand--diginno {
        width: 100%;
        max-width: 150px;
        justify-self: start;
        transform: translateX(7px);
      }

      .pi-contact-brand--diginno img {
        width: 100%;
        max-height: 45px;
      }

      .pi-contact-brand-lockup__join {
        font-size: 24px;
        font-weight: 300;
        transform: scale(0.86);
      }

      .pi-contact-cocreation__text {
        width: min(100%, 390px);
        margin-top: 17px;
        font-size: clamp(13.5px, 3.7vw, 14px);
        line-height: 1.76;
        letter-spacing: 0.024em;
        text-wrap: pretty;
      }

      .pi-contact-action {
        width: min(100%, 420px);
        margin-top: 28px;
        transform: translateY(10px);
      }

      .pi-contact-action__glow {
        left: 11%;
        right: 11%;
        top: 18px;
        bottom: -10px;
        filter: blur(14px);
      }

      .pi-contact-button {
        min-height: 56px;
        padding:
          14px
          50px
          14px
          20px;
      }

      .pi-contact-button__label {
        max-width: 100%;
        font-size: clamp(12.5px, 3.45vw, 13px);
        line-height: 1.45;
        letter-spacing: 0.05em;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      .pi-contact-button__arrow {
        right: 18px;
        width: 20px;
        height: 12px;
      }

      .pi-contact-button__arrow::before {
        top: 5px;
      }

      .pi-contact-button__arrow::after {
        top: 2px;
      }

      .pi-contact-bg::before {
        top: 47%;
        width: 128vw;
        filter: blur(6px);
        animation-name:
          pi-contact-center-light-mobile;
      }

      .pi-contact-bg::after {
        top: 51%;
        width: 156vw;
        animation-name:
          pi-contact-arc-drift-mobile;
      }

      .pi-contact-bg__surface--left {
        left: -61vw;
        bottom: -30vw;
        width: 118vw;
        animation-name:
          pi-contact-left-surface-mobile;
      }

      .pi-contact-bg__surface--right {
        right: -66vw;
        top: -24vw;
        width: 122vw;
        animation-name:
          pi-contact-right-surface-mobile;
      }

      .pi-contact-bg__surface--bottom {
        width: 136vw;
        bottom: -22%;
        animation-name:
          pi-contact-bottom-surface-mobile;
      }

      @keyframes pi-contact-center-light-mobile {
        0%,
        100% {
          transform:
            translate(-50.5%, -50.5%)
            scale(0.99, 1.01);
        }

        50% {
          transform:
            translate(-49.2%, -49.3%)
            scale(1.015, 0.995);
        }
      }

      @keyframes pi-contact-arc-drift-mobile {
        0%,
        100% {
          transform:
            translate(-50.7%, -50.6%)
            rotate(-8deg);
        }

        50% {
          transform:
            translate(-49.3%, -49.4%)
            rotate(-6deg);
        }
      }

      @keyframes pi-contact-left-surface-mobile {
        0%,
        100% {
          transform:
            translate3d(-8px, 8px, 0)
            rotate(13deg);
        }

        50% {
          transform:
            translate3d(10px, -7px, 0)
            rotate(15deg);
        }
      }

      @keyframes pi-contact-right-surface-mobile {
        0%,
        100% {
          transform:
            translate3d(8px, -7px, 0)
            rotate(-14deg);
        }

        50% {
          transform:
            translate3d(-10px, 8px, 0)
            rotate(-12deg);
        }
      }

      @keyframes pi-contact-bottom-surface-mobile {
        0%,
        100% {
          transform:
            translate3d(-50%, 4px, 0);
        }

        50% {
          transform:
            translate3d(-50%, -4px, 0);
        }
      }
    }

    @media (max-width: 360px) {
      .pi-contact-inner {
        width: calc(100vw - 28px);
        padding-top: 68px;
        padding-bottom: 56px;
      }

      .pi-contact-title {
        width: min(100%, 316px);
        font-size: clamp(21px, 6.4vw, 22px);
        line-height: 1.5;
        letter-spacing: 0.035em;
      }

      .pi-contact-copy__accent {
        width: 38px;
        margin-top: 13px;
      }

      .pi-contact-lead {
        width: min(100%, 326px);
        margin-top: 17px;
        font-size: clamp(13.5px, 4.1vw, 14px);
        line-height: 1.76;
        letter-spacing: 0.022em;
      }

      .pi-contact-lead p + p {
        margin-top: 10px;
      }

      .pi-contact-cocreation {
        margin-top: 30px;
        padding-top: 20px;
      }

      .pi-contact-cocreation::after {
        width: 78px;
      }

      .pi-contact-brand-lockup {
        width: 100%;
        min-height: 51px;
        grid-template-columns:
          minmax(0, 0.82fr)
          auto
          minmax(0, 1.18fr);
        gap: 7px;
      }

      .pi-contact-brand--daiko {
        max-width: 96px;
      }

      .pi-contact-brand--daiko img {
        max-height: 50px;
      }

      .pi-contact-brand--diginno {
        max-width: 132px;
      }

      .pi-contact-brand--diginno img {
        max-height: 40px;
      }

      .pi-contact-brand-lockup__join {
        font-size: 21px;
      }

      .pi-contact-cocreation__text {
        width: min(100%, 326px);
        margin-top: 15px;
        font-size: 13.5px;
        line-height: 1.74;
        letter-spacing: 0.02em;
      }

      .pi-contact-action {
        margin-top: 25px;
      }

      .pi-contact-button {
        min-height: 54px;
        padding:
          13px
          44px
          13px
          16px;
      }

      .pi-contact-button__label {
        font-size: 12px;
        line-height: 1.42;
        letter-spacing: 0.035em;
      }

      .pi-contact-button__arrow {
        right: 14px;
        width: 18px;
      }

      .pi-contact-bg::before {
        width: 142vw;
      }

      .pi-contact-bg::after {
        width: 174vw;
      }

      .pi-contact-bg__surface--left {
        left: -72vw;
        bottom: -27vw;
        width: 132vw;
      }

      .pi-contact-bg__surface--right {
        right: -76vw;
        top: -22vw;
        width: 136vw;
      }

      .pi-contact-bg__surface--bottom {
        width: 150vw;
        bottom: -20%;
      }
    }

    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      .pi-contact-bg::before,
      .pi-contact-bg::after,
      .pi-contact-bg__surface,
      .pi-contact-title,
      .pi-contact-copy__accent,
      .pi-contact-copy__accent::before,
      .pi-contact-lead,
      .pi-contact-cocreation,
      .pi-contact-brand,
      .pi-contact-brand__link,
      .pi-contact-brand-lockup__join,
      .pi-contact-action,
      .pi-contact-action__glow,
      .pi-contact-button,
      .pi-contact-button::before,
      .pi-contact-button::after,
      .pi-contact-button__arrow::before {
        animation: none !important;
        transition: none !important;
      }

      .pi-contact-title,
      .pi-contact-copy__accent,
      .pi-contact-lead,
      .pi-contact-cocreation,
      .pi-contact-brand,
      .pi-contact-brand-lockup__join,
      .pi-contact-action {
        opacity: 1 !important;
        transform: none !important;
      }

      .pi-contact-copy__accent::before {
        transform: translateX(0) !important;
      }
    }
  

/* =========================================================
   EXTERNALIZED STYLE BLOCK 11 / 09-footer
   Original cascade position: 11 of 11
========================================================= */
    .pi-footer {
      --footer-bg: #020817;
      --footer-bg-deep: #010511;
      --footer-white: #ffffff;
      --footer-text: rgba(240, 246, 255, 0.9);
      --footer-muted: rgba(222, 232, 249, 0.46);
      --footer-line: rgba(207, 224, 250, 0.13);
      --footer-line-strong: rgba(207, 224, 250, 0.2);
      --footer-blue: #6698ff;

      /* 横幅は最大限使い、左右の余白のみ確保 */
      --footer-gutter: clamp(28px, 4.2vw, 82px);

      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      isolation: isolate;

      background:
        linear-gradient(
          180deg,
          #030a1a 0%,
          var(--footer-bg) 52%,
          var(--footer-bg-deep) 100%
        );

      color: var(--footer-white);

      font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Noto Sans JP",
        sans-serif;

      box-sizing: border-box;
    }

    .pi-footer *,
    .pi-footer *::before,
    .pi-footer *::after {
      box-sizing: border-box;
    }

    /* =========================================================
      BACKGROUND
    ========================================================= */

    .pi-footer::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;

      background:
        radial-gradient(
          circle at 80% 0%,
          rgba(58, 112, 230, 0.14) 0%,
          rgba(35, 75, 163, 0.06) 24%,
          transparent 53%
        ),
        radial-gradient(
          circle at 8% 100%,
          rgba(37, 75, 161, 0.07) 0%,
          transparent 40%
        ),
        linear-gradient(
          115deg,
          rgba(255, 255, 255, 0.015) 0%,
          transparent 38%
        );
    }

    .pi-footer::after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: var(--footer-gutter);
      right: var(--footer-gutter);
      height: 1px;
      pointer-events: none;

      background:
        linear-gradient(
          90deg,
          rgba(125, 164, 238, 0.06) 0%,
          rgba(144, 180, 246, 0.2) 35%,
          rgba(171, 201, 255, 0.46) 50%,
          rgba(144, 180, 246, 0.2) 65%,
          rgba(125, 164, 238, 0.06) 100%
        );
    }

    /* =========================================================
      LAYOUT
    ========================================================= */

    .pi-footer__inner {
      position: relative;
      z-index: 2;
      width: 100%;
      margin: 0;

      padding:
        clamp(64px, 6.5vw, 94px)
        var(--footer-gutter)
        28px;
    }

    .pi-footer__main {
      position: relative;

      display: grid;
      grid-template-columns:
        minmax(0, 1.45fr)
        minmax(360px, 0.78fr);

      align-items: stretch;
      gap: clamp(56px, 7vw, 130px);
    }

    .pi-footer__main::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;

      left: calc(
        (100% - clamp(56px, 7vw, 130px)) *
        0.65
      );

      width: 1px;

      background:
        linear-gradient(
          180deg,
          transparent 0%,
          rgba(211, 226, 250, 0.14) 18%,
          rgba(211, 226, 250, 0.14) 82%,
          transparent 100%
        );

      pointer-events: none;
    }

    /* =========================================================
      BRAND
    ========================================================= */

    .pi-footer__brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;

      min-width: 0;
      min-height: clamp(166px, 14vw, 216px);
      padding-right: clamp(20px, 3vw, 55px);
    }

    .pi-footer__logo {
      display: inline-block;

      /* 控えめなサイズへ調整 */
      width: clamp(158px, 13vw, 205px);
      max-width: 100%;

      color: var(--footer-white);
      text-decoration: none;
      outline: none;

      transition:
        opacity 0.25s ease,
        transform 0.4s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-footer__logo img {
      display: block;
      width: 100%;
      height: auto;

      user-select: none;
      pointer-events: none;
    }

    @media (hover: hover) and (pointer: fine) {
      .pi-footer__logo:hover {
        opacity: 0.84;
        transform: translateY(-2px);
      }
    }

    .pi-footer__logo:focus-visible {
      outline: 1px solid rgba(125, 179, 255, 0.7);
      outline-offset: 8px;
    }

    .pi-footer__statement {
      margin:
        clamp(30px, 3.5vw, 48px)
        0
        0;

      color: var(--footer-text);

      /* フッターらしい控えめなコピーサイズ */
      font-size: clamp(16px, 1.35vw, 20px);
      font-weight: 400;
      line-height: 1.85;
      letter-spacing: 0.075em;
    }

    .pi-footer__statement span {
      display: block;
    }

    /* =========================================================
      NAVIGATION
    ========================================================= */

    .pi-footer__nav {
      display: grid;
      grid-template-columns: 1fr;
      align-content: start;

      width: 100%;
      min-width: 0;
      padding-top: 2px;
    }

    .pi-footer__nav a {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: space-between;

      width: 100%;
      min-height: clamp(50px, 4vw, 64px);
      padding: 0 0 0 2px;

      border-bottom: 1px solid var(--footer-line);

      color: rgba(244, 248, 255, 0.7) !important;
      text-decoration: none !important;

      font-size: clamp(10px, 0.76vw, 12px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.21em;
      text-transform: uppercase;

      outline: none;

      transition:
        color 0.28s ease,
        padding-left 0.42s cubic-bezier(.2, .75, .2, 1),
        border-color 0.28s ease;
    }

    .pi-footer__nav a:first-child {
      border-top: 1px solid var(--footer-line);
    }

    .pi-footer__nav a::before {
      content: "";
      flex: 0 0 auto;
      order: 2;

      width: clamp(20px, 2vw, 34px);
      height: 1px;
      margin-left: 24px;

      background:
        linear-gradient(
          90deg,
          rgba(102, 152, 255, 0.22),
          var(--footer-blue)
        );

      opacity: 0.52;
      transform: scaleX(0.56);
      transform-origin: right center;

      transition:
        opacity 0.3s ease,
        transform 0.45s cubic-bezier(.2, .75, .2, 1);
    }

    .pi-footer__nav a::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          rgba(74, 122, 220, 0.075),
          transparent 72%
        );

      opacity: 0;
      transform: scaleX(0.8);
      transform-origin: left center;

      transition:
        opacity 0.3s ease,
        transform 0.42s cubic-bezier(.2, .75, .2, 1);
    }

    @media (hover: hover) and (pointer: fine) {
      .pi-footer__nav a:hover {
        padding-left: 14px;
        color: var(--footer-white) !important;
        border-color: var(--footer-line-strong);
      }

      .pi-footer__nav a:hover::before {
        opacity: 1;
        transform: scaleX(1);
      }

      .pi-footer__nav a:hover::after {
        opacity: 1;
        transform: scaleX(1);
      }
    }

    .pi-footer__nav a:focus-visible {
      padding-left: 14px;
      color: var(--footer-white) !important;
      border-color: var(--footer-blue);
    }

    .pi-footer__nav a:focus-visible::before {
      opacity: 1;
      transform: scaleX(1);
    }

    /* =========================================================
      BOTTOM
    ========================================================= */

    .pi-footer__bottom {
      position: relative;

      margin-top: clamp(58px, 6vw, 88px);
      padding-top: 24px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;

      border-top: 1px solid var(--footer-line);
    }

    .pi-footer__bottom::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;

      width: clamp(72px, 8vw, 130px);
      height: 1px;

      background:
        linear-gradient(
          90deg,
          var(--footer-blue),
          rgba(102, 152, 255, 0)
        );
    }

    .pi-footer__partners {
      display: flex;
      align-items: center;
      gap: 13px;

      color: rgba(232, 240, 252, 0.6);

      font-size: 10px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.13em;
    }

    .pi-footer__partners-label {
      margin-right: 5px;

      color: rgba(221, 232, 249, 0.32);

      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .pi-footer__partners-name {
      position: relative;
      display: inline-flex;
      align-items: center;

      color: rgba(239, 245, 255, 0.69) !important;
      text-decoration: none !important;
      outline: none;

      transition:
        color 0.28s ease,
        opacity 0.28s ease;
    }

    .pi-footer__partners-name::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -5px;
      height: 1px;

      background:
        linear-gradient(
          90deg,
          rgba(102, 152, 255, 0.2),
          var(--footer-blue)
        );

      opacity: 0;
      transform: scaleX(0.45);
      transform-origin: left center;

      transition:
        opacity 0.28s ease,
        transform 0.38s cubic-bezier(.2, .75, .2, 1);
    }

    @media (hover: hover) and (pointer: fine) {
      .pi-footer__partners-name:hover {
        color: var(--footer-white) !important;
      }

      .pi-footer__partners-name:hover::after {
        opacity: 0.8;
        transform: scaleX(1);
      }
    }

    .pi-footer__partners-name:focus-visible {
      color: var(--footer-white) !important;
      outline: 1px solid rgba(125, 179, 255, 0.62);
      outline-offset: 6px;
    }

    .pi-footer__partners-join {
      color: var(--footer-blue);
      font-size: 12px;
      font-weight: 300;
    }

    .pi-footer__copyright {
      margin: 0;

      color: var(--footer-muted);

      font-size: 9px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.15em;
      white-space: nowrap;
    }

    /* =========================================================
      RESPONSIVE
    ========================================================= */

    @media (max-width: 1040px) {
      .pi-footer {
        --footer-gutter: clamp(26px, 6vw, 62px);
      }

      .pi-footer__main {
        grid-template-columns:
          minmax(0, 1.15fr)
          minmax(300px, 0.85fr);

        gap: clamp(42px, 6vw, 78px);
      }

      .pi-footer__main::after {
        display: none;
      }

      .pi-footer__statement {
        font-size: clamp(16px, 1.9vw, 19px);
      }
    }

    @media (max-width: 780px) {
      .pi-footer__inner {
        padding-top: 60px;
      }

      .pi-footer__main {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .pi-footer__brand {
        min-height: 0;
        padding-right: 0;
      }

      .pi-footer__logo {
        width: clamp(158px, 26vw, 190px);
      }

      .pi-footer__statement {
        margin-top: 30px;
        font-size: clamp(15px, 2.4vw, 18px);
      }

      .pi-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 34px;
      }

      .pi-footer__nav a:nth-child(2) {
        border-top: 1px solid var(--footer-line);
      }

      .pi-footer__bottom {
        margin-top: 60px;
      }
    }

    @media (max-width: 560px) {
      .pi-footer {
        --footer-gutter: 8vw;
      }

      .pi-footer__inner {
        padding:
          52px
          var(--footer-gutter)
          23px;
      }

      .pi-footer__logo {
        width: 148px;
      }

      .pi-footer__statement {
        margin-top: 26px;

        font-size: 14px;
        line-height: 1.85;
        letter-spacing: 0.065em;
      }

      .pi-footer__main {
        gap: 44px;
      }

      .pi-footer__nav {
        grid-template-columns: 1fr;
        column-gap: 0;
      }

      .pi-footer__nav a {
        min-height: 56px;
        font-size: 10px;
        letter-spacing: 0.18em;
      }

      .pi-footer__nav a:nth-child(2) {
        border-top: 0;
      }

      .pi-footer__bottom {
        margin-top: 50px;
        padding-top: 20px;

        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .pi-footer__partners {
        flex-wrap: wrap;
        row-gap: 9px;
      }

      .pi-footer__partners-label {
        flex-basis: 100%;
      }

      .pi-footer__copyright {
        white-space: normal;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pi-footer__logo,
      .pi-footer__nav a,
      .pi-footer__nav a::before,
      .pi-footer__nav a::after,
      .pi-footer__partners-name,
      .pi-footer__partners-name::after {
        transition: none;
      }
    }

/* =========================================================
  STAGE 4 / MOBILE FOOTER HEADER COLLISION FIX

  フッターが画面高より長いスマートフォンでは、
  固定ヘッダーとフッター内ロゴが重なるため、
  フッター滞在中だけ固定ヘッダーのロゴ・ナビを非表示にする。
  左レールとセクションラベルは従来どおり維持する。
========================================================= */

@media (max-width: 780px) {
  .pi-header[data-pi-section-key="footer"]
  .pi-header__logo,
  .pi-header[data-pi-section-key="footer"]
  .pi-header__nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}