トグル設定ウィジェット

<div class="d05-05-05-card">
          <div class="d05-05-05-head">通知設定</div>
          <div class="d05-05-05-row"><span>メール通知</span><button class="d05-05-05-sw is-on" type="button" role="switch" aria-checked="true"><i></i></button></div>
          <div class="d05-05-05-row"><span>プッシュ通知</span><button class="d05-05-05-sw" type="button" role="switch" aria-checked="false"><i></i></button></div>
          <div class="d05-05-05-row"><span>週次レポート</span><button class="d05-05-05-sw is-on" type="button" role="switch" aria-checked="true"><i></i></button></div>
          <div class="d05-05-05-row"><span>ダークモード</span><button class="d05-05-05-sw" type="button" role="switch" aria-checked="false"><i></i></button></div>
        </div>

.d05-05-05{background:#f1f5f9}
        .d05-05-05-card{width:250px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-05-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:8px}
        .d05-05-05-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #f1f5f9;font-size:13px;color:#334155}
        .d05-05-05-row:first-of-type{border-top:none}
        .d05-05-05-sw{width:40px;height:22px;border-radius:20px;background:#cbd5e1;border:none;padding:0;position:relative;cursor:pointer;transition:background .25s}
        .d05-05-05-sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .25s}
        .d05-05-05-sw.is-on{background:#22c55e}
        .d05-05-05-sw.is-on i{left:20px}

(function(){
        var root=document.getElementById('item-05-05-05');if(!root)return;
        root.querySelectorAll('.d05-05-05-sw').forEach(function(sw){
          sw.addEventListener('click',function(){
            var on=sw.classList.toggle('is-on');
            sw.setAttribute('aria-checked',on?'true':'false');
          });
        });
      })();