/* 初期状態 */
.js-slideUp {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.js-slideDown {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.js-slideLeft {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.js-slideRight {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* 表示状態：方向ごとに上書き */
.js-slideUp.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-slideDown.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-slideLeft.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.js-slideRight.is-visible {
    opacity: 1;
    transform: translateX(0);
}