.c-business {
    position: relative;
    padding-bottom: var(--space-lg);
    /* 全幅の斜めストライプが横スクロールを生まないように切り落とす */
    overflow-x: clip;
}

.c-business__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.c-business-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    scroll-margin-top: calc(var(--header-height) + var(--space-sm));
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.c-business-card:hover {
    box-shadow: 0 8px 24px rgba(22, 50, 79, 0.1);
    transform: translateY(-4px);
}

.c-business-card__image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.c-business-card__title {
    font-size: 1.1rem;
    margin: var(--space-sm) var(--space-sm) var(--space-xs);
}

.c-business-card__text {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0 var(--space-sm) var(--space-sm);
}

@media (min-width: 600px) {
    .c-business__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .c-business__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- ジグザグレイアウト（事業内容ページ本編） --- */
.c-business__zigzag {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/*
 * --row-shift：説明ブロックを写真より上にずらす量。原本（ページ幅1064px）の実測で
 * 説明ブロックの白い面の下端が写真の下端より約12〜17px上にある（ページ幅の約1.4%）。
 */
.c-business-row {
    --row-shift: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}

/*
 * 背景の斜めストライプ。デザイン原本の図形（Excelの diagStripe / 塗り #003399 70%
 * / adj 22.25%）をそのまま clip-path に置き換えたもの。原本と同じく5行ごとに1本、
 * 進行方向を左右交互に入れる（10n+6 は原本の flipH に相当）。
 */
.c-business-row:nth-child(10n + 1)::before,
.c-business-row:nth-child(10n + 6)::before {
    content: "";
    position: absolute;
    top: 75%;
    left: calc(50% - 50vw);
    width: 100vw;
    /*
     * 帯の高さ（＝対角線の傾き）。帯は幅100vwで画面いっぱいに伸ばすが、本文の幅は
     * --container-width（1140px）で頭打ちになるため、画面が広いほど対角線が本文に対して緩く見え、
     * 道路付属物の本文に食い込む。高さ73.6vwで傾きを決め、--container-width（＋左右余白）に
     * 達した時点のpx値（73.6% × (1140+2×26) ≒ 877px）で頭打ちにして、広い画面でも見え方を保つ。
     */
    height: min(73.6vw, 877px);
    background-color: rgba(0, 51, 153, 0.7);
    pointer-events: none;
}

/*
 * 右上から左下へ下る帯（1本目）。太さは原本どおり（内側の角の値22.25%＝原本の adj 値）。
 * 内側の角の値は「100−太さ%」。
 *
 * 開始位置は、安全施設工事（標識）の説明ブロック（白い面）の最下部。2本目（nth-child(10n+6)）と
 * 同じ理屈で、説明ブロックは --row-shift だけ上にずらして表示しているため、行自身の下端
 * （100%）からその分を引く。
 */
.c-business-row:nth-child(10n + 1)::before {
    top: calc(100% - var(--row-shift));
    clip-path: polygon(0 22.25%, 22.25% 0, 100% 0, 0 100%);
}

/*
 * 左上から右下へ下る帯（2本目）。説明ブロック（公園・景観施設関連工事）の真下から始め、
 * 太さは原本の半分（77.75% → 38.9%。依頼主の指示）。
 */
.c-business-row:nth-child(10n + 6)::before {
    top: calc(100% - var(--row-shift));
    clip-path: polygon(100% 61.1%, 38.9% 0, 0 0, 100% 100%);
}

/*
 * 写真と説明ブロックはストライプより前面に置き、それぞれの白い面で帯を隠す。
 * 原本は行全体ではなく写真と説明ブロックだけが帯を隠すので、説明ブロックの下や
 * 写真との段差からは帯がのぞく。
 */
.c-business-row__image,
.c-business-row__body {
    position: relative;
    z-index: 1;
}

/*
 * 説明ブロックの背景は透明。帯（青い斜線）が説明ブロックの後ろでも見える。写真側は img 自体が
 * 不透明なので帯は隠れる。特定2項目の写真の背後に敷く白い面は、下の「行をまたぐ白い背景オブジェクト」を参照。
 */

/* 原本の写真は横長で角が四角い */
.c-business-row__image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9.4;
    object-fit: cover;
}

/*
 * 行をまたぐ白い背景オブジェクト（防護柵・舗装工事のみ）。写真＋説明ブロックの行全体の横幅にまたがり、
 * 説明ブロックの背景が透明なので文字の後ろにも透けて見える。帯（::before、z-index:auto）より前面・
 * 写真本体より背面に出すため、.c-business-row__image::before として z-index:-1 で実装する
 * （.c-business-row__image 自体が z-index:1 で重なり文脈を作るので、-1 でもその内部の最背面になるだけで
 * 帯より下には潜らない）。
 *
 * 横幅は写真（.c-business-row__image 自身の幅）基準の%値。写真は行の44%（flex:0 0 44%）、
 * 説明ブロックは残り56%（gap:0）なので、写真側の内側の辺から 56/44×100 = 127.27% 延ばせば
 * 説明ブロックの外側の辺に届く。写真の外側の辺は10pxだけ超える。
 * PC幅（700px以上、写真と説明ブロックが横並びになる幅）でのみ有効。700px未満は下の縦積み用ルールを参照。
 */
@media (min-width: 700px) {
    /*
     * 防護柵（偶数行＝row-reverse。写真は右、説明ブロックは左）。
     * 説明ブロックは margin-left: calc(var(--space-sm) * -1) で外側にずれているので、127.27% にその分を足して延ばす。
     * 高さは写真＋10pxで、上端-30px・下端+20px（原本の位置）。
     */
    .c-business-row:nth-child(2) .c-business-row__image::before {
        content: "";
        position: absolute;
        top: -30px;
        bottom: 20px;
        left: calc(-127.27% - var(--space-sm));
        right: -10px;
        background-color: var(--color-white, #fff);
        z-index: -1;
        pointer-events: none;
    }

    /*
     * 舗装工事（奇数行＝通常方向。写真は左、説明ブロックは右）。
     * 説明ブロックは `margin-right: calc(var(--space-sm) * -1)` で外側にさらに
     * space-sm分ずれているため、同様に加算する。
     */
    .c-business-row:nth-child(7) .c-business-row__image::before {
        content: "";
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: calc(-127.27% - var(--space-sm));
        background-color: var(--color-white, #fff);
        z-index: -1;
        pointer-events: none;
    }
}

/* 700px未満（写真・説明ブロックが縦積み）：隣に説明ブロックが無いので写真幅のまま */
@media (max-width: 699.98px) {
    .c-business-row:nth-child(2) .c-business-row__image::before,
    .c-business-row:nth-child(7) .c-business-row__image::before {
        content: "";
        position: absolute;
        inset: -5px -10px;
        background-color: var(--color-white, #fff);
        z-index: -1;
        pointer-events: none;
    }

    .c-business-row:nth-child(7) .c-business-row__image::before {
        top: -10px;
        bottom: -10px;
    }
}

/*
 * このイラストは写真の上に重ねるのではなく、写真の外側・上の余白に置き、底辺が写真の上端に
 * ちょうど接する（原本の構図）。bottom:100% で「画像の上端から真上」に置く。
 * .c-business-row__image img（詳細度0,1,1）の width:100%／aspect-ratio／object-fit:cover に負けないよう、
 * 親クラスを含めて詳細度を上げている（0,2,0）。
 */
.c-business-row__image .c-business-row__deco-icon {
    position: absolute;
    /* 写真の右端に合わせ、10pxの余白を取る */
    right: 10px;
    bottom: 100%;
    width: 90px;
    aspect-ratio: auto;
    object-fit: contain;
    pointer-events: none;
}

/* 見出しは黒の太字＋紺の縦線、下にグレーの線（原本） */
.c-business-row__title {
    position: relative;
    font-size: 1.1rem;
    color: var(--color-text);
    padding: 0 0 0.45em var(--space-sm);
    margin-bottom: 0.7em;
    border-bottom: 1px solid #c8c8c8;
}

.c-business-row__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.55em;
    width: 4px;
    background-color: var(--color-primary);
}

/* 説明ブロックの背景が透明で青い帯と重なる項目があるので、本文は黒90%（帯の上でも判読できる濃さ） */
.c-business-row__text {
    color: rgba(0, 0, 0, 0.9);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    line-height: 1.95;
    padding-left: var(--space-sm);
}

/*
 * PC幅：写真と説明ブロックを横に並べ、説明ブロックを写真と同じ高さにしたうえで
 * --row-shift だけ上にずらす（上端は写真より少し上、下端は写真より少し下がらない）。
 * 見出しの位置は写真の上端にそろうよう、ずらした分を上の余白で戻す。
 * 説明ブロックの白い面は外側（画面の端側）に少しはみ出させる（原本）。
 */
@media (min-width: 700px) {
    .c-business-row {
        --row-shift: clamp(10px, 1.4vw, 22px);
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .c-business-row__image {
        flex: 0 0 44%;
        min-width: 0;
        align-self: flex-start;
    }

    .c-business-row__body {
        flex: 1 1 auto;
        min-width: 0;
        top: calc(var(--row-shift) * -1);
        padding: var(--row-shift) var(--space-sm) var(--space-sm) var(--space-md);
        margin-right: calc(var(--space-sm) * -1);
    }

    .c-business-row:nth-child(even) {
        flex-direction: row-reverse;
    }

    .c-business-row:nth-child(even) .c-business-row__body {
        padding: var(--row-shift) var(--space-md) var(--space-sm) var(--space-sm);
        margin-right: 0;
        margin-left: calc(var(--space-sm) * -1);
    }
}