会員ステータス切替タブ(無料/プレミアム比較)

<div class="d10-05-12-wrap">
          <div class="d10-05-12-tabs">
            <button type="button" class="d10-05-12-tab is-active" data-tier="free">無料会員</button>
            <button type="button" class="d10-05-12-tab" data-tier="premium">プレミアム会員</button>
          </div>
          <div class="d10-05-12-panel">
            <p class="d10-05-12-line">✓ 基本記事の閲覧</p>
            <p class="d10-05-12-line d10-05-12-premium-only">✓ 限定動画コンテンツ</p>
            <p class="d10-05-12-line d10-05-12-premium-only">✓ 会員限定セミナー招待</p>
            <p class="d10-05-12-line d10-05-12-free-only">🔒 限定動画コンテンツ(要アップグレード)</p>
            <p class="d10-05-12-line d10-05-12-free-only">🔒 会員限定セミナー招待(要アップグレード)</p>
          </div>
        </div>

.d10-05-12-wrap{width:min(280px,100%)}
        .d10-05-12-tabs{display:flex;gap:6px;margin-bottom:12px}
        .d10-05-12-tab{flex:1;padding:8px 0;border:1px solid #cbd5e1;border-radius:8px;background:#fff;
          color:#475569;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
        .d10-05-12-tab.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
        .d10-05-12-panel{background:#f8fafc;border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
        .d10-05-12-line{margin:0;font-size:12px;color:#0f172a;font-weight:600}
        .d10-05-12-free-only{color:#94a3b8}
        .d10-05-12-premium-only{display:none;color:#16a34a}
        .d10-05-12-wrap.is-premium .d10-05-12-premium-only{display:block}
        .d10-05-12-wrap.is-premium .d10-05-12-free-only{display:none}

(function(){
        var wrap=document.querySelector('.d10-05-12-wrap');
        if(!wrap)return;
        wrap.querySelectorAll('.d10-05-12-tab').forEach(function(tab){
          tab.addEventListener('click',function(){
            wrap.querySelectorAll('.d10-05-12-tab').forEach(function(t){t.classList.remove('is-active');});
            tab.classList.add('is-active');
            wrap.classList.toggle('is-premium',tab.getAttribute('data-tier')==='premium');
          });
        });
      })();