/* FV（ヒーロー）共通コンポーネント。
   サイズ・背景・レスポンシブ・余白のみを対象とし、
   タイトル/サブのタイポグラフィは各ページのCSSで上書きする。 */
.rl-hero {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vw, 752px);
  background-color: #c9d2d6;
  /* 画像未設定時のフォールバック */
  background-image:
    linear-gradient(120deg, rgba(20, 40, 55, .35) 0%, rgba(20, 40, 55, .05) 55%, rgba(0, 0, 0, 0) 100%),
    var(--rl-hero-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

/* ヒーロー内の文字位置（左・下から64px） */
.rl-hero__inner {
  width: 100%;
  padding: 0 0 64px 64px;
}

/* 画面幅が768px以下になったらヒーローの余白を縮める */
@media (max-width: 768px) {
  .rl-hero__inner {
    padding: 0 0 40px 32px;
  }
}