@charset "utf-8";

/* アニメーション */

/* --------------------フェードアップ------------------------ */
.fadeup {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
0% {
    opacity: 0;
    transform: translateY(30px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
.js-fadeup {
opacity: 0;
}

/* --------------------フェードイン------------------------ */

.fade {
animation-name: fadeAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
}

@keyframes fadeAnime {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
.js-fade {
opacity: 0;
}

/* ロードで */
.js-load-fade {
opacity: 0;
}
.js-load-fadeup{
opacity: 0;
}

/* duration */
.dur100{
    animation-duration: 0.1s!important;
}
.dur200{
    animation-duration: 0.2s!important;
}
.dur300{
    animation-duration: 0.3s!important;
}
.dur400{
    animation-duration: 0.4s!important;
}
.dur500{
    animation-duration: 0.5s!important;
}
.dur600{
    animation-duration: 0.6s!important;
}
.dur700{
    animation-duration: 0.7s!important;
}
.dur800{
    animation-duration: 0.8s!important;
}
.dur900{
    animation-duration: 0.9s!important;
}
.dur1000{
    animation-duration: 1s!important;
}
.dur1100{
    animation-duration: 1.1s!important;
}
.dur1200{
    animation-duration: 1.2s!important;
}
.dur1300{
    animation-duration: 1.3s!important;
}
.dur1400{
    animation-duration: 1.4s!important;
}
.dur1500{
    animation-duration: 1.5s!important;
}
.dur1600{
    animation-duration: 1.6s!important;
}
.dur1700{
    animation-duration: 1.7s!important;
}
.dur1800{
    animation-duration: 1.8s!important;
}
.dur1900{
    animation-duration: 1.9s!important;
}
.dur2000{
    animation-duration: 2.0s!important;
}

/* delay */
.delay500{
    animation-delay: 0.5s!important;
}
.delay1000{
    animation-delay: 1s!important;
}
.delay1500{
    animation-delay: 1.5s!important;
}
.delay2000{
    animation-delay: 2s!important;
}
.delay2500{
    animation-delay: 2.5s!important;
}
.delay3000{
    animation-delay: 3s!important;
}