/* ==========================
   全体
========================== */

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


body {
    background-color: #010960;
    overflow-x: hidden;
}


/*
 * モーダル表示中は
 * 背景ページをスクロールさせません。
 */
body.modal-open {
    overflow: hidden;
}


/* ==========================
   タイトル
========================== */

.mainTitle {
    margin-top: 8vh;
    text-align: center;
    color: white;
}


.mainTitle h1 {
    font-size: 10vw;
    letter-spacing: 0.15em;
}


/* ==========================
   WORKSページ
========================== */

.works-page {
    width: 100%;

    padding:
        100px
        5%
        150px;
}


/* ==========================
   一覧
========================== */

.works-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 50px;
}


/* ==========================
   カード
========================== */

.work-card {
    background: white;

    border-radius: 25px;

    aspect-ratio: 1 / 1;

    cursor: pointer;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.work-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.25);
}


.work-card img {
    width: 100%;
    height: 80%;
    object-fit: cover;
}


.work-card h2 {
    flex: 1;

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

    padding: 0 5%;

    color: #010960;

    text-align: center;

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


/* ==========================
   タブレット
========================== */

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

    .works-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ==========================
   オーバーレイ
========================== */

.modal-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.7
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 999;
}


.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ==========================
   モーダル
========================== */

.modal {
    position: fixed;

    inset: 0;

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

    pointer-events: none;

    z-index: 1000;
}


.modal.active {
    pointer-events: auto;
}


/* ==========================
   モーダル本体
========================== */

.modal-content {
    width: 85vw;
    height: 85vh;

    max-width: 1400px;
    max-height: 900px;

    background: white;

    border-radius: 30px;

    position: relative;

    overflow: hidden;

    transform:
        scale(0.9);

    opacity: 0;

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


.modal.active
.modal-content {
    transform:
        scale(1);

    opacity: 1;
}


/* ==========================
   閉じるボタン
========================== */

.close-button {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    background: white;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.25);

    font-size: 36px;

    line-height: 1;

    cursor: pointer;

    z-index: 9999;

    transition:
        transform 0.2s ease;
}


.close-button:hover {
    transform:
        scale(1.1);
}


/* =========================================================
   ゴトウチステッカー
========================================================= */

.gotouchi-content {
    background: white;

    overflow: hidden;

    /*
     * 背景ステッカーの大きさ
     */
    --sticker-size: 210px;

    /*
     * ステッカー同士の間隔
     */
    --sticker-gap: 20px;
}


/* ==========================
   背景レーン
========================== */

.sticker-lane {
    position: absolute;

    left: 0;

    width: 100%;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.15;

    z-index: 1;
}


.top-lane {
    top: 8%;
}


.bottom-lane {
    bottom: 8%;
}


/* ==========================
   動くトラック
========================== */

.sticker-track {
    display: flex;

    width: max-content;

    gap:
        var(--sticker-gap);

    /*
     * transformアニメーションを
     * GPU処理しやすくします。
     */
    will-change: transform;

    /*
     * 初回はanimationを
     * 一切設定しません。
     *
     * JS側で画像読み込み完了後に
     * is-readyを付けます。
     */
}


/* ==========================
   1セット
========================== */

.sticker-set {
    display: flex;

    gap:
        var(--sticker-gap);

    flex-shrink: 0;
}


/* ==========================
   背景ステッカー画像
========================== */

.sticker-set img {
    width:
        var(--sticker-size);

    height:
        var(--sticker-size);

    object-fit: contain;

    flex-shrink: 0;

    user-select: none;

    pointer-events: none;
}


/* ==========================
   画像読み込み完了後だけ
   アニメーションを設定
========================== */

.sticker-track.is-ready.sticker-track-right {
    animation:
        sticker-scroll-right
        70s
        linear
        infinite;
}


.sticker-track.is-ready.sticker-track-left {
    animation:
        sticker-scroll-left
        70s
        linear
        infinite;
}


/* ==========================
   モーダル非表示中は停止
========================== */

#gotouchi-modal:not(.active)
.sticker-track {
    animation-play-state: paused;
}


/* ==========================
   モーダル表示中だけ再生
========================== */

#gotouchi-modal.active
.sticker-track {
    animation-play-state: running;
}


/* ==========================
   上段
   左 → 右
========================== */

@keyframes sticker-scroll-right {

    from {
        transform:
            translate3d(
                calc(
                    -50%
                    -
                    (
                        var(--sticker-gap)
                        /
                        2
                    )
                ),
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}


/* ==========================
   下段
   右 → 左
========================== */

@keyframes sticker-scroll-left {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                calc(
                    -50%
                    -
                    (
                        var(--sticker-gap)
                        /
                        2
                    )
                ),
                0,
                0
            );
    }

}


/* ==========================
   ゴトウチ前面
========================== */

.gotouchi-front {
    position: relative;

    z-index: 10;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 40px;
}


.gotouchi-main-image {
    width: 45%;

    max-width: 500px;

    object-fit: contain;
}


.gotouchi-button {
    padding:
        18px
        50px;

    border-radius: 999px;

    background: #010960;

    color: white;

    text-decoration: none;

    font-size: 1.3rem;

    transition:
        transform
        0.25s ease;
}


.gotouchi-button:hover {
    transform:
        scale(1.05);
}


/* =========================================================
   架空ロゴシリーズ
========================================================= */

.logo-content {
    display: flex;

    gap: 50px;

    padding: 80px;
}


.logo-info {
    flex: 1;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 30px;
}


.logo-info h2 {
    font-size: 3rem;

    color: #010960;
}


.logo-info p {
    font-size: 1.3rem;

    line-height: 1.8;
}


.logo-game {
    flex: 1;

    display: flex;
    flex-direction: column;

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

    gap: 30px;
}


.gacha-area {
    width: 400px;
    height: 400px;

    background: #f3f3f3;

    border-radius: 20px;

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

    overflow: hidden;
}


.gacha-area img {
    width: 80%;
    height: 80%;

    object-fit: contain;
}


#gacha-button {
    padding:
        18px
        50px;

    border: none;
    border-radius: 999px;

    background: #010960;

    color: white;

    cursor: pointer;

    font-size: 1.2rem;

    transition:
        transform
        0.25s ease;
}


#gacha-button:hover {
    transform:
        scale(1.05);
}


/* =========================================================
   ギャラリー
========================================================= */

.gallery-modal {
    padding:
        40px
        80px
        60px;

    display: flex;
    flex-direction: column;

    gap: 40px;
}


.gallery-title {
    text-align: center;

    font-size:
        clamp(
            28px,
            3vw,
            48px
        );

    color: #010960;

    margin-top: 30px;
    margin-bottom: 10px;
}


.gallery-main {
    width: 100%;
    height: 65%;

    min-height: 0;

    display: flex;

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

    overflow: hidden;
}


.gallery-main img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


.gallery-bottom {
    height: 180px;

    display: flex;

    align-items: center;

    gap: 20px;
}


.gallery-track-wrapper {
    flex: 1;

    overflow: hidden;
}


.gallery-track {
    display: flex;

    gap: 15px;

    transition:
        transform
        0.35s ease;
}


.gallery-thumbnail {
    width: 140px;
    height: 140px;

    padding: 10px;

    border-radius: 15px;

    cursor: pointer;

    object-fit: contain;

    background: #f5f5f5;

    flex-shrink: 0;

    transition:
        transform
        0.2s ease;
}


.gallery-thumbnail:hover {
    transform:
        scale(1.05);
}


.gallery-arrow {
    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    background: #010960;

    color: white;

    font-size: 1.6rem;

    flex-shrink: 0;
}


/* =========================================================
   スパイホップ
========================================================= */

.spyhop-content {
    padding:
        40px
        80px
        60px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;
}


.spyhop-title {
    margin-top: 20px;

    font-size:
        clamp(
            28px,
            3vw,
            48px
        );

    color: #010960;

    text-align: center;
}


.spyhop-image-area {
    flex: 1;

    width: 100%;

    display: flex;

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

    overflow: hidden;
}


.spyhop-image-area img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.spyhop-description {
    width: 80%;

    text-align: center;

    line-height: 1.8;

    font-size: 1.1rem;

    color: #333;
}


/* =========================================================
   LINE STORE
========================================================= */

.line-store-button {
    padding:
        18px
        50px;

    margin-bottom: 30px;

    border-radius: 999px;

    background: #06c755;

    color: white;

    text-decoration: none;

    font-size: 1.2rem;

    transition:
        transform
        0.25s ease;

    align-self: center;
}


.line-store-button:hover {
    transform:
        scale(1.05);
}


/* =========================================================
   スマホ版
========================================================= */

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

    .mainTitle {
        margin-top: 8vh;
    }


    .mainTitle h1 {
        font-size: 17vw;

        letter-spacing: 0.08em;
    }


    .works-page {
        padding:
            60px
            6%
            100px;
    }


    .works-grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .work-card {
        width: 100%;

        border-radius: 20px;
    }


    .work-card:hover {
        transform: none;

        box-shadow: none;
    }


    .work-card h2 {
        font-size: 5vw;
    }


    /* ==========================
       モーダル
    ========================== */

    .modal-content {
        width: 92vw;

        height: 90dvh;

        max-width: none;
        max-height: none;

        border-radius: 22px;

        overflow-y: auto;
        overflow-x: hidden;
    }


    .close-button {
        top: 14px;
        right: 14px;

        width: 52px;
        height: 52px;

        font-size: 32px;
    }


    /* ==========================
       ゴトウチ
    ========================== */

    .gotouchi-content {
        --sticker-size: 120px;
        --sticker-gap: 12px;
    }


    .top-lane {
        top: 10%;
    }


    .bottom-lane {
        bottom: 10%;
    }


    .gotouchi-front {
        gap: 30px;

        padding:
            60px
            20px;
    }


    .gotouchi-main-image {
        width: 80%;

        max-width: none;
    }


    .gotouchi-button {
        padding:
            15px
            35px;

        font-size: 4vw;
    }


    /* ==========================
       ロゴ
    ========================== */

    .logo-content {
        min-height: 90dvh;

        padding:
            80px
            7%
            40px;

        flex-direction: column;

        gap: 35px;

        overflow-y: auto;
    }


    .logo-info {
        flex: none;

        text-align: center;

        gap: 20px;
    }


    .logo-info h2 {
        font-size: 8vw;
    }


    .logo-info p {
        font-size: 4.2vw;

        line-height: 1.8;
    }


    .logo-game {
        flex: none;

        width: 100%;
    }


    .gacha-area {
        width:
            min(
                70vw,
                300px
            );

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


    #gacha-button {
        padding:
            15px
            35px;

        font-size: 4vw;
    }


    /* ==========================
       ギャラリー
    ========================== */

    .gallery-modal {
        padding:
            70px
            5%
            30px;

        gap: 20px;
    }


    .gallery-title {
        margin-top: 0;

        font-size: 8vw;
    }


    .gallery-main {
        height: 55%;

        min-height: 280px;
    }


    .gallery-bottom {
        height: 110px;

        gap: 8px;
    }


    .gallery-thumbnail {
        width: 85px;
        height: 85px;

        padding: 5px;

        border-radius: 10px;
    }


    .gallery-track {
        gap: 10px;
    }


    .gallery-arrow {
        width: 42px;
        height: 42px;

        font-size: 1rem;
    }


    /* ==========================
       スパイホップ
    ========================== */

    .spyhop-content {
        padding:
            70px
            6%
            35px;

        gap: 20px;

        overflow-y: auto;
    }


    .spyhop-title {
        margin-top: 0;

        font-size: 8vw;
    }


    .spyhop-image-area {
        flex: none;

        height: 50vh;
    }


    .spyhop-description {
        width: 100%;

        font-size: 4vw;

        line-height: 1.8;
    }


    .line-store-button {
        padding:
            14px
            32px;

        margin-bottom: 10px;

        font-size: 4vw;
    }

}


/* =========================================================
   小さいスマホ
========================================================= */

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

    .work-card h2 {
        font-size: 5.5vw;
    }


    .gallery-main {
        min-height: 240px;
    }


    .gallery-thumbnail {
        width: 75px;
        height: 75px;
    }


    .gallery-bottom {
        height: 95px;
    }


    .gallery-arrow {
        width: 38px;
        height: 38px;
    }

}


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

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

    .sticker-track {
        animation: none !important;
    }

}