/* ===================================
   PC表示時（画面幅 769px 以上）
   =================================== */

/* 外枠（はみ出しを隠す） */
.loop-carousel-wrap {
  width: 100%;
  overflow: hidden;
}

/* カードを横並びにしてアニメーションをかけるトラック */
.loop-carousel-track {
  display: flex;
  gap: 10px; /* カード同士の隙間 */
  width: max-content;
  /* 30秒かけて1周する無限アニメーション（数値を変えると速度が変わります） */
  animation: infinite-scroll 60s linear infinite;
}

/* マウスホバー時にアニメーションを一時停止（ユーザーが読みやすくなります） */
.loop-carousel-track:hover {
  animation-play-state: paused;
}

/* PC：画面幅の中にぴったり「8枚」並べる計算 */
.card-item {
  /* 画面幅(100vw)から隙間(10px * 7個 = 70px)を引いて 8等分 */
  flex: 0 0 calc((100vw - 70px) / 8);
  box-sizing: border-box;
}

/* 無限ループ用アニメーション定義（全体の半分＝1セット分動いたらリセット） */
@keyframes infinite-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 5px)); /* トラック半分の幅＋隙間分移動 */
  }
}


/* ===================================
   SP表示時（画面幅 768px 以下）
   =================================== */
@media screen and (max-width: 768px) {
  /* 外枠を横スクロールエリアに変更 */
  .loop-carousel-wrap {
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* スナップ機能有効化 */
    -webkit-overflow-scrolling: touch; /* iOSの滑らかスクロール */
    padding: 10px 0;
    
    /* スクロールバーの非表示 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .loop-carousel-wrap::-webkit-scrollbar {
    display: none;
  }

  /* SPでは自動流れを解除して手動スワイプへ切り替え */
  .loop-carousel-track {
    animation: none;
    width: auto;
    gap: 15px;
    padding: 0 15px;
  }

  /* SP：画面幅の80%にして右端をチラ見せさせる */
  .card-item {
    flex: 0 0 80%; /* 1枚あたり80% */
    scroll-snap-align: start; /* スワイプ時に左端にピタッと吸着 */
  }

  /* SPのときは複製した2セット目のカードを非表示にして無駄をなくす */
  .card-item[aria-hidden="true"] {
    display: none;
  }
}