スワイプで閉じる通知トースト

<div class="d08-08-09-toast">
          <span class="d08-08-09-ico">✓</span>
          <div class="d08-08-09-text"><b>保存しました</b><p>変更内容が反映されました</p></div>
        </div>

.d08-08-09-toast{width:100%;max-width:260px;background:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(30,30,60,.14);padding:14px 16px;display:flex;align-items:center;gap:12px;touch-action:pan-y;cursor:grab}
        .d08-08-09-ico{width:30px;height:30px;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
        .d08-08-09-text b{font-size:13px}
        .d08-08-09-text p{font-size:11px;color:#8a8f9c;margin-top:2px}

(function(){
        var root=document.querySelector('#item-08-08-09 .d08-08-09');
        var toast=root&&root.querySelector('.d08-08-09-toast');
        if(!toast)return;
        var startX=0,dragging=false;
        function getX(e){return e.touches&&e.touches.length?e.touches[0].clientX:e.clientX;}
        function onDown(e){
          dragging=true;startX=getX(e);toast.style.transition='none';
          document.addEventListener('mousemove',onMove);
          document.addEventListener('mouseup',onUp);
        }
        function onMove(e){
          if(!dragging)return;
          if(e.cancelable)e.preventDefault();
          var x=getX(e)-startX;
          toast.style.transform='translateX('+x+'px)';
          toast.style.opacity=String(Math.max(0.15,1-Math.abs(x)/160));
          toast.dataset.dx=x;
        }
        function onUp(){
          if(!dragging)return;
          dragging=false;
          document.removeEventListener('mousemove',onMove);
          document.removeEventListener('mouseup',onUp);
          var x=parseFloat(toast.dataset.dx||'0');
          toast.style.transition='transform .3s ease,opacity .3s ease';
          if(Math.abs(x)>70){
            toast.style.transform='translateX('+(x>0?320:-320)+'px)';
            toast.style.opacity='0';
            setTimeout(function(){
              toast.style.transition='none';
              toast.style.transform='translateX(0)';
              toast.style.opacity='1';
            },700);
          }else{
            toast.style.transform='translateX(0)';
            toast.style.opacity='1';
          }
          toast.dataset.dx=0;
        }
        toast.addEventListener('mousedown',onDown);
        toast.addEventListener('touchstart',onDown,{passive:true});
        toast.addEventListener('touchmove',onMove,{passive:false});
        toast.addEventListener('touchend',onUp);
      })();