新機能ポップオーバー

<div class="d11-04-07-bar">
          <span class="d11-04-07-logo">MyApp</span>
          <button class="d11-04-07-newbtn">
            レポート
            <span class="d11-04-07-new">NEW</span>
          </button>
        </div>
        <div class="d11-04-07-pop">
          <span class="d11-04-07-pin">✨</span>
          <h4>新機能：レポート</h4>
          <p>アクセス数や会員の動きをグラフで確認できるようになりました。</p>
          <button class="d11-04-07-close2">閉じる</button>
        </div>

.d11-04-07{background:#f4f2fb}
        .d11-04-07 .d11-04-07-bar{width:100%;max-width:260px;display:flex;align-items:center;justify-content:space-between;background:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 6px 18px rgba(50,30,80,.08);position:relative;z-index:2}
        .d11-04-07 .d11-04-07-logo{font-size:14px;font-weight:800;color:#6a4fd0}
        .d11-04-07 .d11-04-07-newbtn{position:relative;background:#f2eefc;border:none;border-radius:8px;padding:8px 12px;font-size:12px;color:#4a4066;cursor:pointer}
        .d11-04-07 .d11-04-07-new{position:absolute;top:-7px;right:-8px;background:#f0524b;color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:10px;letter-spacing:.05em;animation:d337pulse 1.6s infinite}
        @keyframes d337pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,82,75,.5)}50%{box-shadow:0 0 0 6px rgba(240,82,75,0)}}
        .d11-04-07 .d11-04-07-pop{position:absolute;top:64px;right:32px;width:190px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 14px 34px rgba(50,30,80,.22);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.95);transition:all .3s;z-index:3}
        .d11-04-07 .d11-04-07-pop.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
        .d11-04-07 .d11-04-07-pop::before{content:"";position:absolute;top:-7px;right:24px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
        .d11-04-07 .d11-04-07-pin{font-size:22px}
        .d11-04-07 .d11-04-07-pop h4{font-size:14px;color:#3a3358;margin:4px 0 6px}
        .d11-04-07 .d11-04-07-pop p{font-size:11px;line-height:1.6;color:#6a6480;margin-bottom:12px}
        .d11-04-07 .d11-04-07-close2{background:#6a4fd0;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:11px;cursor:pointer}

(function(){
        var root=document.querySelector('#item-11-04-07 .d11-04-07');
        if(!root)return;
        var pop=root.querySelector('.d11-04-07-pop');
        root.querySelector('.d11-04-07-newbtn').addEventListener('click',function(){pop.classList.toggle('show')});
        root.querySelector('.d11-04-07-close2').addEventListener('click',function(){pop.classList.remove('show')});
      })();