/* All selected category images use native navy pixels, 2026-11-05. */
.s_visual.is-category-hero-native {
    background-color: #08213b;
}
.s_visual.is-category-hero-native::before {
    background: linear-gradient(to bottom, #08213b 0, #08213b max(0px, calc(100% - 36.43vw)), rgba(8, 33, 59, 0) max(90px, calc(100% - 36.43vw + 90px)));
}
.s_visual.is-category-hero-native::after {
    content: none;
}
.shinil-products-page .sp-hero,
.shinil-products-page .sp-detail-hero {
    background: #0a1c36 url('/images/sub/s_visual7-software-muted-20261030.webp') no-repeat center bottom / 100% auto;
}
.shinil-products-page .sp-hero::before,
.shinil-products-page .sp-detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #08213b 0, #08213b max(0px, calc(100% - 36.43vw)), rgba(8, 33, 59, 0) max(90px, calc(100% - 36.43vw + 90px)));
    pointer-events: none;
}
.shinil-products-page .sp-hero::after,
.shinil-products-page .sp-detail-hero::after {
    content: none;
}
.shinil-products-page .sp-detail-hero h1 {
    max-width: min(40vw, 640px);
}
@media all and (min-width: 1920px) {
    .shinil-products-page .sp-hero,
    .shinil-products-page .sp-detail-hero {
        background-size: 1920px auto;
    }
}
@media all and (max-width: 768px) {
    .s_visual.is-category-hero-native::before,
    .shinil-products-page .sp-hero::before,
    .shinil-products-page .sp-detail-hero::before {
        background: linear-gradient(to bottom, #08213b 0, #08213b calc(100% - min(52vw, 220px) - 32px), rgba(8, 33, 59, 0) calc(100% - min(52vw, 220px) + 12px));
    }
    .shinil-products-page .sp-hero,
    .shinil-products-page .sp-detail-hero {
        background-size: auto min(52vw, 220px);
        background-position: right bottom 32px;
        align-items: flex-start;
    }
    .shinil-products-page .sp-hero {
        height: 480px;
        min-height: 480px;
    }
    .shinil-products-page .sp-detail-hero {
        height: 520px;
        min-height: 520px;
    }
    .shinil-products-page .sp-hero-inner,
    .shinil-products-page .sp-detail-hero-inner {
        padding-top: 110px;
    }
    .shinil-products-page .sp-detail-hero h1 {
        max-width: none;
    }
}
@media all and (max-width: 568px) {
    .shinil-products-page .sp-hero {
        height: 440px;
        min-height: 440px;
        border-radius: 0;
    }
    .shinil-products-page .sp-detail-hero {
        height: 480px;
        min-height: 480px;
        border-radius: 0;
    }
    .shinil-products-page .sp-hero-inner,
    .shinil-products-page .sp-detail-hero-inner {
        padding-top: 96px;
    }
}



/* Careers: match the subdued category artwork on desktop and mobile. */
.s_visual.is-careers-hero-art {
    background-color: #0a1c34;
}
.s_visual.is-careers-hero-art::before {
    background: linear-gradient(to bottom, #0a1c34 0, #0a1c34 max(0px, calc(100% - 36.43vw)), rgba(10, 28, 52, 0) max(90px, calc(100% - 36.43vw + 90px)));
}
@media all and (max-width: 768px) {
    .s_visual.is-careers-hero-art {
        background-size: auto min(52vw, 220px);
        background-position: right bottom 32px;
    }
    .s_visual.is-careers-hero-art::before {
        background: linear-gradient(to bottom, #0a1c34 0, #0a1c34 calc(100% - min(52vw, 220px) - 32px), rgba(10, 28, 52, 0) calc(100% - min(52vw, 220px) + 12px));
    }
}

/* Company / development: reduce the page title by about 15%. */
.s_visual.is-compact-category-title .sv_tit h3 {
    font-size: 5.1rem;
}
@media all and (max-width: 1280px) {
    .s_visual.is-compact-category-title .sv_tit h3 {
        font-size: 4.25rem;
    }
}
@media all and (max-width: 976px) {
    .s_visual.is-compact-category-title .sv_tit h3 {
        font-size: 3.4rem;
    }
}
@media all and (max-width: 568px) {
    .s_visual.is-compact-category-title .sv_tit h3 {
        font-size: 3rem;
    }
}

/* Flat company growth art and the selected in-page product banner. */
.s_visual.is-company-growth-art {
    background-color: #0a1c34;
}
.s_visual.is-company-growth-art::before {
    background: linear-gradient(to bottom, #0a1c34 0, #0a1c34 max(0px, calc(100% - 36.36vw)), rgba(10, 28, 52, 0) max(90px, calc(100% - 36.36vw + 90px)));
}
.shinil-products-page .sp-product-page-banner .business_top .img span {
    background-color: #0d2349;
    background-image: url('/images/sub/product/product-items-2d-20261030.webp');
    background-size: cover;
    background-position: center center;
}
@media all and (max-width: 768px) {
    .s_visual.is-company-growth-art::before {
        background: linear-gradient(to bottom, #0a1c34 0, #0a1c34 calc(100% - min(52vw, 220px) - 32px), rgba(10, 28, 52, 0) calc(100% - min(52vw, 220px) + 12px));
    }
    .shinil-products-page .sp-product-page-banner .business_top {
        height: 320px;
        padding: 26px 24px;
    }
    .shinil-products-page .sp-product-page-banner .business_top .img span {
        background-size: auto clamp(150px, 47vw, 220px);
        background-position: right bottom 12px;
    }
    .shinil-products-page .sp-product-page-banner .business_top .inner .txt {
        justify-content: flex-start;
    }
}
@media all and (max-width: 480px) {
    .shinil-products-page .sp-product-page-banner .business_top {
        height: 300px;
        padding: 22px 20px;
    }
}

/* Selected subdued product-category hero, 2026-10-30. */
.shinil-products-page .sp-hero::before,
.shinil-products-page .sp-detail-hero::before {
    background: linear-gradient(to bottom, #0a1c36 0, #0a1c36 max(0px, calc(100% - 36.43vw)), rgba(10, 28, 54, 0) max(90px, calc(100% - 36.43vw + 90px)));
}
@media all and (max-width: 768px) {
    .shinil-products-page .sp-hero::before,
    .shinil-products-page .sp-detail-hero::before {
        background: linear-gradient(to bottom, #0a1c36 0, #0a1c36 calc(100% - min(52vw, 220px) - 32px), rgba(10, 28, 54, 0) calc(100% - min(52vw, 220px) + 12px));
    }
}

/* Mobile category and product heroes: continuous background and softly blended artwork. */
@media all and (max-width: 768px) {
    .s_visual.is-category-hero-native::before,
    .shinil-products-page .sp-hero::before,
    .shinil-products-page .sp-detail-hero::before {
        background: linear-gradient(90deg, #0a1b2f 0%, #243d59 50%, #3e5168 100%);
    }
    .s_visual.is-category-hero-native::after,
    .shinil-products-page .sp-hero::after,
    .shinil-products-page .sp-detail-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: transparent;
        background-image: inherit;
        background-size: inherit;
        background-position: inherit;
        background-repeat: no-repeat;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - min(52vw, 220px) - 32px), rgba(0, 0, 0, .22) calc(100% - min(52vw, 220px) - 8px), rgba(0, 0, 0, .7) calc(100% - min(52vw, 220px) + 28px), #000 calc(100% - min(52vw, 220px) + 64px));
        mask-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - min(52vw, 220px) - 32px), rgba(0, 0, 0, .22) calc(100% - min(52vw, 220px) - 8px), rgba(0, 0, 0, .7) calc(100% - min(52vw, 220px) + 28px), #000 calc(100% - min(52vw, 220px) + 64px));
        pointer-events: none;
    }
}