Cookie同意バー

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

# 追加してほしい効果
Cookie同意バー（アラート & 空状態）
画面下部に固定表示されるCookie同意バー。読み込み後にスライドインし、「同意する」または設定パネルでの選択保存で自然に消えます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- Cookie同意バー: ページ下部に固定表示され、読み込み後に少し遅れてスライドインする。
     「同意する」または設定パネルの「選択を保存」で消える。 -->
<main class="cc-page">
  <header class="cc-page__nav">Sample Store</header>
  <section class="cc-page__hero">
    <h1>今日のおすすめ商品</h1>
    <p>これはCookie同意バーの動作を確認するためのダミーページです。</p>
  </section>
</main>

<div class="cc-bar" id="ccBar">
  <div class="cc-bar__row">
    <p class="cc-bar__text">
      <strong>Cookieを使用しています。</strong>
      サイトの利便性向上と利用状況の分析のためにCookieを使用します。詳しくは
      <a href="#" class="cc-bar__link">プライバシーポリシー</a>をご確認ください。
    </p>
    <div class="cc-bar__actions">
      <button type="button" class="cc-btn cc-btn--ghost" id="ccSettings" aria-expanded="false" aria-controls="ccDetail">設定</button>
      <button type="button" class="cc-btn cc-btn--primary" id="ccAccept">同意する</button>
    </div>
  </div>
  <div class="cc-detail" id="ccDetail" hidden>
    <label class="cc-detail__row">
      <span>必須Cookie(常にON)</span>
      <input type="checkbox" checked disabled>
    </label>
    <label class="cc-detail__row">
      <span>分析Cookie</span>
      <input type="checkbox" id="ccAnalytics" checked>
    </label>
    <button type="button" class="cc-btn cc-btn--primary cc-detail__save" id="ccSave">選択を保存</button>
  </div>
</div>

【CSS】
/* Cookie同意バー: 情報色(青)のCTAで下部固定。読み込み後にスライドインし、同意で消える */
* { box-sizing: border-box; }
:root{
  --cc-info: #3b82f6;
  --cc-info-dark: #2f6fe0;
  --cc-ink: #e7e9f2;
}
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  background: #eef0f7;
  color: #1f2430;
  overflow-x: hidden;
}

.cc-page{ flex: 1; display: flex; flex-direction: column; }
.cc-page__nav{ padding: 16px 24px; font-weight: 700; background: #20263a; color: #fff; }
.cc-page__hero{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 60px 24px 130px;
}
.cc-page__hero h1{ margin: 0; font-size: 1.4rem; }
.cc-page__hero p{ margin: 0; color: #5b6472; max-width: 380px; }

/* 全幅バーはルート直下に width:100% で固定配置 */
.cc-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  z-index: 60;
  background: #1c2030;
  color: var(--cc-ink);
  padding: 18px 22px;
  box-shadow: 0 -20px 44px -20px rgba(0, 0, 0, .5);
  animation: ccSlideIn .5s cubic-bezier(.2,.9,.3,1.15) both;
  animation-delay: .35s;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .32s ease;
}
.cc-bar.is-dismissed{ transform: translateY(115%); opacity: 0; pointer-events: none; }
@keyframes ccSlideIn{
  from{ transform: translateY(115%); opacity: .3; }
  to{ transform: translateY(0); opacity: 1; }
}

.cc-bar__row{
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cc-bar__text{ flex: 1 1 320px; margin: 0; font-size: .86rem; line-height: 1.6; color: #c7cbdb; }
.cc-bar__text strong{ color: #fff; }
.cc-bar__link{ color: #8ab4ff; text-decoration: underline; }
.cc-bar__actions{ display: flex; gap: 10px; flex: none; }

.cc-btn{
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cc-btn:active{ transform: translateY(1px); }
.cc-btn--ghost{ background: rgba(255, 255, 255, .08); color: var(--cc-ink); border-color: rgba(255, 255, 255, .14); }
.cc-btn--ghost:hover{ background: rgba(255, 255, 255, .14); }
.cc-btn--primary{
  background: var(--cc-info);
  color: #fff;
  /* 待機中は控えめに光って行動を促す */
  animation: ccGlow 3.2s ease-in-out infinite;
}
.cc-btn--primary:hover{ background: var(--cc-info-dark); }
.cc-btn:focus-visible{ outline: 2px solid #8ab4ff; outline-offset: 2px; }
@keyframes ccGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(59, 130, 246, .35); }
  50%{ box-shadow: 0 0 0 7px rgba(59, 130, 246, 0); }
}

.cc-detail{
  max-width: 960px;
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cc-detail[hidden]{ display: none; }
.cc-detail__row{ display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #c7cbdb; }
.cc-detail__save{ margin-left: auto; }

@media (max-width: 560px){
  .cc-bar__row{ flex-direction: column; align-items: stretch; }
  .cc-bar__actions{ justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce){
  .cc-bar{ animation: none; transform: translateY(0); }
  .cc-btn--primary{ animation: none; }
}

【JavaScript】
// Cookie同意バー: 「同意する」/ 設定パネルの「選択を保存」で閉じる。「設定」で詳細を開閉
(() => {
  const bar = document.getElementById('ccBar');
  const acceptBtn = document.getElementById('ccAccept');
  const settingsBtn = document.getElementById('ccSettings');
  const detail = document.getElementById('ccDetail');
  const saveBtn = document.getElementById('ccSave');
  if (!bar || !acceptBtn) return; // null安全

  const dismiss = () => {
    bar.classList.add('is-dismissed');
    bar.setAttribute('aria-hidden', 'true');
  };

  acceptBtn.addEventListener('click', dismiss);

  if (settingsBtn && detail) {
    settingsBtn.addEventListener('click', () => {
      const willOpen = detail.hidden;
      detail.hidden = !willOpen;
      settingsBtn.setAttribute('aria-expanded', String(willOpen));
    });
  }

  if (saveBtn) saveBtn.addEventListener('click', dismiss);
})();

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

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