/* works-auto-slider.css — TOPページ「施工事例」セクション専用の自動スクロールスライダー。
   既存の .gallery-grid.is-rail(他ページ共通クラス)には影響しない独立コンポーネント。
   画像を複製して連結し、-50%まで流してから瞬時に0%へ戻すことで途切れの無い無限ループを作る。 */

.works-auto-slider {
  margin-top: 2.5rem;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.works-auto-slider-track {
  display: flex;
  width: max-content;
  gap: 1rem;
  animation: works-auto-slider-scroll 32s linear infinite;
}

/* ホバーで一時停止(操作性・可読性の配慮) */
.works-auto-slider:hover .works-auto-slider-track,
.works-auto-slider:focus-within .works-auto-slider-track {
  animation-play-state: paused;
}

.works-auto-slider-item {
  flex: 0 0 min(80%, 340px);
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.works-auto-slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  transition: transform 0.5s ease;
}

.works-auto-slider-item:hover img {
  transform: scale(1.06);
}

@keyframes works-auto-slider-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 動きを減らす設定の利用者には静止画にする(common.css の prefers-reduced-motion 方針と一致) */
@media (prefers-reduced-motion: reduce) {
  .works-auto-slider-track {
    animation: none;
  }
}

@media (max-width: 640px) {
  .works-auto-slider-item { flex-basis: min(78%, 280px); }
  .works-auto-slider-track { animation-duration: 24s; }
}