/* 初期状態（非表示） */
.fade-in, .fade-item {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0s);
    will-change: opacity, transform; /* 事前に最適化 */
}

/* ラッパー自体の初期状態 */
.wrapper-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* ラッパーが可視化されたら、内部の要素も発火 */
.wrapper-fade-in.visible {
    opacity: 1;
}

/* 表示時 */
.fade-in.visible, .fade-item.visible {
    opacity: 1;
    transform: translate(0); /* 変化を適用 */
}

/* 方向指定（data-direction） */
.fade-in[data-direction="left"], .fade-item[data-direction="left"] {
    transform: translateX(-30px);
}
.fade-in[data-direction="right"], .fade-item[data-direction="right"] {
    transform: translateX(30px);
}
.fade-in[data-direction="bottom"], .fade-item[data-direction="bottom"] {
    transform: translateY(30px);
}

/* 🔹 スマホ最適化（移動量を小さく） */
@media (max-width: 480px) {
    .fade-in[data-direction="left"], .fade-item[data-direction="left"] {
        transform: translateX(-15px); /* スマホは移動量を小さく */
    }
    .fade-in[data-direction="right"], .fade-item[data-direction="right"] {
        transform: translateX(15px);
    }
    .fade-in[data-direction="bottom"], .fade-item[data-direction="bottom"] {
        transform: translateY(15px);
    }
}