/* 花びらエフェクト用CSS */
.flower-petal {
  position: fixed;
  top: -80px;
  color: #ffd6e8;
  user-select: none;
  pointer-events: none;
  z-index: 999;
  font-size: 1.2em;
  animation-name: petal-fall;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  text-shadow: 0 0 4px rgba(255, 182, 193, 0.4);
  filter: opacity(0.7) brightness(1.2); /* 花びらを少し淡くする */
}

@keyframes petal-fall {
  0% {
    transform: translateY(-150px) rotate(var(--petal-rotate-start, -150deg)) translateX(0px); /* より上から開始 */
    opacity: 0; /* 完全に透明から開始 */
  }
  5% {
    opacity: 0.3; /* 徐々にフェードイン */
  }
  25% {
    transform: translateY(25vh) rotate(-80deg) translateX(10px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) rotate(0deg) translateX(-5px);
    opacity: 0.6;
  }
  75% {
    transform: translateY(75vh) rotate(80deg) translateX(8px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(100vh) rotate(var(--petal-rotate-end, 150deg)) translateX(0px);
    opacity: 0;
  }
}

/* 異なるサイズ、速度、色のバリエーション */
.flower-petal:nth-child(1) {
  left: 8%;
  animation-duration: 12s;
  font-size: 1.0em;
  color: #ffb6c1;
}
.flower-petal:nth-child(2) {
  left: 18%;
  animation-duration: 15s;
  font-size: 1.4em;
  color: #ffc0cb;
  animation-delay: -2s;
}
.flower-petal:nth-child(3) {
  left: 28%;
  animation-duration: 11s;
  font-size: 1.1em;
  color: #ffe4e6;
  animation-delay: -4s;
}
.flower-petal:nth-child(4) {
  left: 38%;
  animation-duration: 16s;
  font-size: 1.3em;
  color: #ffd1dc;
  animation-delay: -1s;
}
.flower-petal:nth-child(5) {
  left: 48%;
  animation-duration: 10s;
  font-size: 0.9em;
  color: #ffb3d9;
  animation-delay: -3s;
}
.flower-petal:nth-child(6) {
  left: 58%;
  animation-duration: 14s;
  font-size: 1.5em;
  color: #ffc9e0;
  animation-delay: -5s;
}
.flower-petal:nth-child(7) {
  left: 68%;
  animation-duration: 13s;
  font-size: 1.2em;
  color: #ffe0ec;
  animation-delay: -2.5s;
}
.flower-petal:nth-child(8) {
  left: 78%;
  animation-duration: 17s;
  font-size: 1.0em;
  color: #ffb6d9;
  animation-delay: -4.5s;
}
.flower-petal:nth-child(9) {
  left: 88%;
  animation-duration: 9s;
  font-size: 1.1em;
  color: #ffd6f0;
  animation-delay: -1.5s;
}
.flower-petal:nth-child(10) {
  left: 3%;
  animation-duration: 18s;
  font-size: 1.6em;
  color: #ffcce5;
  animation-delay: -6s;
}
.flower-petal:nth-child(11) {
  left: 13%;
  animation-duration: 11s;
  font-size: 0.8em;
  color: #ffe6f2;
  animation-delay: -7s;
}
.flower-petal:nth-child(12) {
  left: 23%;
  animation-duration: 15s;
  font-size: 1.3em;
  color: #ffb3cc;
  animation-delay: -8s;
}
.flower-petal:nth-child(13) {
  left: 33%;
  animation-duration: 12s;
  font-size: 1.0em;
  color: #ffd9eb;
  animation-delay: -3.5s;
}
.flower-petal:nth-child(14) {
  left: 43%;
  animation-duration: 16s;
  font-size: 1.4em;
  color: #ffccdd;
  animation-delay: -4.8s;
}
.flower-petal:nth-child(15) {
  left: 53%;
  animation-duration: 10s;
  font-size: 0.9em;
  color: #ffeef5;
  animation-delay: -2.2s;
}