カウントアップ数字グリッド

<div class="d05-04-01-grid">
          <div class="d05-04-01-cell"><span class="d05-04-01-n" data-to="1200" data-suf="+">0</span><span class="d05-04-01-l">導入企業数</span></div>
          <div class="d05-04-01-cell"><span class="d05-04-01-n" data-to="98" data-suf="%">0</span><span class="d05-04-01-l">顧客満足度</span></div>
          <div class="d05-04-01-cell"><span class="d05-04-01-n" data-to="15" data-suf="年">0</span><span class="d05-04-01-l">実績年数</span></div>
          <div class="d05-04-01-cell"><span class="d05-04-01-n" data-to="24" data-suf="h">0</span><span class="d05-04-01-l">サポート対応</span></div>
        </div>

.d05-04-01 .d05-04-01-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
        .d05-04-01 .d05-04-01-cell{background:#f6f8fc;border:1px solid #e6ebf3;border-radius:12px;padding:18px 12px;text-align:center}
        .d05-04-01 .d05-04-01-n{display:block;font-size:34px;font-weight:800;color:#2b5cff;line-height:1.1;letter-spacing:-.5px}
        .d05-04-01 .d05-04-01-l{display:block;margin-top:6px;font-size:12px;color:#5a6273}

(function(){
        var root=document.getElementById('item-05-04-01');if(!root)return;
        var wrap=root.querySelector('.d05-04-01');
        var nums=root.querySelectorAll('.d05-04-01-n');
        function anim(el){
          var to=parseInt(el.getAttribute('data-to'),10),suf=el.getAttribute('data-suf')||'';
          var dur=1400,st=null;
          function step(t){if(!st)st=t;var p=Math.min((t-st)/dur,1);var e=1-Math.pow(1-p,3);
            el.textContent=Math.round(to*e)+suf;if(p<1)requestAnimationFrame(step);}
          requestAnimationFrame(step);
        }
        function reset(){nums.forEach(function(n){n.textContent='0';});}
        var io=new IntersectionObserver(function(es){es.forEach(function(en){
          if(en.isIntersecting){nums.forEach(anim);}else{reset();}
        });},{threshold:.4});
        io.observe(wrap);
      })();