@charset "utf-8";

/* ============================================
   モバイル/タブレット用ヘッダー安定化 (アイコン消失対策)
   ============================================ */
@media (max-width: 991.98px) {

    header,
    .navbar {
        /* 【必須】固定位置を強制。アイコン消失対策 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;

        /* 最前面に表示 */
        z-index: 9999 !important;

        /* GPU描画の安定化と描画優先 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        opacity: 0.999;
        will-change: transform, opacity;
        -webkit-overflow-scrolling: touch;
    }
}


:root {
    --swiper-navigation-size: 40px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bottom: 17px;
    --swiper-pagination-bullet-width: 13px;
    --swiper-pagination-bullet-height: 13px;
    --swiper-theme-color: #ffaa3a;
    --swiper-pagination-bullet-inactive-color: #b7b7b7;
    --swiper-pagination-bullet-inactive-opacity: 1;
}


/* 初期は非表示 */
.mainSwiper {
    opacity: 0;
    transition: opacity 1.0s ease;
}

/* 表示状態 */
.mainSwiper.is-visible {
    opacity: 1;
}

/* ============================================
   メインバナー 背景（共通）
   ============================================ */

section#main-banner {
    height: auto;
    background-image: url(../images/mainimage-back.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #ebedef;
    position: relative;
    z-index: 1;
}

/* ============================================
   Swiper 基本構造
   ============================================ */

#mainimage {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    background-color: #fff;
    /* 【必須】横スクロール防止のため、親要素でクリップ */
    /*overflow: hidden; */
    position: relative;
}

.mainSwiper {
    position: relative;
    z-index: 10;
    /* 【必須】隣接スライドを見せないため、ここでクリップ */
    overflow: hidden;
    transform: translate3d(0, 0, 0);

    /* Swiper用CSS変数（このスライダー専用） */

}

.swiper {
    width: 100%;
}

.swiper-pagination-bullet {
    transition: all 0.3s ease;
}

.swiper-pagination-bullet:hover {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

/* ============================================
   【推奨追加】Swiperスライドの描画不具合対策
   ============================================ */

.swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* アクティブスライドのレイヤーを安定化 */
.swiper-slide-active,
.swiper-slide-duplicate-active,
.swiper-slide-next {
    z-index: 1 !important;
}

/* ============================================
   矢印（＜ ＞）
   ============================================ */

/* 矢印の親要素が #mainimage に変更されたため、セレクタを修正 */
#mainimage .swiper-button-prev,
#mainimage .swiper-button-next {
    /* 【PC矢印色修正】強制的に色を黄色に */
    /*color: #ffaa3a !important;*/
    z-index: 50;
    font-weight: 900;

    /* 【PC矢印位置修正】絶対位置を #mainimage を基準として設定 */
    /*position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;*/

    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    /*cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;*/
}

/* 【PC矢印位置修正】横スクロール防止のため、コンテンツの内側に配置 */
#mainimage .swiper-button-prev {
    left: -50px !important;
}

#mainimage .swiper-button-next {
    right: -50px !important;
}

/* ============================================
   ページネーション（●●●）
   ============================================ */

/*.mainSwiper .swiper-pagination-bullet {
    background: #b7b7b7;
    opacity: 1;
}

.mainSwiper .swiper-pagination-bullet-active {
    background: #ffaa3a;
}*/

/* ============================================
   スライド1枚のとき（JS連動）
   ============================================ */

.mainSwiper.is-single-slide .swiper-pagination {
    display: none !important;
}

@media (max-width: 767.98px) {
    .mainSwiper.is-single-slide {
        padding-bottom: 0 !important;
    }
}

/* ============================================
   ブレークポイント別制御
   ============================================ */

/* タブレット以下：矢印非表示＋ページネーション少し大きく */
@media (max-width: 991.98px) {

    /* #mainimageの子要素として矢印を制御 */
    #mainimage .swiper-button-prev,
    #mainimage .swiper-button-next {
        /* 【モバイル矢印非表示修正】強制的に非表示 */
        display: none !important;
    }

    :root {
        --swiper-pagination-bottom: 17px;
        --swiper-pagination-bullet-width: 14px;
        --swiper-pagination-bullet-height: 14px;
    }
}

/* スマートフォン大以下：さらに大きく＋下に逃がす */
@media (max-width: 767.98px) {

    :root {
        --swiper-pagination-bullet-width: 16px;
        --swiper-pagination-bullet-height: 16px;
        /* ページネーションをスライドの下部へ移動 */
        --swiper-pagination-bottom: -36px;
        /* 適切な位置にページネーションが来るよう、下に余白を追加 */
        /*padding-bottom: 50px !important;*/
    }
}

/* ============================================
   メインスライド サイズ復元（旧FlexSlider互換）
   ============================================ */

/* PC共通 */
@media (min-width: 768px) {
    #mainimage {
        margin: 0 auto;
    }
}

/* 992px以上 */
@media (min-width: 992px) {
    #mainimage {
        max-width: 930px;
    }
}

/* 1200px以上（高さ固定あり） */
@media (min-width: 1200px) {
    #mainimage {
        max-width: 1110px;
        height: 370px;
    }

    .mainSwiper,
    .swiper-wrapper,
    .swiper-slide {
        height: 370px;
    }

    .swiper-slide img {
        height: 370px;
        object-fit: cover;
    }
}

.swiper-slide a[href="#"] {
    pointer-events: none;
    cursor: default;
}