/*
  detail.css — 説明セクション（sec_detail）の左右の組み方と、左の上半分
  （保守内容の4カード・月末1回とAIの説明）。流れ以降は detail-flow.css、右の案内欄は aside.css。
*/
.sec_detail {
    padding: 48px 0 72px;

    @media (max-width: 480px) {
        padding: 36px 0 56px;
    }

    & .wrap {
        margin: 0 auto;
        padding: 0 var(--wrap-pad);
        max-width: var(--wrap-max);
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 32px;

        @media (max-width: 960px) {
            grid-template-columns: minmax(0, 1fr);
            gap: 44px;
        }
    }

    & .blk {
        & + .blk {
            margin-top: 44px;

            @media (max-width: 480px) {
                margin-top: 36px;
            }
        }

        & > .ttl_ptn_1 {
            margin-bottom: 18px;
        }
    }

    /* 白い枠の箱（AIの説明・流れ・対象・簡易調査で共通） */
    & .box {
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(28, 43, 69, 0.04);
    }

    /* ── 保守内容の4カード ── */
    & .cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;

        @media (max-width: 600px) {
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
        }
    }

    & .card {
        padding: 20px 20px 22px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(28, 43, 69, 0.04);

        @media (max-width: 480px) {
            padding: 18px 16px 20px;
            gap: 14px;
        }

        & .ico {
            margin-top: 2px;
            width: 32px;
            height: 32px;
        }

        & .ttl {
            color: var(--color-navy);
            font-size: 17px;
            font-weight: 700;
            line-height: 1.5em;
        }

        & .txt {
            margin-top: 6px;
            color: var(--color-text);
            font-size: 15px;
            line-height: 1.75em;
        }
    }

    /* ── 月末1回・AIによる仕組み ── */
    & .ai {
        padding: 22px 24px;
        display: flex;
        align-items: flex-start;
        gap: 18px;

        @media (max-width: 480px) {
            padding: 18px 16px;
            gap: 14px;
        }

        & .ico {
            margin-top: 2px;
            width: 34px;
            height: 34px;
        }

        & .txt {
            color: var(--color-text);
            font-size: 15px;
            line-height: 1.85em;
        }

        & .note {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--color-line);
            color: var(--color-muted);
            font-size: 14px;
            line-height: 1.8em;
        }
    }
}

/* 最終更新: 2026-11-11 11:58 */