@charset "UTF-8";

/*紙吹雪のスタイル*/
.confetti {
  position: absolute;
  width: 100%;
  height: 100%;
}

.confetti span {
  position: absolute;
  top: -100%;		/*アニメーション以外の紙吹雪を非表示*/
  left: 0;
}

/*アニメーションの記述*/
.confetti span:nth-child(2n + 1) {			/*1,3,5,7*/
  animation: confetti1 5s 0s linear infinite;
  animation: confetti3 5s 0s linear infinite;
}

.confetti span:nth-child(2n + 2) {			/*2,4,6,8*/
  animation: confetti2 5s 0s linear infinite;
  animation: confetti4 5s 0s linear infinite;
}

/*紙吹雪を回転させる記述*/
@keyframes confetti1 {
  0% {
    top: -5%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }
  10% {
    top: 10%;
    transform: translateX(2px) rotateX(30deg) rotateY(180deg);
  }
  20% {
    top: 20%;
    transform: translateX(6px) rotateX(60deg) rotateY(360deg);
  }
  30% {
    top: 30%;
    transform: translateX(10px) rotateX(90deg) rotateY(0deg);
  }
  40% {
    top: 40%;
    transform: translateX(14px) rotateX(120deg) rotateY(180deg);
  }
  50% {
    top: 50%;
    transform: translateX(20px) rotateX(150deg) rotateY(360deg);
  }
  60% {
    top: 60%;
    transform: translateX(26px) rotateX(210deg) rotateY(0deg);
  }
  70% {
    top: 70%;
    transform: translateX(32px) rotateX(270deg) rotateY(180deg);
  }
  80% {
    top: 80%;
    transform: translateX(38px) rotateX(320deg) rotateY(270deg);
  }
  90% {
    top: 90%;
    transform: translateX(46px) rotateX(360deg) rotateY(360deg);
  }
  100% {
    top: 100%;
    transform: translateX(54px) rotateX(90deg) rotateY(90deg);
}
}

	@keyframes confetti2 {
  	0% {
    		top: -5%;
    		transform: translateX(0) rotateX(0) rotateY(0);
  	}

  	100% {
    		top: 100%;
    		transform: translateX(-20vw) rotateX(180deg) rotateY(360deg);
  	}
	}

@keyframes confetti3 {
  0% {
    top: -5%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }
  10% {
    top: 10%;
    transform: translateX(8px) rotateX(20deg) rotateY(80deg);
  }
  20% {
    top: 20%;
    transform: translateX(16px) rotateX(40deg) rotateY(160deg);
  }
  30% {
    top: 30%;
    transform: translateX(24px) rotateX(60deg) rotateY(240deg);
  }
  40% {
    top: 40%;
    transform: translateX(16px) rotateX(80deg) rotateY(320deg);
  }
  50% {
    top: 50%;
    transform: translateX(12px) rotateX(100deg) rotateY(360deg);
  }
  60% {
    top: 60%;
    transform: translateX(8px) rotateX(140deg) rotateY(0deg);
  }
  70% {
    top: 70%;
    transform: translateX(4px) rotateX(180deg) rotateY(80deg);
  }
  80% {
    top: 80%;
    transform: translateX(0px) rotateX(200deg) rotateY(160deg);
  }
  90% {
    top: 90%;
    transform: translateX(-4px) rotateX(210deg) rotateY(320deg);
  }
  100% {
    top: 100%;
    transform: translateX(-8px) rotateX(220deg) rotateY(360deg);
}
}

@keyframes confetti4 {
  0% {
    top: -5%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }
  10% {
    top: 10%;
    transform: translateX(4px) rotateX(20deg) rotateY(90deg);
  }
  20% {
    top: 20%;
    transform: translateX(8px) rotateX(60deg) rotateY(180deg);
  }
  30% {
    top: 30%;
    transform: translateX(12px) rotateX(120deg) rotateY(270deg);
  }
  40% {
    top: 40%;
    transform: translateX(8px) rotateX(180deg) rotateY(360deg);
  }
  50% {
    top: 50%;
    transform: translateX(4px) rotateX(270deg) rotateY(0deg);
  }
  60% {
    top: 60%;
    transform: translateX(0px) rotateX(360deg) rotateY(180deg);
  }
  70% {
    top: 70%;
    transform: translateX(-4px) rotateX(0deg) rotateY(360deg);
  }
  80% {
    top: 80%;
    transform: translateX(-8px) rotateX(90deg) rotateY(0deg);
  }
  90% {
    top: 90%;
    transform: translateX(-4px) rotateX(180deg) rotateY(90deg);
  }
  100% {
    top: 100%;
    transform: translateX(0px) rotateX(270deg) rotateY(180deg);
}
}


/*紙吹雪の配置*/
.confetti span:nth-child(1) {
  left: 0%;
}

.confetti span:nth-child(2) {
  left: 5%;
}

.confetti span:nth-child(3) {
  left: 10%;
}

.confetti span:nth-child(4) {
  left: 15%;
}

.confetti span:nth-child(5) {
  left: 20%;
}

.confetti span:nth-child(6) {
  left: 25%;
}

.confetti span:nth-child(7) {
  left: 30%;
}

.confetti span:nth-child(8) {
  left: 35%;
}

.confetti span:nth-child(9) {
  left: 40%;
}

.confetti span:nth-child(10) {
  left: 45%;
}

.confetti span:nth-child(11) {
  left: 50%;
}
.confetti span:nth-child(12) {
  left: 55%;
}

.confetti span:nth-child(13) {
  left: 60%;
}

.confetti span:nth-child(14) {
  left: 65%;
}

.confetti span:nth-child(15) {
  left: 70%;
}

.confetti span:nth-child(16) {
  left: 75%;
}
.confetti span:nth-child(17) {
  left: 80%;
}
.confetti span:nth-child(18) {
  left: 85%;
}
.confetti span:nth-child(19) {
  left: 90%;
}
.confetti span:nth-child(20) {
  left: 95%;
}
.confetti span:nth-child(21) {
  left: 100%;
}

/*紙吹雪の大きさ*/

.confetti span:nth-child(3n + 1) {	/*1,4,7,10,13*/
  width: 1vw;		/*1.5*/
  height: 1vw;
}

.confetti span:nth-child(3n + 2) {		/*2,5,8,11,14*/
  width: 0.7vw;
  height: 0.7vw;
  /*width: 1vw;*/
  /*height: 1vw;*/

}

.confetti span:nth-child(3n + 3) {		/*3,6,9,12,15*/
  width: 1vw;
  height: 1w;
  /*width: 0.5vw;*/
  /*height: 0.5w;*/

}
.confetti span:nth-child(3n + 4) {		/*4,7,10*/
  width: 0.8vw;
  height: 0.8w;
}

.confetti span:nth-child(3n + 5) {		/*5,8,11,14*/
  width: 0.6vw;
  height: 0.6w;
}

/*紙吹雪の色*/
.confetti span:nth-child(2n + 1) {	/*1,3,5,7,9,11,*/
  background: aqua;
}
.confetti span:nth-child(2n + 2) {		/*2,4,6,8,10*/
  background: orange;
}
.confetti span:nth-child(2n + 3) {		/*3,5,7,9,11,*/
  background: purple;
}
.confetti span:nth-child(2n + 4) {
  background: red;
}
.confetti span:nth-child(2n + 5) {
  background: blue;
}
.confetti span:nth-child(2n + 6) {
  background: green;
}
.confetti span:nth-child(2n + 7) {
  background: pink;
}
.confetti span:nth-child(2n + 8) {
  background: orange;
}
.confetti span:nth-child(2n + 9) {
  background: fuchsia;
}
.confetti span:nth-child(2n + 10) {
  background: lime;
}
.confetti span:nth-child(2n + 11) {
  background: olive;
}
.confetti span:nth-child(2n + 12) {
  background: red;
}
.confetti span:nth-child(2n + 13) {
  background: aqua;
}
.confetti span:nth-child(2n + 14) {
  background: orange;
}
.confetti span:nth-child(2n + 15) {
  background: green;
}
.confetti span:nth-child(2n + 16) {
  background: fuchsia;
}
.confetti span:nth-child(2n + 17) {
  background: lime;
}
.confetti span:nth-child(2n + 18) {
  background: orange;
}
.confetti span:nth-child(2n + 19) {
  background: blue;
}
.confetti span:nth-child(2n + 20) {
  background: red;
}
.confetti span:nth-child(2n + 21) {
  background: yellow;
}


/*アニメーションの秒数*/
.confetti span:nth-child(2n + 1) {		/*1,3,5,7,9,11,*/
  animation-duration: 5s;
}

.confetti span:nth-child(2n + 2) {		/*2,4,6,8,10*/
  animation-duration: 6s;
}

.confetti span:nth-child(2n + 3) {
  animation-duration: 8s;
}

.confetti span:nth-child(2n + 4) {
  animation-duration: 4s;
}


/*紙吹雪が降り始めるまでの時間*/
.confetti span:nth-child(2n + 1) {
  animation-delay: 3s;
}

.confetti span:nth-child(2n + 2) {
  animation-delay: 8s;
}

.confetti span:nth-child(2n + 3) {
  animation-delay: 2s;
}

.confetti span:nth-child(2n + 4) {
  animation-delay: 7s;
}

.confetti span:nth-child(2n + 5) {
  animation-delay: 5s;
}

.confetti span:nth-child(2n + 6) {
  animation-delay: 12s;
}

.confetti span:nth-child(2n + 7) {
  animation-delay: 1s;
}

.confetti span:nth-child(2n + 8) {
  animation-delay: 7s;
}

.confetti span:nth-child(2n + 9) {
  animation-delay: 4s;
}

.confetti span:nth-child(2n + 10) {		/*10,12,14,16*/
  animation-delay: 10s;
}

.confetti span:nth-child(2n + 11) {		/*11,13,15,17*/
  animation-delay: 5s;
}
.confetti span:nth-child(2n + 12) {
  animation-delay: 7s;
}

.confetti span:nth-child(2n + 13) {
  animation-delay: 1s;
}

.confetti span:nth-child(2n + 14) {
  animation-delay: 9s;
}

.confetti span:nth-child(2n + 15) {
  animation-delay: 2s;
}
.confetti span:nth-child(2n + 16) {
  animation-delay: 12s;
}

.confetti span:nth-child(2n + 17) {
  animation-delay: 4s;
}

.confetti span:nth-child(2n + 18) {
  animation-delay: 10s;
}

.confetti span:nth-child(2n + 19) {
  animation-delay: 1s;
}

.confetti span:nth-child(2n + 20) {
  animation-delay: 7s;
}

.confetti span:nth-child(2n + 21) {		/*11,13,15,17*/
  animation-delay: 5s;
}