バナー通知(スライドイン)

<div class="d09-02-03-banner">
          <svg viewBox="0 0 24 24" class="d09-02-03-ic"><path d="M12 3a6 6 0 0 0-6 6c0 5-2 6-2 6h16s-2-1-2-6a6 6 0 0 0-6-6z" fill="none"/><path d="M10 20a2 2 0 0 0 4 0" fill="none"/></svg>
          <span class="d09-02-03-txt">メンテナンスを予定しています。</span>
          <button class="d09-02-03-act">詳細</button>
          <button class="d09-02-03-x" aria-label="閉じる"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg></button>
        </div>
        <button class="d09-02-03-show">バナーを表示</button>

.d09-02-03{flex-direction:column;gap:14px}
        .d09-02-03-banner{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(90deg,#3730a3,#6d28d9);color:#fff;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.2);transform:translateY(-110%);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
        .d09-02-03-banner.d09-02-03-on{transform:translateY(0)}
        .d09-02-03-ic{width:20px;height:20px;flex:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-03-txt{flex:1}
        .d09-02-03-act{flex:none;padding:5px 12px;border:1px solid rgba(255,255,255,.6);border-radius:20px;background:rgba(255,255,255,.12);color:#fff;font-size:12px;cursor:pointer}
        .d09-02-03-act:hover{background:rgba(255,255,255,.25)}
        .d09-02-03-x{flex:none;width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer}
        .d09-02-03-x svg{width:15px;height:15px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.8}
        .d09-02-03-x:hover svg{opacity:1}
        .d09-02-03-show{padding:10px 18px;border:none;border-radius:8px;background:#6d28d9;color:#fff;font-size:14px;font-weight:600;cursor:pointer}

(function(){
        var root=document.getElementById('item-09-02-03');
        var banner=root.querySelector('.d09-02-03-banner');
        function show(){banner.classList.add('d09-02-03-on');}
        function hide(){banner.classList.remove('d09-02-03-on');}
        setTimeout(show,300);
        root.querySelector('.d09-02-03-x').addEventListener('click',hide);
        root.querySelector('.d09-02-03-show').addEventListener('click',show);
        root.querySelector('.d09-02-03-act').addEventListener('click',function(){this.textContent='確認済み';});
      })();