html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

.wrapper {
    position: relative;
    overflow: hidden;
    background-color: #211913;
}
.contents {
    display: block;
    width: min(100vw, 1000px);
    margin: auto;
}

._sp_only {
    display: none;
}
._pc_only {
    display: inline;
}

/* タイトルブロック */
.title_container {
    position: relative;
    width: min(100vw, 1000px);
    height: min(58.6vw, 586px);
    background-image: url("../img/PC/bg_title.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* デフォルトのマージンとパディングをリセット */
    margin: 0;
    padding: 0;
    /* 垂直方向の配置をトップに設定（インライン要素の隙間対策だが、ブロック要素にも保険として） */
    vertical-align: top;
    /* displayを明示的にブロックに設定（divはデフォルトでブロックだが、念のため） */
    display: block;
}
.title_link_wrap {
    position: absolute;
    right: min(2vw, 20px);
    bottom: min(2vw, 20px);
    display: flex;
    flex-direction: column;  /* ← 縦並び */
    align-items: flex-end;   /* ← 右寄せ */
    gap: min(1vw, 10px);     /* ← 各ボタンの間隔 */
}
.title_link_btn {
    width: min(20vw, 200px);
    margin: 0 min(1vw, 10px);
}

.title_sns_wrap {
    display: flex;
    justify-content: center;     /* ← 横方向の中央寄せ */
    align-items: center;
    gap: min(0.5vw, 5px);        /* ← SNSボタン間の余白 */
    width: 100%;                 /* 必須：中央寄せを効かせる */
}

.title_sns_btn {
    width: min(5vw, 50px);
    margin: 0 min(0.5vw, 5px);
}
.title_link_img {
    width: 100%;
}


/* デモブロック */
.demo_container {
    width: min(100vw, 1000px);
    position: relative;
    height: min(166.9vw, 1669px);
    background-image: url("../img/PC/bg_demo.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* デフォルトのマージンとパディングをリセット */
    margin: 0;
    padding: 0;
    /* 垂直方向の配置をトップに設定（インライン要素の隙間対策だが、ブロック要素にも保険として） */
    vertical-align: top;
    /* displayを明示的にブロックに設定（divはデフォルトでブロックだが、念のため） */
    display: block;
}
.demo_video {
    position: absolute;
    top: min(4.6vw, 46px);
    left: min(16.6vw, 166px);
    width: min(66.7vw, 667px);
    height: min(37.5vw, 375px);
}
.demo_gif1 {
    position: absolute;
    top: min(63.8vw, 638px);
    left: min(16.5vw, 165px);
    width: min(67vw, 670px);
}
.demo_gif1_text {
    position: absolute;
    top: min(56vw, 560px);
    left: min(7vw, 70px);
    width: min(50vw, 500px);
}
.demo_gif2 {
    position: absolute;
    top: min(119vw, 1190px);
    left: min(16.5vw, 165px);
    width: min(67vw, 670px);
}
.demo_gif2_text {
    position: absolute;
    top: min(116vw, 1160px);
    right: min(7vw, 70px);
    width: min(40vw, 400px);
}

.demo_link_img {
    width: 100%;
}

/*コラボパートナー */
.collabo_container {
    width: min(100vw, 1000px);
    position: relative;
    height: min(38vw, 380px);
    background-image: url("../img/PC/bg_collabo.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* デフォルトのマージンとパディングをリセット */
    margin: 0;
    padding: 0;
    /* 垂直方向の配置をトップに設定（インライン要素の隙間対策だが、ブロック要素にも保険として） */
    vertical-align: top;
    /* displayを明示的にブロックに設定（divはデフォルトでブロックだが、念のため） */
    display: block;
}

.collabo_link_wrap {
    position: absolute;
    right: min(2vw, 20px);
    top: min(45vh, 170px);
    display: flex;
    flex-direction: column;  /* ← 縦並び */
    align-items: flex-end;   /* ← 右寄せ */
    gap: min(1vw, 10px);     /* ← 各ボタンの間隔 */
}

.collabo_sns_wrap {
    display: flex;
    justify-content: center;     /* ← 横方向の中央寄せ */
    align-items: center;
    gap: min(0.5vw, 5px);        /* ← SNSボタン間の余白 */
    width: 100%;                 /* 必須：中央寄せを効かせる */
}

.collabo_sns_btn {
    width: min(5vw, 50px);
    margin: 0 min(0.5vw, 5px);
}

.collabo_link_btn {
    width: min(20vw, 200px);
    margin: 0 min(1vw, 10px);
}
.collabo_link_img {
    width: 100%;
}

/*ゲーム詳細等 */

.detail_container_credit {
    width: min(100vw, 1000px);
    position: relative;
    height: min(80.3vw, 803px);
    background-image: url("../img/PC/bg_detail.png");
    background-repeat: no-repeat;
    background-size: cover;
    /* デフォルトのマージンとパディングをリセット */
    margin: 0;
    padding: 0;
    /* 垂直方向の配置をトップに設定（インライン要素の隙間対策だが、ブロック要素にも保険として） */
    vertical-align: top;
    /* displayを明示的にブロックに設定（divはデフォルトでブロックだが、念のため） */
    display: block;
}

.detail_link_img {
    width: 100%;
}

.detail_guideline_credit {
    position: absolute;
    top: min(36vw, 365px);
    left: min(55vw, 550px);
    width: min(22vw, 220px);
}


.detail_btn_switch_credit {
    position: absolute;
    bottom: min(8vw, 97.5px);
    left: min(73vw, 730px);
    width: min(20vw, 200px);
    margin: 0 min(1vw, 10px);
}
.detail_btn_gs_credit {
    position: absolute;
    bottom: min(0vw, 0px);
    left: min(54.6vw, 546px);
    width: min(11vw, 110px);
    height: min(6.4vw, 64px);
}
.detail_btn_gs_credit:hover {
    opacity: 0.1;
    background-color: white;
}
.detail_btn_kp_credit {
    position: absolute;
    bottom: min(0vw, 0px);
    left: min(66.9vw, 669px);
    width: min(12vw, 120px);
    height: min(6.4vw, 64px);
}
.detail_btn_kp_credit:hover {
    opacity: 0.1;
    background-color: white;
}
.detail_btn_ss_credit {
    position: absolute;
    bottom: min(0vw, 0px);
    left: min(82vw, 820px);
    width: min(16vw, 160px);
    height: min(6.4vw, 64px);
}
.detail_btn_ss_credit:hover {
    opacity: 0.1;
    background-color: white;
}



@media only screen and (max-width : 750px) {
    *{
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    *::-webkit-scrollbar{
        display:none;
    }
    ._sp_only {
        display: inline;
    }
    ._pc_only {
        display: none;
    }
    /* タイトルブロック */
    .title_container {
        width: 100vw;
        position: relative;
        height: 193.3vw;
        background-image: url("../img/SP/bg_title.png");
        background-repeat: no-repeat;
        background-size: 100vw;
    }

    .title_link_wrap {
        position: absolute;
        left: 50vw;
        transform: translate(-50%, -50%);
        display: flex;
        top: 80%;
        flex-direction: column;
        align-items: center;
        gap: 6vw;
        width: 100%;
        height: 35%;
    }
    .title_link_btn {
        width: 63vw;
        height: 23vw;
        margin: 0 1vw;
    }
    .title_link_img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .title_sns_wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5vw;
        width: 100%;
    }

    .title_sns_btn {
        width: 15vw;
        height: 14vw;
        margin: 0 0.5vw;
    }



    /* デモブロック */
    .demo_container {
        width: 100vw;
        position: relative;
        height: 169.7vw;
        background-image: url("../img/SP/bg_demo.png");
        background-repeat: no-repeat;
        background-size: 100vw;
    }
    .demo_video {
        position: absolute;
        top: 11.4vw;
        left: 16.4vw;
        width: 67vw;
        height: 37.9vw;
    }
    .demo_gif1 {
        position: absolute;
        top: 66.8vw;
        left: 16.4vw;
        width: 67.2vw;
    }
    .demo_gif1_text {
        position: absolute;
        top: 59vw;
        left: 7vw;
        width: 50vw;
    }
    .demo_gif2 {
        position: absolute;
        top: 122vw;
        left: 16.4vw;
        width: 67.2vw;
    }
    .demo_gif2_text {
        position: absolute;
        top: 120vw;
        right: 7vw;
        width: 40vw;
    }


    /*コラボパートナー */
    .collabo_container {
        width: 100vw;
        position: relative;
        height: 102vw;
        background-image: url("../img/SP/bg_collabo.png");
        background-repeat: no-repeat;
        background-size: 100vw;
    }

    .collabo_link_wrap {
        position: absolute;
        display: flex;
        top: 78%;
        left: 50vw;
        transform: translate(-50%, -50%);
        flex-direction: column;
        align-items: center;
        gap: 1vw;
        width: 100%;
    }

    .collabo_sns_wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5vw;
        width: 100%;
    }

    .collabo_sns_btn {
        width: 15vw;
        height: 14vw;
        margin: 0 0.5vw;
    }

    .collabo_link_btn {
        width: 63vw;
        height: 17vw;
        margin: 0 1vw;
    }
    .collabo_link_img {
        width: 100%;
    }

    /* クレジット */
    .detail_container_credit {
        width: 100vw;
        position: relative;
        height: 267.9vw;
        background-image: url("../img/SP/bg_detail.png");
        background-repeat: no-repeat;
        background-size: 100vw auto;
        background-attachment: local;
    }

    .detail_guideline_credit {
        position: absolute;
        top: 78vw;
        left: 25vw;
        width: 62vw;
    }
    .detail_btn_switch_credit {
        position: absolute;
        top: 198vw;
        left: 25vw;
        width: 62vw;
    }

    .detail_btn_gs_credit {
        position: absolute;
        top: 229vw;
        left: 4vw;
        width: 26vw;
        height: 16vw;
    }
    .detail_btn_gs_credit:hover {
        opacity: 0.1;
        background-color: white;
    }
    .detail_btn_kp_credit {
        position: absolute;
        top: 229vw;
        left: 33vw;
        width: 27vw;
        height: 16vw;
    }
    .detail_btn_kp_credit:hover {
        opacity: 0.1;
        background-color: white;
    }
    .detail_btn_ss_credit {
        position: absolute;
        top: 229vw;
        left: 62vw;
        width: 36vw;
        height: 16vw;
    }
    .detail_btn_ss_credit:hover {
        opacity: 0.1;
        background-color: white;
    }


}