/* Base styles */
:root {
    scroll-behavior: smooth;
    scroll-padding-block-start: .32rem;
    --ci-color: #4b1e78;
}

.is-mobile-tablet body {
    background-color: var(--ci-color);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, メイリオ, "Droid Sans", sans-serif;
}

.is-desktop img {
    height: auto;
}

.is-mobile-tablet .container {
    background-color: #fff;
}

div.container {
    overflow: clip;
}

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

.is-desktop .section-topics-detail div.wrapper {
    /* padding-inline: 0; */
    width: 100%;
    max-width: 1400px;
}

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

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

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

.is-desktop .section-topics-detail div.topics-photo img {
    width: 100%;
}

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

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

.is-desktop .section-topics-detail div.topics-photo {
    margin-block-end: 0;
}

.is-mobile-tablet .section-topics-detail .sns[data-v-0219b7cb] {
    margin: .8rem .24rem .24rem;
    border-radius: .5rem;
    padding: .16rem;
    width: calc(100% - .48rem) !important;
    display: flex;
    align-items: stretch;
}

div.sns div[data-v-0219b7cb] {
    color: #7d7d7d;
    align-items: center;
    gap: .05rem;
    margin: 0;
}

div.sns ul li[data-v-0219b7cb] {
    margin: 0;
    padding-inline: .5em;
}

/* Unique styles */
:root {
    --blue: #66c9f2;
    --light-blue: #e1edf5;
}

.is-mobile-tablet .section-topics-detail h1.common-title {
    color: #fff;
    font-size: .24rem;
    background-color: var(--blue);
    padding-block: 1em;
    margin-block-end: 0;
}

.is-mobile-tablet .section-topics-detail div.topics-content {
    background: var(--light-blue);
    padding-block-end: .24rem;
}

.is-mobile-tablet .section-scene-post div.topics-text {
    padding: .24rem;
}

.is-mobile-tablet .lead-text {
    margin-block-end: .24rem;
}

.lead-text {
    display: flex;
    align-items: baseline;
    gap: .16rem;
    padding: .16rem .24rem;
    border-radius: 9px;
    border: 3px solid #fff;
    background-color: #F2EC66;
    color: color-mix(in srgb, #F2EC66, #000 80%);
    text-align: justify;
    font-weight: 500;
    box-shadow: 3px 5px 3px -3px rgba(0, 0, 0, .25);
}

.lead-text::before {
    content: "!";
    display: flex;
    width: .24rem;
    aspect-ratio: 1;
    background-color: color-mix(in srgb, #F2EC66, #000 80%);
    clip-path: circle();
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    flex: 0 0 auto;
}

.genre-wapper {
    display: grid;
    gap: .24rem;
}

.genre-card {
    overflow: hidden;
    border-radius: .09rem;
    background-color: #fff;
    box-shadow: 3px 5px 3px -3px rgba(0, 0, 0, .25);
}

.genre-contents {
    padding: .24rem;
}

.genre-heading {
    font-size: .16rem;
    font-weight: bold;
}

.genre-detail-list {
    display: grid;
    margin-block-start: .16rem;
}

.genre-detail-list>*+* {
    margin-block-start: .08rem;
}

.genre-detail-list__difficulty-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: .08rem;
    column-gap: .08rem;
}

.genre-detail-list__difficulty-2 span {
    grid-area: 1/1/2/3;
}

.genre-detail-list__difficulty-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: .08rem;
    column-gap: .08rem;
}

.genre-detail-list a {
    display: block;
    position: relative;
    border: .01rem solid #ccc;
    border-radius: .05rem;
    line-height: 1.5;
    padding: 1em 2em 1em 1em;
}

.genre-detail-list a::after {
    content: url(https://www.print-gakufu.com/assets/images/upload/upload_5625_1.svg);
    width: 1.5em;
    aspect-ratio: 1;
    line-height: 1;
    position: absolute;
    inset-inline-end: .75em;
    inset-block-start: 50%;
    translate: 0 -50%;
    filter: invert(14%) sepia(64%) saturate(2375%) hue-rotate(255deg) brightness(93%) contrast(101%);
}

/* PC */
.is-desktop .section-topics-detail h1.common-title {
    font-size: .32rem;
    padding-block: 1em;
    color: #fff;
    border-image: conic-gradient(var(--blue) 0 0) fill 0 / 1 / 0 100vw;
    margin-block: 0;
}

.is-desktop .topics-text {
    padding-block: .48rem;
    border-image: conic-gradient(var(--light-blue) 0 0) fill 0 / 1 / 0 100vw;
}

.is-desktop .lead-text {
    margin-block-end: .48rem;
    font-weight: bold;
}

.is-desktop .genre-wapper {
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-areas: "piano guitar drums vocal"
        "piano guitar drums vocal"
        "winds strings ensemble wellness"
        "winds strings electone youth"; */
    grid-template-areas: "electone guitar drums winds"
        "electone guitar vocal winds"
        "strings piano wellness ."
        "ensemble piano youth .";
}

.is-desktop .genre-card--piano {
    grid-area: piano;
}

.is-desktop .genre-card--guitar {
    grid-area: guitar;
}

.is-desktop .genre-card--drums {
    grid-area: drums;
}

.is-desktop .genre-card--vocal {
    grid-area: vocal;
}

.is-desktop .genre-card--winds {
    grid-area: winds;
}

.is-desktop .genre-card--strings {
    grid-area: strings;
}

.is-desktop .genre-card--ensemble {
    grid-area: ensemble;
}

.is-desktop .genre-card--wellness {
    grid-area: wellness;
}

.is-desktop .genre-card--electone {
    grid-area: electone;
}

.is-desktop .genre-card--youth {
    grid-area: youth;
}

.is-desktop .genre-detail-list a {
    font-size: .12rem;
}

@media(any-hover: hover) {
    .genre-detail-list a:hover {
        background-color: var(--blue);
        color: #fff;
        border-color: var(--blue);
        opacity: 1 !important;
    }

    .genre-detail-list a:hover::after {
        filter: invert(96%) sepia(0%) saturate(7500%) hue-rotate(348deg) brightness(108%) contrast(100%);
    }
}