@charset "UTF-8";
.star {
	fill: gold;
	animation-duration: .8s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.star-1 { animation-name: pulse1; animation-delay: 0.1s; }
.star-2 { animation-name: pulse2; animation-delay: 0.2s; }
.star-3 { animation-name: pulse3; animation-delay: 0.3s; }
.star-4 { animation-name: pulse4; animation-delay: 0.4s; }
.star-5 { animation-name: pulse5; animation-delay: 0.5s; }
.star-6 { animation-name: pulse6; animation-delay: 0.6s; }
.star-7 { animation-name: pulse7; animation-delay: 0.7s; }
.star-8 { animation-name: pulse8; animation-delay: 0.8s; }
.star-9 { animation-name: pulse9; animation-delay: 0.9s; }
.star-10 { animation-name: pulse10; animation-delay: 1s; }
.star-11 { animation-name: pulse11; animation-delay: 1.1s; }
.star-12 { animation-name: pulse12; animation-delay: 1.2s; }
.star-13 { animation-name: pulse13; animation-delay: 1.3s; }
.star-14 { animation-name: pulse14; animation-delay: 1.4s; }
.star-15 { animation-name: pulse15; animation-delay: 1.5s; }
.star-16 { animation-name: pulse16; animation-delay: 1.6s; }

@keyframes pulse1 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes pulse2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes pulse3 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes pulse4 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes pulse5 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes pulse6 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pulse7 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes pulse8 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes pulse9 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
@keyframes pulse10 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes pulse11 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes pulse12 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes pulse13 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.17); } }
@keyframes pulse14 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.11); } }
@keyframes pulse15 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.19); } }
@keyframes pulse16 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* 要素を一瞬大きくした後、元のサイズに戻す「にゅっと」した動き */
.pop-animetion-01 {
  animation: popEffect 0.5s ease-out;
}

@keyframes popEffect {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.delay-animation-01 {
	animation: delayEffect 0.5s ease-out;
}
@keyframes delayEffect {
  0% {
    /* transform: scale(0.8); */
		opacity: 0;
  }
  /* 50% {
    transform: scale(1.1);
  } */
  100% {
    /* transform: scale(1); */
		opacity: 1;
  }
}

.js-animate-pop-item {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.js-animate-pop-item.is-visible {
  opacity: 1;
  transform: scale(1);
}