上部お知らせバー

<div class="d01-02-04-wrap">
          <div class="d01-02-04-bar" role="status">
            <span class="d01-02-04-txt">🎉 新機能をリリースしました。詳しくはお知らせをご覧ください。</span>
            <button class="d01-02-04-close" type="button" aria-label="閉じる">×</button>
          </div>
          <div class="d01-02-04-page">
            <div class="d01-02-04-line" style="width:70%"></div>
            <div class="d01-02-04-line" style="width:90%"></div>
            <div class="d01-02-04-line" style="width:55%"></div>
          </div>
        </div>

.prev.d01-02-04{padding:0;align-items:stretch;justify-content:flex-start}
        .d01-02-04-wrap{width:100%;display:flex;flex-direction:column;overflow:hidden}
        .d01-02-04-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(90deg,#0ea5e9,#6366f1);color:#fff;font-size:13px;transition:transform .4s ease,opacity .4s ease}
        .d01-02-04-bar.d01-02-04-hide{transform:translateY(-100%);opacity:0}
        .d01-02-04-txt{flex:1;line-height:1.5}
        .d01-02-04-close{width:24px;height:24px;border:0;border-radius:6px;background:rgba(255,255,255,.2);color:#fff;font-size:16px;line-height:1;cursor:pointer;flex-shrink:0;transition:background .2s ease}
        .d01-02-04-close:hover{background:rgba(255,255,255,.35)}
        .d01-02-04-page{padding:26px 20px;display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}
        .d01-02-04-line{height:12px;border-radius:6px;background:#e2e8f0}

(function(){
        var root=document.getElementById('item-01-02-04');if(!root)return;
        var bar=root.querySelector('.d01-02-04-bar'),btn=root.querySelector('.d01-02-04-close');
        btn.addEventListener('click',function(){
          bar.classList.add('d01-02-04-hide');
          setTimeout(function(){bar.classList.remove('d01-02-04-hide');},2200);
        });
      })();