/* バレンタイン ハートアニメーション */
.heart-container, .kira-container {
    position: relative;
    animation: fade 15s linear forwards;
    z-index: 2;
}
@keyframes fade {
    0% {
        opacity: 1;
        visibility: visible;
    }
    90% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.heart {
    opacity: 0;
    position: absolute;
    top: -10px;
    width: 30px;
    height: 30px;
    background-image: url('../images/free/animation/heart.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
    animation: fall-rotate 7s linear infinite backwards;
}
.heart2 {
    opacity: 0;
    position: absolute;
    top: -10px;
    width: 30px;
    height: 30px;
    background-image: url('../images/free/animation/heart2.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
    animation: fall-rotate 7s linear infinite backwards;
}
.kira {
    position: absolute;
    top: 20px;
    width: 20px;
    height: 20px;
    background-image: url('../images/free/animation/kira.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
    animation: kira-fade 5s linear infinite;
}

@keyframes fall-rotate {
    0% {
        transform: translateY(18vh) rotate(0deg) scale(1);
        opacity: 0;
    }

    10% {
        transform: translateY(24vh) rotate(300deg) scale(1);
        opacity: 0.8;
    }

    40% {
        transform: translateY(50vh) rotate(900deg) scale(1);
        opacity: 0.8;
    }

    80% {
        transform: translateY(80vh) rotate(1800deg) scale(1);
        opacity: 0.8;
    }

    85% {
        opacity: 0;
    }

    100% {
        transform: translateY(100vh) rotate(2100deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes fall-rotate-fade {
    0% {
        transform: translateY(10vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        transform: translateY(20vh) rotate(300deg);
        opacity: 0.8;
    }

    40% {
        transform: translateY(50vh) rotate(900deg) scale(0.7);
        opacity: 0.8;
    }

    45% {
        opacity: 0;
    }

    100% {
        transform: translateY(70vh) rotate(2100deg) scale(0.7);
        opacity: 0;
    }
}


@keyframes kira-fade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
    15% {
        transform: translateY(10px) rotate(45deg) scale(1.2);
        opacity: 1;
    }

    18% {
        opacity: 0;
    }
    
    45% {
        opacity: 0;
    }
    50% {
        transform: translateY(15px) rotate(90deg) scale(1);
        opacity: 1;
    }
    67% {
        transform: translateY(20px) rotate(135deg) scale(1.2);
        opacity: 1;
    }
    72% {
        transform: translateY(25px) rotate(150deg);
        opacity: 0;
    }

    100% {
        transform: rotate(180deg);
        opacity: 0;
    }
}

@keyframes kira-fade2 {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }
    27% {
        transform: translateY(10px) rotate(45deg) scale(1.2);
        opacity: 1;
    }

    30% {
        opacity: 0;
    }
    
    55% {
        opacity: 0;
    }
    60% {
        transform: translateY(15px) rotate(90deg) scale(1);
        opacity: 1;
    }
    77% {
        transform: translateY(20px) rotate(135deg) scale(1.2);
        opacity: 1;
    }
    82% {
        transform: translateY(25px) rotate(150deg);
        opacity: 0;
    }

    100% {
        transform: rotate(180deg);
        opacity: 0;
    }
}

/* 各ハート・キラキラに異なる位置と速度を設定 */
.heart:nth-child(1) {
    left: 8%;
    animation-duration: 10.1s;
}

.heart2:nth-child(2) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 20%;
    animation-duration: 8.7s;
    width: 12px;
    height: 12px;
    animation-delay: 4s;
}

.heart:nth-child(3) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 30%;
    animation-duration: 8.2s;
    width: 17px;
    height: 17px;
    animation-delay: 2s;
}


.heart:nth-child(4) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 58%;
    animation-duration: 9s;
    width: 15px;
    height: 15px;
    animation-delay: 1s;
}

.heart2:nth-child(5) {
    left: 69%;
    animation-duration: 8.6s;
}

.heart:nth-child(6) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 80%;
    animation-duration: 11.8s;
    width: 20px;
    height: 20px;
    animation-delay: 3.3s;
}

.heart2:nth-child(7) {
    left: 88%;
    animation-duration: 9s;
    width: 14px;
    height: 14px;
    animation-delay: 3.5s;
}

.heart:nth-child(8) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 87%;
    animation-duration: 9.1s;
}

.heart2:nth-child(9) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 5%;
    animation-duration: 7.6s;
    width: 17px;
    height: 17px;
}

.heart:nth-child(10) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 73%;
    animation-duration: 8.7s;
    width: 20px;
    height: 20px;
    animation-delay: 1.3s;
}

.heart2:nth-child(11) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 60%;
    animation-duration: 9.3s;
    width: 15px;
    height: 15px;
    animation-delay: 2.5s;
}

.heart2:nth-child(12) {
    animation: fall-rotate-fade 7s linear infinite backwards;
    left: 20%;
    animation-duration: 10.3s;
}

.heart:nth-child(13) {
    left: 23%;
    animation-duration: 7.4s;
    width: 25px;
    height: 25px;
    animation-delay: 4.4s;
}

.heart:nth-child(14) {
    left: 28%;
    animation-duration: 6.7s;
    width: 15px;
    height: 15px;
}

.kira:nth-child(1) {
    top: 40vh;
    left: 8%;
}
.kira:nth-child(2) {
    top: 36vh;
    left: 13%;
    animation-duration: 5.3s;
    width: 30px;
    height: 30px;
}
.kira:nth-child(3) {
    animation: kira-fade2 5s linear infinite;
    top: 18vh;
    left: 20%;
    animation-duration: 3s;
}
.kira:nth-child(4) {
    top: 21vh;
    left: 28%;
    animation-duration: 6s;
    width: 14px;
    height: 14px;
}
.kira:nth-child(5) {
    animation: kira-fade2 5s linear infinite;
    top: 24vh;
    left: 32%;
    animation-duration: 4.7s;
    width: 10px;
    height: 10px;
}
.kira:nth-child(6) {
    top: 23vh;
    left: 66%;
    animation-duration: 4.7s;
    width: 10px;
    height: 10px;
}
.kira:nth-child(7) {
    animation: kira-fade2 5s linear infinite;
    top: 25vh;
    left: 70%;
    animation-duration: 3s;
    width: 17px;
    height: 17px;
}
.kira:nth-child(8) {
    animation: kira-fade2 5s linear infinite;
    top: 10vh;
    left: 70%;
    animation-duration: 5.7s;
}
.kira:nth-child(9) {
    top: 12vh;
    left: 74%;
    animation-duration: 4.2s;
    width: 10px;
    height: 10px;
}
.kira:nth-child(10) {
    top: 44vh;
    left: 80%;
    animation-duration: 3.6s;
    width: 30px;
    height: 30px;
}
.kira:nth-child(11) {
    animation: kira-fade2 5s linear infinite;
    top: 48vh;
    left: 86%;
}
.kira:nth-child(12) {
    top: 20vh;
    left: 86%;
}
.kira:nth-child(13) {
    animation: kira-fade2 5s linear infinite;
    top: 68vh;
    left: 60%;
    width: 10px;
    height: 10px;
}
.kira:nth-child(14) {
    top: 72vh;
    left: 64%;
    animation-duration: 5.3s;
}
.kira:nth-child(15) {
    top: 65vh;
    left: 20%;
    width: 10px;
    height: 10px;
}
.kira:nth-child(16) {
    animation: kira-fade2 5s linear infinite;
    top: 68vh;
    left: 13%;
    animation-duration: 5.3s;
}