/* 横スクロールアニメーションのためのCSS */
.scroll-gallery {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
}

.scroll-gallery-inner {
  display: flex;
  animation: scrollImages 30s linear infinite;
}

.img-item {
  flex: 0 0 auto;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.img-item img {
  width: 300px; /* 画像サイズを調整 */
  height: auto;
  display: block;
}


/* スクロールアニメーション */
@keyframes scrollImages {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 画像が全部スクロールし終わった後、最初に戻る距離を設定 */
    transform: translateX(calc(-300px * 10 - 15px * 10));
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .img-item img {
    width: 200px;
  }
  
  @keyframes scrollImages {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-200px * 10 - 15px * 10));
    }
  }
}