/* オープニングアニメーション  */

body.loading {
    overflow: hidden;
}

.opening {
    /* アニメーション開始待ち時間  */
    --opening-start: 3s;
    /* アニメーション周期  */
    --opening-bar-interval: 0.6s;
}

.opening-wrapper {
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 100;
}

.opened {
    background-color: transparent;
}

.opening-bar1,
.opening-bar2,
.opening-bar3 {
    height: calc(100vh / 3);
    width: 100vw;
    left: -100vw;
    content: '';
    position: absolute;
}

.opening-bar1 {
    background: #FF5701;
    top: 0vh;
    animation:
        opening-bar-start1 var(--opening-bar-interval) ease-in var(--opening-start) alternate forwards,
        opening-bar-start2 var(--opening-bar-interval) ease-in calc(var(--opening-start) + 1.2s) alternate forwards;
}

.opening-bar2 {
    background: #000000;
    top: calc(100vh / 3);
    animation:
        opening-bar-start1 var(--opening-bar-interval) ease-in calc(var(--opening-start) + 0.3s) alternate forwards,
        opening-bar-start2 var(--opening-bar-interval) ease-in calc(var(--opening-start) + 1.5s) alternate forwards;
}

.opening-bar3 {
    background: #44CDFF;
    top: calc(100vh / 3 * 2);
    animation:
        opening-bar-start1 var(--opening-bar-interval) ease-in calc(var(--opening-start) + 0.6s) alternate forwards,
        opening-bar-start2 var(--opening-bar-interval) ease-in calc(var(--opening-start) + 1.8s) alternate forwards;
}

@keyframes opening-bar-start1 {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes opening-bar-start2 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(200%);
    }
}

@keyframes opening-bar-end {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(200%);
    }
}