横ステップインジケータ

<ol class="d05-03-02-steps">
          <li class="d05-03-02-done"><span class="d05-03-02-c">1</span><em>お問い合わせ</em></li>
          <li class="d05-03-02-active"><span class="d05-03-02-c">2</span><em>ヒアリング</em></li>
          <li><span class="d05-03-02-c">3</span><em>制作</em></li>
          <li><span class="d05-03-02-c">4</span><em>納品</em></li>
        </ol>

.d05-03-02-steps{list-style:none;margin:0;padding:0;display:flex;width:100%;max-width:360px}
        .d05-03-02-steps li{flex:1;position:relative;text-align:center;font-size:11px;color:#94a3b8}
        .d05-03-02-steps li::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:#e2e8f0;z-index:0}
        .d05-03-02-steps li:first-child::before{display:none}
        .d05-03-02-c{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 auto 8px;border-radius:50%;background:#e2e8f0;color:#94a3b8;font-weight:700;font-size:13px;transition:.3s}
        .d05-03-02-steps em{font-style:normal;display:block}
        .d05-03-02-done .d05-03-02-c{background:#4f7cff;color:#fff}
        .d05-03-02-done::before{background:#4f7cff}
        .d05-03-02-done em{color:#475569}
        .d05-03-02-active .d05-03-02-c{background:#fff;color:#4f7cff;border:3px solid #4f7cff;box-shadow:0 0 0 4px rgba(79,124,255,.15);transform:scale(1.1)}
        .d05-03-02-active::before{background:linear-gradient(90deg,#4f7cff 50%,#e2e8f0 50%)}
        .d05-03-02-active em{color:#1e293b;font-weight:700}