/* =======================================================
   イージーマイショップ スライダーカスタマイズ（PC見切れ修正＆ドット化）
   ======================================================= */

/* --- 1. 画面外への突き抜けを防止（bodyのみに適用して見切れを防ぐ） --- */
html, body {
    overflow-x: hidden !important; 
}

/* 前回の原因箇所：ここの制限を解除し、はみ出しを許可して見切れを直します */
.esydsgn-width-full-always,
.esydsgn-overflow-hidden {
    overflow: visible !important;
}

/* --- 2. メインスライダーの幅を狭めて中央配置 --- */
.esydsgn-overflow-hidden .swiper-container:not(.gallery-thumbs) {
    width: 80% !important; 
    margin: 0 auto !important;
    overflow: visible !important;
}

/* --- 3. スライドの透過設定 --- */
.esydsgn-overflow-hidden .swiper-container:not(.gallery-thumbs) .swiper-slide {
    opacity: 0.3 !important;
    transition: opacity 0.3s ease !important;
}
.esydsgn-overflow-hidden .swiper-container:not(.gallery-thumbs) .swiper-slide-active {
    opacity: 1 !important;
}

/* --- 4. 矢印ボタンの位置 --- */
.swiper-button-prev { left: -15% !important; }
.swiper-button-next { right: -15% !important; }

/* --- 5. サムネイルを「●●●（ドット）」に改造する裏技CSS --- */
.esydsgn-overflow-hidden .gallery-thumbs {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding-top: 20px !important; /* ドット上の余白 */
}
.esydsgn-overflow-hidden .gallery-thumbs .swiper-wrapper {
    justify-content: center !important; /* ドットを中央寄せ */
}
.esydsgn-overflow-hidden .gallery-thumbs .swiper-slide {
    width: 12px !important; /* ドットの幅 */
    height: 12px !important; /* ドットの高さ */
    background-color: #cccccc !important; /* 非アクティブなドットの色（グレー） */
    border-radius: 50% !important; /* 丸くする */
    margin: 0 6px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    opacity: 1 !important;
}
.esydsgn-overflow-hidden .gallery-thumbs .swiper-slide-thumb-active {
    background-color: #ff6699 !important; /* ★今見ているドットの色（ピンク系にしています） */
}
.esydsgn-overflow-hidden .gallery-thumbs img {
    display: none !important; /* 中身のサムネイル画像自体は隠す */
}

/* --- 6. スマホ表示時の最適化 --- */
@media only screen and (max-width: 700px) {
    .esydsgn-overflow-hidden .swiper-container:not(.gallery-thumbs) {
        width: 85% !important; 
    }
    .swiper-button-prev { 
        left: -12% !important;
        width: 25px;
        height: 25px;
    }
    .swiper-button-next {
        right: -12% !important;
        width: 25px;
        height: 25px;
    }
}