@keyframes fadein-firstview-flyer {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-firstview-flyer {
  animation: fadein-firstview-flyer 0.8s forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

@keyframes fadein-firstview-bg {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-firstview-bg {
  animation: fadein-firstview-bg 2.3s ease-in forwards;
  animation-delay: 0;
  opacity: 0;
}

@keyframes fadein-firstview-medal1 {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-firstview-medal1 {
  animation: fadein-firstview-medal1 0.8s forwards;
  animation-delay: 1s;
  opacity: 0;
}

@keyframes fadein-firstview-medal2 {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-firstview-medal2 {
  animation: fadein-firstview-medal2 0.8s forwards;
  animation-delay: 1.1s;
  opacity: 0;
}

@keyframes fadein-firstview-point {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-firstview-point {
  animation: fadein-firstview-point 0.8s forwards;
  animation-delay: 1.2s;
  opacity: 0;
}

@keyframes fadein-firstview-text {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-firstview-text {
  animation: fadein-firstview-text 0.8s forwards;
  animation-delay: 1.3s;
  opacity: 0;
}

@keyframes fadein-contact-navi {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.fadein-contact-navi {
  animation: fadein-contact-navi 0.8s forwards;
  animation-delay: 1.6s;
  opacity: 0;
}

@keyframes fadein-contact {
  0% {
    opacity : 0;
    visibility: hidden;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

@keyframes fadeout-contact {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    opacity : 0;
    visibility: hidden;
    transform: translateX(-100px);
  }
}

.fadein-contact {
  animation: fadein-contact 0.8s forwards;
}

.fadeout-contact {
  animation: fadeout-contact 0.8s forwards;
}

/* 834px基準のvw */
@media screen and (min-width: 601px) and (max-width: 835px) {
  .fadein-firstview-flyer,
  .fadein-firstview-bg,
  .fadein-firstview-medal1,
  .fadein-firstview-medal2,
  .fadein-firstview-point,
  .fadein-firstview-text,
  .fadein-contact-navi {
    animation: none;
    opacity: 1;
  }

  .fadein-contact {
    animation: fadein-contact 0.8s forwards;
  }
  
  .fadeout-contact {
    animation: fadeout-contact 0.8s forwards;
  }
}

/* 375px基準のvw */
@media screen and (max-width: 600px) {
  .fadein-firstview-flyer,
  .fadein-firstview-bg,
  .fadein-firstview-medal1,
  .fadein-firstview-medal2,
  .fadein-firstview-point,
  .fadein-firstview-text,
  .fadein-contact-navi {
    animation: none;
    opacity: 1;
  }

  .fadein-contact {
    animation: fadein-contact 0.8s forwards;
  }
  
  .fadeout-contact {
    animation: fadeout-contact 0.8s forwards;
  }

  @keyframes fadein-firstview-flyer-sp {
    0% {
      opacity : 0;
      visibility: hidden;
      transform: translate(-50%, -100px);
    }
    100% {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }
  }
  
  .fadein-firstview-flyer {
    animation: fadein-firstview-flyer-sp 1s forwards;
    animation-delay: 0.5s;
    opacity: 0;
  }
}