新着バッジふわっと表示

<div class="d10-13-06-card">
          <span class="d10-13-06-photo"></span>
          <button class="d10-13-06-badge" type="button">NEW</button>
          <div class="d10-13-06-tip">掲載3日以内の新着物件です</div>
          <div class="d10-13-06-body">
            <p class="d10-13-06-price">7.4万円</p>
            <p class="d10-13-06-name">ステラコート101</p>
          </div>
        </div>

.d10-13-06{padding:16px}
        .d10-13-06-card{position:relative;width:100%;max-width:260px;background:#fff;border:1px solid #eef0f3;border-radius:12px;overflow:visible;box-shadow:0 4px 14px rgba(0,0,0,.06)}
        .d10-13-06-photo{display:block;height:110px;background:linear-gradient(135deg,#ffd9a0,#ff8a65);border-radius:12px 12px 0 0}
        .d10-13-06-badge{position:absolute;top:10px;left:10px;border:none;background:#ff6b4a;color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:6px;letter-spacing:.5px;cursor:pointer;opacity:0;transform:scale(.4) rotate(-8deg);animation:d1436in .6s cubic-bezier(.34,1.7,.64,1) .3s forwards}
        @keyframes d1436in{to{opacity:1;transform:scale(1) rotate(-8deg)}}
        .d10-13-06-tip{position:absolute;top:46px;left:10px;max-width:190px;background:#233;color:#fff;font-size:11px;padding:8px 10px;border-radius:8px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s;z-index:2}
        .d10-13-06-tip.is-show{opacity:1;transform:translateY(0)}
        .d10-13-06-body{padding:10px 14px 14px}
        .d10-13-06-price{margin:0;font-size:18px;font-weight:800;color:#1f2a37}
        .d10-13-06-name{margin:4px 0 0;font-size:12px;color:#667}

(function(){
        var root=document.getElementById('item-10-13-06');if(!root)return;
        var badge=root.querySelector('.d10-13-06-badge');
        var tip=root.querySelector('.d10-13-06-tip');
        badge.addEventListener('click',function(){
          tip.classList.toggle('is-show');
        });
      })();