@charset "UTF-8";
/* --------------------------------------------------------------------------
  Common Update
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .page-hero {
        margin-bottom: calc(90 / var(--font-size) * 1rem);
    }
    .l-page-block + .l-page-block {
        margin-top: calc(80 / var(--font-size) * 1rem);
    }
    .l-page-sec:last-child .l-page-sec__body {
        padding-bottom: calc(100 / var(--font-size) * 1rem);
    }
    .pager-card-heading-category {
        display: none;
    }
}
@media all and (max-width: 767px) {
    .c-header-lv2 {
        --header-size: 22;
    }
    .pager-card-heading-category {
        display: none;
    }
}

/* --------------------------------------------------------------------------
  Hero
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .hero-sec {
    }
    .hero-sec__in {
    }
    .hero-sec .hero-sec__in .hero-sec__body {
        padding-bottom: calc(45 / var(--font-size) * 1rem);
    }
    .hero-sec .c-header-lv2 {
        margin-bottom: calc(81 / var(--font-size) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .hero-sec {
    }
    .hero-sec__in {
    }
    .hero-sec .hero-sec__in .hero-sec__body {
        padding-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .hero-sec .c-header-lv2 {
        margin-bottom: calc(32 / var(--font-size) * 1rem);
    }
}

/* --------------------------------------------------------------------------
  Message Profile
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .message-profile {
        max-width: calc(840 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
    .message-profile__in {
        background: var(--blightblue-color);
        padding-inline: calc(36 / var(--font-size) * 1rem);
        border-radius: calc(20 / var(--font-size) * 1rem);
    }
    .message-profile__body {
        display: flex;
        justify-content: center;
        align-items: start;
        gap: calc(22 / var(--font-size) * 1rem);
        padding-block: calc(40 / var(--font-size) * 1rem);
    }
    .message-profile-thumb {
        width: calc(189 / var(--font-size) * 1rem);
        flex-shrink: 0;
    }
    .message-profile-thumb-img {
        border-radius: calc(16 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .message-profile-read {
        max-width: calc(100% - (189 + 22 / var(--font-size) * 1rem));
    }
    .message-profile-read__in {
    }
    .message-profile-read-name {
    }
    .message-profile-read-name__label {
        font-size: calc(20 / var(--font-size) * 1rem);
        font-weight: bold;
        line-height: 1.45;
    }
    .message-profile-read-post {
    }
    .message-profile-read-post__label {
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .message-profile-read-txt {
        margin-top: calc(16 / var(--font-size) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .message-profile {
    }
    .message-profile__in {
        background: var(--blightblue-color);
        padding-inline: calc(24 / var(--font-size) * 1rem);
        border-radius: calc(20 / var(--font-size) * 1rem);
    }
    .message-profile__body {
        padding-block: calc(24 / var(--font-size) * 1rem);
    }
    .message-profile-thumb {
    }
    .message-profile-thumb-img {
        border-radius: calc(16 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .message-profile-read {
        margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .message-profile-read__in {
    }
    .message-profile-read-name {
    }
    .message-profile-read-name__label {
        font-size: calc(18 / var(--font-size) * 1rem);
        font-weight: bold;
    }
    .message-profile-read-post {
        margin-top: calc(4 / var(--font-size) * 1rem);;
    }
    .message-profile-read-post__label {
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.5;
    }
    .message-profile-read-txt {
        margin-top: calc(12 / var(--font-size) * 1rem);
    }
}

/* --------------------------------------------------------------------------
  Read
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .detail-sec {
    }
    .detail-sec__in {
        max-width: calc(760 / var(--font-size) * 1rem);
    }
    .detail-sec .detail-sec__body {
        padding-top: calc(45 / var(--font-size) * 1rem);
    }
    .detail-header {
        font-size: calc(28 / var(--font-size) * 1rem);
        line-height: 1.8;
        margin-bottom: calc(33 / var(--font-size) * 1rem);
    }
    .detail-header__in {
        padding-inline: calc(24 / var(--font-size) * 1rem);
        position: relative;
        z-index: 0;
    }
    .detail-header__in::before,
    .detail-header__in::after {
        content: "";
        display: block;
        width: calc(30 / var(--font-size) * 1rem);
        padding-top: calc(24 / var(--font-size) * 1rem);
        background: url(/assets/img/message/detail/common/detail_header_deco.svg) no-repeat center / contain;
        position: absolute;
        z-index: -1;
    }
    .detail-header__in::before {
        top: 0;
        left: 0;
        margin-top: calc(2 / var(--font-size) * 1rem);
    }
    .detail-header__in::after {
        bottom: 0;
        right: 0;
        margin-bottom: calc(2 / var(--font-size) * 1rem);
        transform: rotate(180deg);
    }
    .detail-header__label {
        font-family: var(--font-noto);
        font-weight: 600;
        color: var(--main-color-100);
    }
    .detail-content {
    }
    .detail-content-item {
    }
    .detail-content-item--read > *:not(.detail-read-box) + *:not(.c-note,.detail-read-box),
    .detail-read-box > * + * {
        margin-top: 1em;
    }
    .detail-content-item--read * + .detail-read-box,
    .detail-content-item--read .detail-read-box + * {
        margin-block: calc(32 / var(--font-size) * 1rem);
    }
    .detail-content-item + .detail-content-item {
        margin-top: calc(80 / var(--font-size) * 1rem);
    }
    .detail-read-box {
        background: var(--yellow-color-10);
        padding: calc(29 / var(--font-size) * 1rem) calc(27 / var(--font-size) * 1rem);
        border-radius: calc(8 / var(--font-size) * 1rem);
    }
    .detail-read-box * {
        color: var(--main-color-100);
        font-weight: bold;
    }

    .detail-content-item {
    }
    .detail-content-item--illust {
    }
    .detail-illust-thumb {
        max-width: calc(468 / var(--font-size) * 1rem);
        width: 100%;
        margin-inline: auto;
    }
    .detail-illust-thumb-img {
        border-radius: calc(9 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .detail-illust-thumb-note {
        text-align: end;
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.5;
        margin-top: calc(5 / var(--font-size) * 1rem);
    }
    .detail-illust-thumb-note-txt {
        color: var(--gray-color-80);
        font-weight: 500;
    }
    .detail-btn {
        margin-inline: auto;
        text-align: center;
        margin-top: calc(30 / var(--font-size) * 1rem);

        .c-btn {
            display: inline-block;
            --btn-bg-color: var(--lightblue-color-80);
            --btn-border-color: var(--lightblue-color-80);
            --btn-min-height: 44;
            --btn-txt-font-size: 14;
            --btn-px: 24;
            min-width: calc(258 / var(--font-size) * 1rem);
        }
        .c-btn--new-window .c-btn__body {
            flex-direction: row-reverse;
        }
        .c-btn-new-window__label {
            margin-left: 0;
            margin-right: calc(10 / var(--font-size) * 1rem);
        }
        .c-btn-new-window__label .c-svg {
            width: calc(18 / var(--font-size) * 1rem);
        }
        .c-btn--pdf .c-btn__body {
            padding-inline: calc(32 / var(--font-size) * 1rem);
        }
        .c-btn--pdf .c-btn-arrow__label {
            margin-right: calc(6 / var(--font-size) * 1rem);
        }
    }
}
@media all and (max-width: 767px) {
    .detail-sec {
    }
    .detail-sec__in {
        max-width: calc(760 / var(--font-size) * 1rem);
    }
    .detail-sec .detail-sec__body {
        padding-top: calc(24 / var(--font-size) * 1rem);
    }
    .detail-header {
        font-size: calc(20 / var(--font-size) * 1rem);
        line-height: 1.8;
        margin-bottom: calc(20 / var(--font-size) * 1rem);
    }
    .detail-header__in {
        padding-inline: calc(18 / var(--font-size) * 1rem);
        position: relative;
        z-index: 0;
    }
    .detail-header__in::before,
    .detail-header__in::after {
        content: "";
        display: block;
        width: calc(22 / var(--font-size) * 1rem);
        aspect-ratio: 30 / 24;
        background: url(/assets/img/message/detail/common/detail_header_deco.svg) no-repeat center / contain;
        position: absolute;
        z-index: -1;
    }
    .detail-header__in::before {
        top: 0;
        left: 0;
        margin-top: calc(2 / var(--font-size) * 1rem);
    }
    .detail-header__in::after {
        bottom: 0;
        right: 0;
        margin-bottom: calc(2 / var(--font-size) * 1rem);
        transform: rotate(180deg);
    }
    .detail-header__label {
        font-family: var(--font-noto);
        font-weight: 600;
        color: var(--main-color-100);
    }
    .detail-content {
    }
    .detail-content-item {
    }
    .detail-content-item--read > *:not(.detail-read-box) + *:not(.c-note,.detail-read-box),
    .detail-read-box > * + * {
        margin-top: 1em;
    }
    .detail-content-item--read * + .detail-read-box,
    .detail-content-item--read .detail-read-box + * {
        margin-block: calc(32 / var(--font-size) * 1rem);
    }
    .detail-content-item + .detail-content-item {
        margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .detail-read-box {
        background: var(--yellow-color-10);
        padding: calc(20 / var(--font-size) * 1rem);
        border-radius: calc(8 / var(--font-size) * 1rem);
    }
    .detail-read-box * {
        color: var(--main-color-100);
        font-weight: bold;
    }

    .detail-content-item {
    }
    .detail-content-item--illust {
    }
    .detail-illust-thumb {
        max-width: calc(468 / var(--font-size) * 1rem);
        width: 100%;
        margin-inline: auto;
    }
    .detail-illust-thumb-img {
        border-radius: calc(9 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .detail-illust-thumb-note {
        text-align: end;
        font-size: calc(12 / var(--font-size) * 1rem);
        line-height: 1.5;
        margin-top: calc(5 / var(--font-size) * 1rem);
    }
    .detail-illust-thumb-note-txt {
        color: var(--gray-color-80);
        font-weight: 500;
    }
    .detail-btn {
        margin-inline: auto;
        text-align: center;
        margin-top: calc(24 / var(--font-size) * 1rem);

        .c-btn {
            display: inline-block;
            --btn-bg-color: var(--lightblue-color-80);
            --btn-border-color: var(--lightblue-color-80);
            --btn-min-height: 44;
            --btn-txt-font-size: 14;
            --btn-px: 24;
            min-width: calc(258 / var(--font-size) * 1rem);
        }
        .c-btn--new-window .c-btn__body {
            flex-direction: row-reverse;
        }
        .c-btn-new-window__label {
            margin-left: 0;
            margin-right: calc(10 / var(--font-size) * 1rem);
        }
        .c-btn-new-window__label .c-svg {
            width: calc(18 / var(--font-size) * 1rem);
        }
        .c-btn--pdf .c-btn__body {
            padding-inline: calc(32 / var(--font-size) * 1rem);
        }
        .c-btn--pdf .c-btn-arrow__label {
            margin-right: calc(6 / var(--font-size) * 1rem);
        }
    }
}

/* --------------------------------------------------------------------------
  Other
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .other-sec {
    }
    .other-sec__in {
    }
    .other-sec__body {
        padding-top: calc(72 / var(--font-size) * 1rem);
    }
    .other-heading {
        margin-bottom: calc(32 / var(--font-size) * 1rem);
    }
    .other-heading__in {
        display: block;
        background: var(--main-color-100);
        border-radius: calc(8 / var(--font-size) * 1rem);
        padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
        text-align: center;
    }
    .other-heading__label {
        display: block;
        color: var(--white-color);
        font-size: calc(24 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .other-list__container {
    }
    .other-list {
        display: flex;
        gap: calc(24 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    }
    .other-list-item {
        width: calc((100% - (20 / var(--font-size) * 1rem) * 4) / 5);
    }
    .other-profile {
    }
    .other-profile-thumb {
    }
    .other-profile-thumb-img {
        border-radius: calc(8 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .other-profile-thumb-img img {
        transition: all 0.3s ease;
    }
    .other-profile:hover .other-profile-thumb-img img {
        transform: scale(1.07);
    }
    .other-profile-name {
        margin-top: calc(12 / var(--font-size) * 1rem);
    }
    .other-profile-name__in {
        background: var(--main-color-100);
        border-radius: calc(8 / var(--font-size) * 1rem);
        text-align: center;
        padding: calc(8 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    }
    .other-profile-name__label {
        color: var(--white-color);
        font-family: var(--font-family-zen-new);
        font-size: calc(16 / var(--font-size) * 1rem);
        font-weight: bold;
    }
    .other-list-more {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
        margin-top: calc(48 / var(--font-size) * 1rem);
    }

    .back-sec {
    }
    .back-sec__in {
    }
    .back-sec__body {
        padding-top: 0;
    }
    .back-sec .c-btn {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
}
@media all and (max-width: 767px) {
    .other-sec {
    }
    .other-sec__in {
    }
    .other-sec__body {
        padding-top: calc(72 / var(--font-size) * 1rem);
    }
    .other-heading {
        margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .other-heading__in {
        display: block;
        background: var(--main-color-100);
        border-radius: calc(8 / var(--font-size) * 1rem);
        padding: calc(16 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
        text-align: center;
    }
    .other-heading__label {
        display: block;
        color: var(--white-color);
        font-size: calc(18 / var(--font-size) * 1rem);
        line-height: 1.8;
    }
    .other-list__container {
    }
    .other-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(24 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    }
    .other-list-item {
        width: calc((100% - (20 / var(--font-size) * 1rem)) / 2);
    }
    .other-profile {
    }
    .other-profile-thumb {
    }
    .other-profile-thumb-img {
        border-radius: calc(8 / var(--font-size) * 1rem);
        overflow: hidden;
    }
    .other-profile-name {
        margin-top: calc(12 / var(--font-size) * 1rem);
    }
    .other-profile-name__in {
        background: var(--main-color-100);
        border-radius: calc(8 / var(--font-size) * 1rem);
        text-align: center;
        padding: calc(8 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    }
    .other-profile-name__label {
        color: var(--white-color);
        font-family: var(--font-family-zen-new);
        font-size: calc(14 / var(--font-size) * 1rem);
        font-weight: bold;
    }
    .other-list-more {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
        margin-top: calc(48 / var(--font-size) * 1rem);
    }

    .back-sec {
    }
    .back-sec__in {
    }
    .back-sec__body {
        padding-top: 0;
    }
    .back-sec .c-btn {
        max-width: calc(320 / var(--font-size) * 1rem);
        margin-inline: auto;
    }
}