/* ヘッダー: 左にロゴ+タイトル、右にTOP */
.header {
    justify-content: flex-start;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header nav {
    margin-left: auto;
}

/* page-wrapper を flex コンテナにして右カラムを横並びにする */
.page-wrapper {
    display: flex;
    flex-wrap: wrap;
}

main.game-container {
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
}

/* スマホ: 高さをアスペクト比 1:1.6 に合わせる */
#box {
    height: calc(92vw * 1.6);
    position: relative;
}

/* スマホ: 左右10%オーバーレイでページスクロールを可能にする */
.scroll-overlay {
    display: none;
}

@media (max-width: 767px) {
    .scroll-overlay {
        display: block;
        position: absolute;
        top: 0;
        height: 100%;
        width: 10%;
        z-index: 10;
    }

    .scroll-overlay-left {
        left: 0;
    }

    .scroll-overlay-right {
        right: 0;
    }
}

/* タブレット: 右カラムは下に配置、320×512の1.2倍 */
@media (min-width: 768px) and (max-width: 1024px) {
    .right-column {
        flex-basis: 100%;
    }

    #box {
        width: 384px;
        height: 614px;
    }
}

/* 1024px: さらに1.2倍 */
@media (width: 1024px) {
    #box {
        width: 461px;
        height: 737px;
    }
}

/* PC: 右カラムを横に回り込ませる */
@media (min-width: 1025px) {
    main.game-container {
        flex-basis: 0%;
    }

    #box {
        width: 375px;
        height: 600px;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.game-description {
    margin: 10px auto;
}

.game-description h2 {
    font-size: 1.2rem;
    margin: 16px auto 8px;
    width: 92vw;
    text-align: left;
    border-left: 4px solid #555;
    padding-left: 8px;
}

.game-description p,
.game-description ul {
    width: 92vw;
    margin: 8px auto;
    text-align: left;
    padding-left: 1.4em;
}

.acknowledgement {
    width: 92vw;
    max-width: 92vw;
}

@media (min-width: 768px) {

    .game-description h2,
    .game-description p,
    .game-description ul {
        width: 500px;
    }

    .acknowledgement {
        width: 500px;
        max-width: 500px;
    }
}