ミニライトボックス

<div class="d07-01-04-thumbs">
          <button class="d07-01-04-th d07-01-04-t1" data-emoji="🗻" data-label="富士山" type="button"><span>🗻</span></button>
          <button class="d07-01-04-th d07-01-04-t2" data-emoji="🏖️" data-label="ビーチ" type="button"><span>🏖️</span></button>
          <button class="d07-01-04-th d07-01-04-t3" data-emoji="🌃" data-label="夜景" type="button"><span>🌃</span></button>
        </div>
        <div class="d07-01-04-lb" aria-hidden="true">
          <div class="d07-01-04-lb-img"><span class="d07-01-04-lb-emoji">🗻</span><em class="d07-01-04-lb-label">富士山</em></div>
          <button class="d07-01-04-close" type="button" aria-label="閉じる">×</button>
        </div>

.d07-01-04-thumbs{display:flex;gap:12px}
        .d07-01-04-th{width:74px;height:74px;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 4px 12px rgba(0,0,0,.12)}
        .d07-01-04-th span{font-size:30px}
        .d07-01-04-th:hover{transform:scale(1.08);box-shadow:0 8px 20px rgba(0,0,0,.2)}
        .d07-01-04-t1{background:linear-gradient(135deg,#60a5fa,#818cf8)}
        .d07-01-04-t2{background:linear-gradient(135deg,#fbbf24,#f97316)}
        .d07-01-04-t3{background:linear-gradient(135deg,#312e81,#7c3aed)}
        .d07-01-04-lb{position:absolute;inset:0;background:rgba(15,23,42,.85);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:5}
        .d07-01-04-lb.is-open{opacity:1;visibility:visible}
        .d07-01-04-lb-img{width:180px;height:160px;border-radius:14px;background:linear-gradient(135deg,#1e293b,#334155);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:scale(.85);transition:transform .35s ease}
        .d07-01-04-lb.is-open .d07-01-04-lb-img{transform:scale(1)}
        .d07-01-04-lb-emoji{font-size:64px}
        .d07-01-04-lb-label{color:#e2e8f0;font-size:13px;font-style:normal}
        .d07-01-04-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;line-height:1;transition:background .2s ease}
        .d07-01-04-close:hover{background:rgba(255,255,255,.35)}

(function(){
        var prev=document.querySelector('#item-07-01-04 .d07-01-04');if(!prev)return;
        var lb=prev.querySelector('.d07-01-04-lb');
        var emoji=prev.querySelector('.d07-01-04-lb-emoji');
        var label=prev.querySelector('.d07-01-04-lb-label');
        prev.querySelectorAll('.d07-01-04-th').forEach(function(btn){
          btn.addEventListener('click',function(){
            emoji.textContent=btn.getAttribute('data-emoji');
            label.textContent=btn.getAttribute('data-label');
            lb.classList.add('is-open');
            lb.setAttribute('aria-hidden','false');
          });
        });
        prev.querySelector('.d07-01-04-close').addEventListener('click',function(){
          lb.classList.remove('is-open');
          lb.setAttribute('aria-hidden','true');
        });
      })();