@charset "UTF-8";
/* CSS Document */

/*======================================
 Scroll Animation Library
======================================*/

/* 初期状態 */

.fade-up,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out{

    opacity:0;
    will-change:transform,opacity;

}

/*-----------------------
 Initial Position
-----------------------*/

.fade-up{
    transform:translateY(40px);
}

.fade-left{
    transform:translateX(-50px);
}

.fade-right{
    transform:translateX(50px);
}

.zoom-in{
    transform:scale(.9);
}

.zoom-out{
    transform:scale(1.15);
}

/*-----------------------
 Animation Start
-----------------------*/

.fade-up.show{
    animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
}

.fade-left.show{
    animation:fadeLeft .8s cubic-bezier(.22,1,.36,1) forwards;
}

.fade-right.show{
    animation:fadeRight .8s cubic-bezier(.22,1,.36,1) forwards;
}

.zoom-in.show{
    animation:zoomIn .8s cubic-bezier(.22,1,.36,1) forwards;
}

.zoom-out.show{
    animation:zoomOut .8s cubic-bezier(.22,1,.36,1) forwards;
}

/*-----------------------
 Delay
-----------------------*/

.delay-1{ animation-delay:.15s !important; }
.delay-2{ animation-delay:.30s !important; }
.delay-3{ animation-delay:.45s !important; }
.delay-4{ animation-delay:.60s !important; }
.delay-5{ animation-delay:.75s !important; }
.delay-6{ animation-delay:.90s !important; }

/*-----------------------
 Animation
-----------------------*/

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(-50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes fadeRight{

    from{
        opacity:0;
        transform:translateX(50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes zoomOut{

    from{
        opacity:0;
        transform:scale(1.15);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/*-----------------------
 Motion Reduce
-----------------------*/

@media (prefers-reduced-motion: reduce){

    .fade-up,
    .fade-left,
    .fade-right,
    .zoom-in,
    .zoom-out{

        opacity:1;
        transform:none;

    }

    .fade-up.show,
    .fade-left.show,
    .fade-right.show,
    .zoom-in.show,
    .zoom-out.show{

        animation:none;

    }

}