スワイプ削除カード

<div class="d08-07-06-wrap">
          <div class="d08-07-06-stack" id="d08-07-06-stack">
            <div class="d08-07-06-card">💌 山田さんから<br>メッセージ</div>
            <div class="d08-07-06-card">📷 新着写真が<br>あります</div>
            <div class="d08-07-06-card">🔔 リマインダー<br>設定完了</div>
          </div>
          <p class="d08-07-06-hint" id="d08-07-06-hint">ドラッグして左右に振り分け</p>
          <button class="d08-07-06-reset" id="d08-07-06-reset" type="button">🔄 もう一度</button>
        </div>

.d08-07-06-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d08-07-06-stack{position:relative;width:170px;height:120px}
        .d08-07-06-card{position:absolute;inset:0;background:#fff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;font-weight:700;color:#2a2d3a;padding:10px;cursor:grab;touch-action:none}
        .d08-07-06-card:nth-child(1){z-index:3}
        .d08-07-06-card:nth-child(2){z-index:2;transform:scale(.94) translateY(8px)}
        .d08-07-06-card:nth-child(3){z-index:1;transform:scale(.88) translateY(16px)}
        .d08-07-06-hint{font-size:11.5px;color:#9aa0b0;margin:0}
        .d08-07-06-reset{display:none;font-size:12px;font-weight:700;color:#6a5cff;background:#f1efff;border:none;border-radius:99px;padding:7px 16px;cursor:pointer}
        .d08-07-06-reset.show{display:inline-block}

(function(){
        var root=document.getElementById('item-08-07-06');if(!root)return;
        var stack=root.querySelector('#d08-07-06-stack'),hint=root.querySelector('#d08-07-06-hint'),resetBtn=root.querySelector('#d08-07-06-reset');
        if(!stack)return;
        var original=stack.innerHTML;
        var dragging=null,startX=0,startY=0;
        function onMove(e){
          if(!dragging)return;
          var dx=e.clientX-startX,dy=e.clientY-startY;
          dragging.style.transform='translate('+dx+'px,'+dy+'px) rotate('+(dx/14)+'deg)';
          dragging.style.opacity=String(1-Math.min(1,Math.abs(dx)/220));
        }
        function onUp(e){
          if(!dragging)return;
          var dx=e.clientX-startX,dy=e.clientY-startY;
          var card=dragging;
          card.removeEventListener('pointermove',onMove);
          card.removeEventListener('pointerup',onUp);
          card.removeEventListener('pointercancel',onUp);
          dragging=null;
          if(Math.abs(dx)>90){
            card.style.transition='transform .35s ease,opacity .35s ease';
            card.style.transform='translate('+(dx>0?420:-420)+'px,'+dy+'px) rotate('+(dx/8)+'deg)';
            card.style.opacity='0';
            setTimeout(function(){
              card.remove();
              if(!stack.querySelector('.d08-07-06-card')){
                if(hint)hint.style.display='none';
                if(resetBtn)resetBtn.classList.add('show');
              }else{
                bind();
              }
            },350);
          }else{
            card.style.transition='transform .25s ease,opacity .25s ease';
            card.style.transform='';card.style.opacity='';
            setTimeout(function(){card.style.transition='';},250);
          }
        }
        function onDown(e){
          dragging=e.currentTarget;startX=e.clientX;startY=e.clientY;
          try{dragging.setPointerCapture(e.pointerId);}catch(err){}
          dragging.addEventListener('pointermove',onMove);
          dragging.addEventListener('pointerup',onUp);
          dragging.addEventListener('pointercancel',onUp);
        }
        function bind(){
          var top=stack.querySelector('.d08-07-06-card:first-child');
          if(!top)return;
          top.addEventListener('pointerdown',onDown);
        }
        bind();
        if(resetBtn)resetBtn.addEventListener('click',function(){
          stack.innerHTML=original;
          resetBtn.classList.remove('show');
          if(hint)hint.style.display='';
          bind();
        });
      })();