全項目チェックで完了アニメーション

<div class="d04-14-08-wrap">
          <span class="d04-14-08-label">出発前チェックリスト</span>
          <ul class="d04-14-08-list">
            <li><label><input type="checkbox"><span>チケット確認</span></label></li>
            <li><label><input type="checkbox"><span>パスポート</span></label></li>
            <li><label><input type="checkbox"><span>荷物準備</span></label></li>
          </ul>
          <div class="d04-14-08-done">
            <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#22b573" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12.5l2.7 2.7L16 9.5"/></svg>
            <p>全項目完了しました!</p>
          </div>
        </div>

.d04-14-08-wrap{width:min(280px,100%);min-height:150px}
        .d04-14-08-label{display:block;margin:0 0 10px;font-size:12px;color:#8a93a3}
        .d04-14-08-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;transition:opacity .25s}
        .d04-14-08-list label{display:flex;align-items:center;gap:8px;font-size:13px;color:#333;cursor:pointer}
        .d04-14-08-done{
          display:none;flex-direction:column;align-items:center;justify-content:center;
          text-align:center;gap:8px;padding:20px 0;
        }
        .d04-14-08-done p{margin:0;font-size:13px;color:#1c7c4e;font-weight:700}
        .d04-14-08-wrap.is-complete .d04-14-08-list{display:none}
        .d04-14-08-wrap.is-complete .d04-14-08-done{display:flex}

(function(){
        var wrap=document.querySelector('.d04-14-08-wrap');
        if(!wrap)return;
        var boxes=wrap.querySelectorAll('.d04-14-08-list input');
        function check(){
          var all=true;
          boxes.forEach(function(b){ if(!b.checked)all=false; });
          wrap.classList.toggle('is-complete',all);
        }
        boxes.forEach(function(b){ b.addEventListener('change',check); });
      })();