/* --------- column-detail --------- */
.column-detail {
    display: grid;
    place-items: center;
    gap: 60px;
}

.column-detail__header {
    display: grid;
    gap: 20px;
}

.column-detail__title {
    padding-bottom: 20px;
    color: var(--white900);
    font-feature-settings: "palt";
    font-size: 32px;
    letter-spacing: 0.07em;
    line-height: 1.5;
    border-bottom: 1px solid var(--white700);
}

.column-detail__mv {
    max-width: 700px;

    img {
        border-radius: 20px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

.column-detail__body {
    max-width: 700px;
    color: var(--white900);
    --base-font-size: 15px;
    font-size: var(--base-font-size);
    letter-spacing: 0.05em;
    line-height: 1.7;

    :is(h2, h3, h4, h5) {
        font-feature-settings: "palt";
        letter-spacing: 0.07em;
        line-height: 1.5;
    }

    h2 {
        margin-block: 100px 30px;
        font-size: calc(var(--base-font-size) * 1.73); /* ≒ 26px */

        + figure img {
            border-radius: 20px;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }
    }

    h3 {
        margin-block: 80px 30px;
        padding: 3px 0 3px 10px;
        font-size: calc(var(--base-font-size) * 1.47); /* ≒ 22px */
        border-left: 6px solid;
        border-image: var(--bud-gradient) 1;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }

    h4 {
        margin-block: 50px 20px;
        font-size: calc(var(--base-font-size) * 1.2); /* ≒ 18px */
        font-size: 18px;
    }

    h5 {
        margin: 0 0 .5em 0;
        font-size: var(--base-font-size);
    }

    p:not(:last-child) {
        margin-bottom: 1.66em;
    }

    a {
        color: var(--white900);
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }

        img {
            transition: opacity .3s;

            &:hover {
                opacity: .7;
            }
        }
    }

    figure {
        margin-bottom: 30px;
    }

    .has-text-align-right {
        text-align: right;
    }

    .has-text-align-center {
        text-align: center;
    }
    
    strong {
        color: #36db4f;
    }

    .wp-block-group {
        padding: 35px;
        border: 1px solid var(--white700);
    }

    iframe {
        margin: 0 auto 1.66em !important;
    }
}

/* --------- ez-toc --------- */
#ez-toc-container {
    display: grid;
    gap: 33px;
    margin-top: 60px;
    padding: 60px;
    border-color: var(--white700);
    border-radius: unset;

    :is(a, a:visited) {
        margin-bottom: 10px;
        color: var(--white900);
        font-weight: 400;
    }

    .ez-toc-title {
        font-weight: 400;
    }
}

.movie-sales-link {
    max-width: 700px;
    transition: opacity .3s;

    &:hover {
        opacity: .7;
    }
}

@media (width<768px) {
    /* --------- column-detail --------- */
    .column-detail {
        grid-area: article;
    }

    /* --------- ez-toc --------- */
    #ez-toc-container {
        padding: 40px 30px;
    }
}