フェードタブ切替

<div class="tabs">
          <div class="tab-nav" role="tablist">
            <button class="tab-btn active" type="button">特徴</button>
            <button class="tab-btn" type="button">料金</button>
            <button class="tab-btn" type="button">導入事例</button>
          </div>
          <div class="tab-panels">
            <div class="tab-panel show"><strong>かんたん操作</strong><br>専門知識がなくても直感的に使えるインターフェースを提供します。</div>
            <div class="tab-panel"><strong>月額980円〜</strong><br>初期費用0円。プランはいつでも変更でき、日割りで精算されます。</div>
            <div class="tab-panel"><strong>導入実績1,200社</strong><br>中小企業から上場企業まで幅広い業種で活用されています。</div>
          </div>
        </div>

.d11-01-02 .tabs{width:100%;max-width:330px}
        .d11-01-02 .tab-nav{display:flex;gap:6px;border-bottom:2px solid #e2e6ee}
        .d11-01-02 .tab-btn{flex:1;padding:10px 4px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;font-size:12.5px;font-weight:700;color:#8a91a5;font-family:inherit;transition:color .25s,border-color .25s}
        .d11-01-02 .tab-btn:hover{color:#5b6bff}
        .d11-01-02 .tab-btn.active{color:#5b6bff;border-bottom-color:#5b6bff}
        .d11-01-02 .tab-panels{position:relative;min-height:96px}
        .d11-01-02 .tab-panel{display:none;padding:16px 4px;font-size:12px;line-height:1.8;color:#4a5268}
        .d11-01-02 .tab-panel strong{font-size:13.5px;color:#2b3245}
        .d11-01-02 .tab-panel.show{display:block;animation:d092fade .45s ease both}
        @keyframes d092fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

(function(){
        var root = document.querySelector('#item-11-01-02 .d11-01-02');
        var btns = root.querySelectorAll('.tab-btn');
        var panels = root.querySelectorAll('.tab-panel');
        btns.forEach(function(btn, i){
          btn.addEventListener('click', function(){
            btns.forEach(function(b){ b.classList.remove('active'); });
            panels.forEach(function(p){ p.classList.remove('show'); });
            btn.classList.add('active');
            panels[i].classList.add('show');
          });
        });
      })();