@charset "utf-8";

/* ここにカスタムCSSを追加 */
.slider-container {
    width: 100%;
    /* 画像の最大幅に合わせて調整 */
    /* max-width: 900px;  */
    background-color: #000; /* コンテナの背景色 */
    box-sizing: border-box;
    margin: 0 auto;
    position: relative; /* 子要素のabsoluteの基準とするため必要 */
}
.box {
    max-width: 900px;
}

/* メインスライダーのスタイル */
.swiper-container.main-swiper {
    width: 100%;
    height: 700px; /* メインスライダーの高さ。元の画像に近い比率に調整 */
    margin-bottom: 15px;
    position: relative; /* 矢印の位置調整のため */
    overflow: hidden;
}

.swiper-container.main-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.swiper-container.main-swiper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* サムネイルスライダーのスタイル */
.swiper-container.thumbs-swiper {
    width: 100%;
    height: 120px; /* サムネイルスライダーの高さ */
    overflow: hidden; /* 6枚以外を見切れるように維持 */
    position: relative; /* 矢印の位置調整のため */
}

.swiper-container.thumbs-swiper .swiper-wrapper {
    /* flexboxの指定はSwiperが内部的に行うので不要、またはSwiperのスタイルを壊す可能性があるので削除 */
}

.swiper-container.thumbs-swiper .swiper-slide {
    width: 100px; /* 1枚あたりの固定幅を設定するか、Swiperに任せる */
    height: 100%;
    opacity: 0.7; /* 非アクティブなサムネイルの透明度 */
    cursor: pointer;
    transition: opacity 0.3s ease, border 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box; /* paddingとborderを含めてwidthとheightを計算 */
}

.swiper-container.thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1; /* アクティブなサムネイルの透明度 */
    border: 3px solid #ff69b4; /* アクティブなサムネイルのボーダー色（ピンク）と太さ */
}

.swiper-container.thumbs-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ナビゲーションボタンのスタイル共通 */
.swiper-button-next,
.swiper-button-prev {
    color: #ff69b4 !important; /* ピンク色に設定 (矢印の色) */
    color: #fff !important; /* ピンク色に設定 (矢印の色) */
    font-size: 25px !important; /* 矢印のサイズ (Swiper 6以降はfont-sizeでSVGのサイズも変わる) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    /* ここが重要: 矢印の背景画像とサイズを強制的に設定 */
    /* Swiperのデフォルト矢印のSVGが背景画像として設定されるように */
    background-image: none !important; /* 他の背景画像をリセット */
    width: var(--swiper-navigation-size, 44px) !important; /* SwiperのCSS変数を使用するか、固定値で指定 */
    height: var(--swiper-navigation-size, 44px) !important;
    
    /* 矢印の形状が四角になっている場合、これらをリセット */
    background-color: transparent !important; /* 背景色を透明に */
    border: none !important; /* ボーダーをなくす */
    box-shadow: none !important; /* シャドウをなくす */
    border-radius: 0 !important; /* 角丸をなくす */

    /* Swiperのデフォルト矢印のコンテンツ（SVG）を表示させるための設定 */
    /* Swiper 6 以降では SVG が直接挿入されるため、以下は通常不要ですが、もしカスタムで何か設定しているなら考慮 */
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

/* 矢印アイコンの色をCSS変数でコントロールする場合 */
/* 通常は --swiper-navigation-color 変数で制御されますが、!important で上書きされているため再度指定 */
:root {
    --swiper-navigation-color: #ff69b4; /* 矢印アイコンのデフォルト色 */
    --swiper-navigation-size: 25px; /* 矢印アイコンのサイズ */
}

/* メインスライダーのナビゲーションボタンをスライダーの外に出す調整 */
.swiper-button-prev {
    left: -50px!important; /* スライダーの左端から外側に押し出す */
    right: auto;
}

.swiper-button-next {
    right: -50px!important; /* スライダーの右端から外側に押し出す */
    left: auto;
}

/* サムネイルスライダーのナビゲーションボタンのスタイル */
.thumbs-swiper .swiper-button-next,
.thumbs-swiper .swiper-button-prev {
    font-size: 20px !important; /* サムネイルの矢印サイズを調整 */
    top: 50%; /* 中央に配置 */
    transform: translateY(-50%);
    /* Swiperのデフォルトでleft/rightが設定されるため、必要であれば調整 */
}


.plant_container {
    display: none;
    background-color: white;
}






/* レスポンシブ対応 */
@media (max-width: 768px) {
    .swiper-container.main-swiper {
        height: 350px;
    }
    .swiper-container.thumbs-swiper {
        height: 100px;
    }
    .swiper-container.thumbs-swiper .swiper-slide {
        width: 80px;
    }
    .swiper-container.main-swiper .swiper-button-prev {
        left: -30px;
    }
    .swiper-container.main-swiper .swiper-button-next {
        right: -30px;
    }
}

@media (max-width: 480px) {
    .swiper-container.main-swiper {
        height: 250px;
    }
    .swiper-container.thumbs-swiper {
        height: 50px;
    }
    .swiper-container.thumbs-swiper .swiper-slide {
        width: 60px;
    }
    .swiper-container.main-swiper .swiper-button-prev {
        left: -20px;
    }
    .swiper-container.main-swiper .swiper-button-next {
        right: -20px;
    }
}



@media ( max-width: 1080px ) {
    .box {
        max-width: 90%;
    }
}