@charset "UTF-8";

/* 共通部分は informationCompact.css、記事固有の寸法はここで管理する。 */
.information-detail-page .information-filters a,
.information-detail-page .information-filters span {
    font-size: clamp(14px, .95vw, 18px);
}

body.information-detail-page .page-side-navigation .information-filters a {
    color: #987e6c;
    text-decoration: none;
}

body.information-detail-page .page-side-navigation .information-filters a:hover,
body.information-detail-page .page-side-navigation .information-filters a:focus-visible {
    color: #68431d;
}

.information-detail-page .information-detail {
    padding: 0 12vw 3.525vw;
}

.information-detail-page .information-detail-image {
    width: min(100%, 36.15vw);
    margin-top: 0;
    margin-bottom: 4.125vw;
}

.information-detail-page .information-detail-meta {
    gap: 1.05vw;
    margin-bottom: .75vw;
    font-size: clamp(14px, .975vw, 18.75px);
}

.information-detail-page .information-detail-meta .information-tag {
    flex: 0 0 80px;
    min-width: 0;
    padding: 0 .3vw;
    letter-spacing: .08em;
}

.information-detail-page .information-detail-heading h2 {
    font-size: clamp(18px, 1.2vw, 23px);
}

.information-detail-page .information-detail-image img,
.information-detail-page .information-detail-body img {
    font-size: 14px !important;
    line-height: 1.5;
}

.information-detail-page .information-detail-body {
    padding-top: 1.35vw;
    font-size: clamp(14px, .9vw, 17.25px);
}

.information-detail-page .information-detail-navigation {
    gap: 4.05vw;
    margin-top: 3.75vw;
    font-size: clamp(14px, .75vw, 14.25px);
}

.information-detail-page .information-related {
    padding: 6vw 12vw;
}

.information-detail-page .information-related-inner {
    grid-template-columns: 3.15vw minmax(0, 1fr);
    gap: 1.575vw;
}

.information-detail-page .information-related h2 {
    font-size: clamp(14px, .975vw, 18.75px);
}

.information-detail-page .information-related .information-article-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .information-detail-page .information-detail {
        padding: 0 48px 40px;
    }

    .information-detail-page .information-detail-image {
        width: min(100%, 525px);
        margin-bottom: 32px;
    }

    .information-detail-page .information-detail-meta {
        gap: 16px;
        margin-bottom: 12px;
    }

    .information-detail-page .information-detail-body {
        padding-top: 20px;
    }

    .information-detail-page .information-related {
        padding: 40px 48px;
    }

    .information-detail-page .information-related-inner {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767.98px) {
    .information-detail-page .information-detail-image {
        margin-top: 0;
    }

    .information-detail-page .information-detail {
        padding-top: 32px;
        padding-inline: 40px;
    }

    .information-detail-page .information-detail-meta {
        margin-bottom: 20px;
    }

    .information-detail-page .information-detail-navigation {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 32px;
    }

    .information-detail-page .information-detail-navigation a,
    .information-detail-page .information-detail-navigation button {
        min-height: 44px;
    }

    .information-detail-page .information-related {
        padding: 32px 40px;
    }

    .information-detail-page .information-related-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .information-detail-page .information-related h2 {
        writing-mode: horizontal-tb;
    }

    .information-detail-page .information-related h2::after {
        width: auto;
        height: 1px;
        min-height: 0;
    }
}