地図ピンクリックで詳細ポップアップ

<div class="d10-13-03-map">
          <span class="d10-13-03-grid"></span>
          <button class="d10-13-03-pin" data-id="a" style="left:26%;top:36%"><span>A</span></button>
          <button class="d10-13-03-pin" data-id="b" style="left:58%;top:56%"><span>B</span></button>
          <button class="d10-13-03-pin" data-id="c" style="left:76%;top:28%"><span>C</span></button>
          <div class="d10-13-03-card" data-for="a" style="left:26%;top:36%">
            <p class="d10-13-03-c-name">グリーンハイツA棟</p>
            <p class="d10-13-03-c-price">8.2万円 / 1LDK</p>
          </div>
          <div class="d10-13-03-card" data-for="b" style="left:58%;top:56%">
            <p class="d10-13-03-c-name">パークサイドB</p>
            <p class="d10-13-03-c-price">9.8万円 / 2DK</p>
          </div>
          <div class="d10-13-03-card" data-for="c" style="left:76%;top:28%">
            <p class="d10-13-03-c-name">リバーテラスC</p>
            <p class="d10-13-03-c-price">11.5万円 / 2LDK</p>
          </div>
        </div>

.d10-13-03{padding:0}
        .d10-13-03-map{position:absolute;inset:0;background:#eaeef0;overflow:hidden}
        .d10-13-03-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-13-03-pin{position:absolute;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#2f7fef;border:2px solid #fff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);padding:0;transition:transform .2s,background .2s}
        .d10-13-03-pin span{display:block;transform:rotate(45deg)}
        .d10-13-03-pin.is-active{background:#e2504a;transform:rotate(-45deg) scale(1.15)}
        .d10-13-03-card{position:absolute;transform:translate(-50%,-130%);background:#fff;border-radius:10px;padding:8px 12px;box-shadow:0 8px 20px rgba(0,0,0,.18);font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
        .d10-13-03-card.is-show{opacity:1;transform:translate(-50%,-150%)}
        .d10-13-03-c-name{margin:0;font-weight:700;color:#223}
        .d10-13-03-c-price{margin:2px 0 0;color:#2f7fef;font-weight:700}

(function(){
        var root=document.getElementById('item-10-13-03');if(!root)return;
        var pins=root.querySelectorAll('.d10-13-03-pin');
        var cards=root.querySelectorAll('.d10-13-03-card');
        pins.forEach(function(pin){
          pin.addEventListener('click',function(){
            var id=pin.getAttribute('data-id');
            var wasActive=pin.classList.contains('is-active');
            pins.forEach(function(p){p.classList.remove('is-active');});
            cards.forEach(function(c){c.classList.remove('is-show');});
            if(!wasActive){
              pin.classList.add('is-active');
              var card=root.querySelector('.d10-13-03-card[data-for="'+id+'"]');
              if(card)card.classList.add('is-show');
            }
          });
        });
      })();