/** Shopify CDN: Minification failed

Line 4748:7 Cannot use type selector "--deep" directly after nesting selector "&"
Line 4758:7 Cannot use type selector "--accent" directly after nesting selector "&"
Line 4768:7 Cannot use type selector "--sub" directly after nesting selector "&"
Line 4778:7 Cannot use type selector "--highlight-1" directly after nesting selector "&"
Line 4788:7 Cannot use type selector "--highlight-2" directly after nesting selector "&"

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

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

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


.page-eufy-c28 {
  --color-primary: #005D8E;
  --color-secondary: #2F333A;
  --color-accent: #005D8E;
  --color-bg: #F2F2F4;
  --color-bg-gray: #f5f5f5;
  --max-width: 1200px;
  --max-width-wide: 1440px;
  --font-en: "Mont", "Noto Sans JP", sans-serif;
font-feature-settings: "palt";
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-secondary);
  line-height: 1.8;
  letter-spacing: 0.03333em;

  
  /* Scroll Reveal */
  & .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;

    &.active {
      opacity: 1;
      transform: translateY(0);
      will-change: auto;
    }

    &.delay-1 {
      transition-delay: 0.3s;
    }

    &.delay-2 {
      transition-delay: 0.6s;
    }
  }

  & .reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;

    &.active {
      opacity: 1;
      transform: translateX(0);
      will-change: auto;
    }
  }

  /* Header Second */
  & .lp-hd-second {
    font-family: var(--font-en);
    z-index: 80;
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

    &.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    --h-hd-second: 48px!important;

    &.lp-hd-second-thum{
      display: none;
    }

    & .lp-hd-second-inr {
      display: grid;
      grid-auto-flow: column;
      align-items: center;
      justify-content: space-between;
      grid-template-columns: auto 1fr auto auto;
      width: 100%;
      padding: 0 0px 0 15px;
      gap: 4px;
 
      margin: 0 auto;

      @media (min-width: 769px) {
        gap: 16px;
        padding: 0 0px 0 20px;
      }
    }

    & .lp-hd-second-thum {
      display: none!important;

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

    & .lp-hd-second-heading {
      grid-column: span 2;
      font-size: 16px;
      font-family: var(--font-en);
      font-weight: 300;
      letter-spacing: 0.02em;
      color: var(--color-secondary);
      padding-top: 2px;

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

    & .lp-hd-second-price {
      font-size: 14px;

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

    & .lp-hd-second-btns {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;

      @media (min-width: 769px) {
        gap: 8px;
      }
    }

    & .lp-btn {
      background-color: var(--color-primary);
      border: 1px solid var(--color-primary);
      color: white;
      padding: 5px 50px 3px;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.05em;
      border-radius: 0px;
      text-decoration: none;
      transition: background-color 0.2s ease, color 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 47px;

      @media (min-width: 769px) {
        padding: 15px 50px;
        font-size: 14px;
        height: auto;
      }

      &:hover {
        background-color: white;
        color: var(--color-primary) !important;
      }
    }

    & .product-price-v2-unit {
      align-items: center;
      flex-direction: row !important;
    }

    & .product-price-v2-tax {
      margin: 0 0 0 -0.2em;
    }
  }

  /* Wrapper */
  & .wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;

    @media (min-width: 769px) {
      padding: 0 20px;
    }

    @media (min-width: 1440px) {
      max-width: var(--max-width-wide);
    }
  }

  /* ===================
     Hero - Key Visual (Mobile First)
  =================== */
  & .hero {
    --kv-text-color: #2F333A;

    position: relative;
    color: var(--kv-text-color);
    padding: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #EEEDF2;
    margin-top: -47px;

    &::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 30%;
      background: linear-gradient(to bottom, transparent 0%, #DFDEE3 70%);
      z-index: 1;
      pointer-events: none;
    }

    @media (min-width: 769px) {
      padding: 0;
      min-height: auto;
      margin-top: -50px;
    }

    @media (min-width: 1440px) {
      min-height: 700px;
      max-height: 85vh;
      padding: 0;
    }

    & .hero__background {
      display: none;

      @media (min-width: 769px) {
        display: block;
        width: 100%;
        z-index: 1;
        background: #FBFCFB;

        & img {
          width: 100%;
          height: auto;
          max-height: 85vh;
          object-fit: contain;
          display: block;
          position: relative;
          right: -2.7%;
          opacity: 0;
          animation: heroFadeIn 1.5s ease-out 0.2s forwards;
        }
      }
    }

    & .logo {
      position: absolute;
      top: 0px;
      left: 15px;
      z-index: 10;

      @media (min-width: 769px) {
        top: 0px;
        left: max(30px, calc(50% - 720px + 40px));
      }

      @media (min-width: 1440px) {
        left: calc(50% - 720px + 60px);
      }

      & img {
        width: 80px;
        height: auto;

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

    & .hero__container {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0;

      @media (min-width: 769px) {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        padding: 40px 40px 0px;
        display: grid;
        place-items: center;
        justify-content: flex-start;
      }

      @media (min-width: 1440px) {
        max-width: var(--max-width-wide);
        padding: 0 60px;
      }
    }

    & .hero__content {
      position: relative;
      z-index: 2;
      text-align: center;
      display: flex;
      flex-direction: column;
      height: 570px;
      overflow: hidden;
     

      @media (min-width: 769px) {
        text-align: left;
        max-width: 450px;
        padding-left: 20px;
        height: auto;
        overflow: visible;
      padding-bottom: 60px;
      }

      @media (min-width: 1440px) {
        max-width: 500px;
      }

      & > .m-sp {
        order: 3;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        margin: 0;
        z-index: -1;
        pointer-events: none;

        @media (min-width: 769px) {
          position: static;
          z-index: auto;
          pointer-events: auto;
        }
      }
    }

    & .hero__title {
      margin-bottom: 15px;
      padding-top: 80px;

      @media (min-width: 769px) {
        margin-bottom: 30px;
        padding-top: 0px;
      }
    }

    & .hero__main-title {
      font-size: 26px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.077em;
      color: var(--kv-text-color);
      margin: 0;

      @media (min-width: 769px) {
        font-size: 32px;
      }

      @media (min-width: 1440px) {
        font-size: 36px;
      }
    }

    & .hero__main-title-line-container {
      display: block;
      overflow: hidden;
      margin-bottom: 5px;
      padding-left: 5px;
      width: 95%;
      @media (min-width: 769px) {
        padding-left: 0;
        width: auto;
      }
    }

    & .hero__main-title-line {
      display: block;
      margin-right: -1em;
      @media (min-width: 769px) {
        margin: 0;
        margin-right: 0;
      }
    }

    & .hero__subtitle-container {
      margin-top: 18px;
      overflow: hidden;
    }

    & .hero__subtitle {
      font-size: 13px;
      margin: 0;
      color: var(--kv-text-color);
      line-height: 1.6;
      opacity: 0.5;
      letter-spacing: 0.05em;

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

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

    & .hero__product-info {
      order: 2;
      margin-top: 15px;

      @media (min-width: 769px) {
        order: unset;
        margin-top: 40px;
      }
    }

    & .hero__product-name {
      display: flex;
      flex-direction: column;
      align-items: center;

      @media (min-width: 769px) {
        align-items: flex-start;
      }
    }

    & .hero__product-brand {
      font-size: 14px;
      color: var(--kv-text-color);
      font-family: var(--font-en);
      font-weight: 500;
    }

    & .hero__product-model {
      font-size: 28px;
      font-weight: 500;
      color: var(--kv-text-color);
      font-family: var(--font-en);
      line-height: 1.2;

      @media (min-width: 769px) {
        font-size: 36px;
      }

      @media (min-width: 1440px) {
        font-size: 40px;
      }
    }

    & .m-sp {
      display: block;
      width: 100%;
      height: auto;
      margin: 0;

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

    & .m-pc {
      display: none;
    }
  }

  /* ===================
     Intro (Mobile First)
  =================== */
  & .intro {
    background: #DFDEE3;
    position: relative;
    z-index: 1;
    height: auto;
    padding: 30px 15px;
    overflow: clip;

    &::after {
      content: "";
            position: absolute;
            bottom: 24%;
            right: -80%;
            width: 500px;
            height: 500px;
            background: radial-gradient(ellipse 30% 80% at center, rgba(251, 252, 251, 1) 20%, rgba(251, 252, 251, 0.3) 40%, transparent 60%);
            filter: blur(2px);
            transform: rotate(-130deg);
            z-index: 0;
            pointer-events: none;

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

    }

    @media (min-width: 769px) {
      height: calc(700px + 100vh);
      padding: 0;
    }

    & .intro__inner {
      position: relative;
      top: 0;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 50px;
      z-index: 25;

      @media (min-width: 769px) {
        position: sticky;
        top: 60px;
        height: 700px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 60px;
        padding: 15px 60px 0;
        gap: 60px;
      }

      &:after{
       @media (min-width: 769px) {

        content: "";
        position: absolute;
        bottom: auto;
        top: -15%;
        right: -42%;
        width: 800px;
        height: 800px;
        background: radial-gradient(ellipse 30% 80% at center, rgba(251, 252, 251, 0.8) 20%, rgba(251, 252, 251, 0.3) 40%, transparent 60%);
        filter: blur(10px);
        transform: rotate(-130deg);
        z-index: 0;
        pointer-events: none;

       }
      }

    }

    & .intro__grid {
      display: flex;
      gap: 10px;
      order: 3;

      @media (min-width: 769px) {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        grid-template-rows: 1fr 1fr;
        gap: 16px;
        order: 0;
        width: 61.5%;
        flex-shrink: 0;
        max-height: 550px;
        margin-top: 10px;
      }
    }

    & .intro__image-box {
      border-radius: 12px;
      overflow: hidden;
      opacity: 0;

      &.is-visible {
        opacity: 1;
      }

      @media (min-width: 769px) {
        border-radius: 20px;
        transition: opacity 0.8s ease-out;
      }

      & img {
        width: 100%;
        height: 120%;
        object-fit: cover;
        display: block;
        will-change: transform, opacity, filter;
        transform: translateY(-10%) scale(1.2);
        opacity: 0;
        filter: blur(3px);
        transition: opacity 1s ease-out, filter 1s ease-out, transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      &.is-visible img {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(-10%) scale(1);
      }
    }

    /* 画像1（左上） */
    & .intro__img-left {
      flex: 1;
      min-width: 0;
      aspect-ratio: 4 / 5;

      @media (min-width: 769px) {
        aspect-ratio: auto;
        grid-column: 1;
        grid-row: 1;
      }
    }

    /* 画像2（中央メイン - 右列全体） */
    & .intro__img-center {
      flex: 1;
      min-width: 0;
      aspect-ratio: 4 / 4;

      @media (min-width: 769px) {
        aspect-ratio: auto;
        grid-column: 2;
        grid-row: 1 / 3;
      }

      & img {
        object-position: right;
      }
    }

    /* 画像3（左下 - img-leftの下） */
    & .intro__img-top-right {
      display: none;

      @media (min-width: 769px) {
        display: block;
        grid-column: 1;
        grid-row: 2;
      }

      & img {
        object-position: bottom;
      }
    }

    /* テキストエリア */
    & .intro__text-content {
      z-index: 20;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 0 auto;
      width: 95%;

      @media (min-width: 769px) {
        width: auto;
        flex: 1;
        min-width: 0;
        margin: 0;
        gap: 20px;
      }
    }

    & .intro__catchphrase {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: 1.7;
      color: var(--color-secondary);

      & span {
        display: block;
      }

      @media (min-width: 769px) {
        font-size: clamp(20px, 2vw, 34px);
      }
    }

    & .intro__desc,
    & .intro__brand-story,
    & .intro__conclusion {
      font-size: 14px;
      line-height: 2;
      color: #2f333a;
      opacity: 0.8;
      letter-spacing: 0.02em;

      @media (min-width: 769px) {
        font-size: clamp(13px, 1.1vw, 16px);
      }
    }
  }

  /* ===================
     Product Intro (Mobile First)
  =================== */
  & .product-intro {
    background: #DFDEE3;
    padding: 80px 15px 40px;
    position: relative;
    z-index: 2;
    margin-top: 0;

    @media (min-width: 769px) {
      background: linear-gradient(to bottom, transparent, #DFDEE3 16vh);
      padding: 20vh 0 0;
      margin-top: -100vh;
    }

  }

  /* ===================
     Product Intro 共通パーツ
  =================== */
  & .product-intro__inner {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;

    @media (min-width: 769px) {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 60px;
      padding: 40px 40px 77px;
    }

    @media (min-width: 1440px) {
      padding: 40px 60px;
    }
  }

  & .product-intro__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 3;
    align-items: center;
    width: 100%;

    @media (min-width: 769px) {
      flex: 1;
      width: auto;
      align-items: flex-start;
      max-width: 426px;
      gap: 12px;
      order: 1;
    }
  }

  & .product-intro__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    padding: 8px 10px 5px;
    width: fit-content;
    margin-bottom: 10px;

    & span {
      font-family: var(--font-en);
      font-weight: 500;
      font-size: 11px;
      color: var(--color-primary);
      letter-spacing: 0.84px;
      line-height: 1.5;

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

  & .product-intro__title-group {
    display: grid;
    gap: 5px;
  }

  & .product-intro__title {
    display: flex;
    flex-direction: column;
  }

  & .product-intro__title-small {
    font-family: var(--font-en);
    font-size: 18px;
    line-height: 1.2;
    color: #2f333a;
    text-align: center;

    @media (min-width: 769px) {
      font-size: 23px;
      text-align: left;
    }
  }

  & .product-intro__title-large {
    font-family: var(--font-en);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.2;
    color: #2f333a;
    text-align: center;

    @media (min-width: 769px) {
      font-size: 42px;
      text-align: left;
    }
  }

  & .product-intro__desc {
    font-size: 12px;
    color: #2f333a;
    opacity: 0.6;
    line-height: 2;
    margin: 0;

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

  & .product-intro__price {
    display: flex;
    align-items: flex-end;
    gap: 2px;
  }

  & .product-intro__price-main {
    font-size: 12px;
    color: #1a1a1a;
  }

  & .product-intro__price-tax {
    font-size: 7px;
    color: #666;
  }

  & .product-intro__divider {
    height: 1px;
    width: 100%;
    background-color: rgba(25, 25, 25, 0.1);
  }

  & .product-intro__cta {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
  margin-top: 7px;

    @media (min-width: 769px) {
      align-items: center;
      gap: 20px;
    }
  }

  & .product-intro__cta-text {
    & p {
      font-size: 10px;
      color: #2f333a;
      line-height: 1.5;
      letter-spacing: 1.12px;

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

  & .product-intro__cta-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 99999px;
    padding: 16px 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    width: 80%;
    border: 2px solid var(--color-primary);

    @media (min-width: 769px) {
      padding: 15px 33px;
      width: fit-content;
    }

    &:hover {
      background-color: #fff;
      color: var(--color-primary);
    }

    & svg {
      width: 24px;
      height: 18px;
      flex-shrink: 0;
    }

    & span {
      font-size: 13px;

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

  & .product-intro__cta-note {
    font-size: 10px;
    color: inherit;
  }

  & .product-intro__image {
    overflow: hidden;
    width: 95%;

    @media (min-width: 769px) {
      flex: 0 0 48%;
      width: auto;
    }

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

  & .app-under-product {
    padding: 40px 15px;

    @media (min-width: 769px) {
      padding: 60px 0;
    }
  }



  /* ===================
     Evolution (Mobile First)
  =================== */
  & .evolution {
    background: linear-gradient(to bottom, #DFDEE3 77%, #FFFFFF 100%);
    z-index: 10;
    position: relative;
  padding: 30px 15px 0;

  @media (min-width: 769px) {
    padding: 0;
    background: linear-gradient(to bottom, #DFDEE3 0%, #FFFFFF 100%);
  }

    & .evolution__inner {
      display: flex;
      flex-direction: column;
      gap:30px;

      @media (min-width: 769px) {
        flex-direction: row;
        gap: 40px;
        padding: 100px 0;
       width: min(87%, 1400px);
       margin: 0 auto;
      }
    }

    & .evolution__sidebar-inner {
      position: sticky;
      top: 40px;
      z-index: 20;
      @media (min-width: 769px) {
        padding: 40px 0;
      }
    }


    & .evolution__sidebar {

      @media (min-width: 769px) {
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }

     
    }

    & .evolution__sidebar-title {
      font-size: 42px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.05em;
      color: var(--color-secondary);

      @media (min-width: 769px) {
        font-size: clamp(2.8rem, 4.14vw, 58px);
      }


      & sup {
        font-size: 0.3em;
        font-weight: 500;
      position: relative;
      top: -1.8em;
      }

      & span {
        color: var(--color-primary);
      }
    }

    & .evolution__sidebar-note {
      margin-top: 16px;
      font-size: 10px;
      color: #999;
      line-height: 1.6;

      @media (min-width: 769px) {
        margin-top: 30px;
      }
    }

    /* メインコンテンツ */
    & .evolution__main {
      flex: 1;

      @media (min-width: 769px) {
        padding-top: 50px;
      }


    }

    /* プロダクトセクション共通 */
    & .evolution__product {
      margin-bottom: 30px;

      @media (min-width: 769px) {
        margin-bottom: 50px;
      }

      /* 最初のプロダクト（X10）のアイコン：ラインのみ */
      &:first-child .evolution__feature-icon {
        background-color: transparent;
        border: 1px solid #d1d5db;
      }
      &:first-child .evolution__feature-icon::before {
        filter: brightness(0);
      }
    }

    & .evolution__product-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;

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

    & .evolution__product-info-header {
      display: none;

      @media (min-width: 769px) {
        display: block;
        margin-bottom: 10px;
      }
    }

    & .evolution__product-layout {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 15px;

      @media (min-width: 769px) {
        gap: 30px;
      }
    }

    & .evolution__product-info {
      width: 45%;
      @media (min-width: 769px) {
        order: 1;
        width: 60%;
      }
    }

    & .evolution__product-image {
      width: 50%;
      filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));

      @media (min-width: 769px) {
        order: 2;
        width: 38%;
      }

      & img {
        width: 100%;
        height: auto;
      }
    }

    /* バッジ */
    & .evolution__badge {
      display: inline-block;
      padding: 4px 12px;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
    }

    & .evolution__badge--gold {
      background-color: #A6A283;
      margin-bottom: 0px;
      @media (min-width: 769px) {
        margin-bottom: 15px;
      }
    }

    & .evolution__badge--new {
      background-color: var(--color-primary);
      letter-spacing: 0.1em;
    }

    /* プロダクト名 */
    & .evolution__product-name {
      font-size: 2.5rem;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.02em;
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-family: var(--font-en);

      @media (min-width: 769px) {
        font-size: 5.5vw;
      }

      & b {
        font-size: 1.2em;
        font-weight: 700;
      }

      & span {
        font-size: 0.5em;
        font-weight: 500;

        @media (min-width: 769px) {
          font-size:2vw;
        }
      }
    }

    & .evolution__product-name--c28 {
      color: #005D8E;
      font-size: 3.8rem;

      @media (min-width: 769px) {
        font-size: 6vw;
      }
    }

    /* アイコングリッド */
    & .evolution__feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 5px;
      text-align: center;
      margin-top: 10px;

      @media (min-width: 769px) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
        margin-top: 0px;
      }
    }

    & .evolution__feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    & .evolution__feature-icon {
      width: min(92%, 22vw);
      aspect-ratio: 1;
      border-radius: 50%;
      border: none;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &.is-active {
        border: 1px solid transparent;
        background-image: linear-gradient(white, white), linear-gradient(135deg, rgba(0, 93, 142, 0.4), rgba(0, 165, 207, 0.4));
        background-origin: border-box;
        background-clip: padding-box, border-box;
      }

      &::before {
        content: "";
        display: block;
        width: 45%;
        height: 45%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      &.is-active::before {
        opacity: 1;
      }

      &.icon-suction::before {
        background-image: url("/cdn/shop/files/c28-icon-cyclone-v2.svg?v=1771245133");
      }

      &.icon-suction-x10::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-d-v2.svg?v=1763358364");
      }

      &.icon-mop-wash::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-a-v2.svg?v=1763358363");
      }

      &.icon-hair-removal::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-c-v2.svg?v=1763358364");
      }

      &.icon-auto-empty::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-e-v2.svg");
      }

      &.icon-obstacle::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-b-v2.svg");
      }

      &.icon-moplift::before {
        background-image: url("/cdn/shop/files/c28-moplift.svg?v=1770878015");
      }


      &.icon-ozone::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-f-v2.svg");
      }

      &.icon-duospiral::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-c-v2.svg?v=1763358364");
      }

      &.icon-roller-mop::before {
        background-image: url("/cdn/shop/files/Pressure-mop.svg?v=1770878121");
      }

      &.icon-roller-mop-x10::before {
        background-image: url("/cdn/shop/files/Pressure-mop-x10.svg?v=1770878774");
      }

      &.icon-mop-wash-b::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-a-v3.svg?v=1763451078");
      }

      &.icon-hair-removal-b::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-g-v2.svg");
      }
    }

    & .evolution__feature-label {
      font-size: 10px;
      line-height: 1.4;
      white-space: nowrap;
      letter-spacing: -0.04em;
      color: var(--color-secondary);

      &.is-active {
        color: var(--color-primary);
        font-weight: 500;
        letter-spacing: 0;
      }
    }

    /* 矢印 */
    & .evolution__arrow {
      display: flex;
      justify-content: center;
      color: #005D8E;

      @media (min-width: 769px) {
        padding: 16px 0;
      }

    }

    /* 比較カード */
    & .evolution__card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 30px;


      @media (min-width: 769px) {
        margin-top: 50px;
        gap: 12px;
        display: flex;
      flex-direction: row;
      }
    }

    & .evolution__card {
      background: #fff;
      border-radius: 10px;
      padding: 12px 10px 13px;
      display: flex;
      text-align: center;
      flex-direction: column;
      gap: 8px;
      flex: 1;

      @media (min-width: 769px) {
        padding: 15px 14px 18px;
      }
    }

    & .evolution__card-desc {
      font-size: 10px;
      color: #7b7b7b;
      margin: 0;
      line-height: 1.4;
      letter-spacing: 0.05em;
    }

    & .evolution__card-body {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-direction: column;

      @media (min-width: 769px) {
        gap: 15px;
        flex-direction: row;
      }
    }

    & .evolution__card-icon {
      flex-shrink: 0;
      width: 39px;
      height: 39px;

      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      &.icon-suction::before {
        background-image: url("/cdn/shop/files/c28-icon-cyclone-v2.svg?v=1771245133");
      }

      &.icon-roller-mop::before {
        background-image: url("/cdn/shop/files/Pressure-mop.svg?v=1770878121");
      }

      &.icon-duospiral::before {
        background-image: url("/cdn/shop/files/eufy-lineup-icon-c-v2.svg?v=1763358364");
      }
    }

    & .evolution__card-main {
      font-size: 12px;
      font-weight: 500;
      color: #1e3a5f;
      margin: 0;
      line-height: 1.4;
      text-align: center;
      @media (min-width: 769px) {
        font-size: 16px;
      }
    }

    & .evolution__card-accent {
      color: var(--color-primary);

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

    & .evolution__card-note {
      margin-top: 12px;
      font-size: 10px;
      color: #999;
      text-align: left;
    }


    & .evolution__footer {
      display: flex;
      justify-content: flex-end;

   
    }

    & .evolution__footer-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 500;
      color: var(--color-primary);
      text-decoration: none;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* ===================
     Summary (Mobile First)
  =================== */
  & .summary {
    padding: 40px 10px;
    background: #DFDEE3;
    position: relative;
    z-index: 10;

    @media (min-width: 769px) {
      padding: 24px 30px;
    }

    @media (min-width: 1440px) {
      padding: 30px 20px;
    }

    /* SP: 2列3行でビューポート内に収める / PC: 4列 */
    & .summary__grid {
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
      gap: 8px;

      @media (min-width: 769px) {
        max-height: none;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 12px;
      }

      @media (min-width: 1025px) {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
    }

    /* カード共通 */
    & .summary__card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background-color: #333;
      cursor: pointer;
      min-height: 0;
      display: block;
      text-decoration: none;
      color: inherit;

      @media (min-width: 1025px) {
        border-radius: 16px;
        max-height: 350px;
      }

      @media (min-width: 1440px) {
        max-height: 25vw;
      }

   
      &:hover {
        & .summary__card-img {
          transform: scale(1.08);
        }
      }
    }

    & .summary__card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    & .summary__card--dark {
      background-color: #000;

      & .summary__card-img {
        opacity: 0.6;
      }
    }

    /* オーバーレイ（上からグラデーション） */
    & .summary__card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%);
      padding:14px 12px;
      color: #fff;
      display: grid;
      align-content: start;
      gap: 4px;

      @media (min-width: 769px) {
        padding: 24px 20px;
        gap: 6px;
      }

      @media (min-width: 1025px) {
        padding: 24px;
        gap: 8px;
      }
    }

    & .summary__card-sub {
      font-size: 10px;
      font-weight: 500;
      opacity: 0.9;
      line-height: 1.3;

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

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

    & .summary__card-title {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;

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

    /* 下矢印ボタン */
    & .summary__card-btn {
      position: absolute;
      right: 10px;
      bottom: 12px;
      width: 34px;
      height: 34px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      color: #333;

      & svg {
        width: 18px;
        height: 18px;
      }

      @media (min-width: 769px) {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;

        & svg {
          width: 22px;
          height: 22px;
        }
      }

      @media (min-width: 1025px) {
        right: 20px;
        bottom: 20px;
      }
    }

    /* 右スタック（カード4+5） */
    & .summary__stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;

      @media (min-width: 769px) {
        flex-direction: row;
        gap: 12px;
        grid-column: 1 / -1;
      }

      @media (min-width: 1025px) {
        flex-direction: column;
        gap: 16px;
        grid-column: auto;
        max-height: 350px;
      }

      @media (min-width: 1440px) {
        max-height: 25vw;
      }


      & .summary__card {
        flex: 1;
        aspect-ratio: auto;
        min-height: 0;
      }
    }
  }

  /* ===================
     Purchase (Mobile First)
  =================== */
  & .purchase {
    padding: 60px 15px;

    @media (min-width: 769px) {
      padding: 80px 0px 0px;
    }

    & .purchase__inner {

      margin: 0 auto;

      @media (min-width: 769px) {
        width: 97%;
        max-width: 1900px;
      }
    }

    & .purchase__hero {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
      @media (min-width: 769px) {
        gap: 0px;
        overflow: hidden;
      }
    }

    & .purchase__image-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
      height: auto;
      aspect-ratio: 16 / 9;
      margin-bottom: 15px;
      opacity: 0;
      transform: translateY(24px) scale(0.98);
      transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;

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

      @media (min-width: 769px) {
        margin: 0;
        border-radius: 0;
      }

      &::after {
        display: none;
      }

      & video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      & .purchase__mute-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
          background-color: rgba(0, 0, 0, 0.7);
        }

        &:focus-visible {
          outline: 2px solid #fff;
          outline-offset: 2px;
        }
      }

      & .purchase__mute-btn-icon {
        display: none;
        width: 24px;
        height: 24px;

        & svg {
          width: 100%;
          height: 100%;
        }
      }

      & .purchase__mute-btn .purchase__mute-btn-icon--muted {
        display: block;
      }

      & .purchase__mute-btn.is-unmuted .purchase__mute-btn-icon--muted {
        display: none;
      }

      & .purchase__mute-btn.is-unmuted .purchase__mute-btn-icon--unmuted {
        display: block;
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .purchase__watermark {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      pointer-events: none;
      padding: 20px;
      opacity: 0.4;
      display: none;

      @media (min-width: 769px) {
        position: static;
        margin-top: 0px;
        padding-left: 10px;
        display: block;
        opacity: 1;
      }

      & h2 {
        font-size: 2rem;
        font-weight: 200;
        font-family: var(--font-en);
        color: #ffffff;
        line-height: 0.95;
        letter-spacing: -2px;
        text-align: center;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

        @media (min-width: 769px) {
          display: block;
          font-size: 3rem;
          color: #eee;
          letter-spacing: -3px;
          text-shadow: none;
          text-align: left;
        }

        & span {
          display: block;
          font-weight: 500;
          color: #ffffff;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

          @media (min-width: 769px) {
            color: #ddd;
            text-shadow: none;
          }
        }
      }
    }

    & .product-intro__header {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      gap: 0px;
      width: 100%;
      order: 5;
    }

    & .product-intro__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-primary);
      padding: 5px 10px 2px;
      width: fit-content;
      flex-shrink: 0;
      margin-bottom: 12px;

      @media (min-width: 769px) {
        margin-bottom: 15px;
      }
      & span {
        font-family: var(--font-en);
        font-weight: 500;
        font-size: 10px;
        color: var(--color-primary);
        letter-spacing: 0.84px;
        line-height: 1.5;

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

    & .product-intro__title-group {
      display: grid;
      gap: 5px;
    }

    & .product-intro__title {
      display: flex;
      flex-direction: column;
    }

    & .product-intro__title-small {
      font-family: var(--font-en);
      font-size: 9vw;
      line-height: 1;
      color: #2f333a;
      text-align: left;
      width: 100%;
      margin-bottom: -3px;

      @media (min-width: 769px) {
        font-size: 3.2vw;
        text-align: left;
        margin-bottom: 0;
        max-width: none;
      }

      @media (min-width: 1440px) {
        font-size: 37px;
      }

      & .product-intro__title-small--light {
        opacity: 0.6;
        font-size: 42%;
        margin-bottom: 3px;
        display: block;

        @media (min-width: 769px) {
          font-size: 50%; 
          margin-bottom:0;
        }
      }
    }

    & .product-intro__title-large {
      font-family: var(--font-en);
      font-size: 14px;
      line-height: 1.2;
      color: #2f333a;

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

    & .product-intro__price {
      display: flex;
      align-items: flex-end;
      gap: 2px;
    }

    & .product-intro__price-main {
      font-size: 12px;
      color: #1a1a1a;
    }

    & .product-intro__price-tax {
      font-size: 7px;
      color: #666;
    }

    & .product-intro__cta-text {
      font-size: 10px;
    }

    & .purchase__card {
      display: flex;
      flex-direction: column;
      padding: 0px 0;
      gap: 20px;

      @media (min-width: 769px) {
        position: relative;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;
        padding: 60px 0;
        gap: 25px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
      }

      &.is-card-visible {
        @media (min-width: 769px) {
          opacity: 1;
          transform: translateY(0);
        }
      }

      & .purchase__card-top {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;

        @media (min-width: 769px) {
          gap: 30px;
        }
      }

      & .purchase__card-cta-group {
        display: flex;
        flex-direction: column;
        gap: 10px;

        @media (min-width: 769px) {
          flex-shrink: 0;
          border-left: 1px solid rgba(25, 25, 25, 0.15);
          padding-left: 50px;
          padding-block: 15px;
        }

        & .product-intro__cta-note {
          font-size: 10px;
          color: inherit;
          text-align: center;
        }
      }

      & .product-intro__content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        width: 100%;
   
        order: 4;

        @media (min-width: 769px) {
          gap: 15px;
   
        }
      }

     

      & .product-intro__cta {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        width: 100%;
        position: relative;
        padding-top: 15px;
        border-top: 1px solid rgba(25, 25, 25, 0.15);

        @media (min-width: 769px) {
          align-items: center;
          border-top: none;
          gap: 10px;
          margin-top: 0;
   padding: 0;
        }
      }

      & .product-intro__cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 1px;
        background-color: rgba(25, 25, 25, 0.15);
        transition: width 1s ease-out 0.5s;
      }

      & .product-intro__cta.is-line-visible::before {
        width: 100%;
      }

      & .product-intro__cta-text {
        & p {
          font-size: 12px;
          color: #2f333a;
          opacity: 0.8;
          line-height: 1.5;
          letter-spacing: 1.12px;
          text-align: center;
          @media (min-width: 769px) {
            font-size: 12px;
          }
        }
      }

    

      & .product-intro__cta-btn {
        background-color: var(--color-primary);
        color: #fff;
        border: none;
        border-radius: 99999px;
        padding: 16px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease;
        white-space: nowrap;
        width: 100%;
        border: 2px solid var(--color-primary);

        @media (min-width: 769px) {
          padding: 12px 35px;
        }

        &:hover {
          background-color: #fff;
          color: var(--color-primary);
        }

        & svg {
          width: 24px;
          height: 18px;
          flex-shrink: 0;
        }

        & span {
          font-size: 13px;

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

      & .product-intro__image {
        overflow: hidden;
        width: 95%;
        display: flex;
                align-items: flex-end;

        @media (min-width: 769px) {
          flex: 0 0 48%;
          width: auto;
          height: 165px;
        }

        & img {
          width: 100%;
          height: auto;
          display: block;
          object-fit: contain;

          @media (min-width: 769px) {
            height: 100%;
          }
        }
      }
    }

    & .purchase__previews {
      display: flex;
      gap: 15px;
      flex: 1;

      & img {
        width: 50%;
        height: auto;
        object-fit: contain;
      }
    }

    & .purchase__info {
      flex: 1.2;
    }

    & .purchase__info-header {
      margin-bottom: 20px;

      & h3 {
        font-size: 26px;
        font-weight: 500;
        font-family: var(--font-en);
        color: #777;

        & span {
          font-weight: 500;
          color: #333;
        }
      }
    }

    & .list-wrap {
      width: 100%;

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

      & li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 12px;
      }

      & .sep-left {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;

        & img {
          width: 36px;
          height: auto;
        }

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

      & .sep-right {
        & .lp-btns {
          justify-content: flex-end;

          & li {
            border-bottom: none;
            padding: 0;
          }
        }
      }
    }
  }

  /* ===================
     HydroJet V2 Feature (Mobile First)
  =================== */
  & .hydrojet-v2 {
    background-color: var(--color-primary);
    color: #ffffff;
    overflow: visible;
    position: relative;

    @media (min-width: 769px) {
      padding-bottom: 100px;
    }

    & .hydrojet-v2__hero {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;

      @media (min-width: 769px) {
        height: 80vh;
        min-height: 700px;
      }

      &::after {
        content: "";
        display: block;
        flex: 1;
      }
    }

    & .hydrojet-v2__video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: #000;
      overflow: hidden;
    }

    & .hydrojet-v2__video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .hydrojet-v2__bg-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .hydrojet-v2__bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .hydrojet-v2__video-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(to bottom, transparent 55%, var(--color-primary) 100%),
        linear-gradient(160deg, rgba(0, 0, 0, 0.45) 0%, transparent 50%);
      z-index: 2;
    }

    & .hydrojet-v2__header-wrapper {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 60;
      pointer-events: none;
      display: flex;
      justify-content: center;
      padding-top: 40px;

      @media (min-width: 769px) {
        padding-top: 60px;
      }
    }

    & .hydrojet-v2__header-inner {
      width: 100%;
      max-width: var(--max-width-wide);
      padding: 0 15px;
      @media (min-width: 769px) {
        padding: 0;
        width: 95%;
      }

    }

    & .hydrojet-v2__sticky-header {
      & h2 {
        font-size: 26px;
        font-weight: 500;
        line-height: 1.3;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 0 60px rgba(0, 0, 0, 0.1);
        transform-origin: left top;
        will-change: transform;
        backface-visibility: hidden;
        color: #ffffff;
        margin: 0;
        opacity: 0;
        filter: blur(8px);
        transition: opacity 0.7s ease-out, filter 0.7s ease-out;

        &.is-visible {
          opacity: 1;
          filter: blur(0);
        }

        @media (min-width: 769px) {
          font-size: 55px;
        }

        & span {
          display: inline-block;
          position: relative;
          width: fit-content;
          margin-bottom: 10px;
          padding-bottom: 8px;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #ffffff;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
          }

          &.line-active::after {
            transform: scaleX(1);
          }
        }
      }
    }

    & .hydrojet-v2__content-wrapper {
      max-width: var(--max-width-wide);
      margin: 0 auto;
      padding: 0 15px 30px;
      position: relative;
      z-index: 10;

      @media (min-width: 769px) {
        padding: 0;
        width: 95%;
      }
    }

    & .hydrojet-v2__container {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      width: 100%;
      margin: 0 auto;
      height: 480px;

      @media (min-width: 960px) {
        flex-direction: row;
        gap: 30px;
        height: 550px;
        align-items: stretch;
      }

      @media (max-width: 768px) {
        height: auto;
      }
    }

    & .hydrojet-v2__main-content {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: rgba(30, 41, 59, 1);
      min-height: 430px;

      @media (min-width: 960px) {
        width: 73%;
        min-height: 480px;
      }
    }

    & .hydrojet-v2__slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      pointer-events: none;

      &.active {
        opacity: 1;
        pointer-events: auto;
      }
    }


    & .hydrojet-v2__main-image-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 65%;
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 45%;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(30, 41, 59, 0.4) 35%,
          rgba(30, 41, 59, 0.85) 75%,
          rgba(30, 41, 59, 1) 100%
        );
        z-index: 1;
        pointer-events: none;
      }

      @media (min-width: 769px) {
        height: 100%;

        &::after {
          display: none;
        }
      }
    }

    & .hydrojet-v2__slide[data-index="2"] .hydrojet-v2__main-image-wrapper {
      @media (max-width: 768px) {
        height: 50%;
      }
    }

    & .hydrojet-v2__slide-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.05);
      transition: transform 2s ease-out;
    }

    & .hydrojet-v2__slide.active .hydrojet-v2__slide-image {
      transform: scale(1);
    }

    & .hydrojet-v2__gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(30, 41, 59, 0.15) 25%,
        rgba(30, 41, 59, 0.5) 55%,
        rgba(30, 41, 59, 0.9) 85%,
        rgba(30, 41, 59, 1) 100%
      );
      pointer-events: none;
      z-index: 1;

      @media (min-width: 769px) {
        background: linear-gradient(
          90deg,
          rgba(15, 23, 42, 0.9) 0%,
          rgba(20, 30, 45, 0.5) 20%,
          rgba(25, 35, 50, 0.2) 40%,
          transparent 65%
        );
      }
    }

    & .hydrojet-v2__pin {
      position: absolute;
      width: 30px;
      height: 30px;
      background: white;
      color: var(--color-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      z-index: 5;
    }

    & .hydrojet-v2__text-content {
      position: absolute;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      bottom: 0;
      left: 0;
      padding:25px 24px;

      @media (min-width: 769px) {
        padding: 4.2% 0 4% 4%;
        gap: 15px;
        width: 100%;
        max-width: 80%;
        bottom: auto;
        top: 0;
      }

      &.hydrojet-v2__pos-bottom-left {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          align-items: flex-start;
          left: 0;
          top: auto;
          bottom: 0;
          transform: none;
          justify-content: flex-end;
          text-align: left;
        }
      }

      &.hydrojet-v2__pos-top-left {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          align-items: flex-start;
          top: auto;
          bottom: 0;
          justify-content: flex-end;
        }

        &.hydrojet-v2__pos-bottom {
          @media (min-width: 769px) {
            top: auto;
            bottom: 0;
            transform: none;
            justify-content: flex-end;
          }
        }
      }
    }
    

    & .hydrojet-v2__text-header {
      display: flex;
      flex-direction: column;
      gap: 5px;

      @media (min-width: 769px) {
        gap: 15px;  
      }
    }

    & .hydrojet-v2__pos-top-left {
      @media (min-width: 769px) {
        top: 0;
        left: 0;
      }
    }

    & .hydrojet-v2__pos-bottom-left {
      bottom: 0;
      left: 0;

      @media (min-width: 769px) {
        bottom: 0;
        top: auto;
        align-items: flex-start;
        justify-content: flex-end;
        max-width: 500px;
        width: auto;
      }
    }

    & .hydrojet-v2__pos-top-right {
      top: 0;
      right: 0;
      text-align: right;
      align-items: flex-end;
    }

    & .hydrojet-v2__main-title {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      font-feature-settings: "palt";
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 1);
      margin: 0;

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

    & .hydrojet-v2__main-subtitle {
      font-size:18px;
      font-weight: 500;
      line-height: 1.4;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      margin: 0;

      @media (min-width: 769px) {
        font-size: 24px;
      }
    }

    & .hydrojet-v2__main-description {
      font-size: 12px;
      font-weight: 500;
      line-height: 1.7;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      margin: 0;
      letter-spacing: 0.01em;

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

    & .hydrojet-v2__content-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 0;

      @media (min-width: 769px) {
        gap: 15px;
        margin-bottom: 0;
      }
    }

    & .hydrojet-v2__section-title {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.1em;
      font-feature-settings: "palt";
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 1);
      margin: 0;

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

    & .hydrojet-v2__gradient-text {
      background: linear-gradient(135deg, #787DFF 0%, #3ADB67 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    & .hydrojet-v2__comparison-section {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      flex-direction: column;

      @media (min-width: 769px) {
        gap: 15px;
      }
    }

    & .hydrojet-v2__comparison-title {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.2;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      margin: 10px 0 0;

      @media (min-width: 769px) {
        font-size: 12px;
        width: auto;
        margin-top: 0;
      }
    }

    & .hydrojet-v2__comparison-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
      width: 100%;

      @media (min-width: 769px) {
        gap: 10px;
        width: 80%;
      }
    }

    & .hydrojet-v2__comparison-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      padding: 0;
      height: 80px;
      @media (min-width: 769px) {
        height: 120px;
      }
    }

    & .hydrojet-v2__comparison-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      object-position: bottom;
    }

    & .hydrojet-v2__comparison-label {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      padding: 4px 0;
      margin: 0;
      width: 100%;
      text-align: center;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

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

    & .hydrojet-v2__description {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 1);
      margin: 0;
      opacity: 0.8;

      @media (min-width: 769px) {
        opacity: 1;
        font-size: 14px;
        max-width: 285px;
      }
    }

    & .hydrojet-v2__feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-top: 5px;

      @media (min-width: 769px) {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        gap: 10px;
      }
    }

    & .hydrojet-v2__feature-item {
      display: flex;
      align-items: center;
      gap: 13px;
      font-size: 12px;
      color: rgba(255, 255, 255, 1);
      margin: 0;

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

    & .hydrojet-v2__feature-num {
      width: 20px;
      height: 20px;
      background: white;
      color: rgba(36, 41, 47, 1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: bold;
      flex-shrink: 0;

      @media (min-width: 769px) {
        width: 25px;
        height: 25px; 
        font-size: 11px;
      }
    }

    & .hydrojet-v2__feature-text {
      line-height: 1.2;
    }

    & .hydrojet-v2__tabs-container {
      width: 100%;
      display: flex;
      justify-content: space-between;

      @media (min-width: 960px) {
        width: 27%;
        flex-direction: column;
      }
    }

    & .hydrojet-v2__tab {
      flex: 1;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

     @media (min-width: 769px) {
      padding: 0 20px 0 0 ;
     }
      
    }

    & .hydrojet-v2__tab-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      flex-direction: column;
      transition: opacity 0.3s, transform 0.3s;
      @media (min-width: 769px) {
        flex-direction: row;
      }
    }

    & .hydrojet-v2__tab.active .hydrojet-v2__tab-inner {
      opacity: 1;
  
    }

    & .hydrojet-v2__thumbnail {
      width: 100%;

      aspect-ratio: 1 / 0.8;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: rgba(51, 65, 85, 1);

      @media (min-width: 769px) {
        aspect-ratio: 1 / 1;
        height: 100%;
        width: 85px;
      }

      & img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .hydrojet-v2__tab-label {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.4;
      color: #fff;
      height: 35px;
      text-align: center;

      @media (min-width: 769px) {
        font-size: 16px; 
        height: auto;
        text-align: left;
      }
    }

    & .hydrojet-v2__progress-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: transparent;
    }

    & .hydrojet-v2__progress-bar {
      height: 100%;
      width: 0%;
      background: #fff;
    }

    & .hydrojet-v2__tab.active .hydrojet-v2__progress-bar {
      animation: hydrojetProgressAnim 10s linear forwards;
    }

    /* モバイル対応 */
    @media (max-width: 768px) {
      & .hydrojet-v2__container {
        flex-direction: column;
        height: auto;
      }

 
      & .hydrojet-v2__tabs-container {
        width: 100%;
        gap: 10px;
      }

      & .hydrojet-v2__tab {
        padding:0 0 12px;

      }
    }
  }

  /* ===================
     Cleaning - 清掃性能 (Mobile First)
  =================== */
  & .cleaning {
    background-color: #5891B0;
    color: #ffffff;
    overflow: visible;
    position: relative;

    @media (min-width: 769px) {
      padding-bottom: 100px;
    }

    & .cleaning__hero {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;

      @media (min-width: 769px) {
        height: 80vh;
        min-height: 700px;
      }

      &::after {
        content: "";
        display: block;
        flex: 1;
      }
    }

    & .cleaning__video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: #000;
      overflow: hidden;
    }

    & .cleaning__bg-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .cleaning__video-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(to bottom, transparent 55%, #5891B0 100%),
        linear-gradient(160deg, rgba(0, 0, 0, 0.45) 0%, transparent 50%);
      z-index: 2;
    }

    & .cleaning__header-wrapper {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 60;
      pointer-events: none;
      display: flex;
      justify-content: center;
      padding-top: 40px;

      @media (min-width: 769px) {
        padding-top: 60px;
      }
    }

    & .cleaning__header-inner {
      width: 100%;
      max-width: var(--max-width-wide);
      padding: 0 15px;
      @media (min-width: 769px) {
        padding: 0;
        width: 95%;
      }
    }

    & .cleaning__sticky-header {
      & h2 {
        font-size: 26px;
        font-weight: 500;
        line-height: 1.3;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 0 60px rgba(0, 0, 0, 0.1);
        transform-origin: left top;
        will-change: transform;
        backface-visibility: hidden;
        color: #ffffff;
        margin: 0;
        opacity: 0;
        filter: blur(8px);
        transition: opacity 0.7s ease-out, filter 0.7s ease-out;

        &.is-visible {
          opacity: 1;
          filter: blur(0);
        }

        @media (min-width: 769px) {
          font-size: 55px;
        }

        & span {
          display: inline-block;
          position: relative;
          width: fit-content;
          margin-bottom: 10px;
          padding-bottom: 8px;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #ffffff;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
          }

          &.line-active::after {
            transform: scaleX(1);
          }
        }
      }
    }

    & .cleaning__content-wrapper {
      max-width: var(--max-width-wide);
      margin: 0 auto;
      padding: 10px 15px 30px;
      position: relative;
      z-index: 10;

      @media (min-width: 769px) {
        padding: 0;
        width: 95%;
      }
    }

    & .cleaning__container {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      width: 100%;
      margin: 0 auto;
      height: 480px;

      @media (min-width: 960px) {
        flex-direction: row;
        gap: 30px;
        height: 550px;
        align-items: stretch;
      }

      @media (max-width: 768px) {
        height: auto;
      }
    }

    & .cleaning__main-content {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: rgba(30, 55, 75, 1);
      min-height: 430px;

      @media (min-width: 960px) {
        width: 73%;
        min-height: 480px;
      }
    }

    & .cleaning__slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      pointer-events: none;

      &.active {
        opacity: 1;
        pointer-events: auto;
      }
    }

    & .cleaning__main-image-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 65%;
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(to bottom, transparent, rgba(30, 55, 75, 1));
        z-index: 1;
        pointer-events: none;
      }

      @media (min-width: 769px) {
        height: 100%;

        &::after {
          display: none;
        }
      }
    }

    & .cleaning__slide-placeholder {
      width: 100%;
      height: 100%;
      background: rgba(30, 55, 75, 0.5);
    }

    & .cleaning__slide-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.05);
      transition: transform 2s ease-out;
    }

    & .cleaning__slide.active .cleaning__slide-image {
      transform: scale(1);
    }

    & .cleaning__gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(30, 55, 75, 1) 100%);
      pointer-events: none;
      z-index: 1;

      @media (min-width: 769px) {
        background: linear-gradient(270deg, rgba(20, 40, 60, 0.7) 0%, transparent 60%);
      }
    }

    & .cleaning__text-content {
      position: absolute;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      bottom: 0;
      left: 0;
      padding:25px 24px;

      @media (min-width: 769px) {
        padding: 4.2% 0 4% 4%;
        gap: 15px;
        width: 100%;
        max-width: 80%;
        bottom: auto;
        top: 0;
      }

      &.cleaning__pos-top-left {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          align-items: flex-start;
          left: 0;
          top: 0;
          bottom: auto;
          transform: none;
          justify-content: flex-start;
          text-align: left;
        }
      }

      &.cleaning__pos-top-right {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          left: auto;
          right: 0;
          top: 0;
          bottom: auto;
          padding: 45px 45px 45px 0;
          align-items: flex-end;
          text-align: right;
          justify-content: flex-start;
        }
      }

      &.cleaning__pos-bottom-right {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          left: auto;
          right: 0;
          top: auto;
          bottom: 0;
          padding: 45px 45px 45px 0;
          align-items: flex-start;
          text-align: left;
          justify-content: flex-end;
        }
      }
    }

    & .cleaning__text-header {
      display: flex;
      flex-direction: column;
      gap: 5px;

      @media (min-width: 769px) {
        gap: 12px;
      }
    }

    & .cleaning__main-title {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      font-feature-settings: "palt";
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 1);
      margin: 0;

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

    & .cleaning__main-subtitle {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      margin: 0;

      @media (min-width: 769px) {
        font-size: 24px;
      }
    }

    & .cleaning__description {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 1);
      margin: 0;
      opacity: 0.8;

      @media (min-width: 769px) {
        opacity: 1;
        font-size: 14px;
        max-width: 375px;
      }
    }

    & .cleaning__note {
      font-size: 10px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
      margin: 8px 0 0;

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

    & .cleaning__tabs-container {
      width: 100%;
      display: flex;
      justify-content: flex-start;

      @media (min-width: 960px) {
        width: 27%;
        flex-direction: column;
      }
    }

    & .cleaning__tab {
      flex: 0 0 25%;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      @media (min-width: 769px) {
        padding: 0 20px 0 0;
      }
    }

    & .cleaning__tab-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      flex-direction: column;
      transition: opacity 0.3s, transform 0.3s;

      @media (min-width: 769px) {
        flex-direction: row;
      }
    }

    & .cleaning__tab.active .cleaning__tab-inner {
      opacity: 1;
    }

    & .cleaning__thumbnail {
      width: 100%;
      aspect-ratio: 1 / 0.8;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: rgba(40, 70, 95, 1);

      @media (min-width: 769px) {
        aspect-ratio: 1 / 1;
        height: 100%;
        width: 85px;
      }

      & img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .cleaning__tab-label {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.4;
      color: #fff;
      height: 35px;
      text-align: center;

      @media (min-width: 769px) {
        font-size: 16px;
        height: auto;
        text-align: left;
      }
    }

    & .cleaning__progress-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: transparent;
    }

    & .cleaning__progress-bar {
      height: 100%;
      width: 0%;
      background: #fff;
    }

    & .cleaning__tab.active .cleaning__progress-bar {
      animation: hydrojetProgressAnim 10s linear forwards;
    }

    /* モバイル対応 */
    @media (max-width: 768px) {
      & .cleaning__container {
        flex-direction: column;
        height: auto;
      }

      & .cleaning__tabs-container {
        width: 100%;
        gap: 10px;
      }

      & .cleaning__tab {
        padding: 0 0 12px;
      }
    }
  }

  /* ===================
     Maintenance - メンテナンス (Mobile First)
  =================== */
  & .maintenance {
    background-color: #92B5C8;
    color: #ffffff;
    overflow: visible;
    position: relative;

    @media (min-width: 769px) {
      padding-bottom: 100px;
    }

    & .maintenance__hero {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;

      @media (min-width: 769px) {
        height: 80vh;
        min-height: 700px;
      }

      &::after {
        content: "";
        display: block;
        flex: 1;
      }
    }

    & .maintenance__video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: #000;
      overflow: hidden;
    }

    & .maintenance__bg-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    & .maintenance__video-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(to bottom, transparent 55%, #92B5C8 100%),
        linear-gradient(160deg, rgba(0, 0, 0, 0.45) 0%, transparent 50%);
      z-index: 2;
    }

    & .maintenance__header-wrapper {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 60;
      pointer-events: none;
      display: flex;
      justify-content: center;
      padding-top: 40px;

      @media (min-width: 769px) {
        padding-top:60px;
      }
    }

    & .maintenance__header-inner {
      width: 100%;
      max-width: var(--max-width-wide);
      padding: 0px 15px;
      @media (min-width: 769px) {
        padding: 0;
        width:95%;
      }
    }

    & .maintenance__sticky-header {
      & h2 {
        font-size: 26px;
        font-weight: 500;
        line-height: 1.3;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 0 60px rgba(0, 0, 0, 0.1);
        transform-origin: left top;
        will-change: transform;
        backface-visibility: hidden;
        color: #ffffff;
        margin: 0;
        opacity: 0;
        filter: blur(8px);
        transition: opacity 0.7s ease-out, filter 0.7s ease-out;

        &.is-visible {
          opacity: 1;
          filter: blur(0);
        }

        @media (min-width: 769px) {
          font-size: 55px;
        }

        & span {
          display: inline-block;
          position: relative;
          width: fit-content;
          margin-bottom: 10px;
          padding-bottom: 8px;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #ffffff;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
          }

          &.line-active::after {
            transform: scaleX(1);
          }
        }
      }
    }

    & .maintenance__content-wrapper {
      max-width: var(--max-width-wide);
      margin: 0 auto;
      padding: 0px 15px 30px;
      position: relative;
      z-index: 10;

      @media (min-width: 769px) {
        padding: 0;
        width: 95%;
      }
    }

    & .maintenance__container {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      width: 100%;
      margin: 0 auto;
      height: 480px;

      @media (min-width: 960px) {
        flex-direction: row;
        gap: 30px;
        height: 550px;
        align-items: stretch;
      }

      @media (max-width: 768px) {
        height: auto;
      }
    }

    & .maintenance__main-content {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: rgba(60, 90, 110, 1);
      min-height: 430px;

      @media (min-width: 960px) {
        width: 73%;
        min-height: 480px;
      }
    }

    & .maintenance__slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      pointer-events: none;

      &.active {
        opacity: 1;
        pointer-events: auto;
      }
    }

    & .maintenance__main-image-wrapper {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 50%;
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(to bottom, transparent, rgba(60, 90, 110, 1));
        z-index: 1;
        pointer-events: none;
      }

      @media (min-width: 769px) {
        height: 100%;

        &::after {
          display: none;
        }
      }
    }

    & .maintenance__slide-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.05);
      transition: transform 2s ease-out;
    }

    & .maintenance__slide.active .maintenance__slide-image {
      transform: scale(1);
    }

    & .maintenance__gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(60, 90, 110, 1) 100%);
      pointer-events: none;
      z-index: 1;

      @media (min-width: 769px) {
        background: linear-gradient(270deg, rgba(50, 75, 95, 0.7) 0%, transparent 60%);
      }
    }

    & .maintenance__text-content {
      position: absolute;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      bottom: 0;
      left: 0;
      padding:25px 24px;

      @media (min-width: 769px) {
        padding:4.2% 0 4% 4%;
        gap: 15px;
        width: 100%;
        max-width: 80%;
        bottom: auto;
        top: 0;
      }

      &.maintenance__pos-top-left {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          align-items: flex-start;
          top: 50%;
          bottom: auto;
          transform: translateY(-50%);
          justify-content: center;
        }
      }

      &.maintenance__pos-top-right {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          left: auto;
          right: 0;
          top: 0;
          bottom: auto;
          padding: 45px 45px 45px 0;
          align-items: flex-end;
          text-align: right;
          justify-content: flex-start;
        }
      }

      &.maintenance__pos-bottom-right {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          left: auto;
          right: 0;
          top: auto;
          bottom: 0;
          padding: 45px 45px 45px 0;
          align-items: flex-end;
          text-align: right;
          justify-content: flex-end;
        }
      }

      &.maintenance__pos-right-center {
        @media (min-width: 769px) {
          max-width: 380px;
          width: auto;
          left: auto;
          right: 0;
          top: 50%;
          bottom: auto;
          transform: translateY(-50%);
          padding: 45px 45px 45px 0;
          align-items: flex-start;
          text-align: left;
          justify-content: center;
        }
      }

      &.maintenance__pos-bottom-left {
        @media (min-width: 769px) {
          max-width: 500px;
          width: auto;
          left: 0;
          right: auto;
          top: auto;
          bottom: 0;
          padding: 45px 0 45px 45px;
          align-items: flex-start;
          text-align: left;
          justify-content: flex-end;
        }
      }
    }

    & .maintenance__text-header {
      display: flex;
      flex-direction: column;
      gap: 5px;

      @media (min-width: 769px) {
        gap: 15px;
      }
    }

    & .maintenance__main-title {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      font-feature-settings: "palt";
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 1);
      margin: 0;

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

    & .maintenance__main-subtitle {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      margin: 0;

      @media (min-width: 769px) {
        font-size: 24px;
      }
    }

    & .maintenance__description {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 1);
      margin: 0;
      opacity: 0.8;

      @media (min-width: 769px) {
        opacity: 1;
        font-size: 14px;
        max-width: 375px;
      }
    }

    & .maintenance__content-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 5px;

      @media (max-width: 768px) {
        & .maintenance__feature-image {
          width: 64%;
          max-width: 100%;
          border-radius: 6px;
          overflow: hidden;
        }
      }

      @media (min-width: 769px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 10px;
      }

      &.maintenance__content-section--popup {
        width: fit-content;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 999px;
        padding: 8px 14px 8px 18px;
        cursor: pointer;
        text-align: center;
        font-family: inherit;
        justify-content: center;
        gap: 8px;

        @media (max-width: 768px) {
          & .maintenance__feature-image {
            display: none;
          }
        }

        @media (min-width: 769px) {
          width: 100%;
          border: none;
          border-radius: 12px;
          padding: 0;
          text-align: left;
          justify-content: flex-start;

          & .maintenance__popup-plus {
            display: none;
          }
        }
      }
    }

    & .maintenance__section-title {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.2;
      font-feature-settings: "palt";
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 1);
      margin: 0;

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

    & .maintenance__popup-plus {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      color: rgba(255, 255, 255, 0.9);
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
    }

    & .maintenance__popup-trigger {
      background: none;
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }

    & .maintenance__popup-trigger-icon {
      color: rgba(255, 255, 255, 0.9);
      font-size: 16px;
      line-height: 1;
    }

    & .maintenance__popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      opacity: 0;
      padding: 0 15px;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.35s ease, visibility 0.35s ease;

      &.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      &.is-active .maintenance__popup {
        animation: maintenance-popup-fade-in 0.35s ease forwards;
      }

      @media (min-width: 769px) {
        display: none !important;
      }
    }

    @keyframes maintenance-popup-fade-in {
      from {
        opacity: 0;
        transform: scale(0.96);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    & .maintenance__popup {
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      padding: 24px 20px;
      width: 100%;
      max-width: none;
      position: relative;
    }

    & .maintenance__popup-close {
      position: absolute;
      top: 8px;
      right: 12px;
      background: none;
      border: none;
      font-size: 28px;
      line-height: 1;
      color: #333;
      cursor: pointer;
      padding: 0;
    }

    & .maintenance__popup-title {
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.08em;
      font-feature-settings: "palt";
      color: #333;
      margin: 0 0 16px;
    }

    & .maintenance__popup-image {
      width: 100%;

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

    & .maintenance__feature-image {
      width: 100%;
      max-width: 365px;


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

    & .maintenance__tabs-container {
      width: 100%;
      display: flex;
      justify-content: flex-start;

      @media (min-width: 960px) {
        width: 27%;
        flex-direction: column;
      }
    }

    & .maintenance__tab {
      flex: 0 0 25%;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      @media (min-width: 769px) {
        padding: 0 20px 0 0;
      }
    }

    & .maintenance__tab-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      flex-direction: column;
      transition: opacity 0.3s, transform 0.3s;

      @media (min-width: 769px) {
        flex-direction: row;
      }
    }

    & .maintenance__tab.active .maintenance__tab-inner {
      opacity: 1;
    }

    & .maintenance__thumbnail {
      width: 100%;
      aspect-ratio: 1 / 0.8;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: rgba(70, 100, 120, 1);

      @media (min-width: 769px) {
        aspect-ratio: 1 / 1;
        height: 100%;
        width: 85px;
      }

      & img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .maintenance__tab-label {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.4;
      color: #fff;
      height: 35px;
      text-align: center;

      @media (min-width: 769px) {
        font-size: 16px;
        text-align: left;
        height: auto;
      }
    }

    & .maintenance__progress-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: transparent;
    }

    & .maintenance__progress-bar {
      height: 100%;
      width: 0%;
      background: #fff;
    }

    & .maintenance__tab.active .maintenance__progress-bar {
      animation: hydrojetProgressAnim 10s linear forwards;
    }

    /* モバイル対応 */
    @media (max-width: 768px) {
      & .maintenance__container {
        flex-direction: column;
        height: auto;
      }

      & .maintenance__tabs-container {
        width: 100%;
        gap: 10px;
      }

      & .maintenance__tab {
        padding: 0 0 12px;
      }
    }
  }

  /* ===================
     App Customize (Mobile First)
  =================== */
  & .app-customize {
    background: linear-gradient(30deg, #F3E9EA 2.32%, #D6D9E1 18.57%, #5695B7 48.84%, #0B6594 95.35%);
    overflow: hidden;
    margin: 20px 15px;
    border-radius: 24px;

    @media (min-width: 769px) {
      background: linear-gradient(73deg, #F3E9EA 2.32%, #D6D9E1 18.57%, #5695B7 48.84%, #0B6594 95.35%);
      margin: 40px 30px;
      border-radius: 32px;
    }

    & .app-customize__inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 15px 0;
      position: relative;

    

      & > * {
        position: relative;
        z-index: 1;
      }

      @media (min-width: 769px) {
        justify-content: center;
        align-items: flex-start;
        flex-direction: row-reverse;
        padding: 0px 120px 0 0px;
        gap: 60px;
      }
    }

    & .app-customize__content {
      color: #ffffff;
      width: 100%;
      margin-bottom: 20px;
      display: grid;
      gap: 30px;
      box-sizing: border-box;

      @media (min-width: 769px) {
        flex: 1.5 1 0;
        min-width: 0;

        max-width: 600px;
        margin-bottom: 0;
        gap: 30px;
        padding: 80px 0;
      }
    }

    & .app-customize__title {
      font-size: 24px;
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: 1.4;
      color: #ffffff;
      text-align: center;

      @media (min-width: 769px) {
        font-size: 32px;
      }

    
    }

    /* Feature Icons */
    & .app-customize__features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;

      @media (min-width: 769px) {
        gap: 24px;

      }
    }

    & .app-customize__feature {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-width: 0;
    }

    & .app-customize__icon-circle {
      width: 100%;
      aspect-ratio: 1;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px;
      box-sizing: border-box;

      & img {
        width: 35%;
        height: auto;
        object-fit: contain;
        flex-shrink: 0;
      }

      & p {
        font-size: 10px;
        font-weight: 500;
        line-height: 1.4;
        color: #ffffff;
        text-align: center;
        margin: 0;
      }

      @media (min-width: 769px) {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 180px;
        gap: clamp(6px, 0.6vw, 10px);
        padding: clamp(10px, 1.2vw, 16px);

        & img {
          width: clamp(36px, 4vw, 60px);
          height: auto;
        }

        & p {
          font-size: clamp(10px, 0.9vw, 12px);
        }
      }
    }

    /* Glass Card */
    & .app-customize__card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      @media (min-width: 769px) {
        flex-direction: row;
        padding: 32px;
        gap: 24px;
      }
    }

    & .app-customize__card-logo {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      overflow: hidden;
      flex-shrink: 0;

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

      @media (min-width: 769px) {
        width: 56px;
        height: 56px;
      }
    }

    & .app-customize__card-body {

      & h3 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 12px;
        color: #ffffff;
        letter-spacing: 0.05em;

        @media (min-width: 769px) {
          font-size: 18px;
          margin-bottom: 16px;
        }
      }

      & p {
        font-size: 12px;
        font-weight: 300;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 12px;

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

    & .app-customize__card-note {
      font-size: 10px !important;
      opacity: 0.5;
    }

    & .app-customize__card-link {
      color: white;
      text-decoration: none;
      font-size: 12px;

      &:hover {
        color: white !important;
      }

      & svg {
        fill: white;
      }
    }

    /* Phone Image */
    & .app-customize__phone {
      display: flex;
      justify-content: center;
      width: 100%;
      align-self: flex-end;

      @media (min-width: 769px) {
        width: 45%;
        max-width: 45%;
        min-width: 0;
        align-self: flex-end;
        align-items: flex-end;
      }
    }

    & .app-customize__phone-img {
      width: 70%;
      height: auto;
      display: block;

      @media (min-width: 769px) {
        width: 95%;
        max-width: 100%;
        padding-top: 60px;
      }
    }
  }

  /* ===================
     Section Divider
  =================== */
  & .section-divider {
    height: 1px;
    background-color: rgba(25, 25, 25, 0.12);
    margin: 0;
    margin-left: 5%;
    max-width: var(--max-width-wide);
    width: 0;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);

    &.is-visible {
      width: 90%;
    }
  }

  /* ===================
     Other Features - その他の便利機能 (Mobile First)
  =================== */
  & .other-features {
    padding: 60px 15px;

    @media (min-width: 769px) {
      padding: 100px 40px;
    }

    & .other-features__container {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 40px;

      @media (min-width: 769px) {
        flex-direction: row;
        gap: 48px;
        width: 95%;
      }
    }

    /* Sidebar - sticky on both SP & PC */
    & .other-features__sidebar {
      width: 100%;

      @media (min-width: 769px) {
        width: 33.333%;
        flex-shrink: 0;
      }
    }

    & .other-features__sticky {
      position: sticky;
      top: 80px;

      @media (max-width: 768px) {
        top: 20px;
        z-index: 10;
      }
    }

    & .other-features__title {
      font-size: 24px;
      font-weight: 300;
      letter-spacing: 0.05em;
      line-height: 1.4;
      color: var(--color-secondary);
      margin: 0;

      @media (min-width: 769px) {
        font-size: 32px;
      }
    }

    /* SP: Splide slider */
    & .other-features__slider {
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      position: relative;

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

    & .other-features__arrows {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 30%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      padding: 0 5px;
      pointer-events: none;
    }

    & .other-features__arrows .splide__arrow {
      position: static;
      transform: none !important;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;

      cursor: pointer;
      transition: opacity 0.2s;

      &:disabled {
        opacity: 0.3;
      }

      & svg {
        transform: none !important;
        width: 24px;
        height: 24px;
        fill: none !important;
        color: var(--color-secondary);
      }
    }

    /* PC: Main content */
    & .other-features__main {
      display: none;

      @media (min-width: 769px) {
        display: flex;
        width: 66.666%;
        flex-direction: column;
        gap: 40px;
      }
    }

    & .other-features__item {
      display: flex;
      flex-direction: column;
      gap: 16px;

      @media (min-width: 769px) {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        padding-bottom: 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
    }

    & .other-features__image {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 12px;
      background: #f3f4f6;
      flex-shrink: 0;

      & img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 18 / 12;
        object-fit: cover;
        will-change: transform;

        @media (min-width: 768px) {
          aspect-ratio: 16 / 11;
        }

        @media (min-width: 769px) {
          transform: scale(1.05);
        }
      }

      @media (min-width: 769px) {
        width: 55%;
      }
    }

    & .other-features__image-overlay {
      position: absolute;
      top: 15px!important;
      left: 15px!important;
      width: 24%!important;
      height: autp!important;
      aspect-ratio: auto!important;
      object-fit: contain!important;
      z-index: 1;
    }

    & .other-features__text {
      width: 100%;
      display: grid;
      gap: 5px;

      @media (min-width: 768px) {
        gap: 12px;
      }

      & h3 {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 1.5;
        color: var(--color-secondary);
        margin: 0;

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

      & p {
        font-size: 13px;
        line-height: 1.8;
        color: #4b5563;
        margin: 0;

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

      @media (min-width: 769px) {
        width: 50%;
      }
    }

    & .other-features__note {
      font-size: 10px !important;
      color: #9ca3af !important;
    }
  }

  /* ===================
     UGC and Brand Section - YouTubeレビュー & ブランド
  =================== */
  & .ugc-brand-wrapper {
    background-color: transparent;
    transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    & .ugc-brand__bg-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(60px);
      z-index: 0;
      opacity: 0;
      transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    & .ugc-brand__bg-noise {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("/cdn/shop/files/sleep_lp_noise.jpg?v=1757499602");
      background-repeat: repeat;
      background-size: 200px 200px;
      opacity: 0;
      z-index: 1;
      pointer-events: none;
      transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    & .ugc-brand__blob {
      position: absolute;
      border-radius: 50%;
      mix-blend-mode: normal;
      will-change: transform;
      animation: ugcBlobMove linear infinite alternate;

      &--deep {
        width: 20vw;
        height: 20vw;
        background: #B8B5C4;
        top: 10%;
        left: 5%;
        opacity: 0.7;
        animation-duration: 35s;
      }

      &--accent {
        width: 18vw;
        height: 18vw;
        background: #C8D5E3;
        bottom: 15%;
        right: 8%;
        opacity: 0.6;
        animation-duration: 40s;
      }

      &--sub {
        width: 15vw;
        height: 15vw;
        background: #D0CDD8;
        top: 40%;
        left: 50%;
        opacity: 0.5;
        animation-duration: 45s;
      }

      &--highlight-1 {
        width: 12vw;
        height: 12vw;
        background: #ECEAF2;
        top: 20%;
        right: 25%;
        opacity: 0.8;
        animation-duration: 25s;
      }

      &--highlight-2 {
        width: 14vw;
        height: 14vw;
        background: #E8E6EE;
        bottom: 30%;
        left: 30%;
        opacity: 0.6;
        animation-duration: 30s;
      }
    }

    &.is-visible {
      & .ugc-brand__bg-canvas {
        opacity: 1;
      }

      & .ugc-brand__bg-noise {
        opacity: 0.05;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom left, rgba(255, 255, 255, 0.8) 10%, transparent 30%);
      z-index: 1;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    & .Ugc,
    & .Brand {
      position: relative;
      z-index: 2;
    }

    &.is-visible {
      background: #DFDEE3;

      & .heading,
      & .txt,
      & .brand__title,
      & .brand__text,
      & h3,
      & p,
      & .amazon,
      & .lp-youtube-desc,
      & .lp-youtube-user-name,
      & a,
      & .lp-txtLink {
        color: #151523 !important;
      }

      & .toptxt {
        color: rgba(21, 21, 35, 0.6) !important;
      }

      & .highlight {
        color: #151523 !important;
      }

      & .bv2-txt {
        color: rgba(21, 21, 35, 0.6) !important;
      }

      & .brand__button-text {
        background: var(--color-primary);
        color: #ffffff !important;
      }
    }
  }

  & .Ugc {
    padding: 60px 15px 0 !important;

    @media (min-width: 769px) {
      padding: 120px 40px 0 !important;
    }

      & .wrapper {
        max-width: var(--max-width-wide);
        margin: 0 auto;
        padding: 0;

        
      }

      & .heading {
        font-size: 24px !important;
        font-weight: 300 !important;
        letter-spacing: 0.05em !important;
        line-height: 1.4 !important;
        color: var(--color-secondary) !important;
        margin-bottom: 30px !important;
        display: flex !important;
        gap: 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        @media (min-width: 769px) {
          gap: 15px !important;
          align-items: center !important;
          flex-direction: row !important;
          font-size: 32px !important;
          margin-bottom: 40px !important;
        }
      }

      & .sns-icon {
        width: 50px;
        height: auto;
        max-width: none;
        display: block;
        margin: 0;

        @media (min-width: 769px) {
          width: 65px;
        }
      }

      & .txt {
        color: var(--color-secondary);
        font-weight: 300;
        letter-spacing: 0.05em;
        line-height: 1.4;
      }

      & .ugc-items {
        display: flex;
        gap: 10px;
        margin-right: calc(((100vw - 100%) / 2) * -1);
        padding-right: 15px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 30px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

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

        @media (min-width: 769px) {
          gap: 15px;
          margin: 0;
          padding: 0 0 30px;
        }
      }

      & .container {
        &.-youtube {
          .lp-youtube {
            flex-shrink: 0;
            width: 75vw;
            max-width: 720px;

            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.4) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);

            @media (min-width: 769px) {
              max-width: 100%;
              width: 450px;
            }
          }
        }
      }
    }

  & .Brand {
    padding: 60px 15px !important;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 190px;
      opacity: 0.3;
      mix-blend-mode: overlay;
      pointer-events: none;
      z-index: 1;
    }
    @media (min-width: 769px) {
      padding: 100px 40px !important;
    }

      & .brand__container {
        max-width: var(--max-width-wide);
        margin: 0 auto;
        position: relative;
        overflow: hidden;

       
        min-height: 450px;
        display: flex;
        align-items: flex-start;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: transform 0.3s ease;
        background: #31363e;
        border-radius:16px;

        @media (min-width: 769px) {
          min-height: 570px;
          border-radius:20px;
        }

        &:hover {
          text-decoration: none;
          color: inherit;

          & .brand__background-image {
            transform: scale(1.02);
          }
        }
      }

      & .brand__background-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        overflow: hidden;
        transition: transform 0.6s ease;
        transform-origin: center center;

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

      & .brand__content {
        position: relative;
        z-index: 2;
        padding: 30px;
        width: 100%;
        display: flex;
        align-items: flex-start;
        text-align: left;
        flex-direction: column;
        gap: 16px;
        justify-content: flex-end;
        min-height: 100%;

        @media (min-width: 769px) {
          padding: 88px 93px;
          text-align: left;
          align-items: flex-start;
          justify-content: center;
          gap: 38px;
        }
      }

      & .brand__text {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      & .brand__title {
        font-size: 24px !important;
        font-weight: 300 !important;
        letter-spacing: 0.05em !important;
        line-height: 1.4 !important;
        color: var(--color-secondary) !important;
        margin: 0 !important;

        @media (min-width: 769px) {
          font-size: 32px !important;
          line-height: 1.3 !important;
        }
      }

      & .brand__button-text {
        background: var(--color-primary);
        color: white;
        padding: 10px 35px;
        border-radius: 100px;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.05em;
        line-height: 1.4;
        transition: opacity 0.2s;

        @media (min-width: 769px) {
          padding: 20px 70px;
        }

        &:hover {
          opacity: 0.9;
        }
      }

      & .wrapper {
        max-width: var(--max-width-wide);
        margin: 0 auto;
      }

      & .ae-wrap {
        margin-top: 40px;

        @media (min-width: 769px) {
          margin-top: 60px;
        }
      }

      & .ae-wrap {
        & .wrapper {
          max-width: var(--max-width-wide);
          margin: 0 auto;
        }

        & .column {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          padding-bottom: 50px;

          @media (min-width: 769px) {
            width: min(1440px, 90%);
            margin: 0 auto;
            padding-bottom: 50px;
          }

          &.one-column {
            width: 100%;
            @media (min-width: 769px) {
              width: 100%;
            }
          }

          & .img-column {
            display: grid;
            gap: 30px;
            width: auto;
            place-items: center;

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

          & .img {
            &.-d {
              display: grid;
              gap: 5px;
              place-items: center;
              width: 90%;

              @media (min-width: 769px) {
                padding: 20px;
                gap: 30px;
                width: auto;
              }

              & .amazon {
                font-size: 12px;
                color: rgba(255, 255, 255, 0.8);
                text-align: center;
                margin: 0;

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

              & .c-badge {
                display: flex;
                gap: 10px;
                justify-content: center;
                margin-top: 20px;
                align-items: flex-end;
                width: 100%;

                @media (min-width: 769px) {
                  width: auto;
                  gap: 25px;
                  margin-top: 0;
                  align-items: flex-end;
                  flex-direction: row;
                }

                & .continuous {
                  display: flex;
                  gap: 3px;
                  justify-content: center;
              flex-direction: column;
                  align-items: center;
                  width: 100%;

                  @media (min-width: 769px) {
                    justify-content: flex-start;
                    flex-direction: row;
                    align-items: flex-end;
                    width: 60%;
                  }

                  & .sub {
                    font-size: 12px;
                    line-height: 1.3;
                    letter-spacing: 0.15em;
                    color:#005D8E;

                    @media (min-width: 769px) {
                      font-size: 25px;
                    }
                  }


                  & .en {
                    font-size: 100px;
                    line-height: 0.6;
                    color:#005D8E;
                    font-family: var(--font-en);

                    @media (min-width: 769px) {
                      font-size: 260px;
                    }
                  }
                }

                & .badge {
                  width: 70%;
                  height: auto;
                  object-fit: contain;

                  @media (min-width: 769px) {
                    height: 200px;
                    width: 91%;
                  }
                }


               
              }
            }
          }
        }
      }

      & .g-container {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
        width: 100%;
        padding: 0px 0 0;
        margin-top: 40px;

        @media (min-width: 769px) {
          gap: 0px;
          padding: 0px 0;
          grid-template-columns: 1fr 1fr;
          width: min(1440px, 90%);
          margin-top: 60px;
        }

        & .guarantee {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 30px;

          @media (min-width: 769px) {
            gap: 40px;
          }

          &:first-child {
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            padding-bottom: 40px;
            margin-bottom: 40px;

            @media (min-width: 769px) {
              padding-bottom: 0;
              margin-bottom: 0;
              border-bottom: none;
              border-right: 1px solid rgba(255, 255, 255, 0.5);
              padding-right: 40px;
            }
          }

          &:last-child {
            @media (min-width: 769px) {
              padding-left: 40px;
            }
          }

          & .g-img {
            width: 80%;

           
          }

          & .txt {
            display: grid;
            gap: 20px;

            & .toptxt {
              display: block;
              color: rgba(255, 255, 255, 0.6);
              font-size: 12px;
              margin-bottom: 15px;

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

            & h3 {
              font-size: 24px;
              font-weight: 300;
              letter-spacing: 0.05em;
              line-height: 1.4;
              color: rgba(255, 255, 255, 0.8);
              margin: 0;

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

              & .highlight {
                color: #ffffff;
              }
            }

            & .bv2-txt {
              font-size: 12px;
              font-weight: 300;
              letter-spacing: 0.05em;
              line-height: 1.8;
              color: rgba(255, 255, 255, 0.6);
              margin: 0;

              @media (min-width: 769px) {
                font-size: 14px;
                line-height: 1.75;
              }
            }

            & .is-more {
              text-align: left;

              & a {
                color:#1a1a1a;

                
              }

              & svg {
                fill:#1a1a1a;
              }
            }
          }
        }
      }
    }


}

/* ===================
   Hero Animation (e25参考) - グローバルスコープ
=================== */
.hero-fade-in {
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out forwards;
}

.hero-fade-in--delay-1 {
  animation-delay: 1.5s;
}

.hero-fade-in--delay-2 {
  animation-delay: 2.8s;
}

.hero-fade-in--delay-3 {
  animation-delay: 2.1s;
}

.hero-fade-in--delay-sh4 {
  animation-delay: 2.3s;
}

/* Hero Slide Up Delays */
.hero-slide-up[data-delay="0"] {
  animation-delay: 0.9s;
}

.hero-slide-up[data-delay="200"] {
  animation-delay: 1.3s;
}

.hero-slide-up:not([data-delay]) {
  animation-delay: 1.5s;
}

/* Hero Slide Up Animation */
.hero-slide-up {
  opacity: 0;
  transform: translateY(15px);
  animation: heroSlideUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ugcBlobMove {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(15%, 10%) rotate(90deg) scale(1.1); }
  100% { transform: translate(-10%, 20%) rotate(180deg) scale(0.9); }
}

@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}