実績アンロック通知

<div class="d09-06-03-area">
          <button type="button" class="d09-06-03-btn">達成する</button>
          <div class="d09-06-03-banner">
            <span class="d09-06-03-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M6 3h12v4a6 6 0 01-6 6 6 6 0 01-6-6V3z" stroke="#fff" stroke-width="1.6"/><path d="M9 21h6M12 13v5" stroke="#fff" stroke-width="1.6"/></svg>
            </span>
            <span class="d09-06-03-text"><strong>実績解除!</strong>毎日ログイン7日達成</span>
          </div>
        </div>

.d09-06-03-area{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
        .d09-06-03-banner{position:absolute;top:-70px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
          background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:12px 18px;border-radius:12px;
          box-shadow:0 8px 20px rgba(217,119,6,.35);font-size:12px;white-space:nowrap;
          transition:top .5s cubic-bezier(.2,1.4,.4,1)}
        .d09-06-03-area.is-on .d09-06-03-banner{top:16px}
        .d09-06-03-icon{flex-shrink:0;display:flex}
        .d09-06-03-text strong{display:block;font-size:13px;margin-bottom:2px}
        .d09-06-03-btn{border:none;border-radius:999px;padding:9px 20px;background:#1e293b;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}

(function(){
        var root=document.getElementById('item-09-06-03');
        if(!root)return;
        var area=root.querySelector('.d09-06-03-area');
        var btn=root.querySelector('.d09-06-03-btn');
        var t;
        btn.addEventListener('click',function(){
          clearTimeout(t);
          area.classList.add('is-on');
          t=setTimeout(function(){area.classList.remove('is-on');},2200);
        });
      })();