/* comprehensive / complete / optimized (総合栄養食品分析セット,
   完全栄養食分析セット, 最適化栄養食分析セット) — the "セット商品の項目" block
   lists the set's product line-up, not an "exam example" like every other
   catalog-detail page, so it uses cld-set-items-* class names instead of the
   shared cld-exam-* (see $use_set_items_naming in cld-detail-render.php).
   Styling is otherwise identical to the base cld-exam-* rules in
   page-catalog-detail.css. */
.cld-set-items-box {
    margin: 0 0 10px;
    padding: 20px 24px;
    border: 1px solid #008f8d;
    border-radius: 8px;
    box-sizing: border-box;
}

/* The title sits above .cld-set-items-box as a plain heading (matching the
   legacy markup, where this was an un-bordered <section>), instead of
   inside the box — see $exam_title_outside_box in cld-detail-render.php.
   Style matches .cld-detail-section-sub's 32px orange treatment used
   elsewhere on these 3 pages. */
.cld-set-items-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #e7380d;
    margin: 0 0 15px;
}

.cld-exam-box--plain {
    padding: 0;
    border: none;
    border-radius: 0;
}

/* 熱量と各栄養成分の分析が必要です / SUNATECが全て分析します！ / お問い合わせが
   増えています！ etc — detailSubSections' subHeading matches the same 32px
   orange treatment (they read as lead-in headings, not sub-headings under a
   shared .cld-detail-section-heading, since these 3 pages have no
   detailHeading). */
.cld-detail-section-sub {
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #e7380d;
    margin: 0 0 20px;
}

.cld-set-items-section {
    margin-bottom: 16px;
}

.cld-set-items-section:last-of-type {
    margin-bottom: 0;
}

.cld-set-items-section-heading {
    display: flex;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #061c3d;
    margin: 0 0 8px;
}

.cld-set-items-section-num {
    flex: 0 0 28px;
}

.cld-set-items-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cld-set-items-list li {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #42526b;
    padding-left: 15px;
    position: relative;
}

.cld-set-items-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    background: #008f8d;
    border-radius: 50%;
}

/* 4-column grid table — fi-detail-table style, 4 items per row.
   .fi-detail-table-wrap is display:flex (page-food-inspection.css), and a
   flex item's default min-width:auto lets its intrinsic content width (the
   longest unbreakable cell, e.g. n-3系脂肪酸（※1）) win over table-layout:fixed
   + width:100%, pushing the table past the wrap's bounds — squeezing a
   short-text column (e.g. ナイアシン) next to it on narrow viewports. Force
   min-width:0 so the table actually honors width:100% / table-layout:fixed
   and all 5 columns stay equal. */
.cld-set-items-grid-table {
    table-layout: fixed;
    min-width: 0;
}
.cld-set-items-grid-table td.fi-td2-item {
    width: 20%;
    overflow-wrap: break-word;
}
.cld-set-items-grid-table.is-cols-4 td.fi-td2-item { width: 25%; }

/* Border lives on the wrapper so border-radius renders cleanly (cell borders get clipped by the
   table's own overflow:hidden, leaving rounded corners without a border line). */
.cld-set-items-box .fi-detail-table-wrap {
    border: 1px solid #CCC;
    border-radius: 8px;
    overflow: hidden;
}
.cld-set-items-grid-table { overflow: visible; border-radius: 0; }

/* Strip outer cell borders — wrapper provides the outer box. */
.cld-set-items-box .cld-set-items-grid-table tbody tr:first-child td    { border-top: none; }
.cld-set-items-box .cld-set-items-grid-table tbody tr:last-child  td    { border-bottom: none; }
.cld-set-items-box .cld-set-items-grid-table tbody tr td:first-child    { border-left: none; }
.cld-set-items-box .cld-set-items-grid-table tbody tr td:last-child     { border-right: none; }

.cld-set-items-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #42526b;
    margin: 0 0 0 28px;
}

.cld-set-items-notes {
    margin-top: 12px;
    margin-bottom: 32px;
}

.cld-set-items-notes .notes {
    display: flex;
    align-items: center;
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #FE7F00;
    box-sizing: border-box;
}
.cld-set-items-notes .margin-p { margin: 0; }
.cld-set-items-notes .margin-p:not(:last-child) { margin-bottom: 4px; }

@media (max-width: 768px) {
    .cld-set-items-box { padding: 16px; }
    .cld-set-items-notes .notes { font-size: 14px; line-height: 22px; }
    .cld-set-items-text { font-size: 14px; line-height: 22px; }
    .cld-set-items-title { font-size: 24px; line-height: 32px; }
    .cld-detail-section-sub { font-size: 24px; line-height: 32px; }
}

@media (max-width: 480px) {
    .cld-set-items-text { font-size: 13px; line-height: 20px; }
    /* 5 columns are too narrow on a phone (ビタミンB6 / パントテン酸 break
       mid-word) — reflow the same cells into 3 columns: tbody becomes a grid,
       rows dissolve (display:contents), grid lines are drawn per cell. */
    .cld-set-items-grid-table,
    .cld-set-items-grid-table tbody { display: block; width: 100%; }
    .cld-set-items-grid-table tbody {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cld-set-items-grid-table tr { display: contents; }
    .cld-set-items-box .cld-set-items-grid-table td.fi-td2-item {
        width: auto;
        border: 0;
        /* !important: .fi-detail-table tbody tr:last-child td:first/last-child
           (page-food-inspection.css) rounds the last 5-col row's corner cells. */
        border-radius: 0 !important;
        box-shadow: 1px 0 0 #CCC, 0 1px 0 #CCC;
    }
    .cld-set-items-grid-table td.fi-table-empty-merge { display: none; }
}