:root {
  /* 設定値：ここでコンテナの挙動を一括管理 */
  --hero-height: 60vh;          /* コンテナの高さ */
  --hero-width: 100%;           /* コンテナの幅 */
  --focal-point: center 40%;    /* 画像の表示位置（x y） */
  --title-align: center;        /* タイトルの配置（center, flex-start, flex-end） */
}

.hero-viewport {
  position: relative;
  width: var(--hero-width);
  height: var(--hero-height);
  overflow: hidden; /* コンテナ外を隠す */
  background-color: #333; /* 画像読み込み前の色 */
}

.hero-img {
  width: 100%;
  height: 100%;
  /* ここがポイント：
     coverはアスペクト比を維持しつつコンテナを埋め、
     object-positionで「どこを見せるか」を指定します。
  */
  object-fit: cover;
  object-position: var(--focal-point);
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* タイトルの位置を調整 */
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: var(--title-align); /* 上下位置をCSS変数で制御 */
  
  /* 文字を読みやすくするためのグラデーション（任意） */
  background: rgba(0, 0, 0, 0.2); 
}

.hero-title {
  color: white;
  font-size: 3rem;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  margin-bottom: 20px; /* 位置の微調整用 */
}