/* 例：スライダーの横幅を最大 640px（あるいはバナー本来のサイズ）に制限したい場合 */
#recommend-slider {
    max-width: 640px !important; /* ←ここの数値をバナーの横幅（例: 500px や 600px）に合わせて調整してください */
    width: 100% !important;
    margin: 0 auto !important; /* 中央に寄せる */
}

/* スライド下の「・」の位置や色の調整（必要に応じて） */
#recommend-slider .splide__pagination {
    bottom: -20px; /* バナーの少し下に表示 */
}


/* 1. ドットを包むリスト全体の余計な伸縮・高さをリセット */
#recommend-slider .splide__pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important; /* スライドの下に少し余白を作る */
    list-style: none !important;
    height: auto !important;
}

#recommend-slider .splide__pagination li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 4px !important; /* ドット同士の左右の間隔 */
}

/* 2. ドット（buttonタグ）自体を「絶対的な正円」に強制固定 */
#recommend-slider .splide__pagination__page {
    /* サイズを完全に固定（縦長に伸びるのを防ぐ） */
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    
    /* 余計な余白やアスペクト比、線の設定をすべて消去 */
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-indent: -9999px !important; /* ボタン内のテキストを画面外へ飛ばす */
    overflow: hidden !important;
    
    /* 形状と色 */
    border-radius: 50% !important; 
    background-color: #cccccc !important; /* 通常時のドット色 */
    opacity: 0.5 !important;
    cursor: pointer;
    transition: opacity .2s ease, background-color .2s ease;
}

/* 3. 現在表示中のアクティブなドット */
#recommend-slider .splide__pagination__page.is-active {
    background-color: #cd2653 !important; /* アクティブ時のドット色（ピンク系） */
    opacity: 1 !important;
}
/* --- PC表示（768px以上）のときだけの特別ルール --- */
@media screen and (min-width: 768px) {
    #recommend-slider {
        /* スライダー全体の横幅を少し絞り、右側（丸みのある部分）に避難用の余白を作ります */
        max-width: 85% !important; 
        
        /* 左寄せにして、右側に自動で余白（margin-right）を作ります */
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* スライド内の画像サイズを枠いっぱいにフィットさせる */
#recommend-slider .splide__slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px; /* 必要であれば、バナーの角も少し丸くすると馴染みます */
}