スティッキーステップ

<div class="scr08-01-07">
          <div class="inner08-01-07">
            <div class="figwrap08-01-07">
              <div class="fig08-01-07"><b>1</b><span>ヒアリング</span></div>
            </div>
            <ol class="steps08-01-07">
              <li class="on"><h6>STEP 1</h6><p>ヒアリング。↓ 枠内をスクロールすると左の図が切り替わります。</p></li>
              <li><h6>STEP 2</h6><p>デザイン制作。左の図は固定されたまま内容だけが更新されます。</p></li>
              <li><h6>STEP 3</h6><p>実装・構築。長い説明でも図が常に見えるので迷いません。</p></li>
              <li><h6>STEP 4</h6><p>公開。手順解説やサービス紹介ページに最適な構成です。</p></li>
            </ol>
          </div>
        </div>

.d08-01-07{background:#f1f5f9;align-items:stretch;}
        .d08-01-07 .scr08-01-07{width:100%;height:212px;overflow-y:auto;border-radius:12px;background:#fff;border:1px solid #e2e8f0;}
        .d08-01-07 .inner08-01-07{display:flex;align-items:flex-start;}
        .d08-01-07 .figwrap08-01-07{width:42%;flex:none;position:sticky;top:0;height:212px;display:flex;align-items:center;justify-content:center;}
        .d08-01-07 .fig08-01-07{
          width:100px;height:100px;border-radius:16px;display:flex;flex-direction:column;
          align-items:center;justify-content:center;gap:4px;color:#fff;
          background:linear-gradient(135deg,#0ea5e9,#6366f1);
          box-shadow:0 10px 24px rgba(14,110,233,.3);
          transition:background .4s ease,transform .4s ease;
        }
        .d08-01-07 .fig08-01-07 b{font-size:30px;line-height:1;}
        .d08-01-07 .fig08-01-07 span{font-size:10px;letter-spacing:.05em;}
        .d08-01-07 .steps08-01-07{list-style:none;margin:0;padding:16px 16px 16px 0;flex:1;}
        .d08-01-07 .steps08-01-07 li{
          min-height:150px;padding:14px;margin-bottom:12px;border-radius:10px;
          background:#f8fafc;border:1px solid #e2e8f0;opacity:.45;
          transition:opacity .3s ease,border-color .3s ease,background .3s ease;
        }
        .d08-01-07 .steps08-01-07 li.on{opacity:1;background:#eff6ff;border-color:#93c5fd;}
        .d08-01-07 .steps08-01-07 h6{margin:0 0 6px;font-size:11px;color:#2563eb;letter-spacing:.1em;}
        .d08-01-07 .steps08-01-07 p{margin:0;font-size:12px;line-height:1.8;color:#475569;}

(function(){
        var scr=document.querySelector('.d08-01-07 .scr08-01-07');
        if(!scr)return;
        var fig=scr.querySelector('.fig08-01-07');
        var num=fig.querySelector('b'),label=fig.querySelector('span');
        var items=[].slice.call(scr.querySelectorAll('.steps08-01-07 li'));
        var names=['ヒアリング','デザイン制作','実装・構築','公開'];
        var grads=[
          'linear-gradient(135deg,#0ea5e9,#6366f1)',
          'linear-gradient(135deg,#8b5cf6,#ec4899)',
          'linear-gradient(135deg,#f59e0b,#ef4444)',
          'linear-gradient(135deg,#10b981,#0ea5e9)'
        ];
        var cur=-1;
        function update(){
          var mid=scr.scrollTop+scr.clientHeight/2,idx=0;
          for(var i=0;i<items.length;i++){
            if(items[i].offsetTop<=mid)idx=i;
          }
          if(idx===cur)return;
          cur=idx;
          num.textContent=idx+1;
          label.textContent=names[idx];
          fig.style.background=grads[idx];
          fig.style.transform='scale(1.06)';
          setTimeout(function(){fig.style.transform='scale(1)';},200);
          items.forEach(function(li,i){li.classList.toggle('on',i===idx);});
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();