プレイリスト

<div class="d07-03-09-wrap">
          <div class="d07-03-09-main">
            <span class="d07-03-09-title">再生中: <b class="d07-03-09-now">エピソード 1</b></span>
            <button class="d07-03-09-play" aria-label="再生"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
          </div>
          <ul class="d07-03-09-list">
            <li class="active" data-t="エピソード 1"><span class="d07-03-09-tn"></span>エピソード 1</li>
            <li data-t="エピソード 2"><span class="d07-03-09-tn"></span>エピソード 2</li>
            <li data-t="エピソード 3"><span class="d07-03-09-tn"></span>エピソード 3</li>
            <li data-t="エピソード 4"><span class="d07-03-09-tn"></span>エピソード 4</li>
          </ul>
        </div>

.prev.d07-03-09{background:#f1f5f9}
        .d07-03-09-wrap{display:flex;gap:12px;width:100%;max-width:360px}
        .d07-03-09-main{flex:1.4;position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
          background:linear-gradient(135deg,#0ea5e9,#6366f1);display:flex;align-items:flex-end;padding:10px}
        .d07-03-09-title{color:#fff;font-size:.72rem;text-shadow:0 1px 2px rgba(0,0,0,.4)}
        .d07-03-09-play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border:none;border-radius:50%;
          background:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center}
        .d07-03-09-play svg{width:20px;height:20px;fill:#6366f1;margin-left:2px}
        .d07-03-09-list{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;overflow:auto}
        .d07-03-09-list li{display:flex;align-items:center;gap:8px;font-size:.72rem;padding:5px;border-radius:8px;cursor:pointer;
          background:#fff;border:2px solid transparent;transition:border-color .2s,background .2s}
        .d07-03-09-list li:hover{background:#eef2ff}
        .d07-03-09-list li.active{border-color:#6366f1;background:#eef2ff;font-weight:700}
        .d07-03-09-tn{width:32px;height:20px;border-radius:4px;flex:0 0 auto;background:linear-gradient(135deg,#a855f7,#ec4899)}
        .d07-03-09-list li:nth-child(2) .d07-03-09-tn{background:linear-gradient(135deg,#22c55e,#0d9488)}
        .d07-03-09-list li:nth-child(3) .d07-03-09-tn{background:linear-gradient(135deg,#f59e0b,#ef4444)}
        .d07-03-09-list li:nth-child(4) .d07-03-09-tn{background:linear-gradient(135deg,#3b82f6,#1e3a8a)}

(function(){
        var root=document.querySelector('#item-07-03-09');
        if(!root)return;
        var items=root.querySelectorAll('.d07-03-09-list li'),
            now=root.querySelector('.d07-03-09-now');
        items.forEach(function(li){
          li.addEventListener('click',function(){
            items.forEach(function(x){x.classList.remove('active');});
            li.classList.add('active');
            now.textContent=li.getAttribute('data-t');
          });
        });
      })();