縦→横スクロールセクション

<div class="scr08-01-08">
          <div class="track08-01-08">
            <div class="sticky08-01-08">
              <p class="cap08-01-08">↓ 縦にスクロールするとカードが横に流れます</p>
              <div class="row08-01-08">
                <div class="card08-01-08 c1">WORKS 01</div>
                <div class="card08-01-08 c2">WORKS 02</div>
                <div class="card08-01-08 c3">WORKS 03</div>
                <div class="card08-01-08 c4">WORKS 04</div>
                <div class="card08-01-08 c5">WORKS 05</div>
              </div>
            </div>
          </div>
        </div>

.d08-01-08{background:#18181b;align-items:stretch;}
        .d08-01-08 .scr08-01-08{width:100%;height:212px;overflow-y:auto;border-radius:12px;background:#27272a;}
        .d08-01-08 .track08-01-08{height:620px;}
        .d08-01-08 .sticky08-01-08{
          position:sticky;top:0;height:212px;overflow:hidden;
          display:flex;flex-direction:column;justify-content:center;gap:14px;
        }
        .d08-01-08 .cap08-01-08{margin:0;padding:0 16px;font-size:11px;color:#a1a1aa;}
        .d08-01-08 .row08-01-08{display:flex;gap:14px;padding:0 16px;width:max-content;will-change:transform;}
        .d08-01-08 .card08-01-08{
          width:150px;height:110px;border-radius:12px;flex:none;
          display:flex;align-items:flex-end;padding:12px;
          font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff;
          box-shadow:0 10px 22px rgba(0,0,0,.35);
        }
        .d08-01-08 .c1{background:linear-gradient(135deg,#f43f5e,#f97316);}
        .d08-01-08 .c2{background:linear-gradient(135deg,#f59e0b,#84cc16);}
        .d08-01-08 .c3{background:linear-gradient(135deg,#10b981,#06b6d4);}
        .d08-01-08 .c4{background:linear-gradient(135deg,#3b82f6,#8b5cf6);}
        .d08-01-08 .c5{background:linear-gradient(135deg,#a855f7,#ec4899);}

(function(){
        var scr=document.querySelector('.d08-01-08 .scr08-01-08');
        if(!scr)return;
        var track=scr.querySelector('.track08-01-08');
        var row=scr.querySelector('.row08-01-08');
        scr.addEventListener('scroll',function(){
          var max=track.offsetHeight-scr.clientHeight;
          var p=max>0?Math.min(1,Math.max(0,scr.scrollTop/max)):0;
          var shift=Math.max(0,row.scrollWidth-scr.clientWidth);
          row.style.transform='translateX('+(-p*shift)+'px)';
        },{passive:true});
      })();