バイオ展開カード

<div class="d06-03-05-card">
          <div class="d06-03-05-head">
            <div class="d06-03-05-ava">YT</div>
            <div><div class="d06-03-05-name">田中 陽介</div><div class="d06-03-05-role">フロントエンドエンジニア</div></div>
          </div>
          <div class="d06-03-05-bio">
            <p>2015年に受託開発会社へ入社し、コーポレートサイトからWebアプリまで幅広く担当。2020年より独立し、パフォーマンスとアクセシビリティを重視した実装を得意としています。趣味は登山とコーヒー焙煎。</p>
          </div>
          <button class="d06-03-05-btn" type="button" aria-expanded="false">もっと見る</button>
        </div>

.d06-03-05-card{width:210px;background:#fff;border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(40,60,110,.12)}
        .d06-03-05-head{display:flex;align-items:center;gap:12px}
        .d06-03-05-ava{width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#3ec6b0,#6a8dff)}
        .d06-03-05-name{font-weight:700;color:#243053;font-size:15px}
        .d06-03-05-role{font-size:11px;color:#8590ad}
        .d06-03-05-bio{max-height:38px;overflow:hidden;transition:max-height .5s ease;margin-top:12px}
        .d06-03-05-bio p{font-size:12px;line-height:1.7;color:#4a5678;margin:0}
        .d06-03-05-btn{margin-top:8px;border:0;background:none;color:#6a8dff;font-size:12px;font-weight:600;cursor:pointer;padding:2px 0}

(function(){
        var card=document.querySelector('#item-06-03-05 .d06-03-05-card');
        if(!card)return;
        var bio=card.querySelector('.d06-03-05-bio'),btn=card.querySelector('.d06-03-05-btn'),open=false;
        btn.addEventListener('click',function(){
          open=!open;
          bio.style.maxHeight=open?bio.scrollHeight+'px':'38px';
          btn.textContent=open?'閉じる':'もっと見る';
          btn.setAttribute('aria-expanded',open);
        });
      })();