.swiper {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100); ; /* 画面いっぱいの高さ */
    overflow: hidden;
    position: relative;
}
/* 各セクション・上下左右中央揃え */
.swiper-box {
    position: absolute;
    top: calc( 50% - 20px ); /* 50% から fixボタンの高さ分上げるならtop: calc(50% - 20px);とか */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: fit-content;
    padding-right: 10px;
}
/* 各セクションのスタイル
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
} */
/* ページネーション（右側に配置） */
.swiper-pagination {
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.swiper-pagination-bullet {
    background-color:#d1d1d1;
    width: 12px;
    height: 12px;
    margin: 5px 0;
    opacity: 0.5;
    border-radius: 50%; /*丸に*/
}
.swiper-pagination-bullet:hover{
    cursor:pointer
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background-color:rgba(23,214,243);
    border-radius: 50%; /*丸に*/
}

/* ナビゲーションボタン（上下に配置） */
/* Swiperのデフォルトスタイルを上書き */
.swiper{
    position: relative;
}
.swiper-button-prev,
.swiper-button-next {
    position: absolute !important; /* 強制適用 */
    left: 50% !important; /* 水平方向の中央に */
    transform: translateX(-50%) !important; /* 正確に中央寄せ */
    display: flex;
    justify-content: center;
    align-items: center;
    color:#ffffff00 !important;
    z-index: 0;
}

/* 上ボタン（↑）：画面の上部に配置 */
.swiper-button-prev {
    margin-top: 0 !important; /* 以前の指定をリセット */
    top: 0px !important; /* 上部に配置 */
    transform: translateX(-50%) rotate(90deg) !important; /* 矢印を上向きに */
}

/* 下ボタン（↓）：画面の下部に配置 */
.swiper-button-next {
    top: auto !important; /* 以前の指定をリセット */
    bottom: 60px !important; /* 下部に配置 */
    transform: translateX(-50%) rotate(90deg) !important; /* 矢印を下向きに */
}

.swiper-pagination-bullet {
    width: auto;
    height: fit-content;
    padding: 8px ;
    border-radius: 2px; /* 四角形 */
    color: #333;
    font-size: 10px;
    display: inline-block;
    cursor: pointer;
    background-color: #ddd; /* 初期色（念のため） */
    transition: all 0.3s ease;

    white-space: normal; /* デフォルトはnowrapになっている場合がある */
    line-height: 1.2;
    text-align: center;
}

/* 個別背景色を設定 */
[class*="bullet-"] { background-color: #fff; }