/* 外枠：はみ出しを隠す */
.slider-container {
  overflow: hidden;
  width: 100%;
  padding: 40px 0; /* 傾いた時に画像が切れないよう上下に余白 */
}

/* スライドが並ぶレール */
.slider-track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

/* 各スライド（写真の親） */
.slide {
  flex-shrink: 0;
  width: 240px; /* PCサイズ：必要に応じて変更 */
  height: 180px;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- 【ガタン！】という衝撃アニメーション --- */

/* 1. レール全体の揺れ */
.big-impact {
  animation: track-shake 0.6s ease-out;
}

@keyframes track-shake {
  0% { transform: translateY(0); }
  20% { transform: translateY(8px); } /* 少し沈む */
  100% { transform: translateY(0); }
}

/* 2. 写真が斜めに「おっとっと！」となる動き */
.big-impact .slide img {
  animation: photo-slant 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes photo-slant {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(12deg) scale(1.1); } /* ★大きく斜めになる */
  60% { transform: rotate(-3deg) scale(1.02); } /* 揺り戻し */
  100% { transform: rotate(0deg) scale(1); }
}