/* ===== reset ===== */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    /* ★ページ側はスクロールさせない */

    /* フォント指定（スマホ含めゴシック固定） */
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "YuGothic",
        "Meiryo",
        sans-serif;
}

/* ===== swipe container ===== */
.v-swipe {
    height: 100svh;
    /* ★1画面固定 */
    overflow-y: auto;
    /* ★ここだけスクロール */
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

/* iOS実機対策 */
@supports (height: 100dvh) {
    .v-swipe {
        height: 100dvh;
    }

    .screen {
        height: 100dvh;
    }
}

/* ===== 1スワイプ＝1画像（1画面） ===== */
.screen {
    height: 100svh;
    /* ★1枚＝1画面 */
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* ★途中で止まりにくくする */

    position: relative;
    /* hint用 */
    overflow: hidden;
    /* ★はみ出し防止 */
    background: #000;
    /* 余白が出た時の保険（基本出ない） */
}

/* ===== 画像：余白なし・上詰め・画面100% ===== */
.screen img {
    display: block;
    width: 100%;
    height: auto;
    /*object-fit: cover;*/
    /* ★余白ゼロで画面を埋める */
    object-position: top center;
    /* ★上詰め */
}

/* ===== 1枚目メッセージ ===== */
.hint {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}