資格者内訳アコーディオン

<div class="d09-05-12-wrap">
          <button type="button" class="d09-05-12-toggle">
            <span>有資格スタッフ在籍数 <b>18名</b></span>
            <svg class="d09-05-12-caret" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="currentColor" stroke-width="1.6" fill="none"/></svg>
          </button>
          <ul class="d09-05-12-list">
            <li>一級建築士 <span>4名</span></li>
            <li>インテリアコーディネーター <span>6名</span></li>
            <li>福祉住環境コーディネーター <span>8名</span></li>
          </ul>
        </div>

.d09-05-12-wrap{ width:min(280px,100%); border:1px solid #e6e2da; border-radius:10px; overflow:hidden; background:#fff; }
        .d09-05-12-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
          padding:13px 16px; border:none; background:#faf8f4; color:#3a3226; font-size:12.5px; font-weight:700; cursor:pointer; }
        .d09-05-12-toggle b{ color:#7a6a4f; }
        .d09-05-12-caret{ flex:none; transition:transform .25s ease; }
        .d09-05-12-wrap.is-open .d09-05-12-caret{ transform:rotate(180deg); }
        .d09-05-12-list{ list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease; }
        .d09-05-12-wrap.is-open .d09-05-12-list{ max-height:160px; }
        .d09-05-12-list li{ display:flex; justify-content:space-between; padding:10px 16px; font-size:11.5px; color:#5c5342; border-top:1px solid #f0ece2; }
        .d09-05-12-list li span{ font-weight:700; color:#7a6a4f; }

(function(){
        var wrap=document.querySelector('.d09-05-12-wrap');
        if(!wrap)return;
        var toggle=wrap.querySelector('.d09-05-12-toggle');
        toggle.addEventListener('click',function(){
          wrap.classList.toggle('is-open');
        });
      })();