@keyframes animationFrame {
  99.9% {
    z-index: 10000;
    opacity: 0;
  }
  100% {
    z-index: -1;
  }
}

#animation {
  animation: animationFrame 1000ms forwards 3800ms;
  min-width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #fefefe;
  /* opacity: 0.5; */
  opacity: 1;
  z-index: 10000;
}

@keyframes opening-animation {
  0% {
    background-image: url("../element/opening.gif");
  }
  99.9% {
    background-image: url("../element/opening.gif");
  }
  100% {
    background-image: url("../element/opening-end.gif");
  }
}

@media (min-width: 781px) {
  .common-fairy {
    position: absolute;
    width: 160px;
  }

  @keyframes move-fairy-one {
    0% {
      top: 80vh;
      right: calc(0px - 160px);
    }
    100% {
      top: 60vh;
      right: calc(100vw + 160px);
    }
  }

  .fairy-one {
    animation: move-fairy-one 1000ms linear forwards 500ms;
    top: 80vh;
    right: calc(0px - 160px);
  }

  @keyframes move-fairy-two {
    0% {
      top: 70vh;
      left: calc(0px - 160px);
    }
    100% {
      top: 50vh;
      left: calc(100vw + 160px);
    }
  }

  .fairy-two {
    animation: move-fairy-two 1000ms linear forwards 900ms;
    top: 70vh;
    left: calc(0px - 160px);
  }

  @keyframes move-fairy-three {
    0% {
      top: 60vh;
      right: calc(0px - 160px);
    }
    100% {
      top: 40vh;
      right: calc(100vw + 160px);
    }
  }

  .fairy-three {
    animation: move-fairy-three 1000ms linear forwards 1300ms;
    top: 60vh;
    right: calc(0px - 160px);
  }

  @keyframes move-fairy-four {
    0% {
      top: 50vh;
      left: calc(0px - 160px);
    }
    100% {
      top: 30vh;
      left: calc(100vw + 160px);
    }
  }

  .fairy-four {
    animation: move-fairy-four 1000ms linear forwards 1700ms;
    top: 50vh;
    left: calc(0px - 160px);
  }

  @keyframes move-fairy-five {
    0% {
      top: 40vh;
      right: calc(0px - 160px);
    }
    100% {
      top: 20vh;
      right: calc(100vw + 160px);
    }
  }

  .fairy-five {
    animation: move-fairy-five 1000ms linear forwards 2100ms;
    top: 40vh;
    right: calc(0px - 160px);
  }

  @keyframes positioning-opening {
    0% {
      top: 400px;
      left: calc(100vw - (100vw * 1.5));
      background-image: url("../element/opening.jpg");
    }
    100% {
      top: 0;
      left: 50%;
      background-image: url("../element/opening.jpg");
    }
  }

  #opening-animation {
    animation: positioning-opening 1000ms linear forwards 1800ms,
      opening-animation 1000ms forwards 2800ms;
    position: absolute;
    transform: translateX(-50%);
    left: calc(100vw - (100vw * 1.5));
    width: 774px;
    height: 291px;
    background-image: url("../element/opening-end.gif");
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

/* 幅が 780px 以下であれば */
@media (max-width: 780px) {
  .common-fairy {
    position: absolute;
    width: 100px;
  }

  @keyframes move-fairy-one {
    0% {
      bottom: 10%;
      right: calc(0px - 100px);
    }
    100% {
      bottom: 30%;
      right: calc(100vw + 100px);
    }
  }

  .fairy-one {
    animation: move-fairy-one 1000ms linear forwards 500ms;
    bottom: 10%;
    right: calc(0px - 100px);
  }

  @keyframes move-fairy-two {
    0% {
      bottom: 20%;
      left: calc(0px - 100px);
    }
    100% {
      bottom: 40%;
      left: calc(100vw + 100px);
    }
  }

  .fairy-two {
    animation: move-fairy-two 1000ms linear forwards 900ms;
    bottom: 20%;
    left: calc(0px - 100px);
  }

  @keyframes move-fairy-three {
    0% {
      bottom: 30%;
      right: calc(0px - 100px);
    }
    100% {
      bottom: 50%;
      right: calc(100vw + 100px);
    }
  }

  .fairy-three {
    animation: move-fairy-three 1000ms linear forwards 1300ms;
    bottom: 30%;
    right: calc(0px - 100px);
  }

  @keyframes move-fairy-four {
    0% {
      bottom: 40%;
      left: calc(0px - 100px);
    }
    100% {
      bottom: 60%;
      left: calc(100vw + 100px);
    }
  }

  .fairy-four {
    animation: move-fairy-four 1000ms linear forwards 1700ms;
    bottom: 40%;
    left: calc(0px - 100px);
  }

  @keyframes move-fairy-five {
    0% {
      bottom: 50%;
      right: calc(0px - 100px);
    }
    100% {
      bottom: 60%;
      right: calc(100vw + 100px);
    }
  }

  .fairy-five {
    animation: move-fairy-five 1000ms linear forwards 2100ms;
    bottom: 50%;
    right: calc(0px - 100px);
  }

  @keyframes positioning-opening {
    0% {
      top: 200px;
      left: calc(100vw - (100vw * 1.5));
      background-image: url("../element/opening.jpg");
    }
    100% {
      top: -1px;
      left: 50%;
      background-image: url("../element/opening.jpg");
    }
  }

  #opening-animation {
    animation: positioning-opening 1000ms linear forwards 1800ms,
      opening-animation 1000ms forwards 2800ms;
    position: absolute;
    transform: translateX(-50%);
    top: 200px;
    left: calc(100vw - (100vw * 1.5));
    width: 340px;
    height: 130px;
    background-image: url("../element/opening-end.gif");
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
}