/* カルーセルコンテナ: 見える範囲を定義し、隠れたスライドを非表示にする */
.carousel-container {
    width: 80%; /* カルーセルの幅 */
    max-width: 1000px;
    margin: 20px auto; /* 中央寄せ */
    overflow: hidden; /* **必須**: この領域外のスライドを隠す */
    position: relative; /* 子要素 (ボタン) の位置基準にする */
    /* border: 2px solid #007bff; */ /* カルーセルの枠の色 */
    border-radius: 8px;
}

/* スライドトラック: すべてのスライドを横一列に並べ、移動の対象となる */
.carousel-track {
    display: flex; /* 子要素 (スライド) を横並びにする */
    transition: transform 0.5s ease-in-out; /* スムーズな移動アニメーション */
}

/* 個々のスライド: 幅はコンテナに合わせる */
.carousel-slide {
    min-width: 100%; /* **必須**: 常にコンテナ幅と一致させる */
    box-sizing: border-box; /* paddingやborderを幅に含める */
    padding: 30px 20px;
    text-align: center;
    /* background-color: #f0f8ff; */ /* カルーセルの背景色 */
    color: #333;
}

.carousel-slide img {
    margin: 0 auto;  /* 左右のマージンを自動調整して中央寄せ */
}

.carousel-slide h3 {
    color: #007bff;
    margin-top: 0;
    margin-bottom: 10px;
}

.carousel-slide p {
    margin-bottom: 0;
}

/* ナビゲーションボタン */
.prev-button,
.next-button {
    position: absolute; /* コンテナに対して絶対配置 */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 123, 255, 0.7); /* 青色の半透明 */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    z-index: 10; /* スライドより前面に表示 */
    border-radius: 50%;
    line-height: 1; /* ボタン内のテキスト位置調整 */
    transition: background-color 0.3s;
}

.prev-button:hover,
.next-button:hover {
    background-color: rgba(0, 123, 255, 1.0);
}

.prev-button {
    left: 10px;
}

.next-button {
    right: 10px;
}

/* --- ⬇️ ドットインジケーター（ページネーション）用のスタイルを追加 ⬇️ --- */

/* ドットインジケーターコンテナ */
.dot-indicators {
    text-align: center;
    margin-top: 15px;
}

/* 個々のドットボタン */
.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb; /* 非アクティブ時の色 */
    border-radius: 50%; /* 円形にする */
    display: inline-block;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
    padding: 0;
}

/* 現在アクティブなドット */
.dot.active {
    background-color: #007bff; /* アクティブ時の色 */
}

.dot:hover {
    background-color: #555;
}