3Dアコーディオンパネル

<div class="d08-05-07-acc">
          <div class="d08-05-07-panel">
            <div class="d08-05-07-head">料金プランについて</div>
            <div class="d08-05-07-body">月額制と年額制からお選びいただけます。</div>
          </div>
          <div class="d08-05-07-panel">
            <div class="d08-05-07-head">納期の目安</div>
            <div class="d08-05-07-body">ご依頼内容により2〜4週間が目安です。</div>
          </div>
          <div class="d08-05-07-panel">
            <div class="d08-05-07-head">サポート体制</div>
            <div class="d08-05-07-body">公開後も専任スタッフがサポートします。</div>
          </div>
        </div>

.d08-05-07-acc{perspective:700px;display:flex;flex-direction:column;gap:8px;width:100%;max-width:230px}
        .d08-05-07-panel{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
        .d08-05-07-head{padding:10px 12px;font-size:12px;font-weight:700;color:#1e293b;cursor:pointer;background:#f8fafc}
        .d08-05-07-body{max-height:0;padding:0 12px;opacity:0;font-size:11px;color:#4338ca;line-height:1.7;transform:rotateX(-90deg);transform-origin:top center;transform-style:preserve-3d;overflow:hidden;transition:max-height .5s ease,transform .5s ease,opacity .4s ease,padding .4s ease}
        .d08-05-07-panel.d08-05-07-open .d08-05-07-body{max-height:100px;opacity:1;transform:rotateX(0deg);padding:10px 12px}

(function(){
        var root=document.getElementById('item-08-05-07');if(!root)return;
        var panels=root.querySelectorAll('.d08-05-07-panel');
        panels.forEach(function(p){
          p.querySelector('.d08-05-07-head').addEventListener('click',function(){
            var wasOpen=p.classList.contains('d08-05-07-open');
            panels.forEach(function(o){o.classList.remove('d08-05-07-open');});
            if(!wasOpen)p.classList.add('d08-05-07-open');
          });
        });
      })();