展開カード(詳細インライン展開)

<ul class="cards">
          <li class="card">
            <div class="top"><span class="ttl">配送について</span><span class="arw">▾</span></div>
            <div class="detail"><p>ご注文から3営業日以内に発送いたします。地域により到着日は異なります。</p></div>
          </li>
          <li class="card">
            <div class="top"><span class="ttl">返品・交換</span><span class="arw">▾</span></div>
            <div class="detail"><p>商品到着後7日以内であれば返品を承ります。詳細はサポートまで。</p></div>
          </li>
        </ul>

.d11-02-08 .cards{list-style:none;margin:0;padding:0;width:250px;display:flex;flex-direction:column;gap:10px}
        .d11-02-08 .card{border-radius:12px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.08);overflow:hidden;cursor:pointer}
        .d11-02-08 .top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
        .d11-02-08 .ttl{font-size:13px;font-weight:700;color:#26264a}
        .d11-02-08 .arw{color:#5b6ef5;transition:transform .3s}
        .d11-02-08 .card.open .arw{transform:rotate(180deg)}
        .d11-02-08 .detail{max-height:0;overflow:hidden;transition:max-height .35s ease}
        .d11-02-08 .card.open .detail{max-height:120px}
        .d11-02-08 .detail p{margin:0;padding:0 16px 16px;font-size:12px;color:#666;line-height:1.7}

(function(){
        var r=document.querySelector('#item-11-02-08 .d11-02-08');
        r.querySelectorAll('.card').forEach(function(c){
          c.querySelector('.top').addEventListener('click',function(){c.classList.toggle('open');});
        });
      })();