/* =========================================
   全体の基本設定
========================================== */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    width: 100%;

    margin: 0;
    padding: 0;

    background-color: #10204a;

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;
}


/*
    ローディング表示中は、
    ランディングページをスクロールできないようにします。
*/
body.is-loading {
    overflow: hidden;
}


/*
    ローディング完了後は、
    通常のスクロール状態に戻します。
*/
body.is-loaded {
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================
   ローディング画面
========================================== */

.loading-screen {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #10204a;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 1;
    visibility: visible;

    /*
        必ずランディングページより上に表示します。
    */
    z-index: 9999;

    /*
        ローディング画面が薄くなる時間です。
    */
    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}


/*
    ローディング完了時に、
    JavaScriptから追加されるクラスです。
*/
.loading-screen.is-fade-out {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/*
    すでにローディング表示済みの場合に、
    最初から非表示にするためのクラスです。
*/
.loading-screen.is-skipped {
    display: none;
}


/* =========================================
   ローディング画面の中身
========================================== */

.loading-inner {
    width: min(80%, 600px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}


/* =========================================
   キャラクター画像
========================================== */

.loading-character-wrapper {
    width: min(55vw, 350px);

    aspect-ratio: 1 / 1;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    margin-bottom: 2%;
}


.loading-character {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    /*
        キャラクターを少し上下させて、
        歩いている雰囲気を出します。
    */
    animation:
        character-bounce 0.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes character-bounce {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }

}


/*
    walk_finish.png表示中は、
    上下運動を停止します。
*/
.loading-character.is-finished {
    animation: none;
}


/* =========================================
   ローディング文字
========================================== */

.loading-text {
    margin: 0 0 1%;

    color: #ffffff;

    font-size: clamp(18px, 2.5vw, 32px);
    font-weight: bold;

    letter-spacing: 0.25em;
}


.loading-percentage {
    margin: 0 0 3%;

    color: #ffffff;

    font-size: clamp(26px, 4vw, 48px);
    font-weight: bold;

    line-height: 1;
}


/* =========================================
   プログレスバー
========================================== */

.loading-progress {
    width: min(80%, 420px);
    height: 8px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;

    background-color: rgba(255, 255, 255, 0.15);
}


.loading-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background-color: #ffffff;

    transition: width 0.1s linear;
}


/* =========================================
   ランディングページ
========================================== */

.landing-page {
    position: relative;

    width: 100%;

    overflow: hidden;

    /*
        初回のローディング中は、
        後ろで透明にしておきます。
    */
    opacity: 0;

    transform: scale(1.01);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}


/*
    ローディング完了後、
    またはローディングをスキップした場合に表示します。
*/
.landing-page.is-visible {
    opacity: 1;
    transform: scale(1);
}


/* =========================================
   タブレット・スマートフォン対応
========================================== */

@media screen and (max-width: 768px) {

    .loading-inner {
        width: 90%;
    }


    .loading-character-wrapper {
        width: min(70vw, 300px);
    }


    .loading-progress {
        width: 75%;
    }


    .landing-message {
        top: 5%;

        font-size: clamp(17px, 5vw, 36px);
    }


    .landing-menu-button {
        width: 90%;

        aspect-ratio: 3 / 1.2;
    }


    .landing-image-area {
        width: 65%;
    }


    .landing-menu-text {
        width: 35%;

        padding-right: 2%;

        font-size: clamp(17px, 5vw, 32px);
    }


    .profile-button {
        top: 28%;
    }


    .works-button {
        top: 49%;
    }


    .contact-button {
        top: 70%;
    }

}


/* =========================================
   小さいスマートフォン対応
========================================== */

@media screen and (max-width: 480px) {

    .loading-character-wrapper {
        width: 72vw;
    }


    .loading-text {
        letter-spacing: 0.15em;
    }


    .loading-progress {
        height: 6px;
    }


    .landing-menu-button {
        width: 94%;
    }


    .landing-image-area {
        width: 62%;
    }


    .landing-menu-text {
        width: 38%;

        font-size: clamp(15px, 4.8vw, 25px);
    }

}


/* =========================================
   動きを減らす設定への対応
========================================== */

@media (prefers-reduced-motion: reduce) {

    .loading-screen,
    .landing-page,
    .landing-button-background,
    .landing-menu-image,
    .landing-menu-text,
    .loading-progress-bar {
        transition-duration: 0.01ms;
    }


    .loading-character {
        animation: none;
    }

}