@charset "UTF-8";

/* =========================================================
   Vermicular風 スタイリッシュ化・他エリアへの干渉完全防止版
   ＋ 高さ揃え・レビュー件数はみ出し修正版
========================================================= */

/* --- 1. スタイル適用範囲の厳密なロック --- */
.ranking-slider-container, 
.ranking-slider-container *,
.anchor-link-list,
.anchor-link-list * {
    font-family: 'Noto Sans JP', sans-serif !important;
    color: #262837 !important;
}

/* --- 2. ページ内リンク（アンカーリンク） --- */
.anchor-link-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 40px 0 60px 0 !important;
    list-style: none !important;
    justify-content: center !important;
}

.anchor-link-list li {
    width: calc(25% - 11.25px) !important;
    margin: 0 !important;
}

.anchor-link-list a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #262837 !important;
    border: 1px solid #262837 !important;
    border-radius: 30px !important;
    padding: 15px 20px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.anchor-link-list a:hover {
    background-color: #ffffff !important;
    color: #262837 !important;
}

.anchor-link-list a::before,
.anchor-link-list a::after {
    display: none !important;
}

/* --- 3. セクション区切り線とレイアウト --- */
.ranking-slider-container {
    position: relative;
    padding-bottom: 60px !important;
    margin-bottom: 60px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ebs-wrapper:last-of-type .ranking-slider-container {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.ranking-slider-container h2 {
    font-weight: 700 !important;
    font-size: 28px !important;
    margin-bottom: 40px !important;
    text-align: center !important;
    order: 1 !important;
}

.ranking-slider-container .ranking-swiper { order: 2 !important; padding-bottom: 45px !important; }
.ranking-slider-container .ebs-link-right { order: 3 !important; margin-top: 30px !important; justify-content: center !important; display: flex !important; }
.ranking-slider-container .page-link-rankingcate { order: 4 !important; margin-top: 15px !important; justify-content: center !important; display: flex !important; border: none !important; background: transparent !important; }
.ranking-slider-container .page-link-rankingcate div { display: block !important; width: 100% !important; border: none !important; background: transparent !important; }

/* --- 4. ボタンデザイン統一（もっと見る・カテゴリから探す） --- */
.ranking-slider-container .ebs-link-right::before,
.ranking-slider-container .ebs-link-right::after,
.ranking-slider-container .page-link-rankingcate::before,
.ranking-slider-container .page-link-rankingcate::after {
    display: none !important;
    content: none !important;
}

.ranking-slider-container .ebs-link-right a,
.ranking-slider-container .page-link-rankingcate a {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    background-color: #262837 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 15px 30px !important;
    text-decoration: none !important;
    border: 1px solid #262837 !important;
    text-align: center !important;
    background-image: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
}

.ranking-slider-container .ebs-link-right a::before,
.ranking-slider-container .ebs-link-right a::after,
.ranking-slider-container .page-link-rankingcate a::before,
.ranking-slider-container .page-link-rankingcate a::after {
    display: none !important;
    content: none !important;
}

.ranking-slider-container .ebs-link-right a:hover, 
.ranking-slider-container .page-link-rankingcate a:hover {
    background-color: #ffffff !important;
    color: #262837 !important;
}

/* --- 5. 商品カードとランキングバッジ --- */
.ranking-slider-container .ranking-swiper {
    width: 100%;
    height: auto;
    padding: 0 10px 40px 10px !important; 
    box-sizing: border-box;
    overflow: hidden !important; 
}

.ranking-slider-container .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important; 
    align-items: stretch !important; /* カードの高さを一番高いものに合わせる */
}

.ranking-slider-container .swiper-slide {
    height: auto;
    box-sizing: border-box;
}

.ranking-slider-container .ranking-swiper:not(.swiper-initialized) .swiper-slide {
    width: 19.23% !important; 
    flex-shrink: 0;
}

/* ▼ 修正：カード内をFlexboxにして高さを揃える ▼ */
.ranking-slider-container .swiper-slide a {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important; /* 中身を縦並びに */
    align-items: center !important;
    height: 100% !important; /* 親の高さいっぱいに広がる */
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.ranking-slider-container .swiper-slide a:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; 
    transform: translateY(-5px) !important; 
    border-color: #e0e0e0 !important;
}

.ranking-slider-container .ebs-items__rank {
    display: inline-flex !important;
    border: 1px solid #262837 !important;
    padding: 4px 16px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin: 0 auto 15px auto !important;
    background-color: #ffffff !important;
    text-shadow: none !important;
    letter-spacing: 1px !important;
}

.ranking-slider-container .ebs-items__rank img {
    display: none !important; 
}

.ranking-slider-container .ebs-items__image { 
    aspect-ratio: 1 / 1; 
    margin-bottom: 15px !important; 
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ranking-slider-container .ebs-items__image img {
    max-width: 100%; 
    height: auto;
    object-fit: contain;
}

.ranking-slider-container .ebs-u-text-ellipsis {
    margin-bottom: 10px;
    font-size: 14px !important; 
    font-weight: 500 !important;
    line-height: 1.6 !important;
    max-height: 3.2em; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100% !important;
}

/* ▼ 修正：価格要素に auto を設定し、強制的に一番下に押し下げる ▼ */
.ranking-slider-container .ranking-item-price { 
    font-size: 18px !important; 
    font-weight: 700 !important; 
    margin-bottom: 5px;
    display: block;
    margin-top: auto !important; /* 空白を自動で埋めて下部に固定 */
}

.ranking-slider-container .ebs-badge--solid {
    background-color: #f0f0f0 !important; 
    border-radius: 20px !important; 
    font-size: 11px !important;
    padding: 4px 12px !important;
}

/* ▼ 修正：レビュー件数のはみ出し防止とレイアウト調整 ▼ */
.ranking-slider-container .itemStars {
    display: flex !important;
    flex-wrap: wrap !important; /* 幅が足りない場合は自動で改行させる */
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 8px !important; /* 星と件数の間の余白 */
    width: 100% !important;
    margin-top: 5px !important;
    font-size: 12px !important; /* レビュー件数の文字サイズ */
    color: #666666 !important; /* 件数の色を少し落として上品に */
}

.ranking-slider-container .ebs-stars {
    display: inline-flex !important;
    align-items: center !important;
}

.ranking-slider-container .i\:starS, 
.ranking-slider-container .i\:star { color: #ccc !important; }
.ranking-slider-container .i\:starS { color: #d4af37 !important; }

/* --- 6. スライダーナビゲーション --- */
.ranking-slider-container .swiper-button-next, 
.ranking-slider-container .swiper-button-prev {
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid #e0e0e0 !important; 
    top: 40% !important; 
    margin-top: -24px !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.ranking-slider-container .swiper-button-prev { left: -10px !important; }
.ranking-slider-container .swiper-button-next { right: -10px !important; }

.ranking-slider-container .swiper-button-next:hover,
.ranking-slider-container .swiper-button-prev:hover {
    background-color: #f6f6f6 !important; 
    transform: translateY(-50%) scale(1.05) !important;
}

.ranking-slider-container .swiper-button-next::after, 
.ranking-slider-container .swiper-button-prev::after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 2px solid #262837 !important; 
    border-right: 2px solid #262837 !important;
    font-family: unset !important; 
}
.ranking-slider-container .swiper-button-next::after { transform: translateX(-2px) rotate(45deg) !important; }
.ranking-slider-container .swiper-button-prev::after { transform: translateX(2px) rotate(-135deg) !important; }

.ranking-slider-container .swiper-pagination { bottom: 0px !important; }
.ranking-slider-container .swiper-pagination-bullet { background: #ccc !important; opacity: 1 !important; margin: 0 7px !important; }
.ranking-slider-container .swiper-pagination-bullet-active { background: #262837 !important; }

/* =========================================================
   7. SP（スマートフォン）表示時の調整
========================================================= */
@media screen and (max-width: 767px) {
    .anchor-link-list { margin: 30px 0 40px 0 !important; }
    .anchor-link-list li { width: calc(50% - 7.5px) !important; }
    .anchor-link-list a { font-size: 13px !important; padding: 12px 10px !important; }
    
    .ranking-slider-container { padding-bottom: 40px !important; margin-bottom: 40px !important; }
    .ranking-slider-container h2 { font-size: 22px !important; margin-bottom: 30px !important; }
    
    .ranking-slider-container .ranking-swiper:not(.swiper-initialized) .swiper-slide {
        width: 45.45% !important;
    }
    
    .ranking-slider-container .swiper-slide a { padding: 15px !important; }
    .ranking-slider-container .ebs-u-text-ellipsis { font-size: 11px !important; margin-bottom: 8px !important; }
    .ranking-slider-container .ranking-item-price { font-size: 14px !important; }
    
    /* ▼ 修正：スマホ表示時はレビューの星と件数を縦並びに変更 ▼ */
    .ranking-slider-container .itemStars {
        flex-direction: column !important; /* 縦並びの指示 */
        gap: 2px !important; /* 隙間を詰める */
        font-size: 11px !important; /* スマホ用に文字を小さく */
    }
    
    .ranking-slider-container .swiper-button-next, 
    .ranking-slider-container .swiper-button-prev { display: none !important; }
    
    .ranking-slider-container .ebs-link-right,
    .ranking-slider-container .page-link-rankingcate { margin-top: 15px !important; padding: 0 15px !important; }
    
    .ranking-slider-container .ebs-link-right a,
    .ranking-slider-container .page-link-rankingcate a {
        font-size: 13px !important;
        padding: 13px 15px !important;
    }
}