言語切替クイックアクセスFAB

<div class="d03-04-12-wrap">
          <div class="d03-04-12-list">
            <button type="button" class="d03-04-12-opt">JA</button>
            <button type="button" class="d03-04-12-opt">EN</button>
            <button type="button" class="d03-04-12-opt">中文</button>
          </div>
          <button type="button" class="d03-04-12-fab">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.2 2.4 3.5 5.5 3.5 9s-1.3 6.6-3.5 9c-2.2-2.4-3.5-5.5-3.5-9s1.3-6.6 3.5-9z"/></svg>
          </button>
        </div>

.prev.d03-04-12{padding:0;display:block}
        .d03-04-12-wrap{position:relative;width:100%;height:100%;min-height:260px;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;box-sizing:border-box}
        .d03-04-12-fab{width:48px;height:48px;border-radius:50%;border:none;background:#4338ca;
          box-shadow:0 6px 16px rgba(67,56,202,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;
          position:relative;z-index:2}
        .d03-04-12-list{
          position:absolute;right:16px;bottom:74px;display:flex;flex-direction:column;gap:8px;
          opacity:0;visibility:hidden;transform:translateY(8px);
          transition:opacity .2s ease,transform .2s ease,visibility .2s;
        }
        .d03-04-12-wrap.is-open .d03-04-12-list{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-04-12-opt{padding:8px 16px;border:none;border-radius:20px;background:#fff;color:#374151;
          font-size:12px;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,.12);cursor:pointer}

(function(){
        var wrap=document.querySelector('.d03-04-12-wrap');
        if(!wrap)return;
        var fab=wrap.querySelector('.d03-04-12-fab');
        fab.addEventListener('click',function(){
          wrap.classList.toggle('is-open');
        });
        wrap.querySelectorAll('.d03-04-12-opt').forEach(function(btn){
          btn.addEventListener('click',function(){
            wrap.classList.remove('is-open');
          });
        });
      })();