/*-------------------------------------------------------
	animation
-------------------------------------------------------*/

/* 流れ星 タイトル */
.js-shooting-star {
	opacity: 0;
}

.js-shooting-star.on {
  will-change: transform,animation;
	animation: shootingStar 3s ease-in-out;
  -webkit-animation: shootingStar 3s ease-in-out;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}
 
@keyframes shootingStar {
	0% {opacity: 0;
    transform: translate(-300px, -50px) rotate(0);
  }

  20% {opacity: 0.7;
  }

	100% {opacity: 1;
    transform: translate(0, 0) rotate(1turn);
  }
}

.anime-shooting-star {
  will-change: transform,animation;
	animation: shootingStar 3s ease-in-out;
  -webkit-animation: shootingStar 3s ease-in-out;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}

/* 流れ星 */

.js-shooting-star-disappear {
	opacity: 0;
}

.js-shooting-star-disappear.on {
  will-change: transform,animation;
	animation: shootingStarDisappear 1.5s ease-in-out alternate;
  -webkit-animation: shootingStarDisappear 1.5s ease-in-out alternate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}
 
@keyframes shootingStarDisappear {
	0% {opacity: 0;
    transform: translate(-100px, -50px) rotate(0);
  }

  20% {opacity: 0.5;
  }

	50% {opacity: 1;
  }

  75% {opacity: 0.5;
  }

  100% {opacity: 0;
    transform: translate(300px, 100px) rotate(1turn);
  }
}


/* 星 */
.js-blink {
  opacity: 0;
}

.js-blink.on {
  will-change: transform,animation;
  animation: blinking 4s ease-in-out;
  -webkit-animation: blinking 4s ease-in-out;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}

.anime-blink {
  will-change: transform,animation;
  animation: blinking 4s ease-in-out;
  -webkit-animation: blinking 4s ease-in-out;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}
 
@keyframes blinking {
	0% {opacity: 0.5;
    transform: translate(10px, 10px) rotate(0);
  }
	100% {opacity: 1;
    transform: translate(0, 0) rotate(1turn);
  }
}

.js-poyon {
	opacity: 0;;
  }

.js-poyon.on {
  will-change: transform,animation;
	animation: poyon 1.1s linear 0s 1;
  -webkit-animation: poyon 1.1s linear 0s 1;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
  }
  
  @keyframes poyon {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
	10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
	20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
	30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
	50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}