/* 分析アウトソーシング (/catalog/outsourcing/) — page-specific override:
   the "このようなお客様におすすめです！" intro renders inside .cld-hero-text
   on this page as a .cld-hero-appeal call-out box (unlike every other
   catalog-detail page, where it's its own .cld-intro section below the hero
   — see $intro_in_hero in cld-detail-render.php). The box itself
   (border/background/width) comes free from .cld-hero-appeal in
   page-catalog-detail.css; only the heading/list styling below is specific
   to this page's checkbox-style bullets (matching the legacy
   pages-main__list design). */
.cld-hero {
    aspect-ratio: auto;
    min-height: 277px;
    height: auto;
}
.cld-hero-text {
    position: relative;
}
/* The text (with the appeal box) sets this hero's height, so the photo must
   sit behind it filling the box. The shared hero in page-catalog-detail.css
   now keeps .cld-hero-figure in normal flow (height:auto photo band) — here
   that stacked the photo above and pushed the text below it. */
.cld-hero-figure {
    position: absolute;
    inset: 0;
}
.cld-hero-img {
    height: 100%;
    object-fit: cover;
    object-position: right center;
}
@media (max-width: 768px) {
    /* Height comes from the text + appeal box now (photo is inset:0 behind
       it), so no fixed 320px floor — the shared mobile aspect-ratio minimum
       in page-catalog-detail.css applies instead of a tall empty band. */
    .cld-hero {
        min-height: 0;
    }
}

.cld-hero-appeal {
    max-width: 100%;
    /* The shared .cld-hero-appeal centers its text (for the 検査品質 badge on
       other catalog pages); this page's heading + checklist read left-aligned. */
    text-align: left;
}

.cld-hero-appeal-heading {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    color: #008f8d;
    border-bottom: 2px solid #008f8d;
}

.cld-hero-appeal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cld-hero-appeal-list li {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #42526B;
    font-size: 14px;
    line-height: 24px;
    padding-left: 28px;
    position: relative;
}

.cld-hero-appeal-list li::before {
    content: "\2611";
    position: absolute;
    left: 0;
    top: 0;
    color: #008f8d;
    font-size: 18px;
    line-height: 24px;
}

.cld-hero-note {
    margin-top: 0;
}

/* 対応可能な分析例 — match .cld-consulting-section-title's style
   (/catalog/consulting/) instead of the shared smaller heading. */
.cld-photo-grid-heading {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #e7380d;
    margin: 0 0 20px;
}

/* このようなお客様におすすめです！ box — scales down step by step on mobile
   (the heading was 18px on phones, larger than its 16px desktop size). The ☑
   icon's line-height tracks the list's so it stays on the first text line. */
@media (max-width: 768px) {
    .cld-hero-appeal-heading { font-size: 15px; line-height: 24px; }
    .cld-hero-appeal-list li { font-size: 13px; line-height: 21px; padding-left: 22px; }
    .cld-hero-appeal-list li::before { font-size: 15px; line-height: 21px; }
}
@media (max-width: 480px) {
    .cld-hero-appeal-heading { font-size: 14px; line-height: 22px; border-bottom-width: 1px; }
    .cld-hero-appeal-list li { font-size: 12px; line-height: 19px; padding-left: 19px; }
    .cld-hero-appeal-list li::before { font-size: 13px; line-height: 19px; }
}
@media (max-width: 375px) {
    .cld-hero-appeal-heading { font-size: 13px; line-height: 20px; }
    .cld-hero-appeal-list li { font-size: 11px; line-height: 17px; padding-left: 17px; }
    .cld-hero-appeal-list li::before { font-size: 12px; line-height: 17px; }
}

@media (max-width: 768px) {
    .cld-hero-note {
        margin-top: 0;
    }
    .cld-photo-grid-heading {
        font-size: 24px;
        line-height: 32px;
    }
}
@media (max-width: 480px) {
    .cld-hero-note {
        margin-top: 0;
    }
}
@media (max-width: 375px) {
    .cld-hero-note {
        margin-top: 0;
    }
}