/* Local OFL 1.1 heading subset; see static/fonts/OFL-YohanHeading.txt. */
@font-face {
    font-family: "Yohan Heading";
    src: url("/static/fonts/yohan-heading-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.site-page .column-banner {
    position: relative;
    background-color: #f0f7fb !important;
    background-image: var(--column-image) !important;
    background-position: center !important;
    background-size: cover !important;
    border-bottom: 1px solid #e1edf4;
    overflow: hidden;
}
.column-banner-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
}
.column-banner-copy {
    position: relative;
    z-index: 1;
    width: 62%;
    padding: 56px 0;
}
.column-banner-title {
    margin: 0;
    color: #18364b;
    font-family: "Yohan Heading", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: clamp(36px, 3.4vw, 56px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .02em;
}
.column-banner-description {
    margin: 24px 0 0;
    max-width: 36em;
    color: #496779;
    font-size: 18px;
    line-height: 1.8;
    text-wrap: pretty;
}
.column-banner-art { display: none; }
.page-about { --column-image: url("/static/picture/column-about-v2.jpg"); }
.page-list, .page-news-detail { --column-image: url("/static/picture/column-news-v2.jpg"); }
.page-case-list, .page-case-detail { --column-image: url("/static/picture/column-cases-v2.jpg"); }
.page-services, .page-service-detail { --column-image: url("/static/picture/column-services-v2.jpg"); }
.page-contact { --column-image: url("/static/picture/column-contact-v2.jpg"); }
.page-message { --column-image: url("/static/picture/column-message-v2.jpg"); }

@media (max-width: 1000px) {
    .column-banner-inner { min-height: 260px; }
    .column-banner-copy { width: 70%; padding: 40px 0; }
    .column-banner-description { font-size: 16px; }
}
@media (max-width: 767px) {
    .site-page .column-banner {
        background-image: linear-gradient(to bottom, #f0f7fb 0%, rgba(240,247,251,.97) 40%, rgba(240,247,251,0) 75%), var(--column-image) !important;
        background-position: center, right bottom !important;
        background-size: cover, auto 220px !important;
        background-repeat: no-repeat !important;
    }
    .column-banner-inner { min-height: 310px; align-items: flex-start; }
    .column-banner-copy { width: 100%; padding: 36px 8px; }
    .column-banner-title { font-size: 34px; }
    .column-banner-description { max-width: 19em; margin-top: 16px; padding-right: 24px; }
}