店舗リスト+地図連動

<div class="d10-04-04-wrap">
          <ul class="d10-04-04-list">
            <li data-pin="1">さくら本店</li>
            <li data-pin="2">みどり支店</li>
            <li data-pin="3">あおば店</li>
          </ul>
          <div class="d10-04-04-map">
            <span class="d10-04-04-grid"></span>
            <span class="d10-04-04-pin" data-pin="1" style="left:30%;top:30%"></span>
            <span class="d10-04-04-pin" data-pin="2" style="left:62%;top:48%"></span>
            <span class="d10-04-04-pin" data-pin="3" style="left:44%;top:72%"></span>
          </div>
        </div>

.d10-04-04{padding:0}
        .d10-04-04-wrap{position:absolute;inset:0;display:flex}
        .d10-04-04-list{list-style:none;margin:0;padding:12px;width:40%;background:#f7f9fa;border-right:1px solid #e2e8ec;font-size:13px}
        .d10-04-04-list li{padding:10px 8px;border-radius:6px;cursor:pointer;color:#334;transition:background .2s}
        .d10-04-04-list li:hover{background:#e6eef7}
        .d10-04-04-map{position:relative;flex:1;background:#eaeef0;overflow:hidden}
        .d10-04-04-grid{position:absolute;inset:0;background-image:linear-gradient(#dbe1e5 1px,transparent 1px),linear-gradient(90deg,#dbe1e5 1px,transparent 1px);background-size:30px 30px}
        .d10-04-04-pin{position:absolute;width:16px;height:22px;margin:-22px 0 0 -8px;background:#e2504a;border-radius:50% 50% 50% 0;transform:rotate(-45deg);transition:transform .25s}
        .d10-04-04-pin.is-hot{animation:d284bounce .6s ease}
        @keyframes d284bounce{0%,100%{transform:rotate(-45deg) translateY(0)}30%{transform:rotate(-45deg) translateY(-14px)}60%{transform:rotate(-45deg) translateY(-4px)}}

(function(){
        var root=document.getElementById('item-10-04-04');if(!root)return;
        var items=root.querySelectorAll('.d10-04-04-list li');
        items.forEach(function(li){
          li.addEventListener('mouseenter',function(){
            var id=li.getAttribute('data-pin');
            var pin=root.querySelector('.d10-04-04-pin[data-pin="'+id+'"]');
            if(pin){pin.classList.remove('is-hot');void pin.offsetWidth;pin.classList.add('is-hot');}
          });
        });
      })();