/* ローディング */

/* PC */
@media screen and (min-width: 767px) {
    .loader {
        /* ローディングバーの最大長さ */
        --loader-width: 220px;
        /* ローディングバーの位置 */
        --position-left: calc(50% - 110px);
        /* ローディングバーの周期 */
        --loader-interval: 1s;
    }
}

/* SP */
@media screen and (max-width: 767px) {
    .loader {
        /* ローディングバーの最大長さ */
        --loader-width: 120px;
        /* ローディングバーの位置 */
        --position-left: calc(50% - 60px);
        /* ローディングバーの周期 */
        --loader-interval: 0.8s;
    }
}

.loader {
    visibility: visible;
    animation-duration: 1.0s;
    animation-name: fade-out;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

.loader-bar-start,
.loader-bar-start:before,
.loader-bar-start:after {
    width: var(--loader-width);
    height: 1em;
    content: '';
}

.loader-bar-start {
    background: #000000;
    position: absolute;
    top: 50%;
    left: var(--position-left);
    animation: load2-start var(--loader-interval) infinite linear;
}

.loader-bar-start:before {
    background: #FF5701;
    position: absolute;
    top: -25px;
    animation: load1-start var(--loader-interval) infinite linear;
}

.loader-bar-start:after {
    background: #44CDFF;
    position: absolute;
    top: 25px;
    animation: load3-start var(--loader-interval) infinite linear;
}

.loader-bar-end,
.loader-bar-end:before,
.loader-bar-end:after {
    width: var(--loader-width);
    height: 1em;
    content: '';
    background: white;
    position: absolute;
}

.loader-bar-end {
    top: 50%;
    left: var(--position-left);
    animation: load2-end var(--loader-interval) infinite linear;
}

.loader-bar-end:before {
    top: -25px;
    animation: load1-end var(--loader-interval) infinite linear;
}

.loader-bar-end:after {
    top: 25px;
    animation: load3-end var(--loader-interval) infinite linear;
}

@keyframes load1-start {
    0% {
        width: 0;
    }

    50%,
    100% {
        width: var(--loader-width);
    }
}

@keyframes load2-start {

    0%,
    17% {
        width: 0;
    }

    50%,
    100% {
        width: calc(var(--loader-width) / 3 * 2);
    }
}

@keyframes load3-start {

    0%,
    34% {
        width: 0px;
    }

    50%,
    100% {
        width: calc(var(--loader-width) / 3);
    }
}

@keyframes load1-end {
    0% {
        width: 0px;
    }

    50% {
        width: 0px;
    }

    100% {
        width: var(--loader-width);
    }
}

@keyframes load2-end {
    0% {
        width: 0px;
    }

    50% {
        width: 0px;
    }

    100% {
        width: calc(var(--loader-width) / 3 * 2);
    }
}

@keyframes load3-end {
    0% {
        width: 0px;
    }

    50% {
        width: 0px;
    }

    100% {
        width: calc(var(--loader-width) / 3);
    }
}

@keyframes fade-out {
    0% {
        visibility: visible;
        opacity: 1;
    }

    100% {
        visibility: hidden;
        opacity: 0;
    }
}