/* =========================================================
    Component: Stay Hero SP (768px以下で適用)
    2026 Finalized Version - Swiper Bug Fixed
   ========================================================= */

@media screen and (max-width: 768px) {
    /* --- 0. PC用要素の非表示 --- */
    .p-stayHero__pc { 
        display: none !important; 
    }

/* --- 1. ヒーロー大枠 --- */
.p-stayHero {
        /* 親のFlexboxに依存しない、絶対的な「画面幅」を指定 */
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden; /* 万が一のはみ出しを強制カット */
    }

    .p-stayHero__sp { 
        display: block; 
        width: 100%;
        min-width: 0; /* Flexbox子要素の無限広がり防止 */
    }

    /* --- 2. スライダー本体 --- */
    .p-stayHero__slider {
        position: relative;
        width: 100%;
        /* 画像の下にドットを置くための白地エリア */
        padding-bottom: 40px; 
        background-color: #fff;
    }

    .p-stayHero__slide {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        /* ダメ押しの幅固定 */
        width: 100%;
        box-sizing: border-box;
    }

    .p-stayHero__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- 3. 写真をすべて見るボタン：画像エリアの右下 --- */
    .p-stayHero__spOpenBtn {
        position: absolute;
        bottom: 52px; /* 白地40px + 浮かせ分12px */
        right: 12px;
        z-index: 20;
        display: flex;
        align-items: center;
        padding: 6px 14px;
        background-color: rgba(255, 255, 255, 0.95);
        border: 1px solid var(--wan-color-border-light, #ddd);
        border-radius: var(--wan-radius-full, 9999px);
        color: var(--wan-color-text, #333);
        font-size: 11px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 変数がない場合を考慮し直接指定 */
        cursor: pointer;
    }

    /* --- 4. ページネーション（ドット）：画像下の白枠中央 --- */
    .p-stayHero__pagination.swiper-pagination-bullets-dynamic {
        bottom: 17px !important; /* 40pxの中央付近 */
        top: auto !important;
    }

    /* 全ドットの基本スタイル */
    .p-stayHero__slider .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
        background-color: #ddd !important;
        opacity: 0 !important; /* 基本は隠す */
        margin: 0 5px !important;
        border-radius: 50% !important;
        transform: scale(1) !important; 
        transition: all 0.3s ease !important;
        pointer-events: auto;
    }

    /* 5つのドットだけを可視化 */
    .p-stayHero__slider .swiper-pagination-bullet-active,
    .p-stayHero__slider .swiper-pagination-bullet-active-main,
    .p-stayHero__slider .swiper-pagination-bullet-active-next,
    .p-stayHero__slider .swiper-pagination-bullet-active-next-next,
    .p-stayHero__slider .swiper-pagination-bullet-active-prev,
    .p-stayHero__slider .swiper-pagination-bullet-active-prev-prev {
        opacity: 1 !important;
    }

    /* アクティブなドットはオレンジ色 */
    .p-stayHero__slider .swiper-pagination-bullet-active {
        background-color: var(--wan-color-brand, #ff922b) !important;
    }

    /* --- 5. 枚数カウンター：右上の角丸表示 --- */
    .p-stayHero__counter {
        position: absolute;
        top: 12px;
        right: 12px;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 10px;
        font-weight: bold;
        padding: 3px 10px;
        border-radius: 6px;
        z-index: 10;
        pointer-events: none;
    }
}