/** Shopify CDN: Minification failed

Line 4391:5 Cannot use type selector "--primary" directly after nesting selector "&"
Line 4392:5 Cannot use type selector "--primary" directly after nesting selector "&"
Line 4393:5 Cannot use type selector "--lg" directly after nesting selector "&"
Line 4528:5 Cannot use type selector "--light" directly after nesting selector "&"

**/
/* ============================================================
   v2-top-scene-finder（トップ: シーンから探す + 診断バー）
   [A] 汎用: themeV2 トップ共通トークン（--txt-black / --txt-gray / --border-gray / --clr-anker）
   [B] 型流用: スライダーは両側フルブリード + コンテナ揃え（wlcs4 .extras 型）
   [C] LP固有: 幅パターン切替（demo）
   ============================================================ */

/* [A] ── セクション ── */
.v2-scene {
  --s-ink: var(--txt-black, #1a1a1a);
  --s-sub: var(--txt-gray, #666);
  --s-line: var(--border-gray, #e6e6e6);
  --s-accent: #00cbeb;
  --s-accent-dark: #00b4d0;
  --s-w: 1080px;
  --s-pad-min: 20px;
  --s-pad: var(--s-pad-min);
  --s-tile-h: 200px;
  --s-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --s-l: 22px;
  --s-m: 13px;
  --s-s: 11px;
  display: grid;
  gap: 16px;
  margin-block: 28px;

  @media (min-width: 1080px) {
    --s-pad: max(var(--s-pad-min), calc((100% - var(--s-w)) / 2));
    --s-tile-h: 260px;
    --s-l: 24px;
    --s-m: 14px;
    --s-s: 12px;
    gap: 24px;
    margin-block: 40px;
  }

  &[data-width="wide"] {
    --s-w: var(--top-w, min(1440px, 94%));

    @media (min-width: 1080px) {
      --s-tile-h: auto;
      --s-tile-ar: 9 / 10;
    }
  }

  &[data-width="full"] {
    --s-w: var(--top-w, min(1728px, calc(100% - 80px)));

    @media (min-width: 1080px) {
      --s-pad-min: 40px;
      --s-tile-h: 320px;
    }
  }

  & .v2-scene__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding-inline: var(--s-pad);

    & .heading {
      margin: 0;
      font-size: var(--s-l);
      font-weight: 400;
      line-height: 1.25;
    }
  }

  & .v2-scene__lead {
    margin: 0;
    font-size: var(--s-s);
    color: var(--s-sub);
  }

  /* [B] ── シーンタイル（SP: 横スクロール / PC: 4列グリッド） ── */
  & .v2-scene__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

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

    @media (min-width: 1080px) {
      overflow: visible;
      scroll-snap-type: none;
    }
  }

  & .v2-scene__list {
    display: flex;
    gap: 10px;
    width: max-content;
    margin: 0;
    padding: 0 var(--s-pad);
    list-style: none;

    @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      width: calc(100% - 2 * var(--s-pad));
      max-width: var(--s-w);
      margin: 0 auto;
      padding: 0;
    }
  }

  & .v2-scene__item {
    flex: 0 0 42vw;
    scroll-snap-align: start;

    &:last-child {
      scroll-snap-align: end;
    }

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

  & .v2-scene__tile {
    position: relative;
    display: block;
    height: var(--s-tile-h);
    aspect-ratio: var(--s-tile-ar, auto);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 100%);
    overflow: hidden;
    color: var(--s-ink);
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      /* 写真を暗くしすぎない: 下 1/2 だけ、文字が読める最小限の落とし */
      background:
        linear-gradient(
          to top,
          rgba(0, 0, 0, 0.5) 0%,
          rgba(0, 0, 0, 0.42) 8%,
          rgba(0, 0, 0, 0.33) 16%,
          rgba(0, 0, 0, 0.24) 24%,
          rgba(0, 0, 0, 0.16) 32%,
          rgba(0, 0, 0, 0.1) 40%,
          rgba(0, 0, 0, 0.05) 48%,
          rgba(0, 0, 0, 0.02) 56%,
          rgba(0, 0, 0, 0) 64%
        );
      pointer-events: none;
    }

  }

  & .v2-scene__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--s-ease);
  }

  /* hover で写真だけ少し寄る（ユーザー要望。SP のタッチでは動かさない） */
  @media (hover: hover) {
    & .v2-scene__tile:hover .v2-scene__img {
      transform: scale(1.05);
    }
  }

  & .v2-scene__label {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
    display: grid;
    gap: 4px;
    max-width: calc(100% - 32px);
    color: #fff;

    @media (min-width: 1080px) {
      left: 22px;
      bottom: 20px;
      gap: 6px;
    }

    & b {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.3;
      white-space: nowrap;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);

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

    & small {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 12px;
      letter-spacing: 0.02em;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.88);
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);

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

  /* [A] ── 診断バー（クリックで伸縮。見出しが設問に切り替わり、チップが順に浮かぶ） ── */
  & .v2-scene__finder {
    --finder-inset: 0px;
    position: relative;
    scroll-margin-top: 90px;
    justify-self: center;
    width: calc(100% - 2 * var(--s-pad));
    max-width: var(--s-w);

    &::before {
      content: "";
      position: absolute;
      inset: 0 var(--finder-inset);
      border: 1px solid var(--s-line);
      border-radius: 40px;
      background: #fff;
      pointer-events: none;
      transition:
        inset 0.45s var(--s-ease) 0.22s,
        border-radius 0.45s var(--s-ease) 0.22s;
    }

    &.is-open::before {
      inset: 0;
      border-radius: 20px;
      transition-delay: 0s;

      @media (min-width: 1080px) {
        border-radius: 24px;
      }
    }

    &:has(.v2-scene__finder-bar:focus-visible)::before {
      outline: 2px solid var(--s-accent);
      outline-offset: -2px;
    }

    &.is-open {
      & .v2-scene__finder-bar {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: auto;
        min-height: 0;
        padding: 0;

        @media (min-width: 1080px) {
          top: 12px;
          right: 12px;
        }
      }

      & .v2-scene__finder-titles {
        display: none;
      }

      & .v2-scene__finder-body {
        padding-top: 10px;

        @media (min-width: 1080px) {
          padding-top: 12px;
        }
      }

      & .v2-scene__finder-slot .v2-finder__bar {
        min-height: 36px;
        padding-right: 48px;

        @media (min-width: 1080px) {
          min-height: 44px;
          padding-right: 56px;
        }
      }
    }
  }

  & .v2-scene__finder-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 12px 10px 12px 18px;
    border: 0;
    background: none;
    color: var(--s-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    pointer-events: none;
    transition: none;

    @media (min-width: 1080px) {
      min-height: 72px;
      gap: 24px;
      padding: 14px 14px 14px 40px;
    }

    & > * {
      pointer-events: auto;
    }

    &:focus-visible {
      outline: none;
    }

    &:hover .v2-scene__finder-cta {
      background: var(--s-accent-dark);
      border-color: var(--s-accent-dark);
    }
  }

  & .is-open .v2-scene__finder-bar:hover .v2-scene__finder-cta {
    border-color: var(--s-ink);
    background: #fff;
    color: var(--s-ink);
  }

  & .v2-scene__finder-titles {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: grid;
    transform: translateX(var(--finder-inset));
    transition: transform 0.45s var(--s-ease) 0.22s;

    & > span {
      grid-area: 1 / 1;
      overflow: hidden;
      font-size: clamp(13px, 3.5vw, 17px);
      font-weight: 400;
      line-height: 1.4;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition:
        opacity 0.28s var(--s-ease),
        transform 0.28s var(--s-ease);

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

  & .is-open .v2-scene__finder-titles,
  & .is-open .v2-scene__finder-cta {
    transform: translateX(0);
    transition-delay: 0s;
  }

  & .is-open .v2-scene__finder-cta {
    margin-left: 0;
  }

  & .v2-scene__finder-cta {
    position: relative;
    flex-shrink: 0;
    display: grid;
    margin-left: auto;
    min-height: 36px;
    border: 1px solid var(--s-accent);
    border-radius: 999px;
    background: var(--s-accent);
    color: #fff;
    font-size: clamp(12px, 3.1vw, 14px);
    font-weight: 400;
    white-space: nowrap;
    transform: translateX(calc(-1 * var(--finder-inset)));
    transition:
      transform 0.45s var(--s-ease) 0.22s,
      background-color 0.3s var(--s-ease),
      border-color 0.3s var(--s-ease),
      color 0.3s var(--s-ease);

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

    & > span {
      grid-area: 1 / 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      transition: opacity 0.25s var(--s-ease);

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

      &::after {
        content: "";
        width: 5px;
        height: 5px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-1px) rotate(45deg);
        transition: transform 0.35s var(--s-ease);
      }
    }
  }

  & .v2-scene__finder-cta-close {
    opacity: 0;

    & svg {
      display: block;
    }

    & .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
  }

  & .is-open .v2-scene__finder-cta {
    width: 36px;
    min-height: 36px;
    overflow: hidden;
    border-color: var(--s-line);
    border-radius: 50%;
    background: #fff;
    color: var(--s-sub);

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

    & > span {
      padding: 0;

      &::after {
        content: none;
      }
    }

    & .v2-scene__finder-cta-open {
      display: none;
    }
  }

  & .is-open .v2-scene__finder-cta-open {
    opacity: 0;
  }

  & .is-open .v2-scene__finder-cta-close {
    opacity: 1;
  }

  & .v2-scene__finder-panel {
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    contain: inline-size;
    transition: grid-template-rows 0.4s var(--s-ease);
  }

  & .is-open .v2-scene__finder-panel {
    grid-template-rows: 1fr;
    transition-delay: 0.3s;
  }

  & .v2-scene__finder-clip {
    min-height: 0;
    overflow: hidden;
  }

  & .v2-scene__finder-body {
    display: grid;
    gap: 12px;
    padding: 8px 18px 20px;

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

  & .v2-scene__finder-slot.is-off {
    display: none;
  }

  & .v2-scene__loading .v2-finder__loading {
    animation: v2-finder-in 0.3s var(--s-ease) both;
  }

  & .v2-scene__finder-slot .v2-finder__card {
    border-radius: 16px;
  }

  & .v2-scene__finder-body {
    min-height: 80px;
  }
}

/* [C] ── 幅パターン: トップの他セクション・ヘッダー・KV を連動 ── */
html[data-top-width="wide"] {
  --top-w: min(1440px, 94%);
}

/* ワイド2: 最大 1360px・左右は最低 80px ずつ空ける（JS の syncTopWidth と同じ式） */
@media (min-width: 1080px) {
  html[data-top-width="wide"][data-top-variant="2"] {
    --top-w: min(1360px, calc(100% - 160px));
  }
}

html[data-top-width="full"] {
  --top-w: min(1728px, calc(100% - 80px));
}

@media (min-width: 1080px) {
  html[data-top-width] {
    & .v2-header-main {
      width: var(--top-w);
    }

    & .v2-info-carousel .splide__track {
      height: calc(var(--top-w) * 4 / 9);
    }

    & .v2-info-carousel .splide::before,
    & .v2-info-carousel .splide::after {
      width: calc((100% - var(--top-w)) / 2);
    }

    :is(
      .v2-info-carousel-single-img,
      .v2-brand-new-products,
      .v2-sale-products-list,
      .v2-categories,
      .v2-products-ranking,
      .reco-container,
      .v2-articles-list .wrapper,
      #anker-magazine-featured .wrapper,
      .v2-brand-list,
      .l-inr-md
    ) {
      width: auto;
      max-width: var(--top-w);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-scene * {
    animation: none !important;
    transition: none !important;
  }
}

/* [C] ── 探すハブ：カテゴリタイル（整理版のみ表示） ── */
.v2-scene {
  & .v2-scene__cats {
    display: none;
    margin-bottom: 28px;

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

    & .v2-scene__head {
      justify-content: space-between;
      margin-bottom: 14px;

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

  & .v2-scene__more {
    font-size: var(--s-s);
    color: var(--s-sub);
    text-decoration: none;

    &::after {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      margin-left: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-2px) rotate(-45deg);
    }

    &:hover {
      color: var(--s-accent);
    }
  }

  & .v2-scene__cat-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 10px;
    width: calc(100% - 2 * var(--s-pad));
    margin: 0 auto;
    padding: 0;
    list-style: none;

    @media (min-width: 1080px) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 36px 16px;
      max-width: var(--s-w);
    }
  }

  & .v2-scene__cat {
    display: grid;
    gap: 10px;
    justify-items: center;

    @media (min-width: 1080px) {
      gap: 14px;
    }
    text-decoration: none;
    color: var(--s-ink);

    &:hover .v2-scene__cat-label {
      color: inherit;
    }
  }

  & .v2-scene__cat-visual {
    display: grid;
    place-items: center;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 0;
    background: none;
    overflow: hidden;

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

    & img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: var(--crop-x, 50%) var(--crop-y, 50%);
      transform: scale(var(--crop-zoom, 1));
      transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
    }
  }

  & .v2-scene__cat-icon {
    width: 28px;
    height: 28px;
    color: var(--s-accent);

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

  & .v2-scene__cat-label {
    font-size: var(--s-s);
    font-weight: 400;
    line-height: 1.4;
    text-align: center;

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

html:not([data-top-layout="report"]) .v2-products-ranking .items article:nth-of-type(n + 8) {
  display: none;
}

/* [C] ── 整理版（Clarity レポート構成）：並び替え・削除・圧縮 ── */
html[data-top-layout="report"] {
  & .v2-scene__cats {
    display: block;
  }

  & .themeV2:has(> .shopify-section[id*="v2-top-scene-finder"]) {
    display: flex;
    flex-direction: column;

    & > .shopify-section {
      min-width: 0;
      width: 100%;

      & .v2-info-carousel,
      & .splide {
        min-width: 0;
        max-width: 100%;
      }
    }

    /* KV は 1080px デザインのまま（幅・高さ・枚数とも標準と同じ） */
    & .v2-info-carousel {
      --top-w: 1080px;
    }

    & > [id*="v2-top-info-carousel"] { order: 1; }
    & > [id*="home-banner"] { order: 2; }
    & > [id*="v2-top-scene-finder"] { order: 3; }
    & > [id*="v2-top-brand-new-products"] { order: 4; }
    & > [id*="v2-top-products"]:not([id*="ranking"]) { order: 5; }
    & > [id*="v2-featured-articles"] { order: 6; }
    & > [id*="v2-top-editorial"] { order: 7; }
    & > [id*="v2-top-products-ranking"] { order: 8; }
    & > [id*="v2-featured-magazine"] { order: 9; }
    & > [id*="v2-top-brand-list"] { order: 10; }
    & > [id*="browsing-history-products"] { order: 11; }

    & > [id*="v2-top-categories-all"],
    & > [id*="rec-history"],
    & > [id*="browsing-history-products"] {
      display: none;
    }
  }

  /* ワイド2: セクション内は シーンから探す → シーンタイル → 診断 → 製品を探す（グレー帯） */
  &[data-top-variant="2"] .v2-scene {
    --s-tile-h: auto;
    --s-tile-ar: 2 / 3;
    margin-top: 48px;

    @media (min-width: 1080px) {
      --s-tile-ar: 4 / 5;
      margin-top: 80px;
    }

    & > .v2-scene__cats { order: 1; }
    & > .v2-scene__head { order: 2; }
    & > .v2-scene__viewport { order: 3; }
    & > .v2-scene__finder { order: 4; }

    & .v2-scene__cats {
      width: 100%;
      margin: 0 0 40px;
      padding-block: 0;
      background: none;

      @media (min-width: 1080px) {
        margin-bottom: 72px;
      }
    }


    & .v2-scene__finder {
      margin-top: 28px;

      @media (min-width: 1080px) {
        margin-top: 48px;
      }
    }
  }

  /* ワイド2: 製品を探す（グレー帯）はタイトル中央寄せ・グリッドを少し中央に寄せる */
  &[data-top-variant="2"] .v2-scene__cats {
    & .v2-scene__head {
      justify-content: center;

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

    & .heading {
      text-align: center;
    }

    & .v2-scene__cat-list {
      @media (min-width: 1080px) {
        gap: 44px 0;
        max-width: min(var(--s-w), 1040px);
      }
    }

    & .v2-scene__cat {
      @media (min-width: 1080px) {
        gap: 6px;
      }
    }

    & .v2-scene__cat-visual {
      @media (min-width: 1080px) {
        --crop-zoom: 0.88;
        width: 104px;
      }

      &:has(img[src*="brand-anker-category-01"]),
      &:has(img[src*="products-robot"]) {
        @media (min-width: 1080px) {
          --crop-zoom: 1;
        }
      }
    }

    & .v2-scene__cat-label {
      @media (min-width: 1080px) {
        font-size: 14px;
      }
    }
  }

  /* ワイド2: 閲覧履歴 → 製品ラインナップ の上を詰め、ラインナップ（最後のブロック）の下に余白 */
  &[data-top-variant="2"] .browsing-history-products {
    padding-bottom: 32px;

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

  &[data-top-variant="2"] .v2-merit__left {
    @media (min-width: 1080px) {
      box-sizing: content-box;
      width: 360px;
      padding-left: max(0px, calc(80px - (100vw - var(--top-w, 1080px)) / 2));
    }
  }

  &[data-top-variant="2"] #anker-magazine-featured {
    padding-top: 56px;
    border-bottom: 0;
    background: none;

    @media (min-width: 1080px) {
      padding-top: 80px;
    }

    & .heading {
      @media (min-width: 1080px) {
        position: relative;
        display: block;
        text-align: center;
      }

      & .btn-sm-sqr-outline {
        @media (min-width: 1080px) {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }

    & .anker-splide.is-native .splide__track {
      margin-inline: 0;
      padding-inline: 0;
      overflow: visible;
      cursor: auto;
    }

    & .anker-splide.is-native .splide__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: auto;

      @media (min-width: 1080px) {
        grid-template-columns: 2fr 1fr 2fr 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-auto-flow: column;
      }
    }

    & .anker-splide.is-native .splide__slide {
      width: auto;
      min-width: 0;

      &:nth-child(3n + 1) {
        grid-column: span 2;

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

      &:nth-child(n + 7) {
        display: none;
      }
    }

    & .blog-item,
    & .blog-link {
      height: 100%;
    }

    & .blog-link {
      position: relative;
      display: grid;
      border-radius: 4px;
      overflow: hidden;

      &::after {
        content: "";
        grid-area: 1 / 1;
        z-index: 1;
        background:
          linear-gradient(
            to top,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.5) 8%,
            rgba(0, 0, 0, 0.41) 16%,
            rgba(0, 0, 0, 0.32) 24%,
            rgba(0, 0, 0, 0.23) 32%,
            rgba(0, 0, 0, 0.15) 40%,
            rgba(0, 0, 0, 0.09) 48%,
            rgba(0, 0, 0, 0.04) 56%,
            rgba(0, 0, 0, 0) 64%
          );
        pointer-events: none;
      }
    }

    & .blog-item .img {
      grid-area: 1 / 1;
      height: 100%;
      margin-bottom: 0;
      border-radius: 0;
      aspect-ratio: 1;
    }

    & .splide__slide:nth-child(3n + 1) .blog-item .img {
      aspect-ratio: 4 / 3;

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

    & .blog-item .txt {
      grid-area: 1 / 1;
      z-index: 2;
      align-self: end;
      padding: 0 12px 12px;

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

      & h4 {
        margin-bottom: 0;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.45;
        -webkit-line-clamp: 3;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);

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

      & .blog-tags {
        display: none;
      }
    }

    & .splide__slide:nth-child(3n + 1) .blog-item .txt {
      padding: 0 16px 14px;

      @media (min-width: 1080px) {
        max-width: 420px;
        padding: 0 22px 20px;
      }

      & h4 {
        font-size: 15px;

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

  &[data-top-variant="2"] .v2-brand-list {
    margin-top: 32px;
    margin-bottom: 48px;

    @media (min-width: 1080px) {
      margin-top: 48px;
      margin-bottom: 96px;
    }

    & > .heading {
      text-align: center;
    }

    & .contents:not(.-store) {
      gap: 10px;

      @media (min-width: 1080px) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
      }

      & .items {
        padding-bottom: 0;
      }

      & .brand-list-card {
        position: relative;
        display: grid;
        grid-template-rows: 1fr auto auto;
        gap: 0;
        border-radius: 4px;
        overflow: hidden;

        &::after {
          content: "";
          grid-area: 1 / 1 / -1 / -1;
          z-index: 1;
          background:
            linear-gradient(
              to top,
              rgba(0, 0, 0, 0.56) 0%,
              rgba(0, 0, 0, 0.47) 8%,
              rgba(0, 0, 0, 0.38) 16%,
              rgba(0, 0, 0, 0.29) 24%,
              rgba(0, 0, 0, 0.2) 32%,
              rgba(0, 0, 0, 0.13) 40%,
              rgba(0, 0, 0, 0.07) 48%,
              rgba(0, 0, 0, 0.03) 56%,
              rgba(0, 0, 0, 0) 64%
            );
          pointer-events: none;
        }
      }

      & .brand-list-img {
        grid-area: 1 / 1 / -1 / -1;
        aspect-ratio: 1;
        border-radius: 0;
      }

      & .brand-list-category {
        grid-area: 2 / 1;
        z-index: 2;
        padding: 0 12px 10px;
        color: #fff;
        font-size: 13px;
        line-height: 1.3;
        letter-spacing: 0.03em;
        word-break: keep-all;
        overflow-wrap: anywhere;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);

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

        &::after {
          content: none;
        }
      }

      & .brand-list-text {
        display: none;
      }
    }

    & .contents.-store .store-items {
      & .wrap-text {
        @media (min-width: 1080px) {
          gap: 10px;
        }

        & img {
          @media (min-width: 1080px) {
            max-width: 150px;
          }
        }

        & p {
          font-size: 13px;
          line-height: 1.7;

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

      & .btn-sm-sqr-outline {
        min-height: 36px;
        font-size: 12px;

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

  &[data-top-variant="2"] .v2-articles-list {
    padding-top: 56px;
    border-top: 0;
    background: none;

    @media (min-width: 1080px) {
      padding-top: 80px;
    }
  }

  /* ワイド2: リボン → 新製品の間に余白 */
  &[data-top-variant="2"] .v2-brand-new-products {
    margin-top: 56px;

    @media (min-width: 1080px) {
      margin-top: 96px;
    }
  }

  &[data-top-variant="2"] .shopify-section[id*="home-banner"] .wide-banner {
    & .banner-link {
      display: block;
      width: 100%;

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

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

  &[data-top-variant="2"] .v2-products-ranking {
    margin-top: 28px;

    @media (min-width: 1080px) {
      margin-top: 56px;
    }
  }

  /* ワイド2: KV → リボン → 新製品・今がお得 → 製品を探す＋シーン＋診断 → 売れ筋ランキング → 特集… */
  &[data-top-variant="2"] div.themeV2:has(> [id*="v2-top-scene-finder"]) {
    & > [id*="v2-top-brand-new-products"] { order: 2; }
    & > [id*="v2-top-products"]:not([id*="ranking"]) { order: 2; }
    & > [id*="v2-top-products-ranking"] { order: 4; }
    & > [id*="v2-top-editorial"] { order: 5; }
    & > [id*="browsing-history-products"] { order: 9; }
    & > [id*="home-banner"] { order: 1; }
    & > [id*="v2-top-info-carousel"] { order: 0; }
  }

  /* カテゴリーから探す（大項目 6 つ）：ランキング後・需要順・充電関連を大サイズ（レポート R-06） */
  & .v2-brand-list {
    margin: 48px auto;

    @media (min-width: 1080px) {
      margin: 80px auto 96px;
    }

    & .contents:not(.-store) {
      gap: 20px 10px;
      grid-template-rows: none;

      @media (min-width: 1080px) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px 16px;
      }

      & .items {
        gap: 8px;
      }

      & .items::before {
        display: none;
      }

      /* 需要順: 充電関連 → オーディオ → ポタ電 → セキュリティ → プロジェクター → 掃除機 */
      & .items:nth-child(1) { order: 1; }
      & .items:nth-child(3) { order: 2; }
      & .items:nth-child(2) { order: 3; }
      & .items:nth-child(6) { order: 4; }
      & .items:nth-child(4) { order: 5; }
      & .items:nth-child(5) { order: 6; }

      & .brand-list-card {
        gap: 8px;
      }

      & .brand-list-img {
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 4px;
      }

      & .brand-list-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 0;
        font-size: 12px;
        line-height: 1.6;

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

      /* 「詳しく見る」は冗長なので消す。カード全体が a なのでカテゴリ名の「›」で押せることを示す */
      & .brand-list-btn {
        display: none;
      }
    }

    /* Anker Store / Anker Cafe：PC は 2 枚横並び */
    & .contents.-store {
      margin-top: 16px;
      gap: 12px;

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

      & .store-items {
        @media (min-width: 1080px) {
          grid-column: auto;
          display: grid;
          grid-template-columns: 340px minmax(0, 1fr);
          grid-template-rows: 1fr auto;
          gap: 0 8px;
          min-height: 190px;
          place-items: start stretch;
          place-content: stretch;
          padding: 12px;
          overflow: hidden;
        }

        & .wrap-text {
          @media (min-width: 1080px) {
            grid-column: 2;
            grid-row: 1;
            width: auto;
            padding: 14px 16px 0;
            justify-items: start;
            text-align: left;
            gap: 6px;
          }

          & img {
            @media (min-width: 1080px) {
              max-width: 120px;
              margin: 0;
              justify-self: start;
            }
          }

          & p {
            @media (min-width: 1080px) {
              font-size: 12px;
              line-height: 1.6;
            }
          }
        }

        /* 写真は 1 枚表示、hover で 2 枚目にクロスフェード。左に上下ぴったり */
        & .wrap-img {
          @media (min-width: 1080px) {
            position: relative;
            grid-column: 1;
            grid-row: 1 / 3;
            align-self: stretch;
            gap: 0;
          }
        }

        & .brand-list-img {
          @media (min-width: 1080px) {
            position: absolute;
            inset: 0;
            width: 100%;
            max-width: none;
            height: 100%;
            border-radius: 4px;
            object-fit: cover;
            transition: opacity 0.35s ease;
          }

          &:not(.pc) {
            @media (min-width: 1080px) {
              opacity: 0;
            }
          }
        }

        &:hover .brand-list-img.pc {
          @media (min-width: 1080px) {
            opacity: 0;
          }
        }

        &:hover .brand-list-img:not(.pc) {
          @media (min-width: 1080px) {
            opacity: 1;
          }
        }

        & .btn-sm-sqr-outline {
          @media (min-width: 1080px) {
            grid-column: 2;
            grid-row: 2;
            align-self: end;
            justify-self: start;
            min-height: 36px;
            margin: 12px 16px 12px;
            font-size: 12px;
          }
        }
      }
    }

    & .contents:not(.-store) .brand-list-category {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      white-space: normal;

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

      &::after {
        content: "›";
        margin-left: 4px;
        color: var(--s-sub, #666);
      }
    }
  }

  /* 新製品／今がお得 タブ */
  & .v2-brand-new-products .v2-grid-product-list,
  & .v2-sale-products-list .v2-grid-product-list {
    gap: 0;
  }

  & .v2-brand-new-products {
    margin-top: 20px;

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

  & .v2-top-tabs {
    display: flex;
    gap: 8px;
    margin: 32px 0;

    @media (min-width: 1080px) {
      margin-bottom: 24px;
    }

    & button {
      min-height: 36px;
      padding: 0 16px;
      border: 1px solid var(--border-gray, #e6e6e6);
      border-radius: 999px;
      background: #fff;
      color: var(--txt-gray, #666);
      font: inherit;
      font-size: 13px;
      cursor: pointer;

      &[aria-selected="true"] {
        border-color: var(--txt-black, #1a1a1a);
        background: var(--txt-black, #1a1a1a);
        color: #fff;
      }
    }
  }

  & .v2-brand-new-products.is-tab-off {
    & .v2-grid-product-list > .wrapper {
      display: none;
    }
  }

  & .v2-sale-products-list > .button {
    display: none;
  }

  & .v2-sale-products-list {
    height: 0;
    margin-block: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;

    & .heading {
      display: none;
    }

    &.is-tab-on {
      height: auto;
      margin-block: 0 60px;
      overflow: visible;
      visibility: visible;

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


  /* 新製品／今がお得／閲覧履歴：Splide をやめ、ネイティブ scroll-snap のレール（両側フルブリード・カード左端はコンテナ揃え） */
  & .splide.is-native {
    visibility: visible;
  }

  & :is(.js-splide_products, .js-splide-browsing-history, .anker-splide).is-native {
    --rail-gap: 12px;
    --rail-card: 36vw;
    --rail-peek: 24px;
    position: relative;
    overflow: visible;
    visibility: visible;

    @media (min-width: 1080px) {
      --rail-gap: 16px;
      --rail-card: 255px;
      --rail-peek: 48px;
    }

    & .splide__track {
      width: auto;
      margin-inline: calc(-1 * var(--rail-gutter, 20px)) calc(-1 * var(--rail-gutter-r, var(--rail-gutter, 20px)));
      padding-inline: var(--rail-gutter, 20px) var(--rail-gutter-r, var(--rail-gutter, 20px));
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: calc(var(--rail-gutter, 20px) + var(--rail-peek)) var(--rail-gutter-r, var(--rail-gutter, 20px));
      scrollbar-width: none;

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

      &:focus-visible {
        outline: 2px solid var(--s-accent, #00cbeb);
        outline-offset: -2px;
      }

      @media (prefers-reduced-motion: reduce) {
        scroll-snap-type: none;
      }
    }

    & .splide__list {
      display: flex;
      gap: var(--rail-gap);
      width: max-content;
      transform: none;
    }

    & .splide__slide {
      flex: 0 0 var(--rail-card);
      width: var(--rail-card);
      max-width: none;
      scroll-snap-align: start;

      &:last-child {
        scroll-snap-align: end;
      }

      &.is-grade-last {
        display: none;
      }
    }

    & .splide__arrows,
    & .splide__pagination {
      display: none;
    }
  }

  & .v2-grid-product-list > .wrapper::before {
    display: none;
  }

  & :is(.v2-grid-product-list, .v2-products-ranking) .product-card-default-others {
    min-height: 28px;

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

  /* base の SP 用 `width:100% !important` を上書き（トラックを画面幅まで広げるため） */
  & .v2-grid-product-list .js-splide_products.is-native {
    & .splide__track {
      width: auto !important;
      max-width: none !important;
    }

    & .splide__list {
      width: max-content !important;
      max-width: none !important;
    }
  }

  & .v2-brand-new-products .wrapper,
  & .v2-sale-products-list .wrapper {
    overflow: visible;
  }

  & .js-splide_products.is-native .splide__slide {
    &:first-child {
      @media (min-width: 1080px) {
        flex-basis: calc(var(--rail-card) - 20px);
        width: calc(var(--rail-card) - 20px);

        & .product-card-default {
          padding-left: 0;
          border-left: 0;
        }
      }
    }

    &:nth-last-child(2) {
      @media (min-width: 1080px) {
        flex-basis: calc(var(--rail-card) - 20px);
        width: calc(var(--rail-card) - 20px);

        & .product-card-default {
          padding-right: 0;
        }
      }
    }
  }

  & .js-splide-browsing-history.is-native {
    & .splide__list {
      display: flex !important;
      grid-template-columns: none;
      gap: var(--rail-gap);
    }

    & .splide__slide {
      width: var(--rail-card) !important;
      margin-right: 0 !important;

      &.is-grade-last {
        display: none;
      }
    }
  }

  & .browsing-history-products {
    padding-bottom: 72px;

    @media (min-width: 1080px) {
      padding-bottom: 110px;
    }

    & .l-inr-md,
    & .browsing-history-products-cards {
      overflow: visible;
    }

    & .browsing-history-products-cards::before {
      display: none;
    }

    & .browsing-history-product-card {
      padding: 0;
      border-left: 0;
    }
  }

  & .v2-rail-nav {
    display: none;

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

    @media (hover: hover) and (pointer: fine) {
      display: block;
    }

    &[hidden] {
      display: none;
    }

    & button {
      position: absolute;
      top: calc(var(--rail-card) / 2);
      z-index: 3;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid var(--border-gray, #e6e6e6);
      border-radius: 50%;
      background: #fff;
      color: var(--txt-black, #1a1a1a);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
      transform: translateY(-50%);
      cursor: pointer;

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

      &[data-rail-prev] {
        left: 4px;

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

      &[data-rail-next] {
        right: 4px;

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

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translate(-30%, -50%) rotate(-45deg);
      }

      &[data-rail-prev]::before {
        transform: translate(-70%, -50%) rotate(135deg);
      }

      &:hover {
        border-color: var(--txt-black, #1a1a1a);
      }

      &[disabled] {
        opacity: 0;
        pointer-events: none;
      }
    }
  }

  & .v2-rail-progress {
    position: relative;
    height: 14px;
    margin-top: 16px;
    cursor: pointer;
    touch-action: none;

    @media (min-width: 1080px) {
      margin-top: 38px;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 6px 0;
      border-radius: 999px;
      background: var(--border-gray, #e6e6e6);
    }

    & i {
      position: absolute;
      top: 6px;
      left: 0;
      height: 2px;
      width: 20%;
      border-radius: 999px;
      background: var(--txt-black, #1a1a1a);
      will-change: transform;
      cursor: grab;
    }

    &[hidden] {
      display: none;
    }
  }

  & .splide.is-native .splide__track {
    @media (hover: hover) {
      cursor: grab;
      user-select: none;
    }
  }

  /* ランキングのタブ行・製品行：ブラウザ標準のスクロールバーを消し、共通の進捗バーに */
  & .v2-products-ranking :is(.titles, .items).is-progress {
    scrollbar-width: none;

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

  /* SP のランキング：タブ行・製品行とも画面幅まで広げて横スクロール（PC は従来どおり） */
  & .v2-products-ranking {
    grid-template-columns: minmax(0, 1fr);

    & > * {
      min-width: 0;
    }

    & .contents {
      width: auto;
      max-width: 100%;
    }

    & .titles.is-progress {
      width: auto;
      margin-inline: -20px;
      padding-inline: 20px;
      overflow-x: auto;
      scroll-padding-inline: 20px;

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

  }

  & .v2-rail-progress--plain {
    display: none;
  }

  & .v2-products-ranking {
    row-gap: 12px;

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

    & .contents {
      margin-top: 20px;

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

  & .splide.is-native.is-dragging {
    & .splide__track {
      scroll-snap-type: none;
      cursor: grabbing;
    }

    & + .v2-rail-progress i {
      cursor: grabbing;
    }
  }

  /* ランキング：上下の余白を詰める（base 100/100 → 56/56。特集帯は自前の padding 60 があるので margin-top 0） */
  & .v2-products-ranking {
    margin-top: 40px;
    margin-bottom: 40px;

    @media (min-width: 1080px) {
      margin-top: 56px;
      margin-bottom: 56px;
    }
  }

  & .v2-articles-list {
    margin-top: 0;
    padding-bottom: 32px;

    @media (min-width: 1080px) {
      padding-bottom: 36px;
    }
  }

  /* ランキング：製品名の文字は他レールと同じ 14px */
  & .v2-products-ranking .items article:nth-of-type(n) .product-card-default-name {
    @media (min-width: 1080px) {
      font-size: 14px;
      line-height: 1.2;
      height: auto;
    }
  }

  /* ランキング：タブは新製品と同じ左寄せピル */
  & .v2-products-ranking .titles {
    gap: 8px;
    padding-bottom: 4px;
    font-size: 13px;

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

    & .button {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 16px;
      border: 1px solid var(--border-gray, #e6e6e6);
      border-radius: 999px;
      background: #fff;
      color: var(--txt-gray, #666);
      font-weight: 400;
      transition: none;

      &:first-of-type {
        padding-left: 16px;
      }

      &:hover {
        border-color: var(--txt-black, #1a1a1a);
        color: var(--txt-black, #1a1a1a);
        font-weight: 400;
      }

      &.is-current {
        border-color: var(--txt-black, #1a1a1a);
        background: var(--txt-black, #1a1a1a);
        color: #fff;
        font-weight: 400;
      }
    }
  }

  /* ランキング：1 段 6 枚 */
  & .v2-products-ranking {
    margin-bottom: 60px;

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

    & .contents,
    & .contents .items {
      height: auto !important;
      overflow: visible;
    }
  }

  & .v2-products-ranking .contents {
    --rail-gap: 12px;
    --rail-card: 36vw;
    --rail-peek: 24px;
    position: relative;

    @media (min-width: 1080px) {
      --rail-gap: 16px;
      --rail-card: 255px;
      --rail-peek: 48px;
    }

    & .items.is-native {
      position: relative;
      flex-wrap: nowrap;
      gap: var(--rail-gap);
      width: auto;
      margin-inline: calc(-1 * var(--rail-gutter, 20px)) calc(-1 * var(--rail-gutter-r, var(--rail-gutter, 20px)));
      padding-inline: var(--rail-gutter, 20px) var(--rail-gutter-r, var(--rail-gutter, 20px));
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      counter-reset: v2-rank;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: calc(var(--rail-gutter, 20px) + var(--rail-peek)) var(--rail-gutter-r, var(--rail-gutter, 20px));
      scrollbar-width: none;

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

      &:focus-visible {
        outline: 2px solid var(--s-accent, #00cbeb);
        outline-offset: -2px;
      }

      @media (hover: hover) {
        cursor: grab;
      }

      @media (prefers-reduced-motion: reduce) {
        scroll-snap-type: none;
      }

      &.is-dragging {
        scroll-snap-type: none;
        cursor: grabbing;
        user-select: none;
      }

      & > article:nth-of-type(n) {
        display: block;
        flex: 0 0 var(--rail-card);
        width: var(--rail-card);
        min-width: 0;
        counter-increment: v2-rank;
        scroll-snap-align: start;

        &:last-child {
          scroll-snap-align: end;
        }
      }

      & > article:nth-of-type(1) {
        @media (min-width: 1080px) {
          flex-basis: calc(var(--rail-card) - 20px);
          width: calc(var(--rail-card) - 20px);
          padding-left: 0;
          border-left: 0;

          &::before {
            left: 0;
          }
        }
      }

      & > article:last-of-type {
        @media (min-width: 1080px) {
          flex-basis: calc(var(--rail-card) - 20px);
          width: calc(var(--rail-card) - 20px);
          padding-right: 0;
        }
      }

      & > article:nth-of-type(n + 8)::before {
        content: counter(v2-rank);
        display: grid;
        place-items: center;
        background: #1a1a1a;
        color: #fff;
        font-family: Mont, sans-serif;
        font-size: 11px;
        line-height: 1;

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

    & > * {
      transition: opacity 0.2s ease;
    }

    &.is-switching > * {
      opacity: 0;
      transition: none;
    }

    & .items.is-native.is-dragging + .v2-rail-nav + .v2-rail-progress i {
      cursor: grabbing;
    }
  }

  /* Magazine：他レールと同じネイティブ scroll-snap（PC 3 枚・SP 1 枚＋peek） */
  & #anker-magazine-featured {
    padding-top: 28px;

    @media (min-width: 1080px) {
      padding-top: 36px;
    }

    & .wrapper,
    & .v2-blog-card {
      overflow: visible;
    }

    /* base の ID セレクタ（overflow: visible）に勝たせる */
    & .anker-splide.is-native .splide__track {
      width: auto;
      overflow-x: auto;
      overflow-y: hidden;

      &::before {
        display: none;
      }
    }

    & .anker-splide.is-native {
      --rail-card: 80vw;

      @media (min-width: 1080px) {
        --rail-card: calc((var(--top-w, 1080px) - 3 * var(--rail-gap)) / 4);
      }

      & .splide__slide {
        margin: 0 !important;
      }

      & .splide__arrows {
        display: none;
      }
    }
  }

  /* 特集：1 段の帯 */
  /* 特集：PC 5 列（5 本目は整理版のみ表示）、画像とテキストは同じ幅、タイトル下の余白は詰める */
  & .v2-articles-list .list {
    @media (min-width: 1080px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px 16px;
    }
  }

  & .v2-article-card-img {
    @media (min-width: 1080px) {
      flex: none;
      width: 100%;
    }
  }

  & .v2-article-card-tit {
    @media (min-width: 1080px) {
      height: auto;
      min-height: 0;
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.5;
    }
  }

  & .v2-article-card-txt {
    @media (min-width: 1080px) {
      margin-top: 6px;
      font-size: 13px;
    }
  }

  & #anker-magazine-featured .blog-item .img {
    aspect-ratio: 2 / 1;
    height: auto;

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

  /* サービス帯：会員特典 + アプリを圧縮 */
  & .v2-official-merit {
    padding-block: 40px;
  }

  & .v2-ft-app {
    padding-block: 24px;
  }
}

/* [C] ── 整理版：診断を開いた状態で露出（30秒診断バッジ＋見出しを縦積み、× なし、角丸はシーンタイルと同じ 4px） ── */
html[data-top-layout="report"] .v2-scene__finder {
  margin-top: 16px;

  @media (min-width: 1080px) {
    margin-top: 28px;
  }
}

html[data-top-layout="report"] .v2-scene__finder.is-report {
  &.is-open::before {
    border-radius: 4px;
  }

  & .v2-scene__finder-bar {
    display: none;
  }

  &.is-open .v2-finder__caption {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--s-m);
    font-weight: 400;
    color: var(--s-ink);

    &::before {
      content: "30秒診断";
      padding: 4px 9px;
      border-radius: 6px;
      background: var(--s-accent);
      color: #fff;
      font-size: var(--s-s);
      font-weight: 400;
      line-height: 1.2;
      white-space: nowrap;
    }

    @media (min-width: 1080px) {
      font-size: var(--s-l);
    }
  }

  /* カテゴリチップ（1 問目）：ヘッダー内。押下＝開始、迷ったら従来の 3 問 */
  &.is-open .v2-scene__finder-slot .v2-finder__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 14px;
    padding-right: 0;

    @media (min-width: 1080px) {
      flex-wrap: nowrap;
      gap: 14px 24px;
      padding-right: 0;
    }
  }

  &.is-open .v2-scene__finder-body {
    padding-top: 18px;

    @media (min-width: 1080px) {
      padding-top: 26px;
    }
  }

  &.is-open .v2-finder__box {
    gap: 22px;

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

  & .v2-finder__q-title {
    font-size: var(--s-m);
    font-weight: 400;
    color: var(--s-sub);

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

  &.is-open .v2-finder__caption {
    flex-shrink: 0;
  }

  & .v2-finder.is-done {
    & .v2-finder__chips,
    & .v2-finder__progress {
      display: none;
    }

    & .v2-finder__bar {
      align-items: flex-end;
    }

    & .v2-finder__picks {
      justify-content: flex-end;
      padding-bottom: 4px;
    }

    & .v2-finder__foot {
      align-self: auto;
      justify-content: center;
      margin-top: 4px;
    }
  }

  & .v2-finder__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;

    @media (min-width: 1080px) {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex: 0 1 auto;
      gap: 6px 8px;
      padding-top: 2px;
    }
  }

  & .v2-finder__q.is-chip-q,
  & .v2-finder__q-title {
    display: none;
  }

  &:not(.is-wait) .v2-finder__chips {
    display: none;
  }

  & .v2-finder__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--s-line);
    border-radius: 999px;
    background: #fff;
    color: var(--s-sub);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: none;

    &:hover {
      border-color: var(--s-ink);
      color: var(--s-ink);
    }

    &[aria-pressed="true"] {
      border-color: var(--s-ink);
      background: var(--s-ink);
      color: #fff;
    }

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

  &.is-wait {
    & .v2-finder__stage {
      display: none;
    }

    & .v2-scene__finder-slot .v2-finder__bar {
      align-items: center;
      justify-content: space-between;
      gap: 12px 24px;
      padding-bottom: 6px;

      @media (min-width: 1080px) {
        flex-wrap: nowrap;
        padding-block: 4px 6px;
      }
    }

    & .v2-finder__caption {
      flex: 0 0 auto;
    }

    & .v2-finder__chips {
      flex: 0 0 auto;
      width: 100%;

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

}

/* [C] ── エディトリアル（画面全幅の写真＋グラデ上のコピー＋写真内サムネで切替）。整理版のみ表示 ── */
.v2-editorial {
  --e-pad: 20px;
  --e-w: var(--top-w, 1080px);
  --e-gutter: max(var(--e-pad), calc((100% - var(--e-w)) / 2));
  --e-side: 12px;
  display: none;
  margin: 12px auto 0;
  padding-inline: var(--e-side);

  @media (min-width: 1080px) {
    --e-side: 16px;
    margin: 16px auto 0;
  }

  & .v2-editorial__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #101820;
    color: #fff;

    @media (min-width: 1080px) {
      aspect-ratio: 3 / 1;
      max-height: 560px;
    }
  }

  & .v2-editorial__scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.45s ease,
      visibility 0s linear 0.45s;

    &.is-active {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    & > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;

      @media (min-width: 1080px) {
        object-position: var(--fx, 50%) 50%;
      }
    }

    /* 暗くしすぎない: SP は上（テキスト側）、PC は左を軽く落とす */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to bottom,
          rgba(8, 14, 22, 0.62) 0%,
          rgba(8, 14, 22, 0.5) 10%,
          rgba(8, 14, 22, 0.38) 20%,
          rgba(8, 14, 22, 0.27) 30%,
          rgba(8, 14, 22, 0.17) 40%,
          rgba(8, 14, 22, 0.1) 50%,
          rgba(8, 14, 22, 0.05) 60%,
          rgba(8, 14, 22, 0.02) 70%,
          rgba(8, 14, 22, 0) 80%
        );
      pointer-events: none;

      @media (min-width: 1080px) {
        background:
          linear-gradient(
            to right,
            rgba(8, 14, 22, 0.5) 0%,
            rgba(8, 14, 22, 0.4) 8%,
            rgba(8, 14, 22, 0.3) 16%,
            rgba(8, 14, 22, 0.21) 24%,
            rgba(8, 14, 22, 0.13) 32%,
            rgba(8, 14, 22, 0.07) 40%,
            rgba(8, 14, 22, 0.03) 48%,
            rgba(8, 14, 22, 0.01) 56%,
            rgba(8, 14, 22, 0) 64%
          ),
          linear-gradient(
            to top,
            rgba(8, 14, 22, 0.4) 0%,
            rgba(8, 14, 22, 0.24) 14%,
            rgba(8, 14, 22, 0.12) 28%,
            rgba(8, 14, 22, 0.04) 42%,
            rgba(8, 14, 22, 0) 55%
          );
      }
    }
  }

  & .v2-editorial__copy {
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    bottom: auto;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: 12px;
    max-width: 380px;

    @media (min-width: 1080px) {
      top: auto;
      left: var(--e-gutter);
      right: auto;
      bottom: 48px;
      gap: 0;
    }

    & > .v2-editorial__title {
      @media (min-width: 1080px) {
        margin-top: 6px;
      }
    }

    & > .v2-editorial__text {
      @media (min-width: 1080px) {
        margin-top: 12px;
      }
    }

    & > .v2-editorial__btn {
      @media (min-width: 1080px) {
        margin-top: 20px;
      }
    }
  }

  /* （旧）テキスト位置切替は廃止。位置は常に左・縦中央で統一し、写真側を --fx で寄せる */
  & .v2-editorial__eyebrow {
    margin: 0;
    font-size: var(--s-s, 12px);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--s-accent, #00cbeb);
  }

  & .v2-editorial__title {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.3;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  }

  & .v2-editorial__text {
    margin: 0;
    font-size: var(--s-m, 13px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);

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

  & .v2-editorial__btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 2px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fff;
    color: #101820;
    font-size: var(--s-m, 13px);
    font-weight: 400;
    text-decoration: none;

    &:hover {
      background: var(--s-accent, #00cbeb);
      color: #fff;
    }
  }

  & .v2-editorial__thumbs {
    position: absolute;
    left: var(--e-pad);
    bottom: 20px;
    z-index: 4;
    display: flex;
    gap: 8px;

    @media (min-width: 1080px) {
      left: auto;
      right: var(--e-gutter);
      bottom: 40px;
      gap: 10px;
    }
  }

  & .v2-editorial__thumb {
    width: 64px;
    height: 44px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    background: #101820;
    overflow: hidden;
    opacity: 0.75;
    cursor: pointer;
    transition:
      opacity 0.2s ease,
      border-color 0.2s ease;

    @media (min-width: 1080px) {
      width: 88px;
      height: 60px;
      border-radius: 8px;
    }

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

    &:hover,
    &.is-active {
      opacity: 1;
      border-color: #fff;
    }

    &:focus-visible {
      outline: 2px solid var(--s-accent, #00cbeb);
      outline-offset: 2px;
    }
  }

  /* ピンは写真に対する % 位置（JS が cover 後の実寸に換算して left/top を書く） */
  & .v2-editorial__pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 3;
    transform: translate(-50%, -50%);

    &[hidden] {
      display: none;
    }
  }

  & .v2-editorial__dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;

    & i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--s-accent, #00cbeb);
    }

    &::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.7);
      animation: v2-editorial-pulse 2s ease-out infinite;
    }
  }

  & .v2-editorial__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 3;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: max-content;
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    color: var(--s-ink, #1a1a1a);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0s linear 0.2s;

    & img {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      object-fit: contain;
      background: var(--s-bg, #f7f9fa);
    }

    & b {
      display: block;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
    }

    & small {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      color: var(--s-sub, #666);

      & span {
        font-size: 10px;
      }
    }
  }

  & .v2-editorial__pin.is-right .v2-editorial__tip {
    left: auto;
    right: 50%;
    transform: translate(50%, 6px);
  }

  & .v2-editorial__pin.is-below .v2-editorial__tip {
    bottom: auto;
    top: calc(100% + 12px);
  }

  & .v2-editorial__pin.is-on .v2-editorial__tip,
  & .v2-editorial__pin:hover .v2-editorial__tip,
  & .v2-editorial__pin:focus-within .v2-editorial__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }

  & .v2-editorial__pin.is-right.is-on .v2-editorial__tip,
  & .v2-editorial__pin.is-right:hover .v2-editorial__tip,
  & .v2-editorial__pin.is-right:focus-within .v2-editorial__tip {
    transform: translate(50%, 0);
  }
}

@keyframes v2-editorial-pulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-editorial__dot::before {
    animation: none !important;
  }

  .v2-editorial .v2-editorial__scene {
    transition: none !important;
  }
}

html[data-top-layout="report"] .v2-editorial {
  display: block;
}

/* ワイド2: 特集カードは画像のみ（タイトル・本文は出さない） */
html[data-top-layout="report"][data-top-variant="2"] .v2-articles-list :is(.v2-article-card-tit, .v2-article-card-txt) {
  display: none;
}


/* [C] ── 特集 5 本目はワイド／整理版以外では隠す（スニペット側の上限を 4 → 5 にしたため） ── */
html:not([data-top-width="wide"]) .v2-articles-list .list > :nth-child(5) {
  display: none;
}

/* [C] ── ワイド版の特集：整理版と同じ 5 列（画像幅＝カラム幅、タイトル下を詰める） ── */
html[data-top-width="wide"]:not([data-top-layout="report"]) {
  & .v2-articles-list .list {
    @media (min-width: 1080px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px 16px;
    }
  }

  & .v2-article-card-img {
    @media (min-width: 1080px) {
      flex: none;
      width: 100%;
    }
  }

  & .v2-article-card-tit {
    @media (min-width: 1080px) {
      height: auto;
      min-height: 0;
      margin-top: 12px;
      font-size: 15px;
      line-height: 1.5;
    }
  }

  & .v2-article-card-txt {
    @media (min-width: 1080px) {
      margin-top: 6px;
      font-size: 13px;
    }
  }
}

/* [C] ── ワイド2 調整（9/24）: コンテンツ幅を 1360px に統一・セクション間の余白を一定に・Magazine をテキスト主体に ── */
html[data-top-layout="report"][data-top-variant="2"] {
  --top-gap: 64px;

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

  /* KV・リボン・エディトリアルも他セクションと同じ --top-w に揃える（整理版の 1080px 固定を解除） */
  & .themeV2:has(> .shopify-section[id*="v2-top-scene-finder"]) .v2-info-carousel {
    --top-w: inherit;
  }

  & .shopify-section[id*="home-banner"] .wide-banner .banner-link {
    @media (min-width: 1080px) {
      width: var(--top-w, 1080px);
    }
  }

  /* エディトリアルは特例で画面幅いっぱい（左右余白ゼロ・静止時は角丸なし）。縦は 2:1 で大きく取り、写真を見せる */
  & .v2-editorial {
    --e-side: 0px;
    padding-inline: 0;

    @media (min-width: 1080px) {
      --e-pad: 40px;
      margin-top: 0;
    }

    & .v2-editorial__stage {
      @media (min-width: 1080px) {
        aspect-ratio: 2 / 1;
        max-height: 780px;
      }
    }
  }

  /* 製品を探す：タイルも --top-w いっぱいに、見出しは他と同じ左揃え */
  & .v2-scene__cats .v2-scene__head {
    justify-content: flex-start;
  }

  & .v2-scene__cats .heading {
    text-align: left;
  }

  & .v2-scene__cats .v2-scene__cat-list {
    @media (min-width: 1080px) {
      gap: 44px 16px;
      max-width: var(--s-w);
    }
  }

  /* セクション間の縦リズムを --top-gap に統一 */
  & .v2-brand-new-products,
  & .v2-scene,
  & .v2-products-ranking,
  & .v2-articles-list {
    margin-top: var(--top-gap);
  }

  & .v2-scene__cats {
    margin-bottom: calc(var(--top-gap) * 0.75);
  }

  & .v2-products-ranking {
    margin-bottom: var(--top-gap);
  }

  & .v2-articles-list {
    padding-top: 0;
    padding-bottom: 0;
  }

  & #anker-magazine-featured {
    padding-top: var(--top-gap);
    padding-bottom: 0;
  }

  & .v2-brand-list {
    margin-top: var(--top-gap);
    margin-bottom: var(--top-gap);
  }

  /* 製品ラインナップ（6 大カテゴリ）は「製品を探す」と重複するので非表示。Store / Cafe カードは残す */
  & .v2-brand-list > .heading,
  & .v2-brand-list .contents:not(.-store) {
    display: none;
  }

  & .v2-brand-list .contents.-store {
    margin-top: 0;
  }

  /* Magazine：画像モザイク → 見出し主体のリスト（PC 2 列 × 3 行、サムネは小さく左に） */
  & #anker-magazine-featured {
    & .heading {
      @media (min-width: 1080px) {
        text-align: left;
      }
    }

    & .anker-splide.is-native .splide__list {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      grid-auto-flow: row;
      gap: 0;
      border-bottom: 1px solid var(--border-gray, #e6e6e6);

      @media (min-width: 1080px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 56px;
      }
    }

    & .anker-splide.is-native .splide__slide,
    & .anker-splide.is-native .splide__slide:nth-child(3n + 1) {
      grid-column: auto;
      grid-row: auto;
      border-top: 1px solid var(--border-gray, #e6e6e6);
    }

    & .blog-item,
    & .blog-link {
      height: auto;
    }

    & .blog-link {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 16px 0;
      border-radius: 0;
      overflow: visible;

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

      &::after {
        display: none;
      }

      &:hover h4 {
        text-decoration: underline;
        text-underline-offset: 3px;
      }
    }

    & .blog-item .img,
    & .splide__slide:nth-child(3n + 1) .blog-item .img {
      flex: none;
      width: 104px;
      height: auto;
      aspect-ratio: 4 / 3;
      border-radius: 4px;
      overflow: hidden;

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

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

    & .blog-item .txt,
    & .splide__slide:nth-child(3n + 1) .blog-item .txt {
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      gap: 8px;
      min-width: 0;
      max-width: none;
      padding: 0;

      @media (min-width: 1080px) {
        padding-top: 2px;
      }

      & h4 {
        order: 2;
        margin: 0;
        color: var(--txt-black, #1a1a1a);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.55;
        text-shadow: none;
        -webkit-line-clamp: 2;

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

      & .blog-tags {
        order: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0 6px;
        margin: 0;
      }

      & .blog-tag {
        padding: 0;
        border: 0;
        border-radius: 0;
        color: var(--txt-gray, #666);
        font-size: 11px;
        line-height: 1.4;

        & + .blog-tag::before {
          content: "/";
          margin-right: 6px;
          color: var(--border-gray, #e6e6e6);
        }
      }
    }
  }
}

/* [C] ── ワイド2 調整（9/24 その2）: 文字スケール底上げ・見出しを太く・製品を探すのグレー帯・エディトリアルの退場演出 ── */
html[data-top-layout="report"][data-top-variant="2"] {
  /* 見出し: 24/400 → 28/700。「すべて見る」は見出し内にあるので太らせない */
  & .v2-scene__head .heading,
  & .v2-brand-new-products .heading,
  & .v2-products-ranking .heading,
  & .v2-articles-list .heading,
  & #anker-magazine-featured .heading {
    @media (min-width: 1080px) {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.01em;
    }
  }

  & .btn-sm-sqr-outline {
    @media (min-width: 1080px) {
      font-size: 14px;
      font-weight: 400;
    }
  }

  /* タブ・チップ: 13 → 14 */
  & .v2-top-tabs button,
  & .v2-products-ranking .titles .button {
    @media (min-width: 1080px) {
      min-height: 40px;
      padding: 0 18px;
      font-size: 14px;
    }
  }

  /* 製品カード: 製品名 14 → 15 / 価格を一段大きく */
  & .v2-brand-new-products .product-card-default-name,
  & .v2-products-ranking .items article:nth-of-type(n) .product-card-default-name {
    @media (min-width: 1080px) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: auto;
      min-height: calc(2 * 1.45em);
      font-size: 15px;
      line-height: 1.45;
    }
  }

  & :is(.v2-brand-new-products, .v2-products-ranking) .product-price-v2 {
    @media (min-width: 1080px) {
      font-size: 18px;
    }
  }

  /* 製品を探す: 帯ではなくタイル 1 個ずつの画像ボックスをグレーに。白背景の製品画像は multiply で白を消す */
  & .v2-scene .v2-scene__cats .v2-scene__cat-list {
    @media (min-width: 1080px) {
      gap: 32px 16px;
      max-width: var(--s-w);
    }
  }

  & .v2-scene .v2-scene__cats .v2-scene__cat {
    @media (min-width: 1080px) {
      gap: 12px;
    }

    &:hover .v2-scene__cat-visual {
      background: #e9edef;
    }
  }

  & .v2-scene .v2-scene__cats .v2-scene__cat-visual {
    box-sizing: border-box;
    width: 100%;
    max-width: 120px;
    padding: 14px;
    border-radius: 12px;
    background: #f3f5f6;
    transition: background 0.2s ease;

    @media (min-width: 1080px) {
      max-width: 148px;
      padding: 20px;
    }

    & img {
      mix-blend-mode: multiply;
    }
  }

  & .v2-scene .v2-scene__cats .v2-scene__cat-label {
    @media (min-width: 1080px) {
      font-size: 15px;
      font-weight: 700;
    }
  }

  /* シーンタイル: 名前 20 → 22/700、説明 14 → 15 */
  & .v2-scene__tile b {
    @media (min-width: 1080px) {
      font-size: 22px;
      font-weight: 700;
    }
  }

  & .v2-scene__tile small {
    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }

  /* 診断バー */
  & .v2-scene__finder-title {
    @media (min-width: 1080px) {
      font-size: 20px;
      font-weight: 700;
    }
  }

  /* エディトリアル: 見出し 30 → 36/700、本文 14 → 16、ボタン 13 → 15 */
  & .v2-editorial__eyebrow {
    @media (min-width: 1080px) {
      font-size: 14px;
      font-weight: 700;
    }
  }

  & .v2-editorial__title {
    @media (min-width: 1080px) {
      font-size: 40px;
      font-weight: 700;
      line-height: 1.35;
    }
  }

  & .v2-editorial__text {
    @media (min-width: 1080px) {
      font-size: 16px;
      line-height: 1.7;
    }
  }

  & .v2-editorial__btn {
    @media (min-width: 1080px) {
      font-size: 15px;
      font-weight: 700;
    }
  }

  & .v2-editorial__copy {
    @media (min-width: 1080px) {
      bottom: 64px;
      max-width: 480px;
    }
  }

  /* Magazine: 見出し 17/500 → 18/700、タグ 11 → 12 */
  & #anker-magazine-featured .blog-item .txt h4 {
    @media (min-width: 1080px) {
      font-size: 18px;
      font-weight: 700;
    }
  }

  & #anker-magazine-featured .blog-item .txt .blog-tag {
    @media (min-width: 1080px) {
      font-size: 12px;
    }
  }

  /* Store / Cafe カード本文 14 → 15 */
  & .v2-brand-list .contents.-store .wrap-text p {
    @media (min-width: 1080px) {
      font-size: 15px;
    }
  }

  /* エディトリアル退場演出: セクション上端が画面上端を越えるにつれ、--e-exit が 0 → 1。
     scale 0.97（1360px で左右計 41px 縮む）+ 角丸拡大 + 軽い減光で「離れた」ことを伝える */
  & .v2-editorial__stage {
    --e-exit: 0;
    transform: scale(calc(1 - 0.03 * var(--e-exit)));
    transform-origin: 50% 100%;
    border-radius: calc(16px * var(--e-exit));
    will-change: transform;
  }

  & .v2-editorial__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #101820;
    opacity: calc(0.28 * var(--e-exit));
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-top-layout="report"][data-top-variant="2"] .v2-editorial__stage {
    transform: none;
    border-radius: 0;
  }

  html[data-top-layout="report"][data-top-variant="2"] .v2-editorial__stage::after {
    display: none;
  }
}

/* [C] ── ワイド2 調整（9/25）: SP にも見出しの太字と最小限のサイズ底上げ ── */
@media (max-width: 1079.98px) {
  html[data-top-layout="report"][data-top-variant="2"] {
    & .v2-scene__head .heading,
    & .v2-brand-new-products .heading,
    & .v2-products-ranking .heading,
    & .v2-articles-list .heading,
    & #anker-magazine-featured .heading {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.3;
    }

    & .btn-sm-sqr-outline {
      font-weight: 400;
    }

    & .v2-scene .v2-scene__cats .v2-scene__cat-label {
      font-weight: 700;
    }

    & .v2-scene__tile b {
      font-size: 18px;
      font-weight: 700;
    }

    & .v2-scene__finder-title {
      font-weight: 700;
    }

    & .v2-top-tabs button,
    & .v2-products-ranking .titles .button {
      font-size: 13px;
      font-weight: 700;
    }

    & .v2-brand-new-products .product-card-default-name,
    & .v2-products-ranking .items article:nth-of-type(n) .product-card-default-name {
      font-weight: 700;
    }

    & .v2-editorial__eyebrow {
      font-weight: 700;
    }

    & .v2-editorial__title {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.35;
    }

    & .v2-editorial__btn {
      font-weight: 700;
    }

    & #anker-magazine-featured .blog-item .txt h4 {
      font-size: 15px;
      font-weight: 700;
    }
  }
}

/* [C] ── ワイド2 調整（9/25 その2）: タブを下線タブに・カテゴリタイルを列幅いっぱいに（左端を見出しに揃える）・シーンタイルを 2 列で大きく ── */
html[data-top-layout="report"][data-top-variant="2"] {
  /* タブ: ピル型をやめ、文字 + 行全体の薄い線 + 選択中だけ 2px の黒下線 */
  & .v2-top-tabs,
  & .v2-products-ranking .titles {
    gap: 0 24px;
    padding-bottom: 0;
    border-bottom: 1px solid var(--border-gray, #e6e6e6);

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

  & .v2-top-tabs button,
  & .v2-products-ranking .titles .button,
  & .v2-products-ranking .titles .button:first-of-type {
    min-height: 0;
    margin-bottom: -1px;
    padding: 4px 2px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--txt-gray, #666);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;

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

    &:hover {
      border-bottom-color: transparent;
      background: none;
      color: var(--txt-black, #1a1a1a);
    }
  }

  & .v2-top-tabs button[aria-selected="true"],
  & .v2-products-ranking .titles .button.is-current {
    border-bottom-color: var(--txt-black, #1a1a1a);
    background: none;
    color: var(--txt-black, #1a1a1a);
    font-weight: 700;
  }

  /* カテゴリタイル: 列幅いっぱいにして左端を見出しと揃える */
  & .v2-scene .v2-scene__cats .v2-scene__cat-visual {
    width: 100%;
    max-width: none;

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

  /* シーンタイル: PC は 2 列 × 2 段・16:10 で写真を大きく */
  & .v2-scene {
    @media (min-width: 1080px) {
      --s-tile-ar: 16 / 10;
    }
  }

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

  & .v2-scene__tile b {
    @media (min-width: 1080px) {
      font-size: 26px;
    }
  }

  & .v2-scene__tile small {
    @media (min-width: 1080px) {
      font-size: 16px;
    }
  }
}

/* [C] ── ワイド2 調整（9/25 その3）: 診断バーを横幅いっぱい・背が高いグレー帯に ── */
@media (min-width: 1080px) {
  html[data-top-layout="report"][data-top-variant="2"] .v2-scene .v2-scene__finder {
    /* JS が中身に合わせて inset を計算して幅を絞るので、インライン指定を上書きして常に全幅 */
    --finder-inset: 0px !important;

    &::before {
      border: 0;
      border-radius: 16px;
      background: #f3f5f6;
    }

    /* 開いたときは中身が白いカードなので、外枠はグレー地をやめて白＋薄枠に戻す */
    &.is-open::before {
      border: 1px solid var(--s-line);
      border-radius: 16px;
      background: #fff;
    }

    &:not(.is-open) .v2-scene__finder-bar {
      min-height: 112px;
      gap: 32px;
      padding: 20px 28px 20px 48px;
    }

    &:not(.is-open) .v2-scene__finder-titles {
      gap: 6px;

      & > span {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
      }

      /* 副文（マークアップに無いので CSS で追加。文言を変えるときはここ） */
      &::after {
        content: "使う場所と目的を選ぶだけ。3 つの質問で候補を絞り込みます。";
        display: block;
        margin-top: 6px;
        color: var(--s-sub, #666);
        font-size: 15px;
        line-height: 1.5;
      }
    }

    &:not(.is-open) .v2-scene__finder-cta {
      min-height: 56px;
      font-size: 17px;
      font-weight: 700;

      & > span {
        padding: 0 32px;
      }
    }
  }
}

/* [C] ── ワイド2 調整（9/25 その4）: エディトリアルのスクロール振り付け（入場 → 滞在 → 退場） ──
   JS が --e-in / --e-par / --e-exit を書き、ここで描画する。時間ベースの transition は使わず、
   すべてスクロール位置の関数にすることで「戻せば戻る」手触りにする */
html[data-top-layout="report"][data-top-variant="2"] .v2-editorial__stage {
  --e-in: 0;
  --e-par: 0;
  --e-zoom: 0.10;   /* 入場時のズーム戻し量 */
  --e-drift: 28px;  /* パララックス移動量 */
  --e-rise: 28px;   /* コピーのせり上がり量 */

  @media (max-width: 1079.98px) {
    --e-zoom: 0.06;
    --e-drift: 12px;
    --e-rise: 18px;
  }

  /* 写真: 少し寄った状態から定位置へ戻りつつ、スクロールに合わせて縦にゆっくり流れる */
  & .v2-editorial__scene > img {
    transform:
      translateY(calc(var(--e-par) * -1 * var(--e-drift)))
      scale(calc(1 + var(--e-zoom) * (1 - var(--e-in)) + 0.04));
    transform-origin: 50% 50%;
    will-change: transform;
  }

  /* 影のベール: 入場前は少し濃く、定位置で本来の濃さに */
  & .v2-editorial__scene::after {
    opacity: calc(1 + 0.6 * (1 - var(--e-in)));
  }

  /* コピー: 眉 → 見出し → 本文 → ボタンの順に、進行度のしきい値をずらしてせり上がる */
  & .v2-editorial__copy > * {
    --d: 0;
    --k: clamp(0, calc((var(--e-in) - var(--d)) / 0.42), 1);
    opacity: var(--k);
    transform: translateY(calc((1 - var(--k)) * var(--e-rise)));
    will-change: transform, opacity;
  }

  & .v2-editorial__copy > .v2-editorial__eyebrow { --d: 0.08; }
  & .v2-editorial__copy > .v2-editorial__title { --d: 0.18; }
  & .v2-editorial__copy > .v2-editorial__text { --d: 0.30; }
  & .v2-editorial__copy > .v2-editorial__btn { --d: 0.42; }

  /* ピン: コピーが出揃ったあとに、点が弾んで現れる */
  & .v2-editorial__pin {
    --k: clamp(0, calc((var(--e-in) - 0.5) / 0.3), 1);
    opacity: var(--k);
  }

  & .v2-editorial__dot {
    transform: scale(calc(0.4 + 0.6 * var(--k, 1)));
    transition: none;
  }

  /* サムネ: 最後に静かに */
  & .v2-editorial__thumbs {
    --k: clamp(0, calc((var(--e-in) - 0.62) / 0.3), 1);
    opacity: var(--k);
    transform: translateY(calc((1 - var(--k)) * 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-top-layout="report"][data-top-variant="2"] .v2-editorial__stage {
    & .v2-editorial__scene > img,
    & .v2-editorial__copy > *,
    & .v2-editorial__dot,
    & .v2-editorial__thumbs {
      transform: none;
      opacity: 1;
    }

    & .v2-editorial__scene::after {
      opacity: 1;
    }
  }
}

/* [C] ── ワイド2 調整（9/25 その5）: シーンタイル内の代表製品サムネ ── */
html:not([data-top-variant="2"]) .v2-scene__samples {
  display: none;
}

html[data-top-variant="2"] .v2-scene__label {
  & .v2-scene__samples {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;

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

  & .v2-scene__sample {
    flex: none;
    box-sizing: border-box;
    width: 44px;
    aspect-ratio: 1;
    padding: 5px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;

    @media (min-width: 1080px) {
      width: 60px;
      padding: 7px;
      border-radius: 12px;
    }

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

  & .v2-scene__sample-text {
    margin-left: 2px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.4;

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

/* [C] ── ワイド2 調整（9/25 その6）: 吹き出しの文字色固定・診断パネルを閉状態と統一（グレー地/黒ボタン）・
   ランキング 1〜3 位の強調・エディトリアルの可読性・水色ボタンの黒化 ── */
html[data-top-layout="report"][data-top-variant="2"] {
  /* ピン吹き出し: 色を継承に頼らず固定 */
  & .v2-editorial__tip b {
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
    opacity: 1;
    font-size: 13px;
    font-weight: 700;
  }

  & .v2-editorial__tip small {
    color: #666;
    -webkit-text-fill-color: #666;
    font-size: 12px;
  }

  /* エディトリアル: 左側の影を強めて本文の可読性を上げ、本文を 17px/500 の白に */
  & .v2-editorial__scene::after {
    @media (min-width: 1080px) {
      background:
        linear-gradient(
          to right,
          rgba(8, 14, 22, 0.66) 0%,
          rgba(8, 14, 22, 0.58) 10%,
          rgba(8, 14, 22, 0.46) 20%,
          rgba(8, 14, 22, 0.33) 30%,
          rgba(8, 14, 22, 0.2) 40%,
          rgba(8, 14, 22, 0.1) 50%,
          rgba(8, 14, 22, 0.04) 60%,
          rgba(8, 14, 22, 0) 70%
        ),
        linear-gradient(
          to top,
          rgba(8, 14, 22, 0.5) 0%,
          rgba(8, 14, 22, 0.3) 16%,
          rgba(8, 14, 22, 0.14) 32%,
          rgba(8, 14, 22, 0.04) 48%,
          rgba(8, 14, 22, 0) 60%
        );
    }
  }

  & .v2-editorial__eyebrow {
    @media (min-width: 1080px) {
      font-size: 15px;
      font-weight: 700;
    }
  }

  & .v2-editorial__text {
    @media (min-width: 1080px) {
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.75;
    }
  }

  /* 診断バー: 水色の塗りボタンをやめて黒に（閉状態の CTA・開状態の「30秒診断」バッジ） */
  & .v2-scene .v2-scene__finder:not(.is-open) .v2-scene__finder-cta,
  & .v2-scene .v2-scene__finder:not(.is-open) .v2-scene__finder-bar:hover .v2-scene__finder-cta {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #fff;
  }

  & .v2-scene .v2-scene__finder:not(.is-open) .v2-scene__finder-bar:hover .v2-scene__finder-cta {
    border-color: #333;
    background: #333;
  }

  & .v2-scene .v2-scene__finder.is-open .v2-finder__caption::before {
    background: #1a1a1a;
    color: #fff;
    font-weight: 700;
  }

  /* 診断パネル（開状態）: 外枠は閉状態と同じグレー地、選択肢カードは白に。文字は閉状態のスケールに揃える */
  & .v2-scene .v2-scene__finder.is-open::before {
    @media (min-width: 1080px) {
      border: 0;
      background: #f3f5f6;
    }
  }

  & .v2-scene .v2-scene__finder.is-open {
    & .v2-finder__caption {
      @media (min-width: 1080px) {
        font-size: 16px;
        font-weight: 700;
        color: #1a1a1a;
      }
    }

    & .v2-finder__q-title {
      @media (min-width: 1080px) {
        font-size: 28px;
        font-weight: 700;
      }
    }

    & .v2-finder__opt {
      background: #fff;

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

      &:hover {
        background: #fff;
        border-color: #1a1a1a;
      }
    }

    & .v2-finder__opt-label {
      @media (min-width: 1080px) {
        font-size: 16px;
        font-weight: 700;
      }
    }

    & .v2-finder__card {
      background: #fff;
    }
  }

  /* ランキング: 1〜3 位はカードを大きく、順位バッジを 1.35 倍、製品名を太字に */
  & .v2-products-ranking .contents .items.is-native > article:nth-of-type(-n + 3) {
    @media (min-width: 1080px) {
      flex-basis: 300px;
      width: 300px;

      &::before {
        transform: scale(1.35);
        transform-origin: top left;
      }
    }
  }

  & .v2-products-ranking .contents .items.is-native > article:nth-of-type(1) {
    @media (min-width: 1080px) {
      flex-basis: 280px;
      width: 280px;
    }
  }

  & .v2-products-ranking .contents .items.is-native > article:nth-of-type(-n + 3) .product-card-default-name {
    @media (min-width: 1080px) {
      font-size: 16px;
      font-weight: 700;
    }
  }

  & .v2-products-ranking .contents .items.is-native > article:nth-of-type(-n + 3) .product-price-v2 {
    @media (min-width: 1080px) {
      font-size: 20px;
    }
  }

  & .v2-products-ranking .contents .items.is-native > article:nth-of-type(n + 4) {
    @media (min-width: 1080px) {
      opacity: 0.92;
    }
  }
}

/* [C] ── ワイド2 調整（9/25 その7）: セクションの表出アニメーション（控えめ・1 回だけ・transition でなく animation） ──
   JS が要素に .v2-rv を付け、画面に入った時に .is-in を付ける。初期表示で既に画面内のものは .is-now で即表示（アニメ無し）。
   終了後は JS がクラスを外すので、以後は通常の CSS に戻る（レールの切替フェード等と干渉しない） */
.v2-rv {
  opacity: 0;
}

.v2-rv.is-in {
  animation: v2-rv-up 0.75s cubic-bezier(0.2, 0.65, 0.2, 1) both;
  animation-delay: var(--rv-d, 0ms);
}

.v2-rv.is-now,
html:not(.v2-rv-ready) .v2-rv {
  opacity: 1;
  animation: none;
}

@keyframes v2-rv-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-rv,
  .v2-rv.is-in {
    opacity: 1;
    animation: none;
  }
}

/* [C] ── ワイド2 調整（9/25 その8）: 診断パネルの内側カードは透明（外枠のグレー地を見せ、選択肢だけ白）・SP はサムネ横の一言を省く ── */
html[data-top-layout="report"][data-top-variant="2"] .v2-scene .v2-scene__finder.is-open {
  @media (min-width: 1080px) {
    & .v2-finder__box,
    & .v2-finder__card,
    & .v2-scene__finder-clip,
    & .v2-scene__finder-body {
      background: transparent;
      box-shadow: none;
    }

    & .v2-finder__opt {
      border: 1px solid transparent;
      background: #fff;
    }

    & .v2-finder__opt:hover,
    & .v2-finder__opt.is-selected,
    & .v2-finder__opt[aria-pressed="true"] {
      border-color: #1a1a1a;
    }
  }
}

@media (max-width: 1079.98px) {
  html[data-top-variant="2"] .v2-scene__label .v2-scene__sample-text {
    display: none;
  }
}

/* [C] ── ワイド2 調整（9/25 その9）: 診断 UI のアクセント（アイコン・選択チェック・進捗・結果カードの枠/眉/もっと見る）を水色 → 黒に ── */
html[data-top-layout="report"][data-top-variant="2"] .v2-scene .v2-finder {
  --f-brand: #1a1a1a;
}

/* [C] ── ワイド2 調整（9/25 その10）: PC の 14px 未満テキストの底上げ（棚卸し結果に基づく） ── */
@media (min-width: 1080px) {
  html[data-top-layout="report"][data-top-variant="2"] {
    /* 製品カードの付帯情報 */
    & .product-price-v2-tax { font-size: 13px; }
    & .product-price-v2-coupon-label { font-size: 12px; }
    & .product-price-v2-discount-rate { font-size: 13px; font-weight: 700; }
    & .product-price-v2-soldout { font-size: 12px; }
    & .product-card-default-item-more-link { font-size: 12px; }

    /* Magazine（先方のセレクタが nth-child 込みで強いので同等の特異度で上書き） */
    & #anker-magazine-featured .splide__slide:nth-child(n) .blog-item .txt h4 { font-size: 18px; font-weight: 700; }
    & #anker-magazine-featured .splide__slide:nth-child(n) .blog-item .txt .blog-tag { font-size: 13px; }

    /* 診断 */
    & .v2-scene .v2-finder__caption { font-size: 15px; }
    & .v2-scene .v2-finder__step { font-size: 13px; }

    /* Store / Cafe（先方の .store-items .wrap-text p に特異度で勝たせる） */
    & .v2-brand-list .contents.-store .store-items .wrap-text p { font-size: 15px; line-height: 1.7; }

    /* 会員特典 */
    & .v2-official-merit .v2-merit__desc { font-size: 14px; }
    & .v2-official-merit .v2-merit__chip { font-size: 14px; }
    & .v2-official-merit .v2-merit__pp-fee { font-size: 13px; }
    & .v2-official-merit .v2-merit__pp-fee-tax { font-size: 11px; }

    /* ヘッダー・フッター（トップのワイド2 表示時のみ） */
    & .v2-header-main a[href*="account"] { font-size: 13px; }
    & .v2-ft .v2-ft-main-tit { font-size: 14px; }
    & .v2-ft .v2-ft-main-anc { font-size: 14px; }
    & .v2-ft .v2-ft-btm-anc,
    & .v2-ft .v2-ft-btm-copyright { font-size: 13px; }
    & .v2-ft .v2-ft-caption { font-size: 12px; }
  }
}

/* [C] ── ワイド2 調整（9/25 その11）: SP の「今がお得」レール崩れ修正・SP シーンタイル拡大・エディトリアルのボタン撤去 ── */
html[data-top-layout="report"][data-top-variant="2"] {
  /* エディトリアル: CTA ボタンは邪魔なので出さない（製品への導線はピンの吹き出し） */
  & .v2-editorial__btn {
    display: none;
  }

  @media (max-width: 1079.98px) {
    /* 今がお得: 新製品と同じ左右 20px の余白（整理版の padding:0 を上書き） */
    & .v2-sale-products-list.is-tab-on {
      padding-inline: 20px;
    }

    /* 「すべて見る」: 新製品側のブロックボタンが（レールが隠れた分）タブ直下に浮くので、
       今がお得を表示中は新製品側を隠し、今がお得側の同じボタンをレールの下に出す */
    & .v2-brand-new-products.is-tab-off > .button {
      display: none;
    }

    & .v2-sale-products-list.is-tab-on > .button {
      display: flex;
    }

    & .v2-brand-new-products.is-tab-off {
      padding-bottom: 0;
    }

    /* シーンタイル: 1 枚 78vw・4:5 で写真を大きく（右に次の 1 枚が少し覗く） */
    & .v2-scene__item {
      flex-basis: 78vw;
    }

    & .v2-scene {
      --s-tile-ar: 4 / 5;
    }

    & .v2-scene__tile b {
      font-size: 22px;
    }

    & .v2-scene__tile small {
      font-size: 14px;
    }

    & .v2-scene__label .v2-scene__sample {
      width: 52px;
    }
  }
}

/* [C] ── ワイド2 調整（9/25 その12）: 特集は 4 枚（PC 4 列 / SP 2×2）。5 枚目は出さない ── */
html[data-top-layout="report"][data-top-variant="2"] .v2-articles-list {
  & .list > :nth-child(n + 5) {
    display: none;
  }

  & .list {
    @media (min-width: 1080px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px 20px;
    }
  }
}

/* rev 20260925-012943 */

/* [C] ── polish round 1（9/25）: 製品名の途中改行禁止・SP カテゴリ 3 列・写真上の文字のスクリム強化・
   SP はピン予告なし・セクション余白の実測ズレ（220/160/72）を 120/120/40 に・KV 下バナーの間隔 ── */
html[data-top-layout="report"][data-top-variant="2"] {
  /* 製品名: 「2 / 2.5W」「B / uilt-In」のような英数字の途中改行を止める */
  & .product-card-default-name,
  & .product-card-default-name-link {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
  }

  /* 写真上の文字: シーンタイルの下 55% にスクリムを敷き、サブコピー/一言を 500 に */
  & .v2-scene__tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
  }

  & .v2-scene__tile .v2-scene__label {
    z-index: 1;
  }

  & .v2-scene__tile small,
  & .v2-scene__label .v2-scene__sample-text {
    color: #fff;
    font-weight: 700;
  }

  /* セクション余白: 今がお得の下（220→120）・診断の下（160→120）・シーン→診断（72→40）・製品を探す→シーン（96→120） */
  & .v2-brand-new-products,
  & .v2-sale-products-list.is-tab-on {
    margin-bottom: 0;
  }

  & .v2-scene {
    margin-bottom: 0;
  }

  & .v2-scene .v2-scene__cats {
    margin-bottom: var(--top-gap);
  }

  & .v2-scene .v2-scene__finder {
    margin-top: 40px;
  }

  /* KV → バナー 80→48、バナー同士 16px */
  & .shopify-section[id*="home-banner"] .wide-banner {
    display: grid;
    gap: 16px;
  }

  & .v2-info-carousel {
    @media (min-width: 1080px) {
      margin-bottom: 48px;
    }
  }

  @media (max-width: 1079.98px) {
    /* 製品を探す: 4 列→3 列（15 項目 = 5 行ちょうど）、ラベルは 1 文字落ちを防ぐ */
    & .v2-scene .v2-scene__cats .v2-scene__cat-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px 12px;
    }

    & .v2-scene .v2-scene__cats .v2-scene__cat-label {
      font-size: 13px;
      line-height: 1.4;
      letter-spacing: -0.01em;
      font-feature-settings: "palt";
    }

    /* シーン→診断 44→32、診断→ランキング 92→64 */
    & .v2-scene .v2-scene__finder {
      margin-top: 32px;
    }

    /* エディトリアル: 上からのスクリムを強め本文を 500 に。吹き出しは本文と重なるので SP では表示しない（ピン自体はタップで製品ページへ） */
    & .v2-editorial__scene::after {
      background: linear-gradient(to bottom, rgba(8, 14, 22, 0.7) 0%, rgba(8, 14, 22, 0.5) 22%, rgba(8, 14, 22, 0.25) 45%, rgba(8, 14, 22, 0) 70%);
    }

    & .v2-editorial__text {
      color: #fff;
      font-weight: 700;
    }

    & .v2-editorial__pin .v2-editorial__tip {
      display: none;
    }
  }
}

/* polish round 1b: .v2-scene の grid gap（PC 24 / SP 16）込みで 120 / 64、シーン→診断 40 / 32、SP エディトリアル上 64 に */
html[data-top-layout="report"][data-top-variant="2"] {
  & .v2-scene .v2-scene__cats {
    margin-bottom: calc(var(--top-gap) - 24px);
  }

  & .v2-scene .v2-scene__finder {
    margin-top: 16px;
  }

  @media (max-width: 1079.98px) {
    & .v2-scene .v2-scene__cats {
      margin-bottom: calc(var(--top-gap) - 16px);
    }

    & .v2-editorial {
      margin-top: 0;
    }
  }
}

/* [C] ── polish round 2（9/25）: 日本語の語中改行抑止・クーポンピルをアウトラインに・ランキングの製品名位置を揃える・
   SP 製品を探すの 15 枠目「すべてのカテゴリ」・特集の溝 16px ── */
.v2-scene__cat-item--all {
  display: none;
}

html[data-top-layout="report"][data-top-variant="2"] {
  /* 語中改行の抑止（対応ブラウザのみ。非対応は従来どおり） */
  & #anker-magazine-featured .blog-item .txt h4,
  & .v2-brand-list .contents.-store .store-items .wrap-text p,
  & .v2-editorial__text,
  & .v2-scene__tile small,
  & .v2-scene__label .v2-scene__sample-text {
    word-break: auto-phrase;
  }

  /* クーポン割引: 赤ベタ → 赤アウトライン（赤の面積を減らし、割引率の数字だけに赤を残す） */
  & .product-price-v2-coupon-label {
    border: 1px solid #d6334a;
    background: #fff;
    color: #c62839;
    font-weight: 700;
  }

  /* ランキング: 1〜3 位と 4 位以降で画像高さが違い製品名の行が 46px ずれていたので、画像枠を 260px に統一 */
  & .v2-products-ranking .contents .items.is-native > article:nth-of-type(n) .product-card-default-thum {
    @media (min-width: 1080px) {
      height: 260px;

      & img {
        height: 260px;
        object-fit: contain;
      }
    }
  }

  /* 特集: 溝を他のグリッドと同じ 16px に */
  & .v2-articles-list .list {
    @media (min-width: 1080px) {
      gap: 24px 16px;
    }
  }

  @media (max-width: 1079.98px) {
    /* 製品を探す: 14 項目 + 「すべてのカテゴリ」で 3 × 5 を埋める */
    & .v2-scene__cat-item--all {
      display: block;
    }

    & .v2-scene .v2-scene__cats .v2-scene__cat-visual--all {
      display: grid;
      place-items: center;
      color: #1a1a1a;
      background: #e9edef;
    }
  }
}

/* polish round 2b: クーポンピルは基底の固定幅 70px に 12px 文字が収まらないので幅を内容に合わせる */
html[data-top-layout="report"][data-top-variant="2"] .product-price-v2-coupon-label {
  display: inline-block;
  flex: none;
  width: auto;
  max-width: none;
  height: auto;
  padding: 3px 7px;
  line-height: 1.3;
  white-space: nowrap;
}

/* polish round 2c: SP のクーポンピルは基底で幅いっぱいに伸びるので内容幅に */
@media (max-width: 1079.98px) {
  html[data-top-layout="report"][data-top-variant="2"] .product-price-v2-coupon-label {
    width: fit-content;
    margin-top: 6px;
  }
}

/* [C] ── ワイド2: 本文書体 Noto Sans JP → Gen Interface JP Display（400/500/700、unicode-range 分割）──
   代役は Noto でなくシステムフォント（Noto を挟むと Web フォント 2 段待ちで最初の描画が止まる）。
   :where で特異度 0 なので Mont（価格・順位）など明示指定は従来どおり */
html[data-top-variant="2"] body,
html[data-top-variant="2"] :where(body *:not(svg):not(svg *)) {
  font-family: "GenInterfaceJPDisplay", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-synthesis: none;
}

html[data-top-variant="2"] .v2-official-merit .v2-merit__lead {
  font-family: inherit;
}

/* 会員特典: 先方の "GenInterfaceJPD"(72KB サブセット) に無い字の代役を Noto でなく新しい slice に（Noto の取得 600KB を止める） */
html[data-top-variant="2"] .v2-official-merit :where(*:not(svg):not(svg *)) {
  font-family: "GenInterfaceJPDisplay", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

html[data-top-variant="2"] .v2-official-merit :where(.v2-merit__num, .v2-merit__num--lg) {
  font-family: "MeritMont", "GenInterfaceJPDisplay", sans-serif;
}

/* [C] ── FB 対応（9/25）: ヘッダー Anker Store 導線・Store / Cafe を 1 枚に統合 ── */
html[data-top-variant="2"] .v2-header-main .search-ct-store::after {
  display: none;
}

.v2-header-store-btn {
  margin-top: 8px;
}

html[data-top-layout="report"][data-top-variant="2"] .v2-brand-list .contents.-store {
  @media (min-width: 1080px) {
    grid-template-columns: 1fr;
  }

  & .store-items {
    @media (min-width: 1080px) {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      align-items: center;
      gap: 40px;
      padding: 40px 48px;
    }

    & .wrap-text {
      @media (min-width: 1080px) {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-width: none;
        text-align: left;
        align-items: flex-start;
        justify-items: start;
      }
    }

    & .wrap-img {
      @media (min-width: 1080px) {
        grid-column: 2;
        grid-row: 1 / span 2;
      }
    }

    & .btn-sm-sqr-outline {
      @media (min-width: 1080px) {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: start;
      }
    }

    & .store-cafe-note {
      display: block;
      margin-top: 6px;
      color: var(--txt-gray, #666);
      font-size: 13px;
    }
  }
}

/* ============================================================
   [fx] 診断 v2（ワイド2 のみ。常時展開・結果保持・複数カート・モーダル）
   ============================================================ */
.v2-scene__fx { display: none; }

html[data-top-variant="2"] {
  & .v2-scene__fx { display: block; margin-top: 56px; }
  & .v2-scene .v2-scene__finder { display: none !important; }

  @media (min-width: 1080px) {
    & .v2-scene__fx { margin-top: 72px; }
  }
}

html.fx-modal-open { overflow: hidden; }

.fx {
  --fx-ink: #1a1a1a;
  --fx-sub: #666;
  --fx-line: #e6e6e6;
  --fx-bg: #f3f5f6;
  --fx-ease: cubic-bezier(0.2, 0.65, 0.2, 1);
  position: relative;
  box-sizing: border-box;
  padding: 28px 20px 24px;
  border-radius: 16px;
  background: var(--fx-bg);
  color: var(--fx-ink);

  @media (min-width: 1080px) {
    padding: 44px 48px 40px;
    border-radius: 20px;
  }

  & svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* 見出し */
  & .fx__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 24px;

    @media (min-width: 1080px) { margin-bottom: 36px; }
  }
  & .fx__eyebrow {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--fx-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }
  & .fx__title {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;

    @media (min-width: 1080px) { font-size: 28px; }
  }
  & .fx__lead {
    margin: 8px 0 0;
    color: var(--fx-sub);
    font-size: 14px;
    line-height: 1.6;

    @media (min-width: 1080px) { font-size: 15px; }
  }
  & .fx__progress {
    display: flex;
    align-items: center;
    gap: 6px;

    & span { margin-right: 6px; color: var(--fx-sub); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
    & i { width: 36px; height: 4px; border-radius: 2px; background: #d9dde0; transition: background 0.2s; }
    & i.is-current { background: var(--fx-ink); }
    & i.is-done { background: var(--fx-ink); }

    @media (min-width: 1080px) { & i { width: 48px; } }
  }

  /* 設問 */
  & .fx__q { animation: fx-in 0.4s var(--fx-ease) both; }
  & .fx__q-num { margin: 0 0 4px; color: var(--fx-sub); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
  & .fx__q-title {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;

    @media (min-width: 1080px) { margin-bottom: 24px; font-size: 24px; }
  }
  & .fx__opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    @media (min-width: 1080px) {
      grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
      gap: 14px;
    }
  }
  & .fx__opts[data-count="4"] { --n: 4; }
  & .fx__opts[data-count="5"] { --n: 5; }
  & .fx__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 112px;
    padding: 16px 14px 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #fff;
    color: var(--fx-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--fx-ease), border-color 0.15s, background 0.15s, box-shadow 0.2s;

    @media (min-width: 1080px) { min-height: 136px; padding: 22px 20px 18px; gap: 18px; }

    &:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); border-color: var(--fx-ink); }
    &.is-on { background: var(--fx-ink); color: #fff; border-color: var(--fx-ink); }
    & .fx__opt-icon { display: grid; place-items: center; width: 36px; height: 36px; font-size: 32px; }
    & .fx__opt-label { font-size: 14px; font-weight: 700; line-height: 1.4; @media (min-width: 1080px) { font-size: 16px; } }
    & .fx__opt-check {
      position: absolute; top: 12px; right: 12px;
      display: grid; place-items: center; width: 22px; height: 22px;
      border-radius: 50%; background: #fff; color: var(--fx-ink); font-size: 14px;
      opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.2s var(--fx-ease);
    }
    &.is-on .fx__opt-check { opacity: 1; transform: scale(1); }
  }
  & .fx__link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px; padding: 0; border: 0; background: none;
    color: var(--fx-sub); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    & svg { font-size: 16px; }
    &:hover { color: var(--fx-ink); }
  }
  & .fx__back svg { transform: scaleX(-1); }

  /* 結果 */
  & .fx__result { animation: fx-in 0.45s var(--fx-ease) both; }
  & .fx__result.is-instant { animation: none; }
  & .fx__result-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin-bottom: 18px;
    & .fx__link { margin-top: 0; }
    @media (min-width: 1080px) { margin-bottom: 24px; }
  }
  & .fx__picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
  & .fx__picks-label { margin-right: 4px; color: var(--fx-sub); font-size: 13px; font-weight: 700; }
  & .fx__chip { padding: 5px 10px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }

  & .fx__cards {
    display: grid;
    gap: 12px;
    @media (min-width: 1080px) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  }
  & .fx__card {
    position: relative;
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 0 14px;
    padding: 14px;
    border: 2px solid transparent;
    border-radius: 16px;
    background: #fff;
    animation: fx-up 0.5s var(--fx-ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
    transition: border-color 0.15s;

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

    &.is-picked { border-color: var(--fx-ink); }
    & .fx__rank {
      position: absolute; top: 12px; left: 12px; z-index: 1;
      padding: 5px 10px; border-radius: 6px; background: var(--fx-ink); color: #fff;
      font-size: 11px; font-weight: 700; line-height: 1.2;
      @media (min-width: 1080px) { top: 16px; left: 16px; font-size: 12px; }
    }
    &.is-top .fx__rank { background: #00b4d0; }
    & .fx__pick {
      position: absolute; top: 10px; right: 10px; z-index: 1;
      & input { position: absolute; opacity: 0; width: 1px; height: 1px; }
      & i {
        display: grid; place-items: center; width: 28px; height: 28px;
        border: 2px solid #c9cdd1; border-radius: 8px; background: #fff; cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
      }
      & i::after { content: ""; width: 7px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
      & input:checked + i { border-color: var(--fx-ink); background: var(--fx-ink); }
      & input:checked + i::after { opacity: 1; }
      & input:focus-visible + i { outline: 2px solid #00b4d0; outline-offset: 2px; }
      @media (min-width: 1080px) { top: 14px; right: 14px; }
    }
    & .fx__img {
      display: block; width: 100%; aspect-ratio: 1; padding: 8px; border: 0; border-radius: 12px;
      background: var(--fx-bg); cursor: zoom-in; overflow: hidden;
      & img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.3s var(--fx-ease); }
      &:hover img { transform: scale(1.04); }
      @media (min-width: 1080px) { aspect-ratio: 5 / 4; padding: 16px; }
    }
    & .fx__body { display: flex; flex-direction: column; min-width: 0; @media (min-width: 1080px) { margin-top: 16px; } }
    & .fx__cat { margin: 0 0 4px; color: var(--fx-sub); font-size: 12px; }
    & .fx__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; @media (min-width: 1080px) { font-size: 17px; } }
    & .fx__price { margin-top: 6px; font-size: 17px; @media (min-width: 1080px) { font-size: 19px; } }
    & .fx__reason { margin: 8px 0 0; color: var(--fx-sub); font-size: 13px; line-height: 1.6; @media (min-width: 1080px) { font-size: 14px; } }
    & .fx__actions {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px;
      @media (min-width: 1080px) { padding-top: 16px; }
      & .fx__btn { padding-inline: 8px; white-space: nowrap; }
      @media (max-width: 1079.98px) { & .fx__btn svg { display: none; } & .fx__btn { font-size: 12px; } }
    }
  }
  & .fx__cards .fx__card .fx__img { grid-row: 1 / span 1; }

  /* ボタン */
  & .fx__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 14px; border: 1.5px solid var(--fx-ink); border-radius: 999px;
    background: #fff; color: var(--fx-ink); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    & svg { font-size: 16px; }
    &:hover { background: var(--fx-bg); }
    &--primary { background: var(--fx-ink); color: #fff; }
    &--primary:hover { background: #333; }
    &--lg { min-height: 52px; padding: 0 22px; font-size: 15px; }
    &:disabled { opacity: 0.4; cursor: default; }
    &.is-busy { opacity: 0.7; }
    &.is-added { background: #00b4d0; border-color: #00b4d0; color: #fff; }
    @media (min-width: 1080px) { min-height: 42px; font-size: 14px; }
  }

  /* まとめてカート */
  & .fx__bar {
    display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center;
    margin-top: 16px; padding: 16px; border-radius: 14px; background: #fff;
    @media (min-width: 1080px) { grid-template-columns: auto 1fr auto; gap: 24px; margin-top: 20px; padding: 18px 24px; }
  }
  & .fx__all {
    display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
    & input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    & i { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #c9cdd1; border-radius: 7px; background: #fff; }
    & i::after { content: ""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
    & input:checked + i { border-color: var(--fx-ink); background: var(--fx-ink); }
    & input:checked + i::after { opacity: 1; }
  }
  & .fx__sum { margin: 0; color: var(--fx-sub); font-size: 14px; & b { color: var(--fx-ink); font-size: 18px; margin-right: 2px; } }

  /* モーダル */
  & .fx__modal {
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: end center;
    opacity: 0; transition: opacity 0.2s;
    &.is-in { opacity: 1; }
    &[hidden] { display: none; }
    @media (min-width: 1080px) { place-items: center; }
  }
  & .fx__modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 20, 0.55); }
  & .fx__modal-panel {
    position: relative; box-sizing: border-box; width: 100%; max-height: 92vh; overflow: auto;
    display: grid; gap: 20px; padding: 20px 20px 28px; border-radius: 20px 20px 0 0; background: #fff;
    transform: translateY(24px); transition: transform 0.25s var(--fx-ease);
    @media (min-width: 1080px) {
      grid-template-columns: 46% 1fr; gap: 40px; width: min(940px, calc(100% - 48px)); max-height: 88vh;
      padding: 40px; border-radius: 20px;
    }
  }
  & .fx__modal.is-in .fx__modal-panel { transform: none; }
  & .fx__modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--fx-bg); color: var(--fx-ink); font-size: 18px; cursor: pointer;
    @media (min-width: 1080px) { top: 16px; right: 16px; }
  }
  & .fx__modal-main { aspect-ratio: 1; padding: 20px; border-radius: 16px; background: var(--fx-bg); & img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } }
  & .fx__modal-thumbs { display: flex; gap: 8px; margin-top: 10px; }
  & .fx__modal-thumb {
    width: 64px; height: 64px; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: var(--fx-bg); cursor: pointer;
    & img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
    &.is-on { border-color: var(--fx-ink); }
  }
  & .fx__modal-info { display: flex; flex-direction: column; min-width: 0; }
  & .fx__modal-name { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; @media (min-width: 1080px) { font-size: 24px; } }
  & .fx__modal-price { margin-top: 10px; font-size: 22px; }
  & .fx__points {
    margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px;
    & li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; }
    & svg { flex: none; margin-top: 3px; padding: 3px; border-radius: 50%; background: var(--fx-ink); color: #fff; font-size: 12px; width: 18px; height: 18px; stroke-width: 2.4; }
  }
  & .fx__variants { margin-top: 20px; }
  & .fx__variants-label { margin: 0 0 8px; color: var(--fx-sub); font-size: 13px; font-weight: 700; }
  & .fx__variants-list { display: flex; flex-wrap: wrap; gap: 8px; }
  & .fx__variant {
    padding: 8px 14px; border: 1.5px solid var(--fx-line); border-radius: 999px; background: #fff;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    &.is-on { border-color: var(--fx-ink); background: var(--fx-ink); color: #fff; }
    &.is-soldout { color: #aaa; cursor: default; & small { margin-left: 4px; font-size: 11px; } }
  }
  & .fx__modal-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; @media (min-width: 1080px) { grid-template-columns: 1fr 1fr; } }

  /* トースト */
  & .fx__toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 10001;
    display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
    padding: 14px 18px; border-radius: 12px; background: var(--fx-ink); color: #fff; font-size: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, 16px); opacity: 0; transition: transform 0.25s var(--fx-ease), opacity 0.2s;
    &.is-in { transform: translate(-50%, 0); opacity: 1; }
    &.is-error { background: #c62839; }
    &[hidden] { display: none; }
    & a { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  }
}

@keyframes fx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx .fx__q, .fx .fx__result, .fx .fx__card { animation: none; }
}

/* ============================================================
   [feat] 特集タイル 2×2（ワイド2 のみ・「シーンから探す」の後継・ランキング直下）
   ============================================================ */
.shopify-section[id*="v2-top-feature-tiles"] { display: none; }
html[data-top-variant="2"] .shopify-section[id*="v2-top-feature-tiles"] { display: block; }

/* ワイド2: 旧「シーンから探す」（見出し + タイル）は出さない。診断の下の余白も詰める */
html[data-top-variant="2"] .v2-scene > .v2-scene__head,
html[data-top-variant="2"] .v2-scene > .v2-scene__viewport { display: none !important; }
html[data-top-layout="report"][data-top-variant="2"] .v2-scene .v2-scene__cats { margin-bottom: 0; }

html[data-top-layout="report"][data-top-variant="2"] div.themeV2:has(> [id*="v2-top-scene-finder"]) > [id*="v2-top-feature-tiles"] { order: 5; }

.v2-feat {
  margin-top: 0; /* 直前のランキングが margin-bottom で --top-gap を持つ */
  padding-inline: 12px;

  & .v2-feat__heading { margin: 0 0 20px; padding-inline: max(0px, calc((100% - var(--top-w, 1280px)) / 2 - 12px)); }

  & .v2-feat__grid {
    display: grid;
    gap: 12px;
    @media (min-width: 1080px) { grid-template-columns: 1fr 1fr; }
  }

  & .v2-feat__tile {
    position: relative;
    display: block;
    min-height: 440px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-a), var(--bg-b));
    color: #1a1a1a;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.2, 1), box-shadow 0.35s;

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

    &:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); }
    &--light { color: #fff; }
  }

  & .v2-feat__imgs {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 6px;
    padding: 20px 20px 46% 20px;
    pointer-events: none;

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

    &:has(.v2-feat__img:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  }
  & .v2-feat__img {
    display: grid;
    place-items: center;
    width: 100%;
    max-height: 150px;
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.2, 0.65, 0.2, 1), opacity 0.5s;
    transition-delay: calc(var(--i, 1) * 90ms);

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

    & img { max-width: 100%; max-height: 150px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.2, 1); @media (min-width: 1080px) { max-height: 200px; } }
  }
  & .v2-feat__tile.is-in .v2-feat__img { transform: none; opacity: 1; }
  & .v2-feat__tile:hover .v2-feat__img img { transform: scale(1.05); }
  & .v2-feat__tile--light .v2-feat__img img { mix-blend-mode: normal; }

  & .v2-feat__copy {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    justify-items: start;

    @media (min-width: 1080px) { left: 36px; right: auto; bottom: 36px; max-width: 46%; }
  }
  & .v2-feat__eyebrow { margin-bottom: 8px; color: #00b4d0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
  & .v2-feat__tile--light .v2-feat__eyebrow { color: #7fe3f2; }
  & .v2-feat__title { display: block; font-size: 24px; font-weight: 700; line-height: 1.35; @media (min-width: 1080px) { font-size: 30px; } }
  & .v2-feat__sub { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; opacity: 0.85; @media (min-width: 1080px) { font-size: 15px; } }
  & .v2-feat__cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px; padding: 10px 16px; border: 1.5px solid currentColor; border-radius: 999px;
    font-size: 14px; font-weight: 700; transition: background 0.2s, color 0.2s;
    & svg { width: 16px; height: 16px; }
  }
  & .v2-feat__tile:hover .v2-feat__cta { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
  & .v2-feat__tile--light:hover .v2-feat__cta { background: #fff; border-color: #fff; color: #1a1a1a; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-feat .v2-feat__img { transform: none; opacity: 1; transition: none; }
}

/* [feat] SP: 製品画像は上半分に固定してコピーと重ねない */
@media (max-width: 1079.98px) {
  .v2-feat .v2-feat__imgs { inset: 0 0 auto 0; height: 52%; padding: 20px 20px 0; align-items: center; }
  .v2-feat .v2-feat__img, .v2-feat .v2-feat__img img { max-height: 118px; }
}

/* [feat] バナー画像タイル（正方形バナーを PC は右・全高、SP は上・全幅。左/下端をタイルの地へなじませる） */
.v2-feat .v2-feat__tile--banner {
  display: flex; flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, var(--bg-a), var(--bg-b));

  & .v2-feat__banner {
    display: block; aspect-ratio: 1; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent);
    & img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.2, 1); }
  }
  &:hover .v2-feat__banner img { transform: scale(1.03); }
  & .v2-feat__copy { position: static; padding: 4px 24px 28px; }
  & .v2-feat__title { font-size: 22px; }

  /* SP: コピー帯はバナー下端の青に揃え、文字は白 */
  @media (max-width: 1079.98px) {
    background: var(--bg-b);
    color: #fff;
    & .v2-feat__eyebrow { color: #fff; opacity: 0.85; }
    &:hover .v2-feat__cta { background: #fff; border-color: #fff; color: #1a1a1a; }
  }

  @media (min-width: 1080px) {
    display: block;
    min-height: 420px;
    background: linear-gradient(180deg, var(--bg-a) 0%, #dfe4e8 25%, #bac5cf 44%, var(--bg-b) 72%, var(--bg-b) 100%);

    & .v2-feat__banner {
      position: absolute; top: 0; right: 0; bottom: 0; height: 100%;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%);
    }
    & .v2-feat__copy { position: absolute; top: 40px; left: 36px; bottom: auto; right: auto; max-width: 240px; padding: 0; }
    & .v2-feat__title { font-size: 26px; }
  }
}

/* ============================================================
   [clab] カラーラボ（ワイド2 のみ・特集タイルの直下）
   ============================================================ */
.shopify-section[id*="v2-top-color-lab"] { display: none; }
html[data-top-variant="2"] .shopify-section[id*="v2-top-color-lab"] { display: block; }
html[data-top-layout="report"][data-top-variant="2"] div.themeV2:has(> [id*="v2-top-scene-finder"]) > [id*="v2-top-color-lab"] { order: 5; }

.v2-clab {
  margin-top: 12px;
  padding: 40px 20px 48px;
  background: var(--lab-bg, #fbe9ef);
  transition: background 0.5s ease;

  @media (min-width: 1080px) { padding: 64px 0 72px; }

  & .v2-clab__inner { max-width: var(--top-w, 1280px); margin-inline: auto; }
  & .v2-clab__head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
    margin-bottom: 24px;
    @media (min-width: 1080px) { margin-bottom: 36px; }
  }
  & .v2-clab__eyebrow { display: block; margin-bottom: 8px; color: #00b4d0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
  & .v2-clab__title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.3; @media (min-width: 1080px) { font-size: 34px; } }
  & .v2-clab__lead { margin: 8px 0 0; color: #555; font-size: 14px; @media (min-width: 1080px) { font-size: 15px; } }

  & .v2-clab__chips {
    display: flex; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    &::-webkit-scrollbar { display: none; }
    @media (min-width: 1080px) { gap: 10px; overflow: visible; }
  }
  & .v2-clab__chip {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 10px; border: 2px solid transparent; border-radius: 999px; background: #fff;
    color: #1a1a1a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s, transform 0.2s;
    &::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
    &:hover { transform: translateY(-2px); }
    &.is-on { border-color: #1a1a1a; }
  }

  & .v2-clab__panel.is-in { animation: fx-in 0.35s cubic-bezier(0.2, 0.65, 0.2, 1) both; }
  & .v2-clab__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    @media (min-width: 1080px) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  }
  & .v2-clab__card {
    display: flex; flex-direction: column; padding: 12px 12px 14px; border-radius: 12px; background: #fff;
    color: #1a1a1a; text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.65, 0.2, 1), box-shadow 0.3s;
    &:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1); }
    @media (min-width: 1080px) { padding: 16px 16px 18px; }
  }
  & .v2-clab__img { display: block; aspect-ratio: 1; & img { width: 100%; height: 100%; object-fit: contain; } }
  & .v2-clab__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 13px; font-weight: 700; line-height: 1.45; @media (min-width: 1080px) { font-size: 14px; } }
  & .v2-clab__variant { display: block; margin-top: 4px; color: #666; font-size: 12px; font-style: normal; }
  & .v2-clab__price { display: block; margin-top: 6px; font-size: 16px; & small { margin-left: 2px; color: #888; font-size: 11px; font-weight: 400; } @media (min-width: 1080px) { font-size: 17px; } }
  & .v2-clab__sw { display: flex; gap: 4px; margin-top: 8px; & i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } & i.is-on { outline: 2px solid #1a1a1a; outline-offset: 1px; } }
}

/* [feat][clab] コンテンツ幅（--top-w）に収める。100vw は狙わない */
html[data-top-variant="2"] .v2-feat {
  box-sizing: border-box;
  max-width: var(--top-w, 1280px);
  margin-inline: auto;
  padding-inline: 20px;

  @media (min-width: 1080px) { padding-inline: 0; }
  & .v2-feat__grid { gap: 12px; @media (min-width: 1080px) { gap: 16px; } }
  & .v2-feat__tile { min-height: 400px; @media (min-width: 1080px) { min-height: 420px; } }
  & .v2-feat__heading { padding-inline: 0; }
}

/* カラーラボは 1 行まで（PC 6 列 / SP 横スクロール）。売れ筋順の並べ替えは JS、取れるまではブロック順の先頭 6 点 */
.v2-clab .v2-clab__grid > .v2-clab__card:nth-child(n+6), .v2-clab .v2-clab__grid > .v2-clab__card[hidden] { display: none; }
@media (max-width: 1079px) {
  .v2-clab .v2-clab__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -20px; padding: 0 20px 4px; scroll-padding-inline: 20px;
    &::-webkit-scrollbar { display: none; }
    & > .v2-clab__card { scroll-snap-align: start; }
  }
}

html[data-top-variant="2"] .v2-clab {
  box-sizing: border-box;
  max-width: var(--top-w, 1280px);
  margin: 16px auto 0;
  padding: 28px 20px 32px;
  border-radius: 16px;

  @media (min-width: 1080px) { margin-top: 16px; padding: 44px 48px 48px; border-radius: 20px; }
}

/* [feat] SP: 画像領域（上 46%）とコピー（下）が重ならない高さに */
@media (max-width: 1079.98px) {
  html[data-top-variant="2"] .v2-feat .v2-feat__tile { min-height: 480px; }
  .v2-feat .v2-feat__imgs { height: 46%; }
}

/* [fx] 診断ボックスもカテゴリタイルと同じ幅（--s-w = コンテンツ幅）に */
html[data-top-variant="2"] .v2-scene .v2-scene__fx {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--s-pad));
  max-width: var(--s-w);
  margin-inline: auto;
}

/* [clab] カードにカテゴリ名 */
.v2-clab .v2-clab__card { position: relative; }
.v2-clab .v2-clab__cat { position: absolute; top: 10px; left: 12px; z-index: 1; padding: 4px 8px; border-radius: 6px; background: #f3f5f6; color: #555; font-size: 11px; font-weight: 700; line-height: 1.2; @media (min-width: 1080px) { top: 12px; left: 14px; } }

/* [fx] 設問の刷新: 線アイコン → 色タイル + 実製品写真。見出しは大きな設問番号つき */
.fx {
  & .fx__q-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; @media (min-width: 1080px) { gap: 18px; margin-bottom: 26px; } }
  & .fx__q-num { color: #00b4d0; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; @media (min-width: 1080px) { font-size: 44px; } }
  & .fx__q-head .fx__q-title { margin: 0; }

  & .fx__opt--photo {
    justify-content: flex-end;
    gap: 10px;
    min-height: 0;
    aspect-ratio: 4 / 5;
    padding: 12px 12px 14px;
    background: var(--tint, #f3f5f6);
    border: 2px solid transparent;
    overflow: hidden;

    @media (min-width: 1080px) { aspect-ratio: 1; padding: 18px 18px 18px; gap: 12px; }

    & .fx__opt-visual {
      position: absolute; inset: 10px 10px 44px; display: grid; place-items: center;
      @media (min-width: 1080px) { inset: 14px 14px 56px; }
      & img { max-width: 78%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.2, 1); }
    }
    & .fx__opt-label { position: relative; z-index: 1; font-size: 14px; @media (min-width: 1080px) { font-size: 16px; } }
    & .fx__opt-check { background: #1a1a1a; color: #fff; }

    &:hover { border-color: #1a1a1a; transform: translateY(-4px); }
    &:hover .fx__opt-visual img { transform: scale(1.08) rotate(-3deg); }
    &.is-on { background: var(--tint, #f3f5f6); color: #1a1a1a; border-color: #1a1a1a; box-shadow: inset 0 0 0 2px #1a1a1a; }
    &.is-on .fx__opt-visual img { transform: scale(1.06); }
  }
}

/* [fx] ゲーム化: 黒いステージ・タイルの傾き追従・配られる登場・沈む非選択・シャッフル・マッチ度・答えの収集 */
.fx {
  --fx-bg: #111418;
  --fx-ink: #fff;
  --fx-sub: #9aa3ad;
  --fx-line: rgba(255, 255, 255, 0.12);
  background: radial-gradient(900px 500px at 12% 0%, #2a3140 0%, #111418 60%);
  color: #fff;

  & .fx__eyebrow { background: #00cbeb; color: #0b0d10; }
  & .fx__progress i { background: rgba(255, 255, 255, 0.16); }
  & .fx__progress i.is-current, & .fx__progress i.is-done { background: #00cbeb; }
  & .fx__progress span { color: #9aa3ad; }
  & .fx__q-num { color: #00cbeb; }
  & .fx__link { color: #9aa3ad; &:hover { color: #fff; } }
  & .fx__chip { background: rgba(255, 255, 255, 0.12); color: #fff; }
  & .fx__picks-label { color: #9aa3ad; }

  /* 答えの収集 */
  & .fx__trail { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; &[hidden] { display: none; } }
  & .fx__trail-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; font-weight: 700;
    animation: fx-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
    & img { width: 28px; height: 28px; border-radius: 50%; background: #fff; object-fit: contain; padding: 3px; box-sizing: border-box; }
  }

  /* タイル: 配られる登場 + 3D 傾き + 沈む */
  & .fx__opts { perspective: 1000px; }
  & .fx__opt--photo {
    color: #1a1a1a;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    animation: fx-deal 0.55s cubic-bezier(0.2, 0.65, 0.2, 1) both;
    animation-delay: calc(var(--k, 0) * 70ms);
    transition: transform 0.12s ease-out, border-color 0.15s, opacity 0.3s, box-shadow 0.3s;
    will-change: transform;

    & .fx__opt-visual img { transform: translate(var(--tx, 0), var(--ty, 0)); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.18)); }
    &:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.03); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35); }
    &:hover .fx__opt-visual img { transform: translate(var(--tx, 0), calc(var(--ty, 0) - 8px)) scale(1.1); }
    &:active { transform: perspective(900px) scale(0.97); }
    &.is-on { transform: perspective(900px) translateY(-6px) scale(1.04); box-shadow: 0 0 0 3px #00cbeb, 0 24px 40px rgba(0, 0, 0, 0.35); border-color: transparent; }
    &.is-on .fx__opt-check { background: #00cbeb; color: #0b0d10; }
    &.is-dim { opacity: 0.25; transform: perspective(900px) scale(0.94); }
  }

  /* シャッフル */
  & .fx__shuffle { display: grid; justify-items: center; gap: 20px; padding: 24px 0 8px; animation: fx-in 0.3s both; &[hidden] { display: none; } }
  & .fx__shuffle-text { margin: 0; color: #9aa3ad; font-size: 15px; font-weight: 700; }
  & .fx__shuffle-slots {
    display: flex; gap: 12px;
    & span { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 16px; background: #fff; overflow: hidden; @media (min-width: 1080px) { width: 160px; height: 160px; } }
    & img { width: 80%; height: 80%; object-fit: contain; }
    & span:nth-child(1) { animation: fx-slot 0.18s linear infinite; }
    & span:nth-child(2) { animation: fx-slot 0.18s linear infinite 0.06s; }
    & span:nth-child(3) { animation: fx-slot 0.18s linear infinite 0.12s; }
  }

  /* 結果カード: マッチ度 + 登場ポップ */
  & .fx__card { color: #1a1a1a; animation: fx-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; animation-delay: calc(var(--i, 0) * 120ms); }
  & .fx__card .fx__cat { color: #666; }
  & .fx__card .fx__reason { color: #666; }
  & .fx__match {
    position: absolute; left: 12px; top: 40px; z-index: 1;
    padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); color: #1a1a1a; font-size: 11px; font-weight: 700; line-height: 1.2;
    & b { font-size: 14px; font-weight: 700; color: #00b4d0; }
    @media (min-width: 1080px) { left: 16px; top: 46px; font-size: 12px; & b { font-size: 16px; } }
  }
  & .fx__bar { color: #1a1a1a; }
  & .fx__bar .fx__sum b { color: #1a1a1a; }
  & .fx__all { color: #1a1a1a; }
  & .fx__result-head .fx__link { color: #9aa3ad; &:hover { color: #fff; } }
}

@keyframes fx-deal { from { opacity: 0; transform: perspective(900px) translateY(28px) rotateX(-14deg); } to { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0); } }
@keyframes fx-pop { 0% { opacity: 0; transform: scale(0.9) translateY(12px); } 100% { opacity: 1; transform: none; } }
@keyframes fx-slot { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .fx .fx__opt--photo, .fx .fx__card, .fx .fx__trail-chip { animation: none; }
  .fx .fx__shuffle-slots span { animation: none; }
}

/* [fx] 白い部品（結果カード・まとめ帯・モーダル・シャッフル枠）はライトのトークンに固定（黒ステージの値を伝播させない） */
.fx .fx__card,
.fx .fx__bar,
.fx .fx__modal {
  --fx-bg: #f3f5f6;
  --fx-ink: #1a1a1a;
  --fx-sub: #666;
  --fx-line: #e6e6e6;
  color: #1a1a1a;
}
.fx .fx__card .fx__rank { background: #1a1a1a; color: #fff; }
.fx .fx__card.is-top .fx__rank { background: #00b4d0; }
.fx .fx__card .fx__img { background: #f3f5f6; }

/* [fx] 修正: ネイティブ CSS ネストでは `&--modifier` の連結は無効なので、修飾子は明示セレクタで書く */
.fx .fx__btn--primary { background: var(--fx-ink, #1a1a1a); color: #fff; border-color: var(--fx-ink, #1a1a1a); }
.fx .fx__btn--primary:hover { background: #333; border-color: #333; }
.fx .fx__btn--lg { min-height: 52px; padding: 0 22px; font-size: 15px; }
.fx .fx__btn.is-added { background: #00b4d0; border-color: #00b4d0; color: #fff; }
.v2-feat .v2-feat__tile--light { color: #fff; }
.v2-feat .v2-feat__tile--light .v2-feat__eyebrow { color: #7fe3f2; }
.v2-feat .v2-feat__tile--light .v2-feat__img img { mix-blend-mode: normal; }
.v2-feat .v2-feat__tile--light:hover .v2-feat__cta { background: #fff; border-color: #fff; color: #1a1a1a; }

/* [fx] SP: マッチ度は画像の下端に小さく */
@media (max-width: 1079.98px) {
  .fx .fx__match { top: auto; bottom: 10px; left: 8px; padding: 3px 6px; font-size: 10px; }
  .fx .fx__match b { font-size: 12px; }
}

/* ============================================================
   FB 9/25 追加分
   ============================================================ */
/* 角丸を控えめに（このセッションで追加した部品は 4 / 8px に統一） */
html[data-top-variant="2"] {
  & .fx, & .v2-clab, & .v2-feat .v2-feat__tile { border-radius: 8px; }
  & .fx .fx__opt, & .fx .fx__opt--photo, & .fx .fx__card, & .fx .fx__bar, & .fx .fx__img, & .fx .fx__modal-panel, & .fx__modal-panel,
  & .v2-clab .v2-clab__card, & .v2-scene .v2-scene__cats .v2-scene__cat-visual, & .fx .fx__shuffle-slots span { border-radius: 8px; }
  & .fx .fx__rank, & .fx .fx__match, & .fx .fx__eyebrow, & .fx .fx__pick i, & .fx .fx__all i, & .fx .fx__modal-thumb, & .fx__modal-thumb, & .v2-clab .v2-clab__cat, & .v2-scene__label .v2-scene__sample { border-radius: 4px; }
  & .fx .fx__opt-check { border-radius: 50%; }
  & .fx .fx__toast, & .fx__toast { border-radius: 8px; }
  @media (min-width: 1080px) { & .fx, & .v2-clab { border-radius: 8px; } }
}

/* ヘッダー: 直営店舗リンク（店アイコン + 文言） */

/* Store カード: 「削除予定」オーバーレイ */
html[data-top-variant="2"] .v2-brand-list .contents.-store {
  position: relative;
  & .store-items { filter: grayscale(1); opacity: 0.45; pointer-events: none; }
  &::after {
    content: "このセクションは削除予定です（ヘッダーの「直営店舗を探す」に統合）";
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 0 12px, transparent 12px 24px);
    color: #1a1a1a; font-size: 15px; font-weight: 700; text-align: center; padding: 20px;
  }
}

/* 特集タイル 2 面: 横 1 列のまま（1 枚 632px）。カラーラボはその上・ランキングとの間隔 */
html[data-top-layout="report"][data-top-variant="2"] div.themeV2:has(> [id*="v2-top-scene-finder"]) > [id*="v2-top-color-lab"] { order: 5; }
html[data-top-layout="report"][data-top-variant="2"] div.themeV2:has(> [id*="v2-top-scene-finder"]) > [id*="v2-top-feature-tiles"] { order: 6; }
html[data-top-variant="2"] .v2-clab { margin-top: 0; }
html[data-top-variant="2"] .v2-feat { margin-top: 16px; }

/* ── モーダル: PDP 準拠（見出し 20/700・価格 16 (税込)・青 #00a9e0 の角丸 4px CTA・白角枠のカラー選択・左サムネ縦列 = 下のサムネ列に置換） */
.fx__modal {
  --fx-bg: #f3f5f6; --fx-ink: #1a1a1a; --fx-sub: #666; --fx-line: #e6e6e6;
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: end center;
  opacity: 0; transition: opacity 0.2s;
  font-family: "GenInterfaceJPDisplay", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  color: #1a1a1a;
  &.is-in { opacity: 1; }
  &[hidden] { display: none; }
  @media (min-width: 1080px) { place-items: center; }
  & svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  & .fx__modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
  & .fx__modal-panel {
    position: relative; box-sizing: border-box; width: 100%; max-height: 92vh; overflow: auto;
    display: grid; gap: 20px; padding: 20px 20px 28px; border-radius: 8px 8px 0 0; background: #fff;
    transform: translateY(24px); transition: transform 0.25s cubic-bezier(0.2, 0.65, 0.2, 1);
    @media (min-width: 1080px) { grid-template-columns: 1fr 1fr; gap: 40px; width: min(1000px, calc(100% - 48px)); max-height: 88vh; padding: 40px; border-radius: 8px; }
  }
  &.is-in .fx__modal-panel { transform: none; }
  & .fx__modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f3f5f6; color: #1a1a1a; font-size: 18px; cursor: pointer; @media (min-width: 1080px) { top: 16px; right: 16px; } }

  & .fx__modal-gallery { position: relative; }
  & .fx__modal-strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    aspect-ratio: 1; border: 1px solid #e6e6e6; border-radius: 4px; background: #fff;
    &::-webkit-scrollbar { display: none; }
    &:focus-visible { outline: 2px solid #00a9e0; outline-offset: 2px; }
  }
  & .fx__modal-frame { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; padding: 24px; box-sizing: border-box; & img { max-width: 100%; max-height: 100%; object-fit: contain; } }
  & .fx__modal-counter { position: absolute; right: 12px; top: 12px; margin: 0; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.9); color: #666; font-size: 12px; font-variant-numeric: tabular-nums; }
  & .fx__modal-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; &::-webkit-scrollbar { display: none; } }
  & .fx__modal-thumb { flex: none; width: 56px; height: 56px; padding: 4px; border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; cursor: pointer; & img { width: 100%; height: 100%; object-fit: contain; } &.is-on { border: 2px solid #1a1a1a; padding: 3px; } }

  & .fx__modal-info { display: flex; flex-direction: column; min-width: 0; }
  & .fx__cat { margin: 0 0 6px; color: #666; font-size: 12px; }
  & .fx__modal-name { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; color: #000; }
  & .fx__modal-price { margin-top: 14px; font-size: 22px; & .product-price-v2-tax { font-size: 12px; color: #666; } }
  & .fx__points { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #e6e6e6; list-style: none; display: grid; gap: 8px; & li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; } & svg { flex: none; margin-top: 4px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #00a9e0; color: #fff; stroke-width: 2.6; } }
  & .fx__variants { margin-top: 20px; }
  & .fx__variants-label { margin: 0 0 8px; color: #666; font-size: 12px; }
  & .fx__variants-list { display: flex; flex-wrap: wrap; gap: 8px; }
  & .fx__variant { padding: 9px 14px; border: 1px solid #ccc; border-radius: 2px; background: #fff; color: #000; font: inherit; font-size: 13px; cursor: pointer; &.is-on { border: 2px solid #1a1a1a; padding: 8px 13px; } &.is-soldout { color: #aaa; cursor: default; & small { margin-left: 4px; font-size: 11px; } } }
  & .fx__modal-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
  & .fx__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 20px; border: 1px solid #1a1a1a; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; & svg { font-size: 18px; } &:hover { background: #f3f5f6; } &:disabled { opacity: 0.4; } &.is-busy { opacity: 0.7; } }
  & .fx__btn--primary { background: #00a9e0; border-color: #00a9e0; color: #fff; &:hover { background: #0093c4; border-color: #0093c4; } }
  & .fx__btn.is-added { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
}
html.fx-modal-open { overflow: hidden; }
.fx__toast { --fx-ink: #1a1a1a; }

/* ── モーダル: 2 列レイアウトを確実に（基底 .fx .fx__modal-panel に負けていた） */
@media (min-width: 1080px) {
  .fx__modal .fx__modal-panel { grid-template-columns: 1fr 1fr !important; gap: 40px; width: min(1000px, calc(100% - 48px)); }
}
.fx__modal .fx__modal-info { min-width: 0; }
.fx__modal .fx__modal-name { overflow-wrap: anywhere; }

/* ── ランキング: TOP3 を大きく、4 位以降は 4 列で小さく（ワイド2） */
html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items:not(.is-current) { display: none !important; }
html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items.is-current {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 16px;
  width: auto !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  overflow: visible !important;
  counter-reset: v2-rank;

  & > article:nth-of-type(n) {
    display: block !important;
    flex: none !important;
    width: auto !important;
    min-width: 0;
    padding-inline: 0 !important;
    border-left: 0 !important;
    counter-increment: v2-rank;
  }
  & > article:nth-of-type(-n + 3) { grid-column: span 4; }
  @media (min-width: 1080px) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px 16px;
    & > article:nth-of-type(-n + 3) { grid-column: span 4; }
    & > article:nth-of-type(n + 4) { grid-column: span 3; }
    & > article:nth-of-type(-n + 3) .product-card-default-thum { height: 320px; & img { height: 320px; } }
    & > article:nth-of-type(n + 4) .product-card-default-thum { height: 200px; & img { height: 200px; } }
    & > article:nth-of-type(-n + 3) .product-card-default-name { font-size: 17px; font-weight: 700; }
    & > article:nth-of-type(-n + 3) .product-price-v2 { font-size: 20px; }
    & > article:nth-of-type(n + 4) .product-card-default-name { font-size: 14px; font-weight: 700; }
    & > article:nth-of-type(n + 4) .product-price-v2 { font-size: 16px; }
    & > article:nth-of-type(n + 4) { opacity: 1; }
  }
  @media (max-width: 1079.98px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
    & > article:nth-of-type(1) { grid-column: span 2; }
    & > article:nth-of-type(-n + 3) { grid-column: auto; }
    & > article:nth-of-type(1) { grid-column: span 2; }
  }
  & > article:nth-of-type(n + 8) { display: none !important; }
}
html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .v2-rail-nav,
html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .v2-rail-progress { display: none !important; }
html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items > article:nth-of-type(-n + 3)::before { transform: scale(1.35); transform-origin: top left; }

/* ── カラーラボ: 複数選択・ボタン・まとめ帯 */
.v2-clab .v2-clab__card { position: relative; }
.v2-clab .v2-clab__card.is-picked { box-shadow: 0 0 0 2px #1a1a1a; }
.v2-clab .v2-clab__pick {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  & input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  & i { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #c9cdd1; border-radius: 4px; background: #fff; cursor: pointer; }
  & i::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
  & input:checked + i { border-color: #1a1a1a; background: #1a1a1a; }
  & input:checked + i::after { opacity: 1; }
}
.v2-clab .v2-clab__img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.v2-clab .v2-clab__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.v2-clab .v2-clab__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 8px; border: 1.5px solid #1a1a1a; border-radius: 4px; background: #fff; color: #1a1a1a; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; &:hover { background: #f3f5f6; } &:disabled { opacity: 0.4; } &.is-busy { opacity: 0.7; } }
.v2-clab .v2-clab__btn--primary { background: #1a1a1a; color: #fff; &:hover { background: #333; } }
.v2-clab .v2-clab__btn.is-added { background: #00b4d0; border-color: #00b4d0; color: #fff; }
.v2-clab .v2-clab__btn--lg { min-height: 48px; padding: 0 20px; font-size: 14px; }
.v2-clab .v2-clab__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding: 16px 20px; border-radius: 8px; background: #fff; &[hidden] { display: none; } }
.v2-clab .v2-clab__sum { margin: 0 auto 0 0; color: #666; font-size: 14px; & b { color: #1a1a1a; font-size: 18px; margin-right: 2px; } }

/* ── モーダル: ギャラリー列が縦長画像で伸びるのを止める */
.fx__modal .fx__modal-gallery { min-width: 0; }
.fx__modal .fx__modal-strip { width: 100%; max-height: 60vh; }

/* ── 診断の選択肢: 動くアイコン（線画 SVG + CSS アニメ。hover / 選択で速く） */
.fx .fx__opt--anim {
  aspect-ratio: auto;
  min-height: 150px;
  justify-content: flex-end;
  gap: 12px;
  @media (min-width: 1080px) { min-height: 176px; }
  & .fx__opt-visual--anim {
    position: absolute; inset: 14px 14px 46px; display: grid; place-items: center;
    @media (min-width: 1080px) { inset: 18px 18px 54px; }
    & svg { width: 64px; height: 64px; fill: none; stroke: #1a1a1a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; @media (min-width: 1080px) { width: 76px; height: 76px; } }
  }
  &.is-on .fx__opt-visual--anim svg { stroke: #1a1a1a; }
}
.fx .fx__opt--anim .fx__opt-visual--anim {
  --dur: 2.4s;
  & .a-cell { fill: #1a1a1a; stroke: none; transform-origin: center; animation: a-cells var(--dur) ease-in-out infinite; }
  & .a-cell2 { animation-delay: 0.25s; } & .a-cell3 { animation-delay: 0.5s; }
  & .a-bolt { fill: #00cbeb; stroke: none; transform-origin: 32px 20px; animation: a-bolt var(--dur) ease-in-out infinite; }
  & .a-plug { transform-origin: 32px 32px; animation: a-plug var(--dur) ease-in-out infinite; }
  & .a-spark { stroke: #00cbeb; animation: a-spark var(--dur) ease-in-out infinite; }
  & .a-bolt-big { fill: #00cbeb; stroke: none; transform-origin: center; animation: a-pulse var(--dur) ease-in-out infinite; }
  & .a-rays { stroke: #00cbeb; animation: a-spark var(--dur) ease-in-out infinite; }
  & .a-ring { stroke: #00cbeb; stroke-dasharray: 164; stroke-dashoffset: 164; animation: a-ring var(--dur) linear infinite; }
  & .a-smoke circle { fill: #00cbeb; stroke: none; animation: a-smoke var(--dur) ease-out infinite; }
  & .a-smoke circle:nth-child(2) { animation-delay: 0.6s; }
  & .a-door { transform-origin: 27px 53px; animation: a-door var(--dur) ease-in-out infinite; }
  & .a-win { fill: #00cbeb; stroke: none; animation: a-blink var(--dur) steps(1) infinite; }
  & .a-notes { stroke: #00cbeb; transform-origin: 30px 16px; animation: a-notes var(--dur) ease-in-out infinite; }
  & .a-notes circle { fill: #00cbeb; stroke: none; }
  & .a-earL, & .a-earR { transform-origin: center; animation: a-ear var(--dur) ease-in-out infinite; }
  & .a-bag { transform-origin: 32px 54px; animation: a-swing var(--dur) ease-in-out infinite; }
  & .a-handle { transform-origin: 32px 22px; animation: a-handle var(--dur) ease-in-out infinite; }
  & .a-screen { fill: #00cbeb; fill-opacity: 0; animation: a-screen var(--dur) ease-in-out infinite; }
  & .a-steam { stroke: #00cbeb; animation: a-smoke var(--dur) ease-out infinite; }
  & .a-p2 { transform-origin: 46px 52px; animation: a-lean var(--dur) ease-in-out infinite; }
  & .a-heart { fill: #00cbeb; stroke: none; transform-origin: 50px 13px; animation: a-pulse var(--dur) ease-in-out infinite; }
  & .a-star path { fill: #00cbeb; stroke: none; transform-origin: 50px 14px; animation: a-twinkle var(--dur) ease-in-out infinite; }
  & .a-tent { transform-origin: 32px 54px; animation: a-breathe var(--dur) ease-in-out infinite; }
  & .a-feather { transform-origin: 32px 40px; animation: a-float var(--dur) ease-in-out infinite; }
  & .a-tag { transform-origin: 10px 10px; animation: a-swing var(--dur) ease-in-out infinite; }
  & .a-pct { stroke: #00cbeb; animation: a-spark var(--dur) ease-in-out infinite; }
  & .a-sp { fill: #00cbeb; stroke: none; transform-origin: center; animation: a-twinkle var(--dur) ease-in-out infinite; }
  & .a-sp1 { transform-origin: 32px 24px; } & .a-sp2 { transform-origin: 50px 48px; animation-delay: 0.4s; } & .a-sp3 { transform-origin: 14px 50px; animation-delay: 0.8s; }
}
.fx .fx__opt--anim:hover .fx__opt-visual--anim, .fx .fx__opt--anim.is-on .fx__opt-visual--anim { --dur: 1.1s; }
@keyframes a-cells { 0%, 100% { transform: scaleY(0.35); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes a-bolt { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-4px) scale(1.15); opacity: 0.6; } }
@keyframes a-plug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes a-spark { 0%, 40%, 100% { opacity: 0; } 55%, 75% { opacity: 1; } }
@keyframes a-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes a-ring { to { stroke-dashoffset: 0; } }
@keyframes a-smoke { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes a-door { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.6); } }
@keyframes a-blink { 0%, 100% { fill-opacity: 0.25; } 50% { fill-opacity: 1; } }
@keyframes a-notes { 0%, 100% { transform: translateY(0) rotate(0); opacity: 0.5; } 50% { transform: translateY(-5px) rotate(-8deg); opacity: 1; } }
@keyframes a-ear { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes a-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes a-handle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes a-screen { 0%, 100% { fill-opacity: 0.1; } 50% { fill-opacity: 0.6; } }
@keyframes a-lean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) translateX(-3px); } }
@keyframes a-twinkle { 0%, 100% { transform: scale(0.7); opacity: 0.4; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes a-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.05); } }
@keyframes a-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .fx .fx__opt--anim .fx__opt-visual--anim * { animation: none !important; } }

/* ── モーダル サムネ: 続きがあることを見せる（右端フェード + 「+N」+ 左右ボタン） */
.fx__modal .fx__modal-thumbwrap { position: relative; margin-top: 10px; }
.fx__modal .fx__modal-thumbwrap .fx__modal-thumbs { margin-top: 0; padding-right: 48px; scroll-snap-type: x proximity; & .fx__modal-thumb { scroll-snap-align: start; } }
.fx__modal .fx__modal-thumbwrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 2px; width: 88px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 60%); opacity: 0; transition: opacity 0.2s;
}
.fx__modal .fx__modal-thumbwrap.has-more::after { opacity: 1; }
.fx__modal .fx__modal-thumbnav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid #e6e6e6; border-radius: 4px;
  background: #fff; color: #1a1a1a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  & svg { font-size: 16px; }
}
.fx__modal .fx__modal-thumbnav--next { right: 0; }
.fx__modal .fx__modal-thumbnav--next::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.8px 1.8px 0 0; transform: rotate(45deg); margin-left: 4px; }
.fx__modal .fx__modal-thumbnav--next:empty { padding: 0; }
.fx__modal .fx__modal-thumbnav--prev { left: 0; & svg { transform: scaleX(-1); } }
.fx__modal .fx__modal-thumbwrap.has-more .fx__modal-thumbnav--next { opacity: 1; pointer-events: auto; }
.fx__modal .fx__modal-thumbwrap.has-prev .fx__modal-thumbnav--prev { opacity: 1; pointer-events: auto; }
.fx__modal .fx__modal-thumbwrap.has-prev .fx__modal-thumbs { padding-left: 48px; }

/* ============================================================
   [fx-style] 診断の見た目 2 型（9/29）: sentence（文章で答える）/ search（検索窓）
   色は白・黒・グレーのみ。#fx-top の ID で既存の多層上書きより確実に勝たせる
   ============================================================ */
#fx-top.fx[data-fx-style="sentence"],
#fx-top.fx[data-fx-style="search"] {
  --fx-ink: #1a1a1a;
  --fx-sub: #6b6b6b;
  --fx-line: #e3e3e3;
  --fx-bg: #fff;
  color: #1a1a1a;
  border-radius: 0;

  & .fx__head { margin-bottom: 0; }
  & .fx__eyebrow { padding: 0; border-radius: 0; background: none; color: #888; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
  & .fx__title { font-weight: 700; letter-spacing: 0.01em; }
  & .fx__lead { color: #888; font-size: 13px; @media (min-width: 1080px) { font-size: 14px; } }
  & .fx__q-head { display: none; }
  & .fx__opt-visual, & .fx__opt-check { display: none; }
  & .fx__opt, & .fx__opt--photo {
    aspect-ratio: auto; min-height: 0; overflow: visible; box-shadow: none; transform: none; will-change: auto;
    font: inherit; text-align: left; cursor: pointer;
  }
  & .fx__opt:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 4px; }
  & .fx__back { margin-top: 28px; color: #888; font-size: 13px; font-weight: 400; &:hover { color: #1a1a1a; } }
  & .fx__link { color: #6b6b6b; font-weight: 400; &:hover { color: #1a1a1a; } }

  /* 結果: モノトーンに揃える */
  & .fx__shuffle-text { color: #6b6b6b; font-weight: 400; }
  & .fx__shuffle-slots span { border: 1px solid #e3e3e3; border-radius: 0; background: #fff; }
  & .fx__picks-label { color: #888; }
  & .fx__chip { border: 1px solid #d5d5d5; background: #fff; color: #1a1a1a; font-weight: 400; }
  & .fx__card { border: 1px solid #e3e3e3; border-radius: 0; box-shadow: none; }
  & .fx__card .fx__rank, & .fx__card.is-top .fx__rank { border-radius: 0; background: #1a1a1a; color: #fff; font-weight: 700; }
  & .fx__card .fx__img { border-radius: 0; }
  & .fx__match { border-radius: 0; & b { color: #1a1a1a; font-weight: 700; } }
  & .fx__bar { border: 1px solid #e3e3e3; border-radius: 0; }
  & .fx__btn.is-added { background: #1a1a1a; border-color: #1a1a1a; }
  & .fx__pick input:focus-visible + i { outline-color: #1a1a1a; }
}

/* ── sentence: 問いを一文に。選択肢は大きな語、選ぶと下線が引かれる ── */
#fx-top.fx[data-fx-style="sentence"] {
  padding: 32px 0 32px;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #e3e3e3;
  background: #fff;

  @media (min-width: 1080px) { padding: 48px 0 44px; }

  & .fx__head { align-items: flex-start; }
  & .fx__title { margin-top: 8px; font-size: 16px; @media (min-width: 1080px) { font-size: 17px; } }
  & .fx__lead { margin-top: 4px; }
  & .fx__progress {
    gap: 4px;
    & span { margin-right: 10px; color: #888; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; }
    & i { width: 20px; height: 1px; border-radius: 0; background: #d0d0d0; }
    & i.is-current, & i.is-done { background: #1a1a1a; }
    @media (min-width: 1080px) { & i { width: 28px; } }
  }
  & .fx__ask, & .fx__q-cap { display: none; }
  & .fx__q-lead {
    margin: 36px 0 10px; font-size: 26px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em;
    @media (min-width: 1080px) { margin: 52px 0 14px; font-size: 40px; }
  }
  & .fx__opts {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; perspective: none;
    @media (min-width: 1080px) { flex-direction: row; flex-wrap: wrap; gap: 4px 40px; }
  }
  & .fx__opt, & .fx__opt--photo {
    position: relative; display: inline-block; padding: 0 0 4px; border: 0; border-radius: 0; background: none;
    color: #b0b0b0; font-size: 24px; font-weight: 400; line-height: 1.45; letter-spacing: 0.01em;
    transition: color 0.25s;
    animation: fx-word-in 0.5s cubic-bezier(0.2, 0.65, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 60ms);
    @media (min-width: 1080px) { font-size: 40px; }

    &::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #1a1a1a;
      transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.2, 0.65, 0.2, 1);
    }
    & .fx__opt-icon { display: none; }
    & .fx__opt-label { position: static; font: inherit; }
    &:hover { color: #1a1a1a; transform: none; box-shadow: none; }
    &:hover::after { transform: scaleX(1); background: #d0d0d0; height: 1px; }
    &.is-on { color: #1a1a1a; background: none; box-shadow: none; transform: none; }
    &.is-on::after { transform: scaleX(1); background: #1a1a1a; height: 2px; }
    &.is-dim { color: #dcdcdc; opacity: 1; transform: none; }
  }
  /* 答えた語を一文のように並べる */
  & .fx__trail { gap: 0; margin: 20px 0 0; }
  & .fx__trail-chip {
    padding: 0; border-radius: 0; background: none; color: #6b6b6b; font-size: 14px; font-weight: 400; animation: fx-word-in 0.4s both;
    & img { display: none; }
    &:not(:last-child)::after { content: "／"; margin: 0 10px; color: #c8c8c8; }
  }
  & .fx__result { margin-top: 32px; }
}

/* ── sentence + 動く線画アイコン（モノトーン）: 語の左に小さく。色は語と同じ（currentColor）、普段はゆっくり・触れる/選ぶと速く ── */
#fx-top.fx[data-fx-style="sentence"] {
  & .fx__opt, & .fx__opt--photo { display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; @media (min-width: 1080px) { gap: 14px; } }
  & .fx__opt-visual.fx__opt-visual--anim {
    position: static; inset: auto; display: inline-grid; place-items: center; flex: none;
    & svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.6; @media (min-width: 1080px) { width: 46px; height: 46px; stroke-width: 2.2; } }
    --dur: 3.2s;
    & .a-cell, & .a-bolt, & .a-bolt-big, & .a-smoke circle, & .a-win, & .a-notes circle, & .a-heart, & .a-star path, & .a-sp, & .a-screen { fill: currentColor; }
    & .a-spark, & .a-rays, & .a-ring, & .a-notes, & .a-steam, & .a-pct { stroke: currentColor; }
  }
  & .fx__opt:hover .fx__opt-visual--anim, & .fx__opt.is-on .fx__opt-visual--anim { --dur: 1.4s; }
  /* 触れる/選ぶと、アクセント部品（稲妻・火花・窓・音符・煙など）だけサイトの水色に */
  & .fx__opt:is(:hover, .is-on) .fx__opt-visual--anim {
    & .a-bolt, & .a-bolt-big, & .a-smoke circle, & .a-win, & .a-notes circle, & .a-heart, & .a-star path, & .a-sp, & .a-screen, & .a-cell { fill: #00a9e0; }
    & .a-spark, & .a-rays, & .a-ring, & .a-notes, & .a-steam, & .a-pct { stroke: #00a9e0; }
    & .a-cell, & .a-bolt, & .a-bolt-big, & .a-smoke circle, & .a-win, & .a-sp, & .a-spark, & .a-rays, & .a-ring, & .a-notes, & .a-steam, & .a-pct, & .a-heart, & .a-star path, & .a-screen { transition: fill 0.25s, stroke 0.25s; }
  }
}

/* ── 候補プレビュー（2 問答えたあたりから）: 答えに合う製品を小さく並べ、答えるたびに入れ替わる ── */
#fx-top.fx .fx__cands {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid #ececec;
  animation: fx-word-in 0.5s cubic-bezier(0.2, 0.65, 0.2, 1) both;
  @media (min-width: 1080px) { margin-top: 40px; padding-top: 20px; }
  &[hidden] { display: none; }
}
#fx-top.fx .fx__cands-label { margin: 0 0 10px; color: #888; font-size: 12px; letter-spacing: 0.02em; & b { color: #1a1a1a; font-weight: 700; font-variant-numeric: tabular-nums; } @media (min-width: 1080px) { font-size: 13px; } }
#fx-top.fx .fx__cands-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; @media (min-width: 1080px) { gap: 8px; } }
#fx-top.fx .fx__cand {
  display: grid; place-items: center; width: 44px; height: 44px; background: #f4f4f4;
  animation: fx-word-in 0.45s cubic-bezier(0.2, 0.65, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 45ms);
  @media (min-width: 1080px) { width: 56px; height: 56px; }
  & img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
}
#fx-top.fx .fx__cand-more { margin-left: 4px; color: #888; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── 結果の「もう一度診断する」: 黒枠のボタンで目立たせる ── */
#fx-top.fx .fx__redo {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 18px; border: 1.5px solid #1a1a1a; border-radius: 999px; background: #fff;
  color: #1a1a1a; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
  transition: background 0.2s, color 0.2s;
  & svg { width: 16px; height: 16px; }
  &:hover { background: #1a1a1a; color: #fff; }
  &:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 3px; }
  @media (min-width: 1080px) { padding: 11px 22px; font-size: 15px; }
}
#fx-top.fx .fx__result-head { align-items: center; gap: 12px; }

@media (prefers-reduced-motion: reduce) { #fx-top.fx .fx__cands, #fx-top.fx .fx__cand { animation: none; } }

/* ── search: 困りごとを入れる検索窓と、候補のピル ── */
#fx-top.fx[data-fx-style="search"] {
  padding: 36px 20px 36px;
  background: #f4f4f4;

  @media (min-width: 1080px) { padding: 60px 48px 56px; }

  & .fx__head { display: block; text-align: center; }
  & .fx__title { margin-top: 8px; font-size: 21px; @media (min-width: 1080px) { font-size: 26px; } }
  & .fx__lead { margin-top: 6px; }
  & .fx__progress { display: none; }
  & .fx__trail { justify-content: center; gap: 6px; margin: 16px 0 0; }
  & .fx__trail-chip {
    padding: 4px 12px; border: 1px solid #dcdcdc; border-radius: 999px; background: #fff; color: #555; font-size: 12px; font-weight: 400;
    & img { display: none; }
  }
  & .fx__q, & .fx__trail { max-width: 760px; margin-inline: auto; }
  & .fx__q-lead { display: none; }
  & .fx__ask {
    display: flex; align-items: center; gap: 12px;
    height: 56px; margin-top: 24px; padding: 0 18px;
    border: 1px solid #1a1a1a; border-radius: 999px; background: #fff;
    color: #9a9a9a; font-size: 15px;
    @media (min-width: 1080px) { height: 68px; margin-top: 32px; padding: 0 26px; gap: 14px; font-size: 18px; }

    & > svg { flex: none; width: 20px; height: 20px; color: #1a1a1a; stroke-width: 1.5; }
    & .fx__ask-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    & .fx__ask-text::after {
      content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em;
      background: #1a1a1a; animation: fx-caret 1.05s steps(1) infinite;
    }
    & .fx__ask-step { flex: none; color: #888; font-size: 12px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; @media (min-width: 1080px) { font-size: 13px; } }
    &.is-typed { color: #1a1a1a; }
  }
  & .fx__q-cap { margin: 20px 0 10px; color: #888; font-size: 12px; @media (min-width: 1080px) { margin: 28px 0 12px; font-size: 13px; text-align: center; } }
  /* PC: 入力欄は 760px、候補は 1 行に収まる幅で中央揃え */
  @media (min-width: 1080px) {
    & .fx__q { max-width: 1000px; }
    & .fx__ask { max-width: 760px; margin-inline: auto; }
    & .fx__opts { justify-content: center; }
  }
  & .fx__opts {
    display: flex; flex-wrap: wrap; gap: 8px; perspective: none;
    @media (min-width: 1080px) { gap: 10px; }
  }
  & .fx__opt, & .fx__opt--photo {
    display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
    padding: 9px 14px; border: 1px solid #d5d5d5; border-radius: 999px; background: #fff;
    color: #1a1a1a; font-size: 13px; font-weight: 400; line-height: 1.3;
    transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.3s;
    animation: fx-word-in 0.45s cubic-bezier(0.2, 0.65, 0.2, 1) both; animation-delay: calc(var(--k, 0) * 50ms);
    @media (min-width: 1080px) { padding: 11px 18px; font-size: 14px; }

    & .fx__opt-icon { display: inline-grid; width: 18px; height: 18px; font-size: 18px; & svg { stroke-width: 1.6; } }
    & .fx__opt-label { position: static; font: inherit; }
    &:hover { border-color: #1a1a1a; background: #fff; transform: none; box-shadow: none; }
    &.is-on { border-color: #1a1a1a; background: #1a1a1a; color: #fff; transform: none; box-shadow: none; }
    &.is-dim { opacity: 0.35; transform: none; }
  }
  & .fx__back { display: block; margin-inline: auto; }
  & .fx__result { max-width: none; margin-top: 32px; }
  & .fx__card, & .fx__bar { background: #fff; }
}

@keyframes fx-word-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fx-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #fx-top.fx[data-fx-style] .fx__opt, #fx-top.fx[data-fx-style] .fx__trail-chip { animation: none; }
  #fx-top.fx[data-fx-style] .fx__ask-text::after { animation: none; }
}

/* game（旧）では追加した線アイコン・導入文・検索窓は出さない */
.fx[data-fx-style="game"] .fx__opt .fx__opt-icon,
.fx[data-fx-style="game"] .fx__q-lead,
.fx[data-fx-style="game"] .fx__ask,
.fx[data-fx-style="game"] .fx__q-cap { display: none; }

/* ============================================================
   [btn] サイト標準のボタン（商品ページ準拠: カートに入れる = #00a9e0 塗り・白文字・角丸 4px・700 /
   サブ = 白地に #00a9e0 の 1px 枠・同色文字）。診断・カラーラボ・詳細モーダルで共通
   ============================================================ */
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn, .v2-clab__btn) {
  border: 1px solid #00a9e0; border-radius: 4px; background: #fff; color: #00a9e0;
  font-weight: 700; letter-spacing: 0.02em; box-shadow: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  &:hover { background: #e8f7fc; border-color: #00a9e0; color: #00a9e0; }
}
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn--primary, .v2-clab__btn--primary) {
  background: #00a9e0; border-color: #00a9e0; color: #fff;
  &:hover { background: #0093c4; border-color: #0093c4; color: #fff; }
  &:disabled { background: #b8b8b8; border-color: #b8b8b8; color: #fff; cursor: default; }
}
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn, .v2-clab__btn).is-added {
  background: #fff; border-color: #00a9e0; color: #00a9e0;
}

/* [fx-engine] 結果: 「ほかの候補も見る」（2・3 位を引き直す）・発見枠・根拠タグ */
#fx-top.fx .fx__result-head { flex-wrap: wrap; }
#fx-top.fx .fx__result-head > .fx__reroll { margin-left: auto; }
#fx-top.fx .fx__reroll {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 10px 4px;
  border: 0; background: none; color: #1a1a1a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  & svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  &:hover { color: #00a9e0; }
  @media (min-width: 1080px) { font-size: 15px; }
}
#fx-top.fx .fx__card.is-discover .fx__rank { background: #fff; color: #1a1a1a; box-shadow: inset 0 0 0 1px #1a1a1a; }
#fx-top.fx .fx__tags {
  display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px 0 0;
  &:empty { display: none; }
  & span { padding: 2px 6px; border: 1px solid #d5d5d5; color: #555; font-size: 11px; line-height: 1.5; @media (min-width: 1080px) { font-size: 12px; } }
}

/* ============================================================
   [0929] トップ全体の修正（SP ランキング短縮 ほか）
   ============================================================ */
/* SP ランキング: 1 位だけ大きくするのをやめ、3 列 × 2 行（1〜6 位）に。色の小窓は省いて縦を詰める */
@media (max-width: 1079.98px) {
  html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items.is-current {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 8px !important;
    & > article:nth-of-type(n) { grid-column: auto !important; }
    & > article:nth-of-type(n + 7) { display: none !important; }
    & .product-card-default-thum, & .product-card-default-thum img { height: 104px !important; }
    & .product-card-default-thum img { width: 100%; object-fit: contain; }
    & .product-card-default-others, & .product-card-default-dots, & .product-card-default-length { display: none !important; }
    & .product-card-default-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 6px; font-size: 11px; line-height: 1.45; }
    & .product-price-v2 { font-size: 13px; }
  }
  html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items > article:nth-of-type(-n + 3)::before { transform: none; }
}

/* 特集タイル: 横長写真のバナー（停電の夜も…）。PC は右 64% に写真・左端を地へぼかす／SP は上に写真 */
.v2-feat .v2-feat__tile--banner.v2-feat__tile--photo {
  background: linear-gradient(180deg, var(--bg-a), var(--bg-b));
  color: #fff;
  & .v2-feat__banner { aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  & .v2-feat__banner img { object-position: 58% 50%; }
  & .v2-feat__eyebrow { color: rgba(255, 255, 255, 0.7); }
  & .v2-feat__sub { color: rgba(255, 255, 255, 0.8); }
  @media (min-width: 1080px) {
    background: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%);
    & .v2-feat__banner {
      position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: 100%; aspect-ratio: auto;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    }
    & .v2-feat__copy { top: auto; bottom: 40px; left: 36px; max-width: 46%; }
    & .v2-feat__title { font-size: 26px; }
  }
}

/* 共通ボタン（トップ）: 角丸 4px・グレーの枠・モノトーン・矢印は v2-arrow の 1 種 */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 1px solid #cfcfcf; border-radius: 4px; background: #fff;
  color: #1a1a1a; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  &:hover { background: #f4f4f4; border-color: #b5b5b5; }
  & .v2-arrow { width: 16px; height: 16px; flex: none; }
}
.v2-feat-more { display: flex; justify-content: center; max-width: var(--top-w, 1280px); margin: 40px auto 0; padding-inline: 12px; }
@media (min-width: 1080px) { .v2-feat-more { margin-top: 48px; } }

/* SP: バナー型の特集タイルは高さを中身に合わせる（下の暗い余白をなくす） */
@media (max-width: 1079.98px) {
  html[data-top-variant="2"] .v2-feat .v2-feat__tile.v2-feat__tile--banner { min-height: 0; }
}

/* 特集をもっと見る: サムネを束ねた帯状ボタン */
.v2-feat-more { display: block; }
.v2-feat-more__band {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 16px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fff; color: #1a1a1a; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  &:hover { background: #f7f7f7; border-color: #bdbdbd; }
  &:hover .v2-arrow { transform: translateX(3px); }
  @media (min-width: 1080px) { gap: 28px; padding: 20px 28px 20px 20px; }
  & .v2-arrow { width: 20px; height: 20px; transition: transform 0.2s; }
}
.v2-feat-more__thumbs {
  display: grid; grid-template-columns: repeat(2, 36px); gap: 4px;
  & img { display: block; width: 36px; height: 36px; object-fit: cover; border-radius: 2px; }
  @media (min-width: 1080px) { grid-template-columns: repeat(4, 88px); gap: 8px; & img { width: 88px; height: 88px; } }
}
.v2-feat-more__tx {
  display: grid; gap: 4px;
  & b { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; @media (min-width: 1080px) { font-size: 20px; } }
  & small { color: #666; font-size: 12px; line-height: 1.5; @media (min-width: 1080px) { font-size: 13px; } }
}

@media (min-width: 1080px) { .v2-feat-more { padding-inline: 0; } }

/* 特集タイル: 白文字のタイルは hover でも白のまま（サイト共通の a:hover の文字色を受けない）。角丸 4px・影や浮き上がりなし */
.v2-feat a.v2-feat__tile.v2-feat__tile--light,
.v2-feat a.v2-feat__tile.v2-feat__tile--light:hover { color: #fff !important; }
.v2-feat a.v2-feat__tile.v2-feat__tile--light .v2-feat__title { color: inherit; }
html[data-top-variant="2"] .v2-feat .v2-feat__tile { border-radius: 4px; }
.v2-feat .v2-feat__tile:hover { transform: none; box-shadow: none; }

/* ヘッダー: 「直営店舗を探す」を 2 段にして正式名称 Anker Store を入れる（横幅は据え置き） */

/* 途中の候補サムネ: 押せるボタンに。PC はホバーで名前・価格・マッチ度のカード */
#fx-top.fx .fx__cands-hint { margin-left: 12px; color: #999; font-size: 11px; @media (min-width: 1080px) { font-size: 12px; } }
#fx-top.fx .fx__cands-row { position: relative; }
#fx-top.fx button.fx__cand {
  position: relative; padding: 0; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.2s, transform 0.2s;
  @media (min-width: 1080px) { width: 72px; height: 72px; }
  &:hover, &:focus-visible { border-color: #bdbdbd; transform: translateY(-2px); }
  &:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
}
#fx-top.fx .fx__cand-pop {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; width: 220px;
  display: grid; gap: 4px; padding: 12px 14px; border: 1px solid #dcdcdc; border-radius: 4px; background: #fff;
  text-align: left; pointer-events: none; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.18s, transform 0.18s;
  & b { font-size: 13px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  & .fx__cand-meta { display: flex; gap: 10px; align-items: baseline; font-size: 14px; font-weight: 700; }
  & .fx__cand-meta em { font-style: normal; font-size: 11px; font-weight: 400; color: #666; }
  & small { color: #999; font-size: 11px; }
}
@media (hover: hover) and (min-width: 1080px) {
  #fx-top.fx button.fx__cand:hover .fx__cand-pop, #fx-top.fx button.fx__cand:focus-visible .fx__cand-pop { opacity: 1; transform: translate(-50%, 0); }
}
@media (hover: none), (max-width: 1079.98px) { #fx-top.fx .fx__cand-pop { display: none; } }

/* Anker Magazine（トップ・9/29 刷新）: 画像は 16:9 の枠に全体表示、角丸 2px、グレーの線 */
.v2-mag { max-width: var(--top-w, 1280px); margin: 56px auto 0; padding-inline: 16px; }
@media (min-width: 1080px) { .v2-mag { padding-inline: 0; margin-top: 72px; } }
.v2-mag__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.v2-mag__head .heading { margin: 0; }
.v2-mag__all { display: inline-flex; align-items: center; gap: 6px; color: #1a1a1a; font-size: 13px; text-decoration: none; & .v2-arrow { width: 16px; height: 16px; } &:hover { text-decoration: underline; text-underline-offset: 4px; } }
.v2-mag__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px;
  &::-webkit-scrollbar { display: none; }
  @media (min-width: 1080px) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; overflow: visible; margin: 0; padding: 0; }
}
.v2-mag__card { display: grid; align-content: start; gap: 8px; color: #1a1a1a; text-decoration: none; scroll-snap-align: start; }
.v2-mag__img { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #f2f2f2; }
.v2-mag__img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s cubic-bezier(0.2, 0.65, 0.2, 1); }
.v2-mag__card:hover .v2-mag__img img { transform: scale(1.03); }
.v2-mag__tag { color: #777; font-size: 11px; letter-spacing: 0.02em; }
.v2-mag__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.55; }
.v2-mag__card:hover .v2-mag__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bbb; }

/* ============================================================
   [0929-g] トップ全体の統一: 角丸は 2/4px まで・モノトーンのボタン・黒い枠線は使わない（横スクロールのタブのみ例外）・矢印は 1 種
   ============================================================ */
html[data-top-variant="2"] {
  /* 角丸 */
  & .v2-scene__cat-visual { border-radius: 4px !important; }
  & .v2-clab, & .v2-clab .v2-clab__card, & .v2-clab .v2-clab__bar { border-radius: 4px !important; }
  & .v2-clab .v2-clab__chip { border-radius: 4px !important; }
  & .v2-feat .v2-feat__cta { border-radius: 4px !important; }
  & .v2-header-main .v2-form-hd-search { border-radius: 4px !important; }
  & #fx-top.fx :is(.fx__redo, .fx__chip, .fx__card, .fx__bar, .fx__match, .fx__rank, .fx__btn) { border-radius: 4px !important; }
  /* 色: 水色をやめてモノトーン */
  & .v2-clab .v2-clab__eyebrow { color: #777 !important; }
  /* 黒い枠線 → グレー（選択中は黒の塗りで示す） */
  & .v2-clab .v2-clab__chip { border: 1px solid #dcdcdc !important; }
  & .v2-clab .v2-clab__chip.is-on { border-color: #1a1a1a !important; background: #1a1a1a !important; color: #fff !important; }
  & #fx-top.fx[data-fx-style="sentence"] { border-top-color: #e3e3e3 !important; }
  & #fx-top.fx .fx__redo { border: 1px solid #cfcfcf !important; }
  & #fx-top.fx .fx__redo:hover { background: #f4f4f4 !important; color: #1a1a1a !important; }
  /* 「すべて見る」の矢印を共通の形に */
  & .v2-top-brand-new-products a.button::after, & .v2-products-ranking a.more::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    width: 14px !important; height: 14px !important; transform: none !important;
  }
}
/* ボタン（診断・カラーラボ・詳細モーダル）: カートに入れる=水色の塗り（10/2 方針・ライブと同じ #00a9e0） / サブ=白地にグレーの枠。角丸 4px */
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn, .v2-clab__btn) {
  border: 1px solid #cfcfcf !important; border-radius: 4px !important; background: #fff !important; color: #1a1a1a !important;
  &:hover { background: #f4f4f4 !important; border-color: #b5b5b5 !important; color: #1a1a1a !important; }
}
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn--primary, .v2-clab__btn--primary),
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn, .v2-clab__btn).is-added {
  background: #00a9e0 !important; border-color: #00a9e0 !important; color: #fff !important;
  &:hover { background: #0093c4 !important; border-color: #0093c4 !important; color: #fff !important; }
  &:disabled { background: #b8b8b8 !important; border-color: #b8b8b8 !important; }
}
/* 詳細モーダル: 角丸 4px まで・選択中は黒い枠でなく濃いグレーの枠 */
body .fx__modal {
  & .fx__modal-panel, & .fx__modal-strip, & .fx__modal-main, & .fx__modal-gallery img, & .fx__modal-thumbs button, & .fx__variant, & .fx__modal-close { border-radius: 4px !important; }
  & .fx__modal-thumbs button.is-on, & .fx__modal-thumbs [aria-current="true"] { border-color: #8a8a8a !important; }
  & .fx__variant { border-color: #dcdcdc !important; }
  & .fx__variant.is-on { border-color: #1a1a1a !important; background: #1a1a1a !important; color: #fff !important; }
}

/* 製品を探す: 「詳しい分類で見る」切替（小さく控えめに） */
html[data-top-variant="2"] .v2-scene .v2-scene__cats .v2-scene__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-cat-detail {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none;
  color: #777; font: inherit; font-size: 11px; letter-spacing: 0.02em; cursor: pointer;
  @media (min-width: 1080px) { font-size: 12px; }
  &:hover { color: #1a1a1a; }
  &:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
}
.v2-cat-detail__sw {
  position: relative; width: 24px; height: 14px; border-radius: 7px; background: #d6d6d6; transition: background 0.2s; flex: none;
  &::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
}
.v2-cat-detail[aria-pressed="true"] { color: #1a1a1a; }
.v2-cat-detail[aria-pressed="true"] .v2-cat-detail__sw { background: #1a1a1a; &::after { transform: translateX(10px); } }
.v2-scene__cats > .v2-categories-all { display: none; }
html[data-cat-detail] .v2-scene__cats > .v2-categories-all { display: block; margin-top: 8px; }
html[data-cat-detail] .v2-scene__cats > .v2-scene__cat-list { display: none !important; }

/* Anker Magazine: タイトルが主役のリスト（画像は右に小さく） */
.v2-mag .v2-mag__list {
  display: grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; overflow: visible; margin: 0; padding: 0;
  border-top: 1px solid #e3e3e3; scroll-snap-type: none;
  @media (min-width: 1080px) { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.v2-mag .v2-mag__card {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid #e3e3e3;
  @media (min-width: 1080px) { grid-template-columns: minmax(0, 1fr) 160px; gap: 24px; padding: 20px 0; }
}
@media (max-width: 1079.98px) { .v2-mag .v2-mag__card:nth-child(n + 6) { display: none; } }
.v2-mag .v2-mag__tx { display: grid; gap: 8px; }
.v2-mag .v2-mag__title { font-size: 15px; font-weight: 700; line-height: 1.6; -webkit-line-clamp: 2; @media (min-width: 1080px) { font-size: 16px; } }
.v2-mag .v2-mag__meta { display: flex; gap: 12px; color: #888; font-size: 11px; font-variant-numeric: tabular-nums; @media (min-width: 1080px) { font-size: 12px; } }
.v2-mag .v2-mag__img { aspect-ratio: 16 / 9; }
.v2-mag .v2-mag__card:hover .v2-mag__img img { transform: none; }

/* 詳しい分類（旧デザイン）: 見出しと帯の背景は重複するので出さない */
.v2-scene__cats > .v2-categories-all { background: none; }
.v2-scene__cats > .v2-categories-all .heading { display: none; }
.v2-scene__cats > .v2-categories-all .v2-categories { padding-top: 0; padding-bottom: 0; background: none; }

/* ヘッダー: 法人のお客様にもアイコン。アイコンは青みグレーで控えめに（Anker Store も同色） */

/* 余白の整理（9/29）: セクション間は PC 96px / SP 56px に統一・空になったブランド一覧を出さない・Magazine の二重余白を解消 */
html[data-top-layout="report"][data-top-variant="2"] { --top-gap: 56px; @media (min-width: 1080px) { --top-gap: 96px; } }
html[data-top-variant="2"] .shopify-section[id*="v2-top-brand-list"] { display: none; }
html[data-top-variant="2"] .v2-mag { margin-top: 0; }

html[data-top-variant="2"] .v2-mag { margin-bottom: var(--top-gap); }

/* 矢印を 1 種に: 「すべて見る」と横スクロールの前後ボタン（四角・角丸 4px・影なし） */
html[data-top-variant="2"] .v2-brand-new-products > a.button::after,
html[data-top-variant="2"] .v2-rail-nav button::before {
  content: "" !important; border: 0 !important; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
html[data-top-variant="2"] .v2-brand-new-products > a.button::after { width: 14px !important; height: 14px !important; transform: none !important; }
html[data-top-variant="2"] .v2-rail-nav button {
  border-radius: 4px !important; box-shadow: none !important; border-color: #dcdcdc !important;
  &::before { width: 18px !important; height: 18px !important; transform: translate(-50%, -50%) !important; }
  &[data-rail-prev]::before { transform: translate(-50%, -50%) rotate(180deg) !important; }
  &:hover { background: #f4f4f4 !important; }
}

/* 製品カード: 選択中の色サムネの枠も黒でなく濃いグレー */
html[data-top-variant="2"] .product-card-default-item.is-active { border-color: #8a8a8a !important; }

/* ============================================================
   [0929-r1] UI/UX レビュー 1 周目の修正
   ============================================================ */
/* ランキングの順位表示は旧デザイン（金銀銅のリボン・4 位以下は黒四角）のまま（9/29 FB で黒バッジ化を撤回） */

/* 診断: 選択肢が「押せない」ように見えないよう文字を濃く。見出しを大きくして問いとの逆転をなくす */
#fx-top.fx[data-fx-style="sentence"] .fx__opt, #fx-top.fx[data-fx-style="sentence"] .fx__opt--photo { color: #6b6b6b; }
#fx-top.fx[data-fx-style="sentence"] .fx__title { font-size: 20px; font-weight: 700; @media (min-width: 1080px) { font-size: 24px; } }
#fx-top.fx[data-fx-style="sentence"] .fx__q-lead { color: #1a1a1a; }
/* 途中の候補サムネ: SP で小さすぎるので大きく・ヒントは 12px */
#fx-top.fx .fx__cand { width: 56px; height: 56px; @media (min-width: 1080px) { width: 72px; height: 72px; } }
#fx-top.fx .fx__cands-hint, .v2-cat-detail { font-size: 12px; }

/* 診断結果: カードの縦位置とボタン行をそろえる（PC）。「ほかの候補も見る」も枠ボタンにして高さ 44px で統一 */
@media (min-width: 1080px) {
  #fx-top.fx .fx__card { display: flex; flex-direction: column; }
  #fx-top.fx .fx__card .fx__body { flex: 1; }
  #fx-top.fx .fx__card .fx__actions { margin-top: auto; padding-top: 12px; }
}
#fx-top.fx .fx__reroll, #fx-top.fx .fx__redo {
  min-height: 44px; padding: 0 16px !important; border: 1px solid #cfcfcf !important; border-radius: 4px !important; background: #fff !important;
  color: #1a1a1a !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important;
  &:hover { background: #f4f4f4 !important; }
}
:is(#fx-top.fx[data-fx], body .fx__modal, section.v2-clab[data-clab]) :is(.fx__btn, .v2-clab__btn) { min-height: 44px; }

/* 詳細モーダル: チェックの水色 → 黒、サムネ送りの › → 共通の矢印・影なし */
body .fx__modal .fx__points svg, body .fx__modal .fx__points li::before { color: #1a1a1a !important; stroke: currentColor; }
body .fx__modal .fx__modal-thumbnav { box-shadow: none !important; }
body .fx__modal .fx__modal-thumbnav--next::after {
  width: 14px !important; height: 14px !important; border: 0 !important; transform: none !important; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 会員特典: 矢印の大きさを 16px に（差し替え時に指定漏れ）・CTA は白ベタに黒文字・Prime Pass の › も共通の矢印に */
html[data-top-variant="2"] .v2-official-merit .v2-merit__pp::after {
  border: 0 !important; border-radius: 0 !important; background: currentColor !important; width: 16px !important; height: 16px !important; transform: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 「すべて見る」: Magazine と同じ「文字＋細い矢印」のテキストリンクにそろえる */
html[data-top-variant="2"] .v2-brand-new-products > a.button {
  min-height: 0 !important; padding: 6px 0 !important; border: 0 !important; background: none !important; color: #1a1a1a !important; font-size: 13px !important;
  &:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* SP: ヘッダーの検索窓も角丸 4px・カラーラボは「カートに入れる」だけを全幅に（詳細は画像タップ）・製品を探すは 4 列で縦を詰める */
html[data-top-variant="2"] :is(.v2-header-search, .v2-form-hd-search, .v2-header-search input) { border-radius: 4px !important; }
@media (max-width: 1079.98px) {
  html[data-top-variant="2"] .v2-clab .v2-clab__actions { grid-template-columns: 1fr !important; }
  html[data-top-variant="2"] .v2-clab .v2-clab__actions [data-clab-detail] { display: none !important; }
  /* SP: 4 列（ラベルは <wbr> の位置でだけ改行）・画像は枠の中央に */
  html[data-top-variant="2"] .v2-scene .v2-scene__cats .v2-scene__cat-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px 8px !important; }
  html[data-top-variant="2"] .v2-scene .v2-scene__cats .v2-scene__cat-visual { aspect-ratio: 1 !important; height: auto !important; max-width: none !important; padding: 8px !important; }
  html[data-top-variant="2"] .v2-scene .v2-scene__cats .v2-scene__cat-visual img { object-position: 50% 50% !important; transform-origin: 50% 50% !important; }
  html[data-top-variant="2"] .v2-scene .v2-scene__cats .v2-scene__cat-label { font-size: 11px !important; line-height: 1.4 !important; word-break: keep-all; overflow-wrap: normal; text-align: center; }
}


/* ============================================================
   [0929-r2] UI/UX レビュー 2 周目の修正（SP）
   ============================================================ */
/* 診断の自動スクロールが固定ヘッダーの下に潜らないように */
#fx-top.fx { scroll-margin-top: 140px; @media (min-width: 1080px) { scroll-margin-top: 90px; } }
@media (max-width: 1079.98px) {
  /* ヘッダー: 「法人のお／客様」の折り返しを防ぐ */
  /* 診断: 選択肢は問いより一段小さく（問い 26px / 選択肢 20px） */
  #fx-top.fx[data-fx-style="sentence"] .fx__opt, #fx-top.fx[data-fx-style="sentence"] .fx__opt--photo { font-size: 20px; }
  #fx-top.fx .fx__cands-hint { display: block; margin: 4px 0 0; }
  /* Magazine の左右余白をほかのセクションと同じ 20px に */
  html[data-top-variant="2"] .v2-mag { padding-inline: 20px; }
  /* ランキング: 1〜3 位と 4〜6 位の間を詰める */
  html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items.is-current { row-gap: 20px !important; }
}

/* [0929-r2] PC ほか */
/* 診断: 見出し > 問い > 選択肢 の順で大きさを整える（PC 28 / 34 / 28） */
@media (min-width: 1080px) {
  #fx-top.fx[data-fx-style="sentence"] .fx__title { font-size: 28px; }
  #fx-top.fx[data-fx-style="sentence"] .fx__q-lead { font-size: 34px; }
  #fx-top.fx[data-fx-style="sentence"] .fx__opt, #fx-top.fx[data-fx-style="sentence"] .fx__opt--photo { font-size: 30px; }
  #fx-top.fx[data-fx-style="sentence"] .fx__opt-visual.fx__opt-visual--anim svg { width: 40px; height: 40px; }
}
/* 候補サムネのホバーカードは下に出す（「前の質問に戻る」を隠さない） */
#fx-top.fx .fx__cand-pop { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -6px); }
@media (hover: hover) and (min-width: 1080px) { #fx-top.fx button.fx__cand:hover .fx__cand-pop { transform: translate(-50%, 0); } }
/* 結果カード: マッチ度は画像の左下へ（順位ラベルと重ねない）・枠は 1 重に・チェックの角丸 4px */
#fx-top.fx .fx__card .fx__match { top: auto !important; bottom: 12px; left: 12px; }
#fx-top.fx[data-fx-style="sentence"] .fx__card { border: 0 !important; }
#fx-top.fx .fx__pick i { border-radius: 4px !important; }
#fx-top.fx .fx__card.is-top .fx__rank { background: #1a1a1a !important; }

/* セクション見出しの大きさをそろえる（PC 28px / SP 22px） */
html[data-top-variant="2"] :is(.v2-scene__cats .heading, .v2-products-ranking > .heading, .v2-brand-new-products .heading, .v2-mag .heading, .v2-clab__title) {
  font-size: 22px !important; font-weight: 700 !important; line-height: 1.4 !important;
  @media (min-width: 1080px) { font-size: 28px !important; }
}
html[data-top-variant="2"] .v2-mag__head { align-items: center; }

/* ランキング上位 3 件: 画像の下の空きを詰める（画像枠 260px） */
@media (min-width: 1080px) {
  html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items.is-current > article:nth-of-type(-n + 3) .product-card-default-thum,
  html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items.is-current > article:nth-of-type(-n + 3) .product-card-default-thum img { height: 260px !important; }
}

/* カラーラボ: カードの下端をそろえる・カテゴリ名はグレーの台をやめて文字だけに */
.v2-clab .v2-clab__card { display: flex; flex-direction: column; }
.v2-clab .v2-clab__name { min-height: 2.9em; }
.v2-clab .v2-clab__actions { margin-top: auto; padding-top: 10px; }
html[data-top-variant="2"] .v2-clab .v2-clab__cat { background: none !important; padding: 0 !important; color: #888 !important; font-weight: 700 !important; }

/* 特集タイル: 写真に掛かる本文の幅を抑える */
@media (min-width: 1080px) { .v2-feat .v2-feat__tile--banner.v2-feat__tile--photo .v2-feat__copy { max-width: 340px; } }

/* Magazine: 語の途中で改行しない */
.v2-mag .v2-mag__title { word-break: auto-phrase; }

/* 詳しい分類: 旧セクションの上余白と先頭グループの上マージンを消し、見出しからの距離を大カテゴリ表示とそろえる */
html[data-cat-detail] .v2-scene__cats > .v2-categories-all { margin-top: 0 !important; padding-top: 0 !important; }
html[data-cat-detail] .v2-scene__cats > .v2-categories-all :is(.v2-categories, .contents) { margin-top: 0 !important; padding-top: 0 !important; }
/* 先頭の塊（充電関連製品）だけ上の余白を消す。左右 2 列の塊（ポータブル電源 / オーディオ）の左側にまで効くと右側とずれる */
html[data-cat-detail] .v2-scene__cats > .v2-categories-all .cat-contents-block > .cat-group:first-child { margin-top: 0 !important; }

/* 診断結果カード: 枠をなくしたので内側の余白も 0 にして、見出しの列と左端をそろえる。マッチ度は画像上の右上（チェックの左）へ */
@media (min-width: 1080px) {
  #fx-top.fx[data-fx-style="sentence"] .fx__card { padding: 0 !important; }
  #fx-top.fx[data-fx-style="sentence"] .fx__card .fx__rank { top: 12px !important; left: 12px !important; }
  #fx-top.fx[data-fx-style="sentence"] .fx__card .fx__pick { top: 10px !important; right: 12px !important; }
  #fx-top.fx[data-fx-style="sentence"] .fx__card .fx__match { top: 12px !important; bottom: auto !important; left: auto !important; right: 52px !important; }
}

/* SP: 法人・Anker Store はヘッダーに出さず、ハンバーガーメニュー内（既存の導線）だけに */
@media (max-width: 1079.98px) {
}

/* カラーラボ: 「詳しく見る」を廃止し、カード全体で製品ページへ。カートボタンは全幅 */
.v2-clab .v2-clab__card { cursor: pointer; }
.v2-clab .v2-clab__actions { grid-template-columns: 1fr !important; }
.v2-clab a.v2-clab__img { cursor: pointer; }
.v2-clab a.v2-clab__name { color: inherit; text-decoration: none; }
.v2-clab .v2-clab__card:hover a.v2-clab__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #bbb; }

/* ヘッダー（PC）: 1280px 以下でナビが 2 行に折れる → 折り返さず、検索窓を縮めて収める */
@media (min-width: 1080px) {
  .v2-header-main :is(.v2-header-search.-pc, form.v2-form-hd-search) { flex: 0 1 320px; min-width: 200px; }
}
@media (min-width: 1080px) and (max-width: 1360px) {
}

/* 売れ筋ランキング: 旧デザインの縦の区切り線（薄いグレー）を戻す */
html[data-top-layout="report"][data-top-variant="2"] .v2-products-ranking .contents .items.is-current > article:nth-of-type(n) {
  border-left: 1px solid #e6e6e6 !important; padding-left: 16px !important;
  @media (max-width: 1079.98px) { padding-left: 8px !important; }
}

/* ── 9/29 SP 指摘まとめ ── */
/* 横スクロールのリスト: iOS Safari は max-content の幅に製品名の折り返し前の長さを足してしまい、
   トラックが実際の約 2 倍に伸びる（中身は終わったのにゲージが半分）。スライド幅の上限で固定する */
.js-splide_products.is-native .splide__slide:not(.is-grade-last),
.js-splide-browsing-history.is-native .splide__slide { max-width: var(--rail-card) !important; min-width: 0; }
/* SP は指でスワイプするので、レールの前後ボタンは出さない */
@media (max-width: 1079.98px) { .v2-rail-nav { display: none !important; } }
/* 横スクロールのタブ・行は縦に動かない */
.v2-products-ranking .titles, .v2-top-tabs, .v2-clab .v2-clab__chips, .v2-clab .v2-clab__grid { overflow-y: hidden; touch-action: pan-x pan-y; }

@media (max-width: 1079.98px) {
  /* 左右の余白は他のセクションと同じ 20px に（--top-w の 94% 幅に 20px を足して 32px になっていた） */
  html[data-top-variant="2"] :is(.v2-feat, .v2-mag) { max-width: none; margin-inline: 0; padding-inline: 20px; }
  html[data-top-variant="2"] .v2-feat-more { max-width: none; margin-inline: 0; padding-inline: 20px; }
  html[data-top-variant="2"] .v2-feat-more .v2-feat-more__band { margin-inline: 0; }
  /* カラーラボ: 色面は画面いっぱい、中身は 20px の線に揃える */
  html[data-top-variant="2"] .v2-clab { max-width: none; margin-inline: 0; padding: 32px 20px 36px; border-radius: 0 !important; }
  .v2-clab .v2-clab__chip { gap: 6px; padding: 6px 12px 6px 8px; font-size: 12px; font-weight: 700; &::before { width: 14px; height: 14px; } }
  .v2-clab .v2-clab__grid { grid-auto-columns: 64%; gap: 12px; }
  .v2-clab .v2-clab__pick i { width: 20px; height: 20px; border-width: 1.5px; }
  .v2-clab .v2-clab__pick i::after { width: 5px; height: 9px; border-width: 0 2px 2px 0; }
}
/* カラーラボ: カテゴリ名は画像の上に重ねず、画像の下（製品名の上）に小さく */
.v2-clab .v2-clab__cat { position: static !important; display: block; margin-top: 8px; font-size: 11px; }
.v2-clab .v2-clab__cat + .v2-clab__name { margin-top: 2px; }

/* 診断の結果（SP）: 線を 20px に揃え、情報を「画像・名前・価格・ひとこと・カート」に絞る */
@media (max-width: 1079.98px) {
  #fx-top.fx .fx__result-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  #fx-top.fx .fx__result-head > .fx__picks { grid-column: 1 / -1; }
  #fx-top.fx .fx__result-head > :is(.fx__reroll, .fx__redo) { width: 100%; margin: 0; justify-content: center; padding-inline: 8px; }
  #fx-top.fx .fx__cards .fx__card { padding: 0; border: 0; column-gap: 14px; }
  #fx-top.fx .fx__cards .fx__card .fx__rank { top: 0; left: 0; }
  #fx-top.fx .fx__card :is(.fx__cat, .fx__tags, .fx__match) { display: none !important; }
  #fx-top.fx .fx__card .fx__reason { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; }
  #fx-top.fx .fx__card .fx__pick { top: 0; right: 0; }
  #fx-top.fx .fx__card .fx__pick i { width: 20px; height: 20px; border-width: 1.5px; }
  #fx-top.fx .fx__card .fx__actions { grid-template-columns: 1fr; }
}
#fx-top.fx .fx__card { cursor: pointer; }
#fx-top.fx .fx__name a { color: inherit; text-decoration: none; }
@media (max-width: 1079.98px) {
  #fx-top.fx .fx__card .fx__name { padding-right: 28px; }
  /* 色チップの行は右端まで流す（途中で切れて見えないように） */
  .v2-clab .v2-clab__chips { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
}

/* ── 詳細モーダル: PC はそのまま、SP は下から出るシート（9/29） ── */
.fx__modal .fx__modal-grip { display: none; }
@media (min-width: 1080px) { .fx__modal .fx__modal-body { display: contents; } }
@media (max-width: 1079.98px) {
  /* シート全体はフェードさせず、背景の暗さだけを動かす（閉じるときにシートが先に消えないように） */
  body .fx__modal { place-items: end stretch; opacity: 1; transition: none; }
  body .fx__modal .fx__modal-backdrop { opacity: 0; transition: opacity 0.36s ease; }
  body .fx__modal.is-in .fx__modal-backdrop { opacity: var(--fx-dim, 1); }
  body .fx__modal .fx__modal-panel.is-drag ~ .fx__modal-backdrop, body .fx__modal:has(.is-drag) .fx__modal-backdrop { transition: none; }
  body .fx__modal .fx__modal-panel {
    display: flex; flex-direction: column; gap: 0; width: 100%;
    height: calc(100dvh - 48px); max-height: none; overflow: hidden; padding: 0;
    border-radius: 4px 4px 0 0 !important;
    transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  body .fx__modal.is-in .fx__modal-panel { transform: translateY(0); }
  body .fx__modal .fx__modal-panel.is-drag { transition: none; }
  body .fx__modal .fx__modal-grip { display: grid; place-items: center; flex: none; height: 24px; touch-action: none; & i { width: 36px; height: 4px; border-radius: 2px; background: #d0d4d8; } }
  body .fx__modal .fx__modal-close { top: 8px; right: 12px; width: 32px; height: 32px; font-size: 14px; }
  body .fx__modal .fx__modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* 画像は端まで、サムネ列は出さずに枚数表示 */
  body .fx__modal .fx__modal-strip { border: 0; border-radius: 0 !important; max-height: none; aspect-ratio: 1; background: #f5f6f7; }
  body .fx__modal .fx__modal-frame { padding: 28px; }
  body .fx__modal .fx__modal-thumbwrap { display: none; }
  body .fx__modal .fx__modal-counter { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); padding: 3px 10px; border-radius: 2px; background: rgba(26, 26, 26, 0.6); color: #fff; font-size: 11px; }
  body .fx__modal .fx__modal-info { padding: 20px 20px 0; }
  body .fx__modal .fx__modal-name { font-size: 18px; }
  /* 下端に固定のボタン列（ホームバーの分を空ける） */
  body .fx__modal .fx__modal-actions {
    position: sticky; bottom: 0; z-index: 2; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 24px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #ececec; background: #fff;
  }
  body .fx__modal .fx__modal-actions .fx__btn { min-height: 48px; padding: 0 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { body .fx__modal .fx__modal-panel { transition: none; } }

/* 9/29: 製品を探す SP の「すべてのカテゴリ」枠は出さない */
@media (max-width: 1079.98px) { html[data-top-variant="2"] .v2-scene__cat-item--all, .v2-scene .v2-scene__cat-item--all { display: none !important; } }
/* 9/29: カラーラボのカード間はなるべく詰める */
.v2-clab .v2-clab__grid { gap: 8px !important; }
@media (max-width: 1079.98px) {
  /* 色チップの行: 親の幅で止めずに画面の右端まで流す */
  .v2-clab .v2-clab__chips { max-width: none !important; width: calc(100% + 40px); box-sizing: border-box; }
}
/* モーダル: 製品画像は白地なので面も白に、特長のチェックはモノトーン */
body .fx__modal .fx__modal-strip { background: #fff !important; }
body .fx__modal .fx__points svg { background: #1a1a1a !important; color: #fff !important; }

/* 9/29: 詳しい分類（SP）は 1 列のリストに。2 列だと名前が途中で折れて、行の間もスカスカに見えていた */
@media (max-width: 1079.98px) {
  html[data-top-variant="2"] .v2-categories-all {
    & :is(.cat-contents-block, .cat-group-pair, .cat-group-quad) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
    & :is(.cat-group-pair, .cat-group-quad) > .cat-group { margin-top: 0 !important; grid-column: auto !important; }
    & dl.list > dt::after { top: 50% !important; right: 8px !important; margin-top: -4px; }
    & .cat-group-head { margin: 0 !important; padding: 0 0 8px !important; }
    & .cat-lists { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
    & dl.list { margin: 0 !important; border-bottom: 1px solid #ececec; }
    & dl.list > dt { padding: 0 !important; }
    & dl.list > dt > a { display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 6px 32px 6px 0 !important; }
    & dl.list > dt > a img { flex: none; width: 40px !important; height: 40px !important; object-fit: contain; }
    & dl.list > dt > a span { font-size: 14px !important; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    & dl.list > dd { padding-left: 52px; }
  }
}

/* ── KV（お知らせカルーセル）: v2-rail.js の slides。寸法は Splide 時代と同じ（PC は --top-w 幅・隙間 10、SP は 350/390・隙間 8） ── */
.v2-info-carousel .js-splide-top-main.v2-rail {
  --v2-rail-w: calc((350 / 390) * 100vw);
  --v2-rail-gap: 8px;
  --v2-rail-pad: calc((100vw - var(--v2-rail-w)) / 2);
  visibility: visible;
  @media (min-width: 1080px) { --v2-rail-w: var(--top-w, 1080px); --v2-rail-gap: 10px; }
  & .splide__track { position: relative; z-index: 0; }
  & .splide__list { width: max-content; height: 100%; grid-template-rows: 100%; }
  & .splide__slide { height: 100%; overflow: hidden; }
  & .splide__slide .v2-info-carousel-anc { display: block; height: 100%; }
  & .v2-rail-nav { display: none; }
  @media (min-width: 1080px) {
    & .v2-rail-nav { display: block; }
    & .v2-rail-nav > button { top: calc(var(--v2-rail-w) * 2 / 9); width: 40px; height: 40px; border-color: transparent; background: rgba(255, 255, 255, 0.9); opacity: 0; transition: opacity 0.2s; }
    &:hover .v2-rail-nav > button { opacity: 1; }
    /* 矢印は中央の 1 枚の外（左右にのぞく前後の画像の上、その中央）に置く。本番の Splide と同じ位置 */
    & .v2-rail-nav > button[data-rail-prev] { left: max(8px, calc((100% - var(--v2-rail-w)) / 4 - 20px)); }
    & .v2-rail-nav > button[data-rail-next] { right: max(8px, calc((100% - var(--v2-rail-w)) / 4 - 20px)); }
  }
  /* ドット: 本番（Splide）と同じ 5px 間隔・左右 16px の余白 */
  & .v2-rail-dots { gap: 5px; padding: 0 16px; }
}

/* 10/8 カラーラボ: 「すべて見る」。すべて見るの間は 6 件目以降も出す（PC は行が増える／SP は横スクロールで全件） */
.v2-clab .v2-clab__grid.is-all > .v2-clab__card:not([hidden]) { display: flex; }
.v2-clab .v2-clab__more {
  display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; margin-top: 20px;
  &[hidden] { display: none; }
  @media (min-width: 1080px) { justify-content: flex-end; margin-top: 18px; }
}
.v2-clab .v2-clab__morebtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none;
  color: #1a1a1a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(26, 26, 26, 0.3); text-underline-offset: 4px;
  &[hidden] { display: none; }
  &:hover { text-decoration-color: currentColor; }
}

/* 10/8 カラーラボ スマホ: 「すべて見る」は横スクロールの最後のカードとして出す（下の文字ボタンは PC だけ） */
.v2-clab .v2-clab__morecard {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.6); color: #1a1a1a; font: inherit; cursor: pointer;
  scroll-snap-align: start;
  & b { font-size: 14px; font-weight: 700; }
  & .v2-clab__morecard-n { font-size: 12px; color: #666; }
  & svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: #fff; fill: none; stroke: #1a1a1a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
}
@media (max-width: 1079px) {
  .v2-clab .v2-clab__morecard { display: flex; }
  .v2-clab .v2-clab__more { display: none; }
}

/* 10/8 診断: 3 件まるごと入れ替えられない答えでは「ほかの候補も見る」をグレーにして押せなくする */
#fx-top.fx .fx__reroll:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* 10/8 SP: 新製品・今がお得の「すべて見る」を PC と同じ「見出しの右」1 か所に（一覧の下・上に出たり、今がお得専用の枠付きボタンと 2 つ出たりしていた）。
   タブを切り替えるとリンク先は index.js 側で今がお得の一覧に替わる。タブの下の余白も 32→16px に詰める */
@media (max-width: 1079.98px) {
  html[data-top-variant="2"] .v2-brand-new-products > a.button {
    position: absolute !important; top: 0; right: 20px; display: inline-flex !important; align-items: center; gap: 6px;
    width: auto !important; height: 31px; margin: 0 !important; padding: 0 !important;
    &::after { position: static !important; inset: auto !important; margin: 0 !important; }
  }
  html[data-top-variant="2"] .v2-sale-products-list.is-tab-on > .button { display: none !important; }
  html[data-top-variant="2"] .v2-top-tabs { margin-bottom: 16px !important; }
}

/* 10/8 診断: 「いちばんのおすすめ」は水色で目立たせる（スプシの指示）。「こちらもおすすめ」は黒のまま */
#fx-top.fx .fx__card.is-top .fx__rank { background: #00a9e0 !important; color: #fff !important; }

/* 10/9 トップ診断のバッジは「1・2・3」の連番（文字が 1 つなので正方形に） */
#fx-top.fx .fx__card.is-num .fx__rank { min-width: 24px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
#fx-top.fx .fx__card .fx__reason[hidden] { display: none !important; }

/* 10/9 製品を探すは A公式の見出しどおり 14 分類（PC は従来どおり 7 列 × 2 段）。ラベルは語の途中で折らない（<wbr> の位置でだけ折る） */
.v2-scene__cat-label, .v2-hcat__label { word-break: keep-all; overflow-wrap: anywhere; }