@charset "utf-8";
/* 画像が流れ続ける */
.marquee-container {
  display: flex;
  position: relative;
}
.marquee-inner {
  display: flex;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  0% {
    translate: 0;
  }
  100% {
    translate: -100%;
  }
}

/* 画像にホバーすると動きを止めて拡大 */
.marquee-inner-stop {
  display: flex;
  animation: marquee 20s linear infinite;
}
.marquee-inner-stop img {
  transition: scale .4s;
}
.marquee-inner-stop:has(img:hover) {
  z-index: 2;
}
.marquee-inner-stop img:hover {
  scale: 1.6;
}
/* 停止時のクラス */
.marquee-paused {
  animation-play-state: paused;
}

/* 基本スタイル */
body {
  padding: 1rem;
  overflow-x: hidden;
}
img {
  display: block;
  width: 400px;
}
h2 {
  margin-top: 3rem;
}