.cool-header {
  background: linear-gradient(135deg, #1a1a1a, #000000); /* 黒の斜めグラデーション */
  padding: 30px 20px;
  text-align: center;
  border-top: 2px solid #FFD700; /* ゴールドのライン */
}

.header-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 15px;
}

.header-nav a {
  color: #FFD700;               /* ゴールド */
  font-size: 20px;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 10px;
  transition: 0.3s ease;        /* ホバーの滑らかさ */
}

.header-nav a:hover {
  background-color: #FFD700;    /* ホバーで金色背景 */
  color: #000;                  /* 文字を黒にして反転 */
  transform: translateY(-3px);  /* 少し浮く演出 */
}