.sakura-container {
    position: fixed;
    height: 100vh;
    width: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.sakura {
    position: absolute;
    background: #ffd7e6;
    border-radius: 150% 0 150% 0;
    animation: fall linear infinite, sway ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
}

.sakura::after {
    content: '';
    position: absolute;
    top: -14%;
    left: -10%;
    display: block;
    width: 100%;
    height: 100%;
    background: #ffd7e6;
    border-radius: 150% 0 150% 0;
    transform: rotate(15deg);
}

@keyframes fall {
    0% {
        top: -10%;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes sway {
    0% {
        margin-left: 0;
        transform: rotate(0deg);
    }
    25% {
        margin-left: 50px;
        transform: rotate(45deg);
    }
    50% {
        margin-left: -50px;
        transform: rotate(-30deg);
    }
    75% {
        margin-left: 50px;
        transform: rotate(45deg);
    }
    100% {
        margin-left: 0;
        transform: rotate(0deg);
    }
}

/* 複数の花びらのアニメーション設定 */
.sakura:nth-child(1) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation: fall 12s linear infinite, sway 3s ease-in-out infinite;
    animation-delay: -7s;
}

.sakura:nth-child(2) {
    left: 30%;
    width: 15px;
    height: 15px;
    animation: fall 14s linear infinite, sway 3.5s ease-in-out infinite;
    animation-delay: -3s;
}

.sakura:nth-child(3) {
    left: 50%;
    width: 18px;
    height: 18px;
    animation: fall 11s linear infinite, sway 4s ease-in-out infinite;
    animation-delay: -5s;
}

.sakura:nth-child(4) {
    left: 70%;
    width: 22px;
    height: 22px;
    animation: fall 15s linear infinite, sway 4.5s ease-in-out infinite;
    animation-delay: -1s;
}

.sakura:nth-child(5) {
    left: 20%;
    width: 16px;
    height: 16px;
    animation: fall 13s linear infinite, sway 3.2s ease-in-out infinite;
    animation-delay: -6s;
}

.sakura:nth-child(6) {
    left: 40%;
    width: 19px;
    height: 19px;
    animation: fall 16s linear infinite, sway 3.8s ease-in-out infinite;
    animation-delay: -4s;
}

.sakura:nth-child(7) {
    left: 60%;
    width: 17px;
    height: 17px;
    animation: fall 12s linear infinite, sway 4.2s ease-in-out infinite;
    animation-delay: -2s;
}

.sakura:nth-child(8) {
    left: 80%;
    width: 21px;
    height: 21px;
    animation: fall 14s linear infinite, sway 3.7s ease-in-out infinite;
    animation-delay: -8s;
}

.sakura:nth-child(9) {
    left: 25%;
    width: 18px;
    height: 18px;
    animation: fall 13s linear infinite, sway 4.1s ease-in-out infinite;
    animation-delay: -9s;
}

.sakura:nth-child(10) {
    left: 65%;
    width: 16px;
    height: 16px;
    animation: fall 15s linear infinite, sway 3.4s ease-in-out infinite;
    animation-delay: -5.5s;
}

.sakura-tree-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 215, 230, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.sakura-tree {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 200px;
    animation: tree-sway 5s ease-in-out infinite;
}

.sakura-tree path {
    animation: branch-sway 3s ease-in-out infinite;
}

@keyframes tree-sway {
    0%, 100% {
        transform: translateX(-50%) rotate(0deg);
    }
    50% {
        transform: translateX(-50%) rotate(1deg);
    }
}

@keyframes branch-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(2deg);
    }
}