予約進捗ステップバー(日時→人数→確認)

<div class="d10-07-03-wrap">
          <ol class="d10-07-03-steps">
            <li class="is-done"><span class="d10-07-03-circle">1</span><span class="d10-07-03-label">日時</span></li>
            <li class="is-active"><span class="d10-07-03-circle">2</span><span class="d10-07-03-label">人数</span></li>
            <li><span class="d10-07-03-circle">3</span><span class="d10-07-03-label">確認</span></li>
          </ol>
          <div class="d10-07-03-body">
            <p>人数を選択してください</p>
            <div class="d10-07-03-btns">
              <button type="button" class="d10-07-03-prev">戻る</button>
              <button type="button" class="d10-07-03-next">次へ進む</button>
            </div>
          </div>
        </div>

.d10-07-03-wrap{width:100%;}
        .d10-07-03-steps{display:flex;list-style:none;padding:0;margin:0 0 20px;counter-reset:none;}
        .d10-07-03-steps li{flex:1;text-align:center;position:relative;font-size:11px;color:#aaa;}
        .d10-07-03-steps li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:#e0e0e0;z-index:0;}
        .d10-07-03-steps li:first-child::before{display:none;}
        .d10-07-03-circle{display:block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#e8e8e8;color:#999;margin:0 auto 4px;position:relative;z-index:1;font-weight:600;}
        .d10-07-03-steps li.is-done .d10-07-03-circle{background:#2f6fed;color:#fff;}
        .d10-07-03-steps li.is-done::before{background:#2f6fed;}
        .d10-07-03-steps li.is-active .d10-07-03-circle{background:#fff;color:#2f6fed;border:2px solid #2f6fed;line-height:22px;}
        .d10-07-03-steps li.is-active .d10-07-03-label{color:#2f6fed;font-weight:600;}
        .d10-07-03-body{text-align:center;font-size:13px;color:#444;}
        .d10-07-03-btns{display:flex;gap:8px;justify-content:center;margin-top:14px;}
        .d10-07-03-btns button{border:1px solid #ddd;background:#fff;padding:6px 14px;border-radius:6px;font-size:12px;cursor:pointer;}
        .d10-07-03-btns .d10-07-03-next{background:#2f6fed;color:#fff;border-color:#2f6fed;}

(function(){
          var root = document.querySelector('.d10-07-03');
          var steps = root.querySelectorAll('.d10-07-03-steps li');
          var labels = ['日時を選択してください','人数を選択してください','内容をご確認ください'];
          var body = root.querySelector('.d10-07-03-body p');
          var cur = 1;
          function render(){
            steps.forEach(function(li, i){
              li.classList.remove('is-done','is-active');
              if(i < cur) li.classList.add('is-done');
              else if(i === cur) li.classList.add('is-active');
            });
            body.textContent = labels[cur];
          }
          root.querySelector('.d10-07-03-next').addEventListener('click', function(){
            if(cur < 2) cur++;
            render();
          });
          root.querySelector('.d10-07-03-prev').addEventListener('click', function(){
            if(cur > 0) cur--;
            render();
          });
        })();