多言語切替対応パンくず

<div class="d03-14-11-wrap">
          <nav class="d03-14-11-bc" aria-label="パンくずリスト">
            <span class="d03-14-11-lv" data-ja="ホーム" data-en="Home">ホーム</span>
            <span class="d03-14-11-sep">›</span>
            <span class="d03-14-11-lv" data-ja="サービス" data-en="Services">サービス</span>
            <span class="d03-14-11-sep">›</span>
            <span class="d03-14-11-lv d03-14-11-current" data-ja="料金プラン" data-en="Pricing">料金プラン</span>
          </nav>
          <div class="d03-14-11-switch">
            <button type="button" class="active" data-lang="ja">JP</button>
            <button type="button" data-lang="en">EN</button>
          </div>
        </div>

.d03-14-11-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d03-14-11-bc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:13px}
        .d03-14-11-sep{color:#94a3b8;font-size:12px}
        .d03-14-11-lv{
          display:inline-block;color:#475569;font-weight:600;
          transition:opacity .2s ease,transform .2s ease;
        }
        .d03-14-11-current{color:#0f172a;font-weight:700}
        .d03-14-11-lv.fade{opacity:0;transform:translateY(4px)}
        .d03-14-11-switch{display:inline-flex;border:1px solid #e2e8f0;border-radius:999px;padding:3px;gap:2px}
        .d03-14-11-switch button{
          border:none;background:none;cursor:pointer;font-family:inherit;
          font-size:11px;font-weight:700;color:#64748b;padding:5px 14px;border-radius:999px;
          transition:background .25s ease,color .25s ease;
        }
        .d03-14-11-switch button.active{background:#2563eb;color:#fff}

(function(){
        var wrap=document.querySelector('.d03-14-11-wrap');
        if(!wrap)return;
        var switcher=wrap.querySelector('.d03-14-11-switch');
        var levels=wrap.querySelectorAll('.d03-14-11-lv');
        switcher.querySelectorAll('button').forEach(function(btn){
          btn.addEventListener('click',function(){
            if(btn.classList.contains('active'))return;
            switcher.querySelector('button.active').classList.remove('active');
            btn.classList.add('active');
            var lang=btn.getAttribute('data-lang');
            levels.forEach(function(lv){lv.classList.add('fade')});
            setTimeout(function(){
              levels.forEach(function(lv){
                lv.textContent=lv.getAttribute('data-'+lang);
                lv.classList.remove('fade');
              });
            },200);
          });
        });
      })();