ヘッダーHeader

「ヘッダー（Header）」を実装してください。

## これは何か
ページのいちばん上に置く帯。ロゴと主要なメニューを入れ、どのページでも同じ場所に同じものが出るようにする。

## 使いどころ
- サイト名と主要な行き先を、どのページからでも同じ位置で触れるようにしたいとき
- 検索や問い合わせなど、どこからでも使う入口を1か所にまとめたいとき

## 実装の要件
- header > (ロゴ + nav) の構成にする
- 高さを固定し、ページごとにずれないようにする
- 入れる項目を増やしすぎない。7個を超えたら、まとめるか下の階層へ落とす
- スマートフォンでは高さが画面を圧迫する。56px前後に収める
- ロゴからトップページへ戻れるようにする。ロゴが押せないサイトは迷子になる

## アクセシビリティの要件
- header 要素で囲み、中のメニューは nav 要素にする
- ロゴのリンクには「（サイト名） ホーム」と分かる名前を付ける
- 固定表示にするときは、アンカーで飛んだ見出しがヘッダーの下に隠れないよう scroll-margin-top を足す

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<header class="x-header">
  <a class="x-header__logo" href="/" aria-label="Sample ホーム">Sample</a>
  <nav class="x-header__nav" aria-label="メインメニュー">
    <ul>
      <li><a href="/about/">特徴</a></li>
      <li><a href="/price/">料金</a></li>
      <li><a href="/contact/">問い合わせ</a></li>
    </ul>
  </nav>
</header>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-header,
.x-header *:not([class*="fa-"]),
.x-header *:not([class*="fa-"])::before,
.x-header *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 300px;
  height: 56px;
  padding: 0 16px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
}
.x-header__logo {
  font-size: 14px;
  font-weight: 700;
  color: #1b2028;
  text-decoration: none;
}
.x-header__nav ul {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-header__nav a {
  font-size: 12px;
  color: #1b2028;
  text-decoration: none;
}
.x-header__nav a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。