ミニマル・タイポ・ヒーロー

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

# 追加してほしい効果
ミニマル・タイポ・ヒーロー（ヒーロー & タイトル）
特大見出しだけを主役にし、余白をたっぷり取った上品なヒーロー。下に小さなサブコピーと控えめなテキストCTAを添え、背景はごく淡く息づく光のみで構成しています。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ミニマル・タイポ・ヒーロー：特大見出しが主役、余白多め。下に小さなサブ＋控えめCTA。上品な雰囲気 -->
<section class="hmt">
  <div class="hmt__glow" aria-hidden="true"></div>
  <div class="hmt__inner">
    <span class="hmt__eyebrow">No. 004 &mdash; Studio Journal</span>
    <h1 class="hmt__title">静けさは、<br>力になる。</h1>
    <div class="hmt__rule" aria-hidden="true"></div>
    <p class="hmt__sub">削ぎ落とすほど、伝わるものがある。少人数のための、静かなプロダクトスタジオです。</p>
    <a class="hmt__cta" href="#" onclick="return false">仕事を見る <span class="hmt__cta-arrow" aria-hidden="true">&rarr;</span></a>
  </div>
</section>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  display: block;
  background: #faf9f6;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}

/* ルート：全幅フル、余白多めの中央寄せ土台 */
.hmt {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #faf9f6;
  color: #201e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
}

/* 極めて控えめに息づく光（背景アニメ） */
.hmt__glow {
  position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  border-radius: 50%; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(180, 160, 120, .1), transparent 70%);
  animation: hmtBreathe 9s ease-in-out infinite;
}
@keyframes hmtBreathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.hmt__inner { position: relative; z-index: 1; max-width: 760px; text-align: left; }
.hmt__eyebrow {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  color: #928c7c; text-transform: uppercase;
}
.hmt__title {
  margin: 22px 0 0; font-weight: 300; line-height: 1.12; letter-spacing: -.01em;
  font-size: clamp(48px, 11vw, 128px); color: #201e1a;
}
.hmt__rule {
  width: 64px; height: 1px; margin: 30px 0 0; background: #201e1a; opacity: .5;
  transform-origin: left;
  animation: hmtRule 2.2s ease forwards;
}
@keyframes hmtRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hmt__sub {
  margin: 26px 0 0; max-width: 420px; font-size: 15px; line-height: 1.85;
  color: #57534a; font-weight: 400;
}
.hmt__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 34px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: #201e1a;
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid #cbc4b3;
  transition: border-color .25s ease, gap .25s ease, color .25s ease;
}
.hmt__cta:hover { border-color: #201e1a; gap: 12px; }
.hmt__cta-arrow { display: inline-block; transition: transform .25s ease; }
.hmt__cta:hover .hmt__cta-arrow { transform: translateX(2px); }

@media (max-width: 560px) {
  .hmt { padding: 44px 22px; }
  .hmt__title { font-size: clamp(38px, 15vw, 56px); }
  .hmt__sub { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hmt__glow { animation: none; }
  .hmt__rule { animation: none; transform: scaleX(1); }
}

【JavaScript】
// ミニマル・タイポ・ヒーロー：息づく背景光と下線の描画は全てCSSアニメーションで完結。
// JSでの追加処理は不要（IIFEのみ・将来の拡張用に空で保持）。
(() => {})();

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

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