@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);
	animation-delay: calc(random() * 1s);
}

.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;
}

@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);
	}
}

/* 要素を一瞬大きくした後、元のサイズに戻す「にゅっと」した動き */
.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);
}