/**
 * バナー管理プラグイン用 フロントエンドスタイルシート v4.5 (最終版)
 *
 * - カルーセル全体のスタイル（背景色、影、外枠の余白、角丸はPHPから動的に設定）
 * - Swiperコンテナとスライド、画像
 * - ページネーション（プログレスバーとドット）のスタイル調整
 * - 左右の矢印の表示/非表示（JSで制御）
 */

/* カルーセルの外枠全体 (phpからmax-widthとborder-radiusが適用されます) */
.banner-carousel-wrapper {
    background-color: #fff; /* 画像の背景色に合わせて薄いベージュ */
    
    /* 枠の上下左右の余白を適用 (画像のデザインに合わせて20pxに設定) */
    padding: 0px; 
	overflow: hidden;
    width: 70%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* 柔らかい影 */
    margin: 20px auto; /* ページ内で中央揃え */
}

/* Swiperコンテナ (画像が直接表示される部分) */
.banner-carousel-container {
    width: 100%;
    overflow: hidden; /* 画像がはみ出さないように */
    position: relative;
    
    /* 画像自体の角丸 */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* ページネーションと繋がる下辺は角丸なし */
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
}

/* 各スライド (バナー画像を格納) */
.banner-carousel-container .swiper-slide {
    text-align: center;
    background: #fff; /* スライドの背景色 */
    display: flex; /* 画像を中央に配置するためにflexboxを使用 */
    justify-content: center;
    align-items: center;
}

/* スライド内のバナー画像 */
.banner-carousel-container .swiper-slide img {
    display: block;
    width: 100%;
    height: auto; /* 画像のアスペクト比を維持 */
    object-fit: cover; /* コンテナサイズに合わせて画像をカバー */
}

/* --- ページネーションのスタイル --- */

/* プログレスバー型ページネーションの全体コンテナ */
.custom-pagination {
    display: flex;
    gap: 2px; /* 各バーの間の隙間 */
    width: 100%;
    height: 8px; /* バーの高さ */
    margin-top: 0; /* 【変更点】画像との間の余白を削除 */
    background-color: #e0e0e0; /* 非アクティブ時のバーのベースカラー */
    
    /* border-radius はPHPから動的に出力される (ラッパーの角丸に合わせるため) */
    /* 下辺の角丸がラッパーと一致し、上辺は画像に接するため角丸なし */
}

/* プログレスバーの各アイテム */
.custom-pagination-item {
    flex: 1; /* 各バーが均等な幅になるように */
    background-color: #e0e0e0; /* 非アクティブ時の色 */
    /* border-radius: 0; 【変更点】個々のバーの角丸をなくす (PHP側で動的に設定される) */
    cursor: pointer;
    transition: background-color 0.4s ease; /* 色変化のアニメーション */
}

/* プログレスバーのアクティブなアイテム */
.custom-pagination-item.active {
    background-color: #333; /* アクティブ時の色 (濃いグレー/黒) */
}

/* ドット型ページネーションの全体コンテナ (Swiper標準) */
.banner-carousel-container .swiper-pagination {
    position: static; /* デフォルトの絶対位置指定を解除 */
    margin-top: 0; /* 【変更点】画像との間の余白を削除 */
    background-color: #e0e0e0; /* ドット部分の背景色 */
    padding: 10px 0; /* ドットを囲む上下の余白 */
    
    /* border-radius はPHPから動的に出力される (ラッパーの角丸に合わせるため) */
    /* 下辺の角丸がラッパーと一致し、上辺は画像に接するため角丸なし */
}

/* ドット型ページネーションの各ドット */
.banner-carousel-container .swiper-pagination-bullet {
    background: #ccc; /* 非アクティブ時の色 */
    opacity: 1; /* 透明度をなくす */
    border-radius: 0; /* 【変更点】ドット自体の角丸をなくす (画像に合わせて) */
    width: 8px; /* ドットのサイズ調整 */
    height: 8px; /* ドットのサイズ調整 */
    margin: 0 4px; /* ドット間の余白 */
}

/* ドット型ページネーションのアクティブなドット */
.banner-carousel-container .swiper-pagination-bullet-active {
    background: #333; /* アクティブ時の色 */
}

/* --- 左右の矢印のスタイル --- */

/* 矢印ボタンの共通スタイル */
.banner-carousel-container .swiper-button-next,
.banner-carousel-container .swiper-button-prev {
    color: #ffffff; /* 矢印の色 */
    background-color: rgba(0, 0, 0, 0.3); /* 半透明の背景 */
    border-radius: 50%; /* 円形にする */
    width: 40px;
    height: 40px;
    top: 50%; /* 上下中央に配置 */
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    
    /* デフォルトでは非表示にし、管理画面設定（JS）で表示を制御 */
    display: none; 
}

/* JSで .banner-carousel-wrapper に active-arrows クラスが付与された場合に表示 */
.banner-carousel-wrapper.active-arrows .swiper-button-next,
.banner-carousel-wrapper.active-arrows .swiper-button-prev {
    display: flex; /* Flexboxでアイコンを中央揃え */
    justify-content: center;
    align-items: center;
}

/* 矢印アイコンのスタイル */
.banner-carousel-container .swiper-button-next::after,
.banner-carousel-container .swiper-button-prev::after {
    font-size: 20px; /* アイコンのサイズ */
    font-weight: bold; /* アイコンの太さ */
}