/** Shopify CDN: Minification failed

Line 196:5 Cannot use type selector "--primary" directly after nesting selector "&"
Line 197:5 Cannot use type selector "--ghost" directly after nesting selector "&"
Line 198:5 Cannot use type selector "--sm" directly after nesting selector "&"
Line 242:5 Cannot use type selector "__label" directly after nesting selector "&"
Line 755:5 Cannot use type selector "__head" directly after nesting selector "&"
Line 756:5 Cannot use type selector "__step" directly after nesting selector "&"
Line 757:5 Cannot use type selector "__title" directly after nesting selector "&"
Line 758:5 Cannot use type selector "__lead" directly after nesting selector "&"

**/
/* =============================================================================
   横展開ガイド（汎用 / 固有の分類）
   各セクション見出しの先頭タグで判別:
     [A] 汎用パーツ ……… そのまま他LPへコピー可（ブランド共通で使える）
     [B] 汎用パターン …… 骨格(レイアウト/構造)は流用、色・文言・画像は差し替え前提
     [C] このLP固有 …… 移植非推奨（このプライムデーLP専用。作り替え前提）

   [A] 汎用パーツ：
     - Mont @font-face（英字フォント）
     - トークン（カラー/--en/--pps-pad/--pps-radius）※ブランド設計トークン
     - .pps-btn（共通ボタン）/ .hscroll（横スクロール）/ .pps-countdown（カウントダウン）
     - .pps-sec（セクション共通ラッパ：幅・見出し）
     - .lpc（商品カード lp-product-card）★横展開の主役
     - 価格ブロック（product-price-v2 上書き：横並び/%OFF/税込）
     - タブ（CSSのみのタブUI）
   [B] 汎用パターン（型のみ流用）：
     - ベントー（.pps-why__bcard 系のカードグリッド）
     - 比較表 / 特典 / 安心3点 / sticky アンカーナビ / 下部追従バー
   [C] このLP固有：
     - :has() overflow解除 / 各種 @keyframes / 告知バー
     - ヒーロー KV（.pps-hero 一式）/ 診断 / WHY ANKER の中身 / 人気の2モデル
   ============================================================================= */

/* [A] ── Mont（英字見出し用：MontForAnker） ── */
@font-face {
  font-family: "Mont";
  src: url("/cdn/shop/files/MontForAnker-Book.woff2?v=1736241676") format("woff2"),
       url("/cdn/shop/files/MontForAnker-Book.woff") format("woff");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("/cdn/shop/files/MontForAnker-SemiBold.woff2?v=1736241329") format("woff2"),
       url("/cdn/shop/files/MontForAnker-SemiBold.woff?v=1736241329") format("woff");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* 祖先の overflow:hidden が position:sticky（追従）を無効化するため解除 */
.page-container:has(.page-primeday2026-power),
.themeV2:has(.page-primeday2026-power) {
  overflow: visible !important;
}

@keyframes pps-hero-swap-a {
  0%, 46% { opacity: 1; }
  50%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pps-hero-swap-b {
  0%, 46% { opacity: 0; }
  50%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pps-hero-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* KV 風景スライド：クロスフェード＋ゆっくりズーム（Ken Burns）。表示窓は全体の約25%＝4枚で seamless */
@keyframes pps-benefits-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* 洗練切替（合成のみ）：ゆったりクロスフェード＋Ken Burns（寄りながら微パン）。opacity / transform だけ＝再描画ゼロ。
   サイクル 15s ÷ 3枚 ＝ 5s間隔、フェードは 12% ＝ 約1.8s */
@keyframes pps-scene-frame {
  0%   { opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  12%  { opacity: 1; }
  100% { opacity: 1; }
}
/* 表示中はゆっくり動き続ける（次のフェードが被さるまで止まらない）。偶数シーンは逆方向パン */
@keyframes pps-scene-img {
  0%   { transform: scale(1.05) translateX(1%); }
  45%  { transform: scale(1.12) translateX(-1%); }
  100% { transform: scale(1.12) translateX(-1%); }
}
@keyframes pps-scene-img-rev {
  0%   { transform: scale(1.05) translateX(-1%); }
  45%  { transform: scale(1.12) translateX(1%); }
  100% { transform: scale(1.12) translateX(1%); }
}
/* z-index は transform と別アニメに分離（同一 keyframes に混ぜると合成が阻害される）。
   z3 の保持は「次のフェードが完全に不透明になる 45.3%」まで＝フェード中に下敷きが差し替わる瞬間ジャンプを防ぐ */
@keyframes pps-scene-depth {
  0%    { z-index: 4; }
  12%   { z-index: 4; }
  12.1% { z-index: 3; }
  45.3% { z-index: 3; }
  45.4% { z-index: 1; }
  100%  { z-index: 1; }
}
/* 下部スライダーがビューインした時のバウンド出現（下から弾む） */
@keyframes pps-hero-bounce {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* KVイントロ（ロード時1回）：シーンのワイプと同じモーション言語で段階表示。transform/opacity のみ＝全て合成 */
@keyframes pps-intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pps-intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 53%OFF テキスト：読み方向（左→右）へスライドで登場（clip-path は毎フレーム再描画になるため transform/opacity のみ） */
@keyframes pps-intro-slide {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* 特別価格セクションのあしらい：サークル文字の回転（transform のみ＝合成） */
@keyframes pps-deco-spin {
  to { transform: rotate(360deg); }
}
/* business-main の solution-link 矢印挙動を踏襲（下向き版）：下へ抜けて上から戻る */
@keyframes arrowSlideDown {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(40px); opacity: 0; }
  51%  { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


.page-primeday2026-power {
  /* [A] ── トークン（シンプル＆洗練：ブルー × 黒 × アクセント1色） ── */
  --clr-blue: #00cbeb;
  --clr-blue-deep: #0098b3;
  --clr-ink: #000f16;
  --clr-sub: #5b6770;
  --clr-line: #e3e9ed;
  --clr-bg: #f4f8fb;
  --clr-accent: #FF3243;
  --clr-models-bg: #00a4e4;
  --en: "Mont", "Helvetica Neue", sans-serif;
  --pps-pad: 20px;
  --pps-radius: 14px;

  font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  color: var(--clr-ink);
  line-height: 1.7;
  background: #fff;
  padding-bottom: 88px;
  & .en { font-family: var(--en); }

  /* [A] 初期ビュー外のセクションは接近まで描画スキップ（content-visibility）。
     auto 指定で一度描画したサイズを記憶し、アンカージャンプ・スクロールバーのズレを防ぐ。
     ※ c-v は paint containment（自ボックスでクリップ）を伴うため、100vw フルブリードの子を持つ要素は
       全幅の親側に付ける（.pps-model→.pps-models / .pps-scene→.pps-scene-band） */
  & .pps-why,
  & .pps-benefits,
  & .pps-diagnosis,
  & .pps-models,
  & .pps-assure,
  & .pps-more,
  & .pps-scene-band,
  & .pps-cmp,
  & .Diagnosis,
  & .pps-showcase {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }

  /* [A] 共通ボタン */
  & .pps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity 0.2s ease-out, transform 0.1s ease-out;

    &--primary { background: var(--clr-accent); color: #fff; }
    &--ghost { background: #fff; color: var(--clr-ink); border: 1px solid var(--clr-line); }
    &--sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }
    &:active { transform: scale(0.98); }
    &:focus-visible { outline: 3px solid var(--clr-blue); outline-offset: 2px; }

    @media (hover: hover) and (pointer: fine) {
      &:hover { opacity: 0.88; }
    }
  }

  /* [A] 横スクロール（scroll-snap） */
  & .hscroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;

    & > * { scroll-snap-align: start; flex: 0 0 auto; }
  }

  /* [C] ── 告知バー ── */
  & .pps-announce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    padding: 8px 16px;
    background: var(--clr-ink);
    color: #fff;
    font-size: 12px;

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

  & .pps-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: var(--en);

    & b { font-size: 1.25em; font-weight: 700; font-variant-numeric: tabular-nums; }
    &__label { font-family: inherit; opacity: 0.85; margin-right: 4px; }
    &.is-ended b { opacity: 0.5; }
  }

  /* [C] ── ヒーロー（KV：推しポップ＋ループスライダー） ── */
  /* NOTE: このファイルのCSSネストは `& .full-class` でしか効かない（`&__x` 連結は不可）。フルセレクタで記述 */

  /* hero〜models を1枚で繋ぐブルー帯。メッシュ＋soft-light ノイズは前面の .gradationmesh（不透明）に全面被覆されて不可視だったため
     solid に変更（巨大面積の二重ペイント解消。見た目は変わらない） */
  & .pps-blueband {
    position: relative;
    z-index: 0;
    background: var(--clr-blue);
  }

  /* ブルー帯→白へのカーブ区切り（特別価格の直下）。SVGの滑らかな山型（端は水平接線）で中央がえぐれる凹カーブに。幅可変でも端が美しい */
  & .pps-arch {
    display: none;
    position: relative;
    z-index: 2;
    height: clamp(40px, 7vw, 96px);
    margin-top: calc(-1 * clamp(40px, 7vw, 96px));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C30,100 20,0 50,0 C80,0 70,100 100,100 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    @media (min-width: 1080px) {
      height: clamp(72px, 6vw, 132px);
      margin-top: calc(-1 * clamp(72px, 6vw, 132px));
    }
  }

  /* 背景：ブルー帯(.pps-blueband)の中だけに敷くアニメ背景。角丸スクエアの薄い白い光を transform でゆっくり漂わせる
     （合成のみ・再描画なし）。コンテンツより背面(z-index:-1) */
  & .gradationmesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--clr-blue);
  }
  /* 粒子（グレイン）：ぼけていない細かいノイズを通常合成で重ねる（背面読み込みが無く軽い）。濃さは opacity で調整 */
  & .gradationmesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    opacity: 0.22;
    pointer-events: none;
  }

  & .pps-hero {
    position: relative;
    overflow: clip;
    color: #fff;
    isolation: isolate;
    /* 背景は親 .pps-blueband のメッシュを透過表示（連続させる） */
    background: transparent;
    padding: 10px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;

    @media (min-width: 1080px) {
      min-height: 700px;
      padding: 25px clamp(24px, 4vw, 56px) 0px 25px;
      /* シーン画像｜OFF率セクションの2カラム flex */
      flex-direction: row;
      align-items: stretch;
      gap: clamp(24px, 4vw, 48px);
    }
  }

  & .pps-hero__glow {
    position: absolute;
    z-index: 0;
    top: 18%; left: 50%;
    width: 130%; aspect-ratio: 1;
    transform: translate(-50%, -10%);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    display: none;
    @media (min-width: 1080px) { display: block; top: 50%; left: 34%; width: 62%; transform: translate(-50%, -50%); }
  }

  /* 右上の光あしらい（pd-power-flare.webp）。上・右は hero の overflow で見切れ。テキスト類（z2〜3）より背面 */
  & .pps-hero__flare {
    position: absolute;
    z-index: 0;
    top: -420px;
    right: -460px;
    width: clamp(560px, 130vw, 820px);
    height: auto;
    opacity: 1;
    pointer-events: none;

    @media (min-width: 1080px) {
      top: -780px;
      right: -780px;
      width: clamp(1000px, 74vw, 1440px);
    }
  }

  /* 風景スライド：SP=上部ブロック（文字と縦並び）/ PC=左カラム。中の各シーンを重ねてクロスフェード */
  & .pps-hero__scenery {
    position: relative;
    z-index: 0;
    width: auto;
    margin-inline: -10px;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    contain: paint;

    @media (min-width: 1080px) {
      /* 左カラム（flex アイテム）。外余白は hero の padding が担当 */
      position: relative;
      inset: auto;
      flex: 0 0 65%;
      width: auto;
      margin-inline: 0;
      height: auto;
      aspect-ratio: auto;
      border-radius: 0;
    }
  }
  /* タグラインの白文字を読みやすくする暗部グラデ（SP=右下 / PC=左上）。
     z はシーンの切替 z-index（最大4）より上の 5 で常に写真の最前面 */
  & .pps-hero__scenery::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(
      110% 82% at 100% 100%,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.34) 12%,
      rgba(0, 0, 0, 0.27) 26%,
      rgba(0, 0, 0, 0.18) 42%,
      rgba(0, 0, 0, 0.1) 58%,
      rgba(0, 0, 0, 0.04) 76%,
      rgba(0, 0, 0, 0) 100%
    );

    @media (min-width: 1080px) {
      background: radial-gradient(
        118% 88% at 0% 0%,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.29) 12%,
        rgba(0, 0, 0, 0.23) 26%,
        rgba(0, 0, 0, 0.15) 42%,
        rgba(0, 0, 0, 0.08) 58%,
        rgba(0, 0, 0, 0.03) 76%,
        rgba(0, 0, 0, 0) 100%
      );
    }
  }
  & .pps-hero__scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* クロスフェード用：初期は透明 */
    opacity: 0;

    & img { width: 100%; height: 100%; object-fit: cover; display: block; }
  }
  /* IO 前の初期表示は先頭の1枚（全開）。img はループ開始位置（13%地点＝下記 -1.95s）と同じポーズにしておく
     ＝アニメ開始の瞬間に拡大率が飛ばない（scale 1 からだとカクッと 1.07 へジャンプして点滅に見える） */
  & .pps-hero__scene:first-child {
    opacity: 1;

    & img { transform: scale(1.07) translateX(0.42%); }
  }
  /* ビューイン（.is-anim）＋シーン画像の取得完了（.is-ready＝JS付与）で切替アニメ開始。
     is-ready を待つのは、開始直後のクロスフェード先（scene2）が未ロードだと背景色がフラッシュ＝点滅に見えるため。
     負ディレイでずらして seamless ループ（親と img は同周期・同ディレイで同期） */
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene {
    animation:
      pps-scene-frame 15s linear infinite,
      pps-scene-depth 15s linear infinite;
  }
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene img {
    animation: pps-scene-img 15s linear infinite;
    will-change: transform;
  }
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(2n) img {
    animation-name: pps-scene-img-rev;
  }
  /* 負ディレイ＝先送り。ベースの -1.95s（サイクルの13%）は「scene1 が opacity:1・最前面のまま」の地点＝
     アニメ開始の瞬間が静的初期表示と同じ見た目（0s 開始だと 0%=opacity:0 から始まり写真が一瞬消えて点滅に見える）。
     シーン間の相対差は従来どおり 5s（表示順 1→2→3、最初の切替は開始 約3.05s 後） */
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(1),
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(1) img { animation-delay: -1.95s; }
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(2),
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(2) img { animation-delay: -11.95s; }
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(3),
  & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene:nth-child(3) img { animation-delay: -6.95s; }
  /* 風景下端をシアンへ自然に溶かす（SP=下方向 / PC=右方向グラデでマスク）＋右上にさりげない光のグラデ */

  /* SP：シーン帯と同じ位置・縦横比で重ね、タグラインを帯の左下に載せる（PCは下部の @media で写真左上に戻す） */
  & .pps-hero__head {
    position: absolute;
    top: 20px;
    left: 10px;
    right: 10px;
    aspect-ratio: 5 / 4;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    padding: 14px;
  }

  /* products + copy を %幅で横並び（PC）／縦並び（SP）にするステージ */
  & .pps-hero__stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    @media (min-width: 1080px) {
      flex: 1 1 auto;
      min-width: 0;
      flex-direction: column;
      justify-content: flex-end;
      gap: 0;
    }
  }
  & .pps-hero__tagline {
    margin: 0;
    font-size: 12px; line-height: 1.6; font-weight: 700;
    color: rgba(255, 255, 255, 1);
    max-width: 16em;
    padding-bottom: 8px;
    animation: pps-intro-rise 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s both;

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

  & .pps-hero__schedule {
    position: absolute;
    z-index: 3;
    top: 16px; right: var(--pps-pad);
    width: clamp(76px, 22vw, 108px); height: auto;
    display: none;
    @media (min-width: 1080px) { display: block; top: 36px; right: clamp(24px, 4vw, 56px); width: clamp(104px, 10vw, 150px); }
  }

  & .pps-hero__products {
    /* スマホでは非表示（PCのみ表示） */
    display: none;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    place-items: center;
    min-height: 220px;
    /* PC は左寄せ（商品1つ）＋コピーとの間に少し余白 */
    @media (min-width: 1080px) { display: grid; flex: 0 0 auto; min-width: 0; min-height: 300px; justify-items: start; margin-bottom: 24px; }
  }
  & .pps-hero__product {
    display: block;
    width: auto; height: auto;
    mix-blend-mode: multiply;
  }
  /* 前面の黒：大きく・下寄せ・最前面 */
  & .pps-hero__product--main {
    position: relative;
    z-index: 2;
    align-self: end;
    width: clamp(220px, 76vw, 440px);
    max-width: 92%;
    @media (min-width: 1080px) { width: 40%; max-width: 100%; left: 0; justify-self: start; }
  }
  /* 奥の白：小さめ・上寄せ右・黒の上端に少し重ねる（パララックスは黒より速め） */
  & .pps-hero__product--sub {
    position: absolute;
    z-index: 1;
    top: -16%; right: 6%;
    width: clamp(94px, 33vw, 180px);
    max-width: 46%;
    /* PC は商品を1つ（main のみ）にするため非表示 */
    @media (min-width: 1080px) { display: none; }
  }

  & .pps-hero__copy {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: grid;
    gap: 12px;
    padding-bottom: 28px;
    margin-inline: auto;
    width: 100%;
    max-width: 560px;
    @media (min-width: 1080px) { flex: 0 0 auto; min-width: 0; width: auto; max-width: none; margin-inline: 0; gap: 28px; padding-bottom: 24px; }
  }
  /* メインテキスト（SVG）：%OFF。コピー幅いっぱい＝ボタンと常に同じ幅 */
  & .pps-hero__txt {
    display: block;
    width: 100%; height: auto;
  }
  /* 53%OFF バナー直下の注釈 */
  & .pps-hero__note {
    position: relative;
    z-index: 2;
    margin: -8px 0 0;
    font-size: 10px;
    text-align: right;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    @media (min-width: 1080px) { font-size: 12px; }
  }

  & .pps-hero__ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* SP も横並び */
    gap: 10px;
    @media (min-width: 1080px) { gap: 14px; }
  }
  & .pps-hero__cta {
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 13px 8px 13px 22px;
    font-size: 16px;
    border-radius: 8px;
    /* 立体感：上部ハイライト(inset)＋さりげない低オフセットの影（青み） */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 2px 6px rgba(10, 60, 170, 0.12),
      0 5px 12px rgba(10, 60, 170, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    @media (min-width: 1080px) { min-height: 72px; padding: 15px 10px 15px 30px; font-size: 17px; border-radius: 999px; }
  }
  & .pps-hero__cta:hover {
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 3px 8px rgba(10, 60, 170, 0.14),
      0 7px 16px rgba(10, 60, 170, 0.14);
  }
  & .pps-hero__cta:active {
    transform: translateY(0);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 2px 6px rgba(10, 60, 170, 0.16);
  }
  & .pps-hero__cta--ghost { background: #fff; color: var(--clr-ink); }
  & .pps-hero__cta--primary {
    background: var(--clr-accent);
    color: #fff;
    /* 赤系の立体感：上ハイライト＋下部の暗い縁(厚み)＋さりげない低オフセットの影 */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35) inset,
      0 -3px 0 rgba(150, 10, 28, 0.45) inset,
      0 2px 6px rgba(150, 10, 28, 0.14),
      0 5px 12px rgba(150, 10, 28, 0.14);
  }
  & .pps-hero__cta--primary:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 -3px 0 rgba(150, 10, 28, 0.45) inset,
      0 3px 8px rgba(150, 10, 28, 0.16),
      0 7px 16px rgba(150, 10, 28, 0.16);
  }
  & .pps-hero__cta--primary:active {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 -2px 0 rgba(150, 10, 28, 0.45) inset,
      0 2px 6px rgba(150, 10, 28, 0.18);
  }
  /* テキストは <a> でなく span に明示色（.themeV2 a:hover{color:inherit} で白化するのを防ぐ） */
  & .pps-hero__cta-text { line-height: 1.2; }
  & .pps-hero__cta--ghost .pps-hero__cta-text { color: var(--clr-ink); }
  & .pps-hero__cta--primary .pps-hero__cta-text { color: #fff; }

  /* [B] business-main の solution-link を踏襲：円＋右矢印・hover で arrowSlide */
  & .pps-hero__cta-ic {
    flex-shrink: 0;
    width: 34px; height: 34px;
    overflow: hidden;
    @media (min-width: 1080px) { width: 42px; height: 42px; }
  }
  & .pps-hero__cta-circle { transition: fill 0.3s ease; }
  & .pps-hero__cta-arrow-group { overflow: hidden; }
  & .pps-hero__cta-arrow {
    transform: translateX(0);
    opacity: 1;
    transition: stroke 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  /* ghost：薄青の円＋青矢印 */
  & .pps-hero__cta--ghost .pps-hero__cta-circle { fill: #e1f5ff; }
  & .pps-hero__cta--ghost .pps-hero__cta-arrow { stroke: var(--clr-blue-deep); }
  /* primary：白半透明の円＋白矢印 */
  & .pps-hero__cta--primary .pps-hero__cta-circle { fill: rgba(255, 255, 255, 0.22); }
  & .pps-hero__cta--primary .pps-hero__cta-arrow { stroke: #fff; }

  @media (hover: hover) and (pointer: fine) {
    & .pps-hero__cta:hover { opacity: 1; }
    & .pps-hero__cta--ghost:hover .pps-hero__cta-circle { fill: var(--clr-blue-deep); }
    & .pps-hero__cta--ghost:hover .pps-hero__cta-arrow { stroke: #fff; animation: arrowSlideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
    & .pps-hero__cta--primary:hover .pps-hero__cta-circle { fill: #fff; }
    & .pps-hero__cta--primary:hover .pps-hero__cta-arrow { stroke: var(--clr-accent); animation: arrowSlideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
  }

  & .pps-hero__marquee {
    display: none;
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-inline: calc(-1 * var(--pps-pad));
    padding: 12px 0 38px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    @media (min-width: 1080px) {
      margin-inline: calc(-1 * clamp(24px, 4vw, 56px));
      padding: 16px 0 46px;
    }
  }
  & .pps-hero__track {
    list-style: none; margin: 0; padding: 0;
    display: none;
    width: max-content;
    gap: 14px;
  }
  & .pps-hero__marquee.is-anim .pps-hero__track { animation: pps-hero-marquee 40s linear infinite; will-change: transform; }
  & .pps-hero__slide {
    flex: 0 0 auto;
    width: 78px;
    @media (min-width: 1080px) { width: 98px; }
  }
  & .pps-hero__slide img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

  /* 風景スライド導入に伴うレイアウト調整：PC は写真を左カラム、コンテンツを右側へ寄せる */
  @media (min-width: 1080px) {
    /* ロゴ＋タグラインは写真上（左上）に重ねる（SPオーバーレイ用の指定をリセット） */
    & .pps-hero__head {
      position: absolute;
      top: 52px;
      left: clamp(24px, 4vw, 56px);
      right: auto;
      width: 52%;
      aspect-ratio: auto;
      padding: 0;
      display: grid;
      justify-items: start;
      justify-content: normal;
      align-items: start;
      text-align: left;
      gap: 20px;
    }
    /* 下部の商品マーキーは2カラム構成では非表示（写真と重なるため） */
    & .pps-hero__marquee {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    & .pps-hero__tagline,
    & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene,
    & .pps-hero__scenery.is-anim.is-ready .pps-hero__scene img,
    & .pps-hero__marquee.is-anim .pps-hero__track,
    & .pps-benefits__loop.is-anim .pps-benefits__loop-track { animation: none; }
  }

  /* [B] ── sticky アンカーナビ ── */
  & .pps-nav {
    padding: 28px var(--pps-pad) 8px;
    @media (min-width: 1080px) { padding: 44px 0 12px; width: min(92vw, 1600px); margin-inline: auto; }
  }
  & .pps-nav__title {
    text-align: center;
    font-size: clamp(18px, 4.6vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 16px;
  }
  & .pps-nav__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    @media (min-width: 1080px) { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  }
  & .pps-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    aspect-ratio: 1 / 1;
    padding: 10px;
    border-radius: 12px;
    background: var(--clr-bg);
    border: 1px solid var(--clr-line);
    color: var(--clr-ink);
    text-decoration: none;
    text-align: center;
    transition: border-color 0.15s ease-out, transform 0.1s ease-out;
    @media (hover: hover) and (pointer: fine) {
      &:hover { border-color: var(--clr-blue); }
    }
    &:active { transform: scale(0.98); }
  }
  & .pps-nav__ico { width: 28px; height: 28px; color: var(--clr-blue-deep); display: inline-flex; }
  & .pps-nav__ico svg { width: 100%; height: 100%; display: block; }
  & .pps-nav__label { font-size: 12px; font-weight: 700; line-height: 1.3; }

  /* [A] ── セクション共通 ── */
  & .pps-sec {
    padding: 60px 10px;
    @media (min-width: 1080px) { padding: 105px 0; width: min(94vw, 1760px); margin-inline: auto; }

    &__head { display: grid; gap: 6px; text-align: center; margin-bottom: 24px; }
    &__step { font-family: var(--en); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--clr-blue-deep); }
    &__title { font-size: clamp(22px, 5vw, 42px); font-weight: 700; line-height: 1.4; text-align: center; text-wrap: balance; }
    &__lead { font-size: 14px; color: var(--clr-sub); }
  }
  /* ↑ の &__title（連結ネスト）はネイティブCSSネストで無効になるため、有効なセレクタで明示 */
  /* ウェイトは500、線（text-stroke）で少しだけ太く見せる */
  & .pps-sec__title { font-size: clamp(22px, 5vw, 42px); font-weight: 500; -webkit-text-stroke: 0.55px currentColor; line-height: 1.4; text-align: center; text-wrap: balance; }
  & .pps-sec__head { display: grid; gap: 6px; text-align: center; margin-bottom: 24px; }
  & .pps-sec__step { font-family: var(--en); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--clr-blue-deep); }
  & .pps-sec__lead { font-size: 14px; color: var(--clr-sub); }

  /* レビュー星：レビューアプリの暗いオレンジ(#c77700 !important)を上書きして明るいゴールドに */
  & .product-rating .star-rating-fill,
  & .product-rating .star-rating-fill span { color: #ffb400 !important; -webkit-text-stroke: 0 !important; }
  & .product-rating .star-rating-bg,
  & .product-rating .star-rating-bg span { color: #dfe3e7 !important; -webkit-text-stroke: 0 !important; }

  & .pps-note { margin-top: 12px; font-size: 11px; color: var(--clr-sub); }
  & .pps-link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--clr-blue-deep); text-decoration: underline; text-underline-offset: 3px; }

  /* [C] ── 診断 ── */
  & .pps-diagnosis { display: none; }   /* 「使い方から選ぶ」非表示 */

  /* ── 診断（page-anker-solix Diagnosis 移植：バナー＋ポップアップ。中身 snippet は自前CSS同梱）── */
  & .pps-sec.Diagnosis {
    @media (min-width: 1080px) { width: min(94vw, 1080px); }
  }
  & .Diagnosis .diagnosis-banner-link { display: block; cursor: pointer; }
  /* display はトグル側（pps-diag-pc/sp）で制御するため img 共通には書かない */
  & .Diagnosis .diagnosis-banner-link img {
    width: 100%; height: auto; border-radius: 12px;
    transition: opacity 0.2s ease;
    @media (hover: hover) and (pointer: fine) { &:hover { opacity: 0.92; } }
  }
  & .Diagnosis .pps-diag-pc { display: none; }
  & .Diagnosis .pps-diag-sp { display: block; }
  @media (min-width: 1080px) {
    & .Diagnosis .pps-diag-pc { display: block; }
    & .Diagnosis .pps-diag-sp { display: none; }
  }
  & .Diagnosis .btn-sm-wrap { display: flex; justify-content: center; margin-top: 16px; }
  /* モーダル */
  & .Diagnosis .diagnosis-popup { display: none; position: fixed; inset: 0; z-index: 1000; }
  & .Diagnosis .diagnosis-popup.is-active { display: flex; align-items: center; justify-content: center; }
  & .Diagnosis .diagnosis-popup-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
  & .Diagnosis .diagnosis-popup-content {
    position: relative;
    width: 100%; max-width: 1000px; max-height: 100vh;
    border-radius: 8px; overflow: hidden auto;
    padding: 0;                 /* 上下左右とも余白なし */
    /* 各ステップが透けないよう外箱を不透明に（スニペット内の画像/グレー背景はこの上に描画される） */
    background: #fff;
    z-index: 1001;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  & .Diagnosis .diagnosis-popup-content::-webkit-scrollbar { display: none; }
  /* スニペット内の上下グレー余白を除去（背景グレーのラッパ padding が原因） */
  & .Diagnosis .point { margin: 0 !important; padding: 0 !important; }
  & .Diagnosis .point-diagnosis-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  & .Diagnosis .point-diagnosis-wrap { padding: 0 !important; }
  & .Diagnosis .point-diagnosis-wrap.background-lightgrey { background: transparent !important; }
  & .Diagnosis .point-diagnosis-content { padding-top: 24px; padding-bottom: 24px; }
  & .Diagnosis .diagnosis-popup-close {
    position: absolute; top: 8px; right: 8px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.35); border: none; border-radius: 50%;
    font-size: 26px; line-height: 1; color: #fff; cursor: pointer;
    z-index: 1002;
  }
  & .pps-diagnosis__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    @media (min-width: 1080px) { grid-template-columns: repeat(4, 1fr); }
  }
  & .pps-diagnosis__item a {
    display: grid;
    gap: 8px;
    height: 100%;
    padding: 18px 14px;
    border-radius: var(--pps-radius);
    background: var(--clr-bg);
    border: 1px solid var(--clr-line);
    text-decoration: none;
    color: var(--clr-ink);
    transition: border-color 0.2s ease-out;
    @media (hover: hover) and (pointer: fine) { &:hover { border-color: var(--clr-blue); } }
  }
  & .pps-diagnosis__use { font-size: 15px; font-weight: 700; }
  & .pps-diagnosis__rec { font-size: 13px; color: var(--clr-blue-deep); font-weight: 700; }

  /* [C] ── 権威セクション（WHY ANKER：Ankerで選ぶ理由。白背景・ベントー）※中身は固有 ── */
  & .pps-why {
    /* 背景は親 .pps-blueband のメッシュを透過表示 */
    background: transparent;
    color: #fff;
    padding: 50px var(--pps-pad) 0px;
    @media (min-width: 1080px) { padding: 100px var(--pps-pad) 0; }
  }
  & .pps-why__inner {
    width: auto;
    margin-inline: auto;
    text-align: center;
    @media (min-width: 1080px) { width: min(94vw, 1760px); }
  }
  & .pps-why__eyebrow {
    font-family: var(--en);
    font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 10px;
  }
  & .pps-why__title { font-size: clamp(30px, 7vw, 42px); font-weight: 500; -webkit-text-stroke: 0.55px currentColor; line-height: 1.35; color: var(--clr-ink); text-wrap: balance;text-align: left; }

  /* 青背景セクション上の見出しは白文字に */
  & .pps-why__title,
  & .pps-benefits .pps-sec__title {
    color: #fff;
    -webkit-text-stroke: 0;
    position: relative;
    z-index: 1;
  }
  & .pps-why__lead { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.9); margin: 10px 0 28px; text-align: left;}
  & .pps-why__note { font-size: 10px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); margin: 22px auto 0;
  text-align: left; width: 100%;}
  & .pps-why__ref {
    font-size: 0.6em;
    font-weight: 400;
    margin-left: 0.15em;
    white-space: nowrap;
  }

  /* [B] ── ベントー（8セル・白背景）※カードグリッドの型は流用可 ── */
  & .pps-why__bento {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    text-align: left;
    align-items: stretch;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto 1fr 1fr;
    grid-template-areas:
      "no1      no1      no1      share    share   share"
      "shelter  shelter  storage  storage  charge  charge"
      "warranty warranty warranty support  support support"
      "warranty warranty warranty safety   safety  safety";
    @media (min-width: 1080px) {
      gap: 12px;
      margin-top: 28px;
      /* 右側は20分割：上段 warranty:support = 12:8（サポートの可読性優先で広め）／下段シーン3枚＋安全性は5列ずつ等幅 */
      grid-template-columns: minmax(0, 3.1fr) minmax(0, 2.9fr) repeat(20, minmax(0, 0.2fr));
      grid-template-rows: 1fr 1fr;
      grid-template-areas:
        "no1 share warranty warranty warranty warranty warranty warranty warranty warranty warranty warranty warranty warranty support support support support support support support support"
        "no1 share shelter shelter shelter shelter shelter storage storage storage storage storage charge charge charge charge charge safety safety safety safety safety";
    }
  }

  & .pps-why__bcard {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--clr-line);
    color: var(--clr-ink);
    @media (min-width: 1080px) {   border-radius: 14px;}
  }
  & .pps-why__bcard-in {
    position: relative; z-index: 1;
    height: 100%;
    display: flex; flex-direction: column;
    padding: 20px 16px 16px;
    @media (min-width: 1080px) { padding: 28px 24px 24px; }
  }

  & .pps-why__bcard--no1 {
    grid-area: no1;
    background: #06467f center / cover no-repeat;
    border: 0;
    color: #fff;
    isolation: isolate;
    min-height: 118px;
    @media (min-width: 1080px) { min-height: 230px; container-type: inline-size; }
  }
  & .pps-why__brand {
    height: 16px; width: auto; display: block;
    align-self: flex-start;
    filter: brightness(0) invert(1);
    @media (min-width: 1080px) { height: 24px; }
  }
  & .pps-why__no1mid { margin-block: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
  & .pps-why__no1tag {
    font-size: clamp(23px, 5.6vw, 34px);
    font-weight: 700; letter-spacing: 0.02em; color: #fff; margin: 0; line-height: 1;
    @media (min-width: 1080px) { font-size: clamp(26px, 14.5cqi, 46px); }
  }
  & .pps-why__no1head { display: flex; justify-content: center; align-items: baseline; gap: 0.12em; margin: -0.12em 0 0; line-height: 1; color: #fff; white-space: nowrap; }
  & .pps-why__no1jp {
    font-size: clamp(27px, 7.2vw, 48px);
    font-weight: 700;
    @media (min-width: 1080px) { font-size: clamp(34px, 19.5cqi, 58px); }
  }
  & .pps-why__no1num {
    font-size: clamp(32px, 8.4vw, 57px);
    font-weight: 800; letter-spacing: -0.02em;
    @media (min-width: 1080px) { font-size: clamp(38px, 23cqi, 68px); }
  }
  & .pps-why__no1cat { font-size: 11px; font-weight: 500; color: #fff;
    @media (min-width: 1080px) { font-size: clamp(18px, 4vw, 20px); }
  }

  & .pps-why__bcard--share {
    grid-area: share;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 0;
    background: #11151a center / cover no-repeat;
    color: #fff;
  }
  & .pps-why__sharehero {
    position: relative; z-index: 1;
    flex: 1 1 auto; min-height: 120px;
    padding: 18px 10px 6px;
    line-height: 1;
    display: flex; flex-direction: column; justify-content: flex-start;
    @media (min-width: 1080px) { padding: 22px 24px 8px; min-height: 140px; }
  }
  & .pps-why__sharebig { font-size: clamp(28px, 9vw, 52px); font-weight: 800; line-height: 1; margin: 0; color: #fff; }
  & .pps-why__sharelabel { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.92);
    @media (min-width: 1080px) { font-size: 18px; }
  }
  & .pps-why__shareawards {
    position: relative; z-index: 1;
    padding: 6px 10px 8px;
    display: flex; flex-direction: column; gap: 5px;
    @media (min-width: 1080px) { padding: 8px 24px 20px; }
  }
  & .pps-why__awardhead { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0; @media (min-width: 1080px) { font-size: 12px; }}
  & .pps-why__awardlist {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    align-items: start;
  }
  & .pps-why__award { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  & .pps-why__award img { height: 30px; width: auto; max-width: 100%; object-fit: contain; display: block;     @media (min-width: 1080px) { height: 50px; }}
  & .pps-why__awardcap { font-size: 8px; line-height: 1.2; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.8); text-align: center; min-height: 2.6em;
    @media (min-width: 1080px) { font-size: 10px; line-height: 1.3; letter-spacing: 0; }
  }
  & .pps-why__bcard--warranty,
  & .pps-why__bcard--support,
  & .pps-why__bcard--safety {
    border: 0;
    
  }
  & .pps-why__bcard--warranty { background: #007fcf; color: #fff; }
  & .pps-why__bcard--support {
    background: #18479f center / cover no-repeat;
    color: #fff;
    justify-content: flex-start;
    align-items: flex-end;
    @media (min-width: 1080px) { align-items: flex-end; }
    &::after {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      /* SP：右側を青みのある濃色で暗くして右寄せテキストを読みやすく */
      background: linear-gradient(90deg,
        rgba(12, 45, 120, 0) 0%,
        rgba(12, 45, 120, 0) 16%,
        rgba(12, 45, 120, 0.12) 30%,
        rgba(12, 45, 120, 0.26) 42%,
        rgba(12, 45, 120, 0.42) 53%,
        rgba(12, 45, 120, 0.58) 64%,
        rgba(12, 45, 120, 0.72) 75%,
        rgba(12, 45, 120, 0.84) 88%,
        rgba(12, 45, 120, 0.92) 100%);
      @media (min-width: 1080px) {
        /* PC：右側を暗くして右寄せテキストを読みやすく */
        background: linear-gradient(90deg,
          rgba(9, 20, 40, 0) 0%,
          rgba(9, 20, 40, 0) 30%,
          rgba(9, 20, 40, 0.05) 44%,
          rgba(9, 20, 40, 0.12) 55%,
          rgba(9, 20, 40, 0.22) 65%,
          rgba(9, 20, 40, 0.34) 74%,
          rgba(9, 20, 40, 0.47) 83%,
          rgba(9, 20, 40, 0.60) 92%,
          rgba(9, 20, 40, 0.68) 100%);
      }
    }
    & .pps-why__btextset {
      position: relative; z-index: 1; width: 70%; text-align: right;
      @media (min-width: 1080px) { width: 52%; text-align: right; }
    }
  }
  & .pps-why__bcard--safety {
    background: #d6effb;
    color: #18479f;
    & .pps-why__btitle { color: #18479f; }
    & .pps-why__btext { color: rgba(24, 71, 159, 0.82); }
  }

  & .pps-why__bcard--warranty {
    grid-area: warranty;
    padding: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    @media (min-width: 1080px) { flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 20px 25px; gap: 25px; }
  }
  & .pps-why__wimg {
    flex-shrink: 0;
    align-self: center;
    width: 100%; height: auto;
    @media (min-width: 1080px) { width: 54%; order: 2; align-self: flex-end; }
  }
  & .pps-why__wbody {
    margin-left: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
    @media (min-width: 1080px) { align-items: flex-start; text-align: left; gap: 6px; max-width: 38%; }
  }
  & .pps-why__wtitle {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0;
    color: #fff;
    white-space: nowrap;
    @media (min-width: 1080px) { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; }
  }
  /* 「最大」は小さく上部に（block で 5年保証 の上段へ） */
  & .pps-why__wmax {
    display: block;
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.2em;
  }
  & .pps-why__wtext {
    font-size: 11px; line-height: 1.5; color: #fff; margin: 0;
    @media (min-width: 1080px) { font-size: 13px; line-height: 1.6; }
  }

  & .pps-why__bcard--support { grid-area: support; }
  & .pps-why__bcard--safety { grid-area: safety; }
  & .pps-why__bcard--support,
  & .pps-why__bcard--safety {
    padding: 10px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    @media (min-width: 1080px) { padding: 20px; gap: 10px; }
  }
  & .pps-why__bico { height: 30px; color: #fff; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; }
  & .pps-why__bico svg { height: 100%; width: auto; display: block; overflow: visible; }
  & .pps-why__bico svg path { stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
  & .pps-why__bico img { height: 100%; width: auto; object-fit: contain; display: block; filter: brightness(0) invert(1); }
  & .pps-why__bico--smark {
    width: 42%; height: auto; aspect-ratio: 1 / 1;
    background-color: #18479f;
    -webkit-mask: var(--smark) center / contain no-repeat;
            mask: var(--smark) center / contain no-repeat;
  }
  & .pps-why__btextset { display: flex; flex-direction: column; gap: 5px; }
  & .pps-why__btitle { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.2; color: #fff; @media (min-width: 1080px) { font-size: 22px; line-height: 1.3; } }
  & .pps-why__btext { font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 0; @media (min-width: 1080px) { font-size: 12px; line-height: 1.6; } }

  /* 安全性：SPはアイコン＋テキストを横並び（PCは縦積みに戻す） */
  & .pps-why__bcard--safety {
    flex-direction: row; align-items: center; gap: 10px;
    @media (min-width: 1080px) { flex-direction: column; align-items: stretch; gap: 10px; }
  }
  & .pps-why__bcard--safety .pps-why__bico--smark {
    order: 0; align-self: flex-start; width: 20%; flex-shrink: 0;
    @media (min-width: 1080px) { order: 1; align-self: flex-end; width: 42%; }
  }
  & .pps-why__bcard--safety .pps-why__btextset {
    flex: 1;
    @media (min-width: 1080px) { flex: 0 1 auto; }
  }

  & .pps-why__bcard--shelter { grid-area: shelter; }
  & .pps-why__bcard--storage { grid-area: storage; }
  & .pps-why__bcard--charge { grid-area: charge; }
  & .pps-why__bcard--scene {
    min-height: 112px;
    border: 0;
    background: #14181d center / cover no-repeat;
    display: flex; align-items: flex-start;
    @media (min-width: 1080px) { min-height: 156px; }
  }
  & .pps-why__bcard--scene::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 60%);
  }
  & .pps-why__scenecap {
    position: relative; z-index: 1;
    margin: 0; padding: 8px;
    font-size: 10px; font-weight: 500; line-height: 1.3; color: #fff;
    @media (min-width: 1080px) { font-size: 15px; padding: 14px; line-height: 1.45; }
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  & .pps-ico { display: block; }

  /* [C] ── 人気の2モデル：セクション全幅ブルー背景＋ノイズ ── */
  & .pps-models {
    position: relative;
    isolation: isolate;
    width: auto;
    max-width: none;
    padding-inline: 0;
    /* 背景は親 .pps-blueband のメッシュを透過表示 */
    background: transparent;
  }
  & .pps-models::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("/cdn/shop/files/sleep_lp_noise.jpg?v=1757499602");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.045;
    pointer-events: none;
  }

  /* あしらい：Anker Prime Day 2026 の回転サークル文字。z-index:-1 でカード背面（.pps-models は isolate 済み）。
     左に見切れ＋PC は下端も帯の縁で見切れ（clip-path は svg 側なので回転しない） */
  & .pps-models__deco {
    /* 一旦非表示（戻す時はこの1行を削除） */
    display: none;
    position: absolute;
    z-index: -1;
    left: -110px;
    bottom: 16%;
    width: 330px;
    height: auto;
    opacity: 0.28;
    pointer-events: none;

    @media (min-width: 1080px) {
      left: clamp(-180px, -10vw, -90px);
      bottom: -120px;
      width: clamp(420px, 32vw, 600px);
      clip-path: inset(0 0 120px 0);
      opacity: 0.35;
    }
  }
  & .pps-models__deco-spin {
    display: block;
    width: 100%;
    height: auto;
  }
  /* 回転は一旦停止（戻す時はコメント解除） */
  /* & .pps-models__deco.is-anim .pps-models__deco-spin {
    animation: pps-deco-spin 80s linear infinite;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    & .pps-models__deco.is-anim .pps-models__deco-spin { animation: none; }
  } */

  & .pps-models__layout {
    width: min(94vw, 1760px);
    margin-inline: auto;
    display: grid;
    gap: 28px;
  }
  & .pps-models__layout {
    @media (min-width: 1080px) {
      grid-template-columns: minmax(220px, 400px) minmax(0, 1fr);
      gap: 40px;
      align-items: start;
    }
  }
  & .pps-models__aside {
    /* SP：display:contents で nav を layout 直下に上げ、セクション全体で追従可能に */
    display: contents;
    @media (min-width: 1080px) {
      display: grid;
      gap: 12px;
      align-content: start;
      position: sticky;
      top: 56px;
    }
  }
  & .pps-models__title {
    font-size: clamp(30px, 7vw, 48px);
    font-weight: 500;
    -webkit-text-stroke: 0.55px currentColor;
    line-height: 1.28;
    letter-spacing: 0.01em;
    color: #fff;
    text-wrap: balance;
  }
  & .pps-models .pps-sec__step { color: rgba(255, 255, 255, 0.82); }

  /* モデルへのアンカーナビ（現在地を is-current でハイライト）。SP=横並び＋上部追従 / PC=縦並び */
  & .pps-models__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    /* SP：sticky バーを画面全幅に（94vwコンテナから抜け出す） */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    position: sticky;
    top: 0;
    z-index: 12;
    background: #00cbeb;
    padding: 10px 16px;
    justify-content: center;
    @media (min-width: 1080px) {
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      width: auto;
      margin-inline: 0;
      margin-top: 14px;
      position: static;
      background: none;
      padding: 0;
    }
  }
  /* 特別価格まわりの注釈（世界最小 ※ の補足）：main 下部・白文字 */
  & .pps-models__note {
    margin: 16px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: #fff;
    @media (min-width: 1080px) { font-size: 11px; }
  }
  /* 通常＝枠線白のアウトラインボタン／現在地＝塗りボタン */
  & .pps-models__navlink {
    display: flex;
    flex-direction: row;               /* SP：画像＋テキスト横並び */
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    width: auto;
    font-family: var(--en);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    padding: 6px 16px 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    @media (min-width: 1080px) {
      flex-direction: column;          /* PC：写真＋テキスト 縦並び */
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      width: 132px;
      aspect-ratio: 1 / 1;             /* 正方形 */
      padding: 16px;
      border-radius: 8px;
      font-size: 15px;
      text-align: center;
    }
    /* クリック/フォーカス/訪問済みでも黒くならないよう白系に固定 */
    &:visited { color: #fff; }
    &:hover,
    &:active,
    &:focus { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.16); }
  }
  & .pps-models__navimg {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;

    @media (min-width: 1080px) {
      width: 64px;
      height: 64px;
    }
  }
  & .pps-models__navlink.is-current {
    color: var(--clr-models-bg);
    background: #fff;
    border-color: #fff;
    &:hover,
    &:active,
    &:focus { color: var(--clr-models-bg); background: #fff; }
  }

  /* [C] ── 人気の2モデル：各モデル＝大画像ヒーロー＋2×2カード ── */
  & .pps-models__main { display: grid; gap: 28px; }
  & .pps-model { display: grid; gap: 16px; scroll-margin-top: 80px; min-width: 0; }
  & .pps-model + .pps-model {
    margin-top: 8px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
  }

  /* ヒーロー：背景画像を印象的にクロスフェード切替するバナー。情報は下部に重ねる */
  & .pps-model__hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 340px;
    padding: 20px 20px 10px;
    border-radius: 0;
    overflow: hidden;
    /* SP：下部フェード（写真＋スクリム側）を効かせるため本体塗りは透明 */
    background: transparent;
    /* SP：コンテナ（94vw）から突き出して全幅に */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    @media (min-width: 1080px) {
      min-height: 550px; padding: 25px;
      width: auto;
      margin-inline: 0;
      background: #06222f;
    }
  }
  /* ギネス世界記録バッジ（ヒーロー左上） */
  & .pps-model__guinness {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 160px;
    text-align: center;
    @media (min-width: 1080px) { top: 20px; left: 20px; width: 176px; align-items: flex-start; }
  }
  & .pps-model__guinness-logo {
    width: 150px; height: auto; display: block;
    filter: drop-shadow(0 1px 2px rgba(3, 20, 42, 0.22)) drop-shadow(0 4px 12px rgba(3, 20, 42, 0.28));
  }
  & .pps-model__guinness-txt {
    margin: 0;
    font-size: 11px; line-height: 1.4; font-weight: 600; color: #fff;
    /* 柔らかく重ねた自然な影（読みやすさ＋洗練） */
    text-shadow:
      0 1px 1px rgba(3, 20, 42, 0.28),
      0 2px 6px rgba(3, 20, 42, 0.30),
      0 6px 18px rgba(3, 20, 42, 0.22);
      text-align: left;
    @media (min-width: 1080px) { font-size: 12px; }

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

  /* 販売数量No.1バッジ（ヒーロー左上） */
  & .pps-model__no1badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    width: 130px;
    @media (min-width: 1080px) { top: 20px; left: 20px; width: 156px; }
  }
  & .pps-model__no1badge-img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 1px 2px rgba(3, 20, 42, 0.22)) drop-shadow(0 4px 12px rgba(3, 20, 42, 0.28));
  }

  /* 背景画像レイヤー（-a / -b を重ねてクロスフェード） */
  & .pps-model__hero-img {
    position: absolute; inset: 0 0 150px 0; z-index: -2;
    display: block;
    @media (min-width: 1080px) { inset: 0; }
    /* SP：写真の下部を透明にフェードして下へつなげる（テキストは非対象） */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 76%, rgba(0, 0, 0, 0.92) 82%, rgba(0, 0, 0, 0.72) 86%,
      rgba(0, 0, 0, 0.48) 90%, rgba(0, 0, 0, 0.26) 94%, rgba(0, 0, 0, 0.1) 97%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom,
      #000 76%, rgba(0, 0, 0, 0.92) 82%, rgba(0, 0, 0, 0.72) 86%,
      rgba(0, 0, 0, 0.48) 90%, rgba(0, 0, 0, 0.26) 94%, rgba(0, 0, 0, 0.1) 97%, rgba(0, 0, 0, 0) 100%);
    @media (min-width: 1080px) { -webkit-mask-image: none; mask-image: none; }
  }
  & .pps-model__hero-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: right top;   /* SP：上寄せ（高さ＝boxのまま） */
    @media (min-width: 1080px) { object-position: right center; }
  }
  & .pps-model__hero-img--swap .is-base { opacity: 1; }
  & .pps-model__hero-img--swap .is-hover { opacity: 0; }
  & .pps-model__hero-img--swap.is-anim .is-base,
  & .pps-model__hero-img--swap.is-anim .is-hover { will-change: opacity; }
  & .pps-model__hero-img--swap.is-anim .is-base { animation: pps-hero-swap-a 9s ease-in-out infinite; }
  & .pps-model__hero-img--swap.is-anim .is-hover { animation: pps-hero-swap-b 9s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    & .pps-model__hero-img--swap.is-anim .is-base,
    & .pps-model__hero-img--swap.is-anim .is-hover { animation: none; }
  }
  /* スクリム（左下→右上の斜め。左下が最も暗く、右上へ滑らかに透明）で文字の可読性を確保 */
  & .pps-model__hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
   
    pointer-events: none;
    /* SP：写真と一緒に下部を透明フェード */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 76%, rgba(0, 0, 0, 0.92) 82%, rgba(0, 0, 0, 0.72) 86%,
      rgba(0, 0, 0, 0.48) 90%, rgba(0, 0, 0, 0.26) 94%, rgba(0, 0, 0, 0.1) 97%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom,
      #000 76%, rgba(0, 0, 0, 0.92) 82%, rgba(0, 0, 0, 0.72) 86%,
      rgba(0, 0, 0, 0.48) 90%, rgba(0, 0, 0, 0.26) 94%, rgba(0, 0, 0, 0.1) 97%, rgba(0, 0, 0, 0) 100%);
    @media (min-width: 1080px) { -webkit-mask-image: none; mask-image: none; background: linear-gradient(
      to top right,
      rgba(10, 42, 74, 0.40) 0%,
      rgba(10, 42, 74, 0.34) 10%,
      rgba(10, 42, 74, 0.26) 22%,
      rgba(10, 42, 74, 0.18) 34%,
      rgba(10, 42, 74, 0.11) 46%,
      rgba(10, 42, 74, 0.06) 58%,
      rgba(10, 42, 74, 0.02) 72%,
      rgba(10, 42, 74, 0) 85%
    );}
  }
  & .pps-model__hero-info {
    position: relative; z-index: 1;
    display: grid;
    gap: 10px;
    justify-items: start;
    align-content: end;
    width: 100%;            /* SP：スペックを全幅に使えるように */
    padding-top: 200px;     /* SP：上に写真を多く見せる余白（テキストは下部よせ維持） */
    @media (min-width: 1080px) { width: auto; max-width: 640px; padding-top: 0; }
  }
  & .pps-model__label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #06283d;
  }
  & .pps-model__name {
    font-family: "Mont", var(--en), sans-serif;
    font-weight: 600;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
    max-width: 80%;   /* SP：スペック以外は約半分の幅（右に背景画像を見せる） */
    @media (min-width: 1080px) { max-width: none; max-width: 54%;  }
  }
  & .pps-model__lead {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    @media (min-width: 1080px) { max-width: none; max-width: 54%;}
  }

  /* SP：下部に全幅4分割・縦コンパクト / PC：正方形チップを折返し */
  & .pps-model__chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;            /* 全幅 */
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    @media (min-width: 1080px) { display: flex; flex-wrap: wrap; width: auto; gap: 8px; }
  }
  & .pps-chip {
    display: grid;
    gap: 1px;
    place-items: center;
    align-content: center;
    width: auto;              /* SP：グリッドセル幅いっぱい */
    aspect-ratio: auto;       /* SP：正方形にしない＝縦コンパクト */
    padding: 7px 4px;
    text-align: center;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    @media (min-width: 1080px) { width: 92px; aspect-ratio: 1; gap: 2px; padding: 6px; border-radius: 10px; flex: 0 0 auto; }
  }
  & .pps-chip__ico { display: inline-flex; color: var(--clr-blue-deep); margin-bottom: 1px; @media (min-width: 1080px) { margin-bottom: 2px; } }
  & .pps-chip__ico .pps-ico { width: 14px; height: 14px; @media (min-width: 1080px) { width: 18px; height: 18px; } }
  & .pps-chip__val { font-size: 13px; font-weight: 700; color: var(--clr-ink); font-family: var(--en); line-height: 1.1; @media (min-width: 1080px) { font-size: 17px; } }
  & .pps-chip__approx { font-size: 0.62em; font-weight: 600; margin-right: 1px; }
  & .pps-chip__label { font-size: 10px; color: var(--clr-sub); @media (min-width: 1080px) { font-size: 11px; } }

  /* レビュー訴求スライダー（コンパクト・3カラム / SP1.5・両端矢印） */
  & .pps-reviews { margin: 0; min-width: 0; }
  & .pps-reviews__slider { width: 100%; min-width: 0; }
  /* SP：中央寄せスライドの左右をグラデで少し消す（PCは無し） */
  & .pps-reviews__slider .splide__track {
    -webkit-mask: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 1.6%,
      rgba(0, 0, 0, 0.8) 2.8%,
      #000 4%,
      #000 96%,
      rgba(0, 0, 0, 0.8) 97.2%,
      rgba(0, 0, 0, 0.45) 98.4%,
      transparent 100%);
            mask: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 1.6%,
      rgba(0, 0, 0, 0.8) 2.8%,
      #000 4%,
      #000 96%,
      rgba(0, 0, 0, 0.8) 97.2%,
      rgba(0, 0, 0, 0.45) 98.4%,
      transparent 100%);

    @media (min-width: 1080px) { -webkit-mask: none; mask: none; }
  }
  & .pps-reviews__head {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 10px;
    justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff;
    @media (min-width: 1080px) { font-size: 15px; justify-content:flex-start ;}
  }
  & .pps-reviews__stars-lead { color: #ffe000; letter-spacing: 1px; }
  & .pps-review {
    height: 100%;
    display: flex; flex-direction: column; gap: 8px;
    padding: 2px 14px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.35);   /* 区切り線のみ */
    border-radius: 0;
  }
  & .pps-review__title {
    margin: 0; font-size: 13px; font-weight: 550; line-height: 1.4; color: #fff;
    @media (min-width: 1080px) { font-size: 14px; }
  }
  & .pps-review__text {
    margin: 0; font-size: 12px; font-weight: 500; line-height: 1.6; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* カード高さ揃え */
  & .pps-reviews__slider .splide__slide { height: auto; }
  /* 矢印：白丸＋青の細いシェブロン */
  & .pps-reviews__slider .splide__arrow {
    background: #fff; opacity: 1;
    width: 2em; height: 2em;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: grid; place-items: center;
  }
  & .pps-reviews__slider .splide__arrow svg { display: none; }
  & .pps-reviews__slider .splide__arrow::before {
    content: "";
    width: 8px; height: 8px;
    border-top: 1.6px solid #00abea;
    border-right: 1.6px solid #00abea;
  }
  & .pps-reviews__slider .splide__arrow--next::before { transform: translateX(-1px) rotate(45deg); }
  & .pps-reviews__slider .splide__arrow--prev::before { transform: translateX(1px) rotate(-135deg); }
  /* スライダー端（padding 内）に配置 */
  & .pps-reviews__slider .splide__arrow--prev { left: 0; }
  & .pps-reviews__slider .splide__arrow--next { right: 0; }
  & .pps-reviews__slider .splide__arrow:disabled { opacity: 0.4; }

  & .pps-model__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    @media (min-width: 1080px) { gap: 16px; }

    /* 共通：中央寄せ・大きめ写真・タイトル1行・プレゼント左下 */
    & .lpc__thumb { aspect-ratio: 4 / 3; align-self: auto; min-height: 0; }
    /* padding はメイン画像（直下 img）のみ。プレゼント写真には継承させない */
    & .lpc__thumb > img { padding: 14px 12px 0; }
    & .lpc__body { text-align: center; gap: 8px; }
    & .lpc__colors { justify-content: center; }
    & .lpc__chips { justify-content: center; }
    & .lpc__subtext { justify-content: center; }
    & .product-price-v2-unit { justify-content: center; }
    & .product-price-v2 { align-items: center; text-align: center; }
    /* タイトルは1行・このセクションだけ大きく */
    & .lpc__name {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 0;
      font-size: 15px;
      @media (min-width: 1080px) { font-size: 20px; }
    }
    /* プレゼント：このセクションは右下（プラスアイコンの位置は汎用 lp-product-card.css 側で制御） */
    & .lpc__gifts { right: 8px; left: auto; }

    /* PC：横並び（body 左｜thumb 右）。写真列を右に配置。body 上部パディング復活 */
    @media (min-width: 1080px) {
      & .lpc { grid-template-columns: minmax(0, 1fr) clamp(150px, 40%, 250px); grid-template-rows: auto; grid-template-areas: "body thumb"; }
      & .lpc__thumb { grid-area: thumb; align-self: stretch; aspect-ratio: auto; }
      & .lpc__body { grid-area: body; justify-content: center; padding: 28px 16px 28px; text-align: left; }
      /* PC：テキストコンテンツは全て左寄せ */
      & .lpc__colors { justify-content: flex-start; }
      & .lpc__chips { justify-content: flex-start; }
      & .lpc__subtext { justify-content: flex-start; }
      & .product-price-v2-unit { justify-content: flex-start; }
      & .product-price-v2 { align-items: flex-start; text-align: left; }
      /* PC：サムネイル左側パディング除去 */
      & .lpc__thumb > img { padding-left: 0; }
      /* PC：バッジを右寄せ */
      & .lpc__badge { left: auto; right: 10px; }
    }
  }

  /* [A] ── 商品カード（lp-product-card）── 基本スタイルは汎用 assets/lp-product-card.css に集約。
     ここは Prime Day 固有の上書きのみ（アクセント色 / プレゼント赤テーマ / Amazon枠線）。
     並べ方・中央寄せ・PC横並びレイアウトは上の card-grid 側で指定。 */
  & .lpc { --clr-accent: #FF3243; } /* Prime Day レッド（汎用は橙 #ff6a00） */
  /* プレゼントは赤枠・赤プラス・赤文字（汎用は青/アクセント） */
  & .lpc__gifts { border-color: #e60012; }
  & .lpc__gift-plus { background: #e60012; }
  & .lpc__gift-note { color: #e60012; }
  & .lpc__gift-detail-head { color: #e60012; }
  /* 展開ポップアップ：レイアウト土台の & .lpc__gifts{right:8px;left:auto} に勝たせるため位置も明示 */
  & .lpc.is-gift-open .lpc__gifts {
    top: 6px; right: 5px; bottom: 6px; left: 5px;
    padding: 10px 5px;
    border-color: #e60012;
  }
  @media (min-width: 1080px) and (hover: hover) {
    & .lpc:has(.lpc__gift-note:hover) .lpc__gifts {
      top: 6px; right: 5px; bottom: 6px; left: 5px;
      padding: 10px 5px;
      border-color: #e60012;
    }
  }
  /* Amazon ボタン枠線はグレー（汎用はオレンジ） */
  & .lpc__amazon { border-color: #ccc; }

  /* [B] ── 安心3点 ── */
  & .pps-assure {
    display: none;   /* 非表示 */
    background: var(--clr-bg);
    @media (min-width: 1080px) { border-radius: var(--pps-radius); }
  }
  & .pps-assure__list {
    display: grid;
    gap: 10px;
    list-style: none; padding: 0; margin: 18px 0 0;
    @media (min-width: 1080px) { grid-template-columns: repeat(3, 1fr); }
  }
  & .pps-assure__item {
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--clr-line);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }

  /* [C] ── シーンから選ぶ（全幅ループスライダー：シーンカード＝画像＋該当製品リスト）── */
  /* 全幅の水色バンド（タイトル＋スライダーをまとめて敷く）＋微ノイズ */
  & .pps-scene-band {
    position: relative; isolation: isolate;
    width: 100vw; margin-left: calc(50% - 50vw);
    background: #cdeefb;   /* 少し鮮やかな水色 */
    padding: 40px 0 48px;
    display: flex; flex-direction: column; gap: 22px;   /* タイトルとスライダーの間に余白 */
    @media (min-width: 1080px) { padding: 56px 0 64px; gap: 32px; }
  }
  & .pps-scene-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: url("/cdn/shop/files/sleep_lp_noise.jpg?v=1757499602");
    background-repeat: repeat; background-size: 200px 200px;
    opacity: 0.03; pointer-events: none;   /* ノイズ弱め */
  }
  & .pps-scene-band .pps-sec { padding-top: 0; padding-bottom: 0; }
  & .pps-scene .pps-sec__head { margin-bottom: 0; }   /* タイトル下マージン除去 */
  & .pps-scene__slider {
    width: 100vw; margin-left: calc(50% - 50vw);   /* 全幅 */
    overflow: visible;                              /* clip しない＝両側の薄いカードも見せる */
  }
  & .pps-scene__slider .splide__track { overflow: visible; }
  /* 中央以外は薄く（PC=中央3つ強調／SP=中央1つ強調） */
  & .pps-scene__slider .splide__slide { opacity: 0.3; transition: opacity 0.3s ease; }
  & .pps-scene__slider .splide__slide.is-active { opacity: 1; }
  @media (min-width: 1080px) {
    & .pps-scene__slider .splide__slide.is-active + .splide__slide,
    & .pps-scene__slider .splide__slide:has(+ .is-active) { opacity: 1; }
  }
  /* カードは枠線・背景なし（バンドの背景を見せる） */
  & .pps-scene__card {
    display: flex; flex-direction: column;
    background: transparent; height: 100%;
  }
  /* 写真の面積を大きく（縦長 4/5） */
  & .pps-scene__card-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--clr-bg); }
  & .pps-scene__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  & .pps-scene__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--clr-blue-deep), var(--clr-models-bg)); }
  & .pps-scene__card-ttl {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 30px;
    color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3;
    background: linear-gradient(to bottom, rgba(0, 15, 22, 0.72) 0%, rgba(0, 15, 22, 0.34) 55%, rgba(0, 15, 22, 0) 100%);
    @media (min-width: 1080px) { font-size: 18px; }
  }
  /* とっておきの一台：画像の右下に製品画像＋名前（白カード） */
  & .pps-scene__feature {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; flex-direction: column; gap: 1px;
    padding: 5px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    max-width: 30%;
    transition: transform 0.18s ease;
    @media (hover: hover) and (pointer: fine) { &:hover { transform: translateY(-2px); } }
  }
  /* おすすめバッジ：カード内の最上段・左上（はみ出さない） */
  & .pps-scene__feature-tag {
    align-self: flex-start;
    margin-bottom: 2px;
    font-size: 8px; font-weight: 700; color: #fff;
    background: #00abea; border-radius: 999px; padding: 3px 7px;
    letter-spacing: 0.02em; white-space: nowrap; line-height: 1.1;
  }
  /* 縦並び（画像の下に製品名）。さらに小さく */
  & .pps-scene__feature-main { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  & .pps-scene__feature-img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
  & .pps-scene__feature-name { font-size: 8px; font-weight: 700; color: var(--clr-ink); font-family: var(--en); line-height: 1.2; text-align: center; }
  /* おすすめの理由（旧リストを置換） */
  & .pps-scene__reasons { padding: 12px 2px 0; }
  & .pps-scene__reasons-ttl { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--clr-blue-deep); }
  & .pps-scene__reason-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  & .pps-scene__reason {
    position: relative; padding-left: 20px;
    font-size: 12px; line-height: 1.45; color: var(--clr-ink);
    @media (min-width: 1080px) { font-size: 13px; }
  }
  & .pps-scene__reason::before {
    content: ""; position: absolute; left: 0; top: 0.15em;
    width: 14px; height: 14px;
    background: var(--clr-blue-deep);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Splide 矢印（中央グループの左右・画像の縦中央＝押しやすい位置） */
  & .pps-scene__slider .splide__arrow {
    width: 42px; height: 42px; background: #fff; opacity: 1;
    border: 1px solid var(--clr-line); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    top: 30vw; transform: translateY(-50%);     /* SP：画像(1/1・中央1枚)の縦中央付近 */
    @media (min-width: 1080px) { top: 14vw; }   /* PC：画像(1/1・中央3枚)の縦中央付近 */
  }
  & .pps-scene__slider .splide__arrow svg { width: 16px; height: 16px; fill: var(--clr-ink); }
  /* 中央グループの端に来るよう内側へ（padding 分） */
  & .pps-scene__slider .splide__arrow--prev { left: 4%; }
  & .pps-scene__slider .splide__arrow--next { right: 4%; }
  @media (min-width: 1080px) {
    & .pps-scene__slider .splide__arrow--prev { left: 7%; }
    & .pps-scene__slider .splide__arrow--next { right: 7%; }
  }
  & .pps-scene__slider .splide__arrow:disabled { opacity: 0.35; }

  /* [B] ── ひと目で分かる比較（eufy 比較表構造：JSデータ駆動＋同期ヘッダー＋フレックス行）── */
  /* 比較表内の青はこの1色に統一（フィルタ選択 / ○リング / こんな方に / 詳細ボタン） */
  & .pps-cmp {
    --clr-blue-deep: #00abea;
    --clr-blue: #00abea;
    /* SP：サイドパディング無し（表を画面端まで）。PC は .pps-sec の既定どおり */
    padding-inline: 0;
    @media (min-width: 1080px) { padding-inline: 0; }
  }
  /* 見出し（head）の下に余白を確保（フィルタとの間隔） */
  /* SP はセクションのサイドパディングを 0 にしたぶん、見出しブロック側に左右余白 */
  & .pps-cmp .pps-sec__head { margin-bottom: 32px; text-align: left; padding-inline: 12px; @media (min-width: 1080px) { margin-bottom: 40px; padding-inline: 0; } }
  & .pps-cmp .pps-sec__title { text-align: left; }
  & .pps-cmp .pps-sec__lead { text-align: left; }
  /* フィルタ：上部 sticky。SP=横スクロール / PC=中央寄せ。各軸はセグメントUI */
  & .pps-cmp__filters {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* 全体左寄せ。はみ出す時は折返さず横スクロール */
    justify-content: flex-start;
    background: #fff;
    /* SP：セクションのサイドパディング撤去に伴いバー側に左右余白を持たせる */
    padding: 12px;
    border-bottom: 1px solid var(--clr-line);
    @media (min-width: 1080px) { gap: 14px; padding: 12px 0; }
  }
  & .pps-cmp__filters::-webkit-scrollbar { display: none; }
  & .pps-cmp__filter { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex-shrink: 0; }
  & .pps-cmp__filter-label { font-size: 10px; font-weight: 500; color: var(--clr-sub); white-space: nowrap; @media (min-width: 1080px) { font-size: 11px; } }
  /* セグメント容器（薄グレーのピル） */
  & .pps-cmp__opts { display: flex; gap: 0; flex-wrap: nowrap; border-radius: 100px; background: #f1f5f9; }
  & .pps-cmp__opt {
    border: 1px solid transparent;
    background: transparent;
    color: #374151;
    font-size: 10px; font-weight: 500;
    padding: 7px 10px;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    @media (min-width: 1080px) { font-size: 12px; padding: 8px 13px; }
    &.is-active { background: var(--clr-blue-deep); border-color: var(--clr-blue-deep); color: #fff; }
    &:disabled { color: #cbd5e1; cursor: not-allowed; opacity: 0.6; }
  }

  /* 同期ヘッダー（製品見出し）：上に sticky（top は JS でフィルタ高に追従）、本体の横スクロールに translateX 同期 */
  & .pps-cmp__header {
    position: sticky;
    top: 0;
    z-index: 12;
    margin-top: 24px;       /* フィルタ（ソート）と比較表の間の余白 */
    background: #fff;
    border-bottom: 2px solid #e5e7eb;
    @media (min-width: 1080px) { margin-top: 32px; }
  }
  & .pps-cmp__header-inner { display: flex; }
  & .pps-cmp__header-blank {
    width: 84px; min-width: 84px; flex-shrink: 0;
    @media (min-width: 1080px) { width: 150px; min-width: 150px; }
  }
  & .pps-cmp__header-scroll { overflow: hidden; flex: 1; }
  & .pps-cmp__header-products { display: flex; will-change: transform; }

  /* 列共通幅：JS が「コンテナにfitした幅」を算出して px 固定（フィルタしても維持）。下記はJS適用前のフォールバック */
  & .pps-cmp__product-col,
  & .pps-cmp__cell {
    box-sizing: border-box;
    width: 120px; min-width: 96px; flex-shrink: 0;
  }
  /* 製品見出し（画像＋名前＋リンク） */
  & .pps-cmp__product-col {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 12px 6px; text-align: center;
    @media (min-width: 1080px) { padding: 16px 8px; }
  }
  & .pps-cmp__prodlink { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
  & .pps-cmp__prodimg { width: 64px; height: 50px; object-fit: contain; @media (min-width: 1080px) { width: 86px; height: 66px; } }
  & .pps-cmp__prodname { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--clr-ink); @media (min-width: 1080px) { font-size: 13px; } }

  /* 本体：横スクロール（スクロールバー非表示）。中身は max-content で固定列幅を維持 */
  & .pps-cmp__body { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  & .pps-cmp__body::-webkit-scrollbar { display: none; }
  & .pps-cmp__body-inner { min-width: max-content; }

  /* フレックス行 */
  & .pps-cmp__row {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    &.is-even { background: #f8fafc; }
    &.is-footer { border-bottom: 0; }
  }
  /* 行ラベル：左固定。背景は行種別に合わせる（スクロール時に値が透けないよう不透明） */
  & .pps-cmp__row-label {
    width: 84px; min-width: 84px; flex-shrink: 0;
    position: sticky; left: 0; z-index: 1;
    display: flex; align-items: center;
    padding: 12px 8px; background: #fff;
    font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--clr-sub);
    border-right: 1px solid var(--clr-line);
    @media (min-width: 1080px) { width: 150px; min-width: 150px; padding: 14px; font-size: 13px; }
  }
  & .pps-cmp__row-label-w { font-size: 0.85em; }
  & .pps-cmp__row.is-even .pps-cmp__row-label { background: #f8fafc; }
  /* 出力目安の行ラベル：アイコン付き */
  & .pps-cmp__row-ic {
    width: 15px; height: 15px; flex-shrink: 0;
    margin-right: 6px;
    color: var(--clr-blue-deep);
    @media (min-width: 1080px) { width: 17px; height: 17px; }
  }
  & .pps-cmp__row.is-ic .pps-cmp__row-label { font-weight: 600; }
  /* 値セル：主＋補足を縦積み */
  & .pps-cmp__cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 12px 10px; text-align: center;
    font-size: 12px; line-height: 1.5; color: var(--clr-ink); overflow-wrap: anywhere;
    @media (min-width: 1080px) { padding: 14px 12px; font-size: 13px; }
  }
  & .pps-cmp__main { font-weight: 500; }
  /* 値：○＝デザインした丸、×＝ハイフン、補足は下に小さく */
  & .pps-cmp__yes {
    display: inline-block; width: 15px; height: 15px;
    border-radius: 50%; border: 2.5px solid var(--clr-blue-deep);
    @media (min-width: 1080px) { width: 17px; height: 17px; }
  }
  & .pps-cmp__no { display: inline-block; color: #c2cad1; font-size: 18px; font-weight: 700; line-height: 1; }
  & .pps-cmp__sub { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: var(--clr-sub); @media (min-width: 1080px) { font-size: 11px; } }

  /* こんな方に（先頭行）を強調 */
  & .pps-cmp__row.is-catch { background: #eef6f8; }
  & .pps-cmp__row.is-catch .pps-cmp__row-label { background: #eef6f8; }
  & .pps-cmp__row.is-catch .pps-cmp__cell { font-weight: 700; color: var(--clr-blue-deep); }

  /* おすすめ列：背景なし・角丸線で囲う（上＝ラベル付きで角丸、間の横線は消す、最下＝角丸で閉じる） */
  & .pps-cmp__product-col.is-hl {
    padding-top: 26px;
    border: 2px solid var(--clr-accent);
    border-bottom: 0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  & .pps-cmp__cell.is-hl {
    border-left: 2px solid var(--clr-accent);
    border-right: 2px solid var(--clr-accent);
  }
  /* フッター（最下の is-hl セル）で角丸を閉じる */
  & .pps-cmp__row.is-footer .pps-cmp__cell.is-hl {
    border-bottom: 2px solid var(--clr-accent);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  & .pps-cmp__hl-label {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--clr-accent); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    padding: 3px 0; text-align: center;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
  }

  /* 価格セル：%OFF＋取消線＋税込 */
  & .pps-cmp__price { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.15; }
  & .pps-cmp__price-off {
    display: inline-block; font-family: var(--en);
    font-size: 10px; font-weight: 700; color: #fff;
    background: var(--clr-accent); border-radius: 3px; padding: 3px 6px 2px; letter-spacing: 0.02em;
  }
  & .pps-cmp__price-was { font-size: 10px; color: #9ca3af; text-decoration: line-through; @media (min-width: 1080px) { font-size: 11px; } }
  & .pps-cmp__price-now { font-size: 13px; font-weight: 700; color: var(--clr-accent); }
  & .pps-cmp__tax { font-size: 10px; font-weight: 400; color: var(--clr-sub); margin-left: 2px; }

  & .pps-cmp__empty { margin: 14px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--clr-sub); }
  /* 下部：製品詳細ボタン（青色） */
  & .pps-cmp__detail {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--clr-blue-deep);
    background: var(--clr-blue-deep);
    color: #fff;
    font-size: 11px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    @media (min-width: 1080px) { font-size: 12px; padding: 9px 16px; }
    @media (hover: hover) and (pointer: fine) {
      &:hover { background: var(--clr-blue); border-color: var(--clr-blue); color: #fff; }
    }
  }

  /* 容量・用途から選ぶ：見出しは左寄せ */
  & .pps-more .pps-sec__head { text-align: left; }
  & .pps-more .pps-sec__title { text-align: left; }

  /* [A] ── タブ（CSSのみ） ── */
  & .pps-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
  /* タブバー：外側＝コンテナ全幅の青下線。内側＝タブのグリッド（PC=最大幅に揃える / SP=均等） */
  & .pps-tabs__labels {
    width: 100%;
    margin-bottom: 22px;
    border-bottom: 3px solid #00abea;   /* コンテナいっぱいの下線 */
    /* 追従はスマホのみ */
    position: sticky; top: 0; z-index: 12;
    background: #fff;
    @media (min-width: 1080px) { position: static; }
  }
  & .pps-tabs__labels-inner {
    /* SP：全幅で均等（幅に収まる）/ PC：最大幅に揃える inline-grid・左寄せ（前の挙動） */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
    gap: 4px;
    @media (min-width: 1080px) {
      display: inline-grid;
      width: auto;
      gap: 6px;
    }
    & label {
      cursor: pointer;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      padding: 10px 4px;
      background: #eef1f4;
      border: none;
      border-radius: 8px 8px 0 0;
      color: var(--clr-sub);
      text-align: center;
      line-height: 1.25;
      transition: background-color 0.18s ease, color 0.18s ease;
      @media (min-width: 1080px) { padding: 14px 32px; white-space: nowrap; }
      @media (hover: hover) and (pointer: fine) {
        &:hover { color: var(--clr-ink); }
      }
    }
  }
  & .pps-tabs__ic { width: 22px; height: 22px; flex-shrink: 0; @media (min-width: 1080px) { width: 28px; height: 28px; } }
  & .pps-tabs__ic svg { width: 100%; height: 100%; display: block; }
  & .pps-tabs__cap { font-size: 12px; font-weight: 700; line-height: 1.3; @media (min-width: 1080px) { font-size: 14px; } }
  & .pps-tabs__sub { font-size: 10px; font-weight: 500; line-height: 1.25; @media (min-width: 1080px) { font-size: 11px; } }
  & .pps-tabs__panel { display: none; }
  & #pps-tab-1:checked ~ .pps-tabs__labels label[data-tab="1"],
  & #pps-tab-2:checked ~ .pps-tabs__labels label[data-tab="2"],
  & #pps-tab-3:checked ~ .pps-tabs__labels label[data-tab="3"],
  & #pps-tab-4:checked ~ .pps-tabs__labels label[data-tab="4"] {
    background: #00abea;
    color: #fff;
  }
  & #pps-tab-1:checked ~ .pps-tabs__panels .pps-tabs__panel[data-tab="1"],
  & #pps-tab-2:checked ~ .pps-tabs__panels .pps-tabs__panel[data-tab="2"],
  & #pps-tab-3:checked ~ .pps-tabs__panels .pps-tabs__panel[data-tab="3"],
  & #pps-tab-4:checked ~ .pps-tabs__panels .pps-tabs__panel[data-tab="4"] {
    display: block;
  }
  /* 容量タブのイントロ（簡素：見出し＋コピー＋動かせる家電を1行に） */
  & .pps-cap {
    margin-bottom: 16px;
    display: none;
    @media (min-width: 1080px) { margin-bottom: 18px; }
  }
  /* 動かせる家電：1行・スラッシュ区切り・小アイコン。先頭に「電力目安」ラベル */
  & .pps-cap__apps {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px;
  }
  & .pps-cap__lead {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; color: var(--clr-ink);
  }
  & .pps-cap__lead::after { content: "/"; margin-left: 6px; color: var(--clr-line); font-weight: 400; }
  & .pps-cap__app { display: inline-flex; align-items: center; gap: 4px; }
  & .pps-cap__app:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--clr-line); font-weight: 400; }
  & .pps-cap__app-ic { width: 16px; height: 16px; color: var(--clr-ink); flex-shrink: 0; }
  & .pps-cap__app-ic svg { width: 100%; height: 100%; display: block; }
  & .pps-cap__app-name { font-size: 12px; color: var(--clr-sub); }
  & .pps-cap__app-time { font-size: 12px; font-weight: 700; color: var(--clr-ink); }

  & .pps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    @media (min-width: 1080px) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    @media (min-width: 1440px) { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* 幅広で5カラム */
  }

  /* [B] ── 製品ショーケース（コレクション紐付け・ブルー背景に白カード）── */
  & .pps-showcase {
    padding: 0px 0 0px;
    /* セクション全体に1枚のブルーグラデ（特別価格のブルートーン。上=明るいシアン → 下=ディープブルー） */
    background: linear-gradient(
      180deg,
      #00a9e0 0%,
      #0090d4 22%,
      #0077c0 46%,
      #0d5ba6 72%,
      #124882 100%
    );
    @media (min-width: 1080px) { padding: 0px 0 56px; }
  }
  & .pps-showcase__inner {
    width: 100%;
    margin-inline: auto;
    display: flex; flex-direction: column; 
    @media (min-width: 1080px) { gap: 30px;  width: 97%;}
  }
  & .pps-showcase__block {
    display: flex; flex-direction: column; gap: 0px;
    /* 背景はセクション全体（.pps-showcase）に敷くためブロック個別色は無し */
    background: transparent;
    /* hero の 100vw フルブリードを切らないよう overflow / content-visibility はブロックに付けない（c-v はセクション側） */
    padding: 14px 14px 60px; /* SP：スクロールバー分、下を多めに */
    @media (min-width: 1080px) { gap: 20px; padding: 20px; }
  }

  /* ショーケースはカラバリ商品が無いためスウォッチ行（空のプレースホルダ含む）を非表示 */
  & .pps-showcase .lpc__colors { display: none; }

  /* アクセサリー：タイトル（キャプション）とカード列の間の余白を広めに（ブロックの子は cap と grid の2つ＝flex gap がその間隔） */
  & .pps-showcase__block--other { gap: 28px; @media (min-width: 1080px) { gap: 32px; } }

  & .pps-showcase__hero {
    position: relative;
    margin: -14px -14px 0; /* ブロックの padding を相殺してヒーローを上＆左右いっぱいに */
    @media (min-width: 1080px) {
      /* 全幅：コンテナから抜け出して viewport いっぱいに */
      width: 100vw;
      margin: -20px calc(50% - 50vw) 0;
    }
  }
  & .pps-showcase__img {
    display: block; width: 100%;
    height: 40vh; max-height: 650px; min-height: 150px; object-fit: cover; /* SP：低め */
    @media (min-width: 1080px) { height: 34vh; } /* PC：浅め */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 50%,
      rgba(0, 0, 0, 0.97) 55%, rgba(0, 0, 0, 0.92) 60%, rgba(0, 0, 0, 0.83) 65%,
      rgba(0, 0, 0, 0.71) 70%, rgba(0, 0, 0, 0.56) 75%, rgba(0, 0, 0, 0.4) 80%,
      rgba(0, 0, 0, 0.25) 85%, rgba(0, 0, 0, 0.13) 90%, rgba(0, 0, 0, 0.05) 95%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom,
      #000 0%, #000 50%,
      rgba(0, 0, 0, 0.97) 55%, rgba(0, 0, 0, 0.92) 60%, rgba(0, 0, 0, 0.83) 65%,
      rgba(0, 0, 0, 0.71) 70%, rgba(0, 0, 0, 0.56) 75%, rgba(0, 0, 0, 0.4) 80%,
      rgba(0, 0, 0, 0.25) 85%, rgba(0, 0, 0, 0.13) 90%, rgba(0, 0, 0, 0.05) 95%, rgba(0, 0, 0, 0) 100%);
  }
  /* 動画（冷蔵庫）はPCで下寄せ（被写体を下に） */
  & video.pps-showcase__img { @media (min-width: 1080px) { object-position: center 88%; } }
  & .pps-showcase__img--bottom { object-position: center bottom; }
  & .pps-showcase__hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.3) 18%, rgba(0, 0, 0, 0.16) 34%, rgba(0, 0, 0, 0.05) 48%, rgba(0, 0, 0, 0) 60%);
    /* PC はキャプションが写真上に載らないため可読性グラデ不要 */
    @media (min-width: 1080px) { display: none; }
  }
  & .pps-showcase__cap {
    position: absolute; z-index: 2; top: 0; left: 0;
    display: flex; flex-direction: column; gap: 6px;
    padding: 25px 20px; color: #fff;
    @media (min-width: 1080px) {
      /* PC：写真オーバーレイをやめ、グリッド上部に同じ左端で配置
         左右 padding = inner(97%)の外余白 1.5vw ＋ block padding 20px と揃える */
      position: static;
      width: 100%;
      padding: 24px calc(1.5vw + 20px) 0;
    }
  }
  /* hero画像が無いブロック用：オーバーレイ配置を解除して通常フローに */
  & .pps-showcase__cap--plain {
    position: static;
    padding: 6px 6px 0;
    @media (min-width: 1080px) { padding: 4px 4px 0; }
  }
  & .pps-showcase__title {
    font-size: clamp(22px, 5vw, 42px); font-weight: 500; -webkit-text-stroke: 0.55px currentColor; letter-spacing: -0.01em; line-height: 1.25; margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  & .pps-showcase__text {
    font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin: 0; max-width: 24em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    @media (min-width: 1080px) { font-size: 14px; }
  }
  & .pps-showcase__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* スクロール可能を明示：薄いスクロールバーを表示（ダーク背景なので明色） */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
    /* SP：ブロックの左右 padding(14px) を打ち消してスクロール窓を画面幅いっぱいに。
       先頭/末尾カードの定位置は padding-inline ＋ scroll-padding で維持 */
    margin-inline: -14px;
    padding-inline: 14px;
    scroll-padding-inline: 14px;
    padding-bottom: 8px;
    @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
      padding-bottom: 0;
    }
  }
  & .pps-showcase__grid::-webkit-scrollbar { height: 6px; }
  & .pps-showcase__grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.45); border-radius: 999px; }
  & .pps-showcase__grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }
  & .pps-showcase__grid > * {
    flex: 0 0 auto;
    width: 46%; /* SP：2カラム＋次カードちら見え */
    scroll-snap-align: start;
    @media (min-width: 1080px) { width: auto; }
  }



  /* プライムパス移植ブロック：ショーケース（アクセサリー内）のディープブルーに馴染ませる。
     文字・あしらいは gift 由来の白のまま */
  & .page-primeday2026 { background: transparent; }

  /* [B] ── 特典 ── */
  /* ブルー背景（フラット＋ノイズ・full-bleed。why/models と同一色でシームレス連結） */
  & .pps-benefits {
    position: relative;
    overflow: hidden;
    /* 背景は親 .pps-blueband のメッシュを透過表示 */
    background: transparent;
    color: #fff;
    padding-bottom: 60px;
    @media (min-width: 1080px) {
      width: auto;
      max-width: none;
      padding: 64px var(--pps-pad) 112px;
    }
  }

  /* 背景の横ループ（Anker PrimeDay2026）。カード下部に少しかかる位置・z-index は下 */
  & .pps-benefits__loop {
    position: absolute;
    left: 0; right: 0;
    bottom: 3%;
    z-index: 0;
    pointer-events: none;
    @media (min-width: 1080px) { bottom: 3%; }
  }
  & .pps-benefits__loop-track {
    display: flex;
    width: max-content;
    will-change: transform;
  }
  & .pps-benefits__loop.is-anim .pps-benefits__loop-track {
    animation: pps-benefits-loop 64s linear infinite;
  }
  & .pps-benefits__loop-img {
    display: block;
    height: clamp(72px, 17vw, 168px);
    width: auto;
    opacity: 0.5;
  }

  & .pps-benefits__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none; padding: 0; margin: 30px 0 0;
    @media (min-width: 1080px) { margin: 40px 0 0; gap: 20px; max-width: 1040px; margin-inline: auto; }
  }

  /* アーチ型の白カード：番号→タイトル→説明→下部画像 */
  & .pps-benefits__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 8px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;

    @media (min-width: 1080px) { padding: 36px 16px 44px; border-radius: 10000px; }
  }
  & .pps-benefits__num {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--clr-blue-deep);
    color: #fff;
    font-family: var(--en); font-weight: 700; font-size: 14px;
    margin-bottom: 12px;
    @media (min-width: 1080px) { width: 38px; height: 38px; font-size: 18px; margin-bottom: 16px; }
  }
  & .pps-benefits__ttl {
    color: var(--clr-blue-deep);
    font-size: 13px; font-weight: 700; line-height: 1.4;
    /* 最多3行ぶんの高さを確保しカード間で揃える（文節spanを流すため grid ではなく block＋align-content） */
    min-height: calc(1.4em * 3);
    display: block; align-content: center;
    @media (min-width: 1080px) { font-size: 19px; }
  }
  & .pps-benefits__desc {
    color: var(--clr-sub);
    font-size: 10px; line-height: 1.5; margin-top: 6px;
    /* 最多2行ぶんの高さを確保しカード間で揃える */
    min-height: calc(1.5em * 2);
    display: block; align-content: start;
    @media (min-width: 1080px) { font-size: 12px; margin-top: 10px; }
  }
  /* 文節単位で折り返す（語中で割れない） */
  & .pps-benefits__ttl span,
  & .pps-benefits__desc span { display: inline-block; }
  & .pps-benefits__img {
    display: block;
    width: 90%; height: auto;
    margin-top: 14px;
    @media (min-width: 1080px) { width: 88%; margin-top: 22px; }
  }
}

/* [B] ── 下部追従バー（.page-primeday2026-power の外＝position:fixed のため独立） ── */
.pps-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  /* KV と同じ水色グラデ */
  background: linear-gradient(152deg, #6fe2f6 0%, #1ec2e9 52%, #08a7d6 100%);
  color: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  /* KV より下へスクロールしたら .is-visible で表示（JS が付与） */
  transform: translateY(105%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &.is-visible { transform: translateY(0); }

  & .pps-stickybar__cd {
    /* SP：ラベルとカウントダウンを縦並び */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-family: "din-2014-narrow", sans-serif;
    font-size: 12px;
    & b { font-size: 1.2em; font-weight: 700; font-variant-numeric: tabular-nums; }
    & .pps-countdown__label { opacity: 0.85; }
    & .pps-countdown__time { display: inline-flex; align-items: baseline; gap: 3px; }

    @media (min-width: 1080px) {
      /* PC：従来どおり横並び */
      flex-direction: row;
      align-items: baseline;
      gap: 3px;
      & .pps-countdown__label { margin-right: 4px; }
    }
  }

  & .pps-stickybar__cta {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 4px;
    background: #FF3243;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  @media (min-width: 1080px) {
    justify-content: center;
    gap: 24px;
    padding: 12px;
    & .pps-stickybar__cd { font-size: 14px; }
  }
}

/* ============================================================================
   [C] プライムパス移植ブロック（.pd26-pass）の power LP 専用上書き
   ============================================================================ */
.page-primeday2026-power .pd26-pass__main {
  flex-wrap: wrap;
}

/* テキストを .pd26-pass__text 内に必ず収める：コンテナ幅比（cqw）の上限で自動縮小。
   上限値は 390px デザイン時の「文字サイズ ÷ text 幅(約220px)」比。余裕がある幅では従来サイズのまま */
.page-primeday2026-power .pd26-pass__text {
  container-type: inline-size;
}

.page-primeday2026-power .pd26-pass__lead {
  font-size: min(max(10px, calc(var(--pd26-sp-scale) * 14)), 6.4cqw);
}

.page-primeday2026-power .pd26-pass__num,
.page-primeday2026-power .pd26-pass__suffix {
  font-size: min(max(10px, calc(var(--pd26-sp-scale) * 34)), 15cqw);
}

.page-primeday2026-power .pd26-pass__amt-pre,
.page-primeday2026-power .pd26-pass__unit {
  font-size: min(max(10px, calc(var(--pd26-sp-scale) * 26)), 11.5cqw);
}

.page-primeday2026-power .pd26-pass__amt-post {
  font-size: min(max(10px, calc(var(--pd26-sp-scale) * 17)), 7.5cqw);
}

@media (min-width: 960px) {
  .page-primeday2026-power .pd26-pass__lead {
    font-size: min(max(10px, calc(var(--pd26-scale) * 16)), 6.4cqw);
  }

  .page-primeday2026-power .pd26-pass__num,
  .page-primeday2026-power .pd26-pass__suffix {
    font-size: min(max(10px, calc(var(--pd26-scale) * 48)), 15cqw);
  }

  .page-primeday2026-power .pd26-pass__amt-pre,
  .page-primeday2026-power .pd26-pass__unit {
    font-size: min(max(10px, calc(var(--pd26-scale) * 38)), 11.5cqw);
  }

  .page-primeday2026-power .pd26-pass__amt-post {
    font-size: min(max(10px, calc(var(--pd26-scale) * 24)), 7.5cqw);
  }
}