/* 初期状態（非表示 + アニメーション前） */
.hidden-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.hidden-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}


.hidden-top {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.hidden-fuwa {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hidden-bound {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* -----表示されてから */
.visible-left {
    opacity: 1;
    transform: translateX(0);
}

.visible-right {
    opacity: 1;
    transform: translateX(0);
}

.visible-top {
    opacity: 1;
    transform: translateY(0);
}


.visible-fuwa {
    opacity: 1;
    transform: scale(1);
}

/* バウンドアニメーション */
.visible-bound {
    opacity: 1;
    transform: translateY(0);
    animation: bounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* バウンドのキーフレーム */
@keyframes bounce {
    0% {
        transform: translateY(30px);
    }

    20% {
        transform: translateY(-15px);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(-5px);
    }

    80% {
        transform: translateY(3px);
    }

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