body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100dvh; /* スマホでアドレスバーの影響を防ぐ */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
}

.swiper-container {
    width: 100vw;
    height: 100dvh; /* ダイナミックビューポートを使用 */
    overflow: hidden;
    position: relative;
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    height: 100dvh; /* スマホでの表示ズレを防ぐ */
}

/* PCの画像設定 (余白を保つ) */
.swiper-slide img {
    width: 100%;
    height: 100dvh;
    object-fit: contain; /* 画像の比率を保つ */
}

/* スマホのみ p1~p9 の左右の余白をなくす */
@media screen and (max-width: 768px) {
    .swiper-slide[data-slide="p1"] img,
    .swiper-slide[data-slide="p2"] img,
    .swiper-slide[data-slide="p3"] img,
    .swiper-slide[data-slide="p4"] img,
    .swiper-slide[data-slide="p5"] img,
    .swiper-slide[data-slide="p6"] img,
    .swiper-slide[data-slide="p7"] img,
    .swiper-slide[data-slide="p8"] img,
    .swiper-slide[data-slide="p9"] img {
        width: 100vw !important; /* 画面幅いっぱいに */
        height: 100dvh !important; /* 画面の高さにフィット */
        object-fit: cover !important; /* 余白をなくして拡大 */
        max-width: unset !important;
    }
}

/* ボタンの配置（PC・スマホ共通） */
.btn-container {
    position: fixed !important; /* 画面下部に固定 */
    bottom: 9px !important; /* 9px上に配置 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85vw !important; /* 画面幅の85%を基準にレスポンシブ対応 */
    max-width: 525px !important; /* PC版ボタン */
    min-width: 250px !important; /* スマホのボタンを大きくする */
    height: auto !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 7px) !important; /* iPhoneのホームバー対策＋7px */
    text-align: center !important;
    z-index: 9999 !important; /* 他の要素より前に配置 */
}

/* ボタンの見た目 */
.btn {
    width: 100% !important;
    height: auto !important;
    max-width: 525px !important; /* PCの最大サイズ */
    min-width: 250px !important; /* スマホの最小サイズを大きく */
    display: block !important;
}

/* スマホ向けボタン調整 */
@media screen and (max-width: 768px) {
    .btn-container {
        width: 80vw !important; /* 画面幅の80%を基準に */
        max-width: 350px !important; /* スマホのボタンサイズ上限 */
        min-width: 250px !important; /* スマホのボタンが小さくなり過ぎないように */
    }
}