/* スライダーのコンテナ（サイトの全幅ゾーン） */
.slider-container {
  width: 100%; /* サイトの表示領域の全幅 */
  overflow: hidden; 
  height: 250px; 
  background-color: #F3F9EF;
  display: flex; /* flexboxを使って内容を縦方向中央に配置 */
  align-items: center; 
  padding-bottom: 50px;
}
/* スライダーのトラック（画像を内包し、これが動く） */
.slider-track {
  display: flex; 
  /* ここで flex-shrink: 0; を削除します。animation-play-state: running; が代わりに動作を制御します。 */
  animation: scroll-left 60s linear infinite; /* アニメーションの設定 */
  /*
     scroll-left: アニメーション名
     60s: アニメーションの長さ（秒）。この数値を小さくすると速く、大きくすると遅くなります。
     linear: アニメーションの速度変化（一定の速度）
     infinite: 無限に繰り返す
  */
  will-change: transform; /* アニメーションのパフォーマンスを向上させます */
}
/* 各画像アイテム */
.slider-item {
  flex-shrink: 0; /* 画像が縮まないようにします */
  width: 350px; 
  height: 200px; 
  margin-right: 20px; /* 画像間の右側のスペース */
  object-fit: cover; /* 画像が指定されたサイズ内に収まるようにトリミング */
  border-radius: 8px; 
  box-shadow: 3px 3px 8px rgba(0,0,0,0.2); /* 影を追加して立体感を出します */
  user-drag: none; /* 画像をドラッグできないようにします（ブラウザのデフォルト機能） */
  -webkit-user-drag: none; /* Safari/Chrome用 */
}
/* アニメーションの定義 */
@keyframes scroll-left {
  0% {
    transform: translateX(0); /* アニメーション開始時：左端 */
  }
  100% {
    /* 最初の画像セットが完全に画面外に出るまで移動します。
       HTMLで画像を2セット繰り返しているため、
       最初の1セット分が移動すると、2セット目の先頭が見え始めます。
       これにより、無限ループのように見えます。
       計算式：(画像の幅 + マージン) * 元の画像の枚数
    */
    transform: translateX(calc(-1 * (350px + 20px) * 11));
  }
}
.slider-container:hover .slider-track {
  animation-play-state: paused; /* ホバー時にアニメーションを一時停止します */
}
/* --- タブレット対応 (画面幅が768px以下のデバイス) --- */
@media (max-width: 768px) {
  .slider-container {
    height: 210px; 
  }
  .slider-item {
    width: 280px; 
    height: 160px;
    margin-right: 15px; 
  }
  /* アニメーションの移動距離をタブレット用に再計算 */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      /* タブレット版の計算式：(画像の幅 + マージン) * 元の画像の枚数 */
      transform: translateX(calc(-1 * (280px + 15px) * 11));
    }
  }
  .slider-track {    
    animation: scroll-left 45s linear infinite; 
  }
}
/* --- スマートフォン対応 (画面幅が480px以下のデバイス) --- */
@media (max-width: 480px) {
  .slider-container {
    height: 210px; 
  }
  .slider-item {
    width: 220px; 
    height: 130px; 
    margin-right: 10px; 
  }
  /* アニメーションの移動距離をスマートフォン用に再計算 */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {      
      transform: translateX(calc(-1 * (220px + 10px) * 11));
    }
  }
  .slider-track {    
    animation: scroll-left 35s linear infinite; 
  }
}