@charset "utf-8";

.main_contents.ranking-page {
    margin-top: 30px;
}

.ranking-page__header {
    margin-bottom: 16px;
    padding: clamp(1.2rem, 0.4889rem + 0.9259vw, 1.6rem) clamp(1.2rem, -0.9333rem + 2.7778vw, 2.4rem);
    background-color: var(--ranking-page-header-background-color);
    border-bottom: 1px solid var(--ranking-page-header-border-color);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ranking-page__title {
    margin-bottom: 8px;
    font-size: clamp(3.2rem, 1.0667rem + 2.7778vw, 4.4rem);
    line-height: 1.2;
    font-weight: bold;
    color: var(--ranking-page-title-text-color);
}

.ranking-page__lead {
    margin-bottom: 24px;
    color: var(--ranking-page-lead-text-color);
    font-size: 1.5rem;
    font-weight: bold;
}

.ranking-tabs {
    padding: 6px;
    display: flex;
    gap: 8px;
    background: var(--ranking-page-tabs-background-color);
    border: 1px solid var(--ranking-page-tabs-border-color);
    border-radius: 1000px;
    list-style: none;
}

.ranking-tab,
.ranking-tab:link,
.ranking-tab:visited {
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    min-height: 48px;
    border: none;
    border-radius: 1000px;
    background: var(--ranking-page-tab-background-color);
    color: var(--ranking-page-tab-text-color);
    font: inherit;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.ranking-tab:hover,
.ranking-tab:active,
.ranking-tab:focus {
    text-decoration: none;
    background: var(--ranking-page-tab-background-color-hover);
}

.ranking-tab.active,
.ranking-tab.active:link,
.ranking-tab.active:visited {
    background: var(--ranking-page-tab-active-background-color);
    color: var(--ranking-page-tab-active-text-color);
    cursor: default;
}

/* カード見た目（順位バッジ本体は master.css） */
.ranking-page .video_list_table > li.rl_wd,
#body-x_home .ranking-section .video_list_table > li.rl_wd {
    padding: 4px 4px 8px 4px;
    border-radius: 12px;
    border: 1px solid var(--ranking-page-card-border-color);
    background: var(--ranking-page-card-background-color);
    box-shadow: var(--ranking-page-card-box-shadow);
}

.ranking-more-wrap {
    margin-top: 32px;
    text-align: center;
}

.ranking-more,
.ranking-more:link,
.ranking-more:visited {
    padding: 12px 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(320px, 100%);
    min-height: 48px;
    border: 1px solid var(--ranking-page-more-border-color);
    border-radius: 4px;
    background: var(--ranking-page-more-background-color);
    color: var(--ranking-page-more-text-color);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s;
    box-shadow: var(--ranking-page-more-box-shadow);
}

.ranking-more:hover,
.ranking-more:active,
.ranking-more:focus {
    text-decoration: none;
    background: var(--ranking-page-more-background-color-hover);
}

/* グリッド（列数は master.css と共通） */
.ranking-page .video_list_table,
#body-x_home .ranking-section .video_list_table {
    row-gap: 32px;
}

@media (max-width: 650px) {
    .ranking-tabs {
        width: 100%;
    }

    .ranking-tabs__item {
        flex: 1 1 0;
        min-width: 0;
    }

    .ranking-tab,
    .ranking-tab:link,
    .ranking-tab:visited {
        width: 100%;
        min-width: 0;
    }

    .ranking-page .video_list_table,
    #body-x_home .ranking-section .video_list_table {
        gap: 0;
        border-radius: 12px;
        border: 1px solid var(--ranking-page-list-border-color);
        background: var(--ranking-page-card-background-color);
        box-shadow: var(--ranking-page-list-box-shadow);
        overflow: hidden;
    }

    .ranking-page .video_list_table > li.rl_wd,
    #body-x_home .ranking-section .video_list_table > li.rl_wd {
        padding: 8px 8px 12px 8px;
        border-radius: 0;
        border: none;
        box-shadow: none;
        border-bottom: 1px solid var(--ranking-page-list-divider-color);
        border-right: 1px solid var(--ranking-page-list-divider-color);
    }

    .ranking-page .video_list_table > li.rl_wd:nth-child(2n),
    #body-x_home .ranking-section .video_list_table > li.rl_wd:nth-child(2n) {
        border-right: none;
    }

    /* 最終行の下線を外し、ul の border と二重にならないようにする */
    .ranking-page .video_list_table > li.rl_wd:last-child,
    .ranking-page .video_list_table > li.rl_wd:nth-last-child(2):nth-child(odd),
    #body-x_home .ranking-section .video_list_table > li.rl_wd:last-child,
    #body-x_home .ranking-section .video_list_table > li.rl_wd:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }

}