.ranking-list .ranking-btn-filters__container{
    margin-bottom: var(--btn-filters-margin-bottom-sp);
    row-gap: var(--btn-filter-vert-gap-sp);
    padding-right: var(--btn-filters-padding-sides-sp);
    padding-left: var(--btn-filters-padding-sides-sp);
}

.ranking-list .ranking-btn-filters__heading {
    font-size: var(--btn-filter-label-font-size_sp);
    color: var(--btn-filter-label-font-color);
    text-align: var(--btn-filter-alignment);
}

.ranking-list .ranking-btn-filters__list {
    justify-content: var(--btn-filter-alignment);
    gap: var(--btn-filter-horiz-gap-sp);
}

.ranking-list .ranking-btn-filters__filter .ranking-btn-filters__btn {
    font-size: var(--btn-filter-options-font-size_sp);
    color: var(--btn-filter-options-font-color);
}


.ranking-list .ranking-btn-filters__btn:hover {
    box-shadow: 0 2px 0 var(--btn-filter-active-color);
}

.ranking-list .ranking-btn-filters__btn[data-active="true"] {
    box-shadow: 0 2px 0 var(--btn-filter-active-color);
}

.ranking-list .ranking-btn-filters {
    padding-bottom: var(--btn-filters-padding-bottom-sp);
}

/* PC Desktop */
@media (min-width: 768px) {

    .ranking-list .ranking-btn-filters__container{
        margin-bottom: var(--btn-filters-margin-bottom-pc);
        row-gap: var(--btn-filter-vert-gap-pc);
        padding-right: var(--btn-filters-padding-sides-pc);
        padding-left: var(--btn-filters-padding-sides-pc);
    }

    .ranking-list .ranking-btn-filters__heading {
        font-size: var(--btn-filter-label-font-size_pc);
    }

    .ranking-list .ranking-btn-filters__filter .ranking-btn-filters__btn {
        font-size: var(--btn-filter-options-font-size_pc);
    }

    .ranking-list .ranking-btn-filters__list {
        gap: var(--btn-filter-horiz-gap-pc);
    }

}