#contentsWrapper .js-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: #000;
  z-index: 9999;
}

#contentsWrapper .js-loading.is-loaded {
  -webkit-transition: 1s ease 0.5s;
  transition: 1s ease 0.5s;
  opacity: 0;
  pointer-events: none;
}

#contentsWrapper .p-teaser {
  width: 100%;
  aspect-ratio: 1 / 0.5625;
  position: relative;
  overflow: hidden;
}

#contentsWrapper .p-teaser img {
  width: 100%;
  max-width: none;
}

#contentsWrapper .p-teaser .parallax {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  z-index: -1;
}

#contentsWrapper .p-teaser .parallax .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/teaser/bg001.jpg) repeat-y center/cover;
  -webkit-transition: 1s;
  transition: 1s;
}

.is-phase3 #contentsWrapper .p-teaser .parallax .bg {
  background-image: url(../images/teaser/bg002.jpg);
}

#contentsWrapper .p-teaser .txt1 {
  position: absolute;
  top: 5.7%;
  left: 1%;
  right: 0;
  margin: auto;
  font-size: 4.43vw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  color: #7efebd;
  text-shadow: 0 0 0.3em rgba(70, 200, 146, 0.5), 0 0 0.3em rgba(70, 200, 146, 0.5);
  -webkit-animation: txt1 3s ease 0s infinite normal forwards running;
          animation: txt1 3s ease 0s infinite normal forwards running;
}

@-webkit-keyframes txt1 {
  0%, 5%, 100% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  1%, 3% {
    -webkit-transform: skewX(5deg);
            transform: skewX(5deg);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
  2%, 4% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}

@keyframes txt1 {
  0%, 5%, 100% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  1%, 3% {
    -webkit-transform: skewX(5deg);
            transform: skewX(5deg);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
  2%, 4% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    -webkit-filter: blur(2px);
            filter: blur(2px);
  }
}

#contentsWrapper .p-teaser .txt2 {
  position: absolute;
  top: 3.3%;
  left: 0;
  right: 0;
  margin: auto;
  width: 57.421875%;
  display: none;
}

#contentsWrapper .p-teaser .img {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  margin: auto;
  width: 30.859375%;
  aspect-ratio: 1 / 1.384;
  background: url(../images/teaser/img001.png) no-repeat center/contain;
}

#contentsWrapper .p-teaser .halo {
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  margin: auto;
  width: 56.953125%;
  aspect-ratio: 1 / 0.7;
  background: url(../images/teaser/halo_green.png) no-repeat center/contain;
  -webkit-animation: holo 3s ease-in-out 0s infinite alternate forwards running;
          animation: holo 3s ease-in-out 0s infinite alternate forwards running;
}

@-webkit-keyframes holo {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes holo {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

#contentsWrapper .p-teaser .scan {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 1 / 0.427;
}

#contentsWrapper .p-teaser .scan > span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.01;
  background: #75ff5a;
  -webkit-mask: url(../images/teaser/scanline.png) no-repeat center/contain;
          mask: url(../images/teaser/scanline.png) no-repeat center/contain;
  -webkit-animation: scanBlinking 0.05s linear 0s infinite alternate forwards running;
          animation: scanBlinking 0.05s linear 0s infinite alternate forwards running;
}

@-webkit-keyframes scanBlinking {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes scanBlinking {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

#contentsWrapper .p-teaser .c-countdown {
  position: absolute;
  top: 73.4%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  color: #42ff9f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25em;
}

#contentsWrapper .p-teaser .c-countdown_time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'DSEG7Modern';
  font-size: 6.78vw;
  line-height: 1;
  color: #7efebd;
  text-shadow: 0 0 0.1923em rgba(70, 200, 146, 0.5), 0 0 0.1923em rgba(70, 200, 146, 0.5);
}

#contentsWrapper .p-teaser .c-countdown .status, #contentsWrapper .p-teaser .c-countdown .name {
  font-size: 1.0417vw;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.is-phase3 #contentsWrapper .p-teaser .txt1 {
  display: none;
}

.is-phase3 #contentsWrapper .p-teaser .txt2 {
  display: block;
}

.is-phase3 #contentsWrapper .p-teaser .img {
  -webkit-animation: imgFade 12s linear 0s infinite normal forwards running;
          animation: imgFade 12s linear 0s infinite normal forwards running;
}

@-webkit-keyframes imgFade {
  0%, 100% {
    background-image: url(../images/teaser/img001_red.png);
  }
  25% {
    background-image: url(../images/teaser/img001_blue.png);
  }
  50% {
    background-image: url(../images/teaser/img001_black.png);
  }
  75% {
    background-image: url(../images/teaser/img001_white.png);
  }
}

@keyframes imgFade {
  0%, 100% {
    background-image: url(../images/teaser/img001_red.png);
  }
  25% {
    background-image: url(../images/teaser/img001_blue.png);
  }
  50% {
    background-image: url(../images/teaser/img001_black.png);
  }
  75% {
    background-image: url(../images/teaser/img001_white.png);
  }
}

.is-phase3 #contentsWrapper .p-teaser .halo {
  background-image: url(../images/teaser/halo.png);
}

.is-phase3 #contentsWrapper .p-teaser .scan > span {
  background: -webkit-gradient(linear, left top, right top, from(#00a8ff), color-stop(#6076ca), to(#ff3b3b));
  background: linear-gradient(90deg, #00a8ff, #6076ca, #ff3b3b);
}

.is-phase3 #contentsWrapper .p-teaser .c-countdown {
  color: #00d8ff;
}

.is-phase3 #contentsWrapper .p-teaser .c-countdown_time {
  color: #fff;
  text-shadow: 0 0 0.1923em rgba(255, 255, 255, 0.25), 0 0 0.1923em rgba(255, 255, 255, 0.25);
}

@media screen and (max-width: 800px) {
  #contentsWrapper .p-teaser {
    aspect-ratio: 1 / 2;
  }
  #contentsWrapper .p-teaser .parallax .bg {
    background-image: url(../images/teaser/bg001_sp.jpg);
  }
  #contentsWrapper .p-teaser .txt1 {
    top: 3.5%;
    font-size: 12.963vw;
    line-height: 1.2;
  }
  #contentsWrapper .p-teaser .txt2 {
    top: 1.2%;
    width: 79.537%;
  }
  #contentsWrapper .p-teaser .img {
    top: 19.6%;
    width: 88%;
  }
  #contentsWrapper .p-teaser .scan {
    top: 19.6%;
    left: -100%;
    right: -100%;
    width: 200%;
    aspect-ratio: 1 / 0.6;
  }
  #contentsWrapper .p-teaser .halo {
    top: 22%;
    left: -50%;
    right: -50%;
    width: 160%;
  }
  #contentsWrapper .p-teaser .c-countdown {
    top: 80.5%;
  }
  #contentsWrapper .p-teaser .c-countdown_time {
    font-size: 14.82vw;
  }
  #contentsWrapper .p-teaser .c-countdown .status, #contentsWrapper .p-teaser .c-countdown .name {
    font-size: 3.7vw;
  }
  .is-phase3 #contentsWrapper .p-teaser .parallax .bg {
    background-image: url(../images/teaser/bg002_sp.jpg);
  }
}