/* 冒頭（sec_intro）：見出し・説明・3つの手順・一覧へのボタン */
.sec_intro {
    padding: 64px 0 72px;
    background: var(--color-main-pale);

    @media (max-width: 900px) {
        padding: 56px 0 64px;
    }
    @media (max-width: 600px) {
        padding: 40px 0 48px;
    }
    .wrap {
        margin: 0 auto;
        padding: 0 var(--pad-side);
        max-width: calc(var(--wrap-max) + var(--pad-side) * 2);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .ttl {
        font-size: 36px;
        font-weight: 700;
        line-height: 1.5em;

        @media (max-width: 1200px) {
            font-size: 32px;
        }
        @media (max-width: 900px) {
            font-size: 28px;
        }
        @media (max-width: 600px) {
            font-size: 24px;
        }
        @media (max-width: 400px) {
            font-size: 22px;
        }
    }
    .txt {
        color: var(--color-sub);
        font-size: 16px;
        line-height: 1.9em;

        @media (max-width: 600px) {
            font-size: 14px;
        }
    }
    .step {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        @media (max-width: 600px) {
            flex-direction: column;
            gap: 8px;
        }
        > li {
            padding: 8px 18px 8px 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--color-white);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.5em;
            border-radius: 999px;
        }
        .no {
            width: 28px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            background: var(--color-main);
            color: var(--color-white);
            font-family: var(--font-en);
            font-size: 14px;
            line-height: 1em;
            border-radius: 50%;
        }
    }
}