@charset "utf-8";

:root {
    scroll-behavior: smooth;
    scroll-padding-block-start: .32rem;
}

.topics-text img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.section-topics-detail.section-scene-post {
    color: #333;
    font-variant-east-asian: proportional-width;
    line-break: strict;
    text-autospace: normal;
}

.is-desktop .section-topics-detail {
    h1.common-title {
        font-size: .24rem;
        margin-block: 1.5em .5em;
        color: #222;
    }

    div.topics-photo img {
        width: 100%;
    }
}

.is-mobile-tablet body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", Meiryo, sans-serif;
}

.is-mobile-tablet .section-topics-detail div.topics-photo {
    margin-block-end: .32rem;
}

.is-mobile-tablet .section-topics-detail div.topics-content {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 .24rem;
}

.is-mobile-tablet .section-topics-detail div.topics-text>div:first-of-type {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.is-mobile-tablet .section-topics-detail div.topics-text>div:first-of-type>div:first-of-type {
    font-size: revert !important;
}

.ranking-tabs {
    display: flex;
    gap: .02rem;
    overflow-x: auto;
    margin-block-end: .32rem;
    border-block-end: 3px solid #63c;
}

.ranking-tabs>button[role="tab"] {
    flex-shrink: 0;
    font-weight: 500;
    color: #63c;
    border: 2px solid #63c;
    border-block-end: 0;
    padding: .8em 1.2em;
    border-radius: 8px 8px 0 0;
    text-box: text trim-both;
}

.ranking-tabs>button[disabled] {
    border-color: transparent;
    background-color: #ddd;
    color: #777;
    cursor: not-allowed;
}

.ranking-tabs>button[role="tab"][aria-selected="true"] {
    background-color: #63c;
    color: #fff;
}

.monthly-ranking-heading {
    color: #333;
    font-size: .2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5em;
    margin-block-end: .08rem;
}

.monthly-ranking-heading::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 1lh;
    background-color: #63c;
    border-radius: 3px;
}

.monthly-ranking__item {
    border-block-end: 1px solid #aaa;
    display: grid;
    grid-template-columns: 2em 1fr;
    gap: .16rem;
    align-items: center;
    padding-block: .16rem;
    line-height: 1.5;
}

.monthly-ranking__rank {
    justify-self: center;
    font-size: .24rem;
    font-weight: 700;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #bbb;
    font-style: italic;
}

.monthly-ranking__item:first-child .monthly-ranking__rank {
    color: #d0b76f;
}

.monthly-ranking__item:nth-child(2) .monthly-ranking__rank {
    color: #9f9f9f;
}

.monthly-ranking__item:nth-child(3) .monthly-ranking__rank {
    color: #cd9d6e;
}

.monthly-ranking__link {
    font-size: .12rem;
    position: relative;
}

.monthly-ranking__link::after {
    content: "";
    display: inline-block;
    width: .24rem;
    aspect-ratio: 1;
    background-color: #63c;
    mask-image: url(https://www.print-gakufu.com/assets/images/upload/upload_7804_1.svg);
    position: absolute;
    inset: auto 0 0 auto;
}

.monthly-ranking__song-info {
    display: flex;
    flex-direction: column;
    gap: .04rem;
}

.monthly-ranking__title {
    font-size: .16rem;
    font-weight: 700;
}

.monthly-ranking__tieup {
    font-size: .12rem;
    color: #666;
}

.monthly-ranking__score-info {
    display: flex;
    gap: .08rem;
    margin-block-start: .08rem;
}

.monthly-ranking__score-info>* {
    border: 1px solid transparent;
    font-size: .12rem;
    padding: .25em 1em;
    text-box: text trim-both;
    border-radius: 999px;
}

.monthly-ranking__performance-style {
    color: color-mix(in oklch, #63c, #fff 12%);
    border-color: color-mix(in oklch, #63c, #fff 25%);
    background-color: #fff;
}

.monthly-ranking__difficulty {
    color: #fff;
    font-weight: 400;
    background-color: var(--difficulty-color);
    border-color: var(--difficulty-color);

    @media(any-hover: hover) {
        &:hover {
            background-color: color-mix(in srgb, var(--difficulty-color) 80%, black);
        }
    }
}

.monthly-ranking__difficulty--intro {
    --difficulty-color: #8affaa;
    color: #1c3522;
}

.monthly-ranking__difficulty--intro-basic {
    --difficulty-color: #81ff59;
    color: #0f2f05;
}

.monthly-ranking__difficulty--basic {
    --difficulty-color: #afff19;
    color: #2f4703;
}

.monthly-ranking__difficulty--basic-inter {
    --difficulty-color: #fffa2a;
    color: #2d2c05;
}

.monthly-ranking__difficulty--intermediate {
    --difficulty-color: #ffd242;
    color: #1F2937;
}

.monthly-ranking__difficulty--inter-advanced {
    --difficulty-color: #ff973a;
    color: #331c08;
}

.monthly-ranking__difficulty--advanced {
    --difficulty-color: #f51d0c;
}

.monthly-ranking__difficulty--grade-10 {
    --difficulty-color: #8FFFB0;
    color: #163524;
}

.monthly-ranking__difficulty--grade-9 {
    --difficulty-color: #66FF72;
    color: #0D3712;
}

.monthly-ranking__difficulty--grade-9-8 {
    --difficulty-color: #63FF47;
    color: #234607;
}

.monthly-ranking__difficulty--grade-8 {
    --difficulty-color: #78FF29;
    color: #2B4707;
}

.monthly-ranking__difficulty--grade-7 {
    --difficulty-color: #ACFF33;
    color: #2B4707;
}

.monthly-ranking__difficulty--grade-7-6 {
    --difficulty-color: #DCFF3D;
    color: #1F2937;
}

.monthly-ranking__difficulty--grade-6 {
    --difficulty-color: #FFF84D;
    color: #1F2937;
}

.monthly-ranking__difficulty--grade-5 {
    --difficulty-color: #FFCD42;
    color: #1F2937;
}

.monthly-ranking__difficulty--grade-5-4 {
    --difficulty-color: #FF9729;
    color: #331C08;
}

.monthly-ranking__difficulty--grade-5-3 {
    --difficulty-color: #FF510A;
    color: #331C08;
}

.monthly-ranking__difficulty--grade-4 {
    --difficulty-color: #e51e0d;
}

p[role="note"] {
    font-size: .12rem;
    margin-block-start: .16rem;
}

.other-ranking {
    margin-block-start: .32rem;

    .other-ranking-heading {
        font-weight: 700;
        font-size: .16rem;
        display: flex;
        gap: 1em;
        align-items: center;

        &::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 1lh;
            background-color: #63c;
            border-radius: 3px;
        }
    }

    .other-ranking-list {
        margin-block-start: .16rem;
        list-style: disc;
        padding-inline-start: 2em;

        li::marker {
            color: #63c;
        }

        >li+li {
            margin-block-start: .08rem;
        }

        a {
            color: color-mix(in oklch, #63c, #fff 20%);
            text-decoration-line: underline;
            text-decoration-color: currentColor;
            text-decoration-style: dotted;
            text-decoration-thickness: 1px;
            text-underline-offset: .25em;
        }
    }
}

.is-desktop {
    .section-topics-detail div.box-common {
        padding: 0;
    }

    .ranking-tabs>button[role="tab"] {
        flex-grow: 1;
    }

    .monthly-ranking__link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1em;

        &::after {
            position: static;
        }
    }

    .monthly-ranking__song-info {
        flex-grow: 1;
    }

    .monthly-ranking__score-info {
        margin-block-start: 0;

        &:has(*:empty) {
            gap: 0;
        }
    }

    .monthly-ranking__difficulty:empty {
        padding: 0;
        border: none;
    }
}