アコーディオンFAQ

<div class="acc">
          <div class="acc-item">
            <button class="acc-head" type="button" aria-expanded="false">
              <span>料金はいくらですか？</span><span class="acc-ic"></span>
            </button>
            <div class="acc-body"><div class="acc-inner">月額980円からご利用いただけます。初月は無料でお試し可能です。</div></div>
          </div>
          <div class="acc-item">
            <button class="acc-head" type="button" aria-expanded="false">
              <span>解約はいつでもできますか？</span><span class="acc-ic"></span>
            </button>
            <div class="acc-body"><div class="acc-inner">はい、マイページからいつでも解約できます。違約金は一切かかりません。</div></div>
          </div>
          <div class="acc-item">
            <button class="acc-head" type="button" aria-expanded="false">
              <span>サポートはありますか？</span><span class="acc-ic"></span>
            </button>
            <div class="acc-body"><div class="acc-inner">平日10時〜18時にメールとチャットでサポートを提供しています。</div></div>
          </div>
        </div>

.prev.d11-01-01{align-items:flex-start;padding-top:28px}
        .d11-01-01 .acc{width:100%;max-width:340px}
        .d11-01-01 .acc-item{background:#fff;border:1px solid #e2e6ee;border-radius:10px;margin-bottom:10px;overflow:hidden;box-shadow:0 2px 8px rgba(30,40,80,.05)}
        .d11-01-01 .acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;background:none;border:none;cursor:pointer;font-size:13px;font-weight:700;color:#2b3245;text-align:left;font-family:inherit}
        .d11-01-01 .acc-ic{position:relative;width:14px;height:14px;flex:none;transition:transform .35s cubic-bezier(.4,0,.2,1)}
        .d11-01-01 .acc-ic::before,.d11-01-01 .acc-ic::after{content:"";position:absolute;background:#5b6bff;border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
        .d11-01-01 .acc-ic::before{width:14px;height:2px}
        .d11-01-01 .acc-ic::after{width:2px;height:14px}
        .d11-01-01 .acc-item.open .acc-ic{transform:rotate(135deg)}
        .d11-01-01 .acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1)}
        .d11-01-01 .acc-item.open .acc-body{grid-template-rows:1fr}
        .d11-01-01 .acc-inner{overflow:hidden;min-height:0;padding:0 16px;font-size:12px;line-height:1.7;color:#5a6275;transition:padding .4s cubic-bezier(.4,0,.2,1)}
        .d11-01-01 .acc-item.open .acc-inner{padding:0 16px 14px}

(function(){
        var items = document.querySelectorAll('#item-11-01-01 .d11-01-01 .acc-item');
        items.forEach(function(it){
          it.querySelector('.acc-head').addEventListener('click', function(){
            var isOpen = it.classList.contains('open');
            items.forEach(function(o){ o.classList.remove('open'); o.querySelector('.acc-head').setAttribute('aria-expanded','false'); });
            if(!isOpen){ it.classList.add('open'); this.setAttribute('aria-expanded','true'); }
          });
        });
      })();