/* 本体の新着商品ブロックと同じ上下余白にする（SP:40px / PC:60px。ec-newItemRole 準拠） */
.plg-rankingManager42Role {
    padding: 40px 0;
}
@media only screen and (min-width: 768px) {
    .plg-rankingManager42Role {
        padding: 60px 0;
    }
}

.plg-rankingManager42Badge__wrapper {
    position: relative;
    display: block;
}

.plg-rankingManager42Badge {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #777777;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.plg-rankingManager42Badge--rank1 {
    background-color: #ffd700;
    color: #8b6508;
}

.plg-rankingManager42Badge--rank2 {
    background-color: #c0c0c0;
    color: #4a4a4a;
}

.plg-rankingManager42Badge--rank3 {
    background-color: #cd7f32;
    color: #5e3a15;
}

.plg-rankingManager42Role__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.plg-rankingManager42Role__list a {
    color: inherit;
    text-decoration: none;
}
.plg-rankingManager42Role__list a:hover {
    text-decoration: none;
}
.plg-rankingManager42Role__list img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
    .plg-rankingManager42Role__list {
        grid-template-columns: repeat(5, 1fr);
    }
}
.plg-rankingManager42Role__more {
    margin-top: 24px;
    text-align: center;
}
.plg-rankingManager42Role__more .ec-blockBtn--top {
    display: inline-block;
    min-width: 260px;
    max-width: 100%;
}

.plg-rankingManager42Role__itemImage {
    margin: 0;
}

.plg-rankingManager42ItemList__colHandle { width: 40px; text-align: center; }
.plg-rankingManager42ItemList__colRank { width: 60px; }
.plg-rankingManager42ItemList__colThumb { width: 70px; }
.plg-rankingManager42ItemList__thumb { max-width: 50px; height: auto; }
.plg-rankingManager42ItemList__colName { width: auto; }
.plg-rankingManager42ItemList__colQuantity { width: 100px; }
.plg-rankingManager42ItemList__colPin { width: 100px; text-align: center; }

.plg-rankingManager42Panel--hidden {
    display: none;
}

/*
 * 専用ページのタブ。土台は本体の ec-topicpath だが、そのままだとパンくずに見えて
 * 「切り替えられる」ことが伝わらないため、選択中を下線で示すタブ表現に寄せる。
 * 色は本体のアクセント色（.ec-color-accent = #DE5D50）に合わせる。
 */
.plg-rankingManager42Tabs {
    flex-wrap: wrap;
    border-bottom: 1px solid #e8e8e8;
    padding: 0;
}

.plg-rankingManager42Tabs .ec-topicpath__divider {
    /* タブでは区切り記号を出さない */
    display: none;
}

.plg-rankingManager42Tabs > li {
    padding: 0;
}

/* 文字色は本体の .ec-topicpath 系と同詳細度だと後勝ちで負けるため、クラスを重ねて上回る */
.plg-rankingManager42Tabs > li.ec-topicpath__item > a,
.plg-rankingManager42Tabs > li.ec-topicpath__item--active > a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.plg-rankingManager42Tabs > li.ec-topicpath__item > a {
    color: #525263;
}

.plg-rankingManager42Tabs > li.ec-topicpath__item > a:hover {
    color: #DE5D50;
}

.plg-rankingManager42Tabs > li.ec-topicpath__item--active > a {
    color: #DE5D50;
    border-bottom-color: #DE5D50;
    font-weight: bold;
}