.cherry-blossom-container {
  position: fixed;
  width: 100%; /* コンテナの横幅 */
  height: 100vh;
  overflow: hidden; 
  /* コンテナからはみ出した要素を隠す */
  z-index: -1;
}
/* 桜の花びらのスタイル */
.petal {
    position: absolute;
    background-color: #ffc0cb40; /* 花びらの色 */
    border-radius: 150%;
    animation: animate-petal 10s linear;
  }
  
  .petal::after {
    content: "";
    position: absolute;
    top: -14%;
    left: -10%;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffc0cb40;
    border-radius: 150%;
    transform: rotate(15deg);
  }
  
  /* 花びらが降るアニメーション */
  @keyframes animate-petal {
    0% {
      top: 0;
      opacity: 0;
      transform: rotate(0deg);
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 100vh;
      transform: rotate(3000deg);
    }
  }


  /* 0.5秒間かけてフェードイン */
  .fadeIn500ms {
      animation-name: fadeIn500ms;
      animation-delay: 500ms;
      animation-duration: 1.5s;
      animation-fill-mode: forwards;
      transform: translateX(-50px);
      opacity: 0;
  }
  @keyframes fadeIn500ms {
      0% {
      }
      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }
  
  /* 1秒間かけてフェードイン */
  .fadeIn1000ms {
      animation-name: fadeIn1000ms;
      animation-delay: 1000ms;
      animation-duration: 1.5s;
      animation-fill-mode: forwards;
      transform: translateX(50px);
      opacity: 0;
  }
  @keyframes fadeIn1000ms {
      0% {
      }
      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }
  
  /* 1.5秒間かけてフェードイン */
  .fadeIn1500ms {
      animation-name: fadeIn1500ms;
      animation-delay: 1500ms;
      animation-duration: 1.5s;
      animation-fill-mode: forwards;
      transform: translateX(-50px);
      opacity: 0;
  }
  @keyframes fadeIn1500ms {
      0% {
      }
      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }
  
  /* 2秒間かけてフェードイン */
  .fadeIn2000ms {
      animation-name: fadeIn2000ms;
      animation-delay: 2000ms;
      animation-duration: 1.5s;
      animation-fill-mode: forwards;
      transform: translateX(50px);
      opacity: 0;
  }
  @keyframes fadeIn2000ms {
      0% {
      }
      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }
  
  /* 2.5秒間かけてフェードイン */
  .fadeIn2500ms {
      animation-name: fadeIn2500ms;
      animation-delay: 2500ms;
      animation-duration: 1.5s;
      animation-fill-mode: forwards;
      transform: translateX(-50px);
      opacity: 0;
  }
  @keyframes fadeIn2500ms {
      0% {
      }
      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }