/* loading.css */
body {
    /* ローディング中はスクロールを無効にする */
    overflow: hidden;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; 
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading-text {
    display: flex;
    /* ▼▼▼ ここから変更 ▼▼▼ */
    flex-direction: column; /* flexの方向を「縦」にする */
    align-items: flex-start; /* 左揃えにする */
    /* ▲▲▲ ここまで変更 ▲▲▲ */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    font-size: 6vw;
    color: #333;
    transform-origin: center center;
}

/* spanタグに改行後の余白を追加 */
.loading-char {
    opacity: 0;
    transform: translateY(30px);
    display: inline-block;
    line-height: 1.0; /* 行間を少し調整 */

    /* ▼▼▼ アニメーションを滑らかにするために以下2行を追加 ▼▼▼ */
    transform: translateZ(0); /* GPUを使った処理を促す */
    will-change: transform, opacity; /* これから動かすプロパティを宣言 */
}