/* フェードイン
***************************************************************/
.fadein {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

.fadein.fadein_active {
    opacity: 1;
    transform: translateY(0);
}

.fadein.number02 {
    transition-delay: 100ms;
}

.fadein.number03 {
    transition-delay: 150ms;
}

.fadein.number04 {
    transition-delay: 200ms;
}

.fadein.number05 {
    transition-delay: 250ms;
}

.fadein.number06 {
    transition-delay: 300ms;
}

.fadein.number07 {
    transition-delay: 350ms;
}

.fadein.number08 {
    transition-delay: 400ms;
}

.fadein.number09 {
    transition-delay: 450ms;
}

.fadein.number10 {
    transition-delay: 500ms;
}

.fadein.number11 {
    transition-delay: 550ms;
}

.fadein.number12 {
    transition-delay: 600ms;
}

.fadein.number13 {
    transition-delay: 650ms;
}

.fadein.number14 {
    transition-delay: 700ms;
}

.fadein.number15 {
    transition-delay: 750ms;
}

.fadein.number16 {
    transition-delay: 800ms;
}

.fadein.number17 {
    transition-delay: 850ms;
}

.fadein.number18 {
    transition-delay: 900ms;
}

.fadein.fadein_active {
    opacity: 1;
    transform: translateY(0);
}

@media all and (min-width: 681px) {
    .action01 {
        position: relative;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.6s, transform 0.6s ease-out;
    }

    .action01.action {
        opacity: 1;
        transform: translateY(0);
    }

    .action02 {
        position: relative;
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.6s, transform 0.6s ease-out;
    }

    .action02.action {
        opacity: 1;
        transform: translateY(0);
    }

    .action03 {
        position: relative;
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 0.6s, transform 0.6s ease-out;
    }

    .action03.action {
        opacity: 1;
        transform: translateX(0);
    }

    .action04 {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    .action04.action {
        opacity: 1;
    }

    .delay1 {
        transition-delay: 0.3s;
    }

    .delay2 {
        transition-delay: 0.6s;
    }

    .delay3 {
        transition-delay: 0.9s;
    }

    .delay4 {
        transition-delay: 1.2s;
    }

    .delay5 {
        transition-delay: 1.5s;
    }
}

@media all and (max-width: 750px) {
    .action01_sp {
        position: relative;
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s, transform 0.6s ease-out;
    }

    .action01_sp.action {
        opacity: 1;
        transform: translateY(0);
    }

    .action02_sp {
        position: relative;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 0.6s, transform 0.6s ease-out;
    }

    .action02_sp.action {
        opacity: 1;
        transform: translateY(0);
    }

    .action03_sp {
        position: relative;
        opacity: 0;
        transform: translateX(50px);
        transition: opacity 0.6s, transform 0.6s ease-out;
    }

    .action03_sp.action {
        opacity: 1;
        transform: translateX(0);
    }

    .action04_sp {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    .action04_sp.action {
        opacity: 1;
    }

    .delay1_sp {
        transition-delay: 0.3s;
    }

    .delay2_sp {
        transition-delay: 0.6s;
    }

    .delay3_sp {
        transition-delay: 0.9s;
    }

    .delay4_sp {
        transition-delay: 1.2s;
    }

    .delay5_sp {
        transition-delay: 1.5s;
    }
}