@keyframes swing {
  0% {
    transform: rotate(0);
  }

  12% {
    transform: rotate(6deg);
  }

  15% {
    transform: rotate(-6deg);
  }

  18% {
    transform: rotate(6deg);
  }

  21% {
    transform: rotate(-6deg);
  }

  24% {
    transform: rotate(6deg);
  }

  27% {
    transform: rotate(-6deg);
  }

  30% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes swing2 {
  0% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(6deg);
  }

  40% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }

  60% {
    transform: rotate(-6deg);
  }

  70% {
    transform: rotate(6deg);
  }

  80% {
    transform: rotate(-6deg);
  }

  90% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  27% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.l-main-visual.l-main-visual--coming::after {
  animation: flash 3s steps(1) 0s infinite paused both;
  background: url('/agvpromo/img/coming/bg_swing.svg') no-repeat center/contain;
  content: '';
  display: block;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
}

.l-main-visual.is-move::after {
  animation-play-state: running !important;
}

.l-main-visual.is-start::after {
  animation-iteration-count: 1 !important;
}

.l-main-visual.is-start .c-egg--cracked {
  animation-duration: 1s !important;
  animation-iteration-count: 1 !important;
  animation-name: swing2 !important;
}

.l-main-visual .c-egg.c-egg--cracked {
  animation: swing 3s steps(1) 0s infinite paused both;
}

@media screen and (max-width: 799px) {
  .l-main-visual.l-main-visual--coming::after {
    height: 13.43vw;
    top: -2.61vw;
    width: 52.81vw;
  }
}

@media print, screen and (min-width: 800px) {
  .l-main-visual.l-main-visual--coming::after {
    height: 6.71vw;
    top: -1.31vw;
    width: 26.4vw;
  }
}