カラー/サイズスウォッチ選択

<div class="d10-01-03-wrap">
          <div class="d10-01-03-main">👕</div>
          <p class="d10-01-03-cap">カラー</p>
          <div class="d10-01-03-colors">
            <button class="d10-01-03-color d10-01-03-on" style="--c:#4f46e5" data-c="#4f46e5" type="button"></button>
            <button class="d10-01-03-color" style="--c:#ef4444" data-c="#ef4444" type="button"></button>
            <button class="d10-01-03-color" style="--c:#10b981" data-c="#10b981" type="button"></button>
            <button class="d10-01-03-color" style="--c:#f59e0b" data-c="#f59e0b" type="button"></button>
          </div>
          <p class="d10-01-03-cap">サイズ</p>
          <div class="d10-01-03-sizes">
            <button class="d10-01-03-size" type="button">S</button>
            <button class="d10-01-03-size d10-01-03-on" type="button">M</button>
            <button class="d10-01-03-size" type="button">L</button>
            <button class="d10-01-03-size" type="button">XL</button>
          </div>
        </div>

.d10-01-03{background:#f6f7fb}
        .d10-01-03-wrap{background:#fff;border-radius:14px;padding:20px 26px;box-shadow:0 8px 24px rgba(30,40,80,.08);text-align:center;width:220px}
        .d10-01-03-main{height:96px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:50px;background:#4f46e5;transition:background .35s;margin-bottom:12px}
        .d10-01-03-cap{margin:10px 0 6px;font-size:12px;color:#64748b;text-align:left}
        .d10-01-03-colors{display:flex;gap:10px}
        .d10-01-03-color{width:28px;height:28px;border-radius:50%;background:var(--c);border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 2px #fff inset;transition:transform .15s}
        .d10-01-03-color:hover{transform:scale(1.1)}
        .d10-01-03-color.d10-01-03-on{border-color:#1e293b;box-shadow:0 0 0 3px #fff inset}
        .d10-01-03-sizes{display:flex;gap:8px}
        .d10-01-03-size{min-width:38px;height:34px;border:2px solid #e2e8f0;border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s}
        .d10-01-03-size:hover{border-color:#a5b4fc}
        .d10-01-03-size.d10-01-03-on{border-color:#4f46e5;background:#eef2ff;color:#4f46e5}

(function(){
        var root=document.getElementById('item-10-01-03');
        var main=root.querySelector('.d10-01-03-main');
        root.querySelectorAll('.d10-01-03-color').forEach(function(b){
          b.addEventListener('click',function(){
            root.querySelectorAll('.d10-01-03-color').forEach(function(x){x.classList.remove('d10-01-03-on');});
            b.classList.add('d10-01-03-on');
            main.style.background=b.dataset.c;
          });
        });
        root.querySelectorAll('.d10-01-03-size').forEach(function(b){
          b.addEventListener('click',function(){
            root.querySelectorAll('.d10-01-03-size').forEach(function(x){x.classList.remove('d10-01-03-on');});
            b.classList.add('d10-01-03-on');
          });
        });
      })();