縦アコーディオンステップ

<div class="d05-03-10-acc">
          <div class="d05-03-10-step d05-03-10-open">
            <button class="d05-03-10-head" type="button"><span class="d05-03-10-node"></span><b>1. お問い合わせ</b><i class="d05-03-10-mark">+</i></button>
            <div class="d05-03-10-body"><p>フォームまたはお電話でご相談内容をお聞かせください。</p></div>
          </div>
          <div class="d05-03-10-step">
            <button class="d05-03-10-head" type="button"><span class="d05-03-10-node"></span><b>2. ヒアリング</b><i class="d05-03-10-mark">+</i></button>
            <div class="d05-03-10-body"><p>目的やご要望を整理し、最適なプランをご提案します。</p></div>
          </div>
          <div class="d05-03-10-step">
            <button class="d05-03-10-head" type="button"><span class="d05-03-10-node"></span><b>3. 制作・納品</b><i class="d05-03-10-mark">+</i></button>
            <div class="d05-03-10-body"><p>デザインから実装まで進め、公開・運用を開始します。</p></div>
          </div>
        </div>

.d05-03-10-acc{width:100%;max-width:280px;position:relative}
        .d05-03-10-acc::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;background:#e2e8f0}
        .d05-03-10-step{position:relative;padding-left:26px;margin-bottom:6px}
        .d05-03-10-head{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;padding:6px 0;cursor:pointer;text-align:left;font:inherit;color:#1e293b}
        .d05-03-10-head b{flex:1;font-size:13px}
        .d05-03-10-node{position:absolute;left:2px;top:11px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #cbd5e1;z-index:1;transition:.3s}
        .d05-03-10-mark{font-style:normal;font-size:16px;color:#94a3b8;transition:transform .3s ease}
        .d05-03-10-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
        .d05-03-10-body p{margin:2px 0 8px;font-size:11px;color:#64748b;line-height:1.5}
        .d05-03-10-open .d05-03-10-node{background:#4f7cff;border-color:#4f7cff}
        .d05-03-10-open .d05-03-10-mark{transform:rotate(45deg);color:#4f7cff}

(function(){
        var root=document.getElementById('item-05-03-10');
        if(!root)return;
        var heads=root.querySelectorAll('.d05-03-10-head');
        heads.forEach(function(h){
          h.addEventListener('click',function(){
            var step=h.parentNode;
            var body=step.querySelector('.d05-03-10-body');
            var open=step.classList.contains('d05-03-10-open');
            if(open){step.classList.remove('d05-03-10-open');body.style.maxHeight=null;}
            else{step.classList.add('d05-03-10-open');body.style.maxHeight=body.scrollHeight+'px';}
          });
        });
        var first=root.querySelector('.d05-03-10-open .d05-03-10-body');
        if(first){first.style.maxHeight=first.scrollHeight+'px';}
      })();