@charset utf-8;
.wrapper { width: 100%; height: 100vh; }
.animation-wrap { width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center; }
.animation-wrap img { width: 100%; height: 100%; object-fit: contain; }

.marquee-wrap {
  position: fixed; bottom: 3rem; left: 0; right: 0; margin: auto;
  display: flex; align-items: center; justify-content: center;
}
.marquee {
  width: 5em;
  overflow: hidden;
}
.marquee-wrap::before  { content: ''; width: 1.5em; height: 1.5em; display: block; border-radius: 50%; border: 2px solid #000; background:url("../img/play.svg") no-repeat 65% center / 40% auto;  margin-right: 1em; }

.marquee__inner {
  display: inline-block;
  white-space: nowrap;
  animation: scrollText 5s linear infinite;
  font-weight: bold;
}

@keyframes scrollText {
  0% {
    transform: translateX(-33.33%);
  }
  100% {
    transform: translateX(-66.66%);
  }
}