/*
  index.html 専用の追加スタイル
  style.css（デザインシステム本体）に不足していた分のみを補う。
  本体側のクラス・変数はそのまま利用し、命名規則(BEM)も本体に合わせている。
  .reveal / .hero-reveal 本体・カード/ボタンのホバー演出は全ページ共通のためstyle.css側に
  移設済み(2026-09-01)。.hero__content(860px)・.hero__note・.footer__bottom(横並び)・
  .footer__legal-link一式もstyle.css側へ移設済み(2026-09-05、デザイン刷新に伴う整理)。
  ここにはトップページだけの上書きのみ残す。
*/

/* cta-band: トップページでは見出しに h2 を使うため、h3 と同じ白文字を適用 */
.cta-band h2 {
  color: var(--color-surface);
}

/* トップページ固有のアンカー先にも、スティッキーヘッダー分のスクロールマージンを付与 */
#top, #business, #news, #recruit {
  scroll-margin-top: 72px;
}

/* business: 事業一覧カードは横4枚並びではなく2×2にする(本体の.card-grid--4はデザインシステム側の
   デモ表示ではそのまま4列を維持したいので、ここではトップページの事業一覧だけを上書きする)。
   各カードに提供内容の箇条書きが増えたため、幅を絞らずコンテナいっぱい(1120px)に2列で広げる。
   モバイル1カラムの折返し(本体側の800px以下ブレークポイント)は崩さないよう、801px以上でのみ適用。 */
@media (min-width: 801px) {
  #business .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* business: 中身の分量(箇条書きの項目数)がカードごとに違っても、
   「詳細を見る」リンクの位置を各カード下端で揃える */
#business .card {
  display: flex;
  flex-direction: column;
}
#business .card__link {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* news-list: トップページでは事業一覧と採用の間に挟むため、見出しとの間隔を詰める
   (.section-heading の margin-bottom をここだけ打ち消す)。news-list 自体の定義は
   news.html でも使う共通コンポーネントのため style.css 側に移設済み(2026-09-02)。 */
#news .section-heading {
  margin-bottom: 0;
}