/* Keep the news hero in document flow at every viewport width. */
#pc-news-box .news-bg,
#pc-news-box .news-title-box,
#pc-news-box .news-main-box {
    width: 80%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

#pc-news-box .news-bg {
    height: auto;
}

#pc-news-box .news-bg img {
    display: block;
    width: 100%;
    height: auto;
}

/* The artwork has a transparent lower-left corner for this heading. */
#pc-news-box .news-title-box {
    position: relative;
    margin-top: clamp(-240px, -12vw, -110px);
}

#pc-news-box .news-main-box {
    margin-bottom: 64px;
}

#pc-news-box .news-main-flex {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 40px;
}

#pc-news-box .news-main,
#pc-news-box .news-main-menu,
#sp-news-box .news-main,
#sp-news-box .news-main-menu {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

#pc-news-box .news-main-border {
    width: 100%;
}

#pc-news-box .news-main-link,
#sp-news-box .news-main-link {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 12px 0;
}

#pc-news-box .news-main-link-date,
#sp-news-box .news-main-link-date {
    flex: 0 0 auto;
    width: auto;
}

#pc-news-box .news-main-link-title,
#sp-news-box .news-main-link-title {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
}

#pc-news-box .news-main-link p,
#sp-news-box .news-main-link p {
    margin: 0;
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
    #pc-news-box .news-main-flex {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 767px) {
    #sp-news-box .news-bg,
    #sp-news-box .news-title-box,
    #sp-news-box .news-main-box {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    #sp-news-box .news-bg img {
        display: block;
        width: 100%;
        height: auto;
    }

    #sp-news-box .news-title-box {
        margin-top: 16px;
    }

    #sp-news-box .sp-news-title p {
        box-sizing: border-box;
        max-width: 100%;
        width: max-content;
        margin: 5px 0;
        font-size: clamp(22px, 6vw, 30px);
    }

    #sp-news-box .news-main-box {
        margin-top: 32px;
        margin-bottom: 40px;
    }

    #sp-news-box .news-main-menu {
        margin-top: 40px;
    }
}