サブメニューがアコーディオンで開閉する二階層メニュー

<div class="d03-08-12-frame">
          <div class="d03-08-12-bar">
            <span class="d03-08-12-logo">Clinic</span>
            <button class="d03-08-12-burger" type="button" aria-label="メニューを開く" aria-expanded="false">
              <span></span><span></span><span></span>
            </button>
          </div>
          <nav class="d03-08-12-menu">
            <a href="#">トップ</a>
            <div class="d03-08-12-group">
              <button class="d03-08-12-gtoggle" type="button" aria-expanded="false">診療案内<span class="d03-08-12-chev"></span></button>
              <div class="d03-08-12-sub">
                <a href="#">内科</a>
                <a href="#">小児科</a>
                <a href="#">予防接種</a>
              </div>
            </div>
            <a href="#">アクセス</a>
            <a href="#">予約</a>
          </nav>
        </div>

.d03-08-12-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-12-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef2f7;background:#fff}
        .d03-08-12-logo{font-weight:800;font-size:13px;color:#2563eb;letter-spacing:.02em}
        .d03-08-12-burger{position:relative;width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0}
        .d03-08-12-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-12-burger span:nth-child(1){top:8px}
        .d03-08-12-burger span:nth-child(2){top:14px}
        .d03-08-12-burger span:nth-child(3){top:20px}
        .d03-08-12-burger.open span:nth-child(1){top:14px;transform:rotate(45deg)}
        .d03-08-12-burger.open span:nth-child(2){opacity:0}
        .d03-08-12-burger.open span:nth-child(3){top:14px;transform:rotate(-45deg)}
        .d03-08-12-menu{position:absolute;left:0;right:0;top:57px;bottom:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:#fff;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;z-index:2}
        .d03-08-12-frame.open .d03-08-12-menu{opacity:1;visibility:visible;transform:translateY(0)}
        .d03-08-12-menu > a{padding:10px 8px;color:#374151;text-decoration:none;font-size:13.5px;border-radius:8px;transition:background .15s,color .15s}
        .d03-08-12-menu > a:hover{background:#eff6ff;color:#2563eb}
        .d03-08-12-group{display:flex;flex-direction:column}
        .d03-08-12-gtoggle{all:unset;display:flex;align-items:center;justify-content:space-between;padding:10px 8px;color:#374151;font-size:13.5px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
        .d03-08-12-gtoggle:hover{background:#eff6ff;color:#2563eb}
        .d03-08-12-chev{width:8px;height:8px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);transition:transform .25s}
        .d03-08-12-group.open .d03-08-12-chev{transform:rotate(-135deg)}
        .d03-08-12-sub{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:14px;transition:max-height .3s ease}
        .d03-08-12-group.open .d03-08-12-sub{max-height:140px}
        .d03-08-12-sub a{padding:8px 8px;color:#64748b;text-decoration:none;font-size:12.5px;border-radius:6px;transition:background .15s,color .15s}
        .d03-08-12-sub a:hover{background:#f1f5f9;color:#2563eb}

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