告知バナー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「告知バナー」の効果を追加してください。

# 追加してほしい効果
告知バナー（アラート & 空状態）
ページ最上部に表示する全幅の告知/警告バナー。閉じるとスライドアップで消え、ページ内の「もう一度表示する」ボタンからいつでも復帰できます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 告知バナー: ページ最上部の全幅バナー。閉じるとスライドアップで消え、
     下の「もう一度表示する」ボタンで復帰できる。 -->
<div class="ab-banner" id="abBanner" role="status" aria-live="polite">
  <div class="ab-banner__inner">
    <span class="ab-banner__icon" aria-hidden="true">!</span>
    <p class="ab-banner__text">
      <strong>定期メンテナンスのお知らせ</strong>
      7月10日(金) 2:00〜4:00の間、一部の機能をご利用いただけません。
    </p>
    <button type="button" class="ab-banner__close" id="abClose" aria-label="バナーを閉じる">&times;</button>
  </div>
</div>

<main class="ab-page">
  <header class="ab-page__nav">Sample Dashboard</header>
  <section class="ab-page__hero">
    <h1>あなたの毎日を、もっとシンプルに。</h1>
    <p>このエリアはバナーの下に続くページ本文を模したダミーコンテンツです。</p>
    <button type="button" class="ab-page__reopen" id="abReopen" hidden>バナーをもう一度表示する</button>
  </section>
</main>

【CSS】
/* 告知バナー: 警告色(amber)の全幅バナー。閉じるとスライドアップ、再表示ボタンで復帰 */
* { box-sizing: border-box; }
:root{
  --ab-warn: #b45309;
  --ab-warn-bg1: #fff4e0;
  --ab-warn-bg2: #ffe9c7;
  --ab-warn-border: #f2c078;
  --ab-ink: #1f2430;
  --ab-muted: #6b7280;
}
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  background: #f3f4fb;
  color: var(--ab-ink);
  overflow-x: hidden;
}

/* 全幅バナーはルート直下に width:100% で配置 */
.ab-banner{
  width: 100%;
  background: linear-gradient(135deg, var(--ab-warn-bg1), var(--ab-warn-bg2));
  border-bottom: 1px solid var(--ab-warn-border);
  overflow: hidden;
  max-height: 120px;
  transition:
    max-height .45s cubic-bezier(.4,0,.2,1),
    opacity .3s ease,
    border-width .3s ease;
}
.ab-banner.is-hidden{
  max-height: 0;
  opacity: 0;
  border-bottom-width: 0;
}

.ab-banner__inner{
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 46px 12px 20px;
  position: relative;
}
.ab-banner__icon{
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ab-warn);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  /* 待機中も控えめに脈打たせ、注意を引く */
  animation: abPulse 3s ease-in-out infinite;
}
@keyframes abPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(180, 83, 9, .35); }
  50%{ box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); }
}
.ab-banner__text{
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #7a4a12;
}
.ab-banner__text strong{ margin-right: 6px; color: #5c3a0e; }

.ab-banner__close{
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: #7a4a12;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.ab-banner__close:hover{ background: rgba(0, 0, 0, .12); }
.ab-banner__close:focus-visible{ outline: 2px solid var(--ab-warn); outline-offset: 2px; }

.ab-page{ flex: 1; display: flex; flex-direction: column; }
.ab-page__nav{
  padding: 16px 24px;
  font-weight: 700;
  color: #fff;
  background: #20263a;
}
.ab-page__hero{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 60px 24px;
}
.ab-page__hero h1{ margin: 0; font-size: 1.5rem; }
.ab-page__hero p{ margin: 0; color: var(--ab-muted); max-width: 420px; }
.ab-page__reopen{
  margin-top: 10px;
  font: inherit;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #cfd3e6;
  background: #fff;
  color: var(--ab-ink);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .15s ease;
}
.ab-page__reopen:hover{ box-shadow: 0 8px 20px -8px rgba(20, 24, 40, .25); }
.ab-page__reopen:active{ transform: translateY(1px); }
.ab-page__reopen:focus-visible{ outline: 2px solid var(--ab-warn); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .ab-banner__icon{ animation: none; }
  .ab-banner{ transition: opacity .2s ease; }
}

【JavaScript】
// 告知バナー: 閉じるとスライドアップして消え、ページ内の「もう一度表示する」で復帰する
(() => {
  const banner = document.getElementById('abBanner');
  const closeBtn = document.getElementById('abClose');
  const reopenBtn = document.getElementById('abReopen');
  if (!banner || !closeBtn || !reopenBtn) return; // null安全

  closeBtn.addEventListener('click', () => {
    banner.classList.add('is-hidden');
    banner.setAttribute('aria-hidden', 'true');
    reopenBtn.hidden = false;
  });

  reopenBtn.addEventListener('click', () => {
    banner.classList.remove('is-hidden');
    banner.removeAttribute('aria-hidden');
    reopenBtn.hidden = true;
    closeBtn.focus();
  });
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。