/* ==========================
   リセット
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==========================
   ページ全体
========================== */

html,
body {
    width: 100%;
}


body {
    overflow-x: hidden;
}


/*
 * ローディング中は
 * スクロールを禁止します。
 */
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: 99999;

    /*
     * loading.js側の
     * fadeOutMillisecondsと
     * 同じ時間にしてください。
     */
    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}


/*
 * ローディング終了時
 */
.loading-screen.is-fade-out {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/*
 * sessionStorageによって
 * ローディングをスキップした場合
 */
.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 {

    position: relative;

    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:
        loading-character-bounce
        0.5s
        ease-in-out
        infinite
        alternate;
}


/* ==========================
   ローディング画像
   上下アニメーション
========================== */

@keyframes loading-character-bounce {

    from {
        transform: translateY(0);
    }

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

}


/*
 * 完了画像では
 * 上下運動を停止します。
 */
.loading-character.is-finished {
    animation: none;
}


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

.loading-text {

    margin-bottom: 1%;

    color: white;

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

    font-weight: bold;

    letter-spacing: 0.25em;
}


.loading-percentage {

    margin-bottom: 3%;

    color: white;

    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: white;

    transition:
        width
        0.1s
        linear;
}


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

#landing {

    position: relative;

    width: 100%;

    /*
     * 初回は透明
     */
    opacity: 0;

    /*
     * 少し拡大した状態から
     * 表示します。
     */
    transform: scale(1.01);

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


/*
 * ローディング終了後
 */
#landing.is-visible {

    opacity: 1;

    transform: scale(1);
}


/* ==========================
   背景画像
========================== */

.landing-picture {

    display: block;

    width: 100%;
}


.landing-image {

    display: block;

    width: 100%;
    height: auto;
}


/* ==========================
   共通メニューボタン
   PC版
========================== */

.menu-button {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    width: 80%;
    height: 15%;

    display: flex;
    align-items: center;

    overflow: hidden;

    text-decoration: none;

    background: transparent;

    z-index: 100;
}


/* ==========================
   PC版
   各ボタン位置
========================== */

.profile-button {

    /*
     * ↓↓↓
     * PC版PROFILE位置
     */
    top: 35%;
}


.works-button {

    /*
     * ↓↓↓
     * PC版WORKS位置
     */
    top: 55%;
}


.contact-button {

    /*
     * ↓↓↓
     * PC版CONTACT位置
     */
    top: 75%;
}


/* ==========================
   白背景アニメーション
========================== */

.menu-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: white;

    /*
     * 最初は横幅0
     */
    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform
        0.5s
        ease;

    z-index: 0;
}


/*
 * PC
 * ↓
 * hover
 *
 * スマホ
 * ↓
 * is-active
 */
.menu-button:hover::before,
.menu-button.is-active::before {

    transform:
        scaleX(1);
}


/*
 * キーボード操作
 */
.menu-button:focus-visible::before {

    transform:
        scaleX(1);
}


/* ==========================
   メニュー画像
   PC版
========================== */

.menu-image-wrapper {

    width: auto;
    height: 90%;

    display: flex;
    align-items: center;

    position: relative;

    z-index: 1;
}


.menu-image {

    width: 100%;
    height: 100%;

    object-fit: contain;

    position: relative;

    z-index: 1;
}


/* ==========================
   メニューテキスト
   PC版
========================== */

.menu-text {

    width: 50%;
    height: 100%;

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

    font-size: 8vw;

    font-weight: bold;

    color: white;

    transition:
        color
        0.5s
        ease;

    position: relative;

    z-index: 1;
}


/*
 * PC hover
 *
 * スマホ is-active
 */
.menu-button:hover .menu-text,
.menu-button.is-active .menu-text {

    color: #0b1d4d;
}


/*
 * キーボード操作
 */
.menu-button:focus-visible .menu-text {

    color: #0b1d4d;
}


/* ==========================
   Welcomeメッセージ
========================== */

.welcome-message {

    position: absolute;

    /*
     * ↓↓↓
     * PC用位置
     */
    top: 93%;

    left: 50%;

    transform:
        translateX(-50%);

    width: 100%;

    text-align: center;

    color: white;

    font-size: 6vw;

    font-weight: bold;

    z-index: 100;
}


.welcome-highlight {
    color: #c62828;
}


/* ==========================
   ヘッダー
========================== */

.header {

    position: relative;

    width: 100%;
}


/* ==========================
   ヘッダー背景
========================== */

.header-background {

    display: block;

    width: 100%;

    height: auto;
}


/* ==========================
   ヘッダー共通ボタン
========================== */

.header-button {

    position: absolute;

    width: 10%;

    z-index: 10;
}


.header-button img {

    display: block;

    width: 100%;

    height: auto;
}


/* ==========================
   ヘッダー位置
========================== */

.works-header-button {

    top: 5%;
    left: 51%;
}


.profile-header-button {

    top: 5%;
    left: 27%;
}


.contact-header-button {

    top: 5%;
    left: 75%;
}


/* =========================================================
   スマートフォン版
   768px以下
========================================================= */

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


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

    .loading-inner {

        width: 90%;
    }


    .loading-character-wrapper {

        width:
            min(
                70vw,
                300px
            );
    }


    .loading-text {

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


    .loading-percentage {

        font-size:
            clamp(
                24px,
                8vw,
                42px
            );
    }


    .loading-progress {

        width: 75%;
    }


    /* ==========================
       メニューボタン
       スマホ版
    ========================== */

    .menu-button {

        /*
         * PC：80%
         * スマホ：90%
         */
        width: 90%;

        /*
         * LandingPage_2.webpを
         * 見ながら調整可能
         */
        height: 13%;
    }


    /* ==========================
       PROFILE位置
       スマホ版
    ========================== */

    .profile-button {

        /*
         * ↓↓↓
         * スマホ背景に合わせて
         * 調整可能です。
         */
        top: 35%;
    }


    /* ==========================
       WORKS位置
       スマホ版
    ========================== */

    .works-button {

        /*
         * ↓↓↓
         * 調整可能
         */
        top: 55%;
    }


    /* ==========================
       CONTACT位置
       スマホ版
    ========================== */

    .contact-button {

        /*
         * ↓↓↓
         * 調整可能
         */
        top: 75%;
    }


    /* ==========================
       メニュー画像
       スマホ版
    ========================== */

    .menu-image-wrapper {

        /*
         * 画像側を40％にします。
         *
         * 以前：
         * 45%
         *
         * 今回：
         * 40%
         *
         * これによって
         * CONTACT文字側に
         * スペースを増やします。
         */
        width: 40%;

        height: 85%;

        justify-content: center;
    }


    .menu-image {

        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /* ==========================
       メニューテキスト
       スマホ版
    ========================== */

    .menu-text {

        /*
         * 画像40%
         * ＋
         * テキスト60%
         */
        width: 60%;

        /*
         * CONTACTが見切れないように
         * 11vw → 10vwへ変更
         */
        font-size: 10vw;
    }


    /* ==========================
       Welcomeメッセージ
       スマホ版
    ========================== */

    .welcome-message {

        width: 90%;

        font-size: 8vw;

        /*
         * ↓↓↓
         * LandingPage_2.webpに
         * 合わせて調整可能
         */
        top: 93%;
    }

}


/* =========================================================
   小さいスマートフォン
   480px以下
========================================================= */

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


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

    .loading-character-wrapper {

        width: 72vw;
    }


    .loading-text {

        letter-spacing:
            0.15em;
    }


    .loading-progress {

        height: 6px;
    }


    /* ==========================
       小さいスマホで
       CONTACT等がまだ窮屈な場合
       ここでさらに調整できます。
    ========================== */

    .menu-text {

        /*
         * 必要なら
         * 9vw程度まで下げられます。
         */
        font-size: 9.5vw;
    }

}


/* =========================================================
   アニメーション軽減設定
========================================================= */

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

    .loading-screen,
    #landing,
    .loading-progress-bar,
    .menu-button::before,
    .menu-text {

        transition-duration:
            0.01ms;
    }


    .loading-character {

        animation: none;
    }

}