/*
  detail-flow.css — 説明セクション（sec_detail）左の下半分
  ご利用までの流れ（番号つき）・対象サイトとお見積もり。事前の簡易チェックは detail-survey.css。
*/
.sec_detail {
    /* ── ご利用までの流れ ── */
    & .flow {
        padding: 4px 24px 0;

        @media (max-width: 480px) {
            padding: 4px 16px 0;
        }

        & .steps {
            list-style: none;
        }

        /* 番号をつなぐ縦線は li の背景で引く（番号の丸の中心 15px・上下は最初と最後で止める） */
        & .step {
            display: grid;
            grid-template-columns: 32px minmax(0, 1fr);
            column-gap: 20px;
            background: linear-gradient(var(--color-accent-soft), var(--color-accent-soft)) 15px 0 / 2px 100% no-repeat;

            &:first-child {
                background-position: 15px 30px;
            }

            &:last-child {
                background-size: 2px 30px;

                & .body {
                    border-bottom: 0;
                }
            }

            @media (max-width: 480px) {
                column-gap: 14px;
            }
        }

        & .num {
            margin-top: 14px;
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            background: var(--color-accent);
            border-radius: 50%;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
        }

        & .body {
            padding: 16px 0;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            border-bottom: 1px solid var(--color-line);

            & .ico {
                margin-top: 1px;
                width: 26px;
                height: 26px;

                @media (max-width: 480px) {
                    display: none;
                }
            }
        }

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

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

        & .foot {
            padding: 14px 0 16px;
            border-top: 1px solid var(--color-line);
            color: var(--color-muted);
            font-size: 14px;
            line-height: 1.75em;
        }
    }

    /* ── 対象サイトとお見積もり ── */
    & .target {
        & .cols {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));

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

        & .col {
            padding: 22px 24px;
            display: flex;
            align-items: flex-start;
            gap: 14px;

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

            & + .col {
                border-left: 1px solid var(--color-line);

                @media (max-width: 600px) {
                    border-left: 0;
                    border-top: 1px solid var(--color-line);
                }
            }
        }

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

        & .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;
        }

        & .foot {
            margin: 0 24px;
            padding: 14px 0 16px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            border-top: 1px solid var(--color-line);
            color: var(--color-text);
            font-size: 14px;
            line-height: 1.75em;

            @media (max-width: 480px) {
                margin: 0 16px;
            }

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

/* 最終更新: 2026-11-11 13:05 */