/* =========================================================
    Project: Stay Slider (汎用宿スライダー)
    役割: トップ、特集フッター等で共通利用するスライダー外枠
   ========================================================= */

/* 1. スライダーの外枠 */
.p-staySlider {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

/* 1.1 スライダーを切り取る「窓」（1200px） */
.p-staySlider .l-container {
    max-width: var(--wan-container-max); /* 1200px */
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

/* 2. Swiper本体 */
.p-staySlider__swiper {
    position: relative;
    overflow: hidden !important; 
    margin: 0 !important;
	padding-bottom: var(--wan-s-1);
}

/* 3. スライドの並び設定 */
.p-staySlider__swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* 4. 宿カードの横幅（PC版） */
.p-staySlider__swiper .swiper-slide {
    display: flex;
    height: auto;
    flex-shrink: 0;
    width: 310px; 
}

/* 5. ナビゲーションボタン */
.p-staySlider .swiper-button-next,
.p-staySlider .swiper-button-prev {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    background-color: var(--wan-color-brand); /* トークンのオレンジ */
    color: var(--wan-color-white);
    width: var(--wan-s-12);  /* 48px */
    height: var(--wan-s-12); /* 48px */
    border-radius: var(--wan-r-circle);
    z-index: 100;
    display: flex; 
    align-items: center;
    justify-content: center;
    transition: opacity var(--wan-motion-base) ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ボタンアイコン（← →） */
.p-staySlider .swiper-button-next::after,
.p-staySlider .swiper-button-prev::after {
    font-family: sans-serif;
    font-size: var(--wan-f-size-xl); /* 20px */
    font-weight: var(--wan-f-weight-bold);
    line-height: var(--wan-f-lh-none);
}
.p-staySlider .swiper-button-prev::after { content: "←"; }
.p-staySlider .swiper-button-next::after { content: "→"; }

/* ---------------------------------------------------------
    ボタン位置の計算（枠の外側）
--------------------------------------------------------- */

/* PC版（1281px以上） */
@media screen and (min-width: 1281px) {
    .p-staySlider .swiper-button-prev {
		left: calc(50% - 600px - 80px);
    }
    .p-staySlider .swiper-button-next {
		right: calc(50% - 600px - 80px);
    }
}

/* 中間サイズ */
@media screen and (max-width: 1280px) and (min-width: 769px) {
    .p-staySlider .swiper-button-prev { left: 10px; } /* 10px */
    .p-staySlider .swiper-button-next { right: 10px; }/* 10px */
}

/* 終端でボタンを隠す */
.swiper-button-disabled {
    display: none !important; 
}

/* ---------------------------------------------------------
    スマホ表示の調整（768px以下）
    ★お送りいただいた2つの@mediaを1つに統合しましたが、全命令を含んでいます
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .p-staySlider {
        overflow: visible; 
    }

    .p-staySlider__swiper .swiper-wrapper {
        align-items: flex-start !important;
        transition-timing-function: ease-out;
    }

    .p-staySlider__swiper .swiper-slide {
        width: 45% !important; 
        margin-right: var(--wan-s-4) !important; /* 16px */
    }

    .p-staySlider .swiper-button-next,
    .p-staySlider .swiper-button-prev {
        display: none !important;
    }
}