月額/年額トグル料金表

<div class="d05-02-02-wrap">
          <div class="d05-02-02-toggle">
            <span class="d05-02-02-lbl d05-02-02-on">月額</span>
            <label class="d05-02-02-sw"><input type="checkbox"><span class="d05-02-02-slider"></span></label>
            <span class="d05-02-02-lbl">年額<em>2ヶ月無料</em></span>
          </div>
          <div class="d05-02-02-tbl">
            <div class="d05-02-02-col"><div class="d05-02-02-n">フリー</div><div class="d05-02-02-p" data-m="0" data-y="0">¥0</div></div>
            <div class="d05-02-02-col"><div class="d05-02-02-n">スタンダード</div><div class="d05-02-02-p" data-m="980" data-y="9800">¥980</div></div>
            <div class="d05-02-02-col"><div class="d05-02-02-n">プロ</div><div class="d05-02-02-p" data-m="2980" data-y="29800">¥2,980</div></div>
          </div>
        </div>

.d05-02-02-wrap{width:100%}
        .d05-02-02-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;font-size:12px;color:#6b7280}
        .d05-02-02-lbl.d05-02-02-on{color:#6366f1;font-weight:700}
        .d05-02-02-lbl em{display:block;font-size:9px;color:#10b981;font-style:normal}
        .d05-02-02-sw{position:relative;display:inline-block;width:42px;height:22px}
        .d05-02-02-sw input{display:none}
        .d05-02-02-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:22px;transition:.3s;cursor:pointer}
        .d05-02-02-slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s}
        .d05-02-02-sw input:checked+.d05-02-02-slider{background:#6366f1}
        .d05-02-02-sw input:checked+.d05-02-02-slider:before{transform:translateX(20px)}
        .d05-02-02-tbl{display:flex;gap:8px}
        .d05-02-02-col{flex:1;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px 6px}
        .d05-02-02-n{font-size:11px;color:#6b7280;margin-bottom:6px}
        .d05-02-02-p{font-size:16px;font-weight:800;color:#6366f1;transition:opacity .3s,transform .3s}
        .d05-02-02-p.d05-02-02-fade{opacity:0;transform:translateY(6px)}

(function(){
        var root=document.getElementById('item-05-02-02');
        var cb=root.querySelector('.d05-02-02-sw input');
        var lbls=root.querySelectorAll('.d05-02-02-lbl');
        function yen(n){return '¥'+Number(n).toLocaleString('ja-JP');}
        cb.addEventListener('change',function(){
          var yearly=cb.checked;
          lbls[0].classList.toggle('d05-02-02-on',!yearly);
          lbls[1].classList.toggle('d05-02-02-on',yearly);
          root.querySelectorAll('.d05-02-02-p').forEach(function(p){
            p.classList.add('d05-02-02-fade');
            setTimeout(function(){
              p.textContent=yen(yearly?p.dataset.y:p.dataset.m);
              p.classList.remove('d05-02-02-fade');
            },200);
          });
        });
      })();