@charset "UTF-8";
/* =================================================
   fade / reveal animation
   ・JSで is-active を付与するだけ
   ・方向はクラスで指定
   ・slider とは無関係
================================================= */
/* ---------------------------------
   共通初期状態
--------------------------------- */
.fade-up,
.fade-down,
.fade-left,
.fade-right {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 1s ease,
        transform 1s ease;
}
/* ---------------------------------
   方向別 初期位置
--------------------------------- */
.fade-up {
    transform: translateY(25px);
}
.fade-down {
    transform: translateY(-25px);
}
.fade-left {
    transform: translateX(25px);
}
.fade-right {
    transform: translateX(-25px);
}
/* ---------------------------------
   表示状態
--------------------------------- */
.fade-up.is-active,
.fade-down.is-active,
.fade-left.is-active,
.fade-right.is-active {
    opacity: 1;
    transform: translate(0, 0);
}
/* ---------------------------------
   prefers-reduced-motion 対応
--------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-down,
    .fade-left,
    .fade-right {
        transition: none;
        opacity: 1;
        transform: none;
    }
}