.floating-announcement {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffbf;
  color: #006699;
  text-align: center;
  padding: 10px 0;
  min-height: 50px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;

  /* メニューより手前に */
  z-index: 10010;
}

.floating-announcement .close-btn {
  position: absolute;
  top: 12px;
  right: 8px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: inherit;

  /* バナー内でも一番手前に */
  z-index: 10011;
}
/* 1. スライドダウンの keyframes を定義 */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 2. バナー本体にアニメーションを追加 */
.floating-announcement {
  /* 既存スタイルの下あたりに追記してください */
  animation: slideDown 0.5s ease-out forwards;
  /* ▼もし少し遅延させたい場合はコメントを外して調整してみてください */
  /* animation-delay: 0.2s; */
}
.floating-announcement {
  font-size: 1.2rem;       /* 大きめの文字サイズ */
  font-weight: bold;       /* 太字 */
  letter-spacing: 0.05em;  /* 字間を少し広げる */
}

/* ポンポン跳ねるアニメーション定義 */
 /* アニメーション定義はそのまま */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* .highlight に付け替え */
.floating-announcement .highlight {
  display: inline-block;  

  /* ショートハンドで3回まで実行し、最後の状態をキープ */
  animation: pulse 1.5s ease-in-out 2 forwards;
}