@charset "UTF-8";

:root {
	--animate-duration: 1s;
	--animate-delay: 0.1s;
	--animate-repeat: 1;
}

/* 花とリタの動き */

@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.bounceIn {
	animation: bounceIn calc(var(--animate-duration) * 0.75) forwards;
}

.bounceIn.delay-2s {
	animation: bounceIn calc(var(--animate-duration) * 0.75) forwards;
	animation-delay: calc(var(--animate-delay) * 2);
}

.bounceIn.delay-5s {
	animation: bounceIn calc(var(--animate-duration) * 0.75) forwards;
	animation-delay: calc(var(--animate-delay) * 5);
}

/* 鳥の動き */

@keyframes birdFly1 {
	0% {
		opacity: 1;
		transform: translate(300px, -5px);
	}

  25% {
    transform: translate(225px, 0px);
  }

  50% {
    opacity: 1;
    transform: translate(150px, 10px);
  }

  75% {
    opacity: 1;
    transform: translate(75px, 5px);
  }

	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

.birdFly1 {
  animation: birdFly1 1s linear forwards;
}

@keyframes birdFly2 {
	0% {
		opacity: 1;
		transform: translate(300px, 5px) rotate(-170deg);
	}

  25% {
    transform: translate(225px, 0px) rotate(-170deg);
  }

  50% {
    opacity: 1;
    transform: translate(150px, -10px) rotate(-170deg);
  }

  75% {
    opacity: 1;
    transform: translate(75px, -5px) rotate(-170deg);
  }

	to {
		opacity: 1;
		transform: translate(0, 0) rotate(-170deg);
	}
}

.birdFly2 {
  animation: birdFly2 1s linear forwards;
}

@keyframes birdFly3 {
	0% {
		opacity: 1;
		transform: translate(300px, 10px) rotate(0deg);
	}

  25% {
    transform: translate(225px, 5px) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translate(150px, 0px) rotate(0deg);
  }

  75% {
    opacity: 1;
    transform: translate(75px, 5px) rotate(0deg);
  }

	to {
		opacity: 1;
		transform: rotate(-10deg) translate(0, 0);
	}
}

.birdFly3 {
  animation: birdFly3 1s linear forwards;
}

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.bounce.delay-10s {
  animation: bounce calc(var(--animate-duration) * 1) forwards;
  animation-delay: calc(var(--animate-delay) * 10);
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}