#snow_particlesjs {
    position: relative;
    overflow: hidden;
}


/* ===== 落ち葉のスタイル ===== */


/* 落ち葉の共通スタイル */

.leaf {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    animation: animate-leaf 20s linear infinite;
    display: inline-block;
}

@media screen and (max-width: 1300px) {
    .leaf {
        animation: animate-leaf 45s linear infinite;
    }
}


/* 落ち葉1 */

.leaf-1 {
    background-image: url('../img/snow01.png');
    opacity: 0.3;
    /* 任意のパスを記入 */
}


/* 落ち葉2 */

.leaf-2 {
    background-image: url('../img/snow02.png');
    opacity: 0.3;
    /* 任意のパスを記入 */
}


/* 落ち葉3 */

.leaf-3 {
    background-image: url('../img/snow03.png');
    opacity: 0.3;
    /* 任意のパスを記入 */
}

.leaf-4 {
    background-image: url('../img/snow01.png');
    opacity: 0.3;
    /* 任意のパスを記入 */
}


/* 落ち葉2 */

.leaf-5 {
    background-image: url('../img/snow02.png');
    opacity: 0.3;
    /* 任意のパスを記入 */
}


/* 落ち葉3 */

.leaf-6 {
    background-image: url('../img/snow03.png');
    opacity: 0.3;
    /* 任意のパスを記入 */
}


/* ===== 落ち葉が降るアニメーション ===== */

@keyframes animate-leaf {
    0% {
        opacity: 0;
        top: 0;
        transform: rotate(0);
    }
    8% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 100%;
        transform: rotate(1080deg);
    }
}