/* 各Swiperユニットのラッパー */
.swiper-unit {
    width: 90%;
    max-width: 1080px;
    /* style.css の .container に合わせる */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

/* ① 大きなモニター向けの調整 (style.css 参考に追記) */
@media (min-width: 1320px) {
    .bnrSectionA .swiper-unit {
        max-width: 1300px;
    }
}

@media (min-width: 1620px) {

    .bnrSectionA .swiper-unit {
        max-width: 1600px;
    }
}

.swiper-slide a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #333;
    position: relative;
    /* altタグを配置するための基準 */
}

.swiper-slide img {
    width: 100%;
    vertical-align: bottom;
}

section.bnrSectionA .swiper-slide img {
    border-radius: 8px;
}

.bnrSectionA .slide-alt-tag {
    position: absolute;
    top: -18px;
    left: 5px;
    z-index: 10;
    background-color: #0C446E;
    color: #fff;
    padding: 13px 14px;
    font-size: 1.4rem;
    /* font-weight: 600; */
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
}

/* Swiperコンテナのスタイル */
.swiper-container {
    width: 100%;
    max-width: 100vw;
}

/* 2行表示用の高さを設定 */
.swiper-container[data-rows="2"] {}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    /* font-weight: 600; */
    /* background-color: #f0f0f0; */
    height: auto !important;
}

/* コントロール全体を囲むラッパー */
.swiper-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    gap: 20px;
    margin: 20px 0px;
}

.swiper-button-prev {
    transform: rotate(180deg);
}

/* 再生/停止ボタンのスタイル */
.autoplay-controls button {
    padding: 0;
    border: none;
    background: #FFF;
    cursor: pointer;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 50%;
}

.autoplay-controls button img {
    width: 100%;
    height: 100%;
    display: block;
}

.play-button,
.stop-button {
    background-color: transparent;
    box-shadow: none;
}


/* Swiperのナビゲーションボタン */
.swiper-button-prev,
.swiper-button-next {
    position: static;
    width: 30px;
    height: 30px;
    margin: 0;
    background-color: white;
    background-image: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #f0f0f0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: '';
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    transform: rotate(45deg) translate(-2px, 2px);
}

/* Swiperのページネーション */
.swiper-pagination {
    display: flex;
    align-items: center;
    gap: 5px;
}

.swiper-pagination {
    position: static;
    width: auto !important;
}

.swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    background: transparent;
    opacity: 1;
}

.swiper-pagination-progress-svg {
    width: 100%;
    height: 100%;
}

.swiper-pagination-progress-bg,
.swiper-pagination-progress-fg {
    fill: none;
    stroke-width: 5px;
}

.swiper-pagination-progress-bg {
    stroke: #e0e0e0;
}

.swiper-pagination-bullet-active .swiper-pagination-progress-bg {
    stroke: #888888;
}

.swiper-pagination-progress-fg {
    stroke: #333333;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

svg.swiper-navigation-icon {
    display: none;
}



/* =======================================
  モバイル向けコントロールのレイアウト調整
========================================= */
@media (max-width: 767px) {

    /* コントロール全体のラッパー */
    .swiper-controls-wrapper {
        flex-wrap: wrap;
        /* 子要素の折り返しを許可 */
        row-gap: 15px;
        /* 上段と下段の間の余白 */
    }

    /* 上段: ページネーション */
    .swiper-pagination {
        flex-basis: 100%;
        /* 横幅を100%にして、後続のボタンを強制的に次の行へ送る */
        justify-content: center;
        /* bulletが折り返した際に中央揃えにする */
        flex-wrap: wrap;
        /* bulletの折り返しを許可 */
    }
}


/* =======================================
  モバイル向け mainvisual コントロールの位置調整
========================================= */
@media (max-width: 767px) {

    /* メインビジュアルの上部に50pxの余白を追加 */
    .swiper-unit.mainvisual {
        margin-top: 30px;
    }

    /* site-headerの外に移動されたコントロールラッパーのスタイル */
    .site-header+.swiper-controls-wrapper {
        position: static;
        /* 絶対配置を解除 */
        width: 100%;
        /* 横幅を画面に合わせる */
        max-width: none;
        margin: 20px auto;
        /* 上下に20pxの余白を追加 */
        padding: 0 15px;
        /* 左右に余白を追加 */
        box-sizing: border-box;
    }
}


/*
 * 768px以上のPC幅で、
 * JSによって 'swiper-controls-hidden-pc' クラスが付与されたスライダーの
 * コントロール(.swiper-controls-wrapper)を非表示にする
 */
@media (min-width: 768px) {
    .swiper-unit.swiper-controls-hidden-pc .swiper-controls-wrapper {
        display: none;
    }
}