@media (max-width: 768px) {


    .c-products__inner.u-frame {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start; /* ここ大事：center はNG */
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 0 16px 24px !important;
        box-sizing: border-box;
        scrollbar-width: none;
      }
      .c-products__inner.u-frame::-webkit-scrollbar {
        display: none;
      }
    
      .c-products__inner.u-frame .c-card {
        flex: 0 0 80%;   /* カード幅。好みで調整OK */
        max-width: 320px;
        display: block;
    }


  /* 画像（aspect-ratioは使わない） */
  .c-products__inner.u-frame .c-card__pic {
    margin-bottom: 8px;
  }

  .c-products__inner.u-frame .c-card__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* ===== スクロールバー（デフォルトのスライダー）非表示 ===== */
  .c-products__inner.u-frame {
    scrollbar-width: none;          /* Firefox */
  }
  .c-products__inner.u-frame::-webkit-scrollbar {
    display: none;                  /* WebKit系（iOS/Android/Chrome） */
  }

  /* JS 初期化済みの印（必要なら見た目変えられる） */
  .c-products__inner.u-frame.c-productsCarousel--active {
    /* ここは今は空でOK */
  }

  /* ナビ全体（矢印＋インジケーター） */
  .c-productsCarouselNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px 16px;
  }

  /* 矢印ボタン */
  .c-productsCarouselNav__prev,
  .c-productsCarouselNav__next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }

  .c-productsCarouselNav__prev::before {
    content: '‹';
  }
  .c-productsCarouselNav__next::before {
    content: '›';
  }




  /* ▼ インジケータ（ドット） */
  .c-productsCarouselNav__dots {
    display: flex;
    gap: 6px;
    justify-content: center;
  }

  .c-productsCarouselNav__dot {
    width: 30px;
    height: 2px;
    background: #ccc;     /* 非アクティブ */
    transition: background 0.25s;
  }

  .c-productsCarouselNav__dot.is-active {
    background: #111;     /* アクティブ */
  }

  .c-productsCarouselNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px 16px;
  }


}