.ranking-list .ranking-list__bottom-btn-text {
    font-size: var(--btn-link-font-size-sp);
    color: var(--btn-link-font-color);
}

.ranking-list .ranking-list__heading {
    text-align: var(--list-heading-alignment);
    font-size: var(--list-heading-font-size-sp);
    color: var(--list-heading-font-color);
}

.ranking-list .ranking-list__heading-container {
    margin-bottom: var(--list-heading-margin-bottom);
    padding-right: var(--list-heading-padding-sides-sp);
    padding-left: var(--list-heading-padding-sides-sp);
}

.ranking-list .ranking-item__ranking-icon[data-index="1"] {
    background-color: var(--ranking-rank-1-color);
}

.ranking-list .ranking-item__ranking-icon[data-index="2"] {
    background-color: var(--ranking-rank-2-color);
}

.ranking-list .ranking-item__ranking-icon[data-index="3"] {
    background-color: var(--ranking-rank-3-color);
}

.ranking-list .ranking-item__ranking-icon {
    background-color: var(--ranking-rank-4-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"][data-index="1"] .icon-svg path {
    fill: var(--ranking-rank-1-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"][data-index="2"] .icon-svg path {
    fill: var(--ranking-rank-2-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"][data-index="3"] .icon-svg path {
    fill: var(--ranking-rank-3-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"][data-index="1"] .ranking-item__rank {
    color: var(--ranking-rank-1-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"][data-index="2"] .ranking-item__rank {
    color: var(--ranking-rank-2-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"][data-index="3"] .ranking-item__rank {
    color: var(--ranking-rank-3-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"] .ranking-item__rank {
    color: var(--ranking-rank-4-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon"] .icon-svg path {
    fill: var(--ranking-rank-4-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"][data-index="1"] .icon-svg path {
    fill: var(--ranking-rank-1-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"][data-index="1"] .icon-svg circle {
    fill: var(--ranking-rank-1-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"][data-index="2"] .icon-svg path {
    fill: var(--ranking-rank-2-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"][data-index="2"] .icon-svg circle {
    fill: var(--ranking-rank-2-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"][data-index="3"] .icon-svg path {
    fill: var(--ranking-rank-3-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"][data-index="3"] .icon-svg circle {
    fill: var(--ranking-rank-3-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"] .icon-svg path {
    fill: var(--ranking-rank-4-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="ribbon-full"] .icon-svg circle {
    fill: var(--ranking-rank-4-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"][data-index="1"] .icon-svg path {
    fill: var(--ranking-rank-1-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"][data-index="2"] .icon-svg path {
    fill: var(--ranking-rank-2-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"][data-index="3"] .icon-svg path {
    fill: var(--ranking-rank-3-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"] .icon-svg path {
    fill: var(--ranking-rank-4-color);
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"][data-index="1"] {
    background-color: transparent;
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"][data-index="2"] {
    background-color: transparent;
}

.ranking-list .ranking-item__ranking-icon.ranking-item__ranking-icon[data-ranking-icon="star"][data-index="3"] {
    background-color: transparent;
}

.ranking-list .ranking-item__ranking-icon[data-ranking-icon="corner"][data-index="1"] {
    background: linear-gradient(to bottom right, var(--ranking-rank-1-color) 50%, var(--ranking-rank-1-color) 50%, transparent 50%);
}

.ranking-list .ranking-item__ranking-icon[data-ranking-icon="corner"][data-index="2"] {
    background: linear-gradient(to bottom right, var(--ranking-rank-2-color) 50%, var(--ranking-rank-2-color) 50%, transparent 50%);
}

.ranking-list .ranking-item__ranking-icon[data-ranking-icon="corner"][data-index="3"] {
    background: linear-gradient(to bottom right, var(--ranking-rank-3-color) 50%, var(--ranking-rank-3-color) 50%, transparent 50%);
}

.ranking-list .ranking-item__ranking-icon[data-ranking-icon="corner"] {
    background: linear-gradient(to bottom right, var(--ranking-rank-4-color) 50%, var(--ranking-rank-4-color) 50%, transparent 50%);
}

.ranking-list .ranking-item__rank {
    color: var(--ranking-rank-number-color);
}

.ranking-list .ranking-list__slider .ranking-list__slider-btn {
    background-color: var(--slider-btns-color);
}

.ranking-list .ranking-list__slider .ranking-list__slider-btn:focus {
    background-color: var(--slider-btns-color);
}

.ranking-list .ranking-list__slider .ranking-list__slider-btn svg path{
    stroke: var(--slider-arrow-color);
}

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

    .ranking-list .ranking-item__add-btn::before {
        font-size: var(--add-to-cart-btn-font-size-pc);
    }

    .ranking-list .ranking-list__heading {
        font-size: var(--list-heading-font-size-pc);
    }

    .ranking-list .ranking-list__heading-container{
        padding-right: var(--list-heading-padding-sides-pc);
        padding-left: var(--list-heading-padding-sides-pc);        
    }

    .ranking-list .ranking-list__bottom-btn-text {
        font-size: var(--btn-link-font-size-pc);
    }

}