/* =============================================================
   components/section-heading.css
   セクション見出し構造（Figma 実測値）
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   大見出し付きセクション構造
   ページタイトル(24px) → デコレーションライン → サブ見出し(18px)
   ───────────────────────────────────────────────────────────── */

.section-header {
  text-align: center;
  padding-top: 50px;
}

/* ページタイトル（大）: 24px Medium, 中央揃え */
.section-header__title {
  font-family: var(--font-ui);
  font-size: var(--text-page-title);  /* 24px */
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 1.3;
}

/* デコレーションライン: 100px × 1px、中央 */
.section-header__line {
  width: 100px;
  height: 1px;
  background: var(--color-border);  /* #DEDEDE */
  margin: var(--space-heading-border) auto 0;  /* 20px */
}

/* サブ見出し（大見出し配下）: 18px Medium、25px below line */
.section-header__sub {
  font-family: var(--font-ui);
  font-size: var(--text-section-sub);  /* 18px */
  font-weight: var(--fw-medium);
  color: var(--color-black);
  margin-top: 25px;
}

/* ─────────────────────────────────────────────────────────────
   スタンドアロン サブ見出し（大見出しなし）
   使用: ランキングセクション内の「2D動画」「VR」等
   上から45px位置から開始
   ───────────────────────────────────────────────────────────── */

.section-sub {
  font-family: var(--font-ui);
  font-size: var(--text-section-sub);  /* 18px */
  font-weight: var(--fw-medium);
  color: var(--color-black);
  text-align: center;
  padding-top: var(--space-border-subheading);  /* 20px */
}

/* ─────────────────────────────────────────────────────────────
   セクション共通スペーシング
   ───────────────────────────────────────────────────────────── */

/* サブ見出し直後 or 大見出し直後のコンテンツ上余白 */
.section-content {
  margin-top: var(--space-subheading-content);  /* 25px */
}

/* サブ見出しを持たないスタンドアロンセクションの親見出し
   サイズをサブ見出し（18px）に合わせ、隣接セクションと階層を揃える */
.section-header--sub .section-header__title {
  font-size: var(--text-section-sub);  /* 18px */
}

/* CTAボタン（もっと見る / ランキング一覧を見る等）ラッパー */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-bottom: var(--space-cta-bottom);  /* 10px */
}

/* セクション内でCTAの直後にサブ見出しが続く場合の追加余白（例: ランキング 2D動画→VR動画） */
.section-cta + .section-sub {
  padding-top: calc(var(--space-border-subheading) + 20px);  /* 40px */
}