/** Shopify CDN: Minification failed

Line 4980:16 Expected identifier but found whitespace
Line 4980:17 Unexpected "10px"
Line 8747:0 Unexpected "}"

**/
/* =====================================================
   Soundcore Liberty 5 Pro Series LP
   - モバイルファースト / ネイティブ CSS ネスト
   - ブレークポイント 769px
   - ブラーは filter:blur() で実装
===================================================== */

/* このページでは lp-soundcore-foot 内の Authority / BrandBanner を非表示
   （ラインナップ部分は表示） */
.page-soundcore-liberty-5-pro-series .lp-soundcore-foot .Authority,
.page-soundcore-liberty-5-pro-series .lp-soundcore-foot .BrandBanner {
  display: none;
}

#livechat_launcher_btn{
  display: none!important;}
  
  #shulex-chatbot-lancher{
    display: none!important;
  }

/* lineup-title は左寄せ + 文字黒
   PC では下の lineup-list と同じ可変余白で左端を一致させる */
.page-soundcore-liberty-5-pro-series .lp-soundcore-foot .lineup-title {
  text-align: left;
  color: #000;

  @media screen and (min-width: 960px) {
    max-width: none;
    margin-inline: auto;
  }
}

.page-soundcore-liberty-5-pro-series .lp-soundcore-foot .Lineup {
  background: #f7f9fa;
}



/* lineup-list の <li> に stacking context を作って .bg { z-index: -1 } を li 内部完結に
   （lp-soundcore-foot.css の共通スタイルに手を入れず、このページだけで効くように） */
.page-soundcore-liberty-5-pro-series .lp-soundcore-foot .lineup-list li {
  isolation: isolate;
}

.page-soundcore-liberty-5-pro-series .lp-soundcore-foot .lineup-list  {
  max-width: 100%;
}

/* ===================
   共通ユーティリティ
=================== */
.m-sp {
  display: block !important;
  @media (min-width: 1080px) {
    display: none !important;
  }
}

.m-pc {
  display: none !important;
  @media (min-width: 1080px) {
    display: block !important;
  }
}

/* <br class="m-sp"> / <br class="m-pc"> 専用：br はインラインで挙動するため display: inline / none で制御 */
br.m-sp {
  display: inline !important;
  @media (min-width: 1080px) {
    display: none !important;
  }
}

br.m-pc {
  display: none !important;
  @media (min-width: 1080px) {
    display: inline !important;
  }
}


/* ===================
   フォント定義
=================== */
@font-face {
  font-family: "Mont";
  font-weight: 300;
  src: url("/cdn/shop/files/MontForAnker-Book.woff2?v=1736241329") format("woff2"),
       url("/cdn/shop/files/MontForAnker-Book.woff?v=1736241329") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Mont";
  font-weight: 400;
  src: url("/cdn/shop/files/MontForAnker-Regular.woff2?v=1736241676") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Mont";
  font-weight: 600;
  src: url("/cdn/shop/files/MontForAnker-SemiBold.woff2?v=1736241329") format("woff2"),
       url("/cdn/shop/files/MontForAnker-SemiBold.woff?v=1736241329") format("woff");
  font-display: swap;
}


/* アンカーリンク */
html:has(.page-soundcore-liberty-5-pro-series) {
  scroll-behavior: smooth;
}

.page-soundcore-liberty-5-pro-series section[id] {
  scroll-margin-top: 110px;
}


/* ===================
   ページルート
=================== */
.page-soundcore-liberty-5-pro-series {
  /* カラートークン */
  --color-bg: #0a0b0d;             /* ベース背景（深い黒） */
  --color-bg-deep: #1c1d20;        /* やや明るい黒 */
  --color-bg-mid: #303f5f;         /* 中間のネイビー */
  --color-text: #ffffff;
  --color-text-sub: #e4e4e4;
  --color-text-muted: #b3b3b3;
  --color-accent: #00a9e0;         /* Soundcore シアン */
  --color-amazon: #ff9900;
  --color-card: rgba(104, 104, 110, 0.3);
  --color-card-disabled: rgba(104, 104, 110, 0.1);
  --color-star: #a58523;
  --color-deco: rgba(0, 169, 224, 0.4);
  --color-deco-2: rgba(48, 69, 88, 0.6);
  --color-line: rgba(255, 255, 255, 0.15);

  /* レイアウト */
  --max-width: 1200px;
  --max-width-wide: 1400px;
  --gutter: 1.25rem;
  --gutter-pc: 40px;

  /* タイポグラフィ */
  --font-en: "Mont", "Mont For Anker", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-feature-settings: "palt";
  line-height: 1.6;
  letter-spacing: 0.02em;
  overflow-x: clip;

  /* グローバル img リセットは効きすぎてしまうため削除。
     各セクション側で必要に応じて指定する */

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }


  /* ===================
     Kv（Hero）
  =================== */
  & .Kv {
    position: relative;
    width: 100%;
    min-height: max(90vh, 560px);
    overflow: clip;
    isolation: isolate;
    /* SP: 縦長 KV 画像の下部背景となじませるダークブルーグレー */
    background: #2F4253;
    margin-block-end:clamp(8px, 1.2vw, 16px);

    @media (min-width: 1080px) {
      min-height: max(90vh, 600px);
      background: var(--color-bg-mid);
    }


    /* --- 背景装飾円形（CSSブラー） --- */
    & .Kv-deco {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      filter: blur(60px);
      opacity: 0.55;

      @media (min-width: 1080px) {
        filter: blur(90px);
      }

      &.-circle1 {
        width: 80vw;
        max-width: 800px;
        aspect-ratio: 1 / 1;
        top: -20%;
        right: -25%;
        background: radial-gradient(circle, var(--color-deco) 0%, transparent 65%);
      }

      &.-circle2 {
        width: 95vw;
        max-width: 860px;
        aspect-ratio: 1 / 1;
        top: 10%;
        left: -35%;
        background: radial-gradient(circle, var(--color-deco-2) 0%, transparent 60%);
      }
    }

    /* --- 背景画像（人物 + 製品オブジェクト合成） --- */
    & .Kv-bg {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      /* page load 後すぐに拡大→通常のアニメ。IntersectionObserver に頼らないので確実に再生される */
      animation: kvBgZoomOut 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;

      & picture,
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        @media (min-width: 1080px) {
          object-position: right center;
        }
        /* 1800px 以上: top right を起点に少し拡大 */
        @media (min-width: 1800px) {
          object-position: right top;
          transform: scale(1.22);
          transform-origin: top right;
        }
      }

      /* SP/PC で背景画像を出し分け */
      & .Kv-bg-img.-pc {
        display: none;
        @media (min-width: 1080px) {
          display: block;
        }
      }
      & .Kv-bg-img.-sp {
        display: block;
        /* SP: 親 box を画像の自然高さに合わせる → 画像下端で正確にフェード開始 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        object-fit: initial;
        /* 画像下端 12% を背景色 #2F4253 になじませる */
        -webkit-mask-image: linear-gradient(
          to bottom,
          #000 0%,
          #000 82%,
          rgba(0, 0, 0, 0.6) 92%,
          rgba(0, 0, 0, 0) 100%
        );
        mask-image: linear-gradient(
          to bottom,
          #000 0%,
          #000 82%,
          rgba(0, 0, 0, 0.6) 92%,
          rgba(0, 0, 0, 0) 100%
        );

        @media (min-width: 1080px) {
          display: none;
        }
      }
    }

    /* 背景グラデ：左下を中心とした radial。テキスト左下にうっすらかかる程度に局所化
       SP では画像 mask で背景となじませるので非表示。PC のみで使用 */
    & .Kv-bg-gradient {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: none;
      background: radial-gradient(
        ellipse 90% 70% at 0% 100%,
        rgba(51, 71, 90, 0.95) 0%,
        rgba(51, 71, 90, 0.70) 25%,
        rgba(51, 71, 90, 0.38) 50%,
        rgba(51, 71, 90, 0.12) 75%,
        rgba(51, 71, 90, 0)    100%
      );

      @media (min-width: 1080px) {
        display: block;
        background: radial-gradient(
          ellipse 75% 80% at 0% 100%,
          rgba(51, 71, 90, 0.95) 0%,
          rgba(51, 71, 90, 0.72) 22%,
          rgba(51, 71, 90, 0.40) 48%,
          rgba(51, 71, 90, 0.14) 72%,
          rgba(51, 71, 90, 0)    100%
        );
      }

      /* ノイズ：グラデと同じ radial カーブで mask し、左下の濃い領域だけに乗せる */
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        mix-blend-mode: overlay;
        opacity: 0.7;
        -webkit-mask-image: radial-gradient(
          ellipse 90% 70% at 0% 100%,
          rgba(0, 0, 0, 1)    0%,
          rgba(0, 0, 0, 0.55) 18%,
          rgba(0, 0, 0, 0.18) 36%,
          rgba(0, 0, 0, 0)    55%,
          rgba(0, 0, 0, 0)    100%
        );
        mask-image: radial-gradient(
          ellipse 90% 70% at 0% 100%,
          rgba(0, 0, 0, 1)    0%,
          rgba(0, 0, 0, 0.55) 18%,
          rgba(0, 0, 0, 0.18) 36%,
          rgba(0, 0, 0, 0)    55%,
          rgba(0, 0, 0, 0)    100%
        );

        @media (min-width: 1080px) {
          -webkit-mask-image: radial-gradient(
            ellipse 75% 80% at 0% 100%,
            rgba(0, 0, 0, 1)    0%,
            rgba(0, 0, 0, 0.6)  16%,
            rgba(0, 0, 0, 0.2)  32%,
            rgba(0, 0, 0, 0)    50%,
            rgba(0, 0, 0, 0)    100%
          );
          mask-image: radial-gradient(
            ellipse 75% 80% at 0% 100%,
            rgba(0, 0, 0, 1)    0%,
            rgba(0, 0, 0, 0.6)  16%,
            rgba(0, 0, 0, 0.2)  32%,
            rgba(0, 0, 0, 0)    50%,
            rgba(0, 0, 0, 0)    100%
          );
        }
      }
    }


    /* --- soundcore by Anker ロゴ：SVG をそのまま白反転して使用、装飾なし --- */
    & .Kv-logo {
      position: absolute;
      top:0;
      left: clamp(18px, 1.8vw, 30px);
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      @media (min-width: 1800px) {
        left: 28px;
      }
    }

    & .Kv-logo-img {
      width: clamp(72px, 9vw, 110px);
      height: auto;
    }

    /* --- 左下スタック：製品画像 → コピーを縦に重ねる。
           幅可変で全体が縮むので、製品もコピーも一緒にスケールする --- */
    & .Kv-stack {
      position: absolute;
      /* SP: 中央寄せで立たせるレイアウト */
      left: 50%;
      bottom: clamp(60px, 9vw, 110px);
      transform: translateX(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
      width: min(88%, 480px);

      @media (min-width: 1080px) {
        /* PC: 左下スタックに戻す */
        left: clamp(24px, 3vw, 48px);
        bottom: clamp(28px, 3vw, 50px);
        transform: none;
        align-items: flex-start;
        text-align: left;
        gap: 22px;
        width: clamp(260px, 55vw, 580px);
      }

      /* 1800px 以上は KV まるごとワンサイズアップ */
      @media (min-width: 1800px) {
        left: 56px;
        bottom: 44px;
        gap: 22px;
        width: 600px;
      }
    }

    /* --- 製品オブジェクト（白ケース手前 + 黒ケース後ろを少し重ねて合成）。
           コピーよりやや左にはみ出させる --- */
    & .Kv-product {
      position: relative;
      width: clamp(180px, 22vw, 320px);
      aspect-ratio: 320 / 200;
      /* SP: 中央寄せレイアウト内で少し右寄り */
      margin-inline-start: 36px;
      z-index: 3;

      @media (min-width: 1080px) {
        margin-inline-start: clamp(-40px, -2.5vw, -12px);
      }

      @media (min-width: 1800px) {
        width: 320px;
        margin-inline-start: -16px;
      }

      & .Kv-product-item {
        position: absolute;
        width: auto;
        height: auto;
        will-change: transform, opacity;
        opacity: 0;
        transform: translateY(16px) scale(0.94);
        transition:
          opacity 0.85s ease-out 0.4s,
          transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s;
      }

      /* 白ケース：前面・左寄り、大きく */
      & .Kv-product-item.-white {
        left: 6%;
        bottom: 0;
        width: 58%;
        z-index: 2;
        transition-delay: 0.45s;
      }

      /* 黒ケース：白ケースの後ろ右側に少し重なる位置 */
      & .Kv-product-item.-black {
        left: 40%;
        top: 6%;
        width: 54%;
        z-index: 1;
        transition-delay: 0.6s;
      }

      &.is-inview .Kv-product-item {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* --- メインコピー --- */
    & .Kv-content {
      position: relative;
      display: grid;
      gap: 14px;
      width: 100%;
      color: var(--color-text);

      @media (min-width: 1080px) {
        gap: 25px;
      }

      @media (min-width: 1800px) {
        gap: 26px;
      }
    }

    & .Kv-title {
      /* 1000px 以下：「ビジネスのプロに」を 1 行で繋げ、「Liberty Proを。」を 2 行目に。
         1000px 以上：3 行に分割 */
      display: grid;
      gap: 0;
      font-family: var(--font-jp);
      font-weight: 300;
      font-size: clamp(32px, 7.4vw, 42px);
      line-height: 1.3;
      letter-spacing: 0.01em;
      margin: 0;

      @media (min-width: 1800px) {
        font-size: 44px;
      }

      opacity: 0;
      transform: translateY(10px);
      animation: kvCopyIn 0.7s ease-out 0.3s forwards;

      /* flex で子要素間の改行ホワイトスペースを無効化（フォーマッタ整形耐性） */
      & .Kv-title-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        /* SP: 中央寄せレイアウト */
        justify-content: center;

        @media (min-width: 1080px) {
          justify-content: flex-start;
        }
      }

      & .Kv-title-row.-en {
        margin-block-start: 4px;
      }

      & .Kv-title-en {
        font-family: var(--font-en);
        font-weight: 400;
        font-size: clamp(38px, 9vw, 48px);
        letter-spacing: -0.02em;
        margin-inline-end: 0.05em;

        @media (min-width: 1800px) {
          font-size: 50px;
        }
      }

      & .Kv-title-jp {
        font-family: var(--font-jp);
        font-weight: 300;
      }

      @media (min-width: 1000px) {
        /* PC: 各行の子要素を縦に積んで改行 */
        & .Kv-title-row {
          flex-direction: column;
          align-items: flex-start;
        }

        /* 英文行は PC でも横並びのまま（Liberty Pro + を。） */
        & .Kv-title-row.-en {
          flex-direction: row;
          align-items: baseline;
          margin-block-start: 0;
        }
      }
    }

    & .Kv-sub {
      display: grid;
      gap:7px;
      /* SP: 中央寄せ */
      justify-items: center;
      opacity: 0;
      animation: kvFadeIn 0.6s ease-out 0.85s forwards;

      @media (min-width: 1080px) {
        justify-items: start;
      }

      & .Kv-sub-lead {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0.05em;
        opacity: 0.7;
        color: white;
        margin: 0;

        @media (min-width: 1800px) {
          font-size: 13px;
        }

        & .m-en {
          font-family: var(--font-en);
        }

        & sup {
          font-size: 0.7em;
        }
      }

      & .Kv-sub-series {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
        font-size: clamp(16px, 4.5vw, 22.9px);
        line-height: 1.2;
        margin: 0;
        color: #ffffff;

        @media (min-width: 1080px) {
          justify-content: flex-start;
        }

        & .m-en {
          font-family: var(--font-en);
          color: #ffffff;
        }

        & .m-jp {
          font-family: var(--font-jp);
          font-size: clamp(15px, 4vw, 20.9px);
          color: #ffffff;
        }
      }
    }

    & .Kv-note {
      position: absolute;
      /* SP: 下部中央寄せ */
      left: 50%;
      bottom: clamp(20px, 4vw, 28px);
      transform: translateX(-50%);
      z-index: 4;
      font-size: 10px;
      color: var(--color-text);
      opacity: 0.7;
      margin: 0;
      letter-spacing: 0.05em;
      white-space: nowrap;

      @media (min-width: 1080px) {
        left: auto;
        right: clamp(8px, 2vw, 15px);
        bottom: clamp(8px, 2vw, 15px);
        transform: none;
      }
    }
  }


  /* ===================
     Lead（Scene = 上部 sticky / Copy = 下から被せる）
  =================== */
  & .Lead {
    position: relative;
    background: var(--color-bg);
    padding-block: 0;
    /* overflow: clip だと sticky が効かない */
    overflow: visible;
    isolation: isolate;


    /* --- シーン画像（外側 = sticky + グラデ、内側 = overflow scroll） --- */
    & .Lead-scene {
      /* SP base: コンパクトな高さ */
      position: sticky;
      top: 0;
      width: 100%;
      height: clamp(220px, 38vh, 360px);
      z-index: 1;
      /* SP: sticky 自身を独立 GPU レイヤーとして固定 → 内部 animation との合成競合を回避 */
      transform: translateZ(0);

      @media (min-width: 1080px) {
        /* PC は元の挙動 */
        transform: none;
      }

      /* Scene 下部グラデ：scroll 領域の影響を受けない外側に配置。
         SP は常時 30% 高さで固定、PC は JS が --scene-fade-height を駆動 */
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 30%;
        pointer-events: none;
        background: linear-gradient(
          to top in oklab,
          rgba(10, 11, 13, 1)     0%,
          rgba(10, 11, 13, 0.997) 4%,
          rgba(10, 11, 13, 0.988) 8%,
          rgba(10, 11, 13, 0.972) 12%,
          rgba(10, 11, 13, 0.948) 16%,
          rgba(10, 11, 13, 0.918) 20%,
          rgba(10, 11, 13, 0.882) 24%,
          rgba(10, 11, 13, 0.838) 28%,
          rgba(10, 11, 13, 0.788) 32%,
          rgba(10, 11, 13, 0.733) 36%,
          rgba(10, 11, 13, 0.672) 40%,
          rgba(10, 11, 13, 0.608) 44%,
          rgba(10, 11, 13, 0.540) 48%,
          rgba(10, 11, 13, 0.470) 52%,
          rgba(10, 11, 13, 0.400) 56%,
          rgba(10, 11, 13, 0.330) 60%,
          rgba(10, 11, 13, 0.263) 64%,
          rgba(10, 11, 13, 0.200) 68%,
          rgba(10, 11, 13, 0.144) 72%,
          rgba(10, 11, 13, 0.096) 76%,
          rgba(10, 11, 13, 0.058) 80%,
          rgba(10, 11, 13, 0.030) 84%,
          rgba(10, 11, 13, 0.012) 88%,
          rgba(10, 11, 13, 0.003) 92%,
          rgba(10, 11, 13, 0)     100%
        );
        /* SP: filter / will-change は不要（height 固定 + Lead-copy 重なり時のカクつき原因） */
        z-index: 3;
      }

      @media (min-width: 1080px) {
        height: clamp(300px, 58vh, 64vh);

        &::after {
          height: var(--scene-fade-height, 0%);
          /* PC のみ JS が height を駆動するため will-change を付与 */
          will-change: height;
          /* PC のみ細い blur で多段ストップの境界をなめらかに */
          filter: blur(0.5px);
        }
      }
    }

    /* 内側スクロール領域 */
    & .Lead-scene-scroll {
      /* SP base: 横スクロール無効（マーキー animation のみ） */
      width: 100%;
      height: 100%;
      overflow: hidden;
      cursor: default;
      touch-action: auto;
      /* SP: perspective で 3D 合成空間を確立 → 内部の transform: translateZ(0) が独立 GPU レイヤーとして扱われる */
      perspective: 1000px;

      @media (min-width: 1080px) {
        /* PC: 横スクロール有効化、perspective 不要 */
        perspective: none;
        overflow-x: auto;
        overflow-y: clip;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        cursor: grab;
        touch-action: pan-x pan-y;

        &::-webkit-scrollbar {
          display: none;
        }

        &:active {
          cursor: grabbing;
        }
      }
    }

    & .Lead-scene-track {
      display: flex;
      gap: 10px;
      width: max-content;
      height: 100%;
      /* SP: 無限ループマーキー。
         - duration を 120s に伸ばして 1 フレあたりの移動量を ~2.8px に抑制（旧 60s ~5.6px）
         - transform-style: preserve-3d で独立 3D 合成レイヤー化（iOS Safari の compositor 安定化）
         - keyframes は --marquee-x（整数 px、JS から）で駆動 → subpixel ジッタ回避 */
      animation: leadSceneMarqueeSP 120s linear infinite reverse;
      will-change: transform;
      transform-style: preserve-3d;

      @media (min-width: 1080px) {
        /* PC: 横スクロール用 max-content + 初回フェード（marquee は解除） */
        gap: 16px;
        animation: leadSceneIn 1.2s ease-out;
        will-change: auto;
        transform: none;
        transform-style: flat;
      }
    }

    & .Lead-scene-item {
      /* SP base: flex item として横並び、固定アスペクトで viewport の 60% 幅 */
      flex: 0 0 auto;
      width: 60vw;
      max-width: 320px;
      height: 100%;
      overflow: hidden;
      position: relative;
      /* SP: 各 item を独立 GPU レイヤー化 → スクロール中の再合成コストを軽減 */
      transform: translateZ(0);

      & img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
        /* SP: 画像自身も独立レイヤー化（sticky 親と animation track の合成境界に挟まれないように） */
        transform: translateZ(0);
      }

      @media (min-width: 1080px) {
        /* PC: 既存の natural サイズ横並び（SP の固定幅を解除） */
        width: auto;
        max-width: none;
        overflow: visible;
        /* PC は元の挙動に戻す */
        transform: none;

        & img {
          width: auto;
          height: 100%;
          object-fit: initial;
          object-position: initial;
          transform: none;
        }
      }
    }

    /* Scene 全面暗化レイヤー：Lead-copy が Scene を 60% 以上覆ったら徐々に効く（--scene-darken は JS から） */
    & .Lead-scene-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: #0a0b0d;
      opacity: var(--scene-darken, 0);
      will-change: opacity;
      z-index: 2;
    }

    /* --- リードコピー外側：全幅 + イントログラデ。Scene に大きく重ねる --- */
    & .Lead-copy {
      /* シーン画像との重なり距離（負の margin と一致）。幅可変でも常にこの距離分のグラデ透明ゾーンを確保する */
      --lead-overlap: clamp(180px, 32vw, 260px);

      position: relative;
      z-index: 3;
      width: 100%;
      background: transparent;
      padding-inline: var(--gutter);
      padding-block: 180px 60px;
      margin-block-start: calc(-1 * var(--lead-overlap));
      isolation: isolate;

      @media (min-width: 1080px) {
        padding-inline: var(--gutter-pc);
        padding-block: 360px 110px;
      }

      /* 全体グラデ：シーン重なり領域は完全透明、その下から急速に濃く完全黒へ
         px ベースで指定するので、幅可変でも「シーンが透ける距離」は保たれる */
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(10, 11, 13, 0)    0,
          rgba(10, 11, 13, 0)    var(--lead-overlap),
          rgba(10, 11, 13, 0.35) calc(var(--lead-overlap) + 80px),
          rgba(10, 11, 13, 0.75) calc(var(--lead-overlap) + 160px),
          rgba(10, 11, 13, 0.95) calc(var(--lead-overlap) + 240px),
          rgba(10, 11, 13, 1)    calc(var(--lead-overlap) + 320px),
          rgba(10, 11, 13, 1)    100%
        );
        opacity: var(--copy-fade, 0.85);
        /* SP: opacity は JS が更新しない（fallback 0.85 固定）→ will-change 不要 */
        z-index: -1;

        @media (min-width: 1080px) {
          /* PC のみ JS が --copy-fade を rAF 更新するので will-change を付与 */
          will-change: opacity;
        }
      }
    }

    /* リードコピー内側：中央コンテナでテキストレイアウトを管理 */
    & .Lead-copy-inner {
      max-width: clamp(730px, 90vw, 1280px);
      margin-inline: auto;
      display: grid;
      gap: 28px;
      /* SP: 左揃え */
      justify-items: start;
      padding-left: 2rem;

      @media (min-width: 1080px) {
        grid-template-columns: auto auto;
        gap: 150px;
        align-items: start;
        justify-content: center;
        justify-items: center;
      }
    }

    & .Lead-title {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: clamp(32px, 8vw, 54px);
      line-height: 1.5;
      letter-spacing: 0.04em;
      color: var(--color-text-sub);
      margin: 0;
      padding-block-start: 0;

      & span {
        display: block;
        overflow: hidden;

        &::before {
          content: attr(data-text);
        }
      }

      &[data-inview] span {
        opacity: 0;
        transform: translateY(50%);
        transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: calc(var(--i, 0) * 0.15s);
      }

      &.is-inview span {
        opacity: 1;
        transform: translateY(0);
      }
    }

    & .Lead-body {
      font-size: clamp(14px, 3.4vw, 16px);
      line-height: 2;
      letter-spacing: 0.06em;
      color: var(--color-text-sub);

      &[data-inview] {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.9s ease-out 0.5s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
      }

      &.is-inview {
        opacity: 1;
        transform: translateY(0);
      }

      & p {
        margin: 0 0 1.5em;
        color: var(--color-text-sub);  /* p タグへの明示指定（親テーマの上書き対策） */

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }


  /* ===================
     Products（製品カード × 2）
  =================== */
  & .Products {
    position: relative;
    background: var(--color-bg);
    padding-block: 40px;
    padding-inline: var(--gutter);
    isolation: isolate;

    @media (min-width: 1080px) {
      padding-block: 70px 20px;
      padding-inline: 30px;
    }

    /* 旧 CSS blur ベースの背景装飾は無効化（SVG 画像装飾 .Products-ellipse に置換） */
    &::before {
      display: none;
    }

    /* SVG 楕円グロウ：背景装飾（iOS Safari セーフ、filter: blur 不使用） */
    & .Products-ellipse {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(1200px, 110%);
      height: auto;
      transform: translate(-50%, -50%);
      z-index: 1;
      pointer-events: none;
      user-select: none;
      opacity: 0.7;
    }

    /* 背景大型タイトル：今回のデザインでは非表示 */
    & .Products-bg-title {
      display: none;
    }

    & .Products-cards {
      position: relative;
      z-index: 2;
      max-width: var(--max-width);
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 40px;

      @media (min-width: 1080px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* image / name / catch / features / colors / price / btns の 7 行 */
        grid-template-rows: repeat(7, auto);
        column-gap: 16px;
        row-gap: 0;
      }

      /* 広い PC では gap を広く */
      @media (min-width: 1100px) {
        column-gap: 40px;
      }
    }
  }

  /* Products-note：Highlights セクション末尾の注釈
     Highlights-grid の幅 (max-width: 1600px) に揃えて右寄せ */
  & .Products-note {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 10px;
    color: var(--color-text);
    opacity: 0.6;
    letter-spacing: 0;
    margin: clamp(20px, 4vw, 30px) auto 0;
    padding-inline: 0;
    max-width: 1600px;
    text-align: left;

    @media (min-width: 1080px) {
      padding-inline: 0;
      text-align: end;
    }
  }

  /* ---------- 製品カード ----------
     PC（≥ 1080px）：flex column で縦並びカード（親 grid 内で 2 製品横並び）
     SP（< 1080px）：flex column 縦並び（@media で上書き）
     装飾：Pro Max は左上、Pro は右下にノイズブラーグロー */
  & .Product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    isolation: isolate;
    overflow: visible;

    /* カード全体ノイズは廃止（ノイズはグラデ光彩のエリアにのみ乗せる） */

    @media (min-width: 1080px) {
      /* subgrid で親の 7 行を継承 → 2 カードの対応する要素が同じ高さに揃う */
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 7;
      row-gap: 20px;
    }

    @media (max-width: 1079.98px) {
      /* SP: 縦並びカード（画像上、テキスト下）。base の flex column を維持し、見た目だけカード化 */
      padding: 20px 0;
      border-radius: 18px;
    }

    & .Product-image {
      position: relative;
      width: 100%;
      /* SP は横長気味で高さを抑え、1 カードがビューポートに収まりやすく */
      aspect-ratio: 2 / 1;
      display: grid;
      place-items: center;
      /* 暗闇から浮かび上がる表示（製品写真のみ）— テンポ早め 0.6s */
      opacity: 0;
      transform: translateY(40px) scale(0.97);
      filter: brightness(0.25) blur(6px);
      transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease-out;
      margin-block-end: 10px;

      @media (min-width: 1080px) {
        aspect-ratio: 592 / 230;
        margin-block-end: 16px;
      }

      /* 旧 CSS blur ベースの光彩は削除（SVG 画像 .Product-image-glow に置換） */
      &::before {
        display: none;
      }

      /* SVG 楕円光彩：filter: blur 不使用、iOS Safari でもカクツキ・キレなし
         周辺は radial mask でフェード → SVG 自体の矩形エッジが見えないようにする
         （GPU 合成のみで軽量、スクロール中の再計算なし） */
      & .Product-image-glow {
        position: absolute;
        inset: 0;
        width: 100%;
        scale: 2;
        top: -25%;
        left: -15%;
        height: 100%;
        width: 100%;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
        z-index: 0;
        opacity: 1;
        max-width: none;
        max-height: none;
        /* 周辺を透明にフェードして画像のエッジを消す */
        -webkit-mask-image: radial-gradient(
          ellipse 55% 55% at 50% 50%,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.97) 30%,
          rgba(0, 0, 0, 0.86) 50%,
          rgba(0, 0, 0, 0.62) 68%,
          rgba(0, 0, 0, 0.32) 82%,
          rgba(0, 0, 0, 0.1) 92%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 55% 55% at 50% 50%,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.97) 30%,
          rgba(0, 0, 0, 0.86) 50%,
          rgba(0, 0, 0, 0.62) 68%,
          rgba(0, 0, 0, 0.32) 82%,
          rgba(0, 0, 0, 0.1) 92%,
          transparent 100%
        );
  
      }

   

      /* カラー切替：複数画像を grid 重ね、opacity で切替（glow は対象外） */
      & > img:not(.Product-badge):not(.Product-image-glow) {
        position: relative;
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        max-width: 60%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        opacity: 0;
        transition: opacity 0.4s ease, transform 0.4s ease;

        @media (min-width: 1080px) {
          max-width: 58%;
        }
      }

      & > img.is-active:not(.Product-badge):not(.Product-image-glow) {
        opacity: 1;
      }

      & .Product-badge {
        position: absolute;
        right: clamp(15px, 6vw, 90px);
        bottom: 6%;
        width: 34px;
        height: 45px;
        object-fit: contain;
        opacity: 1;
      }
    }

    /* is-inview は Product-card 側に付く → Product-image を浮かび上がらせる */
    &.is-inview .Product-image {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: brightness(1) blur(0);
    }

    /* Liberty 5 Pro (2 番目のカード): glow を右下に配置 */
    &:nth-of-type(2) .Product-image-glow {
      inset: auto;
      top: auto;
      left: auto;
      right: -15%;
      bottom: -25%;
      width: 90%;
      height: 120%;
    }

    & .Product-name {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    & .Product-name-new {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--color-text);
      color: #202d45;
      font-family: var(--font-en);
      font-size: clamp(6px, 1.4vw, 7px);
      line-height: 1.5;
      padding: 4px 7px;
      letter-spacing: 0.05em;
    }

    & .Product-name-text {
      font-family: var(--font-en);
      font-weight: 300;
      font-size: clamp(16px, 3.6vw, 18.4px);
      line-height: 1.5;
      letter-spacing: -0.02em;
      color: var(--color-text);
    }

    & .Product-catch {
      font-family: var(--font-jp);
      font-weight: 500;
      font-size: clamp(14px, 3.4vw, 18px);
      line-height: 1.5;
      letter-spacing: 0.04em;
      text-align: center;
      color: var(--color-text);
      margin: 0;
    }

    /* ---------- 機能アイコンリスト ---------- */
    & .Product-features {
      /* SP: 4列 × 2行（縦並びの cell）。中間幅は 2列（横並び）。広い PC は 4列（横並び） */
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      margin-inline: 5px;

      @media (min-width: 1080px) and (max-width: 1099.98px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-inline: 7px;
      }
    }

    & .Product-feature {
      /* アイコン固定幅 + テキストを左寄せ → カード間でアイコン位置と文字位置が揃う */
      display: grid;
      grid-template-columns: 27px 1fr;
      align-items: center;
      column-gap: 8px;
      min-height: 53px;
      padding: 8px 10px;
      background: var(--color-card);

      /* SP: 縦並び（アイコン上、テキスト下） */
      @media (max-width: 1079.98px) {
        grid-template-columns: 1fr;
        row-gap: 4px;
        min-height: 70px;
        padding: 8px 4px;
      }

      &.-disabled {
        /* 通常 badge と同じ背景を使い、コンテンツだけ均一なグレーに */
        background: var(--color-card);
        opacity: 0.3;

        /* 全要素を均一に muted gray にして「主張の強すぎない洗練された」印象 */
        & .Product-feature-icon {
          opacity: 1;
          filter: grayscale(1) brightness(1.4) opacity(0.5);
        }

        & .Product-feature-text {
          opacity: 1;
          color: rgba(255, 255, 255, 0.42);
        }

        & .Product-feature-stars {
          opacity: 0.3;
        }
      }
    }

    & .Product-feature-icon {
      width: 27px;
      height: 27px;
      object-fit: contain;
      justify-self: center;
    }

    & .Product-feature-text {
      font-family: var(--font-jp);
      font-weight: 300;
      font-size: 9.5px;
      line-height: 1.2;
      text-align: center;
      color: var(--color-text);
      letter-spacing: -0.02em;

      @media (min-width: 1080px) {
        font-size: 10px;
      }
    }

    & .Product-feature-stars {
      color: var(--color-star);
      font-size: 10px;
      letter-spacing: 0;
    }

    /* ---------- カラースウォッチ ---------- */
    & .Product-colors {
      display: flex;
      gap: 13px;
      justify-content: center;
    }

    & .Product-color {
      width: 20px;
      height: 20px;
      border: 0.6px solid rgba(255, 255, 255, 0.7);
      background: var(--swatch, #000);
      cursor: pointer;
      transition: transform 0.2s ease, outline-offset 0.2s ease;
      outline: 0 solid var(--color-accent);
      outline-offset: 0;

      &:hover {
        transform: scale(1.12);
      }

      &.is-active {
        outline: 1.5px solid var(--color-accent);
        outline-offset: 3px;
      }

      &:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
      }
    }

    /* ---------- 価格（中身は product-price-v2 スニペット） ---------- */
    & .Product-price {
      display: flex;
      justify-content: center;
      margin: 0;

      /* v2 スニペットの数字 / セール価格 / 税込 すべて Mont + 白 */
      & .product-price-v2-default,
      & .product-price-v2-sale,
      & .product-price-v2-tax,
      & .product-price-v2-sale-wrap {
        font-family: var(--font-en);
        color: #fff;
      }

      /* バッジ（XX%OFF）と価格の間隔を少し広げる */
      & .product-price-v2-discount-rate-wrap {
        margin-bottom: 14px;
      }
    }

    /* ---------- 購入ボタン（lp-btns を上書き） ---------- */
    & .Product-btns {
      & .lp-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        max-width: 480px;
        margin-inline: auto;

        & li {
          list-style: none;

          &.is-more {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            margin-block-start: 4px;
          }
        }

        & .lp-btn,
        & .lp-btn-amazon,
        & .lp-btn-rakuten {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          padding: 14px 16px;
          border-radius: 100px;
          font-family: var(--font-jp);
          font-size: clamp(13px, 3.3vw, 14px);
          color: var(--color-text);
          text-decoration: none;
          line-height: 1.2;
          transition: opacity 0.2s ease;

          @media (min-width: 1080px) {
            padding: 25px 16px;
          }

          &:hover {
            opacity: 0.85;
          }
        }

        & .lp-btn {
          background: var(--color-accent);
        }

        & .lp-btn-amazon {
          background: transparent;
          border: 1px solid var(--color-amazon);
        }

        & .lp-btn-rakuten {
          background: transparent;
          border: 1px solid #bf0000;
        }

        & .-inactive {
          opacity: 0.4;
          pointer-events: none;
        }

        & .lp-txtLink {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          color: var(--color-text);
          text-decoration: none;

          & .icon-svg svg {
            width: 1em;
            height: 1em;
            fill: #fff;
          }
        }
      }
    }
  }


  /* ===================
     Highlights（9つのおすすめポイント）
  =================== */
  & .Highlights {
    position: relative;
    padding-block: clamp(60px, 8vw, 120px) clamp(80px, 10vw, 150px);
    padding-inline: var(--gutter);
    background: var(--color-bg);
    isolation: isolate;
    overflow: hidden;

    @media (min-width: 1080px) {
      /* 画面幅に応じて可変。1200px 以下は控えめ、広い画面で大きく */
      padding-inline: clamp(16px, 2.4vw, 60px);
    }

    /* 下部の暗いグラデーション装飾 */
    &::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 80%;
      background: linear-gradient(
        180deg,
        rgba(14, 26, 37, 0) 0%,
        rgba(14, 26, 37, 0.3) 36.6%,
        rgba(14, 26, 37, 0.67) 52.8%,
        rgba(14, 26, 37, 0.83) 64.2%,
        #0e1a25 90.3%
      );
      z-index: -1;
      pointer-events: none;
    }

    /* --- ヘッダ --- */
    & .Highlights-head {
      text-align: center;
      margin-block-end: clamp(40px, 5vw, 60px);
      color: var(--color-text);
    }

    & .Highlights-eyebrow {
      font-size: clamp(13px, 1.4vw, 20px);
      font-weight: 300;
      line-height: 1.5;
      letter-spacing: 0.03em;
      margin-block-end: clamp(10px, 1.5vw, 25px);
      font-feature-settings: "palt";
    }

    & .Highlights-title {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      margin: 0;
      line-height: 1.5;
      font-feature-settings: "palt";
    }

    & .Highlights-title-num {
      font-family: var(--font-en);
      font-weight: 200;
      font-size: clamp(40px, 5.2vw, 67px);
      letter-spacing: 0.03em;
      line-height: 1;
    }

    & .Highlights-title-text {
      font-weight: 100;
      font-size: clamp(28px, 3.9vw, 50px);
      letter-spacing: 0.03em;
    }

    /* --- グリッド --- */
    & .Highlights-grid {
      display: grid;
      gap: 10px;
      max-width: 1600px;
      margin-inline: auto;

      /* SP base：ANC → Call+AIVoice → 中段3列均等 → 下段3列均等 */
      grid-template-columns: repeat(6, 1fr);
      grid-template-areas:
        "anc anc anc anc anc anc"
        "call call call aiv aiv aiv"
        "battery battery ambient ambient utility utility"
        "display display design design sound sound";

      @media (min-width: 1080px) {
        /* PC：左カラム 735 / 右カラム 555。3 行で 257 / 166 / 243 */
        grid-template-columns: 49fr 49fr 49fr 37fr 37fr 37fr;
        grid-template-rows: 257fr 166fr 243fr;
        aspect-ratio: 1300 / 686;
        grid-template-areas:
          "anc anc anc call call call"
          "anc anc anc battery ambient utility"
          "display design sound aiv aiv aiv";
      }
    }

    /* SP のみ：下段 6 カード（battery / ambient / utility / display / design / sound）+ call / ai-voice
       の高さを増やし文字と画像の被りを軽減 + タイトルを 10px に統一 */
    @media (max-width: 1079.98px) {
      & .Highlights-card.-battery,
      & .Highlights-card.-ambient,
      & .Highlights-card.-utility,
      & .Highlights-card.-display,
      & .Highlights-card.-design,
      & .Highlights-card.-sound {
        aspect-ratio: 3 / 4;
      }

      /* call / ai-voice は横並び 2 列なので、もう少し縦長に */
      & .Highlights-card.-call,
      & .Highlights-card.-ai-voice {
        aspect-ratio: 4 / 5;
      }

      & .Highlights-card.-battery .Highlights-card-title,
      & .Highlights-card.-ambient .Highlights-card-title,
      & .Highlights-card.-utility .Highlights-card-title,
      & .Highlights-card.-display .Highlights-card-title,
      & .Highlights-card.-design .Highlights-card-title,
      & .Highlights-card.-sound .Highlights-card-title {
        font-size: 10px;
      }
    }

    /* --- カード共通 --- */
    & .Highlights-card {
      position: relative;
      display: block;
      overflow: hidden;
      /* SP: 角丸弱め */
      border-radius: 4px;
      text-decoration: none;
      color: var(--color-text);
      background-color: #000;
      isolation: isolate;
      /* SP base：基本は正方形に近い比率。PC では grid 行で制御するため解除 */
      aspect-ratio: 1 / 1;

      @media (min-width: 1080px) {
        aspect-ratio: auto;
        border-radius: 10px;
      }

      /* SP only: 左上から右下にフェードする暗いグラデーション overlay
         （メディアの上、テキストの下に重ねて左上テキストの可読性を確保） */
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          135deg,
          rgba(0, 0, 0, 0.92) 0%,
          rgba(0, 0, 0, 0.85) 5%,
          rgba(0, 0, 0, 0.75) 10%,
          rgba(0, 0, 0, 0.62) 16%,
          rgba(0, 0, 0, 0.48) 22%,
          rgba(0, 0, 0, 0.34) 28%,
          rgba(0, 0, 0, 0.2) 34%,
          rgba(0, 0, 0, 0.09) 40%,
          rgba(0, 0, 0, 0.02) 46%,
          rgba(0, 0, 0, 0) 52%
        );

        @media (min-width: 1080px) {
          content: none;
        }
      }

      &:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
      }

      &:hover {
        & .Highlights-card-media > img {
          transform: scale(1.08);
        }
      }
    }

    /* メディア */
    & .Highlights-card-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;

      & > img,
      & > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
    }

    /* テキスト枠
       SP base: 全カード共通で左上配置 + 白テキスト（左上グラデで可読性確保） */
    & .Highlights-card-text {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 3;
      padding: 14px 16px;
      color: #ffffff;
      pointer-events: none;

      @media (min-width: 1080px) {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        padding: clamp(12px, 2.2vw, 30px);
        color: var(--color-text);
      }
    }

    & .Highlights-card-title {
      font-weight: 500;
      font-size: clamp(13px, 1.4vw, 20px);
      line-height: 1.4;
      letter-spacing: 0.02em;
      font-feature-settings: "palt";
      margin: 0;
    }

    & .Highlights-card-sub {
      margin: clamp(6px, 1.4vw, 25px) 0 0;
      font-size: clamp(10px, 1vw, 16px);
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: 0.03em;
      font-feature-settings: "palt";
    }

    & .Highlights-card-eyebrow {
      font-size: clamp(10px, 0.85vw, 12px);
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: 0.03em;
      margin: 0 0 clamp(8px, 1vw, 15px);
      font-feature-settings: "palt";
    }

    /* 矢印アイコン（CSS 描画：円形 + V 字） */
    & .Highlights-card-arrow {
      position: absolute;
      right: clamp(10px, 1.2vw, 16px);
      bottom: clamp(10px, 1.2vw, 16px);
      z-index: 4;
      /* SP: 小さめ */
      width: 22px;
      height: 22px;
      box-sizing: border-box;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;

      @media (min-width: 1080px) {
        width: clamp(28px, 2.7vw, 35.6px);
        height: clamp(28px, 2.7vw, 35.6px);
      }

      /* 中央の V 字 */
      &::before {
        content: "";
        display: block;
        box-sizing: border-box;
        width: 30%;
        height: 30%;
        /* SP: 線細く */
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: translateY(-15%) rotate(45deg);

        @media (min-width: 1080px) {
          border-right-width: 1.5px;
          border-bottom-width: 1.5px;
        }
      }

      &.-lg {
        width: 26px;
        height: 26px;

        @media (min-width: 1080px) {
          width: clamp(32px, 3vw, 40px);
          height: clamp(32px, 3vw, 40px);
        }
      }

      &.-sm {
        width: 20px;
        height: 20px;

        @media (min-width: 1080px) {
          width: clamp(24px, 2.2vw, 28px);
          height: clamp(24px, 2.2vw, 28px);
        }
      }
    }

    /* --- 1. ANC（大ブロック左上） --- */
    & .Highlights-card.-anc {
      grid-area: anc;
      /* SP：横長ヒーロー比率（PC は grid 行で制御） */
      aspect-ratio: 16 / 9;

      @media (min-width: 1080px) {
        aspect-ratio: auto;
      }

      & .Highlights-card-media > img {
        object-position: left center;
      }

      & .Highlights-card-text {
        display: grid;
        gap: 6px;
        color: #ffffff;

        @media (min-width: 1080px) {
          padding: clamp(16px, 3vw, 40px) clamp(16px, 2.5vw, 35px);
          gap: 10px;
        }
      }

      & .Highlights-card-title {
        font-size: clamp(14px, 4vw, 18px);
        letter-spacing: 0.02em;
        color: inherit;

        @media (min-width: 1080px) {
          font-size: clamp(16px, 1.8vw, 24px);
        }
      }

      & .Highlights-card-sub {
        margin: 0;
        font-size: clamp(10px, 3vw, 13px);
        color: inherit;

        @media (min-width: 1080px) {
          font-size: clamp(11px, 1vw, 16px);
        }
      }

      & .Highlights-card-anc-logo {
        position: absolute;
        left: clamp(14px, 2.3vw, 30px);
        bottom: clamp(14px, 2.3vw, 30px);
        z-index: 3;
        pointer-events: none;

        & img {
          display: block;
          /* SP: 固定サイズ */
          width: 40px;
          height: 50px;

          @media (min-width: 1080px) {
            /* PC: 一回り大きく */
            width: 56px;
            height: 70px;
          }
        }
      }
    }

    /* --- 2. Call（横長右上） --- */
    & .Highlights-card.-call {
      grid-area: call;
      background: #000;
      border: 1px solid rgba(255, 255, 255, 0.15);

      & .Highlights-card-media > img {
        object-position: right center;
      }

      /* 動画はカード全体をカバー（img と同じ object-fit/position） */
      & .Highlights-card-media > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* SP: 中央寄せ、PC: 右端寄せ */
        object-position: center center;
        display: block;

        @media (min-width: 1080px) {
          object-position: right center;
        }
      }

      /* SP: 左上配置（共通 base に従う）+ card 全体カバー（ギネスバッジを左下 absolute するため）
         PC: Figma 準拠で card 下部寄せ flex column コンテナ
         - 外側 gap 30px：バッジ ↔ テキストブロック
         - padding 35px 30px：Figma の frame padding 準拠 */
      & .Highlights-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        @media (max-width: 1079.98px) {
          /* card 全体をカバーすることで子の position:absolute (.Highlights-card-guinness) の起点になる */
          bottom: 0;
        }

        @media (min-width: 1080px) {
          position: absolute;
          top: auto;
          left: 0;
          right: 0;
          bottom: 0;
          max-width: 60%;
          padding: clamp(20px, 2.5vw, 35px) clamp(16px, 2vw, 30px);
          gap: clamp(16px, 2.2vw, 30px);
        }
      }

      /* ギネス世界記録バッジ
         SP: カード左下に absolute 配置（テキストフローから外す）
         PC: flex item として最上段 */
      & .Highlights-card-guinness {
        position: absolute;
        left: 12px;
        bottom: 12px;
        z-index: 3;
        width: 30px;
        height: auto;
        display: block;
        flex-shrink: 0;
        pointer-events: none;

        @media (min-width: 1080px) {
          position: static;
          width: clamp(36px, 3.8vw, 52px);
          pointer-events: auto;
        }
      }

      /* eyebrow + title をまとめる内側 block */
      & .Highlights-card-textblock {
        display: flex;
        flex-direction: column;
        gap: 4px;

        @media (min-width: 1080px) {
          gap: 10px;
        }
      }

      & .Highlights-card-eyebrow {
        font-size: 9px;
        margin: 0;
        color: #ffffff;

        @media (min-width: 1080px) {
          font-size: clamp(9px, 0.9vw, 12px);
        }
      }

      & .Highlights-card-title {
        font-size: 14px;
        font-weight: 500;
        margin: 0;

        @media (min-width: 1080px) {
          font-size: clamp(14px, 1.6vw, 22px);
        }
      }
    }

    /* --- 3. AIボイスレコーダー（縦長） --- */
    & .Highlights-card.-ai-voice {
      grid-area: aiv;
      background: #2a3441;

      & .Highlights-card-media {
        /* <picture> 経由で SP/PC 画像出し分けがあるため子孫セレクタで対象指定
           （base の > img では <picture> 内の img に届かないため width/height/object-fit も明示） */
        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center bottom;
          transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);

          @media (min-width: 1080px) {
            /* contain で画像全体を表示、右寄せ。mask の左フェードは短めに */
            object-fit: contain;
            object-position: right center;
            mask-image: linear-gradient(
              90deg,
              transparent 0%,
              rgba(0, 0, 0, 0.18) 18%,
              rgba(0, 0, 0, 0.48) 30%,
              rgba(0, 0, 0, 0.78) 42%,
              rgba(0, 0, 0, 0.95) 52%,
              #000 58%,
              #000 100%
            );
            -webkit-mask-image: linear-gradient(
              90deg,
              transparent 0%,
              rgba(0, 0, 0, 0.18) 18%,
              rgba(0, 0, 0, 0.48) 30%,
              rgba(0, 0, 0, 0.78) 42%,
              rgba(0, 0, 0, 0.95) 52%,
              #000 58%,
              #000 100%
            );
          }
        }
      }

      /* PC: 画像の左側に背景色 (#1d1d1d) のフェードオーバーレイを敷き、
         contain で右寄せされた画像の左端を背景に滑らかに馴染ませる
         （テキストエリアの可読性も同時に確保） */
      &::before {
        @media (min-width: 1080px) {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
          background: linear-gradient(
            to right,
            #1d1d1d 0%,
            rgba(29, 29, 29, 0.97) 8%,
            rgba(29, 29, 29, 0.88) 18%,
            rgba(29, 29, 29, 0.72) 28%,
            rgba(29, 29, 29, 0.52) 38%,
            rgba(29, 29, 29, 0.32) 48%,
            rgba(29, 29, 29, 0.15) 56%,
            rgba(29, 29, 29, 0.05) 62%,
            transparent 68%
          );
          display: none;
        }
      }

      & .Highlights-card-text {
        @media (min-width: 1080px) {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          padding: clamp(14px, 2.5vw, 30px);
          color: #ffffff;
        }
      }

      & .Highlights-card-eyebrow {
        font-weight: 500;
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 0.02em;
        margin-block-end: 6px;
        color: inherit;

        @media (min-width: 1080px) {
          font-size: clamp(9px, 0.95vw, 12px);
          margin-block-end: 7px;
          color: rgba(255, 255, 255, 0.85);
        }
      }

      & .Highlights-card-title {
        font-size: 14px;
        line-height: 1.5;
        font-weight: 500;

        @media (min-width: 1080px) {
          font-size: clamp(13px, 1.5vw, 20px);
          color: #ffffff;
        }
      }

      /* 白べたバッジ：黒文字、テキストのみ縦 2 行 */
      & .Highlights-card-promax {
        position: absolute;
        /* SP base: コンパクトに */
        left: 10px;
        bottom: 10px;
        z-index: 3;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        column-gap: 5px;
        row-gap: 0px;
        align-items: center;
        padding: 7px 6px 6px;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        pointer-events: none;

        @media (min-width: 1080px) {
          left: clamp(14px, 2.5vw, 30px);
          bottom: clamp(12px, 2vw, 28px);
          padding: 14px 10px 12px;
        }
      }

      & .Highlights-card-promax-model {
        display: block;
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-family: var(--font-en);
        font-weight: 600;
        /* SP base: 10px、PC: 12.5px */
        font-size: 10px;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: #000000;

        @media (min-width: 1080px) {
          font-size: 12.5px;
        }
      }

      & .Highlights-card-promax-tag {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        font-family: var(--font-jp);
        font-weight: 550;
        /* SP base: 10px、PC: 12.5px */
        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 0.02em;
        color: #000000;

        @media (min-width: 1080px) {
          font-size: 12.5px;
        }
      }
    }

    /* --- 4. Battery（28 時間再生） --- */
    & .Highlights-card.-battery {
      grid-area: battery;
      background: linear-gradient(
        36deg,
        #202d45 9.8%,
        rgba(50, 67, 85, 0.8) 41.6%,
        rgba(72, 89, 106, 0.876) 60.6%,
        rgba(98, 114, 132, 0.9) 78.8%
      );

      & .Highlights-card-media > img {
        /* 画像が足りない部分はカード全体を cover で埋める */
        object-fit: cover;
        object-position: center bottom;
      }

      & .Highlights-card-text {
        padding: clamp(14px, 1.5vw, 18px);
      }

      & .Highlights-card-battery-text {
        display: inline-flex;
        align-items: flex-end;
        gap: 3px;
        color: inherit;
        font-feature-settings: "palt";
        margin: 0;
        white-space: nowrap;

        & .-prefix {
          display: inline-block;
          font-size: clamp(9px, 0.8vw, 10px);
          font-weight: 500;
          line-height: 1.1;
          letter-spacing: 0.02em;
          align-self: center;
          margin-inline-end: -3px;
          padding-block-end: 4px;
        }

        & .-num {
          font-family: var(--font-en);
          font-weight: 400;
          font-size: clamp(24px, 3.5vw, 43.5px);
          line-height: 0.82;
          letter-spacing: -0.05em;
        }

        & .-unit {
          font-size: clamp(10px, 1.1vw, 14.5px);
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0.02em;
          padding-block-end: 3px;
        }
      }
    }

    /* --- 5. Ambient（外音取り込み） --- */
    & .Highlights-card.-ambient {
      grid-area: ambient;
      background: #0b1021;

      & .Highlights-card-media > img {
        object-position: center;
      }

      & .Highlights-card-text {
        @media (min-width: 1080px) {
          position: absolute;
          top: 0;
          bottom: auto;
          left: 0;
          right: auto;
          padding: clamp(12px, 1.8vw, 20px) clamp(10px, 1.5vw, 18px) clamp(10px, 1.5vw, 18px);
        }
      }

      & .Highlights-card-title {
        font-size: 10px;
        line-height: 1.4;

        @media (min-width: 1080px) {
          font-size: clamp(11px, 1vw, 16px);
        }
      }
    }

    /* --- 6. Utility（便利機能） --- */
    & .Highlights-card.-utility {
      grid-area: utility;
      background: #010101;

      & .Highlights-card-media {
        & > img {
          /* contain で画像を少し小さく、下部寄せ */
          object-fit: contain;
          object-position: center bottom;
        }

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0) 7.7%,
            rgba(0, 0, 0, 0.8) 86.6%
          );
        }
      }

      & .Highlights-card-text {
        padding: clamp(10px, 1.5vw, 18px);
      }

      & .Highlights-card-title {
        font-size: clamp(11px, 1vw, 16px);
        line-height: 1.4;
      }
    }

    /* --- 7-8. Display / Design（中央タイトル + 中央画像） --- */
    & .Highlights-card.-display,
    & .Highlights-card.-design {
      background: #000;

      & .Highlights-card-media > img {
        object-position: center bottom;
      }

      & .Highlights-card-text {
        padding: clamp(12px, 2.2vw, 30px);
      }

      & .Highlights-card-title {
        font-size: clamp(12px, 1.4vw, 20px);
      }
    }

    & .Highlights-card.-display { grid-area: display; }
    & .Highlights-card.-design { grid-area: design; }

    /* --- 9. Sound（音響体験） --- */
    & .Highlights-card.-sound {
      grid-area: sound;
      background: #2a3641;

      & .Highlights-card-media {
        & > img {
          object-position: right center;
        }
      }

      /* PC でも左上に黒フェードを敷いてタイトルの可読性確保 */
      &::before {
        @media (min-width: 1080px) {
          content: "";
          background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.66) 12%,
            rgba(0, 0, 0, 0.5) 22%,
            rgba(0, 0, 0, 0.36) 32%,
            rgba(0, 0, 0, 0.22) 42%,
            rgba(0, 0, 0, 0.1) 55%,
            rgba(0, 0, 0, 0.03) 70%,
            rgba(0, 0, 0, 0) 85%
          );
        }
      }

      & .Highlights-card-text {
        padding: clamp(12px, 2.2vw, 30px);

        @media (min-width: 1080px) {
          /* PC でも左上配置 + 白文字（グラデ上に乗せる） */
          position: absolute;
          top: 0;
          left: 0;
          right: auto;
          color: #ffffff;
        }
      }

      & .Highlights-card-title {
        font-size: clamp(12px, 1.4vw, 20px);

        @media (min-width: 1080px) {
          max-width: 60%;
        }
      }
    }
  }
}


/* ===================
   キーフレーム
=================== */

/* Lead-scene SP: 横方向マーキー（無限スクロール）
   --marquee-x は JS が 1 セット幅を整数 px で計算して渡す → subpixel ジッタ回避。
   fallback で 33.3333%（旧動作）を持たせる。compositor thread のみで完結 = 軽量 */
@keyframes leadSceneMarqueeSP {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-x, 33.3333%)), 0, 0); }
}

/* 充電ケースのウィンドウ画像 5 枚を順次表示（4s 表示 + 0.5s フェード）
   5 枚で 1 周期 = 20s。各画像の animation-delay を 4s ずつズラして順送り */
@keyframes liberty5proWindowFade {
  0%    { opacity: 0; }
  2.5%  { opacity: 1; }
  20%   { opacity: 1; }
  22.5% { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes kvBgZoomOut {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@keyframes kvCopyIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kvFadeIn {
  to {
    opacity: 1;
  }
}

/* Compare-series-banner の矢印 flow（a121d banner-section と同 keyframes） */
@keyframes compareBannerArrowFlow {
  0%   { transform: translateX(0); opacity: 1; }
  40%  { transform: translateX(30px); opacity: 0; }
  41%  { transform: translateX(-30px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes leadSceneIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* ===================
   モーション低減
=================== */
@media (prefers-reduced-motion: reduce) {
  .page-soundcore-liberty-5-pro-series *,
  .page-soundcore-liberty-5-pro-series *::before,
  .page-soundcore-liberty-5-pro-series *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .page-soundcore-liberty-5-pro-series .Lead-scene-track {
    transform: none !important;
  }
}
/* =====================================================
   Soundcore Liberty 5 Pro Series LP - Feature セクション
   - 機能訴求（NC / 通話）
   - 固定サイドバー + カウンター切替
   - 本体 CSS と並行編集される可能性があるため別ファイルに分離
===================================================== */

.page-soundcore-liberty-5-pro-series {
  & .Feature {
    --feature-dir: 1;
    --feature-bg: #0e1a25;
    --feature-side-w-sp: 88px;
    /* サイドバー幅を画面幅に連動（min / vw / max のクランプ）
       → 画面を狭めてもサイドバー:コンテンツの比率がある程度保たれる */
    --feature-side-w-pc: clamp(140px, 14vw, 220px);
    --feature-side-w-wide: clamp(160px, 15vw, 260px);
  
    position: relative;
    background: var(--feature-bg);
    color: var(--color-text);
    overflow: clip;
    isolation: isolate;
    transition: background-color 0.55s ease;
  }
  
  /* 章番号で背景色を切替（JS で is-airec-bg / is-dark を toggle） */
  & .Feature.is-airec-bg {
    --feature-bg: #2C313D;
  }

  & .Feature.is-dark {
    --feature-bg: #000000;
  }

  & .Feature.is-utility-bg {
    --feature-bg: #777f84;
  }

  /* 特徴セクション全体の sup（うわつき文字）位置を統一
     vertical-align: super はブラウザ既定で上にずれすぎるため、
     baseline + position: relative + top: -0.4em で見た目を揃える */
  & .Feature sup {
    position: relative;

  }

  & .Feature-container {
    --feature-gap: 24px;
    /* SP は container 自体を 100%（親 .Feature の全幅）にして、子要素が必要に応じて全幅表現を活用可能。
       100vw だと縦スクロールバー幅分はみ出して右が切れるので 100% を使う。
       通常のテキスト/コンテンツは Feature-chapters の padding-inline で gutter を確保。
       full-bleed したい子は `is-bleed-sp` クラスで打ち消せる */
    position: relative;
    width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;

    @media (min-width: 1080px) {
      --feature-gap: 60px;
      width: min(92vw, 1600px);
      grid-template-columns: var(--feature-side-w-pc) 1fr;
      column-gap: var(--feature-gap);
    }

    @media (min-width: 1200px) {
      --feature-gap: 30px;
      grid-template-columns: var(--feature-side-w-wide) 1fr;
    }
    @media (min-width: 1400px) {
      --feature-gap: 80px;
      grid-template-columns: var(--feature-side-w-wide) 1fr;
    }
  }
  
  /* ---------- 固定サイドバー（DOM 1 個 / カウンター切替） ----------
     SP: 左上 fixed（Feature セクション内にいる間だけ JS で .is-visible 付与）
     PC: 既存の grid サイドバー（sticky） */
  & .Feature-side {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    /* SP: 全幅でベタ背景。色は章背景 (--feature-bg) と連動 */
    width: 100%;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 章切替の背景色変化に追従 */
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      background-color 0.55s ease;
    background-color: var(--feature-bg);
    overflow: visible;
    /* ヘッダー下端に薄い区切り線（白 12% 透過の hairline） */
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    /* 文字の可読性確保（透明ヘッダー時、写真上で文字が浮かぶように軽い影） */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);

    &.is-visible {
      opacity: 1;
      visibility: visible;
    }

    @media (min-width: 1080px) {
      /* PC: 既存の grid サイドバー配置（背景・下線・影は不要） */
      position: relative;
      top: auto;
      left: auto;
      width: auto;
      grid-column: 1;
      z-index: 5;
      opacity: 1;
      visibility: visible;
      transition: none;
      background-color: transparent;
      border-bottom: none;
      text-shadow: none;
    }
  }

  /* 写真がヘッダー位置に被っている時のみ背景透明（JS が is-on-photo を付与）
     下線は常時維持 */
  & .Feature-side.is-on-photo {
    @media (max-width: 1079.98px) {
      background-color: transparent;
    }
  }

  & .Feature-side-inner {
      /* SP: コンテンツ幅（90vw）に合わせて中央寄せ。番号 + タイトル横並び。
         カウンターは中央コンテンツより少し左にオフセット */
      position: static;
      width: 90vw;
      margin-inline: auto;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 12px;
      /* 下部余白はタイトな値に（数字 line-box の余白で十分なので padding は小さく） */
      padding-block: 8px 0;
      transform: translateX(-10px);
      pointer-events: none;

      @media (min-width: 1080px) {
        position: sticky;
        top: 20px;
        width: auto;
        margin-inline: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(14px, 2.2vw, 28px);
        padding-block: clamp(25px, 4vw, 40px);
        transform: none;
      }
    }

    /* ---------- 章番号（01 / 02 / ...） ---------- */
    & .Feature-side-num {
      position: relative;
      flex: 0 0 auto;
      font-family: var(--font-en);
      /* Mont @font-face は 300 / 400 / 600 のみ登録。500 を使うと
         ブラウザが合成 or フォールバックを起こすので登録済み weight に揃える */
      font-weight: 400;
      /* SP: 72px、PC: clamp 48〜120px */
      font-size: 72px;
      line-height: 1;
      letter-spacing: -0.05em;
      height: 1em;
      color: var(--color-text);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;

      @media (min-width: 1080px) {
        font-weight: 300;
        font-size: clamp(48px, 10vw, 120px);
      }
    }

    & .Feature-side-num-prefix {
      display: inline;
    }

    & .Feature-side-num-tail {
      position: relative;
      display: inline-block;
      vertical-align: top;
      height: 1em;
      line-height: 1;
      overflow: hidden;
      /* inline-block 境界では letter-spacing が効かないので、ネガティブ margin で詰める */
      margin-inline-start: -0.18em;
    }

    & .Feature-side-num-sizer {
      display: inline-block;
      visibility: hidden;
      pointer-events: none;
      /* tail の幅を決めるだけのダミー要素。確実に非表示 */
      opacity: 0;
      color: transparent;
    }

    & .Feature-side-num-curr,
    & .Feature-side-num-next {
      position: absolute;
      inset: 0;
      display: block;
      will-change: transform, opacity;
      /* transition は .is-switching の時だけ効かせる（戻り時の逆アニメを防ぐ） */
    }

    & .Feature-side-num-curr {
      opacity: 1;
      transform: translateY(0);
    }

    & .Feature-side-num-next {
      opacity: 0;
      transform: translateY(calc(var(--feature-dir, 1) * 100%));
    }

    /* ---------- 章タイトル ---------- */
    & .Feature-side-title {
      position: relative;
      /* SP: 横並び flex の残りスペース確保 + 数字の縦中央 */
      flex: 1 1 auto;
      min-width: 0;
      align-self: center;
      font-family: var(--font-jp);
      font-weight: 500;
      /* SP: 14px、PC: 12〜21px の clamp */
      font-size: 14px;
      line-height: 1.35;
      color: #ffffff;
      overflow: hidden;
      min-height: calc(2 * 1.45em);
      letter-spacing: 0.02em;
      margin-top: 10px;

      @media (min-width: 1080px) {
        /* PC: 既存の column 配置に戻す（flex 1 / align-self 不要） */
        flex: 0 0 auto;
        align-self: auto;
        width: 100%;
        font-weight: 300;
        font-size: clamp(12px, 2.5vw, 20px);
        line-height: 1.6;
        min-height: calc(2 * 1.6em);
      }
      @media (min-width: 1200px) {

        font-size: clamp(12px, 2.3vw, 20px);
      }
      @media (min-width: 1300px) {
        font-size: clamp(12px, 2.5vw, 21px);
      }
    }

    & .Feature-side-title-curr,
    & .Feature-side-title-next {
      position: absolute;
      inset: 0;
      will-change: transform, opacity;
      /* SP のみ：タイトルテキストを 100% 高さの中央に縦揃え */
      display: flex;
      flex-direction: column;
      justify-content: center;

      @media (min-width: 1080px) {
        /* PC: 既存の block 表示に戻す（縦中央揃え不要） */
        display: block;
      }
      /* transition は .is-switching の時だけ効かせる（戻り時の逆アニメを防ぐ） */
    }

    & .Feature-side-title-curr {
      opacity: 1;
      transform: translateY(0);
    }

    & .Feature-side-title-next {
      opacity: 0;
      transform: translateY(calc(var(--feature-dir, 1) * 100%));
    }

    & .Feature-side-title-l1,
    & .Feature-side-title-l2 {
      margin: 0;
      color: #ffffff;
    }

    /* ---------- state: 章切替アニメーション ---------- */
    & .Feature-side.is-switching {
      & .Feature-side-num-curr,
      & .Feature-side-num-next,
      & .Feature-side-title-curr,
      & .Feature-side-title-next {
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s linear;
      }

      & .Feature-side-num-curr,
      & .Feature-side-title-curr {
        opacity: 0;
        transform: translateY(calc(var(--feature-dir, 1) * -100%));
      }

      & .Feature-side-num-next,
      & .Feature-side-title-next {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ---------- 04 章 active 時のみ表示する追加要素（バッジ + アンカーメニュー）
       PC では常に display: flex を維持し、opacity / transform で自然にフェードイン・アウト */
    & .Feature-side-extra {
      display: none;
      flex-direction: column;
      gap: 24px;
      pointer-events: auto;

      @media (min-width: 1080px) {
        display: flex;
        gap: 40px;
        /* 初期状態：非表示（透明 + 少し下にずれて待機）— 退場は素早く（ease-in） */
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition:
          opacity 0.18s cubic-bezier(0.4, 0, 1, 1),
          transform 0.2s cubic-bezier(0.4, 0, 1, 1);
      }
    }

    & .Feature-side.is-airec .Feature-side-extra {
      @media (min-width: 1080px) {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        /* 表示時は少し遅延を付けて、退場アニメと重ならないように */
        transition:
          opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
          transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
      }
    }

    & .Feature-side-extra-badge {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      width: max-content;
      max-width: 100%;
    }

    & .Feature-side-extra-badge-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    & .Feature-side-extra-badge-name {
      margin: 0;
      font-family: var(--font-en);
      font-weight: 600;
      font-size: 11.5px;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: #ffffff;

      @media (min-width: 1080px) {
        font-size: 12.5px;
      }
    }

    & .Feature-side-extra-badge-label {
      margin: 0;
      font-family: var(--font-jp);
      font-weight: 550;
      font-size: 11px;
      line-height: 1.5;
      color: #ffffff;
      letter-spacing: 0.02em;
    }

    & .Feature-side-extra-badge-img {
      width: 26px;
      height: 34px;
      object-fit: contain;
      flex-shrink: 0;

      @media (min-width: 1080px) {
        width: 75px;
        height: 40px;
      }
    }

    & .Feature-side-extra-menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;

      @media (min-width: 1080px) {
        gap: 18px;
      }

      & li {
        position: relative;
      }

      & a {
        position: relative;
        display: inline-block;
        font-family: var(--font-jp);
        font-weight: 300;
        font-size: 14px;
        line-height: 1.8;
        color: #ffffff;
        text-decoration: none;
        letter-spacing: 0.03em;
        padding-block-end: 4px;
        transition: opacity 0.2s ease;

        @media (min-width: 1080px) {
          font-size: 16px;
        }

        &:hover {
          opacity: 0.7;
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 5px;
          height: 1px;
          width: 0;
          background: #ffffff;
          transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
      }

      & li.is-active a::after {
        width: 100%;
      }
    }
  }
  
  /* ---------- 各 chapter ----------
       章間スペースは各 chapter（.-anc / .-call / .-sound …）に個別指定。
       flex gap は items 間に強制スペースを入れ、負 margin で打ち消せないため、
       gap は使わず各 chapter の margin-block-end で章間スペースを作る。
       これで .-disp の負 margin-top が確実に効き、05 章に被さる挙動になる。
   */
  & .Feature-chapters {
    /* SP は親 grid が 1fr 単独カラムなので 1 列目に配置（サイドバーは fixed で flow にいない）
       PC は親が「サイドバー + 1fr」の 2 列構成なので、コンテンツは 2 列目に */
    grid-column: 1;
    min-width: 0;  /* 内部の 100vw 要素などによる grid トラックの押し広げを防ぐ */
    display: flex;
    flex-direction: column;
    /* SP: ヘッダー直下の余白を抑える（章ごとの padding と合わせて適切な間隔に）
       container が 100vw のため、ここで左右 gutter を持たせて通常コンテンツの読みやすさを確保。
       full-bleed したい子要素は margin-inline: calc(-1 * var(--gutter)) で打ち消し可能 */
    padding-block: 24px;
    padding-inline: var(--gutter);

    @media (min-width: 1080px) {
      grid-column: 2;
      padding-block: clamp(50px, 8vw, 100px);
      padding-inline: 0; /* PC は container 自体が中央寄せ余白を持つので不要 */
    }
  }

  /* ---------- 全幅ユーティリティ ----------
     Feature-chapters の SP padding-inline を打ち消して 100vw 表示。
     ヒーロー画像 / 動画 / 全幅カット撮りに付与する。PC では gutter なしなので何もしない */
  & .is-bleed-sp {
    margin-inline: calc(-1 * var(--gutter));

    @media (min-width: 1080px) {
      margin-inline: 0;
    }
  }

  /* SP で順序を先頭に持っていきたい要素用（章コンテナを flex column と想定） */
  & .is-first-sp {
    order: -1;

    @media (min-width: 1080px) {
      order: 0;
    }
  }

  /* ---------- 各章冒頭のカウンター + タイトル（廃止）
     左上 fixed サイドバー方式に戻したため、章ごとに挿入する head は使わない。
     JS が出力しなければ無効化されるが、念のため常に非表示 */
  & .Feature-chapter-head {
    display: none !important;

    @media (max-width: 1079.98px) {
      display: none !important;
      flex-direction: row;
      align-items: flex-start;
      gap: 28px;
      padding-block-start: 24px;
      margin-block-end: 32px;
    }
  }

  & .Feature-chapter-head-num {
    flex: 0 0 auto;
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 100px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-flex;
    align-items: flex-start;
  }

  & .Feature-chapter-head-num .-prefix {
    display: inline-block;
  }

  /* 末尾の桁：3D 半回転 flip のコンテナ（perspective を親に持たせる） */
  & .Feature-chapter-head-num .-tail {
    display: inline-block;
    vertical-align: top;
    margin-inline-start: 0.06em;
    perspective: 500px;
    transform-style: preserve-3d;
  }

  & .Feature-chapter-head-num .-flip {
    display: inline-block;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform;
  }

  /* is-inview で末尾の数字が X 軸を 360° 回転（途中で裏返って戻る）= 更新風 flip */
  @keyframes featureChapterFlip {
    0%   { transform: rotateX(0); }
    100% { transform: rotateX(-360deg); }
  }

  & .Feature-chapter-head.is-inview .Feature-chapter-head-num .-flip {
    animation: featureChapterFlip 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.1s 1;
  }

  & .Feature-chapter-head-title {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* 各行が下から上がってくるので親で overflow hidden */
    overflow: hidden;
  }

  /* 各行が下から上がってくる動き（PC サイドバー切替アニメと同パターン）
     transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s linear */
  & .Feature-chapter-head-title p {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(100%);
    transition:
      transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s linear;
  }

  /* line1 → line2 の順にずらして登場（stagger）。数字 flip 後に出始める */
  & .Feature-chapter-head-title p:nth-child(1) {
    transition-delay: 0.5s;
  }

  & .Feature-chapter-head-title p:nth-child(2) {
    transition-delay: 0.62s;
  }

  & .Feature-chapter-head.is-inview .Feature-chapter-head-title p {
    opacity: 1;
    transform: translateY(0);
  }

  & .Feature-chapter {
    scroll-margin-top: 110px;
    position: relative;
    min-width: 0;  /* flex item の min-content を auto → 0 にして親 grid を押し広げない */

    /* ===== セクションごとの padding-top（個別調整可） =====
       不要なセクションは値を 0 に。SP base + @media (min-width: 1080px) で PC 値を指定 */

    /* 01 NC（最初の章。Feature-anc-noise が外に伸びるため余白確保） */
    &.-anc {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 70px;
      }
    }

    /* 02 通話性能 */
    &.-call {
      /* SP: 子要素の order 切替を有効にするため flex column。
         背景色は JS が .Feature.is-dark を toggle して #000 に切替（PC/SP 共通） */
      display: flex;
      flex-direction: column;
      padding-block-start: 40px;

      @media (min-width: 1080px) {
        padding-block-start: 0px;
      }
    }

    /* 03 音響体験 */
    &.-sound {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 0px;
      }
    }

    /* 04 AI ボイスレコーダー */
    &.-airec {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 160px;
      }
    }

    /* 05 自然な外音取り込み */
    &.-amb {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 160px;
      }
    }

    /* 06 ディスプレイ搭載 */
    &.-disp {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 160px;
      }
    }

    /* 07 デザイン性 */
    &.-design {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 0px;
      }
    }

    /* 08 最大28時間再生 */
    &.-battery {
      padding-block-start: 40px;
      @media (min-width: 1080px) {
        padding-block-start: 160px;
      }
    }
  }
  
  /* ---------- 01 NC ---------- */

  /* 01 章内の data-inview 要素は「下からふわっと」reveal（テンポ早め 0.7s） */
  & .Feature-chapter.-anc [data-inview] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  & .Feature-chapter.-anc [data-inview].is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  & .Feature-anc-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 50px);
    align-items: start;
  
    @media (min-width: 1080px) {
      grid-template-columns: minmax(220px, 1fr) minmax(0, 1.8fr) auto;
      gap: clamp(20px, 3vw, 40px);
    }
  }
  
  & .Feature-anc-heading {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-self: start;
  
    @media (min-width: 1080px) {
      gap: 40px;
      padding-bottom:50px;
    }
  }
  
  & .Feature-anc-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }
  
  & .Feature-anc-lead {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }
  
  & .Feature-anc-lead sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }
  
  & .Feature-anc-visual {
    position: relative;
    aspect-ratio: 460 / 400;
    min-height: 240px;
    overflow: visible;
    /* スクロールイン時に少し下からフェードアップ
       JS が子要素（earbuds / back / badge）に transform を当てるので、
       親 visual 側の transform と合成される（干渉しない） */
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1s cubic-bezier(0.22, 1, 0.36, 1);

    &.is-inview {
      opacity: 1;
      transform: translateY(0);
    }

    @media (min-width: 1080px) {
      min-height: 400px;
    }
  }
  
  /* メイン画像上部のノイズブラー（白寄りアンビエント光 + 粒状感）
     visual 枠外まで広げることで blur のエッジが矩形の中で切れて
     「切れ目」になるのを防ぐ。多段ストップ + ease-out で滑らかに減衰 */
  /* SVG 画像で楕円グロウを表示（filter: blur 不使用、iOS Safari でもカクツキ・キレなし）
     周辺は radial mask でフェード → 矩形エッジを消す（GPU 合成のみで軽量） */
  & .Feature-anc-glow {
    position: absolute;
    top: -10%;
    left: 18%;
    width: 95%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    user-select: none;
    -webkit-mask-image: radial-gradient(
      ellipse 55% 55% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.97) 30%,
      rgba(0, 0, 0, 0.86) 50%,
      rgba(0, 0, 0, 0.62) 68%,
      rgba(0, 0, 0, 0.32) 82%,
      rgba(0, 0, 0, 0.1) 92%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 55% 55% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.97) 30%,
      rgba(0, 0, 0, 0.86) 50%,
      rgba(0, 0, 0, 0.62) 68%,
      rgba(0, 0, 0, 0.32) 82%,
      rgba(0, 0, 0, 0.1) 92%,
      transparent 100%
    );
  }
  
  /* 後ろのイヤホン：top:0 left:0 アンカー（画像自体に余白を持たせて理想の重なりに） */
  & .Feature-anc-back {
    position: absolute;
    top: 11%;
    left: -7%;
    width: 100%;
    height: auto;
    z-index: 2;
    will-change: transform;
  }

  /* メインイヤホン：top:0 left:-5% アンカー（一回り小さく） */
  & .Feature-anc-earbuds {
    position: absolute;
    top: 10%;
    left: 0%;
    width: 92%;
    height: auto;
    z-index: 3;
    will-change: transform;
  }
  
  /* バッジ（Anker Thus + ULTRA NOISE CANCELING 4.0） */
  & .Feature-anc-badge {
    position: absolute;
    top: 8%;
    right: 4%;
    width: clamp(60px, 8vw, 110px);
    height: auto;
    z-index: 4;
    will-change: transform;
  }
  
  & .Feature-anc-metric {
    /* inline-flex column で「約2倍」幅にコンテナを縮め、その左端に上部ラベルを揃える */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-inline-start: auto;
    align-self: end;
    color: #fff;

    @media (min-width: 1080px) {
      padding-block-end: 0;
    }
  }

  & .Feature-anc-metric-label {
    margin: 0 0 30px;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: clamp(11px, 1.4vw, 12px);
    letter-spacing: 0.04em;
    color: #fff;
    text-align: start;
    @media (min-width: 1080px) {
      margin: 0 0 40px;
    }
  }

  & .Feature-anc-metric-value {
    margin: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    line-height: 1;
  }

  /* 「約」: 「2」の左上に寄せる。Light + 控えめサイズ */
  & .Feature-anc-metric-prefix {
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: clamp(18px, 2.6vw, 30px);
    color: #fff;
    align-self: flex-start;
    margin-block-start: -0.8em;
    margin-inline-end: 0;
    z-index: 1;
  }

  /* 「2」: 巨大数字。Mont For Anker の Light。em-square の上下余白を詰めるため line-height を短く */
  & .Feature-anc-metric-num {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: clamp(150px, 18vw, 200px);
    color: #fff;
    letter-spacing: -0.05em;
    line-height: 0.52;
  }

  /* 「倍」: 「2」の右下に視覚的に揃える */
  & .Feature-anc-metric-unit {
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: clamp(28px, 5vw, 57px);
    color: #fff;
    align-self: flex-end;
    line-height: 1;
    margin-left: 5px;
    margin-block-end: 0;
  }
  
  /* テキスト → グラフの縦並び（右カラム内で stack） */
  & .Feature-anc-bottom {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 30px);
    margin-block-start: clamp(40px, 6vw, 60px);
  
    @media (min-width: 1080px) {
      margin-inline-start: auto;
      max-width: 465px;
    }
  }
  
  & .Feature-anc-bottom-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-left: auto;
    @media (min-width: 1080px) {
      width: 450px;
    }
  }
  
  & .Feature-anc-body {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: clamp(13px, 2vw, 15px);
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
  }
  
  & .Feature-anc-note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: var(--color-text);
    letter-spacing: 0.02em;
  }
  
  & .Feature-anc-graph {
    margin: 0;
    aspect-ratio: 466 / 222;
    overflow: hidden;
  }
  
  & .Feature-anc-graph img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* ---------- 共通リンク ---------- */
  & .Feature-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: opacity 0.2s ease;
    width: max-content;
  }
  
  & .Feature-link:hover {
    opacity: 0.7;
  }
  
  & .Feature-link-arrow {
    width: 5px;
    height: 10px;
    flex-shrink: 0;
  }
  
  & .Feature-link.-underline {
    padding-block-end: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  
  & .Feature-link.-pill {
    background: #fff;
    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    padding: 12px 15px;
    @media (min-width: 1080px) {
      padding: 12px 20px;
          }
  }
  
  & .Feature-link.-pill .Feature-link-arrow path {
    stroke: #000;
  }
  
  /* ---------- 02 通話 ---------- */
  & .Feature-call-heading {
    display: flex;
    /* SP: 横並び（ギネスバッジ + テキストを左右に） */
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 50px;

    @media (min-width: 1080px) {
margin-top: 0;
      align-items: stretch;
      gap: 60px;
      max-width: 520px;
    }
  }
  
  & .Feature-call-heading-text {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: left;

    @media (min-width: 1080px) {
      gap: 40px;
    }
  }
  
  & .Feature-call-guinness {
    width: clamp(50px, 6vw, 75px);
    height: auto;
  }
  
  & .Feature-call-title {
    margin: 0;
    padding-right: 50px;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 22px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
      padding-right: 0;
    }
  }
  
  & .Feature-call-title .-mark {
    font-size: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.5em;
    margin-inline-start: 0.1em;
    opacity: 0.7;
  }
  
  & .Feature-call-lead {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }
  
  & .Feature-call-mic {
    position: relative;
    margin-block-start: clamp(40px, 6vw, 60px);
    background: #000;
    border-radius: 0;

    min-height: 280px;
  
    @media (min-width: 1080px) {
      min-height: 566px;
      overflow: hidden;
    }
  }
  
  & .Feature-call-mic-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  & .Feature-call-mic-badges {
    position: absolute;
    right:15px;
    bottom: -60px;
    display: flex;
    gap: 5px;
    @media (min-width: 1080px) {
      top: 0;
      bottom: auto;
      right: clamp(12px, 2vw, 30px);
      padding: 12px 15px 19px;}
    
  }
  
  & .Feature-call-mic-badge {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    /* SP: メイン画像にかかりすぎないよう小さめに */
    padding:7px 0px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--color-text);
    text-align: center;
width: 85px;
height: 85px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);

    @media (min-width: 1080px) {
      padding: 15px 15px 12px;
      gap: 0px;
      width: auto;
      height: auto;
      min-width: 90px;
    }

    &:last-child{
    
      img{
        position: relative;
        top: -2px;
        @media (min-width: 1080px) {
          top: -8px;
        }

      }
    }
  }

  & .Feature-call-mic-badge img {
    width: 22px;
    height: 22px;
    /* アイコンを白に強制（元の色を無視） */
    filter: brightness(0) invert(1);

    @media (min-width: 1080px) {
      width: 40px;
      height: 40px;
    }
  }

  & .Feature-call-mic-badge span {
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.2;

    @media (min-width: 1080px) {
      font-size: clamp(10px, 1.2vw, 12px);
    }
  }

  & .Feature-call-mic-badge strong {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 18px;
    font-style: normal;
    margin-inline-end: 2px;

    @media (min-width: 1080px) {
      font-size: clamp(24px, 3.5vw, 34px);
    }
  }
  
  & .Feature-call-persons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-block-start: clamp(30px, 4vw, 50px);
    aspect-ratio: 1005 / 300;
    border-radius: 0;
  }

  /* wrapper：overflow: hidden だけ。出現アニメなし */
  & .Feature-call-persons-item {
    position: relative;
    overflow: hidden;
  }

  /* img：scale バッファ + translateY var() を JS で lerp 更新（余韻ある追従）
     SP は aspect-ratio 1005/300 で高さが小さいため、scale を強めにしてバッファを確保
     → translateY ±30px でも上下端が見切れない */
  & .Feature-call-persons-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.3) translateY(var(--parallax-y, 0px));
    will-change: transform;

    @media (min-width: 1080px) {
      /* PC は要素高さが大きいので元の 1.16 でバッファ十分 */
      transform: scale(1.16) translateY(var(--parallax-y, 0px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    & .Feature-call-persons-item img {
      transform: scale(1.3);

      @media (min-width: 1080px) {
        transform: scale(1.16);
      }
    }
  }
  
  & .Feature-call-notes {
    margin: clamp(20px, 3vw, 30px) 0 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: var(--color-text);
    letter-spacing: 0.02em;
    text-align: left;
  
  }
  
  /* ---------- Thus 紹介ブロック ---------- */
  & .Feature-thus {
    margin-block-start: clamp(80px, 12vw, 160px);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 5vw, 50px);
  }
  
  & .Feature-thus-eyebrow {
    position: relative;
    margin: 0;
    padding-block-end: 10px;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: clamp(13px, 1.8vw, 16.5px);
    line-height: 1.5;
    color: var(--color-text-sub);
    width: max-content;
    max-width: 100%;
  
  }
  
  /* 下線：スクロール量に連動して 0 → 1 に伸びる（JS が --underline-progress を駆動）
     transition は外す：rAF 更新と二重補間になるとカクつくため、変数を直接 transform に流す */
  & .Feature-thus-eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.7px;
    opacity: .6;
    background: var(--color-text);
    transform: scaleX(var(--underline-progress, 0));
    transform-origin: left center;
    will-change: transform;
  }
  
  & .Feature-thus-body {
    display: grid;
    grid-template-columns: 1fr;
    gap:0;
    padding-block: 0 60px;

    @media (min-width: 1080px) {
      /* main は auto（残りを取る）、右カラム 380px 上限で固定的に */
      grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
      column-gap: clamp(40px, 5vw, 100px);
      gap: clamp(40px, 6vw, 80px);
      align-items: start;
      padding-block: 0 100px;
    }
  }

  & .Feature-thus-main {
    position: relative;  /* Thus-hero の絶対配置の基準 */
    /* 画像が右下に乗るので bottom 領域を確保 */
    padding-block-end: clamp(270px, 28vw, 380px);
    isolation: isolate;
  }

  /* Feature-thus-main 背景の SVG 楕円グロウ装飾（iOS Safari セーフ、filter: blur 不使用）
     周辺は radial mask でフェード → 矩形エッジを消す（GPU 合成のみで軽量） */
  & .Feature-thus-ellipse {
    position: absolute;
    bottom: -20%;
    left: 0%;
    width: min(1100px, 100%);
    height: auto;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    -webkit-mask-image: radial-gradient(
      ellipse 55% 55% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.97) 30%,
      rgba(0, 0, 0, 0.86) 50%,
      rgba(0, 0, 0, 0.62) 68%,
      rgba(0, 0, 0, 0.32) 82%,
      rgba(0, 0, 0, 0.1) 92%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 55% 55% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.97) 30%,
      rgba(0, 0, 0, 0.86) 50%,
      rgba(0, 0, 0, 0.62) 68%,
      rgba(0, 0, 0, 0.32) 82%,
      rgba(0, 0, 0, 0.1) 92%,
      transparent 100%
    );
  }

  /* テキスト群コンテナ：読みやすい幅にキャップ */
  & .Feature-thus-main-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 日本語の本文として読みやすい幅（最大 400px、約 22 文字幅） */
    max-width: clamp(300px, 32vw, 400px);
    @media (min-width: 1080px) {
      gap: 40px;
    }

  }

  /* Thus チップ画像：main 内の右下に絶対配置、viewport に応じてサイズ可変 */
  & .Feature-thus-hero {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    /* 狭い viewport では小さく、広い viewport では 360px まで */
    max-width: clamp(220px, 28vw, 360px);
    isolation: isolate;
    pointer-events: none;
  }

  & .Feature-thus-hero-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    margin-inline: auto;
    /* 画面内に入ったらふわっとフェードイン（.Feature-thus-hero.is-inview で発火） */
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
    will-change: opacity, transform;
  }

  & .Feature-thus-hero.is-inview .Feature-thus-hero-img {
    opacity: 1;
    transform: translateY(0);
  }

  /* 画像の左下に集中するクラウドブラー（製品近く・コンパクトに）
     inset で全方向に少しはみ出させて、上部が切れないようにする */
  & .Feature-thus-noise {
    position: absolute;
    inset: -15% 15% -15% -15%;  /* 上下左 -15% / 右 +15%（右側は画像側で隠す） */
    width: auto;
    height: auto;
    pointer-events: none;
    z-index: 1;
    /* radial 中心も画像内側寄りに（at 30% 70% → 35% 65%） */
    background: radial-gradient(
      ellipse 50% 45% at 35% 65%,
      rgba(215, 230, 245, 0.5) 0%,
      rgba(210, 226, 242, 0.42) 10%,
      rgba(202, 218, 235, 0.32) 22%,
      rgba(192, 210, 228, 0.22) 35%,
      rgba(180, 200, 220, 0.14) 48%,
      rgba(170, 192, 215, 0.08) 62%,
      rgba(160, 185, 210, 0.03) 78%,
      transparent 100%
    );
    /* blur を弱めて製品近くにとどめる */
    filter: blur(28px);
    /* 画像と同期してフェードイン */
    opacity: 0;
    transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
    display: none;
  }

  & .Feature-thus-hero.is-inview .Feature-thus-noise {
    opacity: 1;
  }

  /* ノイズテクスチャ重ね（薄めに） */
  & .Feature-thus-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.95  0 0 0 0 1  0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.3;
    mix-blend-mode: screen;
    /* mask も左下に */
    mask-image: radial-gradient(
      ellipse 55% 50% at 35% 65%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.95) 15%,
      rgba(0, 0, 0, 0.78) 32%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.28) 70%,
      rgba(0, 0, 0, 0.1) 85%,
      transparent 100%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 55% 50% at 35% 65%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.95) 15%,
      rgba(0, 0, 0, 0.78) 32%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.28) 70%,
      rgba(0, 0, 0, 0.1) 85%,
      transparent 100%
    );
  }

  /* kicker と name を 1 セット（タイトル群）として近接配置
     kicker は name の上に置かれる小さなラベル */
  & .Feature-thus-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;

    @media (min-width: 1080px) {
      gap: 6px;
    }
  }

  & .Feature-thus-kicker {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: clamp(20px, 4vw, 30px);
    line-height: 1.5;
    color: var(--color-text-sub);
  }

  & .Feature-thus-name {
    margin: 0;
    font-family: var(--font-en);
    font-weight: 400;
    font-size: clamp(24px, 5vw, 33px);
    line-height: 1;
    color: var(--color-text-sub);
  }

  & .Feature-thus-desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: clamp(13px, 2vw, 15px);
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
  }
  
  & .Feature-thus-side {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 5vw, 40px);
  }
  
  & .Feature-thus-perf {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
    padding-block-end: clamp(20px, 3vw, 30px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  & .Feature-thus-perf-icon,
  & .Feature-thus-cloud-icon {
    width: 36px;
    height: 36px;
  }
  
  & .Feature-thus-perf-text {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
    color: var(--color-text-sub);
  }
  
  & .Feature-thus-perf-text sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }

  & .Feature-thus-perf-grid {
    /* SP: 4 列横並び 1 行 / PC: 2 列 2 行 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    position: relative;

    @media (min-width: 1080px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  & .Feature-thus-perf-grid li {
    position: relative;
    /* SP/PC ともに img + テキスト 横並び */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* SP: 4 列に詰めるので gap 縮小・padding 縦多め */
    gap: 6px;
    padding: 16px 10px 20px;

    @media (min-width: 1080px) {
      gap: 15px;
      flex-direction: row;
      padding: 15px 18px 20px;
    }

    &:first-child{
      padding-left: 0;
      @media (min-width: 1080px) {
        padding-left: 18px;
      }
    }


    &:last-child{
      padding-right: 0;
      @media (min-width: 1080px) {
        padding-right: 18px;
      }
    }
  }

  /* SP: li 間に縦線（2〜4 番目の左側） */
  & .Feature-thus-perf-grid li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);

    @media (min-width: 1080px) {
      display: none;
    }
  }

  & .Feature-thus-perf-grid li img {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-block-start: 2px;
  }

  & .Feature-thus-perf-grid li p {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    /* SP: 4 列に詰めるので小さめ */
    font-size: 10px;
    line-height: 1.5;
    color: var(--color-text);
    letter-spacing: -0.02em;

    @media (min-width: 1080px) {
      font-size: 12px;
    }
  }

  /* ::before（中央縦線）と ::after（中央横線）は PC の 2x2 用 → SP では非表示 */
  & .Feature-thus-perf-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    display: none;

    @media (min-width: 1080px) {
      display: block;
    }
  }

  & .Feature-thus-perf-grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    display: none;

    @media (min-width: 1080px) {
      display: block;
    }
  }
  
  & .Feature-thus-perf-note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: var(--color-text);
    letter-spacing: 0.02em;
  }
  
  & .Feature-thus-cloud {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
  }
  
  & .Feature-thus-cloud-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
    color: var(--color-text-sub);
  }

  & .Feature-thus-cloud-desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
  }
  
  /* ===================
     03 章 共通：sound タイポ
  =================== */
  & .Feature-sound-title {
    margin: 0 0 35px;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }
  
  & .Feature-sound-body {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.08em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }
  
  & .Feature-sound-note {
    margin: 12px 0 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: #ffffff;
    letter-spacing: 0.02em;
  }
  
  /* ---------- Block A：ドライバー（sticky 画像 + 2 テキスト） ---------- */
  & .Feature-sound-driver {
    /* SP: block で sticky を効かせる（grid item に position: sticky は環境差があるため）
       PC: grid 2 列（画像 2 : 文字 1） */
    display: block;
    margin-block-start: clamp(40px, 6vw, 80px);

    @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      /* grid row に明示高さを与えて、内部の sticky 要素 (90vh) に滞在範囲を作る
         row 220vh - sticky 95vh = 125vh の滞在距離（linger / peel / linger 各フェーズに余裕） */
      grid-template-rows: minmax(220vh, auto);
      gap: clamp(30px, 4vw, 60px);
      align-items: start;
    }
  }

  & .Feature-sound-driver-media {
    /* SP/PC 共通: 全幅 sticky で viewport 上端に画像を固定 */
    position: sticky;
    top: 5vh;
    width: 100%;
    height: 50vh;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    /* JS が以下を書き込む（fallback で初期表示は Driver のみ）
         --driver-clip: 0〜100%   (Driver を下からカットする割合)
         --driver-y:    0〜-12%   (Driver の上方向 translate = 捲り感)
         --driver-op:   1〜0      (Label 用の不透明度)
         --dolby-op:    0〜1      (Dolby ロゴ用の不透明度) */

    @media (min-width: 1080px) {
      height: 90vh;
    }
  }

  & .Feature-sound-driver-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  
  /* Dolby は背面に常時全表示。Driver が下からカットされて消える分だけ露出する */
  & .Feature-sound-driver-img.-dolby {
    z-index: 1;
  }
  
  /* Driver: progress に応じて下からカットされながら、上に巻き上がる（捲り感） */
  & .Feature-sound-driver-img.-driver {
    z-index: 2;
    clip-path: inset(0 0 var(--driver-clip, 0%) 0);
    transform: translateY(var(--driver-y, 0%));
    will-change: clip-path, transform;
  }
  
  & .Feature-sound-driver-dolby-logo {
    position: absolute;
    left: 65%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(140px, 24vw, 290px);
    height: auto;
    opacity: var(--dolby-op, 0);
    filter: drop-shadow(0 0 10px rgba(50, 50, 51, 0.4));
    will-change: opacity;
    @media (min-width: 1080px) {
      left: 50%;
    }
  }

  /* クリアな中高音域メトリック：ドライバー画像の左上にテキスト構造で表示
     「9.2 mm」を上、「ダイナミックドライバー搭載」を下に
     --driver-op に連動。Driver 表示時（後半 0.4〜1.0）で 0→1 にフェードイン */
  & .Feature-sound-clear-metric {
    position: absolute;
    top: clamp(20px, 4vw, 40px);
    /* 写真左端から余白を取って配置 */
    left: clamp(14px, 2vw, 26px);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    color: #fff;
    z-index: 4;
    pointer-events: none;
    opacity: clamp(0, calc((var(--driver-op, 1) - 0.4) / 0.6), 1);
    transform: translateY(
      clamp(-10px, calc(-10px + (var(--driver-op, 1) - 0.4) / 0.6 * 10px), 0px)
    );
    will-change: opacity, transform;


  }

  & .Feature-sound-clear-metric-value {
    margin: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    line-height: 1;
  }

  & .Feature-sound-clear-metric-num {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: clamp(44px, 7vw, 84px);
    letter-spacing: -0.06em;
    line-height: 0.82;
    color: #fff;

    @media (min-width: 1080px) {
      font-size: clamp(44px, 7vw, 84px);
      margin-left: -5px;
    }
  }

  & .Feature-sound-clear-metric-unit {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: clamp(15px, 2vw, 24px);
    align-self: flex-end;
    margin-block-end: clamp(3px, 0.5vw, 6px);
    color: #fff;
  }

  & .Feature-sound-clear-metric-label {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: clamp(10px, 1.2vw, 12px);
    letter-spacing: -0.04em;
    color: #fff;
  }

  /* Dolby Atmos ビジュアル：写真の中央〜右側に、スクロール進行に合わせてふわっと表示
     opacity と少しの右スライドで「ふわっ」感を出す（--dolby-op を transition なしで JS が更新）
     --dolby-op が 0.4 を超えてから登場 → 表示タイミングを後半に遅らせる */
  & .Feature-sound-dolby-vis {
    position: absolute;
    top: 50%;
    left: 60%;
    width: clamp(150px, 22vw, 290px);
    height: auto;
    z-index: 4;
    opacity: clamp(0, calc((var(--dolby-op, 0) - 0.4) / 0.6), 1);
    /* 登場が 0.4 で始まるので、進行値の後半で右にスライド */
    transform: translate(
      calc(-50% + clamp(0px, calc((var(--dolby-op, 0) - 0.4) / 0.6 * 16px), 16px)),
      -50%
    );
    pointer-events: none;
    will-change: opacity, transform;
    filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.25));
  }
  
  & .Feature-sound-driver-label {
    position: absolute;
    top: clamp(20px, 4vw, 40px);
    left: clamp(20px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vw, 16px);
    color: #ffffff;
    /* Driver と一緒に巻き上がっていくので、進行に応じてフェード + 上に追随 */
    opacity: var(--driver-op, 1);
    transform: translateY(var(--driver-y, 0%));
    will-change: opacity, transform;
  }
  
  & .Feature-sound-driver-num {
    margin: 0;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: clamp(40px, 8vw, 80px);
    line-height: 1.4;
    letter-spacing: -0.05em;
    display: inline-flex;
    align-items: flex-end;
  }
  
  & .Feature-sound-driver-num .-int {
    letter-spacing: -0.018em;
  }
  
  & .Feature-sound-driver-num .-unit {
    font-size: 0.36em;
    letter-spacing: -0.05em;
    margin-inline-start: 0.05em;
    margin-block-end: 0.45em;
  }
  
  & .Feature-sound-driver-cap {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: clamp(10px, 1.4vw, 12px);
    letter-spacing: 0.04em;
    color: #ffffff;
  }
  
  & .Feature-sound-driver-text {
    /* SP/PC 共通: grid overlay で driver / dolby ブロックを重ねて crossfade */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    /* PC: text 全体を sticky にして、画像と同じ位置に固定 */
    @media (min-width: 1080px) {
      position: sticky;
      top: 5vh;
      align-self: start;  /* grid item の縦伸長を切って sticky を有効化 */
      height: 90vh;
    }
  }

  & .Feature-sound-driver-block {
    display: flex;
    flex-direction: column;
    /* SP/PC 共通: 同じ grid cell に重ねて中央揃え */
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    justify-content: center;
    will-change: opacity;

    /* driver text：peel 進行 0 → 1 で opacity 1 → 0（消える） */
    &:first-child {
      opacity: var(--driver-op, 1);
    }

    /* dolby text：peel 進行 0 → 1 で opacity 0 → 1（現れる） */
    &:nth-child(2) {
      opacity: var(--dolby-op, 0);
    }
  }

  /* SP 用 stage overlay：デフォルト（PC）では非表示。SP override で右下 overlay 表示 */
  & .Feature-sound-driver-stage {
    display: none;
  }

  /* ---------- Block A：SP override（画像内 overlay + bottom グラデ + class 切替で peel/crossfade） ----------
     SP は「画像 sticky 固定 → 画像右下にテキスト overlay → スクロールで 2 アイテム crossfade」構造。
     - 元の `.Feature-sound-driver-text` は SP では visibility:hidden で flow だけ残し IO trigger 用
     - 新規 `.Feature-sound-driver-stage` を画像内に追加してテキストを overlay
     - 画像下端に多段ストップグラデを敷いてテキスト視認性を確保
     - PC の var-driven peel（--driver-clip / --driver-y / --driver-op / --dolby-op）は流用 */
  @media (max-width: 1079.98px) {
    & .Feature-sound-driver {
      display: block;
      position: relative;
    }

    /* media: 上のチャプターヘッダ + Cart FAB 分の余白を確保して sticky 固定。
       角丸を取って full-bleed 寄りに。clamp の上下限も更に底上げ */
    & .Feature-sound-driver-media {
      position: sticky;
      top: 90px;
      width: 100%;
      height: clamp(540px, 84vh, 720px);
      border-radius: 0;
      overflow: hidden;
      z-index: 2;
    }

    /* 画像下端に多段ストップグラデを敷く（テキスト読みやすさ）。
       彩度なし（純黒）でモノクロフェード。RGB は一定でアルファのみ変化 */
    & .Feature-sound-driver-media::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70%;
      background: linear-gradient(
        to top in oklab,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.85) 8%,
        rgba(0, 0, 0, 0.74) 18%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.44) 44%,
        rgba(0, 0, 0, 0.28) 58%,
        rgba(0, 0, 0, 0.15) 72%,
        rgba(0, 0, 0, 0.06) 86%,
        rgba(0, 0, 0, 0) 100%
      );
      pointer-events: none;
      z-index: 3;
    }

    /* 画像 base: PC と同じ var-driven 構造（clip-path / transform）をそのまま流用 */
    & .Feature-sound-driver-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    & .Feature-sound-driver-img.-driver {
      transition:
        clip-path 0.85s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: clip-path, transform;
    }

    /* 装飾画像（dolby-vis）は SP では非表示 */
    & .Feature-sound-dolby-vis {
      display: none;
    }

    /* 9.2mm metric: 画像左上に小さく overlay（テキスト overlay と棲み分け） */
    & .Feature-sound-clear-metric {
      top: 16px;
      left: 16px;
      gap: 4px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
      z-index: 4;
    }
    & .Feature-sound-clear-metric-num {
      font-size: 63px;
    }
    & .Feature-sound-clear-metric-unit {
      font-size: 20px;
    }
    & .Feature-sound-clear-metric-label {
      font-size: 10px;
    }

    /* Dolby ロゴ: 中央上寄りに配置（テキスト overlay の上に出るように上方シフト） */
    & .Feature-sound-driver-dolby-logo {
      top: 36%;
      width: clamp(130px, 36vw, 200px);
      filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.5));
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity;
      z-index: 4;
      
    }

    /* stage overlay：画像内 bottom に左寄せテキスト overlay（コンテナ幅 ≈ 80%）。
       class 切替で driver/dolby crossfade */
    & .Feature-sound-driver-stage {
      display: block;
      position: absolute;
      bottom: 56px;
      left: 5%;
      right: 15%;
      z-index: 5;
      pointer-events: none;
      color: #ffffff;
      text-align: left;
    }
    & .Feature-sound-driver-stage-block {
      display: block;
      color: #ffffff;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity;
    }
    & .Feature-sound-driver-stage-block.-driver {
      opacity: 1;
    }
    & .Feature-sound-driver-stage-block.-dolby {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
    }
    /* stage 内タイポ：他特徴ブロックの base スタイルを継承しつつ、overlay 用に色＋ tight な間隔に。
       base の title margin-bottom 35px は overlay では gap が広すぎるため 18px に短縮 */
    & .Feature-sound-driver-stage .Feature-sound-title {
      color: #ffffff;
      margin: 0 0 18px;
    }
    & .Feature-sound-driver-stage .Feature-sound-body {
      color: rgba(255, 255, 255, 0.92);
    }

    /* .is-dolby-active 切替時: PC の rAF と同じ CSS var を一括切替 + stage テキスト crossfade */
    & .Feature-sound-driver.is-dolby-active {
      --driver-clip: 100%;
      --driver-y: -30%;
      --driver-op: 0;
      --dolby-op: 1;
    }
    & .Feature-sound-driver.is-dolby-active .Feature-sound-driver-stage-block.-driver {
      opacity: 0;
    }
    & .Feature-sound-driver.is-dolby-active .Feature-sound-driver-stage-block.-dolby {
      opacity: 1;
    }

    /* 元の text container は SP では非表示。flow のみ残して IO trigger に活用 */
    & .Feature-sound-driver-text {
      visibility: hidden;
      display: flex;
      flex-direction: column;
    }
    & .Feature-sound-driver-block {
      grid-column: auto;
      grid-row: auto;
      min-height: 0;
      opacity: 1 !important;
    }
    /* Driver block: Dolby block の前に十分な scroll 距離（読み切れる時間を確保） */
    & .Feature-sound-driver-block:first-child {
      padding-block: 32px 70vh;
    }
    /* Dolby block: 画像 sticky を抜けるまで底に大きく余白。
       Dolby state は dolby block bottom が viewport 50% line を通るまで持続するので、
       padding が大きいほど Dolby を読める時間が伸びる（50vh → 120vh で 2.4 倍） */
    & .Feature-sound-driver-block:nth-child(2) {
      padding-block: 0 120vh;
    }
  }

  /* ---------- Block B：HearID 5.0（自分好みの視聴体験） ---------- */
  & .Feature-sound-hearid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-block-start: 60px;
    align-items: flex-start;
  
    @media (min-width: 1080px) {
      /* 比率固定（1:3）。画面幅が広がっても text と image が連動して伸び縮みする */
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
      gap: clamp(40px, 6vw, 80px);
      margin-block-start:120px;
    }
  }

  & .Feature-sound-hearid-text {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    width: 80%;
    @media (min-width: 1080px) {
      width: auto;
    }
    
  }
  
  & .Feature-sound-hearid-cards {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;

    @media (min-width: 1080px) {
      max-width: 720px;
    }
  }

  /* HearID カード：画像本来のアスペクト比で表示（contain の letterbox を避けるため
     aspect-ratio は外し、2 枚を grid stack で重ねる）。
     メインのスマホとのジャンプ率を強めるためサブ扱いで小さめに配置。
     黒背景 + 内側 padding で画像に余白を持たせ、カードらしい見た目に。
     overflow:hidden + border-radius で画像の角を確実にクリップ */
  & .Feature-sound-hearid-card {
    position: absolute;
    display: grid;
    margin: 0;
    padding: 6px;
    overflow: hidden;
    background-color: #000;
    width: 28%;
    z-index: 1;
    will-change: transform;

    @media (min-width: 1080px) {
      padding: 8px;
      width: 24%;
      max-width: 180px;
    }
  }

  /* 右上にオーバーラップ（phone の右上隅にかかる位置） */
  & .Feature-sound-hearid-card.-radar {
    top: -4%;
    right: 0%;

    @media (min-width: 1080px) {
      top: 2%;
      right: 0%;
    }
  }

  /* 左下にオーバーラップ。PC では phone の左下隅にしっかり重なる位置 */
  & .Feature-sound-hearid-card.-curve {
    bottom: 4%;
    left: 0%;

    @media (min-width: 1080px) {
      bottom: -2%;
      left: -10%;
    }
  }

  /* カード内の 2 枚（-from / -to）を grid stack で重ねて、--hearid-swap (0→1) で crossfade。
     幅 100% で画像の自然な高さに合わせて配置 → letterbox なしで境界がそのまま画像の輪郭に。
     親 figure の border-radius + overflow:hidden で角丸が確実に効く。
     --hearid-swap は親 .Feature-sound-hearid-cards に JS から書き込まれる */
  & .Feature-sound-hearid-card-img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    display: block;
  }
  & .Feature-sound-hearid-card-img.-from {
    opacity: calc(1 - var(--hearid-swap, 0));
  }
  & .Feature-sound-hearid-card-img.-to {
    opacity: var(--hearid-swap, 0);
  }
  
  & .Feature-sound-hearid-phone {
    display: block;
    width: 85%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transform: translateX(5%);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));

    @media (min-width: 1080px) {
      width: 88%;
      transform: translateX(-2%);
      max-width: 720px;
    }
  }
  
  /* ===================
     04 章：AI ボイスレコーダー
  =================== */
  & .Feature-chapter.-airec {
    --airec-card-bg: rgba(255, 255, 255, 0);
    --airec-card-border: rgba(255, 255, 255, 0.15);
    --airec-card-radius: -0px;
    --airec-card-pad: 24px;
    /* sticky な Feature-airec-sidenav が動くよう、経路上の overflow を明示 */
    overflow: visible;

    @media (min-width: 1080px) {
      --airec-card-radius: 0px;
      --airec-card-pad: 35px;
    }
  }
  
  /* ---------- ヘッダー：左側画像を viewport 左端まで拡張、右側テキストは現状維持 ---------- */
  & .Feature-airec-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-block-start: 24px;
    margin-inline-start: 0;
    width: 100%;
    /* 章登場時にフェードイン + 軽い拡大で「いきなり全幅」のインパクトを緩和 */
    opacity: 0;
    transform: scale(0.97) translateY(20px);
    transform-origin: center top;
    transition:
      opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);

    &.is-inview {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    @media (min-width: 1080px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
      gap: 60px;
      align-items: stretch;
      margin-block-start: 0;
      /* 左端のみ viewport 左端まで拡張:
         サイドバー幅 + gap + Feature-container 左マージン分を左に戻す。
         右端は現状の grid 右端を維持。 */
      margin-inline-start: calc(
        -1 * (var(--feature-side-w-pc) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2)
      );
      width: calc(
        100% + var(--feature-side-w-pc) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2
      );
      min-height: 700px;
    }

    @media (min-width: 1200px) {
      margin-inline-start: calc(
        -1 * (var(--feature-side-w-wide) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2)
      );
      width: calc(
        100% + var(--feature-side-w-wide) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2
      );
    }
  }
  
  & .Feature-airec-hero-media {
    position: relative;
    overflow: hidden;
    background: #000;
    /* SP: viewport 全幅（親 padding を打ち消す負マージン） */
    margin-inline: calc(50% - 50vw);
    /* スクロール連動パララックス：JS が --airec-parallax を 0→1 に書き込む。
       0 のとき画像が下にずれ、1 で本来位置。フォールバックは 1（通常位置） */
    transform: translateY(calc((1 - var(--airec-parallax, 1)) * 80px));
    will-change: transform;

    @media (min-width: 1080px) {
      /* 画像領域はテキスト領域と完全分断（col 1 のみ） */
      grid-column: 1;
      grid-row: 1;
      align-self: stretch;
      margin-inline: 0;
    }
  }

  /* 画像内側を少し拡大して逆方向に動かすことで視差感を強める */
  & .Feature-airec-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* SP: 縦長に（4:5） */
    aspect-ratio: 4 / 5;
    min-height: 320px;
    display: block;
    transform: scale(calc(1.08 - 0.08 * var(--airec-parallax, 1)));
    transform-origin: center top;
    will-change: transform;

    @media (min-width: 1080px) {
      aspect-ratio: auto;
      min-height: 750px;
    }
  }

  & .Feature-airec-hero-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (min-width: 1080px) {
      grid-column: 2;
      grid-row: 1;
      align-self: stretch;
      justify-content: center;
      gap: 40px;
      padding: 60px 0px;
    }
  }
  
  & .Feature-airec-hero-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 24px;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }
  
  & .Feature-airec-hero-lead {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.06em;
  
    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }
  
  & .Feature-airec-hero-note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: #ffffff;
    letter-spacing: 0em;
  }
  
  /* ヘッダ下のアンカーメニュー：録音 / 文字起こし / 要約
     行全体がクリッカブル。右端に下向きシェブロン ∨ */
  & .Feature-airec-hero-menu {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    /* SP: 3 列横並びボタン */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;

    @media (min-width: 1080px) {
      /* PC: 縦並びリスト（現状維持） */
      display: flex;
      flex-direction: column;
      gap: 0;
    }
  }

  & .Feature-airec-hero-menu li {
    /* SP: ボタン枠（角丸弱め） */
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 3px;

    @media (min-width: 1080px) {
      /* PC: 横区切り罫線（現状維持） */
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 0;
      background: transparent;
    }
  }

  & .Feature-airec-hero-menu li:first-child {
    @media (min-width: 1080px) {
      border-top: 1px solid rgba(255, 255, 255, 0.22);
    }
  }

  & .Feature-airec-hero-menu a {
    display: flex;
    /* SP: ラベル + 矢印 横並び（中央寄せ） */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 8px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: opacity 0.2s ease, padding-inline-start 0.2s ease;

    @media (min-width: 1080px) {
      /* PC: ラベル左・矢印右の横並び（現状維持） */
      justify-content: space-between;
      padding: 20px 8px;
      font-size: 13px;
      gap: 0;
    }
  }

  & .Feature-airec-hero-menu a:hover {
    opacity: 0.75;
  }

  /* CSS のみで描画する下向きシェブロン ∨ */
  & .Feature-airec-hero-menu .-arr {
    flex-shrink: 0;
    display: inline-block;
    /* SP: 矢印を小さく + 線細く */
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;

    @media (min-width: 1080px) {
      /* PC: 元のサイズ・線幅・位置（現状維持） */
      width: 8px;
      height: 8px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translate(-2px, -2px);
    }
  }

  & .Feature-airec-hero-menu a:hover .-arr {
    /* SP: hover で少し下に */
    transform: rotate(45deg) translate(1px, 1px);

    @media (min-width: 1080px) {
      transform: rotate(45deg) translate(0, 0);
    }
  }

  /* ---------- セクション群 wrapper ----------
     SP: 2 カラム grid（40px sidenav + 1fr sections）、左 sticky 追従
     PC: 1 カラム（sidenav 非表示） */
  & .Feature-airec-body {
    overflow: visible;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    margin-block-start: 30px;
    padding-top: 30px;

    @media (min-width: 1080px) {
      display: block;
      padding-top: 0;
      margin-block-start: 100px;
    }
  }

  & .Feature-airec-sections {
    /* sticky 経路上に overflow がかからないよう明示 */
    overflow: visible;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;

    @media (min-width: 1080px) {
      grid-column: auto;
      grid-row: auto;
    }
  }

  /* ---------- 左 sticky sidenav（SP のみ表示、PC は非表示） ---------- */
  & .Feature-airec-sidenav {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 120px;
    padding-left: 3px;
    align-self: start;
    padding-top: 10px

    @media (min-width: 1080px) {
      display: none;
    }
  }

  & .Feature-airec-sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 60px!important;

    @media (min-width: 1080px) {
      display: none;

    }
  }

  & .Feature-airec-sidenav-link {
    /* SP base: 縦書き（漢字を縦に並べる）、ナンバリングなし、ボーダーなし */
    writing-mode: vertical-rl;
    display: inline-flex;
    align-items: flex-start;
    padding: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;

    @media (min-width: 1080px) {
      /* PC: 横書き + ナンバリング + 左ボーダー */
      writing-mode: horizontal-tb;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0 14px 18px;
      border-left: 1.5px solid rgba(255, 255, 255, 0.12);
      transition: color 0.3s ease, border-color 0.3s ease, padding-left 0.3s ease;
    }
  }

  & .Feature-airec-sidenav-link .-num {
    /* SP: ナンバリング非表示 */
    display: none;

    @media (min-width: 1080px) {
      display: inline;
      font-family: var(--font-en);
      font-weight: 300;
      font-size: 11px;
      letter-spacing: 0.08em;
      opacity: 0.55;
      flex-shrink: 0;
      transition: opacity 0.3s ease;
    }
  }

  & .Feature-airec-sidenav-link .-label {
    font-size: 13px;
    line-height: 1.4;
  }

  & .Feature-airec-sidenav-link:hover {
    color: rgba(255, 255, 255, 0.9);

    @media (min-width: 1080px) {
      border-left-color: rgba(255, 255, 255, 0.4);
    }
  }

  & .Feature-airec-sidenav-link.is-active {
    color: #ffffff;

    @media (min-width: 1080px) {
      border-left-color: #ffffff;
      padding-left: 22px;
    }
  }

  /* SP: 現在地は下線で表現 */
  & .Feature-airec-sidenav-link.is-active .-label {
    text-decoration: underline;
    text-underline-offset: 4px;

    @media (min-width: 1080px) {
      text-decoration: none;
    }
  }

  & .Feature-airec-sidenav-link.is-active .-num {
    opacity: 1;
  }

  /* ---------- セクション共通 ----------
     PC: pinned-sections 方式（cwgroup.com 風）
       各 section を sticky top: 0、min-height: 100vh で配置
       スクロールすると次の section が前を覆い、順次入れ替わる
     SP: 通常の縦並び
     上端の divider 線：is-inview で左 → 右にスケールイン */
  & .Feature-airec-section {
    scroll-margin-top: 110px;
    margin-block-end: 60px;
    position: relative;

    /* 上端 1px divider：is-inview で scaleX 0→1、少し遅延してゆっくり描画 */
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.7);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
      pointer-events: none;
    }

    &.is-inview::before {
      transform: scaleX(1);
    }

    @media (min-width: 1080px) {
      scroll-margin-top: 70px;
      margin-block-end: 0px;
      margin-block-start: 140px;
      padding-block: 0;
    }
  }

  & .Feature-airec-section-title {
    margin: 0 0 24px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: 0.02em;
    padding-top: 15px;

    @media (min-width: 1080px) {
      font-size: 28px;
      margin: 0 0 50px;
    }
  }
  
  & .Feature-airec-section-note {
    margin: 16px 0 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: #ffffff;
    letter-spacing: 0em;

    @media (min-width: 1080px) {
      margin: 20px 0 0;
    }
  }

  /* セクション下部の注釈リスト（※付きの複数行注釈）
     ul タグセレクタ込みで specificity を上げ、ベース & ul のリセットに勝つ */
  & ul.Feature-airec-section-notes {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.6;
    opacity: 0.6;
    color: #ffffff;
    letter-spacing: 0.02em;

    & li {
      padding-left: 1em;
      text-indent: -1em;
    }

    /* 最初の一般注釈は「※」を自動付与（※1/※2 はテキスト先頭に含めている） */
    & li:first-child::before {
      content: "※";
    }
  }

  /* ---------- AI要約セクション末尾：サブスクプラン誘導カード ----------
     ブルー系グラデ + 角丸 + PC 2 カラム grid（左：タイトル / 右：本文+注釈+ピルボタン）
     カード全体が <a> でクリッカブル */
  & .Feature-airec-subscription {
    position: relative;
    overflow: hidden;
    /* スタッキングコンテキストを固定 → ::after の mix-blend-mode が外側に漏れず、スクロール中の再合成チラつきを防ぐ */
    isolation: isolate;
    /* GPU レイヤーに固定して iOS Safari の blur 再計算による点滅を抑える */
    transform: translateZ(0);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 32px 0 0;
    padding: 35px 30px;
    border: 1px solid rgba(0, 169, 224, 0.18);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    background: #0e1a25;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    /* ブラーで SVG をボカしてグラデ風に。inset を負にしてブラーのエッジを枠外に逃がす */
    &::before {
      content: "";
      position: absolute;
      inset: -70px;
      z-index: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1125 1368' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='5.17%25' y1='6.59%25' x2='104.82%25' y2='108.41%25'%3E%3Cstop stop-color='%231944A0' offset='0%25'/%3E%3Cstop stop-color='%231944A0' offset='30%25'/%3E%3Cstop stop-color='%23329DFF' offset='75%25'/%3E%3Cstop stop-color='%23FFFFFF' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='33.44%25' y1='81.00%25' x2='90.84%25' y2='-5.43%25'%3E%3Cstop stop-color='%230E3470' offset='0%25'/%3E%3Cstop stop-color='%230E3470' offset='35%25'/%3E%3Cstop stop-color='%23329DFF' offset='80%25'/%3E%3Cstop stop-color='%23FFFFFF' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(-8 0)'%3E%3Cpolygon fill='%23FFFFFF' points='0.98,519.03 0.98,847.89 279.48,847.89 279.48,519.03'/%3E%3Cpolygon fill='%23329DFF' points='992,0 992,263.97 1253.05,263.97 1253.05,0'/%3E%3Cpath fill='url(%23g1)' d='M8,525.64 C45.9,593.61 76.44,642.16 99.61,671.28 C122.79,700.40 160.37,737.47 212.38,782.50 L826.58,456.90 L826.58,0 L8,0 L8,525.64 Z'/%3E%3Cpath fill='url(%23g2)' d='M8,764.22 C235.50,735.10 408.89,659.38 528.17,537.07 C647.46,414.76 722.50,235.73 753.31,0 L1028.35,0 C1222.99,302.58 1237.28,605.07 1071.20,907.49 C789.49,1311.59 435.09,1449.25 8,1320.47 L8,764.22 Z'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* 彩度・明度を落として落ち着いた印象に */
      filter: blur(70px) saturate(0.5) brightness(0.78);
      opacity: 0.62;
      /* レイヤー固定でスクロール中の再描画チラつきを防ぐ */
      transform: translateZ(0);
      will-change: transform;
    }

    /* ノイズレイヤー：blur しないので粒状感が保たれる（強め） */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 240px 240px;
      opacity: 0.32;
      mix-blend-mode: overlay;
      /* mix-blend-mode のレイヤーを GPU 上で安定させる（iOS Safari チラつき対策） */
      transform: translateZ(0);
    }

    /* 内側コンテンツは ::before / ::after より前面に */
    & > * {
      position: relative;
      z-index: 2;
    }

    &:hover {

    }

    @media (min-width: 1080px) {
      margin: 60px 0 0;
      padding: 48px 56px;
      border-radius: 8px;
      display: grid;
      grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
      column-gap: 60px;
      align-items: start;
      gap: 0;
    }
  }

  /* 左カラム：タイトルのみ */
  & .Feature-airec-subscription-head {
    @media (min-width: 1080px) {
      grid-column: 1;
      align-self: self-start;
      padding-top: 8px;
    }
  }

  & .Feature-airec-subscription-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #ffffff;

    @media (min-width: 1080px) {
      font-size: 22px;
    }
  }

  /* 右カラム：本文 + 注釈 + ボタン縦並び */
  & .Feature-airec-subscription-content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media (min-width: 1080px) {
      grid-column: 2;
      gap: 22px;
    }
  }

  & .Feature-airec-subscription-body {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: #ffffff;

    @media (min-width: 1080px) {
      font-size: 15px;
      line-height: 2;
    }

    & sup {
      font-size: 0.7em;
      margin-inline-start: 1px;
    }
  }

  & .Feature-airec-subscription-disclaimer {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);

    @media (min-width: 1080px) {
      font-size: 12px;
    }
  }

  /* 右下に独立配置する白ピルボタン */
  & .Feature-airec-subscription-link {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border: 1.5px solid #ffffff;
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #1f2733;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;

    @media (min-width: 1080px) {
      margin-block-start: 8px;
      padding: 13px 32px;
      font-size: 14px;
    }

    @media (hover: hover) {
      &:hover {
        background: transparent;
        color: #ffffff;
      }

      &:hover .-arr {
        transform: translateX(3px);
      }
    }

    & .-arr {
      display: inline-block;
      transition: transform 0.2s ease;
      display: none;
    }
  }

  /* 親カード全体の hover でリンクボタンの hover スタイルも連動（マウスデバイスのみ） */
  @media (hover: hover) {
    & .Feature-airec-subscription:hover .Feature-airec-subscription-link {
      background: transparent;
      color: #ffffff;
    }
    & .Feature-airec-subscription:hover .Feature-airec-subscription-link .-arr {
      transform: translateX(3px);
    }
  }

  /* カード内の小さな注釈（本文より控えめ、左揃え） */
  & .Feature-airec-card-note {
    margin: 8px 0 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.5;
    color: #ffffff;
    letter-spacing: 0.02em;
  }
  
  /* ---------- グリッドのバリエーション ---------- */
  & .Feature-airec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  
    @media (min-width: 1080px) {
      gap: 15px;
    }
  }
  
  & .Feature-airec-grid.-rec {
    /* 録音セクションは -case のみ。常に 1 列フル幅 */
    @media (min-width: 1080px) {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- 録音 -case：左画像 / 右テキスト（文字起こしと同比率 1.8:1） ----------
     SP: 縦並び（画像上 / テキスト下）
     PC: 横並び reverse（左 body 1 / 右 slideshow 3）。テキストは左下寄せ */
  & .Feature-airec-card.-case {
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;

    @media (min-width: 1080px) {
      flex-direction: row-reverse;
      align-items: stretch;
      gap: 4%;
      padding-inline: 0;
      padding-block: 0;
    }

    /* 旧 ::after の暗グラデ（重ね合わせ可読性確保用）は新レイアウトでは不要 */
    &::after {
      display: none;
    }
  }

  & .Feature-airec-card.-case .Feature-airec-card-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    overflow: hidden;

    @media (min-width: 1080px) {
      flex: 3 1 0;
      min-width: 0;
      /* 添付画像の比率に合わせ、横長気味 */
      aspect-ratio: 16 / 10;
      align-self: center;
      min-height: 520px;
    }
  }

  & .Feature-airec-card.-case .Feature-airec-card-body {
    padding: 22px 0px 0;

    @media (min-width: 1080px) {
      /* 共通 .Feature-airec-textcol で統一管理（下のルール参照） */
      padding: 10px 0;
    }
  }

  /* 録音 -case / 文字起こし -realtime 共通：左テキスト & 右画像の比率を % で完全統一
     text 28% + gap 4% + image 68% = 100% */
  @media (min-width: 1080px) {
    & .Feature-airec-card.-case .Feature-airec-card-body,
    & .Feature-airec-realtime-right {
      flex: 0 0 28%;
      max-width: 28%;
      min-width: 0;
      align-self: self-start;
    }

    & .Feature-airec-card.-case .Feature-airec-card-slideshow,
    & .Feature-airec-realtime-phones {
      flex: 0 0 68%;
      max-width: 68%;
      min-width: 0;
    }
  }

  & .Feature-airec-card.-case .Feature-airec-card-bg.-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    will-change: opacity;
    /* ベース card-bg から継承される mask フェードと拡大を解除（素の画像で表示） */
    mask-image: none;
    -webkit-mask-image: none;
    transform: none;
  }

  /* デフォルト: -a を表示 */
  & .Feature-airec-card.-case .Feature-airec-card-bg.-a {
    opacity: 1;
  }

  /* スクロール連動：is-b 状態で -b に切替 */
  & .Feature-airec-card.-case.is-b .Feature-airec-card-bg.-a {
    opacity: 0;
  }
  & .Feature-airec-card.-case.is-b .Feature-airec-card-bg.-b {
    opacity: 1;
  }

  & .Feature-airec-trn-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-block-end: 10px;

    @media (min-width: 1080px) {
      gap: 20px;
      margin-block-end: 15px;
    }
  }

  /* ---------- リアルタイム文字起こし 4 ブロック構成 ---------- */
  & .Feature-airec-card.-realtime {
    padding: 0;
    border: none;
    background: transparent;
  }

  & .Feature-airec-realtime {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
    background: transparent;
    isolation: isolate;
    /* カード本体：左右パディングのみ。上下は 0 にして左画像がカード上下端ピッタリ */
    padding-inline: 0;
    padding-block: 0;
    overflow: hidden;

 

    /* 内部要素はノイズの上に表示 */
    & > * {
      position: relative;
      z-index: 1;
    }

    @media (min-width: 1080px) {
      /* PC: flex row（左 phones / 右 -top + -mark wrapper）
         左を大きく（1.8 : 1）、右カラムは内部で下寄せ */
      /* 録音 -case と同じレイアウト：row-reverse で左テキスト / 右画像、比率 1 : 3 */
      flex-direction: row-reverse;
      align-items: stretch;
      gap: 4%;
      padding-inline: 0;
      padding-block: 0;
    }
  }

  /* テキスト側カラム（録音 -case の card-body と同サイズ：左下寄せ）
     幅・配置は上の共通ルールで管理 */
  & .Feature-airec-realtime-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block:0 clamp(28px, 4vw, 56px);

    @media (min-width: 1080px) {
      gap: 28px;
      padding: 10px 0;
    }
  }

  /* 画像エリア（録音 -case の slideshow と同比率 3）。印象的なダーク背景 + 左右余白 */
  & .Feature-airec-realtime-phones {
    /* SP: 文字起こし／要約を同じスロットで切り替え（軽量フェード） */
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;

    @media (min-width: 1080px) {
      flex: 3 1 0;
      min-width: 0;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 4%;
      align-items: flex-start;
      padding-inline: 6%;
      max-width: none;
      margin-inline: 0;
      background: linear-gradient(180deg, rgba(50, 70, 92, 0.25) 0%, rgba(44, 49, 61, 0.9) 100%);
      border: 1px solid rgba(255, 255, 255, 0.18);
      /* 縦幅を card-slideshow と同等以下に。内部画像が押し広げないよう overflow: hidden */
      aspect-ratio: 16 / 10;
      max-height: 60vh;
      align-self: self-start;
      overflow: hidden;
    }

    /* PC のみ右下 → 左上を目指す控えめなグラデ要素（約 30% カバー）
       多段ストップ + ease-out でバンディングなく滑らかに減衰 */
    &::before {
      display: none;

      @media (min-width: 1080px) {
        display: block;
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
          to top left,
          rgba(220, 225, 232, 0.45) 0%,
          rgba(212, 220, 228, 0.38) 5%,
          rgba(200, 211, 222, 0.30) 10%,
          rgba(186, 200, 214, 0.22) 15%,
          rgba(172, 188, 204, 0.14) 20%,
          rgba(158, 176, 194, 0.07) 25%,
          rgba(145, 165, 184, 0.02) 30%,
          transparent 35%
        );
      }
    }

    /* 右下の光彩エリアにノイズ（PC のみ。SP は不要） */
    &::after {
      display: none;

      @media (min-width: 1080px) {
        display: block;
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 240px 240px;
        mask-image: radial-gradient(
          ellipse 40% 32% at 82% 82%,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.6) 40%,
          rgba(0, 0, 0, 0.25) 65%,
          transparent 100%
        );
        -webkit-mask-image: radial-gradient(
          ellipse 40% 32% at 82% 82%,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0.6) 40%,
          rgba(0, 0, 0, 0.25) 65%,
          transparent 100%
        );
        opacity: 0.3;
        mix-blend-mode: overlay;
      }
    }

    /* 内側コンテンツは ::before / ::after より前面に */
    & > * {
      position: relative;
      z-index: 2;
    }
  }

  & .Feature-airec-realtime-phone {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    /* SP: 切り替えアニメ用フェード（GPU 合成プロパティのみで軽量） */
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
    animation: realtimePhoneSwap 9s ease-in-out infinite;

    @media (min-width: 1080px) {
      /* PC: phones grid のセル全高に伸ばす。
         justify-content は各バリアント側で個別指定（space-between は使わない） */
      height: 100%;
      gap: 12px;
      opacity: 1;
      transform: none;
      animation: none;
      will-change: auto;
    }
  }

  /* 文字起こし：HTML 順は 画像 → キャプション。上端寄せ */
  & .Feature-airec-realtime-phone.-trn {
    flex-direction: column;
    justify-content: flex-start;
    /* SP: 1 つ目は実体配置でレイアウト確保（高さ基準） */
    position: relative;
    /* SP: padding なし（caption 非表示なので画像位置を -sum と統一） */
    padding-block-end: 0;

    @media (min-width: 1080px) {
      /* PC: 文字起こしの下端（caption の下）に余白 */
      padding-block-end: clamp(24px, 4vw, 48px);
    }
  }

  /* 要約：HTML 順は キャプション → 画像。下端寄せ（caption + image をまとめて下に配置） */
  & .Feature-airec-realtime-phone.-sum {
    flex-direction: column;
    /* SP: -trn と同じく上端寄せ（caption 非表示で画像位置を統一） */
    justify-content: flex-start;
    /* SP: 2 つ目は -trn と同位置に重ねる */
    position: absolute;
    inset: 0;
    animation-delay: 4.5s;
    /* SP: padding なし（caption 非表示なので画像位置を -trn と統一） */
    padding-block-start: 0;

    @media (min-width: 1080px) {
      position: relative;
      inset: auto;
      animation: none;
      /* PC: caption 上 → 画像下 のレイアウトに戻す */
      justify-content: flex-end;
      /* 要約の上端（caption の上）に余白 */
      padding-block-start: clamp(24px, 4vw, 48px);
    }
  }

  /* SP 切り替えアニメ keyframes（opacity + 微 scale のみで GPU 合成） */
  @keyframes realtimePhoneSwap {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(1.012); }
    6%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    46%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    52%  { opacity: 0; transform: translate3d(0, 0, 0) scale(0.992); }
    100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.992); }
  }

  /* SP 用：CSS radio による文字起こし／要約切替 + 下部ボタン（PC では非表示） */
  & .Feature-airec-realtime-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
  }

  & .Feature-airec-realtime-tabs {
    display: none;

    @media (max-width: 1079.98px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-block-start: 14px;
    }
  }

  & .Feature-airec-realtime-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  @media (max-width: 1079.98px) {
    /* SP: 自動 swap アニメを停止し、radio クリックのみで切替 */
    & .Feature-airec-realtime-phone {
      animation: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* radio checked に応じて該当 figure を表示 */
    & #airec-tab-trn:checked ~ .Feature-airec-realtime-phone.-trn,
    & #airec-tab-sum:checked ~ .Feature-airec-realtime-phone.-sum {
      opacity: 1;
    }

    /* active タブの強調表示（radio と Tabs は同じ Feature-airec-realtime-phones 内の兄弟） */
    & #airec-tab-trn:checked ~ .Feature-airec-realtime-tabs .Feature-airec-realtime-tab[for="airec-tab-trn"],
    & #airec-tab-sum:checked ~ .Feature-airec-realtime-tabs .Feature-airec-realtime-tab[for="airec-tab-sum"] {
      background: white;
      border-color:  white;
      color: black;
    }
  }

  & .Feature-airec-realtime-cap {
    /* SP: 非表示（PC のみキャプション表示） */
    display: none;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;

    @media (min-width: 1080px) {
      display: block;
      font-size: 14px;
    }
  }

  /* iPhone 画像を上/下 30% カットするためのクリップコンテナ。
     aspect-ratio で表示領域を固定（元画像 ≒ 9:20 の 70% ≒ 9:14） */
  /* iPhone 画像コンテナ
     SP: CSS でクリップ（aspect-ratio + overflow hidden + 画像 absolute シフト）
     PC: 事前カット済み画像 (-pc.webp) を使用するのでクリップ不要 */
  & .Feature-airec-realtime-clip {
    position: relative;
    /* SP: ビューポート高さに収まるよう width を vh ベースで制限
       aspect-ratio 9/14 で h = w × 14/9 → 高さを約 55vh 以下に抑えるため
       w ≤ 55vh × 9/14 ≈ 35vh */
    width: min(100%, 35vh);
    max-width: 260px;
    aspect-ratio: 9 / 14;
    overflow: hidden;
    /* SP: 角丸なし（フラットなフレーム） */
    border-radius: 0;
    align-self: center;

    @media (min-width: 1080px) {
      width: 100%;
      max-width: 100%;
      aspect-ratio: auto;
      overflow: visible;
      align-self: stretch;
      /* phones コンテナ高さに合わせて画像を縦方向に収める */
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  & .Feature-airec-realtime-img,
  & .Feature-airec-realtime-clip picture {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    display: block;

    @media (min-width: 1080px) {
      position: static;
      /* コンテナ (phones) のセルいっぱいに cover */
      width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  }

  /* 文字起こし：SP のみ上 30% カット（PC は -pc.webp を使うのでシフト不要） */
  & .Feature-airec-realtime-phone.-trn .Feature-airec-realtime-img {
    top: -42.857%;

    @media (min-width: 1080px) {
      top: auto;
      /* PC: cover で下端を見せる（議事録本文側） */
      object-position: bottom;
    }
  }

  /* 要約：SP のみ上端揃え（PC は -pc.webp を使うのでシフト不要） */
  & .Feature-airec-realtime-phone.-sum .Feature-airec-realtime-img {
    top: 0;

    @media (min-width: 1080px) {
      top: auto;
      /* PC: cover で上端を見せる（要約の見出し側） */
      object-position: top;
    }
  }

  /* テキストはセット（タイトル + 説明）で gap 管理 */
  & .Feature-airec-realtime-text {
    display: flex;
    flex-direction: column;
    gap: 14px;

    @media (min-width: 1080px) {
      gap: 14px;
    }
  }

  /* -top（高精度な文字起こし）テキストは Feature-airec-card-body と同サイズ */
  & .Feature-airec-realtime-text.-top .Feature-airec-realtime-title {
    font-size: 17px;
    font-weight: 500;

    @media (min-width: 1080px) {
      font-size: 20px;
    }
  }

  & .Feature-airec-realtime-text.-top .Feature-airec-realtime-desc {
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.06em;
    color: var(--color-text-sub);
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }

  /* -bottom（重要な内容を逃さない）のサイズは現状維持 */
  & .Feature-airec-realtime-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 16px;
    }
  }

  & .Feature-airec-realtime-desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.04em;

    @media (min-width: 1080px) {
      font-size: 12px;
    }
  }

  & .Feature-airec-realtime-desc sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }

  & .Feature-airec-realtime-mark {
    /* 横並び：左にディスプレイ画像、右にテキスト */
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;

    @media (min-width: 1080px) {
      gap: 16px;
    }
  }

  & .Feature-airec-realtime-display {
    flex: 0 0 auto;
    height: auto;
    width: 80px;
    max-width: 80px;
    object-fit: contain;

    @media (min-width: 1080px) {
      width: 100px;
      max-width: 100px;
    }
  }

  /* -bottom（重要な内容を逃さない）のテキストサイズを 11px に */
  & .Feature-airec-realtime-text.-bottom .Feature-airec-realtime-title,
  & .Feature-airec-realtime-text.-bottom .Feature-airec-realtime-desc {
    font-size: 11px;
    line-height: 1.6;

    @media (min-width: 1080px) {
      font-size: 12px;
    }
  }


  /* 「ディスプレイの🚩マークを押すだけで…」のテキスト内 inline 旗アイコン（SVG） */
  & .Feature-airec-realtime-flag {
    display: inline-block;
    margin-inline: 0.2em 0.1em;
    width: 1em;
    height: 1em;
    vertical-align: -0.18em;
    object-fit: contain;
  }
  
  & .Feature-airec-grid.-trn-bottom {
    margin-block-start: 10px;

    @media (min-width: 1080px) {
      grid-template-columns: 1fr 1fr;
      margin-block-start: 15px;
    }

    /* card 高さを増やしてコンテンツ（画像 + テキスト）が窮屈にならないように */
    & .Feature-airec-card {
      min-height: 360px;

      @media (min-width: 1080px) {
        min-height: 640px;
      }
    }
  }
  
  & .Feature-airec-grid.-sum-top {
    margin-block-end: 16px;

    @media (min-width: 1080px) {
      grid-template-columns: 2fr 1fr;
      margin-block-end: 15px;
    }
  }
  
  & .Feature-airec-grid.-sum-bottom {
    @media (min-width: 1080px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  /* ---------- カード共通 ---------- */
  & .Feature-airec-card {
    position: relative;
    background: var(--airec-card-bg);
    border: 1px solid var(--airec-card-border);
    border-radius: var(--airec-card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--airec-card-pad);
    isolation: isolate;
  

  }
  
  & .Feature-airec-card.-sub {
    min-height: 180px;
    justify-content: flex-start;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
  
    @media (min-width: 1080px) {
      gap: 28px;
    }
  }
  
  & .Feature-airec-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80%;
    object-fit: cover;
    object-position: center top;
    z-index: -2;
    /* 下部を多段ストップでフェードアウト → カード背景と馴染ませる */
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 60%,
      rgba(0, 0, 0, 0.95) 70%,
      rgba(0, 0, 0, 0.83) 78%,
      rgba(0, 0, 0, 0.65) 85%,
      rgba(0, 0, 0, 0.4) 91%,
      rgba(0, 0, 0, 0.18) 96%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 60%,
      rgba(0, 0, 0, 0.95) 70%,
      rgba(0, 0, 0, 0.83) 78%,
      rgba(0, 0, 0, 0.65) 85%,
      rgba(0, 0, 0, 0.4) 91%,
      rgba(0, 0, 0, 0.18) 96%,
      transparent 100%
    );
  }
  
  /* -case の bg は slideshow 化で個別管理に切替。
     旧 blur(10px) 全掛けは廃止（slideshow 内の各スライドで個別調整） */
  
  & .Feature-airec-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(44, 49, 61, 0) 0%, rgba(44, 49, 61, 0.5) 55%, rgba(44, 49, 61, 0.95) 90%);
    pointer-events: none;
  }
  
  & .Feature-airec-card.-sub::after,
  & .Feature-airec-card.-lang::after,
  & .Feature-airec-card.-phone::after,
  & .Feature-airec-card.-speaker::after {
    display: none;
  }
  
  & .Feature-airec-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
  
    @media (min-width: 1080px) {
      gap: 20px;
    }
  }
  
  & .Feature-airec-card-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-text-sub);
  
    @media (min-width: 1080px) {
      font-size: 20px;
    }
  }
  
  & .Feature-airec-card-desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.06em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }

  /* 録音ボタン用の赤丸アイコン（inline 表示、フォント高さに合わせて可変） */
  & .Feature-airec-rec-dot {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: #e53935;
    vertical-align: -0.1em;
    margin-inline: 0.1em;
  }
  
  & .Feature-airec-card-desc sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }
  
  & .Feature-airec-card-desc .-strong {
    font-weight: 700;
    color: #ffffff;
  }
  
  & .Feature-airec-card-icon {
    /* 表示サイズは元の 28/36 に戻す。左の確保スペース（コンテナ幅）は 36/52 のまま維持 */
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    box-sizing: content-box;

    @media (min-width: 1080px) {
      width: 36px;
      height: 36px;
    }
  }
  
  /* ---------- 録音 右カード：5m メトリック ---------- */
  & .Feature-airec-card-metric {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2;
    color: #ffffff;
  }
  
  & .Feature-airec-card-metric .-label {
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  
  & .Feature-airec-card-metric .-value {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    position: relative;
  }
  
  & .Feature-airec-card-metric .-prefix {
    position: absolute;
    top: -8px;
    left: 8px;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 11px;
  }
  
  & .Feature-airec-card-metric .-num {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 100px;
    line-height: 1;
    letter-spacing: -0.05em;
  
    @media (min-width: 1080px) {
      font-size: 137px;
    }
  }
  
  & .Feature-airec-card-metric .-unit {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 36px;
    line-height: 1;
    margin-block-end: 6px;
  
    @media (min-width: 1080px) {
      font-size: 46px;
    }
  }
  
  /* ---------- 文字起こし 上カード（スマホ UI 暫定） ---------- */
  & .Feature-airec-card.-phone {
    min-height: 320px;
    background: linear-gradient(180deg, rgba(50, 70, 92, 0.4) 0%, rgba(44, 49, 61, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
  
    @media (min-width: 1080px) {
      min-height: 400px;
    }
  }
  
  /* ---------- 言語マップカード ---------- */
  & .Feature-airec-card.-lang {
    background: linear-gradient(180deg, rgba(50, 70, 92, 0.25) 0%, rgba(44, 49, 61, 0.9) 100%);
    overflow: hidden;
  }
  
  & .Feature-airec-card-lang-map {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 220px;
    pointer-events: none;
  
    @media (min-width: 1080px) {
      width: 380px;
      height: 280px;
    }
  }
  
  & .Feature-airec-card-lang-map > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.7;
  }
  
  & .Feature-airec-card-lang-balloons {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  & .Feature-airec-card-lang-balloons li {
    position: absolute;
    padding: 6px 12px;
    border-radius: 100px;
    font-family: var(--font-en);
    font-weight: 600;
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  }
  
  & .Feature-airec-card-lang-balloons .-c1 { background: #7f72ed; top: 15%; left: 50%; }
  & .Feature-airec-card-lang-balloons .-c2 { background: #ffb834; top: 65%; left: 50%; }
  & .Feature-airec-card-lang-balloons .-c3 { background: #ac25a1; top: 25%; left: 18%; }
  & .Feature-airec-card-lang-balloons .-c4 { background: #b85ee4; top: 70%; left: 10%; }
  & .Feature-airec-card-lang-balloons .-c5 { background: #0d6deb; top: 50%; left: 5%; }
  & .Feature-airec-card-lang-balloons .-c6 { background: #16b1ff; top: 78%; left: 32%; }
  & .Feature-airec-card-lang-balloons .-c7 { background: #55e1df; top: 55%; left: 32%; }
  
  /* ---------- 要約 テンプレートカード ---------- */
  & .Feature-airec-card.-tpl {
    background: linear-gradient(180deg, rgba(50, 70, 92, 0.25) 0%, rgba(44, 49, 61, 0.9) 100%);
    overflow: hidden;
    /* SP: 左 padding 72px の影響で grid 幅が狭いため、aspect-ratio を外して
       min-height だけで高さを確保（カードがはみ出さないように） */
    min-height: 400px;
    min-width: 0;

    @media (min-width: 1080px) {
      aspect-ratio: auto;
      min-height: 540px;
    }

    /* このカードだけ body の最大幅を抑えて、本文を読みやすい行幅に */
    & .Feature-airec-card-body {
      max-width: 360px;
    }
  }

  & .Feature-airec-card-tpl-stage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70%;
    display: grid;
    /* SP: 狭いカード幅でも各セルが minmax で広がろうとして overflow しないよう
       minmax の最小を 0 にして 1fr に従わせる */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 20px;
    transform: rotate(15deg) translate(-10%, -25%);
    transform-origin: center;
    pointer-events: none;

    @media (min-width: 1080px) {
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 14px;
      padding: 40px;
    }
  }

  & .Feature-airec-card-tpl-item {
    background: #fafafa;
    border-radius: 13px;
    /* SP: padding と gap を圧縮 */
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #333333;
    min-width: 0;

    @media (min-width: 1080px) {
      padding: 18px;
      gap: 10px;
    }
  }

  & .Feature-airec-card-tpl-item img {
    width: 22px;
    height: 22px;

    @media (min-width: 1080px) {
      width: 32px;
      height: 32px;
    }
  }

  & .Feature-airec-card-tpl-item p {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 11px;
    color: #333333;
    line-height: 1.4;

    @media (min-width: 1080px) {
      font-size: 14px;
    }
  }

  /* ---------- 要約 ネクストアクション ---------- */
  & .Feature-airec-card.-nextact {
    /* SP: aspect-ratio を外して min-height だけで高さを確保 */
    min-height: 380px;
    min-width: 0;

    @media (min-width: 1080px) {
      aspect-ratio: auto;
      min-height: 540px;
    }
  }
  
  /* ===================
     05 章：自然な外音取り込み
       - chapter 自体に高さを確保して sticky のスクロール量を作る
       - media を sticky で画面に張り付かせる → 06 章が下から被さってくる
       - テキスト：画像内オーバーレイ（コンテナ右端寄り、is-inview でフェードイン）
       - 画像   ：スクロール連動 zoom（--amb-zoom 0〜1）
  =================== */
  /* sticky 媒体と 06 を包む block（Lead 親と同じ役割） */
  & .Feature-overlap-block {
    /* スクロール連動用の CSS 変数初期値。JS が 0→1 で更新する。
       子要素（.Feature-amb-media 等）でローカル宣言すると JS の値が継承で見えなくなるため、
       JS が触るこの要素に初期値を集約する。 */
    --amb-zoom: 0;
    --amb-pan: 0;
    position: relative;
    isolation: isolate;
    /* Feature-chapter と同じ章間スペースを末尾に保持 */
    margin-block-end: clamp(80px, 12vw, 160px);
  }

  /* 05 章 article は media の前に置いて、サイドバー連動のトリガー位置を block 上端と一致させる。
     IntersectionObserver が 0 サイズ要素を観測しないため、1px の最低高さを与える */
  & .Feature-chapter.-amb {
    min-height: 1px;
    /* block 親の末尾 margin で章間スペースを取るため、article 自身は 0 に */
    margin-block-end: 0;
  }

  & .Feature-amb-intro {
    position: absolute;
    z-index: 2;
    /* SP: 左の上下中央に配置（container 左端と一致） */
    top: 50%;
    bottom: auto;
    left: max(16px, calc((100vw - 90vw) / 2));
    right: auto;
    max-width: min(60%, 380px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    /* スクロール連動：--intro-progress (0→1) に応じて opacity + translateY を補間
       transition は外す：JS rAF の直接駆動と二重補間でカクつくため
       SP は -50% で上下中央配置の補正を加える */
    opacity: var(--intro-progress, 0);
    transform: translateY(calc(-50% + (1 - var(--intro-progress, 0)) * 14px));
    will-change: opacity, transform;

    @media (min-width: 1080px) {
      /* PC: 従来通り右上配置 */
      gap: 24px;
      top: 20%;
      bottom: auto;
      left: auto;
      right: max(20px, calc((100vw - min(92vw, 1600px)) / 2));
      transform: translateY(calc((1 - var(--intro-progress, 0)) * 14px));
    }
  }

  & .Feature-amb-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 24px;
    line-height: 1.5;
    color: #ffffff;
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }

  & .Feature-amb-lead {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.06em;

    @media (min-width: 1080px) {
      font-size: 15px;
      line-height: 2;
    }
  }

  & .Feature-amb-lead sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }

  & .Feature-amb-note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.7;
    color: #ffffff;
    letter-spacing: 0.02em;
  }

  /* sticky 画像：チャプター内で画面に張り付き、その上を 06 章が被さる */
  & .Feature-amb-media {
    /* --amb-zoom / --amb-pan は親 .Feature-overlap-block で初期化済み（継承で受け取る） */
    position: sticky;
    top: 0;
    z-index: 1;
    /* viewport 全幅まで拡張 */
    width: 100vw;
    /* 通常画面は画面いっぱい（下部余白なし）、大画面では最大値で頭打ち */
    height: min(100dvh, 1100px);
    /* sticky 継続時間を延長：block が長くなる分、画像が viewport に留まる時間が伸びる
       （.-disp の負 margin-block-start: -12dvh と collapse して net ≈ 100dvh の延長）
       margin と negative-margin が collapse する仕様を踏まえ、欲しい net 量より大きめに指定 */
    margin-block-end: 112dvh;
    /* SP：container が width 100% + padding-inline var(--gutter) になったので、
       要素中央 50% から左に 50vw 戻すことで viewport 左端に揃える（古典フルブリード） */
    margin-inline-start: calc(50% - 50vw);
    /* frame の scale 縮小は枠側で overflow を切る */
    overflow: hidden;

    @media (min-width: 1080px) {
      /* PC：container は 92vw centered で grid サイドバー + gap + content
         content 左端から viewport 左端まで戻すには side + gap + container 左 inset 分 */
      margin-inline-start: calc(
        -1 * (var(--feature-side-w-pc) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2)
      );
    }

    @media (min-width: 1200px) {
      margin-inline-start: calc(
        -1 * (var(--feature-side-w-wide) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2)
      );
    }
  }

  & .Feature-amb-media-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(calc(0.86 + 0.14 * var(--amb-zoom)));
    transform-origin: center center;
    /* 進入初期から見え始めるよう速めに不透明化（zoom 0 → 0.4 で 0 → 1） */
    opacity: clamp(0, calc(var(--amb-zoom) * 2.5), 1);
    will-change: transform, opacity;
  }

  & .Feature-amb-media-frame img {
    width: 100%;
    height: 115%;  /* 縦長にしてパララックスの可動域を確保 */
    object-fit: cover;
    object-position: center;
    display: block;
    /* スクロール進行に応じて 0 → -15% にパン（フルブリードの圧を和らげる） */
    transform: translate3d(0, calc(var(--amb-pan, 0) * -15%), 0);
    will-change: transform;
  }
  
  /* ===================
     06 章：ディスプレイ搭載
       05 章の画像に 06 章を被せる（Lead-scene / Lead-copy と同じ手法）
       - 負 margin で上に引き上げる
       - ::before で「上端は透明 → 下に向かって完全暗色」のグラデ
       - z-index + isolation で 05 章の画像より前面に
  =================== */
  & .Feature-chapter.-disp {
    /* 被さり量（sticky media に重なる距離）。小さくするほど 06 が遅れて来る */
    --disp-overlap: 12dvh;
    position: relative;
    z-index: 2;
    isolation: isolate;
    /* block 親内の前要素（article.-amb は margin-end: 0）から純粋に overlap 分被せる */
    margin-block-start: calc(-1 * var(--disp-overlap));
    /* グラデが完全に暗色に達した位置にコンテンツを置く（多段化で +30px 延長） */
    padding-block-start: calc(var(--disp-overlap) + 210px);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100%;
      /* SP：container が width 100% + padding-inline var(--gutter) になったので、
         要素中央 50% から左に 50vw 戻して viewport 左端に揃える */
      left: calc(50% - 50vw);
      pointer-events: none;
      /* 多段 ease-out グラデ：上端からゆっくり薄く立ち上がり、中盤で速く、終盤でゆっくり完全黒
         画像と黒の境界が見えないように 12 段ストップで滑らかに減衰 */
      background: linear-gradient(
        180deg in oklab,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(var(--disp-overlap) - 30px),
        rgba(0, 0, 0, 0.04) calc(var(--disp-overlap) - 10px),
        rgba(0, 0, 0, 0.12) calc(var(--disp-overlap) + 10px),
        rgba(0, 0, 0, 0.22) calc(var(--disp-overlap) + 35px),
        rgba(0, 0, 0, 0.35) calc(var(--disp-overlap) + 60px),
        rgba(0, 0, 0, 0.5) calc(var(--disp-overlap) + 85px),
        rgba(0, 0, 0, 0.66) calc(var(--disp-overlap) + 110px),
        rgba(0, 0, 0, 0.8) calc(var(--disp-overlap) + 135px),
        rgba(0, 0, 0, 0.9) calc(var(--disp-overlap) + 160px),
        rgba(0, 0, 0, 0.97) calc(var(--disp-overlap) + 185px),
        rgba(0, 0, 0, 1) calc(var(--disp-overlap) + 210px),
        rgba(0, 0, 0, 1) 100%
      );
      z-index: -1;

      @media (min-width: 1080px) {
        left: calc(-1 * (var(--feature-side-w-pc) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2));
      }

      @media (min-width: 1200px) {
        left: calc(-1 * (var(--feature-side-w-wide) + var(--feature-gap) + (100vw - min(92vw, 1600px)) / 2));
      }
    }
  }

  & .Feature-disp-top {
    display: flex;
    flex-direction: column;
    margin-block-start: 40px;

    @media (min-width: 1080px) {
      flex-direction: row;
      align-items: flex-start;
      margin-block-start: 60px;
    }

    /* is-inview で子の Feature-disp-media を reveal */
    &.is-inview .Feature-disp-media {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  & .Feature-disp-media {
    position: relative;
    width: 130%;
    background: transparent;
    overflow: hidden;
    /* SP: HTML 順そのまま（media → intro）で画像が上、画像は右端から大きくはみ出す（拡大 + 右寄せ）
       PC: row 並びで左に画像、右に intro */
    margin-right: -30%;

    /* 洗練された reveal アニメ: fade + 微スケール + 微浮上 */
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transform-origin: center center;
    transition:
      opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;

    @media (min-width: 1080px) {
     width: auto;
     height: 800px;
     margin-right: -5%;
    }
    

    /* 動画は縦長寄り（充電ケース）。padding-bottom で 1:1 枠を確保 */
    &::before {
      content: "";
      display: block;
      padding-block-end: 100%;
    }

    /* 動画下部だけを黒にフェードするオーバーレイ（上 / 左右は素のまま）
       長め（40% から始まる）の ease-out 多段ストップで滑らかに減衰し、
       85% で完全黒到達 → 85%〜100% の 15% 区間を完全黒で保持 */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.05) 45%,
        rgba(0, 0, 0, 0.13) 49%,
        rgba(0, 0, 0, 0.25) 54%,
        rgba(0, 0, 0, 0.4) 58%,
        rgba(0, 0, 0, 0.56) 63%,
        rgba(0, 0, 0, 0.71) 67%,
        rgba(0, 0, 0, 0.83) 72%,
        rgba(0, 0, 0, 0.92) 76%,
        rgba(0, 0, 0, 0.97) 81%,
        rgba(0, 0, 0, 1) 85%,
        rgba(0, 0, 0, 1) 100%
      );
    }

    @media (min-width: 1080px) {
      flex: 1;
      min-width: 0;
    }

    & video,
    & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* SP: cover + 右寄せで video を枠いっぱいまで拡大、右側に寄せる */
      object-fit: cover;
      object-position: right top;
      display: block;
      /* SP のみ少しだけ左下へ位置調整 */
      transform: translate(-8px, 16px);

      @media (min-width: 1080px) {
        /* PC: contain で動画全体が枠内に収まり、上下/左右が切れない */
        object-fit: contain;
        object-position: center;
        transform: none;
      }
    }
  }

  & .Feature-disp-intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 5;
    position: relative;
    margin-top: -40px;

    @media (min-width: 1080px) {
      flex: 0 0 30%;
      max-width: 300px;
      padding-block-start: 172px;
      gap: 30px;
      margin-top: 0;
    }
  }
  
  & .Feature-disp-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }
  
  & .Feature-disp-lead {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.06em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }
  
  /* ---------- 比較表 ---------- */
  & .Feature-disp-table {
    margin-block-start: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;

    @media (min-width: 1080px) {
      /* チャプター列の全幅に広げる（max-width 撤廃、比率は 1 : 1.44 : 1.44 ≒ Figma 259:373:373） */
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.44fr) minmax(0, 1.44fr);
      margin-block-start: 0px;
      margin-top: -100px;
            position: relative;
            z-index: 2;
    }
  }

  & .Feature-disp-table-head {
    display: contents;
  }

  & .Feature-disp-table-head-label {
    /* 空セル：左上 */
    grid-column: 1;
  }

  & .Feature-disp-table-head-prod {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 8px 32px;
    /* head の下線（最上段との境界線）は不要なので削除 */

    @media (min-width: 1080px) {
      gap: 25px;
      padding: 30px 8px 40px;
    }
  }
  
  & .Feature-disp-table-head-prod .-img {
    width: 100%;
    max-width: 130px;
    height: auto;
    object-fit: contain;

    @media (min-width: 1080px) {
      max-width: 200px;
    }
  }
  
  & .Feature-disp-table-head-prod .-name {
    margin: 0;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
  
    @media (min-width: 1080px) {
      font-size: 21px;
    }
  }
  
  & .Feature-disp-table-row {
    display: contents;
  }
  
  & .Feature-disp-table-label,
  & .Feature-disp-table-cell {
    display: flex;
    align-items: center;
    min-height: 49px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;
  
    @media (min-width: 1080px) {
      font-size: 13px;
      padding: 14px 16px;
    }
  }
  
  & .Feature-disp-table-label {
    justify-content: flex-start;
    /* ラベル列の下線のみ少し濃く（Figma: rgba(255,255,255,0.4)） */
    border-bottom-color: rgba(255, 255, 255, 0.4);
  }
  
  & .Feature-disp-table-cell {
    justify-content: center;
    text-align: center;
  }
  
  & .Feature-disp-table-cell .-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: transparent;
  }
  
  & .Feature-disp-table-cell .-text {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 10px;
    line-height: 1.4;
    color: var(--color-text-sub);
  
    @media (min-width: 1080px) {
      font-size: 11px;
    }
  }
  
  & .Feature-disp-table-cell .-none {
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-en);
    font-weight: 300;
  }
  
  & .Feature-disp-table-cell.-max .-text {
    color: #ffffff;
    font-weight: 500;
  }
  
  /* ===================
     07 章：デザイン性
  =================== */
  & .Feature-design-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 統一 24px、PC は 30px */
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }
  
  & .Feature-design-body {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.06em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }
  
  & .Feature-design-body sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }
  
  & .Feature-design-note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: #ffffff;
    letter-spacing: 0.04em;
  }
  
  /* ---------- 07 上段：耳に自然になじむ ----------
     SP / PC 共通：text を左 / img + metric をセットで右寄せ縦並び。
     metric は負 margin で img と重なる距離まで近づける */
  & .Feature-design-fit {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (min-width: 1080px) {
      gap: 0;
      min-height: 750px;
    }
  }

  /* 上部の比較画像（Liberty 5 ↔ Liberty 5 Pro）
     picture wrapper に class を当てている → 内側 img を子セレクタで指定
     SP: 最下段に配置（metric を右下に absolute 重ね）/ PC: 上部に絶対配置の流れ */
  & .Feature-design-fit-img {
    display: block;
    position: relative;
    align-self: flex-end;
    width: 100%;
    max-width: 660px;
    height: auto;
    z-index: 2;
    /* SP: text の下、最下段 */
    order: 3;
    /* SP: 下に余白 → metric (bottom:0) もこの分自動で下に下がる */
    margin-bottom: 90px;

    & > img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (min-width: 1080px) {
      width: 78%;
      max-width: none;
      order: 0;
      margin-bottom: 0;
    }
  }

  /* 比較画像の右上 + 背面に配置する光彩あしらい
     img と同じ右寄せ範囲に重ね、img の背後に位置する */
  & .Feature-design-fit-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 660px;
    aspect-ratio: 5 / 3;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      circle 32% at 78% 22%,
      rgba(225, 235, 245, 0.55) 0%,
      rgba(215, 228, 240, 0.42) 14%,
      rgba(200, 218, 232, 0.28) 28%,
      rgba(185, 208, 225, 0.18) 42%,
      rgba(170, 198, 218, 0.09) 60%,
      rgba(155, 188, 212, 0.04) 80%,
      transparent 100%
    );
    filter: blur(20px);

    @media (min-width: 1080px) {
      width: 78%;
      max-width: none;
    }
  }

  /* 左下：タイトル + 本文 + 注釈
     SP: 最上段（順番1）/ PC: 左下に absolute */
  & .Feature-design-fit-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* SP: 最上段 */
    order: 1;

    @media (min-width: 1080px) {
      position: absolute;
      left: 0;
      bottom: 0;
      max-width: 290px;
      gap: 22px;
      order: 0;
    }
  }

  /* 右側：Liberty 5 Pro シリーズ + 38% メトリック
     SP: 画像の右下に absolute 重ね（一回り小さく）
     PC: img の下に右寄せ縦並び */
  & .Feature-design-fit-metric {
    /* SP: 画像の右下に重ね配置 */
    position: absolute;
    right: 0;
    bottom: 0;
    align-self: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #ffffff;
    margin-block-start: 0;
    text-align: left;
    z-index: 4;

    @media (min-width: 1080px) {
      position: static;
      width: 260px;
      margin-block-start: -100px;
      align-self: flex-end;
      gap: 12px;
      order: 0;
    }

    /* 子要素のフォントカラーすべて白に統一 */
    & p,
    & span,
    & .-prefix,
    & .-num,
    & .-unit,
    & .-name,
    & .-sub {
      color: #ffffff;
    }
  }

  & .Feature-design-fit-metric-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-en);
    font-weight: 300;
    color: #ffffff;
  }

  & .Feature-design-fit-metric-eyebrow .-name {
    /* SP: もう一段小さく */
    font-size: 12px;
    letter-spacing: -0.01em;

    @media (min-width: 1080px) {
      font-size: 18px;
    }
  }

  & .Feature-design-fit-metric-eyebrow .-sub {
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP: もう一段小さく */
    font-size: 9px;

    @media (min-width: 1080px) {
      font-size: 14px;
    }
  }

  & .Feature-design-fit-metric-label {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    /* SP: 一回り小さく */
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin-bottom: 6px;

    @media (min-width: 1080px) {
      font-size: 12px;
      margin-bottom: 10px;
    }
  }

  & .Feature-design-fit-metric-value {
    margin: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    line-height: 1;
    position: relative;
    /* SP: 一回り小さく → padding 縮小 */
    padding-inline-start: 18px;

    @media (min-width: 1080px) {
      padding-inline-start: 24px;
    }
  }

  & .Feature-design-fit-metric-value .-prefix {
    position: absolute;
    left: 0;
    top: 10%;
    transform: translateY(-50%);
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP: 一回り小さく */
    font-size: 13px;

    @media (min-width: 1080px) {
      font-size: 22px;
    }
  }

  & .Feature-design-fit-metric-value .-num {
    font-family: var(--font-en);
    font-weight: 300;
    /* SP: 一回り小さく */
    font-size: 58px;
    letter-spacing: -0.05em;
    line-height: 0.81;

    @media (min-width: 1080px) {
      font-size: 137px;
    }
  }

  & .Feature-design-fit-metric-value .-unit {
    font-family: var(--font-en);
    font-weight: 400;
    /* SP: 一回り小さく */
    font-size: 21px;
    margin-block-end: 4px;

    @media (min-width: 1080px) {
      font-size: 46px;
      margin-block-end: 8px;
    }
  }
  
  /* ---------- 07 下段：洗練されたデザイン + AMOLED ---------- */
  & .Feature-design-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-block-start: 40px;
  
    @media (min-width: 1080px) {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-block-start: 100px;
    }
  }
  
  & .Feature-design-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid transparent;
    /* 極薄グラデ境界：上下左右で減衰してほぼ存在を感じない程度 */
    background-clip: padding-box;
    /* 比率固定：幅が変わっても画像が切れない / 中央寄せが維持される
       SP: 343 / 480 ≒ 0.715（縦長）, PC: 590 / 568 ≒ 1.04（ほぼ正方）
       テキストが多くて aspect-ratio 内に収まらない場合の保険として min-height も残す */
    aspect-ratio: 343 / 480;
    min-height: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;

    @media (min-width: 1080px) {
      aspect-ratio: 590 / 690;
      padding: 45px 35px;
    }
  }

  /* 極薄グラデ枠線（pseudo-element でカード上に重ねる） */
  & .Feature-design-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    display: none;
    border: 1px solid transparent;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 35%,
        rgba(255, 255, 255, 0.02) 65%,
        rgba(255, 255, 255, 0.06) 100%
      )
      border-box;
    -webkit-mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  
  & .Feature-design-card.-refined {
    background: linear-gradient(220deg, #373737 15%, #000000 20%, #121315 55%);
  }
  
  & .Feature-design-card.-wallpaper {
    background: #000;
  }
  
  & .Feature-design-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 280px;
  
    @media (min-width: 1080px) {
      gap: 20px;
    }
  }
  
  & .Feature-design-card-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-sub);
  
    @media (min-width: 1080px) {
      font-size: 20px;
    }
  }
  
  & .Feature-design-card-desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    line-height: 2;
    color: #ffffff;
    letter-spacing: 0.06em;
  }
  
  & .Feature-design-card-img {
    position: absolute;
    pointer-events: none;
  }
  
  /* 洗練されたデザイン：動画。カード下部に寄せて、上端から背景にフェード */
  & .Feature-design-card-img.-refined-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
  
  }

  & .Feature-design-card-img.-wallpaper-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  & .Feature-design-card.-wallpaper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(18, 19, 21) 0%, rgba(18, 19, 21, 0.64) 30%, rgba(18, 19, 21, 0.13) 60%, rgba(18, 19, 21, 0) 100%);
    z-index: 1;
  }

  /* 充電ケースのディスプレイ部分に重なるウィンドウ画像（5 枚 cross-fade）
     ※ 位置・サイズはケース画像（liberty5pro-design-b.webp）のディスプレイ枠に合わせて調整
     ※ bottom 基準で配置（カード下端 = ケース下端を起点に上方向で位置決め） */
  & .Feature-design-card-window {
    position: absolute;
    left: 50%;
    bottom: 21.1%;
    transform: translateX(-50%);
    width: 34%;
    aspect-ratio: 1 / 1;
    border-radius: 22%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;

    @media (min-width: 1080px) {
      width: 29%;
      bottom: 20.5%;
      border-radius: 20%;
    }
  }

  & .Feature-design-card-window .-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* 5 枚で 1 周。各 4s 表示 + フェード重ね → 周期 20s */
    animation: liberty5proWindowFade 20s infinite;
    will-change: opacity;
  }

  /* 順番：05 (-f1) → 01 (-f2) → 02 (-f3) → 03 (-f4) → 04 (-f5)
     各 4s 間隔でディレイを入れる */
  & .Feature-design-card-window .-f1 { animation-delay: 0s; }
  & .Feature-design-card-window .-f2 { animation-delay: 4s; }
  & .Feature-design-card-window .-f3 { animation-delay: 8s; }
  & .Feature-design-card-window .-f4 { animation-delay: 12s; }
  & .Feature-design-card-window .-f5 { animation-delay: 16s; }
  
  /* ===================
     08 章：最大 28 時間再生
       PC: 絶対配置で「テキスト(左上) / 女性写真(右上) / 製品写真(中央下) /
           6.5h(女性耳の位置) / 28h(製品写真の左)」のレイアウト
       SP: flex column で縦積み（自然な順序：テキスト → 写真 → 統計 → ケース）
  =================== */
  & .Feature-battery-hero {
    position: relative;
    /* SP: 2 列 grid（上段：画像フル幅、下段：text 左 広め / bottom 右 細め） */
    display: grid;
    grid-template-columns: 2.6fr 1fr;
    column-gap: 30px;
    row-gap: 0;
    margin-block-start: 80px;

    @media (min-width: 1080px) {
      display: block;
      gap: 0;
      margin-block-start: 80px;
      min-height: 850px;
    }
  }

  /* 女性写真の wrap：overflow: hidden で内部 img のパララックス移動をクリッピング */
  & .Feature-battery-hero-bg-wrap {
    /* SP: viewport 全幅にブリードアウト + grid 2 列にまたがる + 縦長に */
    position: relative;
    grid-column: 1 / -1;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    z-index: 1;

    /* SP のみ：写真下部に黒フェードグラデで後続テキストとの境界を馴染ませる
       多段ストップ + ease-out 曲線でバンディング回避 */
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 45%;
      pointer-events: none;
      z-index: 2;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.05) 10%,
        rgba(0, 0, 0, 0.13) 20%,
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.56) 50%,
        rgba(0, 0, 0, 0.71) 60%,
        rgba(0, 0, 0, 0.83) 70%,
        rgba(0, 0, 0, 0.92) 80%,
        rgba(0, 0, 0, 0.97) 90%,
        #000 100%
      );
    }

    @media (min-width: 1080px) {
      position: absolute;
      top: 0;
      /* 写真開始 42%、右端まで（幅 58%） */
      left: 42%;
      right: 0;
      width: 58%;
      margin-inline: 0;
      height: 78%;
      aspect-ratio: auto;

      /* PC は別途 Feature-battery-hero::after で同様のフェードを出すため SP 用は無効化 */
      &::after {
        display: none;
      }
    }
  }

  /* 女性写真本体：wrap より縦に大きく（115%）して上下移動の余裕を確保
     スクロール連動パララックス（余韻のある smooth lerp で JS が更新） */
  & .Feature-battery-hero-bg {
    width: 100%;
    height: 115%;
    object-fit: cover;
    object-position: center top;
    transform: translate3d(0, var(--battery-bg-y, 0), 0);
    will-change: transform;
  }

  /* 女性写真の下部を黒にフェード（製品写真と馴染ませる）— PC のみ */
  @media (min-width: 1080px) {
    & .Feature-battery-hero::after {
      content: "";
      position: absolute;
      top: 0;
      /* 写真の開始位置に追従 */
      left: 42%;
      width: 58%;
      height: 78%;
      pointer-events: none;
      z-index: 2;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.05) 51%,
        rgba(0, 0, 0, 0.13) 57%,
        rgba(0, 0, 0, 0.25) 63%,
        rgba(0, 0, 0, 0.4) 69%,
        rgba(0, 0, 0, 0.56) 74%,
        rgba(0, 0, 0, 0.71) 79%,
        rgba(0, 0, 0, 0.83) 84%,
        rgba(0, 0, 0, 0.92) 89%,
        rgba(0, 0, 0, 0.97) 94%,
        rgba(0, 0, 0, 1) 100%
      );
    }
  }

  /* 左上: タイトル + 本文 + 注釈
     SP: grid 左カラム、PC: 絶対配置で左上に重ねる */
  & .Feature-battery-hero-text {
    position: relative;
    z-index: 3;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* SP: 上部の女性画像の下端と重ねる（画像下部の黒フェードに被さる形） */
    margin-block-start: -90px;
    padding-block-start: 24px;

    @media (min-width: 1080px) {
      position: absolute;
      top: 0;
      left: 0;
      gap: 35px;
      max-width: 290px;
      margin-block-start: 0;
      padding-block-start: 0;
    }
  }
  
  & .Feature-battery-stat {
    position: relative;
    z-index: 2;
    color: #ffffff;
  }
  
  & .Feature-battery-stat .-label {
    margin: 0 0 5px;
    font-family: var(--font-jp);
    font-weight: 300;
    color: white;
    font-size: 11px;
    
    @media (min-width: 1080px) {
      margin: 0 0 10px;
      font-size: 12px;
    }
  }
  
  & .Feature-battery-stat .-value {
    margin: 0;
    color: #ffffff;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    line-height: 1;
    position: relative;
    padding-inline-start: 0.7em;
  }
  
  /* 「最」「大」を縦書きで数字の左上に配置 */
  & .Feature-battery-stat .-prefix {
    position: absolute;
    left: 0;
    top: 6px;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 10px;
    writing-mode: vertical-rl;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  
  & .Feature-battery-stat .-num {
    font-family: var(--font-en);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 0.82;
  }
  
  & .Feature-battery-stat.-combo .-num {
    /* SP: 製品画像 (115px) より小さく */
    font-size: 70px;

    @media (min-width: 1080px) {
      font-size: 185px;
    }
  }
  
  & .Feature-battery-stat.-single .-num {
    font-size: 56px;
  
    @media (min-width: 1080px) {
      font-size: 70px;
    }
  }
  
  & .Feature-battery-stat .-unit {
    font-family: var(--font-en);
    font-weight: 600;
    margin-inline-start: 4px;
    
  }
  
  & .Feature-battery-stat.-combo .-unit {
    font-size: 30px;
    margin-block-end: 1px;
  
    @media (min-width: 1080px) {
      font-size: 62px;
      margin-block-end: 8px;
    }
  }
  
  & .Feature-battery-stat.-single .-unit {
    font-size: 22px;
    margin-block-end: 4px;
  
    @media (min-width: 1080px) {
      font-size: 30px;
    }
  }
  
  /* .-mark（※）は h の上にくっつく自然な superscript として配置 */
  & .Feature-battery-stat .-mark {
    font-family: var(--font-jp);
    font-weight: 200;
    font-size: 9px;
    line-height: 1;
    vertical-align: super;
    margin-inline-start: 2px;
  }
  
  /* 28h（イヤホン & ケース）: .Feature-battery-hero-bottom 内の flex item として
     製品画像の左に隣接配置（セットで横並び） */
  & .Feature-battery-stat.-combo {
    @media (min-width: 1080px) {
      flex-shrink: 0;
      z-index: 3;
    }
  }

  /* 6.5h（イヤホン単体）
     SP: 女性写真の左上に absolute 配置（画像にオーバーレイ）
     PC: 写真中央に絶対配置（耳付近） */
  & .Feature-battery-stat.-single {
    position: absolute;
    top: 30px;
    left: 16px;
    z-index: 4;
    color: #fff;

    @media (min-width: 1080px) {
      top: 8%;
      left: calc(42% + 29%);  /* = 71%（写真中央） */
      transform: translateX(-50%);
      /* 写真中央から左にずらす量。耳の位置に合わせて調整 */
      margin-inline-start: -120px;
    }

    /* 引き出し線は一旦非表示 */
    &::after,
    &::before {
      display: none;
    }
  }

  /* 28h + 製品画像をセットで横並び配置
     SP: grid 右カラム（text と横並び）、内部は column で 28h 上 / ケース下
     PC: 絶対配置で中央寄せ・少し左寄り、内部は row */
  & .Feature-battery-hero-bottom {
    position: relative;
    z-index: 3;
    grid-column: 2;
    /* SP: grid セル上端で止めて、左テキスト分まで伸びない */
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* SP: 上部画像と重ねる（text と同量引き上げ） */
    margin-block-start: -90px;
    padding-block-start: 24px;

    @media (min-width: 1080px) {
      position: absolute;
      left: 33%;                        /* 中央より大きく左寄り */
      bottom: 0;
      transform: translateX(-50%);      /* セットの中心を left 位置に */
      flex-direction: row;
      align-items: flex-end;
      align-self: start;
      gap: 20px;
      margin-block-start: 0;
      padding-block-start: 0;
    }
  }

  /* 製品画像 wrap：ノイズブラーを左下に重ねるためのレイヤー親
     親（hero-bottom）が position: absolute で固有幅を持たないため、
     viewport 基準（vw）で wrap 幅を決めて循環を回避 */
  & .Feature-battery-hero-case-wrap {
    position: relative;
    flex-shrink: 0;
    /* SP: 製品画像をさらに小さく + 28h より上に表示 */
    width: min(30vw, 115px);
    order: -1;

    @media (min-width: 1080px) {
      width: clamp(200px, 17vw, 280px);
      order: 0;
    }
  }

  /* 製品画像左下のアンビエント光：SVG 画像に置換（filter: blur 不使用、iOS Safari セーフ）
     周辺は radial mask でフェード → 矩形エッジを消す */
  & .Feature-battery-hero-noise {
    position: absolute;
    left: -48%;
    bottom: -30%;
    width: 130%;
    scale: 2.4;
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
    object-position: 35% 75%;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    -webkit-mask-image: radial-gradient(
      circle at 35% 75%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.97) 15%,
      rgba(0, 0, 0, 0.86) 30%,
      rgba(0, 0, 0, 0.62) 45%,
      rgba(0, 0, 0, 0.32) 60%,
      rgba(0, 0, 0, 0.1) 75%,
      transparent 85%
    );
    mask-image: radial-gradient(
      circle at 35% 75%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.97) 15%,
      rgba(0, 0, 0, 0.86) 30%,
      rgba(0, 0, 0, 0.62) 45%,
      rgba(0, 0, 0, 0.32) 60%,
      rgba(0, 0, 0, 0.1) 75%,
      transparent 85%
    );
  }

  /* 中央〜下: 白い充電ケース＋イヤホン製品写真
     スクロール連動表示：opacity と translateY を JS の smooth lerp で動かす */
  & .Feature-battery-hero-case {
    position: relative;
    z-index: 3;
    width: 95%;
    height: auto;
    opacity: var(--battery-case-opacity, 0);
    will-change: opacity;
    @media (min-width: 1080px) {
      width: 100%;
    }
  }

  /* ---------- 08 下段：マグネット式 ワイヤレス充電
     画像を左 50% に背景配置（右端は背景色へフェード）、テキストを右 65% で被せる
     枠線は薄い白透明グラデ（pseudo-element） */
  & .Feature-battery-magnet {
    position: relative;
    background: #161718;
    border: 1px solid transparent;
    border-radius: 0;
    overflow: hidden;
    margin-block-start: 60px;

    @media (min-width: 1080px) {
      display: flex;
      align-items: stretch;
      min-height: 280px;
      margin-block-start: 100px;
    }
  }

  /* 薄い白透明のグラデ枠線（4 辺で減衰、ほぼ存在感ゼロ） */
  & .Feature-battery-magnet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border: 1px solid transparent;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 255, 255, 0.1) 100%
      ) border-box;
    -webkit-mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  /* 画像エリア：PC で左 50% に absolute 背景配置、右端は背景色へフェード
     SP は控えめなアスペクト比（16:9）で縦の占有を抑える */
  & .Feature-battery-magnet-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    @media (min-width: 1080px) {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      aspect-ratio: auto;
      z-index: 1;
    }

    /* 右端を背景色 #161718 へフェード（SP は下端方向、PC は右方向） */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        rgba(22, 23, 24, 0) 0%,
        rgba(22, 23, 24, 0) 40%,
        rgba(22, 23, 24, 0.2) 65%,
        rgba(22, 23, 24, 0.55) 82%,
        rgba(22, 23, 24, 0.85) 94%,
        rgba(22, 23, 24, 1) 100%
      );

      @media (min-width: 1080px) {
        background: linear-gradient(
          to right,
          rgba(22, 23, 24, 0) 0%,
          rgba(22, 23, 24, 0) 40%,
          rgba(22, 23, 24, 0.15) 55%,
          rgba(22, 23, 24, 0.4) 70%,
          rgba(22, 23, 24, 0.7) 82%,
          rgba(22, 23, 24, 0.9) 92%,
          rgba(22, 23, 24, 1) 100%
        );
      }
    }
  }

  & .Feature-battery-magnet-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* テキストブロック：PC で全幅の 65%、右寄せ。中身は上下＋左右ともに中央 */
  & .Feature-battery-magnet-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 24px 35px;
    align-items: center;
    text-align: center;

    @media (min-width: 1080px) {
      width: 50%;
      margin-inline-start: auto;
      padding: 40px 50px;
      gap: 22px;
      justify-content: center;
      min-height: 100%;
    }
  }

  & .Feature-battery-magnet-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;

    @media (min-width: 1080px) {
      font-size: 20px;
    }
  }

  & .Feature-battery-magnet-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  & .Feature-battery-magnet-desc {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.06em;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }

  & .Feature-battery-magnet-note {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
    color: #ffffff;
    letter-spacing: 0.04em;
  }

  /* ===================
     09 章：多様な便利機能
  =================== */
  & .Feature-chapter.-utility {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-block: 40px 50px;

    @media (min-width: 1080px) {
      gap: 50px;
      padding-block: 200px 120px;
    }
  }

  & .Feature-utility-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;

    @media (min-width: 1080px) {
      flex-direction: row;
      gap: 36px;
      align-items: flex-start;
      justify-content: space-between;
    }
  }

  & .Feature-utility-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-block-start: 0;
    width: 88%;

    @media (min-width: 1080px) {
      flex: 0 1 449px;
      max-width: 449px;
      gap: 25px;
      width: 100%;
      padding-block-start: 10px;
    }
  }

  & .Feature-utility-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    /* SP 24px、PC は 26px */
    font-size: 24px;
    line-height: 1.5;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;
    font-feature-settings: 'palt' 1;

    @media (min-width: 1080px) {
      font-size: 26px;
    }
  }

  & .Feature-utility-body {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    color: var(--color-text-sub);
    letter-spacing: 0.03em;
    font-feature-settings: 'palt' 1;

    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }

  & .Feature-utility-note {
    margin: 0;
    max-width: 257px;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.5;
    color: #ffffff;
    opacity: 0.6;
    letter-spacing: 0.02em;
  }

  & .Feature-utility-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 520 / 325;
    overflow: hidden;
    background: #23272a;

    @media (min-width: 1080px) {
      flex: 0 0 520px;
      width: 520px;
      height: 325px;
      aspect-ratio: auto;
    }
  }

  & .Feature-utility-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  & .Feature-utility-divider {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
  }

  /* フェードイン（既存 [data-inview] パターンと統一） */
  & .Feature-chapter.-utility [data-inview] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  & .Feature-chapter.-utility [data-inview].is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===================
     Compare（Liberty 5 Pro シリーズ 比較表）
     - トンマナは Feature-disp-table を踏襲
     - SP は 3 列維持で font/padding 縮小、PC は label : max : pro = 1 : 1.44 : 1.44
  =================== */
  & .Compare {
    position: relative;
    background: #1b1c23;
    color: var(--color-text);
    padding-block: 80px;
    isolation: isolate;
    overflow: hidden;

    @media (min-width: 1080px) {
      padding-block: 100px;
    }

    /* ノイズテクスチャを薄く重ねる */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 220px 220px;
      opacity: 0.06;
      mix-blend-mode: screen;
    }

    /* 内部要素はノイズの上に */
    & > * {
      position: relative;
      z-index: 1;
    }
  }

  & .Compare-inner {
    /* SP: 縦並び（タイトル → 表 → 脚注） / PC: タイトル左 + (表 + 脚注) 右 の grid 2 カラム
       幅は Feature-container と一致（SP: 90vw / PC: min(92vw, 1600px)） */
    width: 90vw;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;

    @media (min-width: 1080px) {
      width: min(92vw, 1600px);
      grid-template-columns: minmax(220px, 22%) minmax(0, 1fr);
    }
  }

  & .Compare-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: #ffffff;
    font-feature-settings: 'palt' 1;
    /* SP: en と jp を inline で並べる（自然に改行） */
    display: inline-block;

    @media (min-width: 1080px) {
      grid-column: 1;
      grid-row: 1 / 3;
      align-self: start;
      display: flex;
      flex-direction: column;
      gap: 15px;
      line-height: 1.3;
      padding-block-start: 27px;
    }
  }

  & .Compare-title .-en {
    /* メインタイトル：英字フォントで Liberty 5 がコンテナ幅いっぱいになるサイズ
       PC の左カラム ≒ 220〜352px (22%) に対し、Liberty 5（9 文字 ≒ 4.25em）が収まる font-size */
    display: block;
    font-family: var(--font-en);
    font-weight: 200;
    font-size: 52px;
    letter-spacing: -0.03em;
    line-height: 0.95;
    /* 行ごと下から滑り上げる演出のため、はみ出した子要素をクリップ */
    overflow: hidden;

    @media (min-width: 1080px) {
      /* 1080vw で 48px / 1600vw で 80px ≒ Liberty 5 が 340px ≒ 22% 枠（352px）にちょうど収まる */
      font-size: clamp(48px, 5vw, 80px);
    }
  }

  /* 各行は下から overflow に隠れる位置で待機、is-inview で 0 へ。
     行ごとに transition-delay を増やして上から順に出てくる stagger */
  & .Compare-title .-en .-row {
    display: block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  & .Compare-title .-en .-row:nth-child(1) { transition-delay: 0s; }
  & .Compare-title .-en .-row:nth-child(2) { transition-delay: 0.12s; }
  & .Compare-title .-en .-row:nth-child(3) { transition-delay: 0.24s; }

  & .Compare-title.is-inview .-en .-row {
    transform: translateY(0);
  }

  /* タイトル全体の generic fade-up はキャンセル（行 stagger で表現するため） */
  & .Compare .Compare-title[data-inview] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  & .Compare-title .-jp {
    /* サブ：「比較表」は控えめに */
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 13px;
    margin-inline-start: 0.4em;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;

    @media (min-width: 1080px) {
      font-size: 16px;
      margin-inline-start: 0;
    }
  }

  & .Compare-table {
    display: grid;
    /* SP: ラベル列 30% / 残り 35% × 2 / PC: 1 : 1.44 : 1.44（既存比率） */
    grid-template-columns: 30% minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;

    @media (min-width: 1080px) {
      grid-column: 2;
      grid-row: 1;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.44fr) minmax(0, 1.44fr);
    }
  }

  & .Compare-table-head {
    display: contents;
  }

  & .Compare-table-head-label {
    grid-column: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  }

  & .Compare-table-head-prod {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 6px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);

    @media (min-width: 1080px) {
      gap: 20px;
      padding: 24px 12px 30px;
    }
  }

  & .Compare-table-head-prod .-img {
    width: auto;
    height: 100px;
    max-width: 100%;
    object-fit: contain;

    @media (min-width: 1080px) {
      height: 130px;
    }
  }

  & .Compare-table-head-prod .-name {
    margin: 0;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;

    @media (min-width: 1080px) {
      font-size: 20px;
    }
  }

  & .Compare-table-row {
    display: contents;
    /* 行ごとの stagger 用 delay（CSS variable は display: contents 親でも継承される） */
    --row-delay: 0s;
  }

  /* head は最初に出るので delay 0、row は 0.06s 刻みで stagger */
  & .Compare-table-row:nth-of-type(2)  { --row-delay: 0.06s; }
  & .Compare-table-row:nth-of-type(3)  { --row-delay: 0.12s; }
  & .Compare-table-row:nth-of-type(4)  { --row-delay: 0.18s; }
  & .Compare-table-row:nth-of-type(5)  { --row-delay: 0.24s; }
  & .Compare-table-row:nth-of-type(6)  { --row-delay: 0.30s; }
  & .Compare-table-row:nth-of-type(7)  { --row-delay: 0.36s; }
  & .Compare-table-row:nth-of-type(8)  { --row-delay: 0.42s; }
  & .Compare-table-row:nth-of-type(9)  { --row-delay: 0.48s; }
  & .Compare-table-row:nth-of-type(10) { --row-delay: 0.54s; }
  & .Compare-table-row:nth-of-type(11) { --row-delay: 0.60s; }
  & .Compare-table-row:nth-of-type(12) { --row-delay: 0.66s; }

  /* Dolby Atmos アイコン（3D オーディオ行のセル内、テキスト上部に表示） */
  & .Compare-table-dolby-icon {
    width: clamp(90px, 10vw, 100px);
    height: auto;
    align-self: center;
    object-fit: contain;
  }

  & .Compare-table-label,
  & .Compare-table-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-text-sub);
    letter-spacing: 0.02em;
    font-feature-settings: 'palt' 1;

    @media (min-width: 1080px) {
      min-height: 64px;
      gap: 6px;
      padding: 14px 16px;
      font-size: 13px;
    }
  }

  /* head セル：table の is-inview で fade up（従来通り） */
  & .Compare-table-head-label,
  & .Compare-table-head-prod {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  & .Compare-table.is-inview .Compare-table-head-label,
  & .Compare-table.is-inview .Compare-table-head-prod {
    opacity: 1;
    transform: translateY(0);
  }

  & .Compare-table-label {
    align-items: flex-start;
    text-align: left;
    /* ラベル列は少し濃いめの下線（Figma: rgba(255,255,255,0.4)） */
    border-bottom-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
  }

  & .Compare-table-label sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.15em;
    font-weight: 300;
    line-height: 0;
  }

  & .Compare-table-label .-mainlabel {
    display: block;
    width: 100%;
    white-space: nowrap;
  }

  & .Compare-table-label .-sublabel {
    display: block;
    width: 100%;
    font-size: 0.85em;
    opacity: 0.7;
    letter-spacing: 0;
    white-space: nowrap;
  }

  & .Compare-table-cell {
    align-items: center;
    text-align: center;
  }

  /* セル内テキスト要素 */
  & .Compare-table-cell .-main {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.02em;

    @media (min-width: 1080px) {
      font-size: 22px;
    }
  }

  & .Compare-table-cell .-text {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: #ffffff;

    @media (min-width: 1080px) {
      font-size: 13px;
    }
  }

  & .Compare-table-cell .-text sup {
    font-size: 0.6em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }

  & .Compare-table-cell .-sub {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 9px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;

    @media (min-width: 1080px) {
      font-size: 11px;
    }
  }

  & .Compare-table-cell .-sub sup {
    font-size: 0.65em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    margin-inline-start: 0.1em;
  }

  & .Compare-table-cell .-stars {
    font-family: var(--font-jp);
    font-size: 12px;
    line-height: 1;
    color: var(--color-star);
    letter-spacing: 0.04em;

    @media (min-width: 1080px) {
      font-size: 16px;
    }
  }

  & .Compare-table-cell .-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: transparent;

    @media (min-width: 1080px) {
      width: 11px;
      height: 11px;
    }
  }

  & .Compare-table-cell .-none {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);

    @media (min-width: 1080px) {
      font-size: 16px;
    }
  }

  & .Compare-notes {
    margin: 20px 0 0;
    font-family: var(--font-jp);
    font-weight: 300;
    font-size: 10px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0em;
    text-align: end;

    @media (min-width: 1080px) {
      grid-column: 2;
      grid-row: 2;
    }
  }

  /* 比較表下部：他シリーズ一覧へのバナーリンク（a121d banner-section 参考）
     SP: visual 上 / content 下 の縦並び
     PC: visual 左 / content 右 の横並び。hover で右矢印が flow アニメ */
  & .Compare-series-banner {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-block-start: 60px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.3s ease, background 0.3s ease;

    @media (min-width: 1080px) {
      flex-direction: row;
      align-items: stretch;
      margin-block-start: 100px;
      padding: 24px;
      border-radius: 10px;
      grid-column: 1 / -1;
    }

    &:hover {
      border-color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.04);
    }

    &:hover .Compare-series-banner-arrow {
      animation: compareBannerArrowFlow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
  }

  & .Compare-series-banner-visual {
    flex: 1.5;
    line-height: 0;
    width: 100%;

    @media (min-width: 1080px) {
      flex: 2.6;
      border-radius: 16px;
      aspect-ratio: auto;
      width: auto;
    }

    & img {
      width: 100%;
      height: auto;
      border-radius: 6px;
      object-fit: contain;
      display: block;

      @media (min-width: 1080px) {
        height: auto;
        border-radius: 8px;
        object-fit: initial;
      }
    }
  }

  & .Compare-series-banner-img {
    display: block;
    width: 100%;
    height: auto;
  }

  & .Compare-series-banner-content {
    flex: 1;
    position: relative;
    min-height: 140px;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    @media (min-width: 1080px) {
      padding: 40px;
      min-height: auto;
    }
  }

  & .Compare-series-banner-title {
    margin: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-align: center;
    color: #ffffff;

    @media (min-width: 1080px) {
      font-size: 26px;
    }
  }

  & .Compare-series-banner-btn-wrap {
    position: absolute;
    right: 0;
    bottom: 0;

    @media (min-width: 1080px) {
      right: 20px;
      bottom: 20px;
    }
  }

  & .Compare-series-banner-circle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    @media (min-width: 1080px) {
      width: 64px;
      height: 64px;
    }
  }

  & .Compare-series-banner-arrow {
    width: 22px;
    height: 22px;
    stroke: #ffffff;

    @media (min-width: 1080px) {
      width: 28px;
      height: 28px;
    }
  }

  & .Compare [data-inview] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  & .Compare [data-inview].is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  /* table 全体の fade up はキャンセル（行単位の slide up で表示するため） */
  & .Compare .Compare-table[data-inview] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ===================
     lp-soundcore-foot（Authority / Lineup / BrandBanner）の文字バランス最適化
     共通 CSS（lp-soundcore-foot.css）の上書き。LP 内のタイポ基準に揃える
  =================== */
  & .lp-soundcore-foot {
    /* Authority 見出し（Anker のオーディオ&ビジュアルブランド〜） */
    & .Authority h2 {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: clamp(22px, 3.5vw, 38px);
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    /* Authority 数値ラベル / サブテキスト */
    & .Authority .imgList .value .sub {
      font-size: clamp(12px, 1.3vw, 14px);
      line-height: 1.6;
      letter-spacing: 0.04em;
    }
    & .Authority .imgList .value .data {
      font-size: clamp(28px, 4vw, 44px);
      letter-spacing: 0.02em;
      line-height: 1.2;
    }

    /* Authority caption */
    & .Authority .m-caption li {
      font-size: clamp(10px, 1.1vw, 12px);
      line-height: 1.7;
      letter-spacing: 0.02em;
    }

    /* Lineup タイトル（Soundcore の全ラインナップ見る） */
    & .Lineup .lineup-title {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: clamp(22px, 3.5vw, 38px);
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    /* Lineup カードの見出し（完全ワイヤレスイヤホン 等） */
    & .Lineup .lineup-item-title {
      font-family: var(--font-jp);
      font-weight: 500;
      font-size: clamp(16px, 1.8vw, 22px);
      line-height: 1.5;
      letter-spacing: 0.04em;
    }

    /* Lineup カードの説明文 */
    & .Lineup .lineup-item-desc {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: clamp(12px, 1.3vw, 14px);
      line-height: 1.85;
      letter-spacing: 0.04em;
    }

    /* Lineup カードの「一覧を見る」リンク */
    & .Lineup .view-more-link {
      font-size: clamp(11px, 1.2vw, 13px);
      line-height: 1.5;
      letter-spacing: 0.04em;
    }

    /* BrandBanner タイトル */
    & .BrandBanner .collection-brand-bnr-txt .ttl {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: clamp(20px, 3vw, 32px);
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    /* BrandBanner 紹介文 */
    & .BrandBanner .collection-brand-bnr-txt .prof {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: clamp(12px, 1.3vw, 14px);
      line-height: 1.9;
      letter-spacing: 0.04em;
    }

    /* BrandBanner 注釈 */
    & .BrandBanner .collection-brand-bnr-notes p {
      font-size: clamp(11px, 1.2vw, 13px);
      line-height: 1.8;
      letter-spacing: 0.02em;
    }
    & .BrandBanner .collection-brand-bnr-notes .m-caption li {
      font-size: clamp(10px, 1.1vw, 12px);
      line-height: 1.7;
      letter-spacing: 0.02em;
    }
  }

  /* lp-soundcore-foot スニペット内 .Lineup の wrap を Compare-inner と同じ幅に揃える
     このLPだけのスコープで上書き（スニペット本体は触らない） */
  & .Lineup .wrap {
    width: 90vw;
    max-width: none;
    margin-inline: auto;

    @media (min-width: 1080px) {
      width: min(92vw, 1600px);
    }
  }
}