/* Base styles */
:root {
    scroll-behavior: smooth;
    scroll-padding-block-start: .32rem;
}

.is-mobile-tablet body {
    background-color: #4b1e78;
    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 {
    -webkit-margin-after: 0;
    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 */
.related-products {
    background-color: #f0e8ff;
    padding: .24rem;
}

.related-products__headline {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: .2rem;
    line-height: 1;
    padding: .5em 1em;
    border-radius: 1e3px;
    color: #6633cc;
    font-weight: bold;
    background-color: #fff;
    border: .02rem solid currentColor;
    margin-inline: auto;
}

.related-products>*+* {
    -webkit-margin-before: .24rem;
    margin-block-start: .24rem;
}

.related-products__description small {
    font-size: .9em;
}

.related-products__category-title {
    font-size: .16rem;
    font-weight: bold;
    -webkit-border-after: 1px solid currentColor;
    border-block-end: 1px solid currentColor;
}

.related-products__item {
    display: flex;
    -webkit-border-after: 1px dotted currentColor;
    border-block-end: 1px dotted currentColor;
    padding-block: .16rem;
    justify-content: space-between;
    gap: 1em;
    align-items: center;
}

.related-products__item-link {
    flex: 0 0 auto;
}

.related-products__item-link a {
    font-size: .12rem;
    background-color: #4b1e78;
    text-box-edge: cap alphabetic;
    color: #fff;
    padding: 1em 2em;
    border-radius: .03rem;
}

/*  楽曲 */
.topics-text section h2~* {
    -webkit-margin-before: .48rem;
    margin-block-start: .48rem;
}

.is-mobile-tablet .topics-text section h2~* {
    padding-inline: .24rem;
}

.song-catalog {
    -webkit-margin-before: .64rem;
    margin-block-start: .64rem;
}

.song-catalog__heading {
    font-size: .24rem;
    font-weight: bold;
    text-align: center;
    padding: .32rem;
    color: #fff;
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, .5);
    background-blend-mode: multiply;
}

.song-catalog__heading--masterpiece {
    background-image: url(https://www.print-gakufu.com/assets/images/upload/upload_5990_1.jpg);
}

.song-catalog__heading--childrens-song {
    background-image: url(https://www.print-gakufu.com/assets/images/upload/upload_5988_1.jpg);
}

.song-catalog__heading--foreign {
    background-image: url(https://www.print-gakufu.com/assets/images/upload/upload_5989_1.jpg);
}

.song-catalog__title {
    font-size: .18rem;
    font-weight: bold;
}

.song-catalog__title::before {
    content: "\1D103";
    color: #6633cc;
    line-height: 1;
    font-size: .32rem;
    font-weight: initial;
    vertical-align: middle;
    -webkit-margin-end: .08rem;
    margin-inline-end: .08rem;
}

.song-catalog__tie-up {
    font-size: .12rem;
    line-height: 1.35;
    color: #5f5f5f;
}

.is-mobile-tablet .lead-text p {
    margin-block: .24rem;
    padding-inline: .24rem;
    text-align: justify;
    /* font-size: .875em; */
}

.note {
    border: 2px solid #d31e5c;
    margin: .32rem .16rem;
    padding: .24rem;
    border-radius: .05rem;
    position: relative;
}

.note__headline {
    font-weight: bold;
    position: absolute;
    display: inline-block;
    padding-inline: .5em;
    background-color: #fff;
    color: #d31e5c;
    line-height: 1;
    inset-block-start: -.5em;
}

.note__list li {
    list-style-type: disc;
    -webkit-margin-start: 1.2em;
    margin-inline-start: 1.2em;
}

.note__list li+li {
    -webkit-margin-before: .08rem;
    margin-block-start: .08rem;
}

.note__list a {
    color: #d31e5c;
    font-size: .12rem;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-style: dashed;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    align-items: flex-start;
}

.has-icon {
    display: flex;
    gap: .5em;
}

.has-icon::before {
    flex: 0 0 1em;
}

.note__list a.has-icon::before {
    content: url(https://www.print-gakufu.com/assets/images/upload/upload_5625_1.svg);
    -webkit-filter: invert(36%) sepia(82%) saturate(6691%) hue-rotate(327deg) brightness(85%) contrast(95%);
    filter: invert(36%) sepia(82%) saturate(6691%) hue-rotate(327deg) brightness(85%) contrast(95%);
}

.song-catalog__tie-up.has-icon::before {
    content: url(https://www.print-gakufu.com/assets/images/upload/upload_5924_1.svg);
    -webkit-filter: invert(32%) sepia(12%) saturate(10%) hue-rotate(319deg) brightness(94%) contrast(87%);
    filter: invert(32%) sepia(12%) saturate(10%) hue-rotate(319deg) brightness(94%) contrast(87%);
}

.song-catalog__creators.has-icon::before {
    content: url(https://www.print-gakufu.com/assets/images/upload/upload_5923_1.svg);
    -webkit-filter: invert(32%) sepia(12%) saturate(10%) hue-rotate(319deg) brightness(94%) contrast(87%);
    filter: invert(32%) sepia(12%) saturate(10%) hue-rotate(319deg) brightness(94%) contrast(87%);
    translate: 0 2px;
}

.song-catalog__version {
    -webkit-margin-before: .16rem;
    margin-block-start: .16rem;
}

.song-catalog__version>* {
    display: grid;
    grid-template-columns: 5em 1fr 4em;
    -moz-column-gap: .16rem;
    column-gap: .16rem;
    padding: .12rem .4rem .12rem .12rem;
    align-items: center;
}

.song-catalog__version-header {
    background-color: #e6daff;
    color: #4b1e78;
    mix-blend-mode: multiply;
    border-radius: .03rem;
    font-weight: bold;
    padding-block: .06rem;
}

.song-catalog__link {
    position: relative;
    -webkit-border-after: 1px dotted #888;
    border-block-end: 1px dotted #888;
}

.song-catalog__link .song-catalog__part {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    line-height: 1;
    padding: .5em;
    border-radius: .03rem;
    font-weight: bold;
}

[class*="song-catalog__part--"] {
    color: #fff;
}

.song-catalog__part--female-3 {
    background-color: #f48;
}

.song-catalog__part--female-4 {
    background-color: #d31e5c;
}

.song-catalog__part--male-3 {
    background-color: #42a5f5;
}

.song-catalog__part--male-4 {
    background-color: #1565c0;
}

.song-catalog__part--mixed-3 {
    background-color: #b266ff;
}

.song-catalog__part--mixed-4 {
    background-color: #8b38ca;
}

.song-catalog__part--unison-2 {
    background-color: #f60;
}

.song-catalog__part small {
    font-size: .8em;
    font-weight: initial;
}

.song-catalog__link::after {
    content: url(https://www.print-gakufu.com/assets/images/upload/upload_5625_1.svg);
    width: .24rem;
    aspect-ratio: 1;
    line-height: 1;
    position: absolute;
    inset: 50% .08rem auto auto;
    translate: 0 -50%;
    -webkit-filter: invert(14%) sepia(64%) saturate(2375%) hue-rotate(255deg) brightness(93%) contrast(101%);
    filter: invert(14%) sepia(64%) saturate(2375%) hue-rotate(255deg) brightness(93%) contrast(101%);
}

.song-catalog__link .song-catalog__arranger {
    line-height: 1.35;
}

.song-catalog__duration {
    justify-self: end;
}

.song-catalog__duration[aria-label] {
    justify-self: center;
}

.sticky-sentinel {
    height: 1px;
    margin-top: -1px;
    visibility: hidden;
    pointer-events: none;
}

.accordion-item+.accordion-item {
    -webkit-margin-before: 1em;
    margin-block-start: 1em;
}

.accordion-item summary::before {
    content: "";
    position: absolute;
    display: block;
    width: 1em;
    height: 2px;
    background: #7030a0;
    border-radius: 3px;
    inset-block-start: calc(50% - 1px);
    inset-inline-end: .08rem;
}

.accordion-item summary::after {
    content: "";
    position: absolute;
    display: block;
    width: 2px;
    height: 1em;
    background: #7030a0;
    border-radius: 3px;
    inset-block-start: 1em;
    inset-inline-end: calc(.5em + .08rem - 1px);
    transition: opacity .4s;
}

.accordion-item[open] summary::after {
    opacity: 0;
}

.accordion-item>ul {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease-out;
}

.is-mobile-tablet .song-catalog__inner-link {
    display: flex;
    flex-wrap: wrap;
    gap: .08rem .16rem;
}

.song-catalog__inner-link li a {
    color: #6633cc;
    border-block-end: .01rem dashed currentColor;
}

.song-catalog__inner-link li a::before {
    content: "#";
}

.sp-footer-nav {
    margin-block-start: .8rem;
    position: sticky;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}

.sp-footer-nav a {
    padding: .08rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    min-height: 44px;
    gap: .02rem;
}

.sp-footer-nav img {
    filter: invert(100%) sepia(5%) saturate(28%) hue-rotate(39deg) brightness(105%) contrast(100%);
    width: auto !important;
    aspect-ratio: 1;
    height: .32rem !important;
}

/* PC */
.is-desktop .section-topics-detail div.topics-photo {
    -webkit-margin-after: .24rem;
    margin-block-end: .24rem;
    background-color: #f1f1f1;
    border-radius: .09rem;
}

.is-desktop .section-topics-detail div.topics-photo img {
    max-width: 640px;
}

.is-desktop .topics-text {
    display: grid;
    grid-template-areas:
        "lead lead"
        "main aside";
    grid-template-columns: 1fr calc((100% - 640px)/2 - .32rem);
    gap: .32rem;
}

.is-desktop .lead-text {
    grid-area: lead;
}

.is-desktop .note {
    margin: .5em 0 .32rem;
}

.is-desktop .song-catalog__inner-link {
    display: none;
}

.is-desktop .song-catalog:first-of-type {
    -webkit-margin-before: 0;
    margin-block-start: 0;
}

.is-desktop .song-catalog__version>* {
    grid-template-columns: 6em 1fr 4em;
    -moz-column-gap: .24rem;
    column-gap: .24rem;
    padding-inline: .24rem .52rem;
}

.is-desktop .song-catalog__link .song-catalog__part {
    width: 100%;
    text-align: center;
}

.is-desktop .pc-column-aside {
    grid-area: aside;
}

.is-desktop .pc-column-main {
    grid-area: main;
    display: grid;
    grid-template-columns: 1fr 640px;
    grid-template-areas:
        "list main-contents";
    gap: .32rem;
    align-items: start;
}

.is-desktop .pc-column-main-list {
    grid-area: list;
}

.is-desktop .pc-column-main-contents {
    grid-area: main-contents;
}

.is-desktop .song-catalog__heading {
    border-radius: .09rem;
}

.is-desktop .related-products__item-name {
    line-height: 1.5;
}

.is-desktop .feature-navigation {
    margin: 0;
    padding: 0 0 0 .48rem;
    position: -webkit-sticky;
    position: sticky;
    inset-block-start: .24rem;
    z-index: 10;
    background-color: #fff;
}

.is-desktop .feature-navigation summary {
    line-height: 1;
    padding-block: 1em;
    -webkit-border-after: .01rem solid currentColor;
    border-block-end: .01rem solid currentColor;
    position: relative;
    cursor: pointer;
    list-style: none;
}

.is-desktop .accordion-item:focus {
    outline-color: #6633cc;
    outline-offset: 2px;
}

.is-desktop .feature-navigation summary:focus {
    outline-color: #6633cc;
    outline-offset: 3px;
}

.is-desktop .feature-navigation a {
    display: block;
    -webkit-border-after: .01rem dotted currentColor;
    border-block-end: .01rem dotted currentColor;
    padding: .5em 1em;
}

.is-desktop .feature-navigation a:focus {
    outline-color: #6633cc;
    outline-offset: -3px;
}

.is-desktop .feature-navigation__heading {
    display: block;
    position: absolute;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    left: 0;
    font-weight: bold;
    border-radius: .05rem;
    font-size: .18rem;
    color: #545454;
    letter-spacing: .25em;
}