@charset "utf-8";

/* ==========================================
 アニメーション
============================================*/
[data-aos],
[data-aos]::before,
[data-aos]::after {
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

.yokoyure {
  animation: yokoyure 2s infinite;
}
@keyframes yokoyure {
  0% {
    transform: translate(2px, 0px);
  }
  5% {
    transform: translate(-2px, 0px);
  }
  10% {
    transform: translate(2px, 0px);
  }
  15% {
    transform: translate(-2px, 0px);
  }
  20% {
    transform: translate(2px, 0px);
  }
  25% {
    transform: translate(-2px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}
[data-aos="yokoyure"] {
  animation-name: yokoyure;
}

/**
 * pulse
 */
@keyframes pulse {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scale(1.05, 1.05);
  }

  to {
    transform: scaleX(1);
  }
}

[data-aos="pulse"] {
  animation-name: pulse;
}

/**
 * shiny
 */
@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: scale(500) rotate(25deg);
    opacity: 0;
  }
}

[data-aos="shiny"]::after {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

[data-aos="shiny"] {
  overflow: hidden;
  position: relative;
}