タブ切替式工程解説

<div class="d05-03-11-wrap">
          <div class="d05-03-11-tabs">
            <button type="button" class="d05-03-11-tab is-on" data-i="0">1</button>
            <button type="button" class="d05-03-11-tab" data-i="1">2</button>
            <button type="button" class="d05-03-11-tab" data-i="2">3</button>
          </div>
          <div class="d05-03-11-panels">
            <div class="d05-03-11-panel is-on"><b>お問い合わせ</b><p>フォームからご相談内容をお送りください。1営業日以内に返信します。</p></div>
            <div class="d05-03-11-panel"><b>お見積り</b><p>要件を整理し、最適なプランと概算費用をご提案します。</p></div>
            <div class="d05-03-11-panel"><b>ご契約・着手</b><p>内容にご納得いただけたら契約し、制作を開始します。</p></div>
          </div>
        </div>

.d05-03-11-wrap{width:100%;max-width:300px}
        .d05-03-11-tabs{display:flex;gap:8px;margin-bottom:16px;justify-content:center}
        .d05-03-11-tab{width:32px;height:32px;border-radius:50%;border:2px solid #dbe3f0;background:#fff;color:#94a3b8;font-weight:700;font-size:13px;cursor:pointer;transition:.25s}
        .d05-03-11-tab.is-on{background:#4f7cff;border-color:#4f7cff;color:#fff}
        .d05-03-11-panel{display:none;background:#fff;border:1px solid #e6ebf3;border-radius:12px;padding:16px 18px;opacity:0;transition:opacity .35s ease}
        .d05-03-11-panel.is-on{display:block;opacity:1}
        .d05-03-11-panel b{display:block;font-size:14px;color:#1e293b;margin-bottom:6px}
        .d05-03-11-panel p{margin:0;font-size:12px;color:#64748b;line-height:1.7}

(function(){
        var root=document.querySelector('#item-05-03-11 .d05-03-11-wrap');if(!root)return;
        var tabs=root.querySelectorAll('.d05-03-11-tab'),panels=root.querySelectorAll('.d05-03-11-panel');
        tabs.forEach(function(t){
          t.addEventListener('click',function(){
            tabs.forEach(function(x){x.classList.remove('is-on');});
            panels.forEach(function(p){p.classList.remove('is-on');});
            t.classList.add('is-on');
            panels[+t.dataset.i].classList.add('is-on');
          });
        });
      })();