/*跳ねてフェードイン*/
.bounce-in {
    opacity: 0;
    /* 初期状態では非表示 */
    transition: opacity 0.6s ease, transform 0.6s ease;
    /* アニメーションをスムーズにするためのトランジション */
}

.bounce-in.active {
    animation: bounceIn 1s ease forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        /* アニメーション終了時の状態を確実にする */
    }
}

/*跳ねるアニメーション*/
.bounce.active {
    animation: bounce 0.5s ease-in-out;
    /*跳ねて落ちてくるまでの時間*/
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-35px);
        /*高さを指定*/
    }
}

/*フェードイン*/
.fade-in-up,
.fade-in-up-delay {
    opacity: 0;
    /* 初期状態では非表示 */
    transition: opacity 0.6s ease, transform 0.6s ease;
    /* アニメーションをスムーズにするためのトランジション */
}

.fade-in-up.active,
.fade-in-up-delay.active {
    animation: fadeInUp 0.7s ease forwards;
}

@keyframes fadeInUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/*右スライドイン*/
.slide-in-right,
.slide-in-right-delay {
    opacity: 0;
    /* 初期状態では非表示 */
    transform: translateX(80px);
    /* 右側に配置 */
    transition: opacity 0.7s ease, transform 0.7s ease;
    /* アニメーションをスムーズにするためのトランジション */
}

.slide-in-right.active,
.slide-in-right-delay.active {
    animation: slideInRight 1s ease forwards;
}

@keyframes slideInRight {
    0% {
        transform: translateX(80px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*左スライドイン*/
.slide-in-left,
.slide-in-left-delay {
    opacity: 0;
    /* 初期状態では非表示 */
    transform: translateX(-80px);
    /* 左側に配置 */
    transition: opacity 0.7s ease, transform 0.7s ease;
    /* アニメーションをスムーズにするためのトランジション */
}

.slide-in-left.active,
.slide-in-left-delay.active {
    animation: slideInLeft 1s ease forwards;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-80px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*上昇アニメーション*/
.rise {
    transition: transform 0.5s ease-in-out;
    /* 初期位置に戻るトランジションの設定 */
}

.rise.active {
    animation: riseAmination 0.5s ease-in-out forwards;
    /*跳ねて落ちてくるまでの時間*/
}

@keyframes riseAmination {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-30px);
        /*高さを指定*/
    }
}

/*右スライドアニメーション*/
.slide-right {
    transition: transform 0.5s ease-in-out;
    /* 初期位置に戻るトランジションの設定 */
}

.slide-right.active {
    animation: slideRightAnimation 0.5s ease-in-out forwards;
}

@keyframes slideRightAnimation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(30px);
        /*スライドを指定*/
    }
}

.shake {
    transition: transform 0.3s ease-in-out;
    /* 初期位置に戻るトランジションの設定 */
}

.shake.active {
    animation: shakeAnimation 0.3s ease-in-out forwards;
}

/*シェイクアニメーション*/
@keyframes shakeAnimation {

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

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }
}