/* ========== フルローディング（初回のみ表示） ========== */
#loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;
}

html:not(.loading-quick) #loading {
    display: flex;
}

/* テキスト（1行・左右余白を確保しつつ幅に応じて可変） */
#loading .text-wrapper {
    --loading-side-pad: clamp(1.25rem, 5vw, 3rem);
    --loading-char-count: 15;
    position: relative;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - var(--loading-side-pad) * 2);
    margin: 0 auto;
    padding: 0 var(--loading-side-pad);
    font-size: min(
        4.25rem,
        max(
            0.8125rem,
            calc((100vw - var(--loading-side-pad) * 2) / var(--loading-char-count))
        )
    );
    line-height: 1.35;
    color: #000;
    opacity: 0;
    text-align: center;
    white-space: nowrap;
}

#loading .text-wrapper__copy {
    display: inline-block;
}

#loading .text-wrapper .char {
    display: inline-block;
}

#loading .loading-bar {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: #495769;
    border-radius: 2px;
}

#loading .black-overlay {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10;
    transition: top 0.5s ease;
}

#loading .final-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 20;
    transform-origin: center center;
    padding: 0 5vw;
    text-align: center;
    line-height: 0;
}

#loading .final-text__logo {
    display: block;
    width: clamp(160px, 42vw, 300px);
    height: auto;
    margin: 0 auto;
}

/* ========== ショートローディング（2回目以降） ========== */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #f7f8fa;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    display: none;
}

html.loading-quick #page-loader {
    display: flex;
}

#page-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e6ec;
    border-top-color: #3d4f63;
    border-radius: 50%;
    animation: page-loader-spin 0.65s linear infinite;
}

@keyframes page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.page-loader__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: #8892a0;
    text-transform: uppercase;
}