自動切替スライド特徴紹介

<div class="d01-04-12-box">
          <div class="d01-04-12-slides">
            <div class="d01-04-12-slide is-on">
              <b>データに基づく改善</b>
              <p>アクセス解析から次の一手を提案します。</p>
            </div>
            <div class="d01-04-12-slide">
              <b>多言語対応</b>
              <p>海外顧客にもそのまま展開できます。</p>
            </div>
            <div class="d01-04-12-slide">
              <b>24時間監視</b>
              <p>サーバー障害を自動で検知・通知します。</p>
            </div>
          </div>
          <div class="d01-04-12-dots">
            <span class="d01-04-12-dot is-on"></span><span class="d01-04-12-dot"></span><span class="d01-04-12-dot"></span>
          </div>
        </div>

.prev.d01-04-12{background:#fbfaff}
        .d01-04-12-box{width:100%;max-width:340px}
        .d01-04-12-slides{position:relative;height:88px}
        .d01-04-12-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;text-align:center}
        .d01-04-12-slide.is-on{opacity:1;transform:none}
        .d01-04-12-slide b{display:block;font-size:16px;color:#2a2350;margin-bottom:8px}
        .d01-04-12-slide p{margin:0;font-size:12.5px;color:#6a7288;line-height:1.6}
        .d01-04-12-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
        .d01-04-12-dot{width:7px;height:7px;border-radius:50%;background:#dcd8f0;transition:background .3s,width .3s}
        .d01-04-12-dot.is-on{background:#7a5bf0;width:20px;border-radius:4px}

(function(){
        var root=document.querySelector('.d01-04-12');if(!root)return;
        var slides=root.querySelectorAll('.d01-04-12-slide'),dots=root.querySelectorAll('.d01-04-12-dot');
        var i=0,n=slides.length,timer=null;
        function show(k){
          slides.forEach(function(s,idx){s.classList.toggle('is-on',idx===k)});
          dots.forEach(function(d,idx){d.classList.toggle('is-on',idx===k)});
        }
        function next(){i=(i+1)%n;show(i);}
        timer=setInterval(next,2600);
      })();