ヒーローHero

「ヒーロー（Hero）」を実装してください。

## これは何か
ページを開いて最初に目に入る大きな領域。何のサイトかを一言で伝え、次の行動へ送り出す。

## 使いどころ
- トップページやサービス紹介ページの冒頭
- 伝えたいことが1つに絞れているとき

## 実装の要件
- section > (h1 + 説明1文 + CTA) の構成
- 背景は単色か写真。グラデーションは使わない
- 画面いっぱいの高さにすると、下に何かあることに気づかれない
- 写真の上に文字を重ねると、写真によってコントラストが足りなくなる。帯か単色の下地を敷く
- 説明を詰め込まない。ここで伝えるのは1文と1つの行動

## アクセシビリティの要件
- 見出しは h1 にする。装飾の大きな文字ではない
- 背景画像の上に文字を置くときは、文字と背景のコントラストを 4.5:1 以上にする
- 背景が動く（動画・スライド）なら、止める手段を用意する

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

```html
<section class="x-hero">
  <h2 class="x-hero__t">名前が分かると、話が早い。</h2>
  <p class="x-hero__d">Webの部品の呼び名を、見た目から引ける辞典です。</p>
  <a class="x-hero__cta" href="/link/">パーツを見る</a>
</section>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-hero,
.x-hero *:not([class*="fa-"]),
.x-hero *:not([class*="fa-"])::before,
.x-hero *: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-hero {
  width: 268px;
  padding: 18px 18px 20px;
  border-radius: 10px;
  background: #1b2028;
  color: #fff;
}
.x-hero__t {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.5;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
.x-hero__d {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c7cdd7;
}
.x-hero__cta {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
```

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