メンバー一覧→詳細切替

<div class="d06-03-09-wrap">
          <div class="d06-03-09-detail">
            <div class="d06-03-09-ava" data-init="IK" style="background:linear-gradient(135deg,#6a8dff,#9b6bff)">IK</div>
            <div class="d06-03-09-name">井上 健太</div>
            <div class="d06-03-09-role">プロジェクトマネージャー</div>
          </div>
          <div class="d06-03-09-list">
            <button class="d06-03-09-thumb is-active" type="button" data-n="井上 健太" data-r="プロジェクトマネージャー" data-i="IK" data-g="linear-gradient(135deg,#6a8dff,#9b6bff)" style="background:linear-gradient(135deg,#6a8dff,#9b6bff)">IK</button>
            <button class="d06-03-09-thumb" type="button" data-n="森田 彩" data-r="マーケター" data-i="AM" data-g="linear-gradient(135deg,#3ec6b0,#5ac8fa)" style="background:linear-gradient(135deg,#3ec6b0,#5ac8fa)">AM</button>
            <button class="d06-03-09-thumb" type="button" data-n="渡辺 直樹" data-r="バックエンド" data-i="NW" data-g="linear-gradient(135deg,#ff8fb1,#a86bff)" style="background:linear-gradient(135deg,#ff8fb1,#a86bff)">NW</button>
            <button class="d06-03-09-thumb" type="button" data-n="岡田 里佳" data-r="デザイナー" data-i="RO" data-g="linear-gradient(135deg,#ffb347,#ff7e5f)" style="background:linear-gradient(135deg,#ffb347,#ff7e5f)">RO</button>
          </div>
        </div>

.d06-03-09-wrap{width:220px;text-align:center}
        .d06-03-09-detail{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 22px rgba(40,60,110,.12)}
        .d06-03-09-detail .d06-03-09-ava{width:76px;height:76px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:24px;transition:transform .3s}
        .d06-03-09-name{font-weight:700;color:#243053;font-size:16px}
        .d06-03-09-role{font-size:12px;color:#8590ad;margin-top:3px}
        .d06-03-09-list{display:flex;justify-content:center;gap:10px;margin-top:14px}
        .d06-03-09-thumb{width:40px;height:40px;border-radius:50%;border:2px solid transparent;color:#fff;font-weight:700;font-size:12px;cursor:pointer;opacity:.6;transition:opacity .25s,border-color .25s,transform .2s}
        .d06-03-09-thumb:hover{transform:translateY(-3px)}
        .d06-03-09-thumb.is-active{opacity:1;border-color:#243053}

(function(){
        var wrap=document.querySelector('#item-06-03-09 .d06-03-09-wrap');
        if(!wrap)return;
        var ava=wrap.querySelector('.d06-03-09-detail .d06-03-09-ava'),
            name=wrap.querySelector('.d06-03-09-name'),
            role=wrap.querySelector('.d06-03-09-role'),
            thumbs=wrap.querySelectorAll('.d06-03-09-thumb');
        thumbs.forEach(function(b){
          b.addEventListener('click',function(){
            thumbs.forEach(function(x){x.classList.remove('is-active')});
            b.classList.add('is-active');
            ava.textContent=b.dataset.i;ava.style.background=b.dataset.g;
            ava.style.transform='scale(.7)';
            requestAnimationFrame(function(){ava.style.transform='scale(1)'});
            name.textContent=b.dataset.n;role.textContent=b.dataset.r;
          });
        });
      })();