@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;
        width: fit-content;
        margin: 1.5em auto 0;
        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;
}

div.scene-code-block:has(.song-list) {
    border: none;
    padding: 0;
    margin: 0;
}

.song-list {
    text-align: start;
    font-size: .14rem;
    margin-block-end: .16rem;

    >li+li {
        border-block-start: 1px solid #e8e8e8;
    }

    a {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "year subtitle"
            "year song-title"
            "year musician";
        padding-block: .16rem;
        position: relative;

        &::after {
            content: "";
            display: inline-block;
            position: absolute;
            width: .24rem;
            aspect-ratio: 1;
            background-color: #6633cc;
            -webkit-mask-image: url("https://www.print-gakufu.com/assets/images/upload/upload_5625_1.svg");
            mask-image: url("https://www.print-gakufu.com/assets/images/upload/upload_5625_1.svg");
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            inset-inline-end: 0;
            inset-block-start: 50%;
            transform: translateY(-50%);
        }
    }

    .year {
        grid-area: year;
        align-content: center;
        padding-inline-end: .08rem;
        border-inline-end: 1px dotted #888;
        margin-inline-end: .08rem;
    }

    .subtitle {
        grid-area: subtitle;
    }

    .song-title {
        grid-area: song-title;
        font-weight: bold;
    }

    .musician {
        grid-area: musician;
    }
}

p[role="note"] {
    text-align: start;
    padding-inline-start: 1em;
    text-indent: -1em;

    &::before {
        content: "※";
    }
}


.is-desktop .song-list {
    a {
        grid-template-columns: auto auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "year subtitle subtitle"
            "year song-title musician";

        @media(any-hover: hover) {
            &:hover {
                color: #6633cc;
            }
        }
    }

    .musician {
        margin-inline-start: 1em;
    }

    .year {
        padding-inline: .16rem;
        margin-inline-end: .16rem;
    }
}

.scene-post-row+.scene-post-row {
    margin-block-start: .48rem;
}