ピル型アクティブインジケータ

<nav class="d03-01-05-nav">
          <span class="d03-01-05-pill"></span>
          <button type="button" class="active">ホーム</button>
          <button type="button">サービス</button>
          <button type="button">実績</button>
          <button type="button">会社概要</button>
        </nav>

.d03-01-05-nav{
          position:relative;display:flex;gap:4px;
          background:#f1f5f9;border-radius:999px;padding:6px;
        }
        .d03-01-05-nav button{
          position:relative;z-index:1;
          border:none;background:transparent;cursor:pointer;
          font-size:13px;font-weight:600;color:#64748b;
          padding:9px 16px;border-radius:999px;
          transition:color .3s ease;
          font-family:inherit;
        }
        .d03-01-05-nav button.active{color:#fff}
        .d03-01-05-pill{
          position:absolute;top:6px;left:6px;height:calc(100% - 12px);
          background:#2563eb;border-radius:999px;
          transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
          box-shadow:0 2px 8px rgba(37,99,235,.35);
        }

(function(){
        var nav=document.querySelector('.d03-01-05-nav');
        if(!nav)return;
        var pill=nav.querySelector('.d03-01-05-pill');
        var btns=nav.querySelectorAll('button');
        function move(btn){
          pill.style.left=btn.offsetLeft+'px';
          pill.style.width=btn.offsetWidth+'px';
        }
        btns.forEach(function(b){
          b.addEventListener('click',function(){
            nav.querySelector('button.active').classList.remove('active');
            b.classList.add('active');
            move(b);
          });
        });
        function init(){move(nav.querySelector('button.active'))}
        if(document.readyState==='complete'){init()}
        else{window.addEventListener('load',init)}
      })();