手動クローズ可能な通知トースト

<div class="stage09-12-05">
          <div class="toast09-12-05">
            <span class="ic09-12-05">
              <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="#4f46e5" stroke-width="2"><path d="M12 22s7-4.4 7-11V5l-7-3-7 3v6c0 6.6 7 11 7 11z"/></svg>
            </span>
            <span class="tx09-12-05">
              <strong>お知らせ</strong>
              <em>利用規約が更新されました</em>
            </span>
            <button type="button" class="close09-12-05" aria-label="閉じる">×</button>
          </div>
          <button type="button" class="reopen09-12-05">通知を表示</button>
        </div>

.d09-12-05{ background:#f4f5fb; }
        .d09-12-05 .stage09-12-05{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-05 .toast09-12-05{
          position:absolute; right:16px; top:16px; width:220px;
          display:flex; align-items:flex-start; gap:9px;
          background:#fff; border-radius:11px; padding:12px 13px;
          box-shadow:0 10px 26px rgba(20,30,50,.16);
          transition:transform .35s ease, opacity .3s ease;
        }
        .d09-12-05 .toast09-12-05.closed09-12-05{ transform:translateX(120%); opacity:0; pointer-events:none; }
        .d09-12-05 .ic09-12-05{ flex:none; width:24px; height:24px; border-radius:50%; background:#eef2ff; display:flex; align-items:center; justify-content:center; }
        .d09-12-05 .tx09-12-05{ display:flex; flex-direction:column; gap:2px; flex:1; }
        .d09-12-05 .tx09-12-05 strong{ font-size:12.5px; color:#2b2f42; }
        .d09-12-05 .tx09-12-05 em{ font-style:normal; font-size:10.6px; color:#7c8296; }
        .d09-12-05 .close09-12-05{
          flex:none; width:20px; height:20px; border:none; border-radius:50%;
          background:#f1f2f7; color:#7c8296; font-size:13px; line-height:1; cursor:pointer;
          display:flex; align-items:center; justify-content:center; padding:0;
        }
        .d09-12-05 .close09-12-05:hover{ background:#e6e7f2; }
        .d09-12-05 .reopen09-12-05{
          position:absolute; right:16px; top:16px; border:1px dashed #c7cbe0; background:#fff;
          color:#4f46e5; font-size:11px; font-weight:700; padding:7px 14px; border-radius:99px;
          cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease;
        }
        .d09-12-05 .reopen09-12-05.visible09-12-05{ opacity:1; pointer-events:auto; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-05');
        var toast = root.querySelector('.toast09-12-05');
        var closeBtn = root.querySelector('.close09-12-05');
        var reopenBtn = root.querySelector('.reopen09-12-05');
        closeBtn.addEventListener('click', function(){
          toast.classList.add('closed09-12-05');
          reopenBtn.classList.add('visible09-12-05');
        });
        reopenBtn.addEventListener('click', function(){
          toast.classList.remove('closed09-12-05');
          reopenBtn.classList.remove('visible09-12-05');
        });
      })();