画像オーバーレイ・ヒーロー

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

# 追加してほしい効果
画像オーバーレイ・ヒーロー（ヒーロー & タイトル）
背景写真に暗幕グラデを重ね、左下にコピーと2つのCTAを置いた構成。背景はゆっくりズーム（Ken Burns）します。旅行・不動産・ブランドサイトの一枚目に向きます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 画像オーバーレイ・ヒーロー：背景写真+暗幕グラデ+左下にコピーとCTA2つ。背景はゆっくりズーム（Ken Burns） -->
<section class="hio">
  <div class="hio__bg" style="--img:url('https://picsum.photos/id/1043/1600/1000')" aria-hidden="true"></div>
  <div class="hio__scrim" aria-hidden="true"></div>
  <div class="hio__content">
    <span class="hio__kicker">FIELD NOTES &middot; 2026</span>
    <h1 class="hio__title">遠くへ行くほど、<br>近くが見えてくる。</h1>
    <p class="hio__sub">旅の記録とルートを共有するための、シンプルな旅行者向けアプリ。次の一歩を、静かに後押しします。</p>
    <div class="hio__cta">
      <a class="hio__btn hio__btn--primary" href="#" onclick="return false">アプリを試す</a>
      <a class="hio__btn hio__btn--ghost" href="#" onclick="return false">旅の記録を見る</a>
    </div>
  </div>
</section>

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

/* ルート：全幅フル。背景写真＋暗幕＋左下コピーの土台 */
.hio {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #05070c;
}

.hio__bg {
  position: absolute; inset: 0;
  background-image: var(--img); background-size: 112% auto; background-position: center;
  animation: hioZoom 16s ease-in-out infinite alternate;
}
@keyframes hioZoom { from { background-size: 112% auto; } to { background-size: 130% auto; } }

.hio__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(4, 6, 12, .92) 0%, rgba(4, 6, 12, .42) 42%, rgba(4, 6, 12, .08) 68%),
    linear-gradient(to right, rgba(4, 6, 12, .55), transparent 55%);
}

.hio__content {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px 32px 36px;
  color: #fff;
}
.hio__kicker {
  display: inline-block; align-self: flex-start; margin-bottom: 16px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #fff;
  background: rgba(255, 255, 255, .08);
}
.hio__title {
  margin: 0; font-size: clamp(28px, 5vw, 48px); font-weight: 800; line-height: 1.28;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .4);
}
.hio__sub { margin: 18px 0 0; max-width: 460px; font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .82); }
.hio__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hio__btn {
  padding: 13px 26px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.hio__btn--primary { color: #0c0e14; background: #fff; }
.hio__btn--primary:hover { transform: translateY(-2px); background: #f2f2f2; }
.hio__btn--ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.hio__btn--ghost:hover { transform: translateY(-2px); border-color: #fff; }

@media (max-width: 560px) {
  .hio__content { padding: 26px 20px 28px; }
  .hio__title { font-size: clamp(24px, 8vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .hio__bg { animation: none; }
}

【JavaScript】
// 画像オーバーレイ・ヒーロー：背景写真のゆっくりズーム（Ken Burns）はCSSアニメーションのみで完結。
// JSでの追加処理は不要（IIFEのみ・将来の拡張用に空で保持）。
(() => {})();

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

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