/* 左→右　スライドイン
====================================== */

.fadeInLR {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: fadeInLR;
    animation-name: fadeInLR;
    visibility: visible !important;
}

@-webkit-keyframes fadeInLR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-80px);
        -ms-transform: translateX(-80px);
        transform: translateX(-80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}


/* 右→左　スライドイン
====================================== */

.fadeInRL {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: fadeInRL;
    animation-name: fadeInRL;
    visibility: visible !important;
}

@-webkit-keyframes fadeInRL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInRL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(80px);
        -ms-transform: translateX(80px);
        transform: translateX(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}


/* 下→上　スライドイン
====================================== */

.fadeInUp {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .8s;
    -ms-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    visibility: visible !important;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}


/* フェードイン（フロント、管理画面のアニメーション部分）
====================================== */

.fadeIn01 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    visibility: visible !important;
    -webkit-animation-name: fadeIn01;
    animation-name: fadeIn01;
}

.fadeIn02 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    visibility: visible !important;
    -webkit-animation-name: fadeIn02;
    animation-name: fadeIn02;
}

.fadeIn03 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    visibility: visible !important;
    -webkit-animation-name: fadeIn03;
    animation-name: fadeIn03;
}

.fadeIn04 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    visibility: visible !important;
    -webkit-animation-name: fadeIn04;
    animation-name: fadeIn04;
}

.fadeIn05 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    visibility: visible !important;
    -webkit-animation-name: fadeIn05;
    animation-name: fadeIn05;
}

.fadeIn06 {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    visibility: visible !important;
    -webkit-animation-name: fadeIn06;
    animation-name: fadeIn06;
}

@-webkit-keyframes fadeIn01 {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
}

@keyframes fadeIn01 {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn02 {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
}

@keyframes fadeIn02 {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn03 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
}

@keyframes fadeIn03 {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn04 {
    0% {
        opacity: 0;
    }
    45% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
}

@keyframes fadeIn04 {
    0% {
        opacity: 0;
    }
    45% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn05 {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
}

@keyframes fadeIn05 {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn06 {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
}

@keyframes fadeIn06 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
}