/* ============================================================
   slider.css — Swiper固有のオーバーライドのみ
   レイアウト・カードデザインは front-page.php の Tailwind クラスで管理
   ============================================================ */

/* ---- モバイル：隣カードをのぞかせるため overflow を visible に ---- */
@media (max-width: 768px) {
    .properties-swiper {
        overflow: visible;
    }
}

/* ---- モバイル：非アクティブスライドを薄く（Swiper が動的に付与するクラスのため CSS で対応）---- */
@media (max-width: 768px) {
    .properties-swiper .swiper-slide {
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    .properties-swiper .swiper-slide-active {
        opacity: 1;
    }
}

.swiper-slide {
    height: auto
}

/* ---- デスクトップ矢印：左右位置のみ CSS で指定（top/transform は Tailwind の top-1/2 -translate-y-1/2 で対応）---- */
.prop-arrow-desktop.richica-prop-prev {
    left: 28px;
}
.prop-arrow-desktop.richica-prop-next {
    right: 28px;
}

/* ---- 無効状態（Swiper が付与する .swiper-button-disabled）---- */
.richica-prop-prev.swiper-button-disabled,
.richica-prop-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ---- ページネーション bullets（Swiper が動的生成するため CSS で色指定）---- */
.properties-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content !important;
}

.properties-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
    margin: 0 !important; /* Swiper デフォルト margin をリセット */
}

.properties-pagination .swiper-pagination-bullet-active {
    background: #ffffff;
}