/* コンテナに幅と高さを指定 */
.swiper {
    width: 100%;
    min-height: 300px; /* 仮の高さでも良いので指定してみる */
}

/* --- Swiper初期化前のチラつき防止 --- */
.roomSlider1 {
    /*visibility: hidden; !* JSでの初期化が終わるまで非表示 *!*/
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}
.roomSlider1.swiper-initialized {
    /*visibility: visible;*/
    opacity: 1;
}

/* --- デフォルトのスタイル (奇数インデックス 0, 2 用) --- */
.roomSlider1 .swiper-slide .pic {
    /* 画像読み込み前の崩れ防止 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden; /* チラつき防止のおまじない */

    /* --- アニメーション設定 --- */
    /* 合計時間（8000ms）より少し長く設定して、動きが終わる前に切り替わるようにする */
    transition: transform 8000ms linear, opacity 2000ms ease;

    /* 初期状態（拡大させておく） */
    transform: scale(1.15);
}

/* --- 偶数インデックス (1) の初期スタイル (上書き) --- */
/* [data-swiper-slide-index="1"] を持つスライドに適用 */
.roomSlider1 .swiper-slide[data-swiper-slide-index="1"] .pic {
    /* 初期状態 (偶数インデックス 1): 等倍、少し透明、左下にずらす */
    transform: scale(1.0) translateX(-5%) translateY(5%);
    opacity: 0.90;
}


/* --- 最終状態 (アクティブ時) --- */

/* 最終状態 (奇数インデックス 0, 2 - デフォルト) */
.roomSlider1 .swiper-slide-active .pic,
.roomSlider1 .swiper-slide-duplicate-active .pic {
    /* 最終状態: 等倍に戻り、中央(0,0)に戻る */
    transform: scale(1.0);
}

/* 最終状態 (偶数インデックス 1 - 上書き) */
/* [data-swiper-slide-index="1"] を持ち、かつアクティブなスライドに適用 */
.roomSlider1 .swiper-slide-active[data-swiper-slide-index="1"] .pic,
.roomSlider1 .swiper-slide-duplicate-active[data-swiper-slide-index="1"] .pic {
    /* 最終状態: 1.2倍に拡大し、中央に戻る */
    transform: scale(1.2) translateX(0) translateY(0);
    opacity: 1;
}

/* .picの見た目を擬似的に作成 */
.pic {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 0.5rem; /* 角丸 */
}

/* スライドコンテナのオーバーフローを隠す */
.swiper-slide {
    overflow: hidden;
    border-radius: 0.5rem; /* 角丸 */
}

.swiper-container {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
}

/* --- タイトルをスライド中央にオーバーレイ配置 --- */
.roomSlider1 {
    position: relative; /* 絶対配置の基準にする */
}
.roomSlider1 .main-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;               /* スライド画像より前面 */
    pointer-events: none;      /* 背面のリンク操作を妨げない */
    text-align: center;
    line-height: 1;
    /* 余白や視認性が必要なら下記のように調整
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.0);
    border-radius: 0.25rem;
    */
}
.roomSlider1 .main-title img {
    display: block;
    width: min(70vw, 560px);   /* 画面に応じて縮む/伸びすぎない */
    height: auto;
}