はい/いいえのスワイプ式アンケート

<div class="d04-14-05-wrap">
          <p class="d04-14-05-q">今回の対応にご満足いただけましたか?</p>
          <div class="d04-14-05-card">
            <span class="d04-14-05-face">🙂</span>
            <p class="d04-14-05-result">左右のボタンで回答してください</p>
          </div>
          <div class="d04-14-05-btns">
            <button type="button" class="d04-14-05-no">いいえ</button>
            <button type="button" class="d04-14-05-yes">はい</button>
          </div>
        </div>

.d04-14-05-wrap{width:min(280px,100%);text-align:center}
        .d04-14-05-q{margin:0 0 12px;font-size:12.5px;color:#333;font-weight:700}
        .d04-14-05-card{
          padding:18px 10px;border-radius:12px;background:#f6f7fb;margin-bottom:14px;
          transition:transform .3s ease,opacity .3s ease;
        }
        .d04-14-05-card.fly-yes{transform:translateX(60px) rotate(8deg);opacity:0}
        .d04-14-05-card.fly-no{transform:translateX(-60px) rotate(-8deg);opacity:0}
        .d04-14-05-face{display:block;font-size:30px}
        .d04-14-05-result{margin:8px 0 0;font-size:11px;color:#8a93a3}
        .d04-14-05-btns{display:flex;justify-content:center;gap:12px}
        .d04-14-05-btns button{
          padding:9px 18px;font-size:13px;font-weight:700;border-radius:99px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;
        }
        .d04-14-05-yes{border-color:#22b573;color:#22b573}
        .d04-14-05-no{border-color:#e5484d;color:#e5484d}

(function(){
        var wrap=document.querySelector('.d04-14-05-wrap');
        if(!wrap)return;
        var card=wrap.querySelector('.d04-14-05-card');
        var face=wrap.querySelector('.d04-14-05-face');
        var result=wrap.querySelector('.d04-14-05-result');
        function answer(cls,emoji,text){
          card.classList.add(cls);
          setTimeout(function(){
            face.textContent=emoji;
            result.textContent=text;
            card.classList.remove('fly-yes','fly-no');
          },280);
        }
        wrap.querySelector('.d04-14-05-yes').addEventListener('click',function(){
          answer('fly-yes','😊','ご回答ありがとうございます!');
        });
        wrap.querySelector('.d04-14-05-no').addEventListener('click',function(){
          answer('fly-no','😞','貴重なご意見ありがとうございます');
        });
      })();