/* sakura.css */
#sakura-container {
    position: fixed;   /* 画面に対して固定 */
    top: 0;
    left: 0;
    width: 100vw;      /* 画面幅いっぱい */
    height: 100vh;     /* 画面の高さいっぱい */
    pointer-events: none; /* 下にあるバナーなどをクリックできるようにします */
    z-index: 9999;     /* 最前面に表示 */
    overflow: hidden;
}

.sakura-petal {
    position: absolute;
    /* ★相対パスで指定。サーバーの自動変換が効きやすい形式です */
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u38919370/pc/2603/lp_sale/common/css/../../img/sakura1.png); 
    background-size: contain;
    background-repeat: no-repeat;
    top: -10%;         /* 画面の外（上）からスタート */
    will-change: transform;
    /* JSから受け取った数値で実行されるアニメーション名 */
    animation-name: sakura-fall, sakura-sway, sakura-rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* 落下アニメーション */
@keyframes sakura-fall {
    0% { top: -10%; }
    100% { top: 110%; }
}

/* 揺れアニメーション */
@keyframes sakura-sway {
    0%, 100% { margin-left: 0; }
    50% { margin-left: 50px; }
}

/* 立体回転アニメーション */
@keyframes sakura-rotate {
    0% { transform: rotate3d(1, 1, 1, 0deg); }
    100% { transform: rotate3d(1, 1, 1, 360deg); }
}