/*========= 背景色の動きのCSS ===============*/

.trigger_01 {
    opacity: 0;
    /* 最初は透明 */
}

.trigger_01.start-animation {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.trigger_01.start-animation::before {
    animation-name: bgRLextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

@keyframes bgextendAnimeBase {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bgRLextendAnime {
    0% {
        transform-origin: right;
        transform: scaleX(0);
    }

    50% {
        transform-origin: right;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: left;
    }

    100% {
        transform-origin: left;
        transform: scaleX(0);
    }
}



/*========= 背景色の動きのCSS ===============*/

.trigger_02 {
    opacity: 0;
    /* 最初は透明 */
}

.trigger_02.start-animation {
    animation-name: bgextendAnimeBase03;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.trigger_02.start-animation::before {
    animation-name: bgRLextendAnime03;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

@keyframes bgextendAnimeBase03 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bgRLextendAnime03 {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}




@media screen and (min-width: 800px) {

    /*========= trigger_03 ===============*/

    .trigger_03 {
        opacity: 0;
    }

    .trigger_03.start-animation {
        animation-name: trigger03;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }


    @keyframes trigger03 {
        0% {
            opacity: 0;
            left: 0%;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
            left: 25%;
        }
    }

    /*========= trigger_04 ===============*/

    .trigger_04 {
        opacity: 0;
    }

    .trigger_04.start-animation {
        animation-name: trigger04;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }


    @keyframes trigger04 {
        0% {
            opacity: 0;
            left: 50%;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
            left: 20%;
        }
    }

    /*========= trigger_05 ===============*/

    .trigger_05 {
        opacity: 0;
    }

    .trigger_05.start-animation {
        animation-name: trigger05;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }


    @keyframes trigger05 {
        0% {
            opacity: 0;
            right: 0%;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
            right: 25%;
        }
    }

    /*========= trigger_06 ===============*/

    .trigger_06 {
        opacity: 0;
    }

    .trigger_06.start-animation {
        animation-name: trigger06;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }


    @keyframes trigger06 {
        0% {
            opacity: 0;
            left: 0%;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
            left: 20%;
        }
    }

    /*========= 背景色の動きのCSS ===============*/

    .trigger_07 {
        opacity: 0;
        /* 最初は透明 */
    }

    .trigger_07.start-animation {
        animation-name: bgextendAnimeBase05;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    .trigger_07.start-animation::before {
        animation-name: bgRLextendAnime05;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000000;
    }

    @keyframes bgextendAnimeBase05 {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes bgRLextendAnime05 {
        0% {
            transform-origin: right;
            transform: scaleX(0);
        }

        50% {
            transform-origin: right;
            transform: scaleX(1);
        }

        50.001% {
            transform-origin: left;
        }

        100% {
            transform-origin: left;
            transform: scaleX(0);
        }
    }

    /*========= 背景色の動きのCSS ===============*/

    .trigger_08 {
        display: block;
        opacity: 0;
        /* 最初は透明 */
    }

    .trigger_08.start-animation {
        animation-name: trigger08;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    .trigger_08.start-animation::before {
        animation-name: trigger08-2;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #09077c;
    }

    @keyframes trigger08 {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes trigger08-2 {
        0% {
            transform-origin: right;
            transform: scaleX(0);
        }

        50% {
            transform-origin: right;
            transform: scaleX(1);
        }

        50.001% {
            transform-origin: left;
        }

        100% {
            transform-origin: left;
            transform: scaleX(0);
        }
    }
}