トースト通知

<button class="fire-btn" type="button">通知を表示</button>
        <div class="toast" role="status">
          <span class="toast-ic">&#10003;</span>
          <span class="toast-txt">保存しました</span>
        </div>

.d11-01-05 .fire-btn{padding:12px 28px;background:#fff;border:1.5px solid #5b6bff;color:#5b6bff;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .25s,color .25s}
        .d11-01-05 .fire-btn:hover{background:#5b6bff;color:#fff}
        .d11-01-05 .toast{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:9px;padding:11px 16px;background:#2b3245;color:#fff;border-radius:8px;font-size:12px;box-shadow:0 6px 18px rgba(20,25,40,.3);transform:translateX(130%);transition:transform .45s cubic-bezier(.34,1.4,.64,1);z-index:4}
        .d11-01-05 .toast.show{transform:translateX(0)}
        .d11-01-05 .toast-ic{display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:#3ecf8e;border-radius:50%;font-size:11px;flex:none}
        .d11-01-05 .toast-txt{font-weight:600}

(function(){
        var root = document.querySelector('#item-11-01-05 .d11-01-05');
        var toast = root.querySelector('.toast');
        var timer = null;
        root.querySelector('.fire-btn').addEventListener('click', function(){
          clearTimeout(timer);
          toast.classList.remove('show');
          void toast.offsetWidth;
          toast.classList.add('show');
          timer = setTimeout(function(){ toast.classList.remove('show'); }, 2600);
        });
      })();