下からせり上がるボトムシートメニュー

<div class="d03-08-11-frame">
          <div class="d03-08-11-bar">
            <span class="d03-08-11-logo">Hotel</span>
            <button class="d03-08-11-burger" type="button" aria-label="メニューを開く" aria-expanded="false">
              <span></span><span></span><span></span>
            </button>
          </div>
          <div class="d03-08-11-dim"></div>
          <div class="d03-08-11-sheet">
            <span class="d03-08-11-handle"></span>
            <a href="#">客室一覧</a>
            <a href="#">レストラン</a>
            <a href="#">アクセス</a>
            <a href="#">ご予約</a>
          </div>
        </div>

.d03-08-11-frame{position:relative;width:100%;max-width:260px;height:210px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(30,41,59,.14);border:1px solid #e5e7eb}
        .d03-08-11-bar{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef2f7;background:#fff}
        .d03-08-11-logo{font-weight:800;font-size:13px;color:#0f766e;letter-spacing:.02em}
        .d03-08-11-burger{position:relative;width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0}
        .d03-08-11-burger span{position:absolute;left:4px;width:20px;height:2.4px;background:#1f2937;border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
        .d03-08-11-burger span:nth-child(1){top:8px}
        .d03-08-11-burger span:nth-child(2){top:14px}
        .d03-08-11-burger span:nth-child(3){top:20px}
        .d03-08-11-burger.open span:nth-child(1){top:14px;transform:rotate(45deg)}
        .d03-08-11-burger.open span:nth-child(2){opacity:0}
        .d03-08-11-burger.open span:nth-child(3){top:14px;transform:rotate(-45deg)}
        .d03-08-11-dim{position:absolute;inset:0;z-index:2;background:rgba(15,23,42,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
        .d03-08-11-frame.open .d03-08-11-dim{opacity:1;visibility:visible}
        .d03-08-11-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 20px 16px;transform:translateY(100%);transition:transform .38s cubic-bezier(.65,0,.35,1)}
        .d03-08-11-frame.open .d03-08-11-sheet{transform:translateY(0)}
        .d03-08-11-handle{width:36px;height:4px;border-radius:2px;background:#d1d5db;margin-bottom:8px}
        .d03-08-11-sheet a{align-self:stretch;text-align:center;padding:8px 0;color:#374151;text-decoration:none;font-size:13.5px;font-weight:600;border-top:1px solid #f1f5f9}
        .d03-08-11-sheet a:first-of-type{border-top:0}
        .d03-08-11-sheet a:hover{color:#0f766e}

(function(){
        var root=document.getElementById('item-03-08-11');
        var burger=root.querySelector('.d03-08-11-burger');
        var frame=root.querySelector('.d03-08-11-frame');
        function toggle(){
          var isOpen=frame.classList.toggle('open');
          burger.classList.toggle('open',isOpen);
          burger.setAttribute('aria-expanded',isOpen?'true':'false');
        }
        burger.addEventListener('click',toggle);
        root.querySelector('.d03-08-11-dim').addEventListener('click',toggle);
      })();