右下スライドイン通知トースト

<div class="stage09-12-01">
          <div class="toast09-12-01">
            <span class="ic09-12-01">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#16a34a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
            </span>
            <span class="tx09-12-01">
              <strong>保存しました</strong>
              <em>変更内容を自動で保存しました</em>
            </span>
          </div>
        </div>

.d09-12-01{ background:#eef1f6; }
        .d09-12-01 .stage09-12-01{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-01 .toast09-12-01{
          position:absolute; right:16px; bottom:16px; width:216px;
          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,.18);
          transform:translateX(130%); opacity:0;
          transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
        }
        .d09-12-01 .toast09-12-01.show09-12-01{ transform:translateX(0); opacity:1; }
        .d09-12-01 .ic09-12-01{ flex:none; width:26px; height:26px; border-radius:50%; background:#dcfce7; display:flex; align-items:center; justify-content:center; }
        .d09-12-01 .tx09-12-01{ display:flex; flex-direction:column; gap:2px; }
        .d09-12-01 .tx09-12-01 strong{ font-size:12.5px; color:#16311f; }
        .d09-12-01 .tx09-12-01 em{ font-style:normal; font-size:10.8px; color:#6b8578; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-01');
        var toast = root.querySelector('.toast09-12-01');
        function cycle(){
          toast.classList.add('show09-12-01');
          setTimeout(function(){ toast.classList.remove('show09-12-01'); }, 2100);
        }
        cycle();
        setInterval(cycle, 3800);
      })();