/* body {
  margin: 0;
  overflow: hidden;
  background-color: #fff4e6;
  height: 100vh;
} */
.konpeito-shower {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

/* 金平糖の見た目（星形・トゲトゲの作成） */
.konpeito {
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -30px;
  /* ★追加：アニメーションが始まる前の待機位置を画面外にする */
  background-color: #ff83a8;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
      79% 91%, 50% 70%, 21% 91%, 32% 57%,
      2% 35%, 39% 35%);
  animation: rise linear infinite;
  animation-fill-mode: backwards;
  /* ★追加：アニメーション開始前は0%のスタイル（画面外）を維持する */
}

/* --- 下から上に浮かび、天井で跳ねるアニメーション --- */
@keyframes rise {
  0% {
    bottom: -30px;
    /* 画面外の下からスタート */
    transform: rotate(0deg) scale(1);
    animation-timing-function: ease-in;
    /* 最初は加速しながら浮き上がる */
  }

  /* 85%の時点で一番上（天井）に到達 */
  85% {
    bottom: calc(100% - 20px);
    /* 一番上（要素の高さ分マイナス） */
    transform: rotate(300deg) scale(1.3, 0.7);
    /* 横に「ぷにっ」と潰れる */
    animation-timing-function: ease-out;
    /* ここから減速して跳ね返る */
  }

  /* 92%の時点で少し下に跳ね返る（ぽよよんの頂点） */
  92% {
    bottom: calc(100% - 50%);
    /* 少し下に押し戻される */
    transform: rotate(330deg) scale(0.9, 1.1);
    /* 縦に少し伸びる */
    animation-timing-function: ease-in;
    /* 再び上に向かう */
  }

  /* 100%でもう一度天井にぶつかって安定する */
  100% {
    bottom: calc(100% - 20px);
    /* 再び一番上 */
    transform: rotate(360deg) scale(1);
    /* 元のサイズに戻る */
    opacity: 0.6;
    /* 自然に消えていく */
  }
}

/* --- パラパラ浮き上がるタイミングや位置の調整（ゆっくりめ） --- */
.konpeito:nth-child(1) {
  left: 10%;
  animation-duration: 4s;
  animation-delay: 0s;
  background-color: #fff9a6;
}

.konpeito:nth-child(2) {
  left: 30%;
  animation-duration: 6s;
  animation-delay: 1.5s;
  background-color: #fff9a6;
}

.konpeito:nth-child(3) {
  left: 55%;
  animation-duration: 5s;
  animation-delay: 0.5s;
  background-color: #b2e2ff;
}

.konpeito:nth-child(4) {
  left: 80%;
  animation-duration: 7s;
  animation-delay: 2s;
  background-color: #fff9a6;
}

.konpeito:nth-child(5) {
  left: 25%;
  animation-duration: 4.5s;
  animation-delay: 1s;
}

.konpeito:nth-child(6) {
  left: 70%;
  animation-duration: 5.5s;
  animation-delay: 2.5s;
  background-color: #d1bbf9;
}

.konpeito:nth-child(7) {
  left: 40%;
  animation-duration: 6.5s;
  animation-delay: 3s;
  background-color: #ffbfa3;
}

.konpeito:nth-child(8) {
  left: 90%;
  animation-duration: 3.8s;
  animation-delay: 0.8s;
}


/* タイトルボヨン */
.title {

}

@keyframes boyon {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

/* スライドアップ */

@keyframes slide_up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロールで画面の下からふわっと */
/* アニメーションの定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 要素への適用 */
.fade-in-box {
  animation: fadeIn linear forwards;
  /* 画面内に要素が入ったタイミングをトリガーにする */
  animation-timeline: view();
  /* 画面に入り始めてから出るまでのどの範囲で動かすかを指定 */
  animation-range: entry 0% cover 40%;
}

/* ボヨヨンｘ１ */
@keyframes jello_h {
	0% {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, 0.95, 1);
	}

	100% {
		transform: scale3d(1, 1, 1);
	}
}