通知ベルバッジ演出

<div class="d06-04-12-wrap">
          <button class="d06-04-12-bell" type="button" aria-label="通知">
            <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 2a6 6 0 0 0-6 6v3.6c0 .7-.3 1.4-.8 1.9L4 15h16l-1.2-1.5c-.5-.5-.8-1.2-.8-1.9V8a6 6 0 0 0-6-6z"/><path d="M9.5 19a2.5 2.5 0 0 0 5 0"/></svg>
            <span class="d06-04-12-badge">5</span>
          </button>
          <p class="d06-04-12-status">新着通知 5件</p>
        </div>

.d06-04-12-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
        .d06-04-12-bell { position:relative; border:none; background:#f1f5f9; color:#475569; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
        .d06-04-12-bell svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        .d06-04-12-bell.is-ring { animation:d1608shake .5s ease; }
        @keyframes d1608shake { 0%,100%{transform:rotate(0);} 20%{transform:rotate(-14deg);} 40%{transform:rotate(11deg);} 60%{transform:rotate(-7deg);} 80%{transform:rotate(4deg);} }
        .d06-04-12-badge { position:absolute; top:2px; right:2px; min-width:18px; height:18px; border-radius:999px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; transition:transform .25s ease, opacity .25s ease; }
        .d06-04-12-badge.is-hidden { transform:scale(0); opacity:0; }
        .d06-04-12-status { margin:0; font-size:11.5px; color:#6b7280; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-12');
          var bell = root.querySelector('.d06-04-12-bell');
          var badge = root.querySelector('.d06-04-12-badge');
          var status = root.querySelector('.d06-04-12-status');
          var read = false;
          bell.addEventListener('click', function(){
            bell.classList.remove('is-ring');
            void bell.offsetWidth;
            bell.classList.add('is-ring');
            read = !read;
            badge.classList.toggle('is-hidden', read);
            status.textContent = read ? '新着通知はありません' : '新着通知 5件';
          });
        })();