body {
  width: 100vw;
  height: 100vh;
  background-color: black;
}
.load_cover {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-mask-image: url("bg_effect_pc.png");
  mask-image: url("bg_effect_pc.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
  position: fixed;
  width: 100%;
  height: 100%;

  z-index: -1;
  -webkit-animation: maskAnime 0.68s steps(11) 0.2s both;
  -moz-animation: maskAnime 0.68s steps(11) 0.2s both;
  -o-animation: maskAnime 0.68s steps(11) 0.2s both;
  animation: maskAnime 0.68s steps(11) 0.2s both;
}
.cover_bg {
  width: 100vw;
  height: 100vh;
  background: url("pc.jpeg") no-repeat center;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@keyframes maskAnime {
  0% {
    -webkit-mask-position: 50% 0;
    mask-position: 50% 0;
  }
  100% {
    -webkit-mask-position: 50% 100%;
    mask-position: 50% 100%;
  }
}
.text {
  font-size: 40px;
  font-weight: 700;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
}
.text span {
  -webkit-mask-image: linear-gradient(to right, #fff, #fff calc(100% / 3), transparent calc(100% * 2 / 3), transparent);
  mask-image: linear-gradient(to right, #fff, #fff calc(100% / 3), transparent calc(100% * 2 / 3), transparent);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: text-anime-inner 1200ms forwards;
  animation-delay: 0.5s;
}
.text:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: scaleX(0);
  animation: text-anime 1200ms forwards;
  animation-delay: 0.5s;
}
.c-button {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 10px;
  background-color: transparent;
  color: inherit;
  // font-weight: 600;
  line-height: 175%;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  width: 200px;
  height: 40px;
  font-weight: 700;
}
@keyframes text-anime {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  35% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  40% {
    transform: scaleX(1);
    transform-origin: right center;
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}
@keyframes text-anime-inner {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}