body{
    background-image:url("image/bgk003-5.png");
    background-color:#87cefa;
    margin:0;
}

/* 桜レイヤー */
#sakura-area{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
}

.button-area{
    text-align:center;
    margin-top:20px;
}

button{
    padding:10px 20px;
    font-size:16px;
    background-color:#ff99cc;
    border:none;
    border-radius:10px;
    cursor:pointer;
}

button:hover{
    background-color:#ff66aa;
}

/* 外側（縦落下＋横移動） */
.sakura-wrapper{
    position:absolute;
    top:-20px;
    animation: fall linear forwards;
}

/* 内側（回転＋ゆらぎ） */
.sakura{
    display:inline-block;
    color:pink;
    animation: sway 3s ease-in-out infinite alternate,
               spin 6s linear infinite;
}

/* 下へ落ちる＋横に流れる */
@keyframes fall{
    to{
        transform: translateY(110vh) translateX(150px);
    }
}

/* 風でゆらゆら */
@keyframes sway{
    from{ transform: translateX(-30px); }
    to{ transform: translateX(30px); }
}

/* 回転 */
@keyframes spin{
    to{ transform: rotate(360deg); }
}

.marquee-container {
  width: 320px;
  overflow: hidden; /* はみ出た文字を隠す */
  white-space: nowrap; /* 改行しない */
}

.marquee-text {
  display: inline-block;
  padding-left: 100%; /* 開始位置を右端に */
  animation: scroll-left 10s linear infinite; /* 10秒かけて左へループ */
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}