階層を遡るとスライドアウトするパンくず

<div class="d03-14-04-wrap">
          <nav class="d03-14-04-bc" aria-label="パンくずリスト">
            <span class="d03-14-04-seg" data-i="0"><a href="#" onclick="return false">ホーム</a></span>
            <span class="d03-14-04-seg" data-i="1"><span class="d03-14-04-sep">›</span><a href="#" onclick="return false">サービス</a></span>
            <span class="d03-14-04-seg" data-i="2"><span class="d03-14-04-sep">›</span><a href="#" onclick="return false">Web制作</a></span>
            <span class="d03-14-04-seg" data-i="3"><span class="d03-14-04-sep">›</span><span class="d03-14-04-current">LP制作</span></span>
          </nav>
          <button type="button" class="d03-14-04-reset">元に戻す</button>
        </div>

.d03-14-04-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d03-14-04-bc{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-04-sep{color:#94a3b8;font-size:12px;margin:0 6px}
        .d03-14-04-bc a{color:#475569;text-decoration:none;font-weight:600}
        .d03-14-04-bc a:hover{color:#2563eb}
        .d03-14-04-current{color:#0f172a;font-weight:700}
        .d03-14-04-seg{display:inline-flex;align-items:center;transition:opacity .3s ease,transform .3s ease,max-width .3s ease;max-width:200px}
        .d03-14-04-seg.out{opacity:0;transform:translateX(8px);max-width:0;pointer-events:none;overflow:hidden}
        .d03-14-04-reset{
          border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;cursor:pointer;
          font-size:11.5px;font-weight:700;border-radius:999px;padding:6px 14px;font-family:inherit;
          transition:background .2s ease;
        }
        .d03-14-04-reset:hover{background:#eef2ff;color:#2563eb}

(function(){
        var wrap=document.querySelector('.d03-14-04-wrap');
        if(!wrap)return;
        var segs=wrap.querySelectorAll('.d03-14-04-seg');
        wrap.querySelectorAll('.d03-14-04-seg a').forEach(function(a){
          a.addEventListener('click',function(){
            var idx=parseInt(a.closest('.d03-14-04-seg').getAttribute('data-i'),10);
            segs.forEach(function(seg){
              var i=parseInt(seg.getAttribute('data-i'),10);
              if(i>idx){seg.classList.add('out')}
            });
          });
        });
        wrap.querySelector('.d03-14-04-reset').addEventListener('click',function(){
          segs.forEach(function(seg){seg.classList.remove('out')});
        });
      })();