ハンバーガー→X + ドロワー

<div class="d03-01-02-stage">
          <header class="d03-01-02-bar">
            <span class="d03-01-02-logo">LOGO</span>
            <button class="d03-01-02-btn" type="button" aria-label="メニュー">
              <span></span><span></span><span></span>
            </button>
          </header>
          <div class="d03-01-02-overlay"></div>
          <nav class="d03-01-02-drawer">
            <a href="#" onclick="return false">ホーム</a>
            <a href="#" onclick="return false">サービス</a>
            <a href="#" onclick="return false">実績</a>
            <a href="#" onclick="return false">会社概要</a>
            <a href="#" onclick="return false">お問い合わせ</a>
          </nav>
        </div>

.prev.d03-01-02{padding:0;display:block}
        .d03-01-02-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f1f5f9}
        .d03-01-02-bar{
          display:flex;align-items:center;justify-content:space-between;
          height:56px;padding:0 16px;background:#fff;
          box-shadow:0 1px 4px rgba(0,0,0,.08);
          position:relative;z-index:3;
        }
        .d03-01-02-logo{font-weight:800;letter-spacing:.1em;color:#111827;font-size:15px}
        .d03-01-02-btn{
          width:40px;height:40px;border:none;background:transparent;cursor:pointer;
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
        }
        .d03-01-02-btn span{
          display:block;width:22px;height:2px;background:#111827;border-radius:2px;
          transition:transform .3s ease,opacity .3s ease;
        }
        .d03-01-02-stage.open .d03-01-02-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
        .d03-01-02-stage.open .d03-01-02-btn span:nth-child(2){opacity:0}
        .d03-01-02-stage.open .d03-01-02-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
        .d03-01-02-overlay{
          position:absolute;inset:0;background:rgba(15,23,42,.45);
          opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1;
        }
        .d03-01-02-stage.open .d03-01-02-overlay{opacity:1;visibility:visible}
        .d03-01-02-drawer{
          position:absolute;top:0;right:0;bottom:0;width:60%;max-width:220px;
          background:#fff;box-shadow:-4px 0 16px rgba(0,0,0,.12);
          display:flex;flex-direction:column;padding:70px 24px 24px;gap:4px;
          transform:translateX(105%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:2;
        }
        .d03-01-02-stage.open .d03-01-02-drawer{transform:translateX(0)}
        .d03-01-02-drawer a{
          color:#1f2937;text-decoration:none;font-size:13px;font-weight:600;
          padding:10px 4px;border-bottom:1px solid #e5e7eb;
        }
        .d03-01-02-drawer a:hover{color:#2563eb}

(function(){
        var stage=document.querySelector('.d03-01-02-stage');
        if(!stage)return;
        stage.querySelector('.d03-01-02-btn').addEventListener('click',function(){
          stage.classList.toggle('open');
        });
        stage.querySelector('.d03-01-02-overlay').addEventListener('click',function(){
          stage.classList.remove('open');
        });
      })();