/* =====================================================
   Eufy Omni E35 / C30 Edge LP
   [A]汎用: 他 LP にそのまま流用できる
   [B]型流用: 構造は流用・値は LP 固有
   [C]LP固有: このページ専用
===================================================== */

/* [A] ── フォント ── */
@font-face {
  font-family: "Mont";
  font-weight: 300;
  src: url("/cdn/shop/files/MontForAnker-Book.woff2?v=1736241329") format("woff2");
  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");
  font-display: swap;
}

html:has(.page-eufy-e35) {
  scroll-behavior: smooth;
}

/* [B] ── ページルート / トークン ── */
.page-eufy-e35 {
  --color-primary: #00cbeb;
  --color-amazon: #ff9900;
  --color-text: #ffffff;
  --color-text-sub: #b3b3b3;
  --color-text-dark: #211b19;
  --color-bg-dark: #080808;
  --color-bg-black: #080808;
  --color-bg-gray: #6f7378;
  --color-bg-beige: #f2e8dd;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.025 0.08 0.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size: 180px 180px;
  --nu-blue: radial-gradient(ellipse closest-side, rgba(22, 88, 196, 0.3) 0.0%, rgba(22, 88, 196, 0.2271) 8.3%, rgba(22, 88, 196, 0.1674) 16.7%, rgba(22, 88, 196, 0.1195) 25.0%, rgba(22, 88, 196, 0.082) 33.3%, rgba(22, 88, 196, 0.0535) 41.7%, rgba(22, 88, 196, 0.0326) 50.0%, rgba(22, 88, 196, 0.0182) 58.3%, rgba(22, 88, 196, 0.0089) 66.7%, rgba(22, 88, 196, 0.0036) 75.0%, rgba(22, 88, 196, 0.001) 83.3%, rgba(22, 88, 196, 0.0001) 91.7%, rgba(22, 88, 196, 0.0) 100.0%);
  --nu-cyan: radial-gradient(ellipse closest-side, rgba(0, 203, 235, 0.1) 0.0%, rgba(0, 203, 235, 0.0757) 8.3%, rgba(0, 203, 235, 0.0558) 16.7%, rgba(0, 203, 235, 0.0398) 25.0%, rgba(0, 203, 235, 0.0273) 33.3%, rgba(0, 203, 235, 0.0178) 41.7%, rgba(0, 203, 235, 0.0109) 50.0%, rgba(0, 203, 235, 0.0061) 58.3%, rgba(0, 203, 235, 0.003) 66.7%, rgba(0, 203, 235, 0.0012) 75.0%, rgba(0, 203, 235, 0.0003) 83.3%, rgba(0, 203, 235, 0.0) 91.7%, rgba(0, 203, 235, 0.0) 100.0%);
  --nu-light: radial-gradient(ellipse closest-side, rgba(255, 255, 255, 0.12) 0.0%, rgba(255, 255, 255, 0.0908) 8.3%, rgba(255, 255, 255, 0.067) 16.7%, rgba(255, 255, 255, 0.0478) 25.0%, rgba(255, 255, 255, 0.0328) 33.3%, rgba(255, 255, 255, 0.0214) 41.7%, rgba(255, 255, 255, 0.0131) 50.0%, rgba(255, 255, 255, 0.0073) 58.3%, rgba(255, 255, 255, 0.0036) 66.7%, rgba(255, 255, 255, 0.0014) 75.0%, rgba(255, 255, 255, 0.0004) 83.3%, rgba(255, 255, 255, 0.0) 91.7%, rgba(255, 255, 255, 0.0) 100.0%);
  --color-line: rgba(255, 255, 255, 0.25);
  --color-line-dark: rgba(33, 27, 25, 0.2);
  --max-width: 1300px;
  --gutter: 20px;
  --gutter-pc: 50px;
  --stage: 100vh;
  @supports (height: 100svh) {
    --stage: 100svh;
  }
  @media (min-width: 1080px) {
    --stage: 100svh;
  }
  --radius: 8px;
  --font-en: "Mont", "Mont For Anker", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-head: "Gen Interface JP Display", "Noto Sans JP", sans-serif;
  --fs-chapter: clamp(24px, 2.7vw, 38px);
  --fs-section: clamp(28px, 3.4vw, 48px);
  --fs-block: clamp(22px, 2.3vw, 32px);
  --fs-card: clamp(17px, 1.6vw, 22px);
  --fs-body: clamp(13px, 1.15vw, 16px);
  --fs-small: clamp(12px, 1vw, 14px);
  --fs-note: clamp(10px, 0.75vw, 11px);

  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: 400;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
  line-height: 1.6;
  overflow-x: clip;

  & h1, & h2, & h3, & p, & ul, & ol, & figure {
    margin: 0;
    color: inherit;
  }
  & ul, & ol {
    padding: 0;
    list-style: none;
  }
  & img {
    display: block;
    max-width: 100%;
  }
  & a {
    color: inherit;
    text-decoration: none;
  }
  & sup {
    font-size: 0.55em;
    vertical-align: super;
    line-height: 0;
    letter-spacing: 0;
  }

  /* [A] ── HUD（?debug=1） ── */
  & .hud {
    display: none;
    position: fixed;
    top: 12px;
    z-index: 100;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(13, 13, 16, 0.8);
    font: 11px/1.4 "Mont", monospace;
    color: #9a9a98;
    &.is-on {
      display: block;
    }
  }
  & #hudkv {
    left: 12px;
  }
  & #hudm {
    right: 12px;
  }

  /* [A] ── 共通: 章扉 ── */
  & .chapter {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 80px var(--gutter);
    background: var(--color-bg-dark);
    overflow: clip;
    text-align: center;

    & .chapter__media {
      position: absolute;
      inset: 0;
      z-index: 0;
      & video, & img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.55;
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
          rgba(8, 8, 8, 1) 0%,
          rgba(8, 8, 8, 0.86) 8%,
          rgba(8, 8, 8, 0.62) 18%,
          rgba(8, 8, 8, 0.4) 30%,
          rgba(8, 8, 8, 0.24) 42%,
          rgba(8, 8, 8, 0.14) 54%,
          rgba(8, 8, 8, 0.14) 60%,
          rgba(8, 8, 8, 0.26) 70%,
          rgba(8, 8, 8, 0.46) 80%,
          rgba(8, 8, 8, 0.7) 90%,
          rgba(8, 8, 8, 1) 100%);
      }
    }
    & .chapter__copy {
      position: relative;
      z-index: 1;
      font-size: var(--fs-chapter);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.04em;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
      &.is-in {
        opacity: 1;
        transform: none;
      }
    }
  }

  /* [A] ── 共通: フェードイン ── */
  & .reasons__body, & .pickup__body, & .features__title, & .bento__card,
  & .mop__head, & .mop__stat, & .mop__card, & .care__row, & .scard, & .lineup__card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    &.is-in {
      opacity: 1;
      transform: none;
    }
  }

  /* [A] ── 共通: 価格 / テキストリンク / 注釈 ── */
  & .price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 0;
    & .price__tax {
      font-family: var(--font-jp);
      font-size: 10px;
      color: var(--color-text-sub);
    }
  }
  & .textlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
    & span {
      color: var(--color-text);
    }
    &::after {
      content: "";
      width: 5px;
      height: 5px;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      transform: rotate(45deg);
    }
  }
  & .note {
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-note);
    line-height: 1.5;
    letter-spacing: 0.02em;
    opacity: 0.6;
  }
  & .item__note {
    margin: 12px 0 0;
  }

  /* [A] ── 共通: lp-btns 上書き（ピル / 購入はシアン枠線 / Amazon ベタ塗り） ── */
  & .lp-btns, & .pickup__btns, & .scard__btns, & .LpNav-drop__btns {
    width: 100%;
  }
  & .pickup__btns, & .scard__btns, & .LpNav-drop__btns {
    & .lp-btns {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      margin: 0;
      & li {
        flex: 1 1 140px;
        max-width: 240px;
        margin: 0;
        list-style: none;
      }
      & li.is-more {
        flex-basis: 100%;
        max-width: none;
        text-align: center;
      }
    }
    & .lp-btn, & .lp-btn-amazon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 48px;
      padding: 14px 20px;
      border-radius: 100px;
      border: 1px solid var(--color-primary);
      background: transparent;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #fff;
      & span {
        color: #fff;
      }
      @media (min-width: 1080px) {
        min-height: 56px;
      }
    }
    & .lp-btn-amazon {
      border-color: var(--color-amazon);
      background: var(--color-amazon);
    }
  }

  /* [C] ── 1. KV ── */
  & .m-sp {
    @media (min-width: 1080px) {
      display: none;
    }
  }
  & .m-pc {
    display: none;
    @media (min-width: 1080px) {
      display: inline;
    }
  }
  & .kv-still {
    display: none;
  }
  & .kv-sec {
    position: relative;
    z-index: 1;
    background: #080808;
    & .kv {
      position: sticky;
      top: 0;
      height: var(--stage);
      min-height: 560px;
      @media (min-width: 1080px) {
        min-height: calc(520px + 15.3vw);
      }
      overflow: clip;
      background: #080808;
    }
    & .kv__gl, & .kv__fx {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    & .kv__gl {
      z-index: 1;
    }
    & .kv__fx {
      z-index: 2;
    }
    & .kv__copy {
      position: absolute;
      z-index: 3;
      inset: 0;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 14px;
      text-align: center;
      bottom: auto;
      height: 100svh;
      padding: 0 12px 12svh;
      pointer-events: none;
      transform: translateY(calc(var(--cout, 0) * -28px));
      @media (min-width: 1080px) {
        bottom: 0;
        height: auto;
        gap: 20px;
        padding: 0 56px 6svh;
      }
    }
    & .kv__title {
      font-family: var(--font-head);
      font-size: clamp(32px, 8.7vw, 44px);
      @media (min-width: 1080px) {
        font-size: clamp(32px, 4.3vw, 66px);
      }
      font-weight: 400;
      line-height: 1.42;
      -webkit-text-stroke: 0.012em currentColor;
      letter-spacing: -0.02em;
      text-wrap: balance;
      translate: 0.25em 0;
    }
    & .kv__sub {
      font-size: clamp(12px, 1.4vw, 20px);
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 0 12px rgba(5, 5, 7, 0.9), 0 0 28px rgba(5, 5, 7, 0.7);
    }
    & .kv__final {
      position: absolute;
      z-index: 3;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 48%;
        background: linear-gradient(to top,
          rgba(135, 140, 145, 1) 0%,
          rgba(135, 140, 145, 1) 30%,
          rgba(135, 140, 145, 0.92) 40%,
          rgba(135, 140, 145, 0.78) 50%,
          rgba(135, 140, 145, 0.6) 60%,
          rgba(135, 140, 145, 0.42) 70%,
          rgba(135, 140, 145, 0.26) 80%,
          rgba(135, 140, 145, 0.12) 90%,
          rgba(135, 140, 145, 0.04) 96%,
          rgba(135, 140, 145, 0) 100%);
      }
    }
    & .kv__labels {
      position: absolute;
      left: 0;
      right: 0;
      top: 60%;
      display: flex;
      justify-content: space-between;
      padding: 0 8%;
      font-family: var(--font-en);
      font-size: 13px;
      letter-spacing: 0;
      color: #2a2a2c;
      @media (min-width: 1080px) {
        top: 59%;
        padding: 0 16%;
        font-size: 14px;
      }
    }
    &.is-stack .kv__labels {
      top: 0;
      padding: 0;
      & .kv__label {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        transform: translate(calc(var(--lx) - 50%), var(--ly));
      }
      & .kv__label--e35 {
        --lx: var(--lex);
        --ly: var(--ley);
      }
      & .kv__label--c30 {
        --lx: var(--lcx);
        --ly: var(--lcy);
      }
    }
    & .kv__final-copy {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5vh;
      display: grid;
      gap: 14px;
      justify-items: center;
      padding: 0 12px;
      text-align: center;
      color: #fff;
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
      @media (min-width: 1080px) {
        filter: drop-shadow(0 0 15px rgba(150, 154, 160, 0.9));
        bottom: 6vh;
        gap: 18px;
        padding: 0 var(--gutter);
      }
    }
    & .kv__final-title {
      font-family: var(--font-head);
      font-size: clamp(28px, 3.4vw, 50px);
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.02em;
    }
    & .kv__pun {
      margin-right: -0.4em;
    }
    & .kv__q {
      display: inline-block;
      font-family: var(--font-en);
      font-size: 0.9em;
      vertical-align: 0.16em;
      line-height: 0;
      -webkit-text-stroke: 0;
    }
    & .kv__q--o {
      margin: 0 -0.04em 0 0.1em;
    }
    & .kv__q--c {
      margin: 0 0.1em 0 -0.04em;
    }
    & .kv__note {
      -webkit-text-stroke: 0;
      font-weight: 300;
      font-size: 0.4em;
      margin-left: 0.15em;
    }
    /* シリーズのコピーをメインに（長い1行がスマホで収まる大きさ） */
    & .kv__final-copy .kv__final-title.kv__final-title--series {
      font-size: clamp(22px, 7.4vw, 34px);
      line-height: 1.4;
      -webkit-text-stroke: 0.01em currentColor;
      & .kv__line:nth-child(n + 3) {
        @media (min-width: 1080px) {
          display: inline-block;
        }
      }
      @media (min-width: 1080px) {
        line-height: 1.3;
        font-size: clamp(19px, 2.9vw, 42px);
        -webkit-text-stroke: 0;
      }
    }
    & .kv__line {
      display: block;
      overflow: hidden;
      padding: 0.05em 0.1em;
      margin: -0.05em -0.1em;
      & > span {
        display: block;
        transform: translateY(112%);
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.13s);
        @media (prefers-reduced-motion: reduce) {
          transition: none;
          transform: none;
        }
      }
    }
    &.is-final .kv__final .kv__line > span,
    &.is-intro-in .kv__copy .kv__line > span {
      transform: none;
    }
    & .kv__final-sub {
      font-size: clamp(13px, 1.6vw, 22px);
      line-height: 1.6;
      opacity: 0.72;
    }
    & .kv__final-note {
      position: absolute;
      z-index: 1;
      left: var(--gutter);
      right: var(--gutter);
      top: auto;
      bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      width: auto;
      margin: 0;
      font-size: 10px;
      font-weight: 200;
      line-height: 1.4;
      letter-spacing: 0;
      text-align: left;
      color: rgba(255, 255, 255, 0.72);
      opacity: 0;
      transition: opacity 0.6s ease 0.9s;
      @media (min-width: 1080px) {
        bottom: 16px;
        text-align: center;
      }
    }
    &.is-final .kv__final-note {
      opacity: 1;
    }
    & .kv__scroller {
      height: 300vh;
    }
    & .kv__poster {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: clip;
      background: #c9ccd0;
      & .kv__poster-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      & .kv__poster-word {
        position: absolute;
        left: 50%;
        top: 6%;
        transform: translateX(-50%);
        font-family: var(--font-en);
        font-size: 22vw;
        line-height: 0.95;
        letter-spacing: -0.05em;
        color: rgba(255, 255, 255, 0.5);
        white-space: nowrap;
      }
    }
    &.is-glflow .kv__fx {
      display: none;
    }
    &.is-nogl {
      & .kv__gl, & .kv__fx, & .kv__copy {
        display: none;
      }
      & .kv__poster {
        display: block;
      }
      & .kv__final {
        opacity: 1;
      }
      & .kv__scroller {
        height: 0;
      }
    }
  }

  /* [C] ── 2. 理由 ── */
  & .reasons--v1 {
    display: none;
  }
  html.kv-v1 & .reasons--v1 {
    display: block;
  }
  & .reasons {
    position: relative;
    padding: 100px var(--gutter) 120px;
    background: var(--color-bg-dark);
    border-top: 1px solid rgba(135, 140, 145, 0.5);
    overflow: clip;
    @media (min-width: 1080px) {
      padding: 200px var(--gutter-pc) 180px;
    }
    & .reasons__inner {
      position: relative;
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      gap: 56px;
      justify-items: center;
      @media (min-width: 1080px) {
        gap: 80px;
      }
    }
    & .reasons__title {
      font-size: var(--fs-section);
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: 0.02em;
      text-align: center;
    }
    & .reasons__body {
      display: grid;
      gap: 32px;
      max-width: 560px;
      text-align: center;
      @media (min-width: 1080px) {
        gap: 36px;
      }
    }
    & .reasons__text {
      font-size: clamp(15px, 1.4vw, 20px);
      line-height: 1.8;
      letter-spacing: 0.04em;
    }










    & .reasons__fig {
      display: none;
      @media (min-width: 1080px) {
        display: block;
        position: absolute;
        width: 24%;
        aspect-ratio: 974 / 554;
        border-radius: 4px;
        overflow: clip;
        opacity: 0.85;
        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    & .reasons__fig--a {
      @media (min-width: 1080px) {
        right: 0;
        top: 24%;
      }
    }
    & .reasons__fig--b {
      @media (min-width: 1080px) {
        left: 0;
        bottom: 2%;
      }
    }
  }
  & .reasons__graph {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 640px;
    padding: 28px var(--gutter);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    @media (min-width: 1080px) {
      gap: 22px;
      padding: 36px 40px;
    }
  }
  & .reasons__graph-title {
    font-size: var(--fs-small);
    color: var(--color-text-sub);
  }
  & .reasons__bar {
    display: grid;
    gap: 8px;
    @media (min-width: 1080px) {
      grid-template-columns: 180px 1fr;
      align-items: center;
      gap: 20px;
    }
  }
  & .reasons__bar-label {
    font-size: var(--fs-small);
  }
  & .reasons__bar-track {
    display: block;
    height: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  & .reasons__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 10px;
    background: var(--color-text-sub);
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  & .reasons__bar-fill--e35 {
    background: var(--color-primary);
    transition-duration: 2.6s;
  }
  & .reasons__graph.is-in .reasons__bar-fill--others {
    width: 48%;
  }
  & .reasons__graph.is-in .reasons__bar-fill--e35 {
    width: 100%;
  }
  & .reasons__graph-note {
    font-size: var(--fs-note);
    color: var(--color-text-sub);
  }
  & .kv__chart {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin: 4px auto 0;
    text-align: left;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
    @media (min-width: 1080px) {
      gap: 10px;
      margin-top: 0;
    }
    &.is-in {
      opacity: 1;
      transform: none;
    }
  }
  & .kv__chart-title {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--color-text-sub);
  }
  & .kv__chart-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  & .kv__chart-axis {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1;
  }
  & .kv__chart-grid {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
    stroke-dasharray: 3 5;
  }
  & .kv__chart-area {
    opacity: 0;
    transition: opacity 1.4s ease-out 3s;
  }
  & .kv__chart-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1.7s;
  }
  & .kv__chart-line--old {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-dasharray: 1;
  }
  & .kv__chart-line--e35 {
    stroke: var(--color-primary);
    stroke-width: 3;
    transition-delay: 2.4s;
  }
  & .kv__chart-line--glow {
    stroke-width: 8;
    opacity: 0.55;
  }
  & .kv__chart-dot {
    opacity: 0;
    transition: opacity 0.6s ease-out;
  }
  & .kv__chart-dot--old {
    fill: rgba(255, 255, 255, 0.6);
    transition-delay: 3.4s;
  }
  & .kv__chart-dot--e35 {
    fill: var(--color-primary);
    filter: drop-shadow(0 0 8px rgba(0, 203, 235, 0.9));
    transition-delay: 4s;
  }
  & .kv__chart-lbl {
    fill: rgba(255, 255, 255, 0.55);
    font-family: var(--font-jp);
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  & .kv__chart.is-in {
    & .kv__chart-line {
      stroke-dashoffset: 0;
    }
    & .kv__chart-area, & .kv__chart-dot {
      opacity: 1;
    }
  }
  & .kv__chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
  }
  & .kv__chart-leg {
    display: flex;
    align-items: center;
    gap: 8px;
    & i {
      display: block;
      width: 18px;
      height: 3px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.45);
    }
  }
  & .kv__chart-leg--e35 i {
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(0, 203, 235, 0.8);
  }
  & .kv__chart-note {
    margin: 0;
    font-size: var(--fs-note);
    color: var(--color-text-sub);
  }

  /* [C] ── 4. モーション ── */
  & .motion {
    position: relative;
    z-index: 2;
    margin-top: -200svh;
    background: transparent;
    & .motion__stage {
      position: sticky;
      top: 0;
      height: var(--stage);
      overflow: clip;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: #080808;
        opacity: var(--mo, 1);
      }
    }
    & .vis {
      opacity: var(--mo, 1);
    }
    & .motion__txt {
      opacity: max(0, calc((var(--mo, 1) - 0.6) * 2.5));
    }
    & .vis {
      position: relative;
      height: 100%;
      @media (min-width: 1080px) {
        transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: 50% 50%;
      }
    }
    & .motion__stage:has(.item[data-i="0"].is-on) .vis {
      @media (min-width: 1080px) {
        transform: translateX(1.5vw) scale(1.04);
      }
    }
    & .motion__stage:has(.item[data-i="2"].is-on) .vis {
      @media (min-width: 1080px) {
        transform-origin: 50% 0;
        transform: translateX(1.5vw) scale(1.04);
      }
    }
    & .motion__canvas, & .motion__gl {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    & .motion__gl {
      pointer-events: none;
    }
    & .motion__txt {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
          rgba(7, 7, 9, 0.9) 0%,
          rgba(7, 7, 9, 0.8) 10%,
          rgba(7, 7, 9, 0.62) 20%,
          rgba(7, 7, 9, 0.42) 30%,
          rgba(7, 7, 9, 0.26) 38%,
          rgba(7, 7, 9, 0.14) 46%,
          rgba(7, 7, 9, 0.06) 54%,
          rgba(7, 7, 9, 0.02) 62%,
          rgba(7, 7, 9, 0) 70%);
        @media (min-width: 1080px) {
          opacity: 0;
          transition: opacity 0.8s ease;
          background: linear-gradient(to right,
            rgba(7, 7, 9, 0.92) 0%,
            rgba(7, 7, 9, 0.86) 10%,
            rgba(7, 7, 9, 0.74) 19%,
            rgba(7, 7, 9, 0.58) 27%,
            rgba(7, 7, 9, 0.42) 34%,
            rgba(7, 7, 9, 0.27) 41%,
            rgba(7, 7, 9, 0.15) 47%,
            rgba(7, 7, 9, 0.06) 52%,
            rgba(7, 7, 9, 0.01) 56%,
            rgba(7, 7, 9, 0) 60%);
          mask-image: none;
        }
      }
      &:has(.item[data-i="0"].is-on)::before,
      &:has(.item[data-i="2"].is-on)::before {
        @media (min-width: 1080px) {
          opacity: 1;
        }
      }
      &:has(.item[data-i="1"].is-on)::before {
        @media (min-width: 1080px) {
          opacity: 1;
          transition-delay: 0.2s;
          background: linear-gradient(to bottom,
            rgba(7, 7, 9, 0.78) 0%,
            rgba(7, 7, 9, 0.74) 12%,
            rgba(7, 7, 9, 0.68) 24%,
            rgba(7, 7, 9, 0.6) 36%,
            rgba(7, 7, 9, 0.52) 48%,
            rgba(7, 7, 9, 0.45) 60%,
            rgba(7, 7, 9, 0.4) 72%,
            rgba(7, 7, 9, 0.37) 84%,
            rgba(7, 7, 9, 0.36) 100%);
        }
      }
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 34%;
        background: linear-gradient(to bottom,
          rgba(7, 7, 9, 0.7) 0%,
          rgba(7, 7, 9, 0.6) 10%,
          rgba(7, 7, 9, 0.47) 20%,
          rgba(7, 7, 9, 0.34) 31%,
          rgba(7, 7, 9, 0.22) 43%,
          rgba(7, 7, 9, 0.13) 56%,
          rgba(7, 7, 9, 0.07) 69%,
          rgba(7, 7, 9, 0.03) 82%,
          rgba(7, 7, 9, 0.01) 92%,
          rgba(7, 7, 9, 0) 100%);
      }
    }
    & .item {
      position: absolute;
      z-index: 1;
      left: var(--gutter);
      right: var(--gutter);
      bottom: 32px;
      display: grid;
      gap: 18px;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      @media (min-width: 1080px) {
        left: 40px;
        right: auto;
        top: 50%;
        bottom: auto;
        width: max-content;
        max-width: 36vw;
        transform: translateY(calc(-50% + 14px));
        gap: 40px;
      }
      &.is-on {
        opacity: 1;
        transform: none;
        @media (min-width: 1080px) {
          transform: translateY(-50%);
        }
      }
    }
    & .item__body {
      display: grid;
      gap: 18px;
      @media (min-width: 1080px) {
        width: min-content;
        min-width: 100%;
        gap: 24px;
      }
    }
    & .item[data-i="1"] {
      @media (min-width: 1080px) {
        right: 40px;
        width: auto;
        max-width: none;
        grid-template-columns: minmax(0, 36vw) minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 48px;
        align-items: center;
      }
      & .item__body {
        @media (min-width: 1080px) {
          display: contents;
        }
      }
      & .item__title {
        @media (min-width: 1080px) {
          grid-column: 1;
          grid-row: 1;
          align-self: end;
        }
      }
      & .item__text {
        @media (min-width: 1080px) {
          grid-column: 1;
          grid-row: 2;
          align-self: start;
          width: min-content;
          min-width: 100%;
        }
      }
      & .item__compare {
        @media (min-width: 1080px) {
          grid-column: 2;
          grid-row: 1 / 3;
          justify-self: center;
          align-self: center;
          gap: 22px;
          padding-right: 60px;
        }
      }
      & .item__compare-title {
        @media (min-width: 1080px) {
          font-size: 20px;
          text-align: center;
        }
      }
      & .item__compare-row {
        @media (min-width: 1080px) {
          gap: 56px;
          justify-content: center;
        }
      }
      & .item__compare-fig {
        @media (min-width: 1080px) {
          width: 250px;
          gap: 16px;
          & img {
            width: 250px;
            height: 250px;
          }
          & figcaption {
            font-size: 18px;
          }
        }
      }
      & .item__compare-arrow {
        @media (min-width: 1080px) {
          transform: scale(1.8);
        }
      }
    }
    & .item__title {
      font-family: var(--font-head);
      font-size: clamp(30px, 8.4vw, 34px);
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.01em;
      -webkit-text-stroke: 0.5px currentColor;
      @media (min-width: 1080px) {
        font-size: clamp(40px, 4vw, 62px);
        line-height: 1.22;
        letter-spacing: 0;
        white-space: nowrap;
        width: max-content;
        max-width: none;
      }
      & sup {
        position: relative;
        top: -1.15em;
        margin-left: 0.02em;
        font-size: 0.4em;
        line-height: 0;
        letter-spacing: 0;
        vertical-align: baseline;
        &.sup--after-period {
          margin-left: -1.05em;
        }
      }
    }
    & .item__big {
      display: inline-flex;
      align-items: baseline;
      gap: 0.08em;
      white-space: nowrap;
      & b {
        font-family: var(--font-en);
        font-weight: 400;
        font-size: 2.2em;
        line-height: 0.85;
        letter-spacing: -0.04em;
      }
    }
    & .item__text {
      font-size: 16px;
      font-weight: 200;
      line-height: 1.75;
      letter-spacing: 0.04em;
      @media (min-width: 1080px) {
        font-size: clamp(16px, 1.3vw, 20px);
        font-weight: 400;
        line-height: 1.85;
      }
    }
    & .motion__no {
      position: absolute;
      top: 16px;
      left: var(--gutter);
      z-index: 3;
      display: flex;
      margin: 0;
      font-family: var(--font-head);
      font-weight: 500;
      font-size: clamp(66px, 18vw, 72px);
      line-height: 1;
      letter-spacing: -0.04em;
      pointer-events: none;
      opacity: var(--mo, 1);
      @media (min-width: 1080px) {
        font-family: var(--font-en);
        font-weight: 200;
        top: 50%;
        left: auto;
        right: 40px;
        font-size: clamp(72px, 7vw, 120px);
        transform: translateY(-50%);
      }
    }
    & .motion__label {
      position: absolute;
      top: calc(16px + clamp(66px, 18vw, 72px) - 4px);
      left: var(--gutter);
      z-index: 3;
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -0.02em;
      color: rgba(255, 255, 255, 0.78);
      pointer-events: none;
      opacity: var(--mo, 1);
      @media (min-width: 1080px) {
        top: calc(40px + clamp(72px, 7vw, 120px) - 8px);
        left: 40px;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.06em;
      }
    }
    & .item__compare {
      display: grid;
      gap: 10px;
    }
    & .item__compare-title {
      font-family: var(--font-head);
      font-size: 13px;
      letter-spacing: 0.04em;
      @media (min-width: 1080px) {
        font-size: 14px;
      }
    }
    & .item__compare-row {
      display: flex;
      align-items: center;
      gap: 16px;
      @media (min-width: 1080px) {
        gap: 28px;
      }
    }
    & .item__compare-fig {
      display: grid;
      gap: 8px;
      justify-items: center;
      width: 82px;
      @media (min-width: 1080px) {
        width: 100px;
      }
      & img {
        width: 82px;
        height: 82px;
        object-fit: contain;
        @media (min-width: 1080px) {
          width: 100px;
          height: 100px;
        }
      }
      &.item__compare-fig--anker img {
        transform: none;
      }
      & figcaption {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: #f2f5fa;
        &.is-en {
          font-family: var(--font-en);
          font-size: 13px;
          font-weight: 400;
        }
      }
    }
    & .item__compare-arrow {
      width: 0;
      height: 0;
      border-left: 10px solid #fff;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
    }
    & .item[data-i="1"] {
      & .item__compare {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 72px);
        @media (min-width: 1080px) {
          position: static;
        }
      }
      & .item__compare-row {
        justify-content: center;
        gap: 14px;
        @media (min-width: 1080px) {
          justify-content: flex-start;
          gap: 28px;
        }
      }
      & .item__compare-fig {
        width: calc((100% - 44px) / 2);
        gap: 12px;
        @media (min-width: 1080px) {
          width: 100px;
          gap: 8px;
        }
        & img {
          width: 100%;
          height: auto;
          aspect-ratio: 1;
          @media (min-width: 1080px) {
            width: 100px;
            height: 100px;
          }
        }
        & figcaption {
          font-size: 13px;
          @media (min-width: 1080px) {
            font-size: 10px;
          }
          &.is-en {
            font-size: 15px;
            @media (min-width: 1080px) {
              font-size: 13px;
            }
          }
        }
      }
      & .item__compare-arrow {
        border-left-width: 14px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        @media (min-width: 1080px) {
          border-left-width: 10px;
          border-top-width: 7px;
          border-bottom-width: 7px;
        }
      }
    }
    & .item__badge {
      width: 120px;
      @media (min-width: 1080px) {
        width: 153px;
      }
    }
    & .deco {
      position: absolute;
      right: var(--gutter);
      top: 24px;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      @media (min-width: 1080px) {
        right: 64px;
        top: 84px;
        gap: 14px;
      }
      & .n {
        font-family: var(--font-en);
        font-size: clamp(64px, 11vw, 168px);
        line-height: 0.85;
        letter-spacing: -0.02em;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(150, 205, 255, 0.85);
        text-shadow: 0 0 24px rgba(90, 170, 255, 0.25);
      }
      & .d {
        padding-top: 6px;
        font-family: var(--font-en);
        font-size: clamp(9px, 0.9vw, 13px);
        line-height: 1.4;
        letter-spacing: 0.16em;
        color: #9fc9ef;
      }
    }
    & .motion__scroller {
      height: calc(280vh + 100svh);
    }
  }

  /* [B] ── 5. ピックアップ ── */
  & .pickup {
    --pk: 0;
    position: relative;
    padding: 80px var(--gutter);
    background: var(--color-bg-black);
    overflow: clip;
    @media (min-width: 1080px) {
      padding: 120px var(--gutter-pc) 120px;
    }
    &::before {
      display: none;
    }
    & .pickup__inner {
      position: relative;
      z-index: 1;
      opacity: calc(0.2 + var(--pk) * 0.8);
      transform: translateY(calc((1 - var(--pk)) * 24px));
    }
    & .pickup__inner {
      display: grid;
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
      align-items: center;
      @media (min-width: 1080px) {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 0;
      }
    }
    & .pickup__img {
      width: 68%;
      margin: 0 auto;
      @media (min-width: 1080px) {
        width: 66%;
      }
    }
    & .pickup__body {
      display: grid;
      gap: 22px;
      justify-items: center;
      text-align: center;
      @media (min-width: 1080px) {
        gap: 24px;
        justify-self: start;
        margin-left: -40px;
      }
    }
    & .pickup__title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-head);
      font-size: clamp(30px, 3.2vw, 48px);
      & .x-mark,
      & > span:last-child {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.6s ease 0.35s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
      }
    }
    & .pickup__body.is-in .pickup__title {
      & .x-mark,
      & > span:last-child {
        opacity: 1;
        transform: none;
      }
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: 0.02em;
    }
    & .x-mark {
      position: relative;
      display: inline-block;
      width: 0.9em;
      height: 0.9em;
      &::before, &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 1px;
        background: currentColor;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
    & .pickup__model {
      margin-top: -12px;
      font-size: clamp(14px, 1.3vw, 18px);
      letter-spacing: 0.08em;
      opacity: 0.7;
    }
    & .pickup__lead {
      font-size: clamp(14px, 1.3vw, 18px);
      line-height: 1.5;
      letter-spacing: 0.03em;
    }
    & .pickup__name {
      font-family: var(--font-en);
      font-size: clamp(17px, 1.5vw, 21px);
      letter-spacing: -0.02em;
      line-height: 1.5;
    }
  }

  /* [C] ── 6. 日常 → 除菌 ── */
  & .daily {
    position: relative;
    background: var(--color-bg-black);
    & .daily__stage {
      --kw: 0;
      --kt: 0;
      --kb: 0;
      --kd: 0;
      --kc: 0;
      --ks1: 0;
      --ks2: 0;
      --ks3: 0;
      position: sticky;
      top: 0;
      z-index: 0;
      height: var(--stage);
      overflow: clip;
      background: var(--color-bg-black);
      & img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 41% 50%;
        @media (min-width: 1080px) {
          object-position: 50% 50%;
        }
      }
      & .daily__dirty-img {
        clip-path: inset(calc((1 - var(--kw)) * 100%) 0 0 0);
      }
    }
    & .daily__photo {
      position: absolute;
      inset: 38% 0 0;
      overflow: clip;
      filter: blur(calc(var(--kb) * 16px));
      transform: scale(calc(1 + var(--kb) * 0.05));
      @media (min-width: 1080px) {
        inset: 0;
        overflow: visible;
      }
      &::after {
        content: "";
        position: absolute;
        left: -5%;
        right: -5%;
        bottom: -2px;
        height: 42%;
        pointer-events: none;
        background: linear-gradient(to bottom,
          rgba(8, 8, 8, 0) 0%,
          rgba(8, 8, 8, 0.04) 10%,
          rgba(8, 8, 8, 0.12) 20%,
          rgba(8, 8, 8, 0.24) 30%,
          rgba(8, 8, 8, 0.4) 40%,
          rgba(8, 8, 8, 0.56) 50%,
          rgba(8, 8, 8, 0.7) 60%,
          rgba(8, 8, 8, 0.82) 70%,
          rgba(8, 8, 8, 0.92) 80%,
          rgba(8, 8, 8, 0.98) 90%,
          #080808 100%);
      }
    }
    & .daily__dark {
      position: absolute;
      inset: 0;
      background: var(--color-bg-black);
      opacity: calc(var(--kd) * 0.8);
    }
    & .daily__scan {
      position: absolute;
      inset: 0;
      pointer-events: none;
      transform: translateX(calc((var(--kw) - 1) * 100%));
      opacity: calc(var(--kw) * (1 - var(--kw)) * 4);
      @media (min-width: 1080px) {
        transform: translateY(calc((1 - var(--kw)) * 100%));
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -1px;
        width: 2px;
        background: rgba(200, 236, 255, 0.95);
        @media (min-width: 1080px) {
          top: -1px;
          bottom: auto;
          left: 0;
          right: 0;
          width: auto;
          height: 2px;
        }
      }
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 70px;
        background: linear-gradient(to left, rgba(120, 200, 255, 0.42) 0%, rgba(120, 200, 255, 0.3) 8%, rgba(120, 200, 255, 0.21) 17%, rgba(120, 200, 255, 0.14) 27%, rgba(120, 200, 255, 0.09) 38%, rgba(120, 200, 255, 0.055) 50%, rgba(120, 200, 255, 0.03) 63%, rgba(120, 200, 255, 0.014) 77%, rgba(120, 200, 255, 0.004) 90%, rgba(120, 200, 255, 0) 100%);
        @media (min-width: 1080px) {
          bottom: auto;
          left: 0;
          width: auto;
          height: 120px;
          background: linear-gradient(to bottom, rgba(120, 200, 255, 0.42) 0%, rgba(120, 200, 255, 0.3) 8%, rgba(120, 200, 255, 0.21) 17%, rgba(120, 200, 255, 0.14) 27%, rgba(120, 200, 255, 0.09) 38%, rgba(120, 200, 255, 0.055) 50%, rgba(120, 200, 255, 0.03) 63%, rgba(120, 200, 255, 0.014) 77%, rgba(120, 200, 255, 0.004) 90%, rgba(120, 200, 255, 0) 100%);
        }
      }
    }
    & .daily__color-copy {
      position: absolute;
      left: var(--gutter);
      right: var(--gutter);
      top: 19%;
      margin: 0;
      font-size: clamp(22px, 6.4vw, 26px);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.01em;
      text-align: center;
      text-shadow: none;
      opacity: var(--kcol, 1);
      transform: translateY(-50%);
      @media (min-width: 1080px) {
        left: var(--gutter-pc);
        right: var(--gutter-pc);
        top: 50%;
        font-size: var(--fs-chapter);
        letter-spacing: 0.04em;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
      }
    }
    & .daily__scan-copy {
      position: absolute;
      left: var(--gutter);
      right: var(--gutter);
      top: 19%;
      margin: 0;
      font-size: clamp(22px, 6.4vw, 26px);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.01em;
      text-align: center;
      opacity: var(--kt);
      transform: translateY(calc(-50% + (1 - var(--kt)) * 18px));
      @media (min-width: 1080px) {
        left: var(--gutter-pc);
        right: var(--gutter-pc);
        top: 50%;
        font-size: var(--fs-chapter);
        letter-spacing: 0.04em;
      }
    }
    & .daily__space {
      height: 260svh;
      @media (min-width: 1080px) {
        height: 300svh;
      }
    }
    & .daily__copy-gap {
      display: block;
      height: 0.8em;
    }
    & .daily__clean {
      position: absolute;
      inset: 0;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 40px;
      padding: 0 var(--gutter);
      pointer-events: none;
      @media (min-width: 1080px) {
        gap: 70px;
        padding: 0 var(--gutter-pc);
      }
    }
    & .daily__clean-copy {
      margin: 0;
      font-size: clamp(24px, 6.6vw, 27px);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.01em;
      @media (min-width: 1080px) {
        font-size: var(--fs-chapter);
        letter-spacing: 0.04em;
      }
      & .hang {
        display: inline-block;
        width: 0;
        overflow: visible;
        white-space: nowrap;
      }
      & .daily__clean-kicker {
        display: block;
        width: fit-content;
        margin: 0 auto 16px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.8);
        font-size: 15px;
        line-height: 1.3;
        letter-spacing: 0.04em;
        @media (min-width: 1080px) {
          margin-bottom: 24px;
          padding-bottom: 8px;
          font-size: 20px;
        }
      }
      text-align: center;
      opacity: var(--kc);
      transform: translateY(calc((1 - var(--kc)) * 18px));
    }
    & .stats {
      display: grid;
      grid-template-columns: repeat(2, auto);
      justify-content: center;
      gap: 0 8px;
      margin: 0 calc(var(--gutter) * -0.5);
      @media (min-width: 1080px) {
        grid-template-columns: repeat(3, auto);
        gap: 40px;
        margin: 0;
      }
    }
    & .stats__item {
      --ks: 0;
      position: relative;
      display: grid;
      --sw: min(calc((100vw - 24px) / 2), 27svh);
      gap: calc(var(--sw) * 0.06);
      place-content: center;
      justify-items: center;
      width: var(--sw);
      aspect-ratio: 1;
      opacity: min(1, calc(var(--ks) * 1.6));
      transform: translateY(calc((1 - var(--ks)) * 12px));
      @media (min-width: 1080px) {
        gap: 18px;
        width: max(230px, min(290px, 31svh));
      }
      &:nth-child(1) {
        --ks: var(--ks1);
        grid-column: 1 / -1;
        justify-self: center;
        @media (min-width: 1080px) {
          grid-column: auto;
        }
      }
      &:nth-child(2) {
        --ks: var(--ks2);
      }
      &:nth-child(3) {
        --ks: var(--ks3);
      }
      &:nth-child(2), &:nth-child(3) {
        margin-top: calc(var(--sw) * -0.13);
        @media (min-width: 1080px) {
          margin-top: 0;
        }
      }
    }
    & .stats__ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
      & circle {
        fill: none;
        stroke: var(--color-primary);
        stroke-width: 0.6;
        @media (min-width: 1080px) {
          stroke-width: 1.2;
        }
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: calc(1 - var(--ks));
        opacity: 0.85;
      }
    }
    & .stats__label {
      font-family: var(--font-head);
      font-size: calc(var(--sw) * 0.085);
      letter-spacing: 0.04em;
      @media (min-width: 1080px) {
        font-size: 19px;
      }
    }
    & .stats__value {
      display: flex;
      align-items: center;
      color: var(--color-primary);
      @media (min-width: 1080px) {
        align-items: stretch;
      }
    }
    & .stats__num {
      font-family: var(--font-en);
      font-weight: 300;
      font-size: calc(var(--sw) * 0.30);
      line-height: 0.8;
      letter-spacing: -0.02em;
      @media (min-width: 1080px) {
        font-size: clamp(72px, 6vw, 92px);
      }
    }
    & .stats__unit {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
      padding-left: 6px;
      @media (min-width: 1080px) {
        gap: 6px;
        padding-left: 8px;
      }
    }
    & .stats__pct {
      position: relative;
      font-family: var(--font-en);
      font-size: calc(var(--sw) * 0.14);
      line-height: 0.85;
      letter-spacing: 0.04em;
      white-space: nowrap;
      @media (min-width: 1080px) {
        font-size: clamp(36px, 3vw, 46px);
      }
      & sup {
        position: absolute;
        left: 100%;
        top: -0.1em;
        margin-left: 3px;
        font-family: var(--font-head);
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0;
        vertical-align: baseline;
        @media (min-width: 1080px) {
          margin-left: 4px;
          font-size: 12px;
        }
      }
    }
    & .stats__more {
      font-family: var(--font-head);
      font-size: calc(var(--sw) * 0.10);
      font-weight: 500;
      line-height: 0.85;
      letter-spacing: 0.04em;
      @media (min-width: 1080px) {
        font-size: clamp(16px, 1.5vw, 22px);
        letter-spacing: 0.06em;
      }
    }
  }

  /* [C] ── 7. 特徴グリッド ── */
  & .features {
    container-type: inline-size;
    padding: 100px 0 56px;
    background: var(--color-bg-black);
    @media (min-width: 1080px) {
      padding: 100px var(--gutter-pc) 10px;
    }
    & .features__title {
      display: grid;
      gap: 6px;
      margin-bottom: 48px;
      padding: 0 var(--gutter);
      font-size: var(--fs-section);
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.02em;
      text-align: center;
      @media (min-width: 1080px) {
        margin-bottom: 80px;
      }
      & small {
        font-size: clamp(14px, 1.5vw, 21px);
        letter-spacing: -0.02em;
      }
    }
    & .bento {
      --bgap: 8px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 188px 124px 124px 112px;
      gap: var(--bgap);
      padding: 0 var(--gutter);
      @media (min-width: 1080px) {
        --bgap: 10px;
        --bh: calc(100svh - 2 * var(--gutter-pc) - 2 * var(--bgap));
        grid-template-columns: 477fr 195fr 336fr 336fr;
        grid-template-rows: calc(var(--bh) * 0.3546) calc(var(--bh) * 0.2766) calc(var(--bh) * 0.3688);
        padding: 0;
      }
    }
    & .bento__card {
      position: relative;
      display: grid;
      align-content: end;
      min-height: 0;
      padding: 12px;
      border-radius: var(--radius);
      background: #1d1d1d;
      overflow: clip;
      @media (min-width: 1080px) {
        min-height: 0;
        padding: 20px;
      }
      & > img {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(to top,
          rgba(0, 0, 0, 0.62) 0%,
          rgba(0, 0, 0, 0.54) 10%,
          rgba(0, 0, 0, 0.42) 22%,
          rgba(0, 0, 0, 0.3) 34%,
          rgba(0, 0, 0, 0.2) 46%,
          rgba(0, 0, 0, 0.12) 58%,
          rgba(0, 0, 0, 0.06) 70%,
          rgba(0, 0, 0, 0.02) 82%,
          rgba(0, 0, 0, 0) 100%);
      }
      & .bento__t, & .bento__body {
        position: relative;
        z-index: 1;
      }
    }
    & .bento__t {
      font-size: 15px;
      line-height: 1.5;
      letter-spacing: -0.05em;
      @media (min-width: 1080px) {
        font-size: clamp(16px, 1.5vw, 22px);
        line-height: 1.6;
      }
    }
    & .bento__card--sterilize {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      padding: 20px 18px;
      & > img {
        object-position: 88% 50%;
        @media (min-width: 1080px) {
          object-position: 92% 50%;
          transform: translateX(-7%) scale(1.18);
          transform-origin: 0% 58%;
        }
      }
      @media (min-width: 1080px) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        padding: 40px;
      }
      & .bento__body {
        display: grid;
        gap: 10px;
        @media (min-width: 1080px) {
          gap: 20px;
        }
      }
      & .bento__t {
        font-size: 15px;
        @media (min-width: 1080px) {
          font-size: clamp(16px, 1.9vw, 26px);
        }
      }
      & .bento__big {
        display: flex;
        align-items: baseline;
        gap: 4px;
        font-family: var(--font-en);
        line-height: 0.85;
      }
      & .bento__num {
        font-size: 56px;
        letter-spacing: -0.05em;
        @media (min-width: 1080px) {
          font-size: clamp(64px, 9vw, 128px);
        }
      }
      & .bento__pct {
        font-size: 28px;
        letter-spacing: -0.05em;
        @media (min-width: 1080px) {
          font-size: clamp(32px, 4.6vw, 64px);
        }
      }
      & .bento__lbl {
        font-size: 13px;
        line-height: 1.4;
        opacity: 0.85;
        @media (min-width: 1080px) {
          font-size: clamp(14px, 1.2vw, 18px);
        }
      }
      & .bento__after {
        padding-left: 6px;
        font-family: var(--font-head);
        font-weight: 300;
        font-size: 15px;
        letter-spacing: -0.05em;
        @media (min-width: 1080px) {
          font-size: clamp(16px, 1.9vw, 26px);
        }
      }
    }
    & .bento__card--brush {
      grid-column: 1 / 5;
      grid-row: 2 / 3;
      padding: 16px;
      background: #000;
      @media (min-width: 1080px) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding: 30px 25px;
      }
      & > img {
        object-position: 50% 50%;
      }
    }
    & .bento__card--app {
      grid-column: 1 / 4;
      grid-row: 4 / 5;
      align-content: start;
      padding: 16px;
      background: #1d1d1d;
      @media (min-width: 1080px) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
      }
      & .bento__phone {
        position: absolute;
        inset: 12% 6% 0 56%;
        z-index: 0;
        @media (min-width: 1080px) {
          inset: 38.85% 8.29% 0 22.77%;
        }
        & img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center bottom;
        }
      }
      &::after {
        display: none;
      }
    }
    & .bento__card--obstacle {
      grid-column: 5 / 7;
      grid-row: 2 / 4;
      align-content: start;
      padding: 16px 12px;
      @media (min-width: 1080px) {
        align-content: end;
        padding: 20px;
      }
      @media (min-width: 1080px) {
        grid-column: 4 / 5;
        grid-row: 2 / 4;
      }
    }
    & .bento__card--dustbag {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
      @media (min-width: 1080px) {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
      }
    }
    & .bento__card--edge {
      grid-column: 3 / 5;
      grid-row: 3 / 4;
      align-content: end;
      background: #252a2c;
      @media (min-width: 1080px) {
        grid-column: 3 / 4;
        grid-row: 2 / 4;
        padding: 28px 30px;
      }
      & > img {
        object-position: 58% 48%;
      }
    }
    & .bento__card--station {
      grid-column: 4 / 7;
      grid-row: 4 / 5;
      align-content: start;
      padding: 16px 12px;
      background:
        radial-gradient(ellipse 80% 55% at 62% 72%, rgba(196, 170, 128, 0.16) 0%, rgba(196, 170, 128, 0.11) 20%, rgba(196, 170, 128, 0.07) 38%, rgba(196, 170, 128, 0.04) 55%, rgba(196, 170, 128, 0.015) 72%, rgba(196, 170, 128, 0) 100%),
        linear-gradient(165deg, #2b2a29 0%, #232221 22%, #1b1a1a 45%, #151414 68%, #101010 100%);
      @media (min-width: 1080px) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        padding: 28px 30px;
      }
      & > img {
        inset: auto 4% 5% auto;
        width: 56%;
        height: 60%;
        object-fit: contain;
        object-position: 100% 100%;
        @media (min-width: 1080px) {
          inset: auto 5% 6% auto;
          width: 50%;
          height: 82%;
          object-position: 100% 100%;
        }
      }
      &::after {
        display: none;
        background: linear-gradient(to bottom,
          rgba(33, 42, 55, 0.7) 0%,
          rgba(33, 42, 55, 0.6) 10%,
          rgba(33, 42, 55, 0.46) 20%,
          rgba(33, 42, 55, 0.32) 30%,
          rgba(33, 42, 55, 0.2) 40%,
          rgba(33, 42, 55, 0.1) 50%,
          rgba(33, 42, 55, 0.04) 60%,
          rgba(33, 42, 55, 0) 70%);
      }
    }
  }

  /* [C] ── 8. ローラーモップ ── */
  & .mop {
    padding: 80px var(--gutter) 100px;
    background: var(--color-bg-black);
    @media (min-width: 1080px) {
      padding: 120px var(--gutter-pc) 140px;
    }
    & .mop__hero {
      position: relative;
      display: grid;
      gap: 40px;
      min-height: 70svh;
      padding: 40px 0;
      overflow: clip;
      border-radius: var(--radius);
      @media (min-width: 1080px) {
        grid-template-columns: 1fr auto;
        align-items: end;
        min-height: 690px;
        padding: 50px 30px;
      }
    }
    & .mop__hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 60% 50%;
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
          rgba(8, 8, 8, 0.9) 0%,
          rgba(8, 8, 8, 0.78) 12%,
          rgba(8, 8, 8, 0.58) 24%,
          rgba(8, 8, 8, 0.4) 36%,
          rgba(8, 8, 8, 0.26) 48%,
          rgba(8, 8, 8, 0.15) 60%,
          rgba(8, 8, 8, 0.07) 72%,
          rgba(8, 8, 8, 0.02) 86%,
          rgba(8, 8, 8, 0) 100%);
        @media (min-width: 1080px) {
          background: linear-gradient(to right,
            rgba(8, 8, 8, 0.7) 0%,
            rgba(8, 8, 8, 0.56) 10%,
            rgba(8, 8, 8, 0.4) 20%,
            rgba(8, 8, 8, 0.26) 30%,
            rgba(8, 8, 8, 0.14) 40%,
            rgba(8, 8, 8, 0.06) 50%,
            rgba(8, 8, 8, 0.02) 60%,
            rgba(8, 8, 8, 0) 70%);
        }
      }
    }
    & .mop__title {
      font-size: var(--fs-block);
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.05em;
    }
    & .mop__stat {
      position: relative;
      z-index: 1;
      @media (min-width: 1080px) {
        grid-column: 2;
      }
      display: grid;
      gap: 24px;
      padding: 0 var(--gutter);
      @media (min-width: 1080px) {
        gap: 40px;
        padding: 0;
        max-width: 380px;
      }
    }
    & .mop__stat-label {
      font-size: clamp(15px, 1.4vw, 20px);
      letter-spacing: -0.05em;
    }
    & .mop__stat-value {
      display: flex;
      align-items: baseline;
      gap: 4px;
      font-family: var(--font-en);
      line-height: 0.85;
    }
    & .mop__stat-num {
      font-size: clamp(96px, 12vw, 190px);
      letter-spacing: -0.05em;
    }
    & .mop__stat-pct {
      font-size: clamp(50px, 6.8vw, 104px);
      letter-spacing: -0.05em;
    }
    & .mop__stat-more {
      padding-left: 4px;
      font-family: var(--font-head);
      font-weight: 300;
      font-size: clamp(24px, 3.2vw, 48px);
      letter-spacing: -0.05em;
    }
    & .mop__stat-sys {
      margin-top: -2px;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0.02em;
      @media (min-width: 1080px) {
        margin-top: -10px;
        font-size: 20px;
      }
    }
    & .mop__stat-text {
      font-size: var(--fs-body);
      line-height: 1.8;
    }
    & .mop__badge {
      width: 100px;
      @media (min-width: 1080px) {
        width: 126px;
      }
    }
    & .mop__grid {
      display: grid;
      gap: 20px;
      margin-top: 40px;
      @media (min-width: 1080px) {
        grid-template-columns: 580px 1fr;
        grid-template-rows: auto auto;
        margin-top: 60px;
      }
    }
    & .mop__card {
      position: relative;
      display: grid;
      gap: 24px;
      padding: 30px 24px;
      border-radius: var(--radius);
      background: #0a090a;
      overflow: clip;
      @media (min-width: 1080px) {
        padding: 40px 30px;
      }
    }
    & .mop__card--system {
      border: 1px solid rgba(255, 255, 255, 0.8);
      @media (min-width: 1080px) {
        grid-column: 1;
        grid-row: 1;
        min-height: 620px;
      }
      & .mop__card-fig {
        position: relative;
        aspect-ratio: 4096 / 2449;
        @media (min-width: 1080px) {
          position: absolute;
          left: 152px;
          top: -99px;
          width: 755px;
        }
      }
    }
    & .mop__card--pressure {
      background: #010101;
      @media (min-width: 1080px) {
        grid-column: 1;
        grid-row: 2;
        min-height: 300px;
        align-content: end;
      }
      & .mop__card-fig {
        aspect-ratio: 4096 / 3058;
        @media (min-width: 1080px) {
          position: absolute;
          right: 0;
          top: -20px;
          width: 348px;
        }
      }
    }
    & .mop__card-fig img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    & .mop__card-body {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 20px;
      @media (min-width: 1080px) {
        gap: 35px;
        max-width: 300px;
      }
    }
    & .mop__card-title {
      font-size: var(--fs-card);
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.05em;
    }
    & .mop__card-text {
      font-size: var(--fs-small);
      line-height: 1.8;
      letter-spacing: 0.02em;
    }
    & .mop__pin {
      position: absolute;
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #fff;
      font-family: var(--font-en);
      font-size: 13px;
      color: #000;
    }
    & .mop__pin--1 { left: 37.9%; top: 67.2%; }
    & .mop__pin--2 { left: 43.2%; top: 82.2%; }
    & .mop__pin--3 { left: 28.6%; top: 73.3%; }
    & .mop__pin--4 { left: 22.6%; top: 52.2%; }
    & .mop__steps {
      display: grid;
      gap: 10px;
      counter-reset: step;
      & li {
        display: flex;
        align-items: center;
        gap: 13px;
        font-size: var(--fs-small);
        font-weight: 300;
        line-height: 1.8;
        &::before {
          counter-increment: step;
          content: counter(step);
          display: grid;
          place-items: center;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          background: #fff;
          font-family: var(--font-head);
          font-size: 13px;
          font-weight: 500;
          color: #000;
        }
      }
    }
    & .mop__card--compare {
      padding: 0;
    }
    & .mop__card--compare .mop__card-body {
      padding: 24px 24px 30px;
      @media (min-width: 1080px) {
        padding: 28px 28px 32px;
      }
    }
    & .note {
      margin-top: 28px;
    }
  }

  /* [A] ── before/after スライダー ── */
  & .ba {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: clip;
    touch-action: pan-y;
    user-select: none;
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 62%,
      rgba(0, 0, 0, 0.97) 68%,
      rgba(0, 0, 0, 0.9) 74%,
      rgba(0, 0, 0, 0.78) 80%,
      rgba(0, 0, 0, 0.6) 86%,
      rgba(0, 0, 0, 0.4) 91%,
      rgba(0, 0, 0, 0.22) 95%,
      rgba(0, 0, 0, 0.08) 98%,
      rgba(0, 0, 0, 0) 100%);
  }
  & .ba__fig {
    position: absolute;
    inset: 0;
    margin: 0;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    & figcaption {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: 0.02em;
      background: rgba(0, 0, 0, 0.5);
      @media (min-width: 1080px) {
        top: 16px;
        left: 16px;
        font-size: 13px;
      }
    }
  }
  & .ba__fig--after {
    clip-path: inset(0 0 0 var(--ba, 50%));
    & figcaption {
      left: auto;
      right: 12px;
      color: #111;
      background: #fff;
      @media (min-width: 1080px) {
        right: 16px;
      }
    }
  }
  & .ba__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba, 50%);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    pointer-events: none;
    & i {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.35);
      transform: translate(-50%, -50%);
      &::before, &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 8px;
        height: 8px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
      }
      &::before {
        left: 9px;
        transform: translateY(-50%) rotate(45deg);
      }
      &::after {
        right: 9px;
        transform: translateY(-50%) rotate(-135deg);
      }
    }
  }
  & .ba__range {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 40px;
      height: 100%;
    }
  }
  /* [C] ── 8b. 機能章 01〜06（全幅背景 + 固定サイド見出し） ── */
  & .chapters {
    position: relative;
    color: var(--color-text);
    background: var(--color-bg-dark);
  }
  & .chapters__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  & .chapters__bg-stick {
    position: sticky;
    top: 0;
    height: var(--stage);
    overflow: clip;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background-image: var(--grain);
      background-size: var(--grain-size);
      opacity: 0.85;
    }
  }
  & .chapters__bg-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 60% 50%;
      transform: scale(var(--zoom, 1));
      transform-origin: 60% 50%;
      @media (min-width: 1080px) {
        object-position: 70% 50%;
        transform-origin: 70% 50%;
      }
    }
    &[data-bg="beige"] {
      background: var(--color-bg-beige);
    }
    &[data-bg="1"] {
      --zoom: 1.05;
      @media (min-width: 1080px) {
        --zoom: 1.35;
      }
      & img {
        object-position: 50% 50%;
        transform-origin: 46% 56%;
      }
    }
    &[data-bg="2"] {
      & img {
        object-position: 52% 50%;
        transform-origin: 52% 50%;
        @media (min-width: 1080px) {
          object-position: 50% 52%;
          transform-origin: 50% 52%;
        }
      }
    }
    &[data-bg^="4"] {
      --zoom: 0.88;
      @media (min-width: 1080px) {
        --zoom: 1;
      }
      background-color: #000;
      background-image:
        radial-gradient(ellipse closest-side, rgba(90, 225, 245, 0.3) 0.0%, rgba(90, 225, 245, 0.2193) 8.3%, rgba(90, 225, 245, 0.1556) 16.7%, rgba(90, 225, 245, 0.1065) 25.0%, rgba(90, 225, 245, 0.0697) 33.3%, rgba(90, 225, 245, 0.0431) 41.7%, rgba(90, 225, 245, 0.0247) 50.0%, rgba(90, 225, 245, 0.0128) 58.3%, rgba(90, 225, 245, 0.0057) 66.7%, rgba(90, 225, 245, 0.002) 75.0%, rgba(90, 225, 245, 0.0005) 83.3%, rgba(90, 225, 245, 0.0) 91.7%, rgba(90, 225, 245, 0.0) 100.0%),
        radial-gradient(ellipse closest-side, rgba(0, 150, 180, 0.25) 0.0%, rgba(0, 150, 180, 0.1828) 8.3%, rgba(0, 150, 180, 0.1297) 16.7%, rgba(0, 150, 180, 0.0887) 25.0%, rgba(0, 150, 180, 0.0581) 33.3%, rgba(0, 150, 180, 0.0359) 41.7%, rgba(0, 150, 180, 0.0206) 50.0%, rgba(0, 150, 180, 0.0107) 58.3%, rgba(0, 150, 180, 0.0048) 66.7%, rgba(0, 150, 180, 0.0017) 75.0%, rgba(0, 150, 180, 0.0004) 83.3%, rgba(0, 150, 180, 0.0) 91.7%, rgba(0, 150, 180, 0.0) 100.0%),
        radial-gradient(ellipse closest-side, rgba(0, 110, 135, 0.3) 0.0%, rgba(0, 110, 135, 0.2193) 8.3%, rgba(0, 110, 135, 0.1556) 16.7%, rgba(0, 110, 135, 0.1065) 25.0%, rgba(0, 110, 135, 0.0697) 33.3%, rgba(0, 110, 135, 0.0431) 41.7%, rgba(0, 110, 135, 0.0247) 50.0%, rgba(0, 110, 135, 0.0128) 58.3%, rgba(0, 110, 135, 0.0057) 66.7%, rgba(0, 110, 135, 0.002) 75.0%, rgba(0, 110, 135, 0.0005) 83.3%, rgba(0, 110, 135, 0.0) 91.7%, rgba(0, 110, 135, 0.0) 100.0%),
        radial-gradient(ellipse closest-side, rgba(0, 170, 200, 0.75) 0.0%, rgba(0, 170, 200, 0.5777) 8.3%, rgba(0, 170, 200, 0.434) 16.7%, rgba(0, 170, 200, 0.3164) 25.0%, rgba(0, 170, 200, 0.2222) 33.3%, rgba(0, 170, 200, 0.1489) 41.7%, rgba(0, 170, 200, 0.0938) 50.0%, rgba(0, 170, 200, 0.0543) 58.3%, rgba(0, 170, 200, 0.0278) 66.7%, rgba(0, 170, 200, 0.0117) 75.0%, rgba(0, 170, 200, 0.0035) 83.3%, rgba(0, 170, 200, 0.0004) 91.7%, rgba(0, 170, 200, 0.0) 100.0%),
        radial-gradient(ellipse closest-side, rgba(0, 180, 205, 0.08) 0.0%, rgba(0, 180, 205, 0.0585) 8.3%, rgba(0, 180, 205, 0.0415) 16.7%, rgba(0, 180, 205, 0.0284) 25.0%, rgba(0, 180, 205, 0.0186) 33.3%, rgba(0, 180, 205, 0.0115) 41.7%, rgba(0, 180, 205, 0.0066) 50.0%, rgba(0, 180, 205, 0.0034) 58.3%, rgba(0, 180, 205, 0.0015) 66.7%, rgba(0, 180, 205, 0.0005) 75.0%, rgba(0, 180, 205, 0.0001) 83.3%, rgba(0, 180, 205, 0.0) 91.7%, rgba(0, 180, 205, 0.0) 100.0%);
      background-size: 130vw 80vw, 170vw 120vw, 180vw 110vw, 150vw 110vw, 90vw 60vw;
      background-position: 130% -30%, 125% 0%, 45% 108%, -45% 105%, 70% 45%;
      background-repeat: no-repeat;
      @media (min-width: 1080px) {
        background-image: none;
        background-color: #080808;
      }
      & img {
        padding: 12svh 0 22svh;
        object-fit: contain;
        object-position: 50% 50%;
        @media (min-width: 1080px) {
          padding: 16svh 30vw 16svh 24vw;
          object-position: 50% 50%;
        }
      }
    }
    & .chapters__pins {
      transform: scale(var(--zoom, 1));
      transform-origin: 60% 50%;
      @media (min-width: 1080px) {
        transform-origin: 70% 50%;
      }
    }
    & .chapters__trail {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      mix-blend-mode: screen;
      transform: scale(var(--zoom, 1));
      transform-origin: 46% 56%;
    }
    & .chapters__trail-wipe {
      translate: calc((1 - var(--trail, 0)) * 3900px) 0;
      @media (prefers-reduced-motion: reduce) {
        translate: 0 0;
      }
    }
    &.is-prev {
      opacity: 1;
      visibility: visible;
      z-index: 0;
      & img {
        will-change: transform;
      }
    }
    &.is-on {
      opacity: 1;
      visibility: visible;
      z-index: 1;
      transition: opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1);
      & img {
        will-change: transform;
      }
    }
  }
  & .chapters:not(.is-fade) .chapters__bg-item {
    --rise: 1;
    & img, & .chapters__trail, & .chapters__pins {
      transform: translate3d(0, calc(var(--rise) * 4%), 0) scale(var(--zoom, 1));
    }
    &.is-prev {
      --rise: 0;
    }
    &.is-on {
      --rise: 0;
      transition: --rise 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
      animation: e35-ch-wipe-up 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both;
      mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 47%,
        rgba(0, 0, 0, 0.04) 47.6%,
        rgba(0, 0, 0, 0.14) 48.2%,
        rgba(0, 0, 0, 0.3) 48.8%,
        rgba(0, 0, 0, 0.5) 49.4%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 0.86) 50.6%,
        rgba(0, 0, 0, 0.96) 51.2%,
        rgba(0, 0, 0, 1) 52%,
        rgba(0, 0, 0, 1) 100%);
      mask-size: 100% 300%;
      mask-repeat: no-repeat;
      @media (prefers-reduced-motion: reduce) {
        animation: none;
        mask-image: none;
        transition: none;
      }
    }
  }
  & .chapters.is-down:not(.is-fade) .chapters__bg-item.is-on {
    animation-name: e35-ch-wipe-down;
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 48%,
      rgba(0, 0, 0, 0.96) 48.8%,
      rgba(0, 0, 0, 0.86) 49.4%,
      rgba(0, 0, 0, 0.7) 50%,
      rgba(0, 0, 0, 0.5) 50.6%,
      rgba(0, 0, 0, 0.3) 51.2%,
      rgba(0, 0, 0, 0.14) 51.8%,
      rgba(0, 0, 0, 0.04) 52.4%,
      rgba(0, 0, 0, 0) 53%,
      rgba(0, 0, 0, 0) 100%);
    @media (prefers-reduced-motion: reduce) {
      animation: none;
      mask-image: none;
    }
  }
  & .chapters:not(.is-active) .chapters__title-in {
    transform: translateY(108%);
  }
  & .chapters__scrim {
    position: absolute;
    inset: 0;
    opacity: var(--scrimk, 1);
    background: var(--grain) 0 0 / var(--grain-size) repeat, linear-gradient(to bottom,
      rgba(8, 8, 8, 0.88) 0%,
      rgba(8, 8, 8, 0.8) 12%,
      rgba(8, 8, 8, 0.66) 24%,
      rgba(8, 8, 8, 0.52) 36%,
      rgba(8, 8, 8, 0.42) 48%,
      rgba(8, 8, 8, 0.38) 60%,
      rgba(8, 8, 8, 0.42) 72%,
      rgba(8, 8, 8, 0.54) 84%,
      rgba(8, 8, 8, 0.68) 94%,
      rgba(8, 8, 8, 0.78) 100%);
    @media (min-width: 1080px) {
      background: var(--grain) 0 0 / var(--grain-size) repeat, linear-gradient(to right,
        rgba(8, 8, 8, 0.86) 0%,
        rgba(8, 8, 8, 0.8) 12%,
        rgba(8, 8, 8, 0.66) 22%,
        rgba(8, 8, 8, 0.48) 31%,
        rgba(8, 8, 8, 0.32) 40%,
        rgba(8, 8, 8, 0.2) 50%,
        rgba(8, 8, 8, 0.12) 62%,
        rgba(8, 8, 8, 0.07) 75%,
        rgba(8, 8, 8, 0.05) 88%,
        rgba(8, 8, 8, 0.06) 100%);
    }
  }
  & .chapters[data-ch="4"] .chapters__scrim {
    opacity: calc(var(--scrimk, 1) * 0.3);
  }
  & .chapters.is-beige .chapters__scrim,
  & .chapters.is-beige .chapters__dim {
    opacity: 0;
    transition: opacity 0.6s;
  }
  & .chapters__scrim, & .chapters__dim {
    transition: opacity 0.6s;
  }
  & .chapters .chapters__side, & .chapters .ch--brush, & .chapters .ch__foot {
    transition: color 0.6s;
  }
  & .chapters.is-beige .chapters__side,
  & .chapters.is-beige .ch--brush,
  & .chapters.is-beige .ch__foot {
    color: var(--color-text-dark);
  }
  & .chapters.is-beige .chapters__side {
    background: var(--color-bg-beige);
    &::after {
      opacity: 0;
    }
    @media (min-width: 1080px) {
      background: none;
    }
  }
  & .chapters__dim {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 1);
    opacity: calc(var(--dimk, 0) * 0.55);
  }
  & .chapters__layout {
    position: relative;
    z-index: 1;
    @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: minmax(360px, 40%) 1fr;
      align-items: start;
    }
  }
  & .chapters__rail {
    display: none;
  }
  & .chapters__pins--co {
    display: block;
    counter-reset: co;
  }
  & .chapters__co {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--lyp, 0) * 1px);
    height: 0;
    color: #fff;
    @media (min-width: 1080px) {
      & i, & u, & b {
        display: none;
      }
    }
    & i, & u {
      position: absolute;
      left: calc((var(--lxp, 0) + var(--hxp, 0)) * 1px);
      top: calc(var(--hyp, 0) * 1px);
      width: calc(var(--len, 0) * 1px);
      height: 1px;
      background: rgba(255, 255, 255, 0.6);
      transform-origin: 0 50%;
      rotate: calc(var(--ang, 0) * 1deg);
      transform: scaleX(0);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms + 300ms);
    }
    & u {
      left: calc(var(--lxp, 0) * 1px);
      top: 0;
      width: calc(var(--alen, 0) * 1px);
      rotate: calc(var(--aang, 0) * 1deg);
      transition-delay: calc(var(--i, 0) * 120ms + 150ms);
    }
    & b {
      position: absolute;
      right: calc(100% - var(--lxp, 0) * 1px + 8px);
      top: 0;
      font-size: 15px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.04em;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(-50%);
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
      transition: opacity 0.4s calc(var(--i, 0) * 120ms);
      & small {
        display: block;
        margin-top: 6px;
        font-size: 13px;
        letter-spacing: 0.02em;
        & em {
          font-family: var(--font-en);
          font-style: normal;
          font-size: 34px;
          line-height: 1;
          margin: 0 2px 0 4px;
          color: var(--color-primary);
        }
      }
    }
    &[data-side="r"] b {
      right: auto;
      left: calc(var(--lxp, 0) * 1px + 8px);
    }
  }
  & .chapters__bg-item[data-bg="4"] .chapters__co b {
    @media (min-width: 1080px) {
      display: block;
      right: calc(100% - var(--axp, 0) * 1px + 24px);
      left: auto;
      top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px);
      font-size: 15px;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
      transition-delay: calc(var(--i, 0) * 120ms + 300ms);
    }
  }
  & .chapters__bg-item[data-bg="4"] .chapters__co[data-side="r"] b {
    @media (min-width: 1080px) {
      right: auto;
      left: calc(var(--axp, 0) * 1px + 24px);
    }
  }
  & .chapters__bg-item[data-bg="4"] .chapters__co::before {
    @media (min-width: 1080px) {
      counter-increment: co;
      content: counter(co);
      position: absolute;
      left: calc(var(--axp, 0) * 1px);
      top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px);
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin: -14px 0 0 -14px;
      border-radius: 50%;
      background: #fff;
      color: #000;
      font-family: var(--font-en);
      font-size: 13px;
      line-height: 1;
      box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22);
      opacity: 0;
      transition: opacity 0.4s calc(var(--i, 0) * 120ms + 200ms);
    }
  }
  & .chapters__bg-item.is-on .chapters__co {
    & i, & u {
      transform: none;
    }
    & b, &::before {
      opacity: 1;
    }
  }
  & .ch__in[data-pin="4"] .chips {
    @media (min-width: 1080px) {
      display: none;
    }
  }
  & .chapters__side {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 32px var(--gutter) 72px;
    margin-bottom: -72px;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(8, 8, 8, 0.92) 0%,
      rgba(8, 8, 8, 0.9) 30%,
      rgba(8, 8, 8, 0.84) 44%,
      rgba(8, 8, 8, 0.72) 56%,
      rgba(8, 8, 8, 0.56) 66%,
      rgba(8, 8, 8, 0.4) 75%,
      rgba(8, 8, 8, 0.25) 83%,
      rgba(8, 8, 8, 0.13) 90%,
      rgba(8, 8, 8, 0.05) 96%,
      rgba(8, 8, 8, 0) 100%);
    @media (min-width: 1080px) {
      height: 100svh;
      padding: 28px var(--gutter-pc);
      margin-bottom: 0;
      background: none;
    }
  }
  & .chapters__side-in {
    display: grid;
    gap: 14px;
    @media (min-width: 1080px) {
      position: absolute;
      top: 64px;
      left: var(--gutter-pc);
      right: 40px;
      display: grid;
      gap: 14px;
    }
  }
  & .ch__no {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.02em;
    @media (min-width: 1080px) {
      font-size: clamp(56px, 4.8vw, 84px);
    }
  }
  & .chapters__no-total {
    margin-left: 0.1em;
    opacity: 0.45;
  }
  & .chapters__title {
    margin: 0;
    font-size: clamp(24px, 6.4vw, 30px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.04em;
    @media (min-width: 1080px) {
      font-size: clamp(40px, 3.6vw, 60px);
      line-height: 1.3;
    }
    & .nb {
      white-space: nowrap;
    }
    & .chapters__title-line {
      display: block;
      margin-top: -0.4em;
      padding-top: 0.4em;
      overflow: hidden;
    }
    & .chapters__title-in {
      display: block;
      transform: none;
      transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: calc(var(--i, 0) * 110ms);
    }
    &.is-out .chapters__title-in {
      transform: translateY(-108%);
      transition: transform 0.32s cubic-bezier(0.55, 0, 0.8, 0.3);
      transition-delay: calc(var(--i, 0) * 50ms);
    }
    &.is-pre .chapters__title-in {
      transform: translateY(108%);
      transition: none;
    }
    & br {
      display: none;
    }
    & sup {
      position: relative;
      top: -1.1em;
      margin-left: 0.06em;
      font-size: 0.45em;
      line-height: 0;
      letter-spacing: 0;
      vertical-align: baseline;
    }
  }
  & .chapters__body {
    position: relative;
    min-width: 0;
  }
  & .chapters .mop {
    background: none;
    & .mop__hero-bg {
      display: none;
    }
    & .mop__hero {
      @media (min-width: 1080px) {
        grid-template-columns: 1fr 380px;
        min-height: 560px;
        padding: 50px 0;
      }
    }
    & .mop__stat {
      @media (min-width: 1080px) {
        max-width: none;
      }
    }
    & .mop__grid {
      @media (min-width: 1080px) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        width: 100%;
        max-width: 380px;
        margin-left: auto;
      }
    }
    & .mop__card--system, & .mop__card--pressure {
      @media (min-width: 1080px) {
        grid-column: auto;
        grid-row: auto;
        min-height: 0;
        padding-top: 0;
      }
    }
    & .mop__card {
      @media (min-width: 1080px) {
        padding: 30px 28px;
      }
    }
    & .mop__card--compare {
      @media (min-width: 1080px) {
        padding: 0;
      }
    }
    & .mop__card .mop__card-fig {
      position: relative;
      inset: auto;
      width: calc(100% + 48px);
      margin: -30px -24px -56px;
      mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.97) 58%,
        rgba(0, 0, 0, 0.9) 66%,
        rgba(0, 0, 0, 0.78) 73%,
        rgba(0, 0, 0, 0.6) 80%,
        rgba(0, 0, 0, 0.4) 86%,
        rgba(0, 0, 0, 0.22) 91%,
        rgba(0, 0, 0, 0.08) 96%,
        rgba(0, 0, 0, 0) 100%);
      @media (min-width: 1080px) {
        width: calc(100% + 56px);
        margin: -30px -28px -64px;
      }
    }
    & .mop__card .mop__card-fig img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    & .mop__card-body {
      @media (min-width: 1080px) {
        gap: 20px;
        max-width: none;
      }
    }
  }
  & .ch__in {
    position: relative;
    z-index: 1;
    padding: 40px var(--gutter) 80px;
    @media (min-width: 1080px) {
      padding: 120px var(--gutter-pc) 200px;
    }
  }
  & .chapters__fix {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  & .chapters:has(.chapters__fix) .chapters__layout {
    pointer-events: none;
  }
  & .chapters:has(.chapters__fix) .ch,
  & .chapters:has(.chapters__fix) .mop {
    @media (min-width: 1080px) {
      min-height: 100svh;
      padding-top: 0;
    }
  }
  & .chapters__fix-stick {
    position: sticky;
    top: 0;
    height: var(--stage);
    & .ch__in {
      position: absolute;
      inset: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 var(--gutter-pc) 56px;
      opacity: 0;
      transition: opacity 0.45s;
    }
  }
  & .chapters__fix-stick .ch__subbg--fig {
    background: #0a0a0b;
    &::after {
      z-index: 1;
    }
    & .mop__pin {
      z-index: 2;
    }
    & figure {
      position: absolute;
      top: 0;
      left: 50%;
      height: 100%;
      width: auto;
      margin: 0;
      transform: translate(calc(-48.5% + 145px), -180px) scale(1.1);
      transform-origin: 31% 68%;
      & img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
    & .mop__pin {
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
      font-size: 17px;
      box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22);
    }
  }
  & .chapters__fix-stick .ch__in[data-sub="1"] .mop__card[data-k="1"] .mop__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-top: 6px;
    & li {
      font-size: 15px;
      &::before {
        flex: none;
      }
    }
  }
  & .chapters__fix-stick .ch__in[data-pin="6"] {
    & .ch__box {
      background: none;
      box-shadow: none;
      border-radius: 0;
      overflow: visible;
    }
    & .ch__box-body {
      padding: 0;
      background: none;
    }
    & .ch__box {
      display: flex;
      flex-direction: column;
    }
    & .ch__pair {
      order: 2;
      max-width: none;
      margin: 28px 0 0;
      -webkit-mask-image: none;
      mask-image: none;
      & .ch__card--sm {
        border-radius: 6px;
        overflow: hidden;
      }
    }
  }
  & .chapters__fix-stick .ch__mainbg {
    position: absolute;
    inset: 0;
    z-index: 0;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(8, 8, 8, 0.78) 0%,
        rgba(8, 8, 8, 0.66) 12%,
        rgba(8, 8, 8, 0.5) 24%,
        rgba(8, 8, 8, 0.35) 36%,
        rgba(8, 8, 8, 0.22) 48%,
        rgba(8, 8, 8, 0.12) 60%,
        rgba(8, 8, 8, 0.06) 72%,
        rgba(8, 8, 8, 0.02) 86%,
        rgba(8, 8, 8, 0) 100%);
    }
  }
  & .chapters__fix-stick .ch__before {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 22px 0 0;
    padding: 12px 20px 12px 12px;
    border-radius: 10px;
    background: rgba(12, 13, 15, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    & img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 6px;
      filter: grayscale(0.4) brightness(0.85);
    }
    & figcaption {
      position: static;
      padding: 0;
      background: none;
      font-size: clamp(15px, 1.05vw, 20px);
      line-height: 1.45;
      white-space: nowrap;
      color: #fff;
      &::before {
        content: "従来";
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.55);
      }
    }
  }
  & .chapters__fix-stick .ch__in[data-pin="5"] {
    padding: 0;
    & .ch__box {
      display: contents;
    }
    & .ba {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
      mask-image: none;
      & figcaption {
        top: 112px;
        left: var(--gutter-pc);
        font-size: 15px;
        padding: 8px 16px;
      }
    }
    & .ba__fig--after figcaption {
      left: auto;
      right: var(--gutter-pc);
    }
    & .ba__range {
      z-index: 2;
    }
    & .ch__box-body {
      position: absolute;
      right: var(--gutter-pc);
      bottom: 56px;
      z-index: 2;
      width: min(40vw, 640px);
      padding: 0;
      background: none;
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
      & .ch__text br {
        display: none;
      }
    }
  }
  & .chapters__fix-stick .ch__in[data-pin="1"],
  & .chapters__fix-stick .ch__in[data-pin="3"] {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 24px;
  }
  & .chapters[data-ch] .chapters__fix-stick .mop .mop__hero,
  & .chapters[data-ch] .chapters__fix-stick .mop .mop__grid {
    opacity: 1;
  }
  & .chapters__fix-stick .ch__in[data-pin="1"] {
    padding: 0 var(--gutter-pc) 56px;
    background: none;
    & .mop__hero {
      display: block;
      width: min(34vw, 520px);
      padding: 0;
      min-height: 0;
      & .mop__hero-bg, & .mop__badge {
        display: none;
      }
      & .mop__stat {
        max-width: none;
      }
    }
  }
  & .chapters__fix-stick .ch__in[data-pin="3"] .ch__head {
    width: min(34vw, 520px);
    max-width: none;
    margin: 0;
  }
  & .chapters__fix-stick .ch__in[data-sub] {
    & .ch__subbgs {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    & .ch__subbg {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.6s ease;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
          rgba(8, 8, 8, 0.78) 0%,
          rgba(8, 8, 8, 0.66) 12%,
          rgba(8, 8, 8, 0.5) 24%,
          rgba(8, 8, 8, 0.35) 36%,
          rgba(8, 8, 8, 0.22) 48%,
          rgba(8, 8, 8, 0.12) 60%,
          rgba(8, 8, 8, 0.06) 72%,
          rgba(8, 8, 8, 0.02) 86%,
          rgba(8, 8, 8, 0) 100%),
          linear-gradient(to bottom,
          rgba(8, 8, 8, 0.7) 0%,
          rgba(8, 8, 8, 0.56) 12%,
          rgba(8, 8, 8, 0.4) 24%,
          rgba(8, 8, 8, 0.26) 36%,
          rgba(8, 8, 8, 0.14) 48%,
          rgba(8, 8, 8, 0.06) 60%,
          rgba(8, 8, 8, 0.02) 72%,
          rgba(8, 8, 8, 0) 84%);
      }
    }
    & .ch__tabs {
      position: absolute;
      left: var(--gutter-pc);
      bottom: 56px;
      z-index: 3;
      display: flex;
      gap: 10px;
    }
    & .ch__tab {
      display: grid;
      gap: 8px;
      width: 150px;
      padding: 0;
      border: 0;
      background: none;
      color: #fff;
      font: inherit;
      text-align: left;
      cursor: pointer;
      opacity: 0.62;
      transition: opacity 0.3s;
      & img {
        display: block;
        width: 150px;
        height: 90px;
        object-fit: cover;
        border-radius: 6px;
        border: 2px solid transparent;
        transition: border-color 0.3s;
      }
      & span {
        font-size: 12px;
        line-height: 1.45;
        letter-spacing: 0.02em;
      }
      &:hover {
        opacity: 1;
      }
      &.is-on {
        opacity: 1;
        & img {
          border-color: #00cbeb;
        }
        & span {
          color: #00cbeb;
        }
      }
      &:first-child {
        align-content: end;
        & span {
          padding: 8px 0 0;
          border-top: 2px solid rgba(255, 255, 255, 0.5);
        }
      }
      &:first-child.is-on span {
        border-top-color: #00cbeb;
      }
    }
    & > .ch__head, & > .mop__hero {
      position: relative;
      z-index: 2;
      display: none;
    }
    &[data-sub="0"] > .ch__head {
      display: grid;
    }
    &[data-sub="0"] > .mop__hero {
      display: block;
    }
    & .mop__grid {
      display: contents;
    }
    & .ch__row, & .mop__card {
      display: none;
      position: relative;
      z-index: 2;
      border: 0;
      outline: 0;
      width: min(34vw, 520px);
      padding: 0;
      margin: 0;
      background: none;
      box-shadow: none;
      & .ch__card--media, & .mop__card-fig, & .mop__steps {
        display: none;
      }
      & .ch__row-text, & .mop__card-body {
        display: grid;
        gap: 16px;
        padding: 0;
      }
      & .ch__text--sm, & .mop__card-text {
        display: block;
      }
    }
    &[data-sub="1"] [data-k="1"], &[data-sub="2"] [data-k="2"], &[data-sub="3"] [data-k="3"] {
      display: block;
    }
    &[data-sub] > .ch__head, &[data-sub] > .mop__hero, & .ch__row, & .mop__card {
      animation: chSubIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    &[data-sub="1"] .ch__subbg[data-k="1"], &[data-sub="2"] .ch__subbg[data-k="2"], &[data-sub="3"] .ch__subbg[data-k="3"] {
      opacity: 1;
    }
  }
  & .chapters .chapters__fix-stick .ch__in {
    --rb-w: min(30vw, 380px);
    @media (min-width: 1500px) {
      --rb-w: clamp(380px, calc((100vw - var(--gutter-pc) * 2) / 4), 460px);
    }
    & > .ch__head,
    & > .mop__hero,
    & .ch__row,
    & .mop__card,
    &[data-pin="6"] .ch__box,
    & .ch__tabs {
      width: var(--rb-w);
      max-width: none;
      margin: 0;
      align-self: flex-end;
    }
    &[data-pin="5"] .ch__box-body {
      width: var(--rb-w);
    }
    & .ch__stat-label, & .mop__stat-label, & .ch__sub-title, & .ch__sub, & .mop__card-title {
      font-size: clamp(24px, 2vw, 34px);
      line-height: 1.4;
      letter-spacing: 0;
      margin: 0;
    }
    & .ch__sub-title, & .ch__sub, & .mop__card-title {
      font-size: clamp(28px, 2.4vw, 40px);
    }
    & .ch__text, & .ch__text--sm, & .mop__stat-text, & .mop__card-text {
      font-size: clamp(15px, 1.05vw, 18px);
      line-height: 1.7;
      @media (min-width: 1500px) {
        font-size: clamp(18px, 1.1vw, 22px);
      }
    }
    & .mop__stat, & .ch__stat {
      gap: 26px;
    }
    & .ch__stat-more--stack {
      display: inline-flex;
      flex-direction: column-reverse;
      align-self: flex-end;
      white-space: nowrap;
      line-height: 1.1;
      margin-left: 10px;
      margin-bottom: -0.12em;
    }
    & .ch__stat-value {
      flex-wrap: nowrap;
    }
    & .mop__stat-value, & .ch__stat-value, & .ch__num {
      margin: 0;
      line-height: 1;
    }
    & .mop__stat-text {
      margin-top: 10px;
    }
    &:not([data-sub]) > .ch__head {
      display: grid;
    }
    & > .ch__head {
      row-gap: 24px;
      & > * {
        margin-top: 0;
        margin-bottom: 0;
      }
      & > .ch__foot {
        margin-top: -10px;
      }
    }
    & .ch__stat-num, & .mop__stat-num, & .ch__num b {
      font-family: var(--font-en);
      font-weight: 300;
      font-size: clamp(96px, 12vw, 190px);
      line-height: 0.74;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.03em;
    }
    & .ch__stat-pre, & .ch__stat-more, & .mop__stat-pct, & .mop__stat-more, & .ch__num-pre, & .ch__num-unit {
      font-size: clamp(28px, 2.8vw, 48px);
      line-height: 1.2;
    }
    & .ch__num {
      display: flex;
      align-items: baseline;
      gap: 4px;
      padding-top: 0.2em;
      & b {
        font-variant-numeric: normal;
        letter-spacing: -0.06em;
        margin-right: 0.04em;
      }
      margin: 0;
      color: #fff;

    }
  }
  & .chapters__fix-stick .ch__in[data-sub][data-pin] {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 28px;
    & .ch__tabs {
      position: absolute;
      top: auto;
      right: auto;
      bottom: 56px;
      left: var(--gutter-pc);
      width: min(40vw, 600px);
      @media (min-width: 1500px) {
        width: min(calc((100vw - var(--gutter-pc) * 2) / 3), 640px);
      }
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding-top: 0;
      border-top: 0;
    }
    & .ch__tab {
      position: relative;
      width: auto;
      gap: 10px;
      padding: 14px 0 0;
      opacity: 1;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(255, 255, 255, 0.28);
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        height: 2px;
        background: #00cbeb;
        transform: scaleX(var(--tp, 0));
        transform-origin: 0 50%;
      }
      &.is-on::before {
        will-change: transform;
      }
      & img {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 1;
        border-width: 0;
        filter: brightness(0.55) saturate(0.7);
        transition: filter 0.4s;
      }
      & span {
        font-size: 14px;
        line-height: 1.4;
        white-space: normal;
        color: rgba(255, 255, 255, 0.78);
      }
      &:hover img {
        filter: brightness(0.85);
      }
      &.is-on {
        opacity: 1;
        & img {
          filter: none;
        }
        & span {
          color: #fff;
          font-weight: 500;
        }
      }
      &:first-child span, &:first-child.is-on span {
        padding: 0;
        border: 0;
      }
      &:focus-visible {
        outline: 2px solid #00cbeb;
        outline-offset: 4px;
      }
      &:first-child span {
        padding-top: 0;
        border-top: 0;
      }
    }
  }
  & .chapters[data-ch="1"] .chapters__fix-stick .ch__in[data-pin="1"],
  & .chapters[data-ch="3"] .chapters__fix-stick .ch__in[data-pin="3"],
  & .chapters[data-ch="2"] .chapters__fix-stick .ch__in[data-pin="2"],
  & .chapters[data-ch="4"] .chapters__fix-stick .ch__in[data-pin="4"],
  & .chapters[data-ch="5"] .chapters__fix-stick .ch__in[data-pin="5"],
  & .chapters[data-ch="6"] .chapters__fix-stick .ch__in[data-pin="6"] {
    opacity: 1;
    pointer-events: auto;
  }
  & .ch.ch--edge,
  & .ch.ch--station,
  & .ch.ch--dust,
  & .ch.ch--brush {
    @media (min-width: 1080px) {
      min-height: 100svh;
      padding-top: 0;
    }
    & .ch__foot {
      @media (min-width: 1080px) {
        position: absolute;
        left: var(--gutter-pc);
        bottom: 24px;
        margin: 0;
      }
    }
  }
  & .chapters__fix-stick .ch__in .ch__foot {
    position: static;
    display: block;
    padding: 0;
    margin: 14px 0 0;
    max-width: none;
    font-size: 11px;
    line-height: 1.7;
    opacity: 0.6;
    transform: none;
  }
  & .chapters__fix-stick .ch__in[data-sub] > .ch__foot {
    position: relative;
    z-index: 2;
    left: auto;
    bottom: auto;
    width: var(--rb-w, 480px);
    padding: 0;
    margin: -14px 0 0;
  }
  & .chapters__fix-stick .ch__in > .ch__foot {
    position: absolute;
    left: var(--gutter-pc);
    bottom: 24px;
    z-index: 3;
    margin: 0;
    max-width: 36vw;
    opacity: 1;
  }
  & .chapters:has(.chapters__fix) .ch.ch--ai .ch__foot,
  & .chapters:has(.chapters__fix) .mop.ch .ch__foot {
    @media (min-width: 1080px) {
      position: absolute;
      left: var(--gutter-pc);
      right: auto;
      top: auto;
      bottom: 210px;
      margin: 0;
      width: auto;
      max-width: 36vw;
      transform: none;
    }
    & .ch__box {
      @media (min-width: 1080px) {
        max-width: min(440px, 44svh);
      }
    }
    & .ba {
      @media (min-width: 1080px) {
        aspect-ratio: 16 / 9;
      }
    }
    & .ch__box-body {
      @media (min-width: 1080px) {
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }
    & .ch__box .ch__text {
      @media (min-width: 1080px) {
        line-height: 1.8;
      }
    }
  }
  & .chapters[data-ch] .ch .ch__in, & .chapters[data-ch] .mop .mop__hero, & .chapters[data-ch] .mop .mop__grid {
    transition: opacity 0.45s;
  }
  & .chapters[data-ch] .ch:not(.is-cur) .ch__in, & .chapters[data-ch] .mop:not(.is-cur) .mop__hero, & .chapters[data-ch] .mop:not(.is-cur) .mop__grid, & .chapters[data-ch] .ch:not(.is-cur) .ch__foot {
    opacity: 0;
  }
  & .odo {
    display: block;
    height: 1em;
    overflow: hidden;
  }
  & .odo__reel {
    --d: 0;
    display: block;
    line-height: 1;
    transform: translateY(calc(var(--d) * -1em));
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  & .ch {
    position: relative;
    padding-top: 40svh;
    color: var(--color-text);
    @media (min-width: 1080px) {
      padding-top: 58svh;
    }
  }
  & .chapters .mop {
    padding-top: 40svh;
    @media (min-width: 1080px) {
      padding-top: 58svh;
    }
  }
  & .ch__title--lg {
    font-size: clamp(26px, 2.5vw, 40px);
    letter-spacing: -0.06em;
  }
  & .ch__sub {
    margin: 0;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.05em;
  }
  & .ch__text {
    margin: 0;
    font-size: calc(var(--fs-body) - 1px);
    line-height: 2;
    & .nb {
      white-space: nowrap;
    }
    & sup {
      font-size: 0.5em;
      vertical-align: super;
      line-height: 0;
    }
  }
  & .ch__text--sm {
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.8;
  }
  & .ch__note {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.6;
  }
  & .ch__row {
    display: grid;
    gap: 24px;
    @media (min-width: 1080px) {
      grid-template-columns: 595fr 434fr;
      gap: 50px;
      align-items: center;
    }
    & + .ch__row {
      margin-top: 30px;
      padding-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
  }
  & .ch__row-text {
    display: grid;
    gap: 18px;
    @media (min-width: 1080px) {
      gap: 30px;
    }
  }
  & .ch__card {
    position: relative;
    margin: 0;
    aspect-ratio: 595 / 330;
    border-radius: var(--radius);
    overflow: clip;
    background: #010101;
    & img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  & .ch__card-cap {
    position: absolute;
    left: 15px;
    bottom: 12px;
    font-size: clamp(13px, 1.2vw, 18px);
    line-height: 1.6;
    letter-spacing: -0.05em;
  }
  & .ch__card--media .ch__card-cap {
    top: 24px;
    left: 20px;
    bottom: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.55);
    font-weight: 500;
    letter-spacing: 0.02em;
    @media (min-width: 1080px) {
      top: 35px;
      left: 30px;
    }
  }
  & .ch__card--tall {
    aspect-ratio: 534 / 489;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  & .ch__card--sm {
    aspect-ratio: 331 / 250;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  & .ch__pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 40px;
    @media (min-width: 1080px) {
      margin-top: 70px;
    }
  }
  & .ch-edge__block {
    max-width: 560px;
  }
  & .ch-edge__legend {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    @media (min-width: 1080px) {
      gap: 12px;
      margin-top: 32px;
    }
  }
  & .ch-edge__leg {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-body);
    line-height: 1.5;
    opacity: 0.5;
    transition: opacity 0.4s;
    &.is-on {
      opacity: 1;
    }
  }
  & .ch-edge__leg-n {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--color-primary);
    border-radius: 50%;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    transition: background 0.4s, color 0.4s;
    .ch-edge__leg.is-on & {
      background: var(--color-primary);
      color: var(--color-bg-black);
    }
  }
  & .chapters__pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  & .chapters__pin {
    position: absolute;
    left: calc(var(--fx, 0px) + var(--fw, 100%) * var(--ux));
    top: calc(var(--fy, 0px) + var(--fh, 100%) * var(--uy));
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #fff;
    color: var(--color-bg-black);
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16);
    transition: background 0.4s, color 0.4s, box-shadow 0.4s;
    @media (min-width: 1080px) {
      width: 32px;
      height: 32px;
      margin: -16px 0 0 -16px;
      font-size: 14px;
    }
    &.is-on {
      border-color: var(--color-primary);
      background: #fff;
      color: var(--color-bg-black);
      box-shadow: 0 0 0 7px rgba(0, 203, 235, 0.22), 0 0 28px 6px rgba(0, 203, 235, 0.4);
    }
    & b {
      position: absolute;
      right: calc(100% + 12px);
      top: 50%;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(8, 8, 8, 0.55);
      color: #fff;
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
      white-space: nowrap;
      opacity: 0.55;
      transform: translateY(-50%);
      transition: opacity 0.4s;
      @media (min-width: 1080px) {
        right: calc(100% + 16px);
        padding: 7px 14px;
        font-size: 13px;
      }
    }
    &.is-on b {
      opacity: 1;
    }
  }
  & .ch-ai__hero {
      @media (min-width: 1080px) {
        min-height: 80svh;
      }
    }
  & .ch-ai__hero-in {
    width: 100%;
    padding-bottom: 60px;
    @media (min-width: 1080px) {
      padding-bottom: 80px;
    }
  }
  & .ch-ai__rows {
    padding-top: 20px;
    @media (min-width: 1080px) {
      padding-top: 40px;
    }
  }
  & .ch-station__in {
      @media (min-width: 1080px) {
        grid-template-columns: 1fr;
        justify-items: center;
      }
    }
  & .chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin: 4px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    list-style: none;
    @media (min-width: 1080px) {
      margin-top: 12px;
    }
  }
  & .chip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    letter-spacing: -0.02em;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.5s;
    @media (min-width: 1080px) {
      gap: 16px;
      padding: 15px 0;
      font-size: 15px;
    }
    & img {
      width: 26px;
      height: 26px;
      @media (min-width: 1080px) {
        width: 30px;
        height: 30px;
      }
    }
    &.is-on {
      opacity: 1;
    }
  }
  & .ch-station__fig {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    @media (min-width: 1080px) {
      max-width: none;
      margin: 0;
    }
    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  & .ch-brush__in {
      @media (min-width: 1080px) {
        grid-template-columns: 1fr;
        justify-items: center;
      }
    }
  & .ch__pair--sm {
    margin-top: 0;
    @media (min-width: 1080px) {
      max-width: 672px;
    }
  }
  & .ch-brush__text {
      @media (min-width: 1080px) {
        max-width: 640px;
        text-align: center;
      }
    }
  & .ch--edge {
    color: var(--color-text);
  }
  & .ch--ai {
    background: none;
  }
  & .ch-ai__hero::after {
    display: none;
  }
  & .ch--station {
    background: none;
  }
  & .ch--dust {
    background: none;
    &::after {
      display: none;
    }
  }
  & .ch--brush {
    background: none;
  }

  /* [C] ── 9. 配慮 ── */
  & .care {
    padding: 80px var(--gutter);
    background: var(--color-bg-beige);
    color: var(--color-text-dark);
    @media (min-width: 1080px) {
      padding: 140px var(--gutter-pc);
    }
    & .care__inner {
      display: grid;
      gap: 40px;
      @media (min-width: 1080px) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 0;
        align-items: start;
      }
    }
    & .care__head {
      @media (min-width: 1080px) {
        grid-column: 1 / 5;
        position: sticky;
        top: 140px;
      }
    }
    & .care__no {
      margin-bottom: 16px;
      @media (min-width: 1080px) {
        margin-bottom: 14px;
      }
    }
    & .care__title {
      font-size: clamp(24px, 6.4vw, 30px);
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.04em;
      @media (min-width: 1080px) {
        font-size: clamp(40px, 3.6vw, 60px);
      }
    }
    & .care__list {
      display: grid;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--color-line-dark);
      @media (min-width: 1080px) {
        grid-column: 5 / 13;
      }
    }
    & .care__row {
      display: grid;
      gap: 24px;
      padding: 30px 0;
      border-bottom: 1px solid var(--color-line-dark);
      @media (min-width: 1080px) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        column-gap: 10px;
        align-items: center;
        padding: 40px 0;
      }
    }
    & .care__text {
      display: grid;
      gap: 20px;
      @media (min-width: 1080px) {
        grid-column: 1 / 5;
        gap: 40px;
        padding-right: 32px;
      }
    }
    & .care__row-title {
      font-size: clamp(20px, 1.9vw, 28px);
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.01em;
      @media (min-width: 1080px) {
        letter-spacing: -0.05em;
      }
    }
    & .care__row-text {
      font-size: var(--fs-small);
      line-height: 2;
    }
    & .care__row-note {
      font-size: var(--fs-note);
      line-height: 1.3;
      opacity: 0.6;
    }
    & .care__logos {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    & .care__logo {
      display: grid;
      place-items: center;
      height: 40px;
      padding: 0 10px;
      border-radius: 9px;
      background: #fff;
      & img {
        height: 24px;
        width: auto;
      }
    }
    & .care__logo--siri {
      padding: 0;
      background: none;
      overflow: clip;
      & img {
        height: 40px;
        border-radius: 9px;
      }
    }
    & .care__media {
      position: relative;
      aspect-ratio: 555 / 300;
      border-radius: var(--radius);
      background: #191b1d;
      overflow: clip;
      @media (min-width: 1080px) {
        grid-column: 5 / 9;
      }
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    & .care__media--app {
      & .care__app-hand {
        position: absolute;
        left: 29%;
        bottom: 0;
        width: 42%;
        height: auto;
        aspect-ratio: 1048 / 1249;
      }
      & .care__app-ui {
        position: absolute;
        left: 46%;
        bottom: 4%;
        width: 21%;
        height: auto;
        aspect-ratio: 1206 / 2622;
        border-radius: 10px;
      }
    }
    & .care__media--matter {
      & .care__matter-logo {
        position: absolute;
        right: 6%;
        bottom: 10%;
        width: 26%;
        height: auto;
        aspect-ratio: 322 / 65;
      }
    }
  }

  /* [B] ── 10. シリーズ ── */
  & .series {
    padding: 100px var(--gutter) 40px;
    background: var(--color-bg-gray);
    @media (min-width: 1080px) {
      padding: 140px var(--gutter-pc) 50px;
    }
    &.series--mid {
      padding: 96px var(--gutter);
      background: #080808;
      @media (min-width: 1080px) {
        display: grid;
        align-items: center;
        min-height: 100svh;
        padding: 140px 0 140px;
      }
      & .series__inner {
        @media (min-width: 1080px) {
          width: 100%;
          max-width: none;
        }
      }
      & .series__cards {
        @media (min-width: 1080px) {
          gap: 0;
        }
      }
      & .scard {
        position: relative;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 10px;
        align-items: center;
        justify-items: start;
        padding: 8px 0 32px;
        border: 0;
        border-radius: 0;
        text-align: left;
        @media (min-width: 1080px) {
          grid-template-columns: none;
          gap: 12px;
          padding: 0 var(--gutter-pc);
          justify-items: center;
          text-align: center;
        }
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 1px;
          background: rgba(255, 255, 255, 0.4);
          transform: scaleX(0);
          transform-origin: 0 50%;
          transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
          @media (min-width: 1080px) {
            display: none;
          }
        }
        &.is-in::after {
          transform: none;
        }
      }
      & .scard__link {
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        @media (min-width: 1080px) {
          display: none;
        }
      }
      & .scard__fig {
        grid-column: 1;
        grid-row: 3 / 5;
        width: 172px;
        max-width: none;
        justify-self: center;
        @media (min-width: 1080px) {
          grid-column: auto;
          grid-row: auto;
          width: auto;
          height: min(34svh, 380px);
          margin: 12px 0;
          aspect-ratio: 343 / 280;
        }
        & .scard__new {
          display: none;
        }
      }
      & .scard:nth-child(2) .scard__fig img {
        @media (min-width: 1080px) {
          scale: 0.88;
        }
      }
      & .scard__title, & .scard__model, & .scard__lead, & .scard__name, & .scard__price {
        grid-column: 2;
        @media (min-width: 1080px) {
          grid-column: auto;
        }
      }
      & .scard__title {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        margin-top: 12px;
        margin-bottom: 8px;
        font-size: clamp(22px, 6.6vw, 28px);
        line-height: 1.4;
        letter-spacing: -0.01em;
        text-align: center;
        word-break: keep-all;
        @media (min-width: 1080px) {
          grid-column: auto;
          grid-row: auto;
          order: -1;
          margin-top: 20px;
          margin-bottom: 8px;
          font-size: clamp(30px, 3vw, 48px);
          line-height: 1.4;
          letter-spacing: 0.03em;
          word-break: normal;
        }
      }
      & .scard__title-u {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
      }
      & .scard__lead {
        grid-row: 3 / 5;
        align-self: center;
        margin-top: 0;
        @media (min-width: 1080px) {
          grid-row: auto;
        }
        font-size: 12px;
        line-height: 1.5;
        color: var(--color-text-sub);
        @media (min-width: 1080px) {
          font-size: clamp(13px, 1.05vw, 15px);
          white-space: nowrap;
        }
      }
      & .scard__model {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
        @media (min-width: 1080px) {
          grid-column: auto;
          grid-row: auto;
          order: -2;
          margin-bottom: -8px;
          font-size: clamp(15px, 1.25vw, 18px);
          white-space: nowrap;
        }
      }
      & .scard__name, & .scard__price {
        grid-column: 1 / -1;
        justify-self: center;
        text-align: center;
        @media (min-width: 1080px) {
          grid-column: auto;
        }
      }
      & .scard__name {
        margin-top: 10px;
        font-size: 10px;
        line-height: 1.5;
        @media (min-width: 1080px) {
          margin-top: 0;
          font-size: clamp(15px, 1.2vw, 18px);
        }
        & .nb {
          white-space: nowrap;
        }
      }
      & .scard__price {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px 6px;
        @media (min-width: 1080px) {
          gap: 6px;
        }
      }
      & .scard__btns {
        grid-column: 1 / -1;
        position: relative;
        z-index: 2;
        width: 100%;
        margin-top: 14px;
        @media (min-width: 1080px) {
          grid-column: auto;
          max-width: 520px;
          margin-top: 0;
        }
        & .lp-btns {
          flex-wrap: nowrap;
          gap: 10px;
          @media (min-width: 1080px) {
            gap: 15px;
          }
          & li {
            flex: 1 1 0;
            min-width: 0;
            max-width: none;
            @media (min-width: 1080px) {
              flex: 1 1 140px;
              max-width: 240px;
            }
            & a {
              border-radius: 8px;
              @media (min-width: 1080px) {
                border-radius: 999px;
              }
            }
          }
        }
      }
      & .textlink {
        display: none;
        @media (min-width: 1080px) {
          display: inline-flex;
          grid-column: auto;
          justify-self: center;
        }
      }
    }
    & .series__inner {
      display: grid;
      gap: 48px;
      max-width: var(--max-width);
      margin: 0 auto;
      @media (min-width: 1080px) {
        gap: 70px;
      }
    }
    & .series__title {
      font-family: var(--font-head);
      font-size: clamp(24px, 3vw, 42px);
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: 0.02em;
    }
    & .series__cards {
      display: grid;
      gap: 44px;
      @media (min-width: 1080px) {
        grid-template-columns: 1fr 1px 1fr;
        gap: 50px;
        &::before {
          content: "";
          grid-column: 2;
          grid-row: 1;
          background: var(--color-line);
        }
      }
    }
    & .scard {
      display: grid;
      gap: 28px;
      justify-items: center;
      text-align: center;
      @media (min-width: 1080px) {
        gap: 30px;
        padding: 0 30px;
      }
      &:nth-child(2) {
        @media (min-width: 1080px) {
          grid-column: 3;
          grid-row: 1;
        }
      }
    }
    & .scard__fig {
      position: relative;
      width: 70%;
      max-width: 343px;
      aspect-ratio: 343 / 280;
      & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    & .scard__new {
      position: absolute;
      left: 0;
      top: 0;
      display: grid;
      place-items: center;
      width: 44px;
      height: 23px;
      border: 1px solid #fff;
      border-radius: 100px;
      font-family: var(--font-en);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0;
    }
    & .scard__title {
      font-size: clamp(22px, 2.1vw, 29px);
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.03em;
    }
    & .scard__lead {
      font-size: clamp(14px, 1.3vw, 18px);
      line-height: 1.5;
      letter-spacing: 0.03em;
    }
    & .scard__name {
      font-family: var(--font-en);
      font-size: clamp(20px, 1.8vw, 25px);
      letter-spacing: -0.02em;
      line-height: 1.5;
    }
  }

  & .series__cmp {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;
    @media (min-width: 1080px) {
      display: none;
    }
  }
  & .cmp-modal {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #080808;
    color: #fff;
    &::backdrop {
      background: rgba(0, 0, 0, 0.6);
    }
    & .cmp-modal__in {
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 64px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
    }
    & .cmp-modal__close {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 2;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      background: rgba(8, 8, 8, 0.8);
      cursor: pointer;
      &::before, &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 1px;
        background: #fff;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
    & .compare--modal {
      padding: 0;
      background: none;
    }
  }
  /* [B] ── 10b. 製品比較（Liberty 5 Pro シリーズ 比較表型） ── */
  & .compare {
    --color-star: #d9b85c;
    padding: 80px var(--gutter);
    & .x-mark {
      position: relative;
      display: inline-block;
      &::before, &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 1px;
        background: currentColor;
        transform: translate(-50%, -50%) rotate(45deg);
      }
      &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
    background: var(--color-bg-gray);
    color: #fff;
    @media (min-width: 1080px) {
      padding: 120px var(--gutter-pc);
    }
    & .compare__inner {
      display: grid;
      gap: 40px;
      max-width: 1600px;
      margin: 0 auto;
      @media (min-width: 1080px) {
        gap: 56px;
      }
    }
    & .compare__title {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(26px, 7vw, 30px);
      font-weight: 300;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
      @media (min-width: 1080px) {
        font-size: clamp(32px, 2.9vw, 42px);
        line-height: 1.6;
      }
    }
    & .compare__table {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      width: 100%;
      @media (min-width: 1080px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.44fr) minmax(0, 1.44fr);
      }
    }
    & .compare__head, & .compare__row {
      display: contents;
    }
    & .compare__head-label {
      display: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      @media (min-width: 1080px) {
        display: block;
      }
    }
    & .compare__prod {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding: 16px 6px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      text-align: center;
      @media (min-width: 1080px) {
        gap: 12px;
        padding: 24px 12px 28px;
      }
      & img {
        width: auto;
        height: 96px;
        max-width: 100%;
        object-fit: contain;
        @media (min-width: 1080px) {
          height: 150px;
        }
      }
    }
    & .compare__prod:not(.compare__prod--main) img {
      transform: scale(0.9);
      transform-origin: 50% 100%;
    }
    & .compare__prod--main {
      background: none;
    }
    & .compare__badge {
      position: absolute;
      top: 10px;
      left: 6px;
      display: none;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--color-primary);
      color: #fff;
      font-size: 9px;
      line-height: 1.3;
      font-weight: 500;
      text-align: center;
      @media (min-width: 1080px) {
        top: 16px;
        left: 16px;
        width: 58px;
        height: 58px;
        font-size: 11px;
      }
    }
    & .compare__model {
      order: -1;
      margin: 0 0 6px;
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, 0.55);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.45;
      text-align: center;
      @media (min-width: 1080px) {
        order: -2;
        margin-bottom: 4px;
        padding: 6px 14px;
        font-size: 14px;
      }
    }
    & .compare__tag {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      row-gap: 6px;
      & em {
        grid-column: 1 / -1;
        justify-self: center;
        @media (min-width: 1080px) {
          grid-column: auto;
        }
      }
      @media (min-width: 1080px) {
        display: flex;
      }
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin: 0;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.02em;
      @media (min-width: 1080px) {
        order: -1;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        margin-bottom: 8px;
        font-size: 18px;
        white-space: nowrap;
      }
      & em {
        padding: 2px 8px;
        border-radius: 999px;
        background: #fff;
        color: var(--color-bg-black);
        font-style: normal;
        @media (min-width: 1080px) {
          padding: 3px 12px;
        }
      }
      & .x-mark {
        width: 10px;
        height: 10px;
        @media (min-width: 1080px) {
          width: 14px;
          height: 14px;
        }
      }
    }
    & .compare__lead {
      margin: 0;
      font-size: 10px;
      line-height: 1.5;
      color: var(--color-text-sub);
      @media (min-width: 1080px) {
        font-size: 13px;
      }
    }
    & .compare__name {
      margin: 0;
      font-family: var(--font-en);
      font-weight: 300;
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      @media (min-width: 1080px) {
        font-size: 20px;
      }
    }
    & .compare__label, & .compare__cell {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      min-height: 56px;
      padding: 10px 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.02em;
      @media (min-width: 1080px) {
        min-height: 72px;
        gap: 6px;
        padding: 14px 16px;
        font-size: 13px;
      }
    }
    & .compare__label {
      grid-column: 1 / -1;
      display: block;
      align-items: center;
      min-height: 0;
      padding: 16px 6px 2px;
      border-bottom: 0;
      text-align: center;
      font-weight: 300;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.85);
      @media (min-width: 1080px) {
        grid-column: auto;
        display: flex;
        align-items: flex-start;
        min-height: 72px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        text-align: left;
        font-size: 13px;
      }
      & small {
        display: inline;
        margin-left: 4px;
        font-size: 0.85em;
        opacity: 0.7;
        letter-spacing: 0;
        @media (min-width: 1080px) {
          display: block;
          margin-left: 0;
        }
      }
    }
    & .compare__cell {
      align-items: center;
      text-align: center;
      color: #fff;
      &.compare__cell--main {
        color: #fff;
        & .-text {
          color: #fff;
        }
      }
      & .-main {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 2px 4px;
        font-family: var(--font-en);
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        @media (min-width: 1080px) {
          flex-wrap: nowrap;
          gap: 6px;
          font-size: 22px;
          white-space: nowrap;
        }
        & small {
          font-size: 0.6em;
        }
        & .x-mark {
          align-self: center;
          width: 10px;
          height: 10px;
          @media (min-width: 1080px) {
            width: 14px;
            height: 14px;
          }
        }
      }
      & .-stars {
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.06em;
        color: var(--color-star);
        @media (min-width: 1080px) {
          font-size: 16px;
        }
      }
      & .-text {
        font-size: 12px;
        font-weight: 300;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
        @media (min-width: 1080px) {
          font-size: 14px;
        }
        & b {
          font-weight: 500;
          color: #fff;
        }
      }
      & .-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;
        }
      }
    }
  }

  /* [B] ── 11. その他のラインナップ ── */
  & .lineup {
    padding: 80px var(--gutter) 120px;
    background: var(--color-bg-gray);
    @media (min-width: 1080px) {
      padding: 80px var(--gutter-pc) 120px;
    }
    & .lineup__inner {
      display: grid;
      gap: 30px;
      max-width: var(--max-width);
      margin: 0 auto;
    }
    & .lineup__title {
      font-family: var(--font-head);
      font-size: clamp(24px, 3vw, 42px);
      font-weight: 300;
      line-height: 1.6;
      letter-spacing: 0.02em;
    }
    & .lineup__cards {
      display: grid;
      gap: 20px;
      @media (min-width: 1080px) {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }
    }
    & .lineup__card {
      display: grid;
      place-items: center;
      min-height: 160px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.7);
      font-size: clamp(15px, 1.3vw, 18px);
      @media (min-width: 1080px) {
        min-height: 271px;
      }
      & span {
        color: var(--color-text-dark);
      }
    }
  }

  /* [A] ── 12. 注釈 ── */
  & .notes {
    padding: 0 var(--gutter) 160px;
    background: var(--color-bg-gray);
    @media (min-width: 1080px) {
      padding: 0 var(--gutter-pc) 160px;
    }
    & .notes__inner {
      display: grid;
      gap: 4px;
      max-width: var(--max-width);
      margin: 0 auto;
      & p {
        font-size: var(--fs-note);
        line-height: 1.5;
        letter-spacing: 0.04em;
      }
    }
  }

  /* [A] ── 追従 CTA ── */
  & .fab {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: none;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 28px 0 24px;
    border-radius: 0;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    &.is-on {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    & .fab__label {
      font-size: 16px;
      font-weight: 300;
      letter-spacing: -0.04em;
      color: #fff;
      @media (min-width: 1080px) {
        font-size: 20px;
      }
    }
    & .fab__thumb {
      width: 56px;
      height: 56px;
      overflow: clip;
      @media (min-width: 1080px) {
        margin-top: -16px;
        width: 77px;
        height: 77px;
      }
      & img {
        width: 150%;
        height: 150%;
        max-width: none;
        margin: -25%;
        object-fit: cover;
      }
    }
  }
  /* [B] ── PC ヘッダーナビ（Liberty 5 Pro LpNav 踏襲） ── */
  & .LpNav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 16px;
    right: 12px;
    left: 12px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1), top 0.3s ease;
    will-change: opacity, transform;
    @media (min-width: 1080px) {
      display: block;
      right: 16px;
      left: auto;
    }
    &.is-visible {
      opacity: 1;
      transform: translateY(0);
      @media (min-width: 1080px) {
        pointer-events: auto;
      }
    }
  }
  & .LpNav-inner {
    display: flex;
    align-items: center;
    gap: 25px;
    pointer-events: auto;
    @media (min-width: 1080px) {
      position: relative;
      padding: 7px 7px 7px 23px;
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.55)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.12) 100%);
      backdrop-filter: blur(28px) saturate(160%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
  }
  & .LpNav-pill {
    display: none;
    @media (min-width: 1080px) {
      display: flex;
    }
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    & li {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -7px;
        height: 1px;
        background: var(--color-primary);
        transform: scaleX(0);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }
      &.is-active {
        &::after {
          transform: scaleX(1);
        }
        & a,
        & a:hover {
          color: var(--color-primary);
        }
      }
    }
    & a {
      position: relative;
      display: inline-block;
      height: 1em;
      overflow: hidden;
      color: #fff;
      font-family: var(--font-jp);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0;
      text-decoration: none;
      white-space: nowrap;
      & > span {
        display: block;
        transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1);
      }
      &::after {
        content: attr(data-text);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: block;
        transition: transform 360ms cubic-bezier(0.65, 0, 0.35, 1);
      }
      &:hover {
        color: #fff;
      }
      &:hover > span,
      &:hover::after {
        transform: translateY(-100%);
      }
    }
  }
  & .LpNav-buy {
    position: static;
    flex-shrink: 0;
  }
  & .LpNav-caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    @media (min-width: 1080px) {
      margin: 0 0 3px 10px;
    }
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    vertical-align: middle;
  }
  & .LpNav.is-buy-open .LpNav-caret {
    margin-bottom: -1px;
    transform: rotate(225deg);
  }
  & .LpNav-drop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: grid;
    gap: 14px;
    width: auto;
    padding: 20px;
    @media (min-width: 1080px) {
      top: calc(100% + 12px);
      right: 0;
      left: 0;
      gap: 14px;
      width: auto;
      padding: 16px 20px;
    }
    background: rgba(16, 17, 20, 0.92);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    @media (min-width: 1080px) {
      border-radius: 12px;
    }
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.3s;
  }
  & .LpNav.is-buy-open .LpNav-drop {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  & .LpNav-drop__item {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 12px;
    @media (min-width: 1080px) {
      grid-template-columns: 64px minmax(0, 1fr) auto;
      grid-template-rows: auto;
      gap: 16px;
    }
    & + .LpNav-drop__item {
      padding-top: 14px;
      @media (min-width: 1080px) {
        padding-top: 14px;
      }
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
  }
  & .LpNav-drop__thumb {
    display: block;
    grid-row: 1 / 3;
    align-self: center;
    width: 80px;
    aspect-ratio: 1;
    @media (min-width: 1080px) {
      grid-row: auto;
      width: 64px;
    }
    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  & .LpNav-drop__info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    white-space: nowrap;
    @media (min-width: 1080px) {
      flex-wrap: nowrap;
      gap: 12px;
    }
  }
  & .LpNav-drop__name {
    margin: 0;
    font-family: var(--font-en);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      line-height: 1.4;
    }
  }
  & .LpNav-drop__price {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
    font-size: 15px;
    line-height: 1.3;
    & > *, & .price__tax {
      display: inline;
      margin: 0;
      font-size: 15px;
      line-height: 1.3;
    }
    & .price__tax {
      font-size: 11px;
    }
    @media (min-width: 1080px) {
      line-height: 1.4;
      & > *, & .price__tax {
        font-size: 15px;
        line-height: 1.4;
      }
    }
  }
  & .LpNav-drop__btns {
    grid-column: 2 / 3;
    width: auto;
    margin-top: 0;
    @media (min-width: 1080px) {
      grid-column: auto;
      margin-top: 0;
    }
    & .lp-btns {
      flex-wrap: nowrap;
      gap: 8px;
      & li {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        @media (min-width: 1080px) {
          flex: 0 0 auto;
          width: 140px;
        }
      }
      & li.is-more {
        display: none;
      }
    }
    & .lp-btn, & .lp-btn-amazon {
      min-height: 40px;
      padding: 8px 10px;
      font-size: 13px;
      letter-spacing: 0;
      @media (min-width: 1080px) {
        min-height: 44px;
        padding: 10px 16px;
      }
    }
  }
  & .LpNav-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 18px 0 0;
    background: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    overflow: clip;
    &:focus {
      outline: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    }
    &:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
    @media (min-width: 1080px) {
      display: inline-block;
      height: auto;
      padding: 12px 28px;
      border-radius: 6px;
      box-shadow: none;
      overflow: visible;
      &:focus {
        box-shadow: none;
      }
    }
    & .LpNav-cta__thumb {
      display: block;
      order: -1;
      width: 32px;
      height: 32px;
      margin: 0 10px 0 9px;
      border-radius: 3px;
      overflow: clip;
      @media (min-width: 1080px) {
        display: none;
      }
      & img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        object-fit: contain;
      }
    }
    color: #fff;
    font-family: var(--font-jp);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    @media (min-width: 1080px) {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.1em;
    }
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    &:hover {
      background: #00b3d0;
      border-color: #00b3d0;
      color: #fff;
    }
    &:active {
      transform: scale(0.97);
    }
  }
  /* [C] ── 6b. 5μm まで除去（AeroTurbo 2.0） ── */
  & .dust {
    position: relative;
    display: grid;
    gap: 0;
    padding: 0 0 72px;
    background: linear-gradient(to bottom,
      #080808 0%,
      #070606 3%,
      #070404 6%,
      #060303 9%,
      #060202 12%,
      #050102 15%,
      #050102 85%,
      #060202 88%,
      #060303 91%,
      #070404 94%,
      #070606 97%,
      #080808 100%);
    color: #fff;
    @media (min-width: 1080px) {
      display: block;
      padding: 0;
      overflow: clip;
    }
  }
  & .dust__head {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin-bottom: 28px;
    padding: 64px var(--gutter) 0;
    text-align: center;
    @media (min-width: 1080px) {
      position: absolute;
      margin-bottom: 0;
      left: calc(5.1vw + 28px);
      top: 15%;
      z-index: 1;
      gap: 16px;
      padding: 0;
      text-align: left;
    }
  }
  & .dust__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.85);
    @media (min-width: 1080px) {
      font-size: clamp(16px, 1.3vw, 20px);
    }
  }
  & .dust__copy {
    position: relative;
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(30px, 8.6vw, 36px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      font-size: clamp(36px, 3.4vw, 52px);
      line-height: 1.35;
      letter-spacing: 0.04em;
    }
    & sup {
      position: absolute;
      top: 0.1em;
      margin-left: 0.1em;
      font-size: 0.32em;
      line-height: 1;
      vertical-align: top;
      font-weight: 300;
    }
  }
  & .dust__sys {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 400;
    color: #fff;
    &.dust__sys--sp {
      position: absolute;
      right: var(--gutter);
      bottom: 6%;
      z-index: 1;
      font-size: 13px;
      line-height: 1.4;
      text-align: right;
      @media (min-width: 1080px) {
        display: none;
      }
    }
    &.dust__sys--pc {
      display: none;
      @media (min-width: 1080px) {
        display: block;
        margin-top: 8px;
        font-size: clamp(16px, 1.3vw, 20px);
        text-align: center;
      }
    }
  }
  & .dust__hero {
    position: relative;
    & img {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto;
      -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) 2%, rgba(0, 0, 0, 0.75) 4%, #000 7%, #000 90%, rgba(0, 0, 0, 0.75) 94%, rgba(0, 0, 0, 0.35) 97%, transparent), linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35) 5%, rgba(0, 0, 0, 0.75) 10%, #000 16%, #000 84%, rgba(0, 0, 0, 0.75) 90%, rgba(0, 0, 0, 0.35) 95%, transparent);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35) 2%, rgba(0, 0, 0, 0.75) 4%, #000 7%, #000 90%, rgba(0, 0, 0, 0.75) 94%, rgba(0, 0, 0, 0.35) 97%, transparent), linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35) 5%, rgba(0, 0, 0, 0.75) 10%, #000 16%, #000 84%, rgba(0, 0, 0, 0.75) 90%, rgba(0, 0, 0, 0.35) 95%, transparent);
      mask-composite: intersect;
      @media (min-width: 1080px) {
        margin: 0;
        padding-top: 7vw;
        transform: rotate(-8deg) translate(1%, 3%);
        transform-origin: 50% 50%;
      }
    }
  }
  & .dust__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 24px;
    margin-top: 32px;
    padding: 0 var(--gutter);
    @media (min-width: 1080px) {
      position: absolute;
      margin-top: 0;
      right: 4vw;
      top: 56%;
      width: min(36vw, 600px);
      gap: clamp(14px, 1.4vw, 22px);
      padding: 0;
    }
  }
  & .dust__title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(16px, 1.6vw, 26px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.35);
    }
  }
  & .dust__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    @media (min-width: 1080px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: start;
      gap: clamp(12px, 1.4vw, 24px);
    }
    &::before {
      content: "";
      position: absolute;
      left: 4%;
      right: 4%;
      top: 26px;
      height: 1px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35) 50%, rgba(0, 203, 235, 0.6));
      @media (min-width: 1080px) {
        display: none;
      }
    }
  }
  & .dust__item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 4px;
    text-align: center;
    & img {
      display: block;
      width: 82%;
      aspect-ratio: 1;
      margin-bottom: 6px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
      @media (min-width: 1080px) {
        width: 100%;
      }
    }
    &:last-child img {
      box-shadow: 0 0 0 2px var(--color-primary), 0 0 24px rgba(0, 203, 235, 0.35);
      @media (min-width: 1080px) {
        box-shadow: none;
      }
    }
    &:last-child .dust__size {
      color: var(--color-primary);
      @media (min-width: 1080px) {
        color: inherit;
      }
    }
  }
  & .dust__size {
    margin: 0;
    font-family: var(--font-en);
    font-size: clamp(12px, 1.3vw, 20px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    &::before {
      content: "›";
      margin-right: 0.2em;
    }
    & small {
      margin-left: 0.15em;
      font-size: 0.8em;
    }
  }
  & .dust__name {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0;
    @media (min-width: 1080px) {
      font-size: clamp(10px, 0.85vw, 13px);
      line-height: 1.5;
    }
    color: rgba(255, 255, 255, 0.75);
  }
  /* [C] ── 8c. 機能章 右カラム詳細ブロック（01 の配置に統一） ── */
  & .chapters .ch__head {
    @media (min-width: 1080px) {
      width: 100%;
      max-width: 380px;
      margin-left: auto;
      text-align: left;
    }
  }
  & .chapters .ch__head {
    display: grid;
    gap: 20px;
  }
  & .chapters .ch__sub-title {
    margin: 0;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.05em;
  }
  & .chapters .ch__text,
  & .chapters .mop__stat-text,
  & .chapters .mop__card-text {
    font-size: clamp(13px, 1.25vw, 18px);
    line-height: 1.9;
    letter-spacing: 0.02em;
  }
  & [data-count] {
    font-variant-numeric: tabular-nums;
  }
  & .cnt {
    display: inline-flex;
    height: 0.68em;
    overflow: hidden;
    line-height: 1;
  }
  & .cnt__reel {
    display: block;
    margin-top: -0.1em;
    line-height: 1;
    transform: translateY(0);
    transition: transform 1.8s cubic-bezier(0.12, 0.9, 0.2, 1);
    will-change: transform;
  }
  & .cnt.is-go .cnt__reel {
    transform: translateY(calc(var(--n, 0) * -1em));
  }
  & .chapters .ch__foot {
    margin: 0 var(--gutter);
    padding: 0 0 60px;
    border: 0;
    border-radius: 0;
    background: none;
    @media (min-width: 1080px) {
      position: fixed;
      left: var(--gutter-pc);
      bottom: 36px;
      z-index: 4;
      width: min(34vw, 420px);
      margin: 0;
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }
  }
  & .chapters .mop .ch__foot {
    margin: 28px 0 0;
    @media (min-width: 1080px) {
      margin: 0;
    }
  }
  & .chapters.is-active.is-foot[data-ch="1"] .ch__foot[data-foot="1"],
  & .chapters.is-active.is-foot[data-ch="3"] .ch__foot[data-foot="3"],
  & .chapters.is-active.is-foot[data-ch="6"] .ch__foot[data-foot="6"] {
    @media (min-width: 1080px) {
      opacity: 0.6;
      pointer-events: auto;
    }
  }
  & .chapters .ch__row {
    gap: 0;
    border-radius: var(--radius);
    background: #0a090a;
    overflow: clip;
    @media (min-width: 1080px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      width: 100%;
      max-width: 380px;
      margin-left: auto;
    }
    & + .ch__row {
      margin-top: 20px;
      padding-top: 0;
      border-top: 0;
      @media (min-width: 1080px) {
        margin-top: 24px;
        padding-top: 0;
      }
    }
    & .ch__card--media {
      aspect-ratio: 4 / 3;
      margin-bottom: -40px;
      border-radius: 0;
      mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 55%,
        rgba(0, 0, 0, 0.97) 62%,
        rgba(0, 0, 0, 0.9) 69%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.6) 82%,
        rgba(0, 0, 0, 0.4) 88%,
        rgba(0, 0, 0, 0.22) 93%,
        rgba(0, 0, 0, 0.08) 97%,
        rgba(0, 0, 0, 0) 100%);
    }
    & .ch__text br {
      display: none;
    }
  }
  & .chapters .ch__row-text {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
    padding: 0 24px 30px;
    @media (min-width: 1080px) {
      padding: 0 28px 30px;
    }
  }
  & .chapters .ch__box {
    border-radius: var(--radius);
    background: #0a090a;
    overflow: clip;
    @media (min-width: 1080px) {
      width: 100%;
      max-width: 380px;
      margin-left: auto;
    }
  }
  & .chapters .ch__box-body {
    display: grid;
    gap: 20px;
    padding: 24px 24px 30px;
    @media (min-width: 1080px) {
      padding: 28px 28px 30px;
    }
  }
  & .chapters .ch__box .ch__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: -36px;
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 55%,
      rgba(0, 0, 0, 0.97) 62%,
      rgba(0, 0, 0, 0.9) 69%,
      rgba(0, 0, 0, 0.78) 76%,
      rgba(0, 0, 0, 0.6) 82%,
      rgba(0, 0, 0, 0.4) 88%,
      rgba(0, 0, 0, 0.22) 93%,
      rgba(0, 0, 0, 0.08) 97%,
      rgba(0, 0, 0, 0) 100%);
    & .ch__card {
      border: 0;
      border-radius: 0;
      aspect-ratio: 1 / 1;
    }
    & .ch__card--cap {
      aspect-ratio: 1600 / 1105;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 6px;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        height: 1px;
        background: rgba(255, 255, 255, 0.28);
      }
      & .ch__card-cap {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 28px 8px 10px;
        background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.1) 18%,
          rgba(0, 0, 0, 0.3) 38%,
          rgba(0, 0, 0, 0.52) 58%,
          rgba(0, 0, 0, 0.7) 78%,
          rgba(0, 0, 0, 0.8) 100%);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0;
        text-align: center;
        color: #fff;
        @media (min-width: 1080px) {
          font-size: 14px;
          padding: 36px 12px 14px;
        }
      }
    }
  }
  & .chapters .ch--brush .ch__in {
    @media (min-width: 1080px) {
      padding-bottom: 80px;
    }
  }
  & .chapters .ch__sub {
    margin: 0;
    font-size: var(--fs-card);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.05em;
  }
  & .chapters .ch__text--sm {
    font-size: var(--fs-body);
    line-height: 1.9;
  }
  & .chapters .ch__pair {
    @media (min-width: 1080px) {
      width: 100%;
      max-width: 380px;
      margin-left: auto;
      gap: 10px;
    }
  }
  & .chapters .ch__in.ch-ai__rows, & .chapters .ch-ai__rows {
    @media (min-width: 1080px) {
      padding-top: 40px;
    }
  }
  & .chapters .ch__stat {
    display: grid;
    gap: 14px;
    margin-bottom: 10px;
    @media (min-width: 1080px) {
      gap: 20px;
      margin-bottom: 16px;
    }
  }
  & .chapters .ch__stat-label {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 20px);
    letter-spacing: -0.05em;
  }
  & .chapters .ch__stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    font-family: var(--font-en);
    line-height: 0.85;
  }
  & .chapters .ch__stat-num {
    font-size: clamp(76px, 9.5vw, 150px);
    letter-spacing: -0.05em;
  }
  & .chapters .ch__stat-more {
    padding-left: 6px;
    font-family: var(--font-head);
    font-weight: 300;
    font-size: clamp(20px, 2.6vw, 40px);
    letter-spacing: -0.05em;
  }
  & .chapters .ch__stat-pre {
    padding-right: 8px;
    font-family: var(--font-head);
    font-weight: 300;
    font-size: clamp(20px, 2.6vw, 40px);
    letter-spacing: -0.05em;
  }
  & .kv-sec.is-dark .kv__labels {
    color: rgba(255, 255, 255, 0.72);
  }
  /* [C] ── 1b. KV 継続パート（理由 3 段落・分解スクラブ） ── */
  & .kv__reasons {
    position: relative;
    z-index: 3;
  }
  html.kv-v1 & .kv__reasons,
  html.kv-v1 & .kv__rscrim,
  html.kv-v1 & .kv__door {
    display: none;
  }
  & .kv__rstep {
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: 100svh;
    padding: 0 var(--gutter);
    text-align: center;
    @media (min-width: 1080px) {
      padding: 0 var(--gutter-pc);
    }
  }
  & .kv__rstep--door {
    min-height: 260svh;
  }
  & .kv__rbox {
    position: relative;
    display: grid;
    gap: 28px;
    max-width: 760px;
    opacity: calc(1 - min(1, max(var(--pdv, 0) * 4, (var(--zi, 0) - 0.4) * 1.8)));
    @media (min-width: 1080px) {
      gap: 40px;
    }
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      width: 220vw;
      height: 120svh;
      background:
        radial-gradient(ellipse closest-side at 50% 50%, rgba(120, 232, 250, 0.16) 0%, rgba(120, 232, 250, 0.13) 10%, rgba(120, 232, 250, 0.09) 22%, rgba(120, 232, 250, 0.055) 35%, rgba(120, 232, 250, 0.03) 48%, rgba(120, 232, 250, 0.014) 62%, rgba(120, 232, 250, 0.005) 78%, rgba(120, 232, 250, 0) 100%),
        radial-gradient(ellipse closest-side at 50% 55%, rgba(0, 120, 170, 0.34) 0%, rgba(0, 120, 170, 0.3) 9%, rgba(0, 120, 170, 0.24) 19%, rgba(0, 120, 170, 0.17) 30%, rgba(0, 120, 170, 0.11) 42%, rgba(0, 120, 170, 0.065) 55%, rgba(0, 120, 170, 0.032) 68%, rgba(0, 120, 170, 0.012) 82%, rgba(0, 120, 170, 0.003) 92%, rgba(0, 120, 170, 0) 100%);
      background-size: 60% 55%, 100% 100%;
      background-position: 50% 48%, 50% 50%;
      background-repeat: no-repeat;
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: opacity 2s ease-out;
      pointer-events: none;
      @media (min-width: 1080px) {
        width: 130vw;
        height: 130svh;
      }
    }
    &.is-in::before {
      opacity: 1;
    }
    &.is-in .kv__rline > span {
      opacity: 1;
      transform: none;
    }
  }
  & .kv__rtext {
    margin: 0;
    font-size: clamp(20px, 2.3vw, 34px);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.02em;
  }
  & .kv__rbox--intro .kv__rtext {
    font-size: clamp(28px, 7.7vw, 31px);
    line-height: 1.55;
    @media (min-width: 1080px) {
      font-size: clamp(20px, 2.3vw, 34px);
      line-height: 1.95;
    }
  }
  & .kv__rline {
    display: block;
    overflow: hidden;
    & > span {
      display: inline-block;
      opacity: 0;
      transform: translateY(105%);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: calc(var(--i, 0) * 0.16s);
    }
  }
  & .kv__rscrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform: translateY(calc((1 - var(--scr, 0)) * 100%));
    will-change: transform;
    background: linear-gradient(to top,
      rgba(8, 8, 8, 1) 0%,
      rgba(8, 8, 8, 1) 22%,
      rgba(8, 8, 8, 0.97) 34%,
      rgba(8, 8, 8, 0.9) 44%,
      rgba(8, 8, 8, 0.78) 54%,
      rgba(8, 8, 8, 0.6) 64%,
      rgba(8, 8, 8, 0.4) 74%,
      rgba(8, 8, 8, 0.22) 84%,
      rgba(8, 8, 8, 0.08) 93%,
      rgba(8, 8, 8, 0) 100%);
  }
  & .kv__cut {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #080808;
    opacity: var(--cut, 0);
    pointer-events: none;
  }
  & .kv-sec.is-dark .kv__final::before {
    background: linear-gradient(to top,
      rgba(8, 8, 8, 1) 0%,
      rgba(8, 8, 8, 1) 30%,
      rgba(8, 8, 8, 0.92) 40%,
      rgba(8, 8, 8, 0.78) 50%,
      rgba(8, 8, 8, 0.6) 60%,
      rgba(8, 8, 8, 0.42) 70%,
      rgba(8, 8, 8, 0.26) 80%,
      rgba(8, 8, 8, 0.12) 90%,
      rgba(8, 8, 8, 0.04) 96%,
      rgba(8, 8, 8, 0) 100%);
  }
  & .kv__door {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    margin: 0;
    padding: 0 var(--gutter);
    font-size: var(--fs-chapter);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
    pointer-events: none;
    transform: translateY(calc(var(--door-up, 0px) * -1));
    will-change: transform;
    @media (min-width: 1080px) {
      padding: 0 var(--gutter-pc);
    }
    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 120vw;
      height: 70svh;
      transform: translate(-50%, -50%);
      opacity: var(--pd-sub, 0);
      background: radial-gradient(ellipse 50% 50% at 50% 50%,
        rgba(8, 8, 8, 0.62) 0%,
        rgba(8, 8, 8, 0.56) 14%,
        rgba(8, 8, 8, 0.46) 28%,
        rgba(8, 8, 8, 0.34) 42%,
        rgba(8, 8, 8, 0.22) 56%,
        rgba(8, 8, 8, 0.12) 70%,
        rgba(8, 8, 8, 0.05) 84%,
        rgba(8, 8, 8, 0.01) 94%,
        rgba(8, 8, 8, 0) 100%);
    }
    & .kv__door-title {
      position: relative;
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(34px, 8.4vw, 52px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: 0;
      -webkit-text-stroke: 0.4px currentColor;
      @media (min-width: 1080px) {
        font-size: clamp(56px, 5.4vw, 92px);
        line-height: 1.2;
      }
      & .kv__rline {
        display: block;
        overflow: hidden;
        margin: -0.1em -0.1em;
        padding: 0.1em 0.1em;
        & > span {
          display: block;
          opacity: 1;
          transform: translateY(110%);
          transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
          transition-delay: calc(var(--i, 0) * 80ms);
        }
      }
    }
    & .kv__door-sub {
      position: relative;
      margin: 22px 0 0;
      font-size: clamp(14px, 3.6vw, 16px);
      line-height: 1.9;
      letter-spacing: -0.02em;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
      opacity: var(--pd-sub, 0);
      transform: translateY(calc((1 - var(--pd-sub, 0)) * 14px));
      @media (min-width: 1080px) {
        margin-top: 32px;
        font-size: clamp(17px, 1.6vw, 24px);
      }
    }

  }
  & .kv-sec.is-door-in .kv__door-title .kv__rline > span {
    transform: none;
  }
  & .chapter--cyclone {
    display: none;
  }
  html.kv-v1 & .chapter--cyclone {
    display: grid;
  }
  & .chapter .chapter__media img.chapter__poster--still {
    opacity: 0.82;
  }
  /* [A] ── 共通: グレイン / ニュアンスグラデ ── */
  &.is-nograin {
    --grain: none;
    --nu-blue: none;
    --nu-cyan: none;
    --nu-light: none;
  }
  & .kv-sec .kv {
    background-color: #080808;
    background-image: none;
    background-size: var(--grain-size);
    background-position: 0 0;
    background-repeat: repeat;
    @media (min-width: 1080px) {
      background-image: var(--grain), var(--nu-blue), var(--nu-cyan);
      background-repeat: repeat, no-repeat, no-repeat;
      background-size: var(--grain-size), 98vw 56vw, 64vw 37vw;
      background-position: 0 0, 88% 20%, -6% 104%;
    }
  }
  & .motion .motion__stage::before {
    background-image: var(--grain), var(--nu-blue);
    background-size: var(--grain-size), 168vw 96vw;
    background-position: 0 0, -10% 100%;
    background-repeat: repeat, no-repeat;
    @media (min-width: 1080px) {
      background-size: var(--grain-size), 101vw 58vw;
      background-position: 0 0, 4% 110%;
    }
  }
  & .features {
    background-image: var(--grain), var(--nu-blue);
    background-size: var(--grain-size), 154vw 88vw;
    background-position: 0 0, -20% 0;
    background-repeat: repeat, no-repeat;
    @media (min-width: 1080px) {
      background-size: var(--grain-size), 84vw 48vw;
      background-position: 0 0, -4% 0;
    }
  }
  & .chapter {
    background-image: var(--grain), var(--nu-blue);
    background-size: var(--grain-size), 154vw 88vw;
    background-position: 0 0, 110% 0;
    background-repeat: repeat, no-repeat;
    @media (min-width: 1080px) {
      background-size: var(--grain-size), 78vw 45vw;
      background-position: 0 0, 104% 0;
    }
  }
  & .reasons {
    background-image: var(--grain), var(--nu-blue), var(--nu-cyan);
    background-size: var(--grain-size), 168vw 96vw, 112vw 64vw;
    background-position: 0 0, 110% 100%, -20% 0;
    background-repeat: repeat, no-repeat, no-repeat;
    @media (min-width: 1080px) {
      background-size: var(--grain-size), 90vw 51vw, 56vw 32vw;
      background-position: 0 0, 104% 104%, -6% -10%;
    }
  }
  & .notes, & .lineup {
    background-image: var(--grain);
    background-size: var(--grain-size);
    background-repeat: repeat;
  }
  & .series {
    background-image: var(--grain), var(--nu-light);
    background-size: var(--grain-size), 168vw 96vw;
    background-position: 0 0, -20% -20%;
    background-repeat: repeat, no-repeat;
    @media (min-width: 1080px) {
      background-size: var(--grain-size), 98vw 56vw;
      background-position: 0 0, -8% -30%;
    }
  }
  & .care {
    background-image: var(--grain);
    background-size: var(--grain-size);
    background-repeat: repeat;
  }
}

/* [C] ── チャットウィジェット非表示（この LP のみ） ── */
html:has(.page-eufy-e35) body #ch-plugin,
html:has(.page-eufy-e35) body #ch-plugin-entry,
html:has(.page-eufy-e35) body [id^="ch-plugin"],
html:has(.page-eufy-e35) body shulex-chatbot-lancher,
html:has(.page-eufy-e35) body shulex-chatbot-lancher > button {
  display: none !important;
}
@property --rise {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes e35-ch-wipe-up {
  0% { mask-position: 0 0%; }
  100% { mask-position: 0 100%; }
}
@keyframes e35-ch-wipe-down {
  0% { mask-position: 0 100%; }
  100% { mask-position: 0 0%; }
}
html:has(.page-eufy-e35) .v2-header-sticky.is-lp-hidden:not(.is-active),
html:has(.page-eufy-e35) .v2-header.is-lp-hidden:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
html:has(.page-eufy-e35) {
  overflow-anchor: none;
  & .v2-header-search.-sp,
  & .v2-header-sp-tags {
    display: none !important;
  }
  & .v2-header {
    height: 45px;
    @media (min-width: 1080px) {
      height: auto;
    }
  }
}


.page-eufy-e35 {
  & .kv__rvideo {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    background: #080808;
    & .kv__rvideo-el {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(8, 8, 8, 0.72) 0%,
        rgba(8, 8, 8, 0.62) 14%,
        rgba(8, 8, 8, 0.5) 28%,
        rgba(8, 8, 8, 0.4) 42%,
        rgba(8, 8, 8, 0.34) 56%,
        rgba(8, 8, 8, 0.32) 70%,
        rgba(8, 8, 8, 0.36) 84%,
        rgba(8, 8, 8, 0.42) 100%);
    }
  }
  & .kv__rstep--video {
    display: none;
    position: relative;
    overflow: clip;
    & .kv__rbox {
      position: relative;
      z-index: 1;
      max-width: 900px;
    }
  }
  & .kv__rtitle {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(28px, 3.4vw, 50px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }
  & .kv__rtext--sub {
    letter-spacing: -0.02em;
  }
  & .kv__rbox--video .kv__rline {
    margin-top: -0.4em;
    padding-top: 0.4em;
    & > span {
      display: block;
      opacity: 1;
      transform: translateY(108%);
      transition: none;
    }
  }
  & .kv__rbox--video.is-in .kv__rline > span {
    transform: none;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 260ms);
  }
}
html.is-still {
  & .page-eufy-e35 {
    & .kv-sec .kv,
    & .kv__scroller {
      display: none;
    }
    & .motion__scroller {
      height: calc(140vh + 25svh);
      @media (min-width: 1080px) {
        height: calc(250vh + 25svh);
      }
    }
    & .daily__space {
      height: 190svh;
      @media (min-width: 1080px) {
        height: 220svh;
      }
    }
    & .kv-still {
      display: grid;
      position: relative;
      background: #080808;
      color: #fff;
      @media (min-width: 1080px) {
        display: block;
        height: 100svh;
        min-height: 560px;
        overflow: clip;
      }
    }
    & .kv-still__pic {
      display: block;
      order: 2;
      @media (min-width: 1080px) {
        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 32%;
          pointer-events: none;
          background: linear-gradient(to bottom,
            rgba(8, 8, 8, 0) 0%,
            rgba(8, 8, 8, 0.03) 10%,
            rgba(8, 8, 8, 0.1) 22%,
            rgba(8, 8, 8, 0.22) 34%,
            rgba(8, 8, 8, 0.38) 46%,
            rgba(8, 8, 8, 0.55) 58%,
            rgba(8, 8, 8, 0.72) 70%,
            rgba(8, 8, 8, 0.86) 81%,
            rgba(8, 8, 8, 0.95) 91%,
            #080808 100%);
        }
      }
      & img {
        display: block;
        width: 100%;
        height: auto;
        @media (min-width: 1080px) {
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
        }
      }
      @media (min-width: 1080px) {
        position: absolute;
        inset: 0;
      }
    }
    & .kv-still__copy {
      order: 1;
      display: grid;
      gap: 14px;
      padding: 72px var(--gutter) 36px;
      text-align: center;
      @media (min-width: 1080px) {
        position: absolute;
        z-index: 1;
        left: max(110px, calc(50% - 744px));
        top: 44%;
        transform: translateY(-50%);
        padding: 0;
        gap: 22px;
        text-align: left;
      }
    }
    & .kv-still__title {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(29px, 7.3vw, 55px);
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.02em;
      @media (min-width: 1080px) {
        font-size: clamp(40px, 3.74vw, 60px);
      }
    }
    & .kv-still__copy .kv-still__title.kv-still__title--series {
      font-size: clamp(19px, 5.2vw, 30px);

      @media (min-width: 1080px) {
        font-size: clamp(30px, 2.9vw, 46px);
      }
    }
    & .kv-still__sub {
      margin: 0;
      font-size: clamp(13px, 3.4vw, 16px);
      line-height: 1.7;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.82);
      @media (min-width: 1080px) {
        font-size: clamp(14px, 1.1vw, 18px);
      }
    }
  }
}
html.is-still,
html.is-anime {
  & .page-eufy-e35 {
    & .motion__stage .vis {
      transition: opacity 0.25s ease;
    }
    & .item[data-i="1"] {
      @media (min-width: 1080px) {
        top: 40px;
        bottom: 56px;
        grid-template-columns: minmax(0, 30vw) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: 40px;
        row-gap: 28px;
        & .item__title {
          grid-row: 1;
          align-self: end;
        }
        & .item__text {
          grid-row: 2;
          align-self: end;
        }
        & .item__compare {
          padding-right: 0;
          gap: 32px;
          justify-self: center;
          align-self: center;
        }
        & .item__compare-title {
          font-size: 26px;
        }
        & .item__compare-row {
          gap: 40px;
        }
        & .item__compare-fig {
          width: min(46svh, 480px);
          gap: 22px;
          & img {
            width: min(46svh, 480px);
            height: min(46svh, 480px);
          }
          & figcaption {
            font-size: 21px;
            &.is-en {
              font-size: 30px;
              font-weight: 500;
              line-height: 1;
            }
          }
        }
        & .item__compare-fig:not(.item__compare-fig--anker) img {
          filter: grayscale(0.35) brightness(0.92);
        }
        & .item__compare-fig--anker {
          transform: scale(calc(1 + var(--ba02, 0) * 0.04));
          & img {
            filter: drop-shadow(0 0 calc(var(--ba02, 0) * 44px) rgba(0, 203, 235, 0.55));
          }
        }
        & .item__compare-arrow {
          transform: scale(1.8);
          opacity: calc(0.4 + var(--ba02, 0) * 0.6);
        }
      }
    }
    & .motion.is-hide-vis .vis {
      opacity: 0;
    }
    & .item[data-i="2"] {
      @media (min-width: 1080px) {
        top: 40px;
        bottom: 56px;
        right: 40px;
        width: auto;
        max-width: none;
        align-content: end;
        justify-items: start;
      }
      & .item__body {
        display: contents;
      }
      & .item__title {
        @media (min-width: 1080px) {
          width: max-content;
        }
        & .nb {
          white-space: nowrap;
        }
      }
      & .item__text {
        @media (min-width: 1080px) {
          width: auto;
          min-width: 0;
          max-width: 36vw;
        }
      }
      & .item__badge {
        order: -1;
        width: 96px;
        margin-bottom: 6px;
        @media (min-width: 1080px) {
          order: 0;
          margin-bottom: 0;
          position: absolute;
          top: 0;
          right: 0;
          width: 190px;
        }
      }
    }
    & .motion__no {
      @media (min-width: 1080px) {
        top: 40px;
        left: 40px;
        right: auto;
        transform: none;
      }
    }
    & .item {
      @media (min-width: 1080px) {
        top: auto;
        bottom: 56px;
        transform: translateY(14px);
      }
      &.is-on {
        @media (min-width: 1080px) {
          transform: none;
        }
      }
    }
  }
}
html.is-main,
html.is-anime {
  & .page-eufy-e35 {
    & .kv__cyc-sub .kv__rline > span {
      opacity: 1;
      transform: none;
      transition: none;
    }
    & .kv__scroller {
      height: 0;
    }
    & .kv__rstep--door {
      display: none;
    }
    & .kv {
      position: relative;
    }
    & .kv__rstep--intro {
      display: block;
      justify-items: normal;
      position: relative;
      min-height: 135svh;
      padding: 0;
      overflow: visible;
      & .kv__intro-pin {
        position: sticky;
        top: 0;
        width: 100%;
        justify-self: stretch;
        height: 100svh;
        display: grid;
        place-items: center;
        overflow: clip;
        box-sizing: border-box;
        padding: 0 16px;
        @media (min-width: 1080px) {
          height: var(--stage);
          padding: 0 var(--gutter-pc);
        }
      }
      & .kv__rvideo {
        transform: scale(var(--ix, 0.8));
        transform-origin: 50% 50%;
        will-change: transform;
      }
      & .kv__rbox {
        position: relative;
        z-index: 1;
        &::before {
          display: none;
        }
      }
      & .kv__rbox--intro .kv__rline > span {
        opacity: 1;
        transform: none;
        transition: none;
      }
      & .kv__rvideo {
        & .kv__rvideo-el {
          filter: brightness(0.82);
        }
        &::after {
          background: linear-gradient(to bottom,
            rgba(8, 8, 8, 0.42) 0%,
            rgba(8, 8, 8, 0.42) 58%,
            rgba(8, 8, 8, 0.48) 66%,
            rgba(8, 8, 8, 0.58) 73%,
            rgba(8, 8, 8, 0.7) 80%,
            rgba(8, 8, 8, 0.82) 87%,
            rgba(8, 8, 8, 0.92) 93%,
            rgba(8, 8, 8, 0.98) 97%,
            #080808 100%);
        }
      }
    }
    & .kv__rvideo,
    & .kv__rstep--video {
      display: block;
    }
    & .kv__rstep--video {
      display: grid;
      align-content: start;
      justify-items: stretch;
      gap: 0;
      min-height: 0;
      padding: 0;
      background: #080808;
    }
    & .kv__cyc-stage {
      position: relative;
      display: grid;
      place-items: center;
      height: 56svh;
      min-height: 320px;
      padding: 0 var(--gutter);
      @media (min-width: 1080px) {
        height: 62svh;
        padding: 0 var(--gutter-pc);
      }
      & .kv__rvideo {
        &::after {
          background: linear-gradient(to bottom,
            #080808 0%,
            rgba(8, 8, 8, 0.97) 3%,
            rgba(8, 8, 8, 0.9) 6%,
            rgba(8, 8, 8, 0.78) 10%,
            rgba(8, 8, 8, 0.62) 14%,
            rgba(8, 8, 8, 0.45) 18%,
            rgba(8, 8, 8, 0.3) 22%,
            rgba(8, 8, 8, 0.17) 26%,
            rgba(8, 8, 8, 0.08) 30%,
            rgba(8, 8, 8, 0.02) 34%,
            rgba(8, 8, 8, 0) 38%,
            rgba(8, 8, 8, 0) 100%),
          linear-gradient(to bottom,
            rgba(8, 8, 8, 0) 0%,
            rgba(8, 8, 8, 0) 72%,
            rgba(8, 8, 8, 0.06) 77%,
            rgba(8, 8, 8, 0.16) 82%,
            rgba(8, 8, 8, 0.3) 86%,
            rgba(8, 8, 8, 0.48) 90%,
            rgba(8, 8, 8, 0.68) 94%,
            rgba(8, 8, 8, 0.86) 97%,
            rgba(8, 8, 8, 0.96) 99%,
            #080808 100%);
        }
      }
    }
    & .kv__cyc-title {
      justify-self: center;
      width: 100%;
      padding: 136px var(--gutter) 112px;
      @media (min-width: 1080px) {
        padding: 260px var(--gutter-pc) 220px;
      }
      & .kv__rtitle {
        font-size: clamp(28px, 7.7vw, 31px);
        line-height: 1.55;
        @media (min-width: 1080px) {
          font-size: clamp(34px, 4.6vw, 76px);
          line-height: 1.35;
        }
      }
      & .kv__rline > span {
        opacity: 0;
        transform: none;
        transition: opacity 1.2s ease-out;
        transition-delay: calc(var(--i, 0) * 240ms);
      }
      &.is-in .kv__rline > span {
        opacity: 1;
      }
    }
    & .kv__cyc-title::before,
    & .kv__cyc-sub::before {
      display: none;
    }
    & .kv__cyc-sub {
      justify-self: center;
      width: 100%;
      & .kv__rtext {
        font-size: clamp(28px, 7.7vw, 31px);
        line-height: 1.55;
        @media (min-width: 1080px) {
          font-size: clamp(21px, 2.8vw, 44px);
          line-height: 1.7;
        }
      }
      padding: 4px var(--gutter) 96px;
      @media (min-width: 1080px) {
        padding: 8px var(--gutter-pc) 160px;
      }
    }
    & .motion {
      margin-top: 0;
    }
    & .motion__stage::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 14svh;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to bottom,
        rgba(8, 8, 8, 0.9) 0%,
        rgba(8, 8, 8, 0.78) 10%,
        rgba(8, 8, 8, 0.62) 22%,
        rgba(8, 8, 8, 0.46) 35%,
        rgba(8, 8, 8, 0.32) 48%,
        rgba(8, 8, 8, 0.2) 61%,
        rgba(8, 8, 8, 0.11) 74%,
        rgba(8, 8, 8, 0.05) 86%,
        rgba(8, 8, 8, 0.01) 95%,
        rgba(8, 8, 8, 0) 100%);
    }
  }
}
html.is-anime {
  & .page-eufy-e35 {
    & .kv {
      position: sticky;
      transform-origin: 50% 62%;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 46%;
        z-index: 4;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.6s ease;
        background: linear-gradient(to bottom,
          rgb(52, 55, 60) 0%,
          rgba(52, 55, 60, 0.94) 8%,
          rgba(52, 55, 60, 0.84) 17%,
          rgba(52, 55, 60, 0.7) 27%,
          rgba(52, 55, 60, 0.54) 38%,
          rgba(52, 55, 60, 0.38) 50%,
          rgba(52, 55, 60, 0.24) 62%,
          rgba(52, 55, 60, 0.13) 74%,
          rgba(52, 55, 60, 0.05) 86%,
          rgba(52, 55, 60, 0.01) 94%,
          rgba(52, 55, 60, 0) 100%);
      }
    }
    & .kv-sec.is-door-slide .kv::before {
      opacity: 0;
    }
    & .kv__rbox--intro {
      opacity: 1;
    }
    & .kv__scroller {
      height: 230vh;
    }
    & .kv__final-title {
      font-size: clamp(26px, 3.1vw, 46px);
    }
    & .kv__rscrim {
      transform: none;
      opacity: var(--scr, 0);
      background:
        var(--grain) 0 0 / var(--grain-size) repeat,
        radial-gradient(ellipse 70% 46% at 50% 92%,
          rgba(30, 72, 120, 0.42) 0%,
          rgba(30, 72, 120, 0.33) 16%,
          rgba(30, 72, 120, 0.24) 32%,
          rgba(30, 72, 120, 0.16) 48%,
          rgba(30, 72, 120, 0.09) 64%,
          rgba(30, 72, 120, 0.04) 80%,
          rgba(30, 72, 120, 0.01) 92%,
          rgba(30, 72, 120, 0) 100%),
        linear-gradient(to bottom,
        rgba(8, 8, 8, 0.5) 0%,
        rgba(8, 8, 8, 0.54) 14%,
        rgba(8, 8, 8, 0.6) 27%,
        rgba(8, 8, 8, 0.68) 39%,
        rgba(8, 8, 8, 0.77) 50%,
        rgba(8, 8, 8, 0.85) 61%,
        rgba(8, 8, 8, 0.92) 72%,
        rgba(8, 8, 8, 0.97) 83%,
        rgba(8, 8, 8, 1) 92%,
        #080808 100%);
    }
    & .kv__rstep--intro {
      min-height: 46svh;
      & .kv__intro-pin {
        position: relative;
        height: auto;
        min-height: 46svh;
        & .kv__rbox {
          position: relative;
          z-index: 1;
        }
      }
      & .kv__rvideo {
        display: none;
      }
      & .kv__rbox--intro .kv__rline > span {
        opacity: 1;
        transform: translateY(108%);
        transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(var(--i, 0) * 110ms);
      }
      & .kv__rbox--intro.is-in .kv__rline > span {
        transform: none;
      }
    }
    & .kv__rstep--door {
      display: grid;
      position: relative;
      min-height: 220svh;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -70svh;
        height: 140svh;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom,
          rgba(52, 55, 60, 0) 0%,
          rgba(52, 55, 60, 0.02) 10%,
          rgba(52, 55, 60, 0.07) 20%,
          rgba(52, 55, 60, 0.15) 30%,
          rgba(52, 55, 60, 0.26) 40%,
          rgba(52, 55, 60, 0.36) 47%,
          rgba(52, 55, 60, 0.4) 50%,
          rgba(52, 55, 60, 0.36) 53%,
          rgba(52, 55, 60, 0.26) 60%,
          rgba(52, 55, 60, 0.15) 70%,
          rgba(52, 55, 60, 0.07) 80%,
          rgba(52, 55, 60, 0.02) 90%,
          rgba(52, 55, 60, 0) 100%);
      }
    }
    & .kv__rstep--intro .kv__rbox--intro {
      position: relative;
      z-index: 2;
    }
    & .kv__rstep--video {
      display: none;
    }
    & .motion {
      margin-top: -140svh;
    }
    & .motion__stage {
      background: #080808;
      clip-path: circle(calc(var(--mos, 1) * 75%) at 50% 50%);
    }
    & .motion__stage::after {
      display: none;
    }
  }
}
html.is-main:not(.is-still):not(.is-anime) {
  & .page-eufy-e35 {
    & .kv {
      position: sticky;
    }
    & .kv__scroller {
      height: 70vh;
    }
  }
}

@keyframes chSubIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.is-kvanim {
  & .page-eufy-e35 {
    & .kv-still {
      display: none;
    }
    & .kv-sec .kv {
      display: block;
      position: sticky;
    }
    & .kv__scroller {
      display: block;
      height: 170vh;
      @media (min-width: 1080px) {
        height: 210vh;
      }
    }
    & .kv__pin {
      margin-bottom: 48px;
      @media (min-width: 1080px) {
        margin-bottom: 96px;
      }
    }
    & .kv__final-title {
      font-size: clamp(24px, 2.5vw, 40px);
      line-height: 1.25;
    }
    & .kv__final-copy {
      top: var(--kv-copy-top, auto);
      bottom: var(--kv-copy-bot, 40px);
      gap: 12px;
      @media (min-width: 1080px) {
        top: auto;
        bottom: 5vh;
        gap: 12px;
      }
    }
  }
}

html.is-main {
  & .page-eufy-e35 {
    & .kv__rstep--intro {
      min-height: 300svh;
    }
    & .kv__rstep--video {
      z-index: 3;
      margin-top: -200svh;
      background: transparent;
    }
    & .kv__cyc-head {
      height: 540svh;
      @media (min-width: 1080px) {
        height: 600svh;
      }
    }
    & .motion {
      z-index: 4;
      margin-top: calc(-1 * 100svh);
    }
    & .motion::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      z-index: 1;
      height: 40svh;
      pointer-events: none;
      background: linear-gradient(to bottom,
        rgba(8, 8, 8, 0) 0%,
        rgba(8, 8, 8, 0.03) 12%,
        rgba(8, 8, 8, 0.1) 24%,
        rgba(8, 8, 8, 0.21) 35%,
        rgba(8, 8, 8, 0.36) 46%,
        rgba(8, 8, 8, 0.53) 57%,
        rgba(8, 8, 8, 0.7) 68%,
        rgba(8, 8, 8, 0.84) 79%,
        rgba(8, 8, 8, 0.94) 90%,
        #080808 100%);
    }
    & .kv__cyc-headpin {
      position: sticky;
      top: 0;
      display: grid;
      place-items: center;
      height: 100svh;
      box-sizing: border-box;
      @media (min-width: 1080px) {
        height: var(--stage);
      }
      overflow: clip;
      background: #080808;
      opacity: var(--cc, 0);
      & .kv__rvideo {
        display: block;
        inset: 0 0 auto;
        height: 50%;
        @media (min-width: 1080px) {
          inset: 0;
          height: auto;
        }
        &::after {
          display: none;
        }
      }
    }
    & .kv__cyc-black {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: #080808;
      opacity: calc(1 - var(--cf, 0));
    }
    & .kv__cyc-title,
    & .kv__cyc-sub {
      grid-area: 1 / 1;
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: none;
      text-align: center;
    }
    & .kv__cyc-title {
      padding: 0 16px;
      opacity: calc(1 - var(--ct, 0));
      @media (min-width: 1080px) {
        padding: 0 var(--gutter-pc);
      }
    }
    & .kv__cyc-sub {
      align-self: end;
      display: grid;
      align-content: center;
      height: 50%;
      box-sizing: border-box;
      padding: 0 16px 48px;
      opacity: var(--cs, 0);
      transform: translateY(calc(var(--out, 0) * -1px));
      text-shadow: none;
      & .kv__rtext {
        font-size: clamp(19px, 5.6vw, 22px);
        line-height: 1.5;
        @media (min-width: 1080px) {
          font-size: clamp(21px, 2.8vw, 44px);
          line-height: 1.7;
        }
      }
      @media (min-width: 1080px) {
        display: block;
        height: auto;
        padding: 0 var(--gutter-pc) 12svh;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
      }
    }
    & .kv__rbox--intro .kv__rline, & .kv__cyc-title .kv__rline, & .kv__cyc-sub .kv__rline {
      display: inline;
      overflow: visible;
      margin: 0;
      padding: 0;
      & > span {
        display: inline;
        opacity: 1;
        transform: none;
        transition: none;
      }
    }
    & .kv__cyc-title {
      --dim: 0.28;
      --n: 2;
      --p: var(--pt, 0);
      & .kv__rline > span {
        opacity: clamp(var(--dim), calc(var(--dim) + (var(--p, 0) * var(--n) - var(--i, 0)) * (1 - var(--dim))), 1);
      }
    }
  }
}
html.is-kvanim {
  & .page-eufy-e35 {
    & .kv__gl, & .kv__fx, & .kv__labels {
      @media (min-width: 1080px) {
        transform: translateY(calc(var(--kfin, 0) * -8svh));
      }
    }
  }
}

.page-eufy-e35 .chapters.is-fix-sp {
  --gutter: 20px;
  & .chapters__fix-stick {
    height: 100dvh;
  }
  & .chapters__side {
    padding-top: 16px;
    padding-right: 20px;
    background: none;
  }
  & .chapters__no, & .ch__no {
    flex: none;
    font-family: var(--font-jp);
    font-size: 21px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: 0.02em;
  }
  & .chapters__side .chapters__title {
    font-size: 21px;
    line-height: 44px;
    letter-spacing: -0.02em;
    & sup {
      font-size: 0.55em;
    }
    white-space: nowrap;
    & .chapters__title-line, & .chapters__title-in {
      display: inline;
    }
  }
  --photo-fade: linear-gradient(to bottom,
    rgba(8, 8, 8, 0.2) 0%,
    rgba(8, 8, 8, 0.2) 30%,
    rgba(8, 8, 8, 0.24) 38%,
    rgba(8, 8, 8, 0.32) 46%,
    rgba(8, 8, 8, 0.43) 54%,
    rgba(8, 8, 8, 0.56) 62%,
    rgba(8, 8, 8, 0.69) 70%,
    rgba(8, 8, 8, 0.81) 78%,
    rgba(8, 8, 8, 0.9) 86%,
    rgba(8, 8, 8, 0.96) 93%,
    rgba(8, 8, 8, 0.99) 97%,
    #080808 100%);
  & .chapters__bg-item:not([data-bg="beige"]), & .ch__in .ch__subbg, & .ch__mainbg {
    bottom: auto;
    height: calc(var(--vhs, 100dvh) * 0.75);
  }
  & .chapters__bg-item[data-bg="5"], & .ch__in[data-pin="5"] .ch__mainbg, & .ch__in[data-pin="5"] .ch__subbg {
    height: calc(var(--vhs, 100dvh) * 0.65);
    overflow: clip;
    &::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: var(--photo-fade);
    }
  }
  & .chapters__bg-item.is-on, &.is-down .chapters__bg-item.is-on {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    transition: opacity 0.45s cubic-bezier(0.33, 0, 0.2, 1), --rise 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  & .chapters__fix-stick .ch__in[data-sub] > .ch__head, & .chapters__fix-stick .ch__in[data-sub] > .mop__hero, & .chapters__fix-stick .ch__in[data-sub] .ch__row, & .chapters__fix-stick .ch__in[data-sub] .mop__card {
    animation-duration: 0.35s;
  }
  & .chapters__trail {
    display: block;
    left: -70%;
    width: 240%;
    height: 100%;
    opacity: 0.75;
    transform: none;
  }
  & .chapters__bg-item[data-bg="1"] {
    overflow: clip;
  }
  & .chapters__fix-stick .ch__subbg--fig figure {
    height: 62%;
  }
  & .chapters__fix-stick .ch__subbg--fig .mop__pin {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    font-size: 13px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
    &.mop__pin--1 { left: 36%; top: 67%; }
    &.mop__pin--2 { left: 40%; top: 85%; }
    &.mop__pin--3 { left: 30%; top: 82%; }
    &.mop__pin--4 { left: 23%; top: 54%; }
  }
  & .ch__in[data-sub="1"] .mop__card[data-k="1"] .mop__steps {
    grid-template-columns: 1fr;
    gap: 6px;
    & li {
      font-size: 14px;
    }
  }
  & .chapters__bg-item[data-bg^="4"] {
    height: 100dvh;
    &::after {
      display: none;
    }
  }
  & .chapters__pins:not(.chapters__pins--co) {
    display: none;
  }
  &[data-ch="2"] .chapters__fix-stick .ch__in[data-pin="2"] .ch__head .ch__stat,
  &[data-ch="2"] .chapters__fix-stick .ch__in[data-pin="2"] .ch__head .ch__sub-title + .ch__stat {
    display: none;
  }
  & .chapters__co b small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.02em;
    opacity: 1;
    & em {
      font-family: var(--font-en);
      font-style: normal;
      font-size: 30px;
      line-height: 1;
      margin: 0 2px 0 4px;
      color: var(--color-primary);
    }
  }
  & .chapters__bg-item[data-bg^="4"] {
    --zoom: 1;
    background-image: none;
    background-color: #080808;
    & img {
      padding: 10svh 84px 40svh;
      object-position: 50% 50%;
    }
  }
  & .chapters__scrim {
    background: none;
  }
  & .chapters__bg-stick::after {
    display: none;
  }
  background: #080808;
  & .chapters__side-in {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  & .chapters__title {
    font-size: 21px;
    & .chapters__title-in, &.is-out .chapters__title-in, &.is-pre .chapters__title-in {
      transform: none;
      transition: none;
    }
  }
  & .chapters__layout .ch, & .chapters__layout .mop {
    min-height: calc(100svh * 1.5);
    padding-top: 0;
  }
  & .chapters__layout {
    padding-bottom: calc(100svh * 0.8);
  }
  & .chapters__fix-stick .ch__in,
  & .chapters__fix-stick .ch__in[data-pin="1"],
  & .chapters__fix-stick .ch__in[data-pin="3"],
  & .chapters__fix-stick .ch__in[data-pin="5"] {
    --rb-w: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 0;
    padding: 120px var(--gutter) 32px;
    gap: 12px;
    pointer-events: none;
    & > .ch__head, & > .mop__hero, & .ch__row, & .mop__card, &[data-pin="6"] .ch__box, & .ch__tabs {
      width: 100%;
      align-self: stretch;
    }
    & > .ch__head, & > .mop__hero, & .ch__row, & .mop__card {
      max-height: none;
      overflow: visible;
      overscroll-behavior: auto;
    }
    & > .mop__hero {
      min-height: 0;
      padding: 0;
      gap: 16px;
      overflow: visible;
      border-radius: 0;
    }
    & > .ch__head {
      row-gap: 8px;
      & > .ch__text {
        margin-top: 16px;
      }
    }
    & .mop__stat, & .ch__stat {
      gap: 8px;
      padding: 0;
    }
    & .ch__foot {
      margin-top: 16px;
    }
    & .ch__stat-label, & .mop__stat-label, & .ch__sub-title, & .ch__sub, & .mop__card-title {
      font-size: 22px;
      line-height: 1.4;
    }
    & .ch__sub-title, & .ch__sub, & .mop__card-title {
      font-size: 28px;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }
    & .ch__text, & .ch__text--sm, & .mop__stat-text, & .mop__card-text {
      font-size: 16px;
      font-weight: 200;
      line-height: 1.75;
    }
    & .mop__steps li {
      font-size: 16px;
    }
    & .mop__stat-text {
      margin-top: 16px;
    }
    & .ch__stat-num, & .mop__stat-num, & .ch__num b {
      font-size: 60px;
    }
    & .ch__stat-pre, & .ch__stat-more, & .mop__stat-pct, & .mop__stat-more, & .ch__num-pre, & .ch__num-unit {
      font-size: 20px;
    }
    & .ch__head .ch__sub-title + .ch__stat {
      order: -1;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 3px;
      width: 104px;
      height: 104px;
      margin: 0 0 8px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      background: rgba(8, 8, 8, 0.45);
      text-align: center;
      & .ch__stat-label {
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0;
        opacity: 0.8;
      }
      & .ch__stat-value {
        display: grid;
        justify-items: center;
        gap: 2px;
      }
      & .ch__stat-num {
        font-size: 38px;
        line-height: 0.95;
        letter-spacing: -0.02em;
        color: var(--color-primary);
      }
      & .ch__stat-pre, & .ch__stat-more {
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0.02em;
      }
      & .ch__stat-more--stack {
        flex-direction: row-reverse;
        gap: 0;
        margin: 0;
      }
    }
    & .ch__box-body {
      display: grid;
      gap: 8px;
      & .ch__text {
        margin-top: 16px;
      }
    }
    & .ch__before {
      order: -1;
      position: relative;
      display: block;
      width: 150px;
      margin: 0 0 8px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: none;
      backdrop-filter: none;
      overflow: clip;
      & img {
        display: block;
        width: 150px;
        height: 150px;
        aspect-ratio: auto;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        object-fit: cover;
        filter: grayscale(0.3) brightness(0.9);
      }
      & figcaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 22px 8px 8px;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(to bottom,
          rgba(8, 8, 8, 0) 0%,
          rgba(8, 8, 8, 0.12) 20%,
          rgba(8, 8, 8, 0.35) 42%,
          rgba(8, 8, 8, 0.6) 64%,
          rgba(8, 8, 8, 0.78) 84%,
          rgba(8, 8, 8, 0.85) 100%);
        font-size: 11px;
        line-height: 1.35;
        letter-spacing: -0.02em;
        color: #fff;
        &::before {
          display: none;
        }
      }
    }
    & .ch__row-text, & .mop__card-body {
      gap: 8px;
      & .ch__text, & .ch__text--sm, & .mop__card-text {
        margin-top: 16px;
      }
    }
  }
  & .chapters__fix-stick .ch__in[data-pin="5"] {
    & .ba figcaption {
      top: 190px;
      left: var(--gutter);
      font-size: 13px;
      padding: 6px 12px;
    }
    & .ba__fig--after figcaption {
      left: auto;
      right: var(--gutter);
    }
    & .ch__box-body {
      position: absolute;
      left: var(--gutter);
      right: var(--gutter);
      bottom: 32px;
      width: auto;
    }
  }
  &[data-ch="1"] .chapters__fix-stick .ch__in[data-pin="1"],
  &[data-ch="2"] .chapters__fix-stick .ch__in[data-pin="2"],
  &[data-ch="3"] .chapters__fix-stick .ch__in[data-pin="3"],
  &[data-ch="4"] .chapters__fix-stick .ch__in[data-pin="4"],
  &[data-ch="5"] .chapters__fix-stick .ch__in[data-pin="5"],
  &[data-ch="6"] .chapters__fix-stick .ch__in[data-pin="6"] {
    z-index: 2;
    pointer-events: auto;
  }
  & .chapters__fix-stick .ch__in[data-pin="6"] {
    & .ch__box {
      display: flex;
      flex-direction: column;
    }
    & .ch__pair {
      order: 2;
      margin: 28px 0 0;
      -webkit-mask-image: none;
      mask-image: none;
    }
    & .ch__card-cap {
      font-weight: 400;
    }
  }
  & .chapters__fix-stick .ch__in[data-sub] .ch__tabs,
  & .chapters__fix-stick .ch__in[data-sub][data-pin] .ch__tabs {
    position: static;
    inset: auto;
    width: auto;
    order: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  & .chapters__fix-stick .ch__in[data-sub] .ch__tab {
    position: relative;
    width: auto;
    min-height: 48px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 14px 2px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
    overflow: visible;
    text-shadow: none;
    & img {
      display: none;
    }
    & span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 11px;
      line-height: 1.35;
      letter-spacing: -0.01em;
      white-space: normal;
      text-align: left;
      padding: 0;
      border: 0;
      &::before {
        content: none;
      }
    }
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.22);
    }
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      z-index: 1;
      height: 2px;
      background: var(--color-primary);
      transform: scaleX(var(--tp, 0));
      transform-origin: 0 50%;
    }
    &:first-child {
      align-content: normal;
      padding-left: 2px;
      & span {
        padding: 0;
        border: 0;
      }
    }
    & span sup {
      font-size: 0.7em;
      vertical-align: top;
      line-height: 1;
      letter-spacing: 0;
    }
    &.is-on {
      color: #fff;
      & span {
        font-weight: 500;
      }
      &::after {
        background: rgba(0, 203, 235, 0.35);
      }
    }
  }
  & .chapters__rail {
    position: fixed;
    right: 32px;
    top: 76px;
    z-index: 60;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    & a {
      display: none;
      padding: 0;
      font-family: var(--font-jp);
      font-size: clamp(25px, 7.2vw, 30px);
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
      color: #fff;
      text-decoration: none;
      &.is-on {
        display: block;
      }
    }
  }
  &.is-inview .chapters__rail {
    opacity: 1;
  }
  &.is-beige .chapters__rail a {
    color: var(--color-text-dark);
  }
  & .chapters__pins--co {
    display: block;
  }
  & .ch__in[data-pin="4"] .chips {
    display: none;
  }
  & .chapters__co {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--lyp, 0) * 1px);
    height: 0;
    color: #fff;
    & i, & u {
      position: absolute;
      left: calc((var(--lxp, 0) + var(--hxp, 0)) * 1px);
      top: calc(var(--hyp, 0) * 1px);
      width: calc(var(--len, 0) * 1px);
      height: 1px;
      background: rgba(255, 255, 255, 0.5);
      transform-origin: 0 50%;
      rotate: calc(var(--ang, 0) * 1deg);
      transform: scaleX(0);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 120ms + 300ms);
    }
    & u {
      left: calc(var(--lxp, 0) * 1px);
      top: 0;
      width: calc(var(--alen, 0) * 1px);
      rotate: calc(var(--aang, 0) * 1deg);
      transition-delay: calc(var(--i, 0) * 120ms + 150ms);
    }
    & b {
      position: absolute;
      right: calc(100% - var(--lxp, 0) * 1px + 6px);
      top: 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.04em;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(-50%);
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
      transition: opacity 0.4s calc(var(--i, 0) * 120ms);
    }
    &[data-side="r"] b {
      right: auto;
      left: calc(var(--lxp, 0) * 1px + 6px);
    }
  }
  & .chapters__bg-item.is-on .chapters__co {
    & i, & u {
      transform: none;
    }
    & b {
      opacity: 1;
    }
  }
  & .chapters__fix-stick .ch__in.is-stack {
    display: block;
    padding: 0;
    overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, transparent 84px, #000 132px);
    mask-image: linear-gradient(to bottom, transparent 84px, #000 132px);
    & .ch__stack {
      display: grid;
      gap: 40px;
      padding: calc(var(--vhs, 100dvh) * 0.5) var(--gutter) 48px;
      transform: translate3d(0, calc(var(--sy, 0) * -1px), 0);
      will-change: transform;
    }
    & .mop__hero, & .ch__head, & .ch__row, & .mop__card {
      width: 100%;
      max-width: none;
      margin: 0;
    }
    & .mop__hero, & .ch__head {
      min-height: 0;
      padding: 0;
      background: none;
      border-radius: 0;
    }
    & .mop__hero .mop__hero-bg, & .mop__hero .mop__badge {
      display: none;
    }
    & .ba {
      pointer-events: auto;
    }
    & .mop__pin--1 { left: 37.9%; top: 67.2%; }
    & .mop__pin--2 { left: 43.2%; top: 82.2%; }
    & .mop__pin--3 { left: 28.6%; top: 73.3%; }
    & .mop__pin--4 { left: 22.6%; top: 52.2%; }
  }
  &.is-flow {
    & .chapters__bg, & .chapters__fix {
      display: none;
    }
    & .chapters__layout {
      padding-bottom: 0;
      pointer-events: auto;
    }
    & .chapters__layout .ch, & .chapters__layout .mop {
      min-height: 0;
      padding: 0;
    }
    & .chapters__side {
      z-index: 5;
      padding: 18px 14px;
      margin: 0;
      background: rgba(8, 8, 8, 0.62);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
      & .chapters__no {
        font-family: var(--font-en);
        font-size: 22px;
        line-height: 32px;
        letter-spacing: 0.02em;
      }
      & .chapters__side .chapters__title, & .chapters__title {
        font-size: 22px;
        line-height: 32px;
        letter-spacing: 0.02em;
      }
      overflow: visible;
    }
    & .chapters__fixno {
      display: none;
    }
    & .chapters__rail {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      position: fixed;
      inset: auto auto calc(28px + env(safe-area-inset-bottom, 0px)) 12px;
      width: auto;
      height: auto;
      margin: 0;
      padding: 8px 12px 8px 10px;
      border-radius: 999px;
      background: rgba(8, 8, 8, 0.82);
      transform: none;
      z-index: 5;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      & a {
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        gap: 6px;
        font-family: var(--font-jp);
        font-size: 0;
        line-height: 1;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.4);
        text-decoration: none;
        transition: color 0.3s;
        &::before {
          content: "";
          width: 10px;
          height: 1px;
          background: currentColor;
          transition: width 0.3s, background-color 0.3s;
        }
        &.is-on {
          color: #fff;
          font-size: 11px;
          &::before {
            width: 22px;
            background: var(--color-primary);
          }
        }
      }
    }
    &.is-active .chapters__rail {
      opacity: 1;
      pointer-events: auto;
    }
    & .chapters__fixno {
      position: absolute;
      left: 14px;
      top: 100%;
      margin-top: 16px;
      font-family: var(--font-jp);
      font-size: 30px;
      font-weight: 400;
      line-height: 1;
      color: #fff;
      &.is-sw {
        animation: chFixno 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }
    }
    & .ch__no-col {
      display: none;
    }
    & .ch__no-col {
      grid-column: 1;
      grid-row: 1 / -1;
      align-self: start;
      position: sticky;
      z-index: 2;
      top: 90px;
      padding-top: 14px;
      font-family: var(--font-jp);
      font-size: 30px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0;
      color: #fff;
    }
    & .chapters__blk .ch__mainbg {
      display: none;
    }
    & .ch[data-ch="1"] .chapters__blk {
      & .chapters__bg-item {
        --zoom: 1;
        height: 50.4vw;
        & img {
          object-fit: contain;
          object-position: 50% 0;
          transform: none;
        }
      }
      & .ch__detail {
        padding: 0 4px;
        border: 0;
        overflow: visible;
      }
    }
    & .ch[data-ch="2"] .chapters__blk .ch__detail {
      padding: 0 4px;
      border: 0;
      overflow: visible;
    }
    & .ch[data-ch="3"] .chapters__blk {
      background: #1d3452;
      & .chapters__bg-item {
        -webkit-mask-image: linear-gradient(to bottom,
          #000 0%,
          #000 52%,
          rgba(0, 0, 0, 0.97) 58%,
          rgba(0, 0, 0, 0.9) 64%,
          rgba(0, 0, 0, 0.78) 70%,
          rgba(0, 0, 0, 0.62) 76%,
          rgba(0, 0, 0, 0.44) 82%,
          rgba(0, 0, 0, 0.27) 88%,
          rgba(0, 0, 0, 0.12) 94%,
          rgba(0, 0, 0, 0.03) 98%,
          transparent 100%);
        mask-image: linear-gradient(to bottom,
          #000 0%,
          #000 52%,
          rgba(0, 0, 0, 0.97) 58%,
          rgba(0, 0, 0, 0.9) 64%,
          rgba(0, 0, 0, 0.78) 70%,
          rgba(0, 0, 0, 0.62) 76%,
          rgba(0, 0, 0, 0.44) 82%,
          rgba(0, 0, 0, 0.27) 88%,
          rgba(0, 0, 0, 0.12) 94%,
          rgba(0, 0, 0, 0.03) 98%,
          transparent 100%);
        &::after {
          display: none;
        }
      }
    }
    & .ch[data-ch="2"] .chapters__blk {
      background: #353440;
      & .chapters__bg-item {
        -webkit-mask-image: linear-gradient(to bottom,
          #000 0%,
          #000 52%,
          rgba(0, 0, 0, 0.97) 58%,
          rgba(0, 0, 0, 0.9) 64%,
          rgba(0, 0, 0, 0.78) 70%,
          rgba(0, 0, 0, 0.62) 76%,
          rgba(0, 0, 0, 0.44) 82%,
          rgba(0, 0, 0, 0.27) 88%,
          rgba(0, 0, 0, 0.12) 94%,
          rgba(0, 0, 0, 0.03) 98%,
          transparent 100%);
        mask-image: linear-gradient(to bottom,
          #000 0%,
          #000 52%,
          rgba(0, 0, 0, 0.97) 58%,
          rgba(0, 0, 0, 0.9) 64%,
          rgba(0, 0, 0, 0.78) 70%,
          rgba(0, 0, 0, 0.62) 76%,
          rgba(0, 0, 0, 0.44) 82%,
          rgba(0, 0, 0, 0.27) 88%,
          rgba(0, 0, 0, 0.12) 94%,
          rgba(0, 0, 0, 0.03) 98%,
          transparent 100%);
        &::after {
          display: none;
        }
      }
    }
    & .ch__detail {
      grid-column: 1;
      position: relative;
      z-index: 2;
      min-width: 0;
      overflow: visible;
      padding: 20px 16px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
    }
    & .chapters__blk .ch__in {
      --gutter: 14px;
    }
    & .chapters__blk .ch__in:not(.is-stack) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      column-gap: 0;
      align-content: end;
      padding-bottom: 76px;
      & > .ch__no-col {
        position: relative;
        top: auto;
        align-self: start;
      }
    }
    & .chapters__blk .ch__stack {
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
      & > .mop__grid, & > .ch__row {
        grid-column: 1;
      }
    }
    & .chapters__blk .ch__in {
      & .ch__detail, & .mop__card, & .ch__row {
        box-sizing: border-box;
        width: 100%;
        padding: 22px 18px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        background: none;
        box-shadow: none;
        overflow: visible;
      }
      & .mop__card .mop__card-fig, & .ch__row > .ch__card--media, & .mop__card--compare .ba {
        width: calc(100% + 36px);
        margin: -22px -18px 20px;
        border-radius: 0;
        -webkit-mask-image: none;
        mask-image: none;
      }
      & .ch__sub-title, & .ch__sub, & .mop__card-title, & .mop__stat-label, & .ch__stat-label, & .ch__row-title {
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: -0.01em;
      }
      & .mop__stat-label, & .ch__stat-label {
        font-size: 20px;
      }
      & .ch__text, & .ch__text--sm, & .mop__card-text, & .mop__stat-text {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.8;
      }
      & .ch__head, & .ch__box-body, & .ch__row-text, & .mop__card-body, & .mop__stat {
        row-gap: 8px;
        gap: 8px;
        padding: 0;
        max-width: none;
      }
      & .mop__steps {
        grid-template-columns: 1fr 1fr;
        margin-top: 16px;
        gap: 8px 8px;
        & li {
          font-size: 12px;
          line-height: 1.5;
          gap: 7px;
          letter-spacing: -0.02em;
          white-space: nowrap;
          &::before {
            flex: none;
            width: 20px;
            height: 20px;
            font-size: 11px;
          }
        }
      }
      & .mop__card .mop__card-fig, & .ch__row > .ch__card--media {
        margin-bottom: 8px;
      }
      & .ch__foot {
        margin-top: 12px;
      }
      &[data-pin="6"] .ch__pair {
        margin-top: 20px;
      }
    }
    & .chapters__blk .ch__in[data-pin="5"] .ch__box-body {
      position: static;
      width: auto;
    }
    & .chapters__blk .ch__in[data-pin="5"] .ch__detail .ch__before {
      position: relative;
      width: 140px;
      margin: 0 0 16px;
      & img {
        width: 140px;
        height: 140px;
      }
    }
    & .ch__detail > .ch__box {
      display: block;
      padding: 0;
      border: 0;
      background: none;
    }
    & .chapters__blk .ch__in[data-pin="6"] .ch__detail .ch__box {
      display: flex;
      flex-direction: column;
    }
    & .chapters__blk .ch__in:not(.is-stack) > .ch__no-col,
    & .chapters__blk .ch__in:not(.is-stack) > .ch__detail {
      grid-row: 1;
    }
    & .chapters__blk {
      position: relative;
      top: auto;
      height: auto;
      min-height: var(--vhs, 100dvh);
      overflow: clip;
      background: #080808;
    }
    & .chapters__bg-item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      --rise: 0;
      opacity: 1;
      animation: none;
      transition: none;
    }
    & .chapters__blk .ch__in {
      position: relative;
      inset: auto;
      min-height: var(--vhs, 100dvh);
      opacity: 1;
      transform: none;
      animation: none;
      transition: none;
    }
    & .chapters__blk .ch__in.is-stack {
      min-height: 0;
      overflow: visible;
      -webkit-mask-image: none;
      mask-image: none;
      & .ch__stack {
        transform: none;
        will-change: auto;
      }
      & .mop__grid {
        margin-top: 0;
      }
    }
    & .chapters__blk {
      display: flex;
      flex-direction: column;
    }
    & .chapters__blk .chapters__bg-item {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      flex: none;
      height: calc(var(--vhs, 100dvh) * 0.5);
      min-height: 0;
      & img {
        height: 100%;
      }
    }
    & .ch[data-ch="1"] .chapters__blk .chapters__bg-item {
      height: 74vw;
      overflow: clip;
      & img {
        object-fit: cover;
        object-position: 50% 42%;
        transform: scale(1.18);
        transform-origin: 50% 42%;
      }
      & .chapters__trail {
        --trail: 1;
        left: -70%;
        width: 240%;
        transform: scale(1.18);
        transform-origin: 46% 50%;
      }
    }
    & .chapters__blk {
      min-height: 0;
    }
    & .chapters__layout .ch, & .chapters__layout .mop {
      min-height: 0;
    }
    & .ch[data-ch="2"] .chapters__blk .chapters__bg-item {
      height: calc(var(--vhs, 100dvh) * 0.64);
      & img {
        object-position: 50% 45%;
      }
    }
    & .ch[data-ch="3"] .chapters__blk .chapters__bg-item {
      height: calc(var(--vhs, 100dvh) * 0.56);
    }
    & .ch[data-ch="4"] .chapters__blk .chapters__bg-item {
      height: calc(var(--vhs, 100dvh) * 0.46);
    }
    & .ch[data-ch="5"] .chapters__blk .chapters__bg-item {
      height: calc(var(--vhs, 100dvh) * 0.6);
    }
    & .chapters__blk .chapters__bg-item {
      -webkit-mask-image: none;
      mask-image: none;
      opacity: 1;
      visibility: visible;
      transition: none;
      animation: none;
      & img {
        transform: none;
        will-change: auto;
        transition: none;
        -webkit-mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 48%,
        rgba(0, 0, 0, 0.96) 54%,
        rgba(0, 0, 0, 0.88) 60%,
        rgba(0, 0, 0, 0.74) 66%,
        rgba(0, 0, 0, 0.56) 72%,
        rgba(0, 0, 0, 0.38) 78%,
        rgba(0, 0, 0, 0.22) 84%,
        rgba(0, 0, 0, 0.1) 90%,
        rgba(0, 0, 0, 0.03) 95%,
        transparent 100%);
        mask-image: linear-gradient(to bottom,
        #000 0%,
        #000 48%,
        rgba(0, 0, 0, 0.96) 54%,
        rgba(0, 0, 0, 0.88) 60%,
        rgba(0, 0, 0, 0.74) 66%,
        rgba(0, 0, 0, 0.56) 72%,
        rgba(0, 0, 0, 0.38) 78%,
        rgba(0, 0, 0, 0.22) 84%,
        rgba(0, 0, 0, 0.1) 90%,
        rgba(0, 0, 0, 0.03) 95%,
        transparent 100%);
      }
      & .ch-dust__bg-sp {
        -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.12) 8%,
        rgba(0, 0, 0, 0.4) 16%,
        rgba(0, 0, 0, 0.73) 24%,
        rgba(0, 0, 0, 0.95) 32%,
        #000 40%,
        #000 50%,
        rgba(0, 0, 0, 0.96) 56%,
        rgba(0, 0, 0, 0.86) 62%,
        rgba(0, 0, 0, 0.7) 68%,
        rgba(0, 0, 0, 0.5) 74%,
        rgba(0, 0, 0, 0.32) 80%,
        rgba(0, 0, 0, 0.17) 86%,
        rgba(0, 0, 0, 0.07) 92%,
        rgba(0, 0, 0, 0.02) 97%,
        transparent 100%);
        mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.12) 8%,
        rgba(0, 0, 0, 0.4) 16%,
        rgba(0, 0, 0, 0.73) 24%,
        rgba(0, 0, 0, 0.95) 32%,
        #000 40%,
        #000 50%,
        rgba(0, 0, 0, 0.96) 56%,
        rgba(0, 0, 0, 0.86) 62%,
        rgba(0, 0, 0, 0.7) 68%,
        rgba(0, 0, 0, 0.5) 74%,
        rgba(0, 0, 0, 0.32) 80%,
        rgba(0, 0, 0, 0.17) 86%,
        rgba(0, 0, 0, 0.07) 92%,
        rgba(0, 0, 0, 0.02) 97%,
        transparent 100%);
      }
      &::after {
        display: none;
      }
    }
    & .chapters__blk .ch__in {
      pointer-events: auto;
      z-index: auto;
    }
    & .chapters__blk .ch__in[data-pin="2"] .ch__head .ch__stat {
      display: none;
    }
    & .chapters__blk .ch__in {
      & .ch__detail, & .mop__card, & .ch__row {
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }
    }
    & .ch[data-ch="1"] .chapters__blk .ch__detail,
    & .ch[data-ch="2"] .chapters__blk .ch__detail,
    & .ch[data-ch="4"] .chapters__blk .ch__detail,
    & .ch[data-ch="6"] .chapters__blk .ch__detail {
      border: 0;
    }
    & .ch[data-ch="6"] .chapters__blk {
      & .ch__detail {
        padding: 0 4px;
      }
      & .ch__in:not(.is-stack) {
        padding-top: 4px;
      }
    }
    & .ch[data-ch="3"] .chapters__blk {
      overflow: visible;
      & .chapters__bg-item {
        margin-bottom: -120px;
        z-index: 0;
      }
      & .ch__in.is-stack .ch__stack {
        padding-top: 0;
      }
      & .ch__detail {
        padding: 0 4px;
        border: 0;
      }
    }
    & .ch[data-ch="5"] .chapters__blk {
      overflow: visible;
      & .chapters__bg-item {
        height: calc(var(--vhs, 100dvh) * 0.62);
        margin: -48px 0 -60px;
        z-index: 0;
      }
      & .ch__in:not(.is-stack) {
        padding-top: 0;
      }
      & .ch__detail {
        padding: 0 4px;
        border: 0;
      }
      & .ch__detail {
        position: static;
      }
      & .ch__in {
        position: static;
      }
    }
    & .ch[data-ch="5"] .chapters__blk {
      position: relative;
    }
    & .ch[data-ch="5"] .chapters__blk .ch__in .ch__detail .ch__before {
      position: absolute;
      left: 14px;
      top: 20px;
      z-index: 2;
      width: 120px;
      margin: 0;
      & img {
        width: 120px;
        height: 120px;
      }
    }
    & .ch[data-ch="4"] .chapters__blk {
      & .ch__detail {
        padding: 0 4px;
      }
      & .ch__in:not(.is-stack) {
        padding-top: 48px;
      }
    }
    & .chapters__blk .ch__in {
      & .mop__card .mop__card-fig, & .ch__row > .ch__card--media {
        height: auto;
        aspect-ratio: auto;
        overflow: visible;
        & img {
          display: block;
          position: static;
          width: 100%;
          height: auto;
          aspect-ratio: auto;
          object-fit: contain;
          transform: none;
          -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 45%,
            rgba(0, 0, 0, 0.95) 52%,
            rgba(0, 0, 0, 0.86) 59%,
            rgba(0, 0, 0, 0.72) 66%,
            rgba(0, 0, 0, 0.55) 73%,
            rgba(0, 0, 0, 0.37) 80%,
            rgba(0, 0, 0, 0.21) 87%,
            rgba(0, 0, 0, 0.09) 93%,
            rgba(0, 0, 0, 0.02) 97%,
            transparent 100%);
          mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 45%,
            rgba(0, 0, 0, 0.95) 52%,
            rgba(0, 0, 0, 0.86) 59%,
            rgba(0, 0, 0, 0.72) 66%,
            rgba(0, 0, 0, 0.55) 73%,
            rgba(0, 0, 0, 0.37) 80%,
            rgba(0, 0, 0, 0.21) 87%,
            rgba(0, 0, 0, 0.09) 93%,
            rgba(0, 0, 0, 0.02) 97%,
            transparent 100%);
        }
      }
    }
    & .chapters__blk .ch__in {
      & .ch__detail, & .mop__card, & .ch__row {
        border-radius: var(--radius);
        overflow: hidden;
      }
      & .ch__pair img, & .ch__before, & .ch__before img, & .ch__card--media img, & .ch__card--media, & .mop__card-fig img {
        border-radius: 0;
      }
    }
    & .chapters__blk .chapters__bg-item[data-bg="4"] img {
      padding: 16px 28px 24px;
    }
    & .chapters__blk .ch__in {
      flex: none;
      min-height: 0;
    }
    & .chapters__blk .ch__in:not(.is-stack) {
      align-content: start;
      padding-top: 24px;
      padding-bottom: 76px;
    }
    & .chapters__blk .ch__in.is-stack .ch__stack {
      padding-top: 24px;
    }
  }
}

/* [A] ── 見出しの字間統一（最後に置き、クラス重ねで各ブロックの入れ子指定より優先） ── */
.page-eufy-e35.page-eufy-e35.page-eufy-e35 {
  & .ch__sub-title, & .mop__card-title, & .item__title {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: 0;
    }
  }
  & .scard__title {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: 0.03em;
    }
  }
  & .reasons__title, & .lineup__title, & .dust__title {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: 0.02em;
    }
  }
  & .daily__scan-copy, & .daily__color-copy, & .daily__clean-copy, & .chapter__copy {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: 0.04em;
    }
  }
  & .pickup__title, & .compare__title, & .kv__cyc-title {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: inherit;
    }
  }
  & .kv__final-title, & .features__title, & .kv__rtitle {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: -0.02em;
    }
  }
  & .chapters__title {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: -0.04em;
    }
  }
  & .care__row-title {
    letter-spacing: -0.01em;
    @media (min-width: 1080px) {
      letter-spacing: -0.05em;
    }
  }

}

/* [C] ── KV 末尾コピー 2 行版（PC）+ SP 位置 / 購入ボタン SP 右下 ── */
.page-eufy-e35.page-eufy-e35.page-eufy-e35 {
  & .kv__final-copy {
    bottom: 150px;
  }
  & .LpNav {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    &.is-visible {
      transform: none;
    }
    @media (min-width: 1080px) {
      top: 16px;
      bottom: auto;
      transform: translateY(-12px);
      transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1), top 0.3s ease;
      &.is-visible {
        transform: none;
      }
    }
  }
  & .LpNav-cta {
    height: 58px;
    padding: 0 22px 0 16px;
    font-size: 19px;
    & .LpNav-cta__thumb {
      width: 38px;
      height: 38px;
    }
    @media (min-width: 1080px) {
      height: auto;
      padding: 12px 28px;
      font-size: 13px;
    }
  }
  & .LpNav-drop {
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateY(6px);
    @media (min-width: 1080px) {
      top: calc(100% + 12px);
      bottom: auto;
      transform: translateY(-6px);
    }
  }
  & .LpNav.is-buy-open .LpNav-drop {
    transform: none;
  }
  @media (min-width: 1080px) {
    & .kv__brand::after {
      content: "、";
      margin-right: -0.35em;
    }
    & .kv__final-copy {
      bottom: 13vh;
    }
    & .kv__final-copy .kv__final-title.kv__final-title--series {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      font-size: clamp(28px, 3.8vw, 56px);
      line-height: 1.35;
      & .kv__line {
        display: inline-block;
      }
      & .kv__line:nth-child(n + 3) {
        order: 2;
      }
      &::after {
        content: "";
        flex-basis: 100%;
        order: 1;
      }
    }
    & .kv-still__title--series {
      font-size: clamp(28px, 3.9vw, 58px);
      line-height: 1.35;
      & br:not(.m-sp):first-of-type {
        display: none;
      }
    }
  }
}

/* [C] ── KV 直後 サイクロン動画版（?kv=video） ── */
.page-eufy-e35 .cycv {
  display: none;
}
html.kv-video .page-eufy-e35 {
  & .kv__reasons,
  & .kv__rscrim,
  & .kv__door {
    display: none;
  }
  & .motion {
    margin-top: 0;
  }
  & .motion::before {
    display: none;
  }
  & .cycv {
    display: block;
    position: relative;
    z-index: 3;
    padding: 100px var(--gutter) 112px;
    background: var(--color-bg-black);
    color: #fff;
    @media (min-width: 1080px) {
      padding: 160px var(--gutter-pc) 240px;
    }
  }
  & .cycv__inner {
    display: grid;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    @media (min-width: 1080px) {
      justify-items: center;
      max-width: none;
      row-gap: 28px;
    }
  }
  & .cycv__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(28px, 3.4vw, 50px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-wrap: balance;
    @media (min-width: 1080px) {
      margin-bottom: 72px;
      font-size: clamp(30px, 2.6vw, 44px);
      line-height: 1.3;
      text-align: center;
    }
  }
  & .cycv__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050505;
    @media (min-width: 1080px) {
      --cg: 1;
      justify-self: start;
      width: calc(100vw - 48px);
      height: min(calc((100vw - 48px) * 0.5625), calc(100svh - 96px));
      aspect-ratio: auto;
      max-width: none;
      margin: 0 calc(50% - 50vw + 24px);
      clip-path: inset(calc((1 - var(--cg)) * 12%) calc((1 - var(--cg)) * 22%));
      will-change: clip-path;
    }
  }
  & .cycv__ctrl {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    @media (min-width: 1080px) {
      top: auto;
      right: 16px;
      bottom: 22px;
    }
    & .cycv__sound {
      position: static;
    }
  }
  & .cycv__play {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    @media (min-width: 1080px) {
      width: 40px;
      height: 40px;
    }
    & .cycv__play-ic {
      width: 16px;
      height: 16px;
    }
    & .cycv__play-ic--play {
      display: none;
    }
    &[aria-pressed="false"] {
      & .cycv__play-ic--play {
        display: block;
      }
      & .cycv__play-ic--pause {
        display: none;
      }
    }
  }
  & .cycv__seek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 14px;
    cursor: pointer;
    &::before, & i {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
    }
    &::before {
      background: rgba(255, 255, 255, 0.25);
    }
    & i {
      background: var(--color-primary);
      transform: scaleX(0);
      transform-origin: 0 50%;
    }
  }
  & .cycv__video {
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  & .cycv__body {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    @media (min-width: 1080px) {
      justify-items: center;
      gap: 16px;
      margin-top: 92px;
      text-align: center;
    }
  }
  & .cycv__text {
    margin: 0;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.8;
    letter-spacing: -0.02em;
    @media (min-width: 1080px) {
      font-size: clamp(20px, 1.75vw, 28px);
    }
  }
  & .cycv__sound {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(6px);
    @media (min-width: 1080px) {
      right: 16px;
      bottom: 16px;
      height: 40px;
      font-size: 13px;
    }
    &:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
  }
  & .cycv__sound-ic {
    width: 18px;
    height: 18px;
  }
  & .cycv__sound-ic--on,
  & .cycv__sound[aria-pressed="true"] .cycv__sound-ic--off {
    display: none;
  }
  & .cycv__sound[aria-pressed="true"] .cycv__sound-ic--on {
    display: block;
  }
}

@keyframes chFixno {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* [C] ── 05 章 SP 背景（切り抜き写真・上部を透明にフェード） ── */
.page-eufy-e35 .chapters__bg-item[data-bg="5"] {
  & img:not(.ch-dust__bg-sp) {
    display: none;
  }
  & .ch-dust__bg-sp {
    display: block;
    object-fit: cover;
    object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.04) 4%,
      rgba(0, 0, 0, 0.12) 8%,
      rgba(0, 0, 0, 0.24) 12%,
      rgba(0, 0, 0, 0.4) 16%,
      rgba(0, 0, 0, 0.57) 20%,
      rgba(0, 0, 0, 0.73) 24%,
      rgba(0, 0, 0, 0.86) 28%,
      rgba(0, 0, 0, 0.95) 32%,
      rgba(0, 0, 0, 0.99) 36%,
      #000 40%);
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.04) 4%,
      rgba(0, 0, 0, 0.12) 8%,
      rgba(0, 0, 0, 0.24) 12%,
      rgba(0, 0, 0, 0.4) 16%,
      rgba(0, 0, 0, 0.57) 20%,
      rgba(0, 0, 0, 0.73) 24%,
      rgba(0, 0, 0, 0.86) 28%,
      rgba(0, 0, 0, 0.95) 32%,
      rgba(0, 0, 0, 0.99) 36%,
      #000 40%);
  }
  @media (min-width: 1080px) {
    & img:not(.ch-dust__bg-sp) {
      display: block;
    }
    & .ch-dust__bg-sp {
      display: none;
    }
  }
}

.page-eufy-e35 .chapters__bg-item[data-bg="3"] {
  & img:not(.ch-ai__bg-sp) {
    display: none;
  }
  & .ch-ai__bg-sp {
    display: block;
    object-fit: cover;
    object-position: 50% 60%;
  }
  @media (min-width: 1080px) {
    & img:not(.ch-ai__bg-sp) {
      display: block;
    }
    & .ch-ai__bg-sp {
      display: none;
    }
  }
}


/* [C] ── KV 読み込み待ち（先頭で開いた時だけスクロールをロックし、進捗バーを表示） ── */
html.is-kvwait,
html.is-kvwait body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
.page-eufy-e35 .kv__wait {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: opacity 0.4s ease 0.3s;
  &.is-done {
    opacity: 0;
  }
}
.page-eufy-e35 .kv__wait-bar {
  display: block;
  height: 100%;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

html.is-cmp-open {
  overflow: hidden;
}

html.has-pbar .page-eufy-e35.page-eufy-e35.page-eufy-e35 {
  & .LpNav {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    @media (min-width: 1080px) {
      bottom: auto;
    }
  }
  & .chapters.is-fix-sp.is-flow .chapters__rail {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

html.is-mcut .page-eufy-e35 {
  & .item, & .item__title, & .item__body, & #deco {
    transition: none;
  }
}

.page-eufy-e35 .chapters:not([data-ch]) {
  & .chapters__bg-stick,
  & .chapters__no {
    visibility: hidden;
  }
}

.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="1"] .chapters__blk {
  & > .ch__in {
    position: relative;
    z-index: 1;
  }
}
.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="1"] .chapters__blk .chapters__bg-item[data-bg="1"] {
  height: 110vw;
  margin-bottom: -30vw;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.68) 76%, rgba(0, 0, 0, 0.5) 81%, rgba(0, 0, 0, 0.34) 86%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.1) 94%, rgba(0, 0, 0, 0.04) 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.68) 76%, rgba(0, 0, 0, 0.5) 81%, rgba(0, 0, 0, 0.34) 86%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.1) 94%, rgba(0, 0, 0, 0.04) 97%, transparent 100%);
  & img {
    object-position: 50% 50%;
    transform: none;
  }
  & .chapters__trail {
    --trail: 1;
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: none;
  }
}

.page-eufy-e35 .motion {
  & .vis {
    --mf: calc((1 - var(--mi, 1)) * 55%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) calc(var(--mf) * 0.15), rgba(0, 0, 0, 0.14) calc(var(--mf) * 0.3), rgba(0, 0, 0, 0.3) calc(var(--mf) * 0.45), rgba(0, 0, 0, 0.5) calc(var(--mf) * 0.6), rgba(0, 0, 0, 0.7) calc(var(--mf) * 0.75), rgba(0, 0, 0, 0.88) calc(var(--mf) * 0.9), #000 var(--mf));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) calc(var(--mf) * 0.15), rgba(0, 0, 0, 0.14) calc(var(--mf) * 0.3), rgba(0, 0, 0, 0.3) calc(var(--mf) * 0.45), rgba(0, 0, 0, 0.5) calc(var(--mf) * 0.6), rgba(0, 0, 0, 0.7) calc(var(--mf) * 0.75), rgba(0, 0, 0, 0.88) calc(var(--mf) * 0.9), #000 var(--mf));
  }
  & .motion__no {
    opacity: clamp(0, calc((var(--mi, 1) - 0.8) * 5), 1);
  }
}

.page-eufy-e35 .daily .daily__photo {
  @media (min-width: 1080px) {
    --ee: calc(1 - (1 - var(--ent, 1)) * (1 - var(--ent, 1)) * (1 - var(--ent, 1)));
    transform: translate3d(0, var(--dty, 0px), 0) scale(calc((1 + var(--kb) * 0.05) * (1 + (1 - var(--ee)) * 0.05)));
    will-change: transform;
  }
}


.page-eufy-e35 .lineup {
  & .lineup__bnr {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    @media (min-width: 1080px) {
      flex-direction: row;
      padding: 24px;
      border-radius: 24px;
    }
  }
  & .lineup__bnr-visual {
    flex: 1.5;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    & img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
    @media (min-width: 1080px) {
      border-radius: 16px;
    }
  }
  & .lineup__bnr-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    padding: 17px 20px 20px;
    @media (min-width: 1080px) {
      min-height: auto;
      padding: 40px;
    }
  }
  & .lineup__bnr-title {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: center;
    @media (min-width: 1080px) {
      font-size: 28px;
    }
  }
  & .lineup__bnr-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    & svg {
      width: 22px;
      height: 22px;
    }
    @media (min-width: 1080px) {
      right: 20px;
      bottom: 20px;
      width: 64px;
      height: 64px;
      & svg {
        width: 28px;
        height: 28px;
      }
    }
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in .mop__card.mop__card--pressure {
  & .mop__card-fig {
    margin-bottom: -72px;
    & img {
      width: 128%;
      max-width: none;
      margin-left: -14%;
    }
  }
  & .mop__card-body {
    position: relative;
    z-index: 1;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow {
  & .ch[data-ch="5"] .chapters__blk {
    & .chapters__bg-item {
      height: calc(var(--vhs, 100dvh) * 0.8);
      margin: -24px 0 28px;
    }
    & .ch__in .ch__detail .ch__before {
      position: static;
      order: 5;
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      width: auto;
      margin: 28px 0 0;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      & img {
        width: 168px;
        height: 118px;
        border: 0;
        border-radius: 6px;
      }
      & figcaption {
        position: static;
        padding: 0;
        background: none;
        font-size: 13px;
        line-height: 1.45;
        &::before {
          content: "従来";
          display: block;
          margin-bottom: 4px;
          font-size: 11px;
          letter-spacing: 0.08em;
          color: rgba(255, 255, 255, 0.55);
        }
      }
    }
  }
  & .ch[data-ch="4"] .chapters__blk {
    & .chapters__bg-item {
      padding-top: 32px;
      -webkit-mask-image: none;
      mask-image: none;
      & img {
        -webkit-mask-image: none;
        mask-image: none;
      }
    }
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="3"] .chapters__blk .ch__in .ch__row > .ch__card--media {
  height: auto;
  aspect-ratio: 4 / 3;
  background: transparent;
  & img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in .mop__card--compare .ba {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.94) 62%, rgba(0, 0, 0, 0.84) 68%, rgba(0, 0, 0, 0.7) 74%, rgba(0, 0, 0, 0.53) 80%, rgba(0, 0, 0, 0.36) 85%, rgba(0, 0, 0, 0.21) 90%, rgba(0, 0, 0, 0.1) 94%, rgba(0, 0, 0, 0.03) 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.94) 62%, rgba(0, 0, 0, 0.84) 68%, rgba(0, 0, 0, 0.7) 74%, rgba(0, 0, 0, 0.53) 80%, rgba(0, 0, 0, 0.36) 85%, rgba(0, 0, 0, 0.21) 90%, rgba(0, 0, 0, 0.1) 94%, rgba(0, 0, 0, 0.03) 97%, transparent 100%);
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in .mop__card.mop__card--system .mop__card-fig {
  margin-bottom: calc(36vw * 0.62);
  transform: scale(1.36);
  transform-origin: 0% 0%;
  & .mop__pin {
    scale: 0.74;
  }
  & img {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.7) 16%, #000 26%, #000 100%), linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.7) 16%, #000 26%, #000 100%), linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 100%);
    mask-composite: intersect;
  }
}
.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="4"] .chapters__blk .chapters__bg-item {
  height: calc(var(--vhs, 100dvh) * 0.6);
  & img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.62) 78%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.18) 91%, rgba(0, 0, 0, 0.06) 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.62) 78%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.18) 91%, rgba(0, 0, 0, 0.06) 96%, transparent 100%);
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in {
  & .mop__card, & .ch__row {
    padding: 24px 22px 28px;
    & + .mop__card, & + .ch__row {
      margin-top: 8px;
    }
  }
  & .mop__card-body, & .ch__row-text, & .ch__box-body, & .ch__detail > .ch__head {
    row-gap: 14px;
  }
  & .ch__num, & .mop__stat {
    margin-bottom: -2px;
  }
  & .mop__card-title, & .ch__row-title, & .ch__sub-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: 0;
  }
  & .mop__card-text, & .ch__text, & .ch__row-text > p:not(.ch__num) {
    font-size: 15px;
    margin: 0;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.88);
    & sup {
      font-size: 0.6em;
      line-height: 0;
    }
  }
  & .mop__steps {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.5;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="4"] .chapters__blk {
  & > .ch__in {
    padding-top: 24px;
  }
  & .chapters__bg-item {
    margin-top: 48px;
    padding-top: 0;
    & img {
      padding: 0 28px;
      box-sizing: border-box;
    }
  }
  & .chapters__pins--co {
    counter-reset: co;
  }
  & .chapters__co {
    & i, & u {
      display: none;
    }
    & b {
      display: block;
      right: calc(100% - var(--axp, 0) * 1px + 16px);
      left: auto;
      top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px);
      transform: translateY(-50%);
      font-size: 11px;
      line-height: 1.3;
      white-space: nowrap;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
    }
    &[data-side="r"] b {
      right: auto;
      left: calc(var(--axp, 0) * 1px + 16px);
    }
    &::before {
      counter-increment: co;
      content: counter(co);
      position: absolute;
      left: calc(var(--axp, 0) * 1px);
      top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px);
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      margin: -11px 0 0 -11px;
      border-radius: 50%;
      background: #fff;
      color: #000;
      font-family: var(--font-en);
      font-size: 11px;
      line-height: 1;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
    }
  }
}
.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="2"] .chapters__blk {
  & .chapters__pins--co {
    counter-reset: co;
  }
  & .chapters__co {
    & i, & u {
      display: none;
    }
    & b {
      display: block;
      right: calc(100% - var(--axp, 0) * 1px + 16px);
      left: auto;
      top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px);
      transform: translateY(-50%);
      font-size: 11px;
      line-height: 1.3;
      white-space: nowrap;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
    }
    &[data-side="r"] b {
      right: auto;
      left: calc(var(--axp, 0) * 1px + 16px);
    }
    &::before {
      counter-increment: co;
      content: counter(co);
      position: absolute;
      left: calc(var(--axp, 0) * 1px);
      top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px);
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      margin: -11px 0 0 -11px;
      border-radius: 50%;
      background: #fff;
      color: #000;
      font-family: var(--font-en);
      font-size: 11px;
      line-height: 1;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
    }
  }
}

.page-eufy-e35 .bento {
  & .bento__card--sterilize::after {
    background: linear-gradient(to top right,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.5) 12%,
      rgba(0, 0, 0, 0.38) 24%,
      rgba(0, 0, 0, 0.26) 36%,
      rgba(0, 0, 0, 0.16) 48%,
      rgba(0, 0, 0, 0.08) 60%,
      rgba(0, 0, 0, 0.03) 72%,
      rgba(0, 0, 0, 0) 84%);
    @media (min-width: 1080px) {
      background: linear-gradient(to top,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.54) 10%,
        rgba(0, 0, 0, 0.42) 22%,
        rgba(0, 0, 0, 0.3) 34%,
        rgba(0, 0, 0, 0.2) 46%,
        rgba(0, 0, 0, 0.12) 58%,
        rgba(0, 0, 0, 0.06) 70%,
        rgba(0, 0, 0, 0.02) 82%,
        rgba(0, 0, 0, 0) 100%);
    }
  }
  & .bento__card--obstacle::after {
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.66) 0%,
      rgba(0, 0, 0, 0.54) 10%,
      rgba(0, 0, 0, 0.4) 20%,
      rgba(0, 0, 0, 0.27) 30%,
      rgba(0, 0, 0, 0.16) 40%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(0, 0, 0, 0.03) 60%,
      rgba(0, 0, 0, 0) 70%);
    @media (min-width: 1080px) {
      background: linear-gradient(to top,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.54) 10%,
        rgba(0, 0, 0, 0.42) 22%,
        rgba(0, 0, 0, 0.3) 34%,
        rgba(0, 0, 0, 0.2) 46%,
        rgba(0, 0, 0, 0.12) 58%,
        rgba(0, 0, 0, 0.06) 70%,
        rgba(0, 0, 0, 0.02) 82%,
        rgba(0, 0, 0, 0) 100%);
    }
  }
}

.page-eufy-e35 .compare .compare__label {
  justify-self: center;
  width: fit-content;
  margin: 16px auto 4px;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  @media (min-width: 1080px) {
    justify-self: auto;
    width: auto;
    margin: 0;
    padding: 14px 16px;
    border-radius: 0;
    background: none;
    white-space: normal;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in .mop__card.mop__card--compare {
  display: flex;
  flex-direction: column;
  & .ba {
    display: contents;
    -webkit-mask-image: none;
    mask-image: none;
  }
  & .ba__bar, & .ba__range {
    display: none;
  }
  & .ba__fig {
    position: relative;
    inset: auto;
    clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  & .ba__fig--after {
    order: 0;
    margin: -24px -22px 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.8) 78%, rgba(0, 0, 0, 0.55) 85%, rgba(0, 0, 0, 0.3) 91%, rgba(0, 0, 0, 0.1) 96%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.8) 78%, rgba(0, 0, 0, 0.55) 85%, rgba(0, 0, 0, 0.3) 91%, rgba(0, 0, 0, 0.1) 96%, transparent 100%);
    }
    & figcaption {
      position: absolute;
      top: 20px;
      right: 20px;
      left: auto;
    }
  }
  & .ba__fig:not(.ba__fig--after) {
    order: 1;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 8px 0 24px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    & img {
      width: 112px;
      height: 78px;
      object-fit: cover;
      border-radius: 6px;
      filter: grayscale(0.3) brightness(0.9);
    }
    & figcaption {
      position: static;
      padding: 0;
      border-radius: 0;
      background: none;
      color: #fff;
      font-size: 13px;
      line-height: 1.45;
      &::before {
        content: "従来";
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.55);
      }
    }
  }
  & .mop__card-body {
    order: 2;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in {
  & .mop__card .mop__card-fig, & .ch__row > .ch__card--media {
    margin-top: -24px;
    margin-left: -22px;
    margin-right: -22px;
    width: auto;
    border-radius: 7px 7px 0 0;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="2"] .chapters__blk {
  & .chapters__bg-item {
    height: calc(var(--vhs, 100dvh) * 0.78);
  }
  & .chapters__co:first-child b {
    right: auto;
    left: calc(var(--axp, 0) * 1px);
    top: calc((var(--ayp, 0) - var(--lyp, 0)) * 1px - 26px);
    transform: translate(-50%, -100%);
  }
}

.page-eufy-e35 .pickup {
  & .pickup__img {
    width: 54%;
    @media (min-width: 1080px) {
      width: 66%;
    }
  }
  & .pickup__title {
    & .x-mark {
      transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    & > span:last-child {
      opacity: 1;
      transform: none;
      transition: none;
      color: transparent;
      background-image: linear-gradient(90deg, #fff 0%, #fff calc(var(--pk, 0) * 100% - 12%), rgba(255, 255, 255, 0.22) calc(var(--pk, 0) * 100% + 12%), rgba(255, 255, 255, 0.22) 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow {
  & .chapters__rail {
    display: none;
    @media (min-width: 1080px) {
      display: flex;
    }
  }
  & .chapters__side {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 2px;
      background: var(--color-primary);
      transform: scaleX(var(--chp, 0));
      transform-origin: 0 50%;
      pointer-events: none;
    }
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in {
  & .ch__row > .ch__card--media,
  & .mop__card.mop__card--compare .ba__fig--after {
    height: auto;
    aspect-ratio: 4 / 3;
    & img {
      height: 100%;
      object-fit: cover;
    }
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="3"] .chapters__blk .chapters__bg-item {
  margin-bottom: -36px;
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .ch[data-ch="3"] .chapters__blk .ch__in .ch__row {
  & > .ch__card--media {
    margin-bottom: -48px;
  }
  & > :not(.ch__card--media) {
    position: relative;
    z-index: 1;
  }
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow .chapters__blk .ch__in .mop__card.mop__card--compare {
  & .ba__fig--after {
    margin-bottom: -48px;
  }
  & .mop__card-body {
    order: 1;
    position: relative;
    z-index: 1;
  }
  & .ba__fig:not(.ba__fig--after) {
    order: 2;
    margin: 20px 0 0;
  }
}

.page-eufy-e35.page-eufy-e35 .care .care__media--app .care__app-comp {
  position: static;
  width: 100%;
  height: 100%;
  padding-top: 14px;
  box-sizing: border-box;
  object-fit: contain;
  object-position: 50% 100%;
}

.page-eufy-e35.page-eufy-e35 .chapters.is-fix-sp.is-flow {
  & .ch[data-ch="2"] .chapters__blk,
  & .ch[data-ch="3"] .chapters__blk {
    background: #080808;
  }
  & .ch[data-ch="2"] .chapters__blk {
    & .chapters__bg-item {
      height: calc(var(--vhs, 100dvh) * 0.62);
      margin-bottom: -56px;
    }
    & > .ch__in {
      position: relative;
      z-index: 1;
      padding-bottom: 32px;
    }
  }
}
.page-eufy-e35 .series .scard:nth-child(2) .scard__fig img {
  scale: 0.86;
  @media (min-width: 1080px) {
    scale: 0.88;
  }
}

.page-eufy-e35 .kv__wait {
  display: none;
}
@keyframes e35KvFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html.is-kvfade .page-eufy-e35 .kv-sec {
  animation: e35KvFade 1.6s cubic-bezier(0.33, 0, 0.2, 1) both;
}

body:has(.page-eufy-e35) .popup.popup-defalut {
  display: none !important;
}

.page-eufy-e35 .motion .motion__gl {
  filter: saturate(0.62) brightness(1.12);
}

.page-eufy-e35.page-eufy-e35 .compare .compare__model {
  padding: 8px 16px;
  border-radius: 8px;
  @media (min-width: 1080px) {
    padding: 10px 28px;
  }
}

/* [C] ── CTA セール表示 3 案（?cta=a / b / c） ── */
.page-eufy-e35 :is(.series, .pickup) .scard__sale {
  display: none;
}
html:is(.cta-a, .cta-b, .cta-c) .page-eufy-e35 :is(.series, .pickup) {
  & .scard {
    position: relative;
  }
  & .scard__price {
    display: none;
  }
  & .scard__sale {
    display: grid;
    grid-column: 1 / -1;
    justify-self: center;
    color: #fff;
  }
  & .scard__off {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    font-family: var(--font-en);
    line-height: 1;
    color: #f0a03c;
    & b {
      font-size: 26px;
      font-weight: 500;
      letter-spacing: -0.03em;
    }
    & span {
      font-size: 9px;
      font-weight: 600;
      line-height: 1.05;
      text-align: left;
    }
  }
  & .scard__pr {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-family: var(--font-en);
  }
  & .scard__was {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
  }
  & .scard__now {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.01em;
    & small {
      margin-left: 3px;
      font-family: var(--font-head);
      font-size: 10px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.7);
    }
  }
  & .scard__perks {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & .scard__perk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    & small {
      display: block;
      font-size: 9px;
      color: rgba(255, 255, 255, 0.6);
    }
  }
  & .scard__perk-br {
    display: none;
  }
  & .scard__perk-ic {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0a03c;
    color: #111;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 600;
    flex: none;
  }
  & .scard__bag {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    flex: none;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 62% 30%;
    }
  }
  @media (min-width: 1080px) {
    & .scard__off b {
      font-size: 34px;
    }
    & .scard__off span {
      font-size: 11px;
    }
    & .scard__was {
      font-size: 15px;
    }
    & .scard__now {
      font-size: 30px;
    }
    & .scard__perk {
      font-size: 13px;
      & small {
        font-size: 11px;
      }
    }
  }
}

/* 案 A: 価格行にまとめる（OFF 率＋価格 1 行 / 特典 1 行） */
html.cta-a .page-eufy-e35 :is(.series, .pickup) {
  & .scard__sale {
    justify-items: center;
    row-gap: 8px;
  }
  & .scard__sale > .scard__off,
  & .scard__sale > .scard__pr {
    grid-row: 1;
  }
  & .scard__sale {
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: center;
  }
  & .scard__perks {
    grid-column: 1 / -1;
    gap: 14px;
  }
}

/* 案 B: 製品画像に OFF 率とダストバッグを重ねる（縦幅は価格 1 行分のまま） */
html.cta-b .page-eufy-e35 .series {
  & .scard__sale, & .scard__perks {
    display: contents;
  }
  & .scard__pr {
    grid-column: 1 / -1;
    justify-self: center;
  }
  & .scard__off {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f0a03c;
    color: #111;
    & b {
      font-size: 22px;
    }
    & span {
      font-size: 9px;
      text-align: center;
      & br {
        display: none;
      }
    }
    @media (min-width: 1080px) {
      position: absolute;
      top: 34%;
      left: 12%;
      width: 84px;
      height: 84px;
      & b {
        font-size: 32px;
      }
    }
  }
  & .scard__perk--bag {
    grid-column: 1;
    grid-row: 4 / 6;
    align-self: end;
    justify-self: end;
    z-index: 2;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    font-size: 9px;
    & small {
      font-size: 8px;
    }
    & .scard__bag {
      width: 40px;
      height: 40px;
      box-shadow: 0 0 0 2px #f0a03c;
    }
    @media (min-width: 1080px) {
      position: absolute;
      top: 52%;
      right: 12%;
      font-size: 11px;
      & .scard__bag {
        width: 56px;
        height: 56px;
      }
    }
  }
  & .scard__perk--coupon {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: -6px;
    font-size: 10px;
    & small {
      display: inline;
      margin-left: 4px;
    }
    & .scard__perk-ic {
      width: 16px;
      height: 16px;
      font-size: 9px;
    }
  }
}

/* 案 C: 価格行を 1 本の帯にする（OFF 率・価格・特典アイコンを横一列） */
html.cta-c .page-eufy-e35 .series {
  & .scard__sale {
    grid-auto-flow: column;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid rgba(240, 160, 60, 0.55);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(240, 160, 60, 0.14), rgba(240, 160, 60, 0.04));
    justify-content: center;
  }
  & .scard__was {
    display: none;
  }
  & .scard__now {
    font-size: 20px;
  }
  & .scard__perks {
    gap: 8px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
  & .scard__perk {
    flex-direction: column;
    gap: 2px;
    font-size: 8px;
    text-align: center;
    & > span:last-child {
      display: none;
    }
  }
  & .scard__perk--coupon::after {
    content: "次回10%OFF";
    font-size: 8px;
  }
  & .scard__perk--bag::after {
    content: "バッグ付";
    font-size: 8px;
  }
  @media (min-width: 1080px) {
    & .scard__sale {
      width: auto;
      padding: 10px 20px;
    }
    & .scard__was {
      display: inline;
    }
    & .scard__perk::after {
      font-size: 11px;
    }
  }
}

.page-eufy-e35 .pickup .pickup__price .product-price-v2 {
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 6px;
}
html:is(.cta-a, .cta-b, .cta-c) .page-eufy-e35 :is(.series, .pickup) .scard__bag img {
  object-fit: contain;
  object-position: 50% 50%;
  padding: 3px;
  box-sizing: border-box;
}
html:is(.cta-a, .cta-b, .cta-c) .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__bag {
    width: 50px;
    height: auto;
    aspect-ratio: 400 / 137;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    & img {
      padding: 0;
    }
  }
}
html.cta-b .page-eufy-e35.page-eufy-e35 .series .scard__perk--bag .scard__bag {
  width: 76px;
  height: auto;
  box-shadow: none;
  @media (min-width: 1080px) {
    width: 110px;
    height: auto;
  }
}
html:is(.cta-a, .cta-b, .cta-c) .page-eufy-e35.page-eufy-e35 .series .scard__off {
  color: #cd3752;
}
html.cta-b .page-eufy-e35.page-eufy-e35 .series .scard__off {
  background: #cd3752;
  color: #fff;
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) .scard__off {
  padding: 4px 8px 4px 9px;
  border-radius: 4px;
  background: #cd3752;
  color: #fff;
  & b {
    font-size: 20px;
  }
  @media (min-width: 1080px) {
    padding: 6px 12px 6px 13px;
    & b {
      font-size: 28px;
    }
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) .scard__now {
  color: #cd3752;
  & small {
    color: #cd3752;
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__sale {
    justify-content: center;
    align-content: start;
  }
  & .scard {
    @media (min-width: 1080px) {
      align-content: start;
    }
  }
  & .scard__sale {
    @media (min-width: 1080px) {
      min-height: 96px;
    }
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) .scard__sale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: flex-start;
  column-gap: 10px;
  & .scard__perks {
    flex: 0 0 100%;
    justify-content: center;
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__perks {
    gap: 6px 16px;
    flex-wrap: wrap;
  }
  & .scard__perk {
    gap: 5px;
    & small {
      display: inline;
      margin-left: 3px;
    }
    &::before {
      content: "+";
      display: grid;
      place-items: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #cd3752;
      color: #fff;
      font-family: var(--font-en);
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
      flex: none;
    }
    @media (min-width: 1080px) {
      &::before {
        width: 20px;
        height: 20px;
        font-size: 16px;
      }
    }
  }
  & .scard__perk-ic, & .scard__bag {
    display: none;
  }
}
.page-eufy-e35 :is(.series, .pickup) .scard__fig-bag {
  display: none;
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__fig {
    position: relative;
  }
  & .scard__fig-bag {
    position: absolute;
    right: -6px;
    bottom: 2px;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 76px;
    & img {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
    }
    & > span {
      padding: 2px 6px;
      border-radius: 3px;
      background: #cd3752;
      color: #fff;
      font-size: 8px;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
    }
    @media (min-width: 1080px) {
      right: 4%;
      bottom: 6%;
      width: 130px;
      gap: 5px;
      & > span {
        padding: 3px 10px;
        font-size: 11px;
        & br {
          display: none;
        }
      }
    }
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__perks {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 2px 8px;
    &::before {
      content: "+";
      grid-row: 1 / 3;
      display: grid;
      place-items: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #cd3752;
      color: #fff;
      font-family: var(--font-en);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
    }
    @media (min-width: 1080px) {
      grid-template-columns: auto auto auto;
      gap: 0 12px;
      &::before {
        grid-row: auto;
        width: 22px;
        height: 22px;
        font-size: 17px;
      }
    }
  }
  & .scard__perk {
    grid-column: 2;
    color: #cd3752;
    &::before {
      display: none;
    }
    & small {
      color: rgba(205, 55, 82, 0.8);
    }
    @media (min-width: 1080px) {
      grid-column: auto;
    }
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__perk small {
    margin-left: 0;
  }
  & .scard__fig-bag {
    right: -4px;
    bottom: 4px;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 5px 8px 5px 6px;
    border: 1px solid rgba(205, 55, 82, 0.7);
    border-radius: 8px;
    background: rgba(12, 12, 14, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    & img {
      width: 40px;
      filter: none;
    }
    & > span {
      padding: 0;
      background: none;
      color: #fff;
      font-size: 9px;
      line-height: 1.3;
      text-align: left;
    }
    @media (min-width: 1080px) {
      right: 2%;
      bottom: 6%;
      gap: 10px;
      width: auto;
      padding: 8px 14px 8px 10px;
      & img {
        width: 72px;
      }
      & > span {
        padding: 0;
        font-size: 12px;
        & br {
          display: inline;
        }
      }
    }
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) .scard__perk--coupon::after {
  content: "/";
  margin-left: 6px;
  color: rgba(205, 55, 82, 0.8);
  @media (min-width: 1080px) {
    margin-left: 10px;
  }
}
html.cta-a .page-eufy-e35.page-eufy-e35 :is(.series, .pickup) {
  & .scard__perk--coupon::after {
    margin-left: 2px;
    @media (min-width: 1080px) {
      margin-left: 2px;
    }
  }
  & .scard__perks {
    @media (min-width: 1080px) {
      column-gap: 4px;
    }
  }
  & .scard__fig-bag {
    right: -10px;
    bottom: -4px;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 2px;
    width: 56px;
    height: 56px;
    padding: 4px;
    box-sizing: border-box;
    & img {
      width: 42px;
    }
    & > span {
      font-size: 7px;
      line-height: 1.2;
      text-align: center;
    }
    @media (min-width: 1080px) {
      right: 0;
      bottom: 2%;
      width: 88px;
      height: 88px;
      padding: 6px;
      gap: 4px;
      & img {
        width: 66px;
      }
      & > span {
        font-size: 10px;
      }
    }
  }
}

html.cta-a .page-eufy-e35.page-eufy-e35 .pickup {
  & .pickup__price {
    display: none;
  }
  & .pickup__img {
    position: relative;
  }
  & .scard__sale {
    grid-column: auto;
  }
  & .scard__fig-bag {
    right: 2%;
    bottom: 6%;
  }
}

.page-eufy-e35.page-eufy-e35 .series.series--mid .scard {
  & .scard__fig {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 200px;
    @media (min-width: 1080px) {
      grid-column: auto;
      grid-row: auto;
      width: auto;
    }
  }
  & .scard__lead {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
    text-align: center;
    @media (min-width: 1080px) {
      grid-column: auto;
      grid-row: auto;
    }
  }
  & .scard__name, & .scard__price, & .scard__sale, & .scard__btns, & .textlink {
    grid-row: auto;
  }
}
.page-eufy-e35.page-eufy-e35 .series.series--mid .scard:first-child .scard__fig {
  margin-bottom: 14px;
}

.page-eufy-e35.page-eufy-e35 .LpNav-drop {
  & .product-price-v2-coupon-label {
    display: none !important;
  }
  & .LpNav-drop__info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
  }
  & .LpNav-drop__price .product-price-v2-unit {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 2px 8px;
    & > div:not([class]) {
      display: none;
    }
  }
  & .product-price-v2-discount-rate-wrap {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }
  & .product-price-v2, & .product-price-v2-sale-wrap {
    display: contents;
  }
  & .product-price-v2-sale {
    grid-row: 1;
    grid-column: 2;
    margin: 0;
  }
  & .product-price-v2-default {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
  }
  & .product-price-v2-tax {
    grid-row: 2;
    grid-column: 2;
  }
}
.page-eufy-e35.page-eufy-e35 .LpNav-drop {
  & .LpNav-drop__price .product-price-v2-unit {
    grid-template-columns: auto auto auto;
    column-gap: 10px;
    row-gap: 3px;
  }
  & .product-price-v2-discount-rate-wrap {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
  }
  & .product-price-v2-sale {
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    line-height: 1.1;
  }
  & .product-price-v2-default {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
  }
  & .product-price-v2-tax {
    grid-row: 1 / 3;
    grid-column: 3;
    align-self: center;
  }
}
.page-eufy-e35.page-eufy-e35 .LpNav-drop .LpNav-drop__info {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  @media (min-width: 1080px) {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}
.page-eufy-e35.page-eufy-e35 .LpNav-drop {
  & .LpNav-drop__price .product-price-v2-unit {
    grid-template-columns: auto auto auto;
    column-gap: 10px;
    row-gap: 0;
  }
  & .product-price-v2-discount-rate-wrap {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    justify-self: start;
  }
  & .product-price-v2-sale {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    align-self: end;
  }
  & .product-price-v2-default {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
  }
  & .product-price-v2-tax {
    grid-row: 2;
    grid-column: 3;
    align-self: center;
    margin-left: -4px;
  }
}
.page-eufy-e35.page-eufy-e35 .LpNav-drop .LpNav-drop__price .product-price-v2-unit {
  row-gap: 2px;
}