@charset "utf-8";

#loading {
  animation: bgAnime 8s linear infinite;
  background-image: var(--main-color-gr-lt);
  background-size: 500% 500%;
  display: grid;
  height: 100%;
  place-content: center;
  position: fixed;
  width: 100%;
  z-index: 100;
}

#loading-txt {
  display: none;
  width: 118.4rem;
}

body {
  animation: bgAnime 16s linear infinite;
}

body.is-load {
  animation: fadeIn 2s linear 0s 1 normal;
}

body::before {
  z-index: 1;
}

.top {
  height: 100svh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.top::after {
  animation: bgAnime 8s linear infinite;
  background-image: var(--main-color-gr);
  background-size: 500% 500%;
  content: "";
  height: 100%;
  left: 0;
  opacity: .23;
  position: absolute;
  top: 0;
  width: 100%;
}

.main::after {
  border: .5rem solid;
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.main__bg {
  height: 100%;
  left: 0;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.footer {
  display: grid;
  gap: .8rem;
  grid-template-columns: 1fr 4.4rem;
  height: 4.4rem;
  left: 4rem;
  transform: none;
  width: calc(100% - 8rem);
}

.footer__marquee {
  display: flex;
  flex-direction: row;
  height: inherit;
  overflow-x: hidden;
  padding-block: 0;
  position: relative;
  width: 100%;
}

.footer__marquee li {
  align-items: center;
  animation: scroll 39.92s linear 0s infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-play-state: running;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  min-width: auto;
  z-index: 1;
  line-height: 1;
}

.footer__marquee li::after {
  content: "・";
}


@keyframes scroll {
  0% {
    transform: translate(0)
  }

  to {
    transform: translate(-100%)
  }
}

.footer__player-toggle {
  background: url(/img/ico/play.svg) center / 100% #fff no-repeat;
  border-radius: 50%;
  border: 1px solid;
  height: 4.4rem;
  padding: 0;
  width: 4.4rem;
  outline: none;
}

.footer__player-toggle:active,
.footer__player-toggle:focus {
  background-size: 100%;
}

.footer__player-toggle:focus-visible {
  outline: none;
}

.footer__player-toggle.is-pause {
  background-image: url(/img/ico/pause.svg);
}

/* ================================================================
  hoverアニメーション
================================================================ */
@media (hover: hover) and (pointer: fine) {
  .footer__marquee:hover li {
    animation-play-state: paused;
  }

  .footer__marquee:active li {
    animation-play-state: paused;
  }
}

/* ================================================================
  スマホ版レイアウト
================================================================ */
@media screen and (max-width: 750px) {
  #loading-txt {
    width: 18rem;
  }

  #loading-txt img {
    object-fit: contain;
    max-height: 69vh;
  }

  .main::after {
    border-width: .4rem;
  }

  .footer {
    bottom: 2rem;
    gap: .4rem;
    grid-template-columns: 1fr 3.4rem;
    height: 3.4rem;
    left: 2rem;
    padding: 0;
    position: absolute;
    width: calc(100% - 4rem);
  }

  .footer__player-toggle {
    height: 3.4rem;
    width: 3.4rem;
  }
}