チェックリスト式オンボーディングフォーム

<div class="d04-09-06-wrap">
          <ul class="d04-09-06-checklist">
            <li class="d04-09-06-citem is-current"><span class="d04-09-06-cbox"></span>利用目的</li>
            <li class="d04-09-06-citem"><span class="d04-09-06-cbox"></span>業種</li>
            <li class="d04-09-06-citem"><span class="d04-09-06-cbox"></span>チーム人数</li>
          </ul>
          <div class="d04-09-06-qbox">
            <p class="d04-09-06-question">サービスの利用目的を選んでください</p>
            <div class="d04-09-06-choices">
              <button type="button" class="d04-09-06-choice">業務効率化</button>
              <button type="button" class="d04-09-06-choice">情報共有</button>
              <button type="button" class="d04-09-06-choice">その他</button>
            </div>
          </div>
        </div>

.d04-09-06-wrap{width:min(280px,100%)}
        .d04-09-06-checklist{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
        .d04-09-06-citem{
          display:flex;align-items:center;gap:8px;font-size:12px;color:#8a93a3;
          transition:color .3s;
        }
        .d04-09-06-citem.is-current{color:#333;font-weight:700}
        .d04-09-06-citem.is-done{color:#22b573}
        .d04-09-06-cbox{
          width:16px;height:16px;border-radius:50%;border:2px solid #d5d9e0;flex:0 0 auto;
          position:relative;transition:border-color .3s,background .3s;
        }
        .d04-09-06-citem.is-current .d04-09-06-cbox{border-color:#4a6cf7}
        .d04-09-06-citem.is-done .d04-09-06-cbox{background:#22b573;border-color:#22b573}
        .d04-09-06-citem.is-done .d04-09-06-cbox::after{
          content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
          border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg);
        }
        .d04-09-06-question{margin:0 0 10px;font-size:13px;color:#333;font-weight:700}
        .d04-09-06-choices{display:flex;flex-direction:column;gap:8px}
        .d04-09-06-choice{
          padding:10px 12px;font-size:13px;color:#444;background:#fff;
          border:2px solid #d5d9e0;border-radius:8px;cursor:pointer;transition:border-color .2s,color .2s;
          text-align:left;
        }
        .d04-09-06-choice:hover{border-color:#4a6cf7;color:#4a6cf7}
        .d04-09-06-done{margin:0;font-size:13px;color:#1c7c4e;font-weight:700;text-align:center}

(function(){
        var wrap=document.querySelector('.d04-09-06-wrap');
        if(!wrap)return;
        var items=wrap.querySelectorAll('.d04-09-06-citem');
        var qbox=wrap.querySelector('.d04-09-06-qbox');
        var question=wrap.querySelector('.d04-09-06-question');
        var choicesBox=wrap.querySelector('.d04-09-06-choices');
        var steps=[
          {q:'サービスの利用目的を選んでください',choices:['業務効率化','情報共有','その他']},
          {q:'業種を選んでください',choices:['IT・Web','製造','サービス業']},
          {q:'チームの人数を選んでください',choices:['1〜5人','6〜20人','21人以上']}
        ];
        var cur=0;
        function renderStep(){
          question.textContent=steps[cur].q;
          choicesBox.innerHTML='';
          steps[cur].choices.forEach(function(label){
            var btn=document.createElement('button');
            btn.type='button';
            btn.className='d04-09-06-choice';
            btn.textContent=label;
            btn.addEventListener('click',answer);
            choicesBox.appendChild(btn);
          });
        }
        function paintList(){
          items.forEach(function(it,i){
            it.classList.toggle('is-done',i<cur);
            it.classList.toggle('is-current',i===cur);
          });
        }
        function answer(){
          if(cur<steps.length-1){
            cur++;
            paintList();
            renderStep();
          }else{
            paintList();
            qbox.innerHTML='<p class="d04-09-06-done">設定が完了しました。ご協力ありがとうございます。</p>';
          }
        }
        renderStep();
      })();