/* カルーセル全体のスタイル */
#imageCarousel {
    position: relative;
    overflow: hidden;
    padding: 40px 0 20px; /* 下部パディングのみ減らす */
    margin: 0 auto;
    margin-bottom: -250px; /* 少しネガティブマージンを追加 */
    max-width: 1200px;
}

/* カルーセルの表示領域 */
.carousel-stage {
    position: relative;
    width: 100%;
    height: 0%; /* 元の設定を維持 */
    padding-bottom: 56.25%;
    perspective: 1000px; /* 3D効果のための遠近感 */
}

/* カード（画像コンテナ）のスタイル */
.carousel-card {
    position: absolute;
    top: 0;
    height: 50%; /* 元の設定を維持 */
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); /* イージング効果 */
    transform-style: preserve-3d;
}

/* 左の画像（小さく表示） */
.carousel-card.left {
    left: 0;
    width: 30%;
    transform: translateX(10%) scale(0.8);
    opacity: 0.7;
    z-index: 1;
}

/* 中央の画像（大きく表示） */
.carousel-card.center {
    left: 50%;
    transform: translateX(-50%) scale(1.2);
    width: 40%;
    z-index: 3;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    opacity: 1;
}

/* 右の画像（小さく表示） */
.carousel-card.right {
    right: 0;
    width: 30%;
    transform: translateX(-10%) scale(0.8);
    opacity: 0.7;
    z-index: 1;
}

/* 非表示の画像（次の右側に待機） */
.carousel-card.next {
    right: -30%;
    width: 30%;
    transform: translateX(0) scale(0.7);
    opacity: 0;
    z-index: 0;
}

/* 非表示の画像（前の左側に待機） */
.carousel-card.prev {
    left: -30%;
    width: 30%;
    transform: translateX(0) scale(0.7);
    opacity: 0;
    z-index: 0;
}

/* 画像スタイル */
.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ナビゲーションボタン */
.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 50%;
    top: auto;
    bottom: 40%; /* 元の位置を維持 */
    opacity: 0.8;
}

/* 左ボタンの位置 */
.carousel-control-prev {
    left: calc(15% - 20px);
    bottom: 45%;
}

/* 右ボタンの位置 */
.carousel-control-next {
    right: calc(15% - 20px);
    bottom: 45%;
}

/* インジケーター */
.carousel-indicators {
    bottom: 45%; /* 元の位置を維持 */
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(233, 226, 226, 0.981);
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: rgb(255, 255, 255);
}