モバイル用ボトムドロワー

<div class="d03-09-05-stage">
          <div class="d03-09-05-screen">
            <p class="d03-09-05-hint">下部の「その他」をタップ</p>
            <div class="d03-09-05-card"></div>
            <div class="d03-09-05-card"></div>
          </div>
          <footer class="d03-09-05-tabbar">
            <button type="button" class="d03-09-05-tab active"><i></i>ホーム</button>
            <button type="button" class="d03-09-05-tab"><i></i>検索</button>
            <button type="button" class="d03-09-05-tab d03-09-05-more"><i></i>その他</button>
          </footer>
          <div class="d03-09-05-overlay"></div>
          <div class="d03-09-05-sheet">
            <span class="d03-09-05-handle"></span>
            <a href="#" onclick="return false">マイページ</a>
            <a href="#" onclick="return false">お気に入り</a>
            <a href="#" onclick="return false">設定</a>
            <a href="#" onclick="return false">ログアウト</a>
          </div>
        </div>

.prev.d03-09-05{padding:0;display:block}
        .d03-09-05-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f1f5f9}
        .d03-09-05-screen{position:absolute;inset:0;bottom:52px;padding:18px;overflow:hidden}
        .d03-09-05-hint{margin:0 0 12px;font-size:12px;color:#94a3b8;text-align:center}
        .d03-09-05-card{height:64px;border-radius:10px;margin-bottom:10px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}
        .d03-09-05-tabbar{position:absolute;left:0;right:0;bottom:0;height:52px;background:#fff;border-top:1px solid #e2e8f0;display:flex;z-index:3}
        .d03-09-05-tab{flex:1;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:#94a3b8;cursor:pointer;font-family:inherit}
        .d03-09-05-tab i{width:14px;height:14px;border-radius:5px;background:currentColor;opacity:.4}
        .d03-09-05-tab.active{color:#2563eb}
        .d03-09-05-tab.active i{opacity:.9}
        .d03-09-05-overlay{position:absolute;inset:0;background:rgba(15,23,42,.4);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1}
        .d03-09-05-stage.open .d03-09-05-overlay{opacity:1;visibility:visible}
        .d03-09-05-sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:10px 20px 20px;box-shadow:0 -6px 20px rgba(0,0,0,.15);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:2;display:flex;flex-direction:column;gap:2px}
        .d03-09-05-stage.open .d03-09-05-sheet{transform:translateY(0)}
        .d03-09-05-handle{width:36px;height:4px;border-radius:2px;background:#e2e8f0;margin:0 auto 10px}
        .d03-09-05-sheet a{color:#1f2937;text-decoration:none;font-size:13px;font-weight:600;padding:10px 4px;border-bottom:1px solid #f1f5f9}
        .d03-09-05-sheet a:hover{color:#2563eb}

(function(){
        var stage=document.querySelector('.d03-09-05-stage');
        if(!stage)return;
        stage.querySelector('.d03-09-05-more').addEventListener('click',function(){
          stage.classList.add('open');
        });
        stage.querySelector('.d03-09-05-overlay').addEventListener('click',function(){
          stage.classList.remove('open');
        });
      })();