積み上げアコーディオンステップフォーム

<div class="d04-09-08-wrap">
          <div class="d04-09-08-acc is-open">
            <div class="d04-09-08-acchead"><span class="d04-09-08-accnum">1</span>お届け先情報</div>
            <div class="d04-09-08-accbody">
              <input type="text" class="d04-09-08-finput" placeholder="ご住所">
              <button type="button" class="d04-09-08-accnext">次へ</button>
            </div>
          </div>
          <div class="d04-09-08-acc">
            <div class="d04-09-08-acchead"><span class="d04-09-08-accnum">2</span>お支払い方法</div>
            <div class="d04-09-08-accbody">
              <select class="d04-09-08-finput"><option>クレジットカード</option><option>代金引換</option></select>
              <button type="button" class="d04-09-08-accnext">次へ</button>
            </div>
          </div>
          <div class="d04-09-08-acc">
            <div class="d04-09-08-acchead"><span class="d04-09-08-accnum">3</span>ご注文確認</div>
            <div class="d04-09-08-accbody">
              <p class="d04-09-08-accnote">内容をご確認の上、注文を確定してください。</p>
              <button type="button" class="d04-09-08-accnext">注文を確定する</button>
            </div>
          </div>
        </div>

.d04-09-08-wrap{width:min(280px,100%);display:flex;flex-direction:column;gap:8px}
        .d04-09-08-acc{border:2px solid #e4e8ef;border-radius:10px;overflow:hidden;transition:border-color .3s}
        .d04-09-08-acc.is-open{border-color:#4a6cf7}
        .d04-09-08-acc.is-done{border-color:#22b573}
        .d04-09-08-acchead{
          display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;
          font-weight:700;color:#8a93a3;
        }
        .d04-09-08-acc.is-open .d04-09-08-acchead{color:#333}
        .d04-09-08-acc.is-done .d04-09-08-acchead{color:#22b573}
        .d04-09-08-accnum{
          width:20px;height:20px;border-radius:50%;background:#e4e8ef;color:#8a93a3;
          display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
          flex:0 0 auto;transition:background .3s,color .3s;
        }
        .d04-09-08-acc.is-open .d04-09-08-accnum{background:#4a6cf7;color:#fff}
        .d04-09-08-acc.is-done .d04-09-08-accnum{background:#22b573;color:#fff}
        .d04-09-08-accbody{
          max-height:0;opacity:0;overflow:hidden;padding:0 12px;
          transition:max-height .35s ease,opacity .3s,padding .35s;
          display:flex;flex-direction:column;gap:8px;
        }
        .d04-09-08-acc.is-open .d04-09-08-accbody{max-height:140px;opacity:1;padding:0 12px 12px}
        .d04-09-08-finput{
          padding:9px 10px;font-size:12px;border:2px solid #d5d9e0;border-radius:8px;
          outline:none;background:#fff;font-family:inherit;
        }
        .d04-09-08-finput:focus{border-color:#4a6cf7}
        .d04-09-08-accnote{margin:0;font-size:12px;color:#445;line-height:1.6}
        .d04-09-08-accnext{
          padding:9px;font-size:12px;font-weight:700;color:#fff;background:#4a6cf7;
          border:none;border-radius:8px;cursor:pointer;transition:background .2s;
        }
        .d04-09-08-accnext:hover{background:#3a58d6}

(function(){
        var wrap=document.querySelector('.d04-09-08-wrap');
        if(!wrap)return;
        var accs=wrap.querySelectorAll('.d04-09-08-acc');
        wrap.querySelectorAll('.d04-09-08-accnext').forEach(function(btn,i){
          btn.addEventListener('click',function(){
            accs[i].classList.remove('is-open');
            accs[i].classList.add('is-done');
            if(accs[i+1]){
              accs[i+1].classList.add('is-open');
            }
          });
        });
      })();