/* カルーセルコンテナ（表示ウィンドウ） */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh; /* ファーストビュー全体を使用 */
    overflow: hidden; /* この領域外のスライドを非表示にする */
}

/* スライドを横並びにする内部コンテナ */
.carousel-inner {
    display: flex; /* 子要素（スライド）を横並びにする */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* トランジション（アニメーション）設定 */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* 個々のスライド要素 */
.carousel-item {
    min-width: 100vw; /* 画面幅いっぱいのサイズ */
    height: 100%;
    flex-shrink: 0; /* 縮小しない */
}

/* スライド画像 */
.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングし、要素を埋める */
}

/* ナビゲーションボタン */
.carousel-prev, .carousel-next {
    position: absolute;
    bottom: 20px; /* 下からの位置 */
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
    color: white;
    border: 2px solid #fff; /* 白い枠線 */
    border-radius: 50%; /* 円形にする */
    cursor: pointer;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* スライドより前面に表示 */
    transition: background-color 0.3s;
}

/* スクリーンショットに合わせて左下に配置 */
.carousel-prev {
    left: 20px; 
}

.carousel-next {
    left: 70px; /* 左ボタンの隣に配置 */
}

/* ホバーエフェクト */
.carousel-prev:hover, .carousel-next:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.slide-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 画面サイズに合わせてアスペクト比を維持しつつ、画面全体をカバーする */
    min-width: 100%; 
    min-height: 100%;
    transform: translate(-50%, -50%);
    
    /* 動画のアスペクト比に合わせて、常に16:9を維持するための計算 */
    width: 100vw; 
    height: 56.25vw; /* 100vw * (9/16) */
    
    /* 画面が16:9よりも横長の場合、高さを100%にして幅を自動調整 */
    min-height: 100vh;
    min-width: 177.78vh; /* 100vh * (16/9) */

    border: none; /* 枠線を削除 */
}