インラインアラート

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

# 追加してほしい効果
インラインアラート（アラート & 空状態）
成功・情報・警告・エラーの4種類を色とアイコンで区別できるインラインアラート。左ボーダーとアイコンで意味を伝え、閉じるボタンはCSSのみで開閉します。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- インラインアラート: 成功/情報/警告/エラーの4種を左ボーダー+アイコンで表示。
     閉じる×はチェックボックスhackのみ(JS不要)。チェックボックスは視覚的に隠すだけで
     Tab/Spaceキー操作は可能に保ち、キーボードでも閉じられるようにしている。 -->
<div class="ia-stage">
  <h2 class="ia-heading">通知</h2>

  <input type="checkbox" id="ia-c-success" class="ia-toggle vh-input">
  <div class="ia-alert ia-alert--success" role="status">
    <span class="ia-alert__icon" aria-hidden="true">&#10003;</span>
    <div class="ia-alert__body">
      <p class="ia-alert__title">保存が完了しました</p>
      <p class="ia-alert__desc">プロフィールの変更内容はすべて反映されています。</p>
    </div>
    <label for="ia-c-success" class="ia-alert__close" aria-label="この通知を閉じる">&times;</label>
  </div>

  <input type="checkbox" id="ia-c-info" class="ia-toggle vh-input">
  <div class="ia-alert ia-alert--info" role="status">
    <span class="ia-alert__icon" aria-hidden="true">i</span>
    <div class="ia-alert__body">
      <p class="ia-alert__title">新機能のお知らせ</p>
      <p class="ia-alert__desc">ダッシュボードに新しいレポート表示が追加されました。</p>
    </div>
    <label for="ia-c-info" class="ia-alert__close" aria-label="この通知を閉じる">&times;</label>
  </div>

  <input type="checkbox" id="ia-c-warning" class="ia-toggle vh-input">
  <div class="ia-alert ia-alert--warning" role="alert">
    <span class="ia-alert__icon" aria-hidden="true">!</span>
    <div class="ia-alert__body">
      <p class="ia-alert__title">残り容量が少なくなっています</p>
      <p class="ia-alert__desc">現在の使用量は90%です。不要なファイルの整理をおすすめします。</p>
    </div>
    <label for="ia-c-warning" class="ia-alert__close" aria-label="この通知を閉じる">&times;</label>
  </div>

  <input type="checkbox" id="ia-c-error" class="ia-toggle vh-input">
  <div class="ia-alert ia-alert--error" role="alert">
    <span class="ia-alert__icon" aria-hidden="true">&#10005;</span>
    <div class="ia-alert__body">
      <p class="ia-alert__title">支払いに失敗しました</p>
      <p class="ia-alert__desc">カード情報をご確認のうえ、もう一度お試しください。</p>
    </div>
    <label for="ia-c-error" class="ia-alert__close" aria-label="この通知を閉じる">&times;</label>
  </div>
</div>

【CSS】
/* インラインアラート: 4種の意味色(成功緑/情報青/警告黄/エラー赤)を左ボーダー+アイコンで表現 */
* { box-sizing: border-box; }
:root{
  --ia-ink: #1f2430;
  --ia-muted: #68707d;
}
body{
  margin: 0;
  min-height: 100vh;
  padding: 56px 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(1100px 480px at 50% -10%, #eef1fb 0%, transparent 60%),
    #f6f7fb;
  font-family: "Segoe UI", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  color: var(--ia-ink);
}

.ia-stage{
  width: min(560px, 100%);
}
.ia-heading{
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* 視覚的には隠すが、Tab/Spaceでの操作性は維持する(display:noneやhidden属性は使わない) */
.vh-input{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ia-alert{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px 44px 16px 18px;
  border-radius: 12px;
  border-left: 4px solid var(--c);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20, 24, 40, .05);
  overflow: hidden;
  max-height: 160px;
  transition:
    max-height .38s cubic-bezier(.4,0,.2,1),
    opacity .28s ease,
    padding .38s ease,
    margin .38s ease,
    border-width .3s ease;
}
/* チェックボックスが選択された直後の隣接するアラートを畳んで消す */
.ia-toggle:checked + .ia-alert{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-left-width: 0;
  pointer-events: none;
}

.ia-alert--success{ --c: #16a34a; background: #f1faf4; }
.ia-alert--info{    --c: #2563eb; background: #eef4ff; }
.ia-alert--warning{ --c: #b45309; background: #fdf6e8; }
.ia-alert--error{   --c: #dc2626; background: #fdf0f0; }

.ia-alert__icon{
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  background: var(--c);
  box-shadow: 0 0 0 0 var(--c);
  animation: iaBreath 3.6s ease-in-out infinite;
}
/* 待機中も静止しきらないよう、アイコンの周囲がゆっくり呼吸するように光る */
@keyframes iaBreath{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 38%, transparent); }
  50%{ box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 0%, transparent); }
}
.ia-alert:nth-of-type(2) .ia-alert__icon{ animation-delay: .9s; }
.ia-alert:nth-of-type(3) .ia-alert__icon{ animation-delay: 1.8s; }
.ia-alert:nth-of-type(4) .ia-alert__icon{ animation-delay: 2.7s; }

.ia-alert__body{ min-width: 0; }
.ia-alert__title{
  margin: 0 0 2px;
  font-size: .92rem;
  font-weight: 700;
}
.ia-alert__desc{
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ia-muted);
}

.ia-alert__close{
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--ia-muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ia-alert__close:hover{ background: rgba(20, 24, 40, .06); color: var(--ia-ink); }
/* 隠しチェックボックスがキーボードフォーカスされたら、見た目の×に還元してフォーカスリングを出す */
.ia-toggle:focus-visible + .ia-alert .ia-alert__close{
  outline: 2px solid var(--c);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .ia-alert__icon{ animation: none; }
  .ia-alert{ transition: opacity .2s ease; }
}

【JavaScript】
// インラインアラートの開閉はCSSのみ(チェックボックスhack)で完結しているため、JSは不要。
(() => {})();

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

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