/* ==========================================================================
   TOPページ 微調整CSS
   ・style.css 自体は変更せず、このファイルで一部の挙動だけを上書きする
   ・対象：Hero見出しアニメーションの速度、スクロールアイコンの振れ幅、
     各セクションの「詳しく見る」ホバー挙動
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero：見出しのフェードインをゆっくりに（2s → 3.2s）
   リード文の出現タイミングも、見出しが上がりきる頃に合わせて連動させる
   -------------------------------------------------------------------------- */
.hero__heading--intro {
  animation-duration: 2.5s;
  animation-delay: 1s;
}
.hero__description--intro {
  animation-duration: 0.7s;
  animation-delay: 3.5s; /* 1s（開始待機）+ 2.5s（見出しの上昇）。間を空けず直後に開始 */
}

/* --------------------------------------------------------------------------
   Hero：スクロールアイコンの上下運動をもう少し大きく（6px → 12px）
   -------------------------------------------------------------------------- */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__heading--intro,
  .hero__description--intro {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   ヘッダー：左上サイト名を約1.5倍に拡大＋Hero見出しとの差別化
   （TOPページのみ／他ページのヘッダーは style.css の .site-header__logo を
   そのまま使用するため対象外）
   ・書体はフッターのサイト名（.site-footer__logo）と同じ明朝体
     （Shippori Mincho）に戻す。サンセリフへの変更は不採用とした
   ・Hero見出しと書体・ウェイトが同じままだと印象が重なるため、文字間
     （letter-spacing）を広げ、見出しとは異なる「ロゴ・題字」としての
     静かな佇まいを持たせて差別化する
   ・日本語15px・英語11px の現在の比率・行間・配置関係は基本的に維持する
   ・英語表記（Miyagi Society of Child Health）は当初1.5倍にしていたが、
     日本語に対して主張が強すぎたため縮小した
   ・幅の狭い端末で不要な改行やはみ出しが起きないよう clamp() で緩やかに縮小する
   -------------------------------------------------------------------------- */
.site-header__logo {
  font-size: clamp(19px, 4.6vw, 22.5px);
  letter-spacing: 0.1em;
}
.site-header__logo-en {
  font-size: clamp(11px, 2.6vw, 13px);
}
/* --------------------------------------------------------------------------
   02・04セクション：本文を削除した分の高さを維持し、ボタン位置を変えない
   （空要素の高さはブラウザによって扱いが異なるため、明示的に確保する）
   -------------------------------------------------------------------------- */
#events .section-header__lead,
#about .section-header__lead {
  min-height: 29px; /* line-height 1.8 × 16px 相当 */
}

/* --------------------------------------------------------------------------
   02 研修会・イベント（TOPページのみ）：カード内テキストの強弱をより明確にする
   ・「最新のイベント情報」：補助ラベルではなくカードの導入見出しとして扱う
   ・シリーズ名：読ませる情報として、通常本文よりわずかに強いウェイトにする
   ・会場・形式：ラベル（dt）は#666666のまま、実際の値（dd）のみ強くする
   ・event-card__label／event-card__series／event-card__meta-rowは
     02ページ（events.html）のカードともクラスを共有するが、このファイルは
     TOPページのみ読み込むため02ページ側は変更されない
   -------------------------------------------------------------------------- */
#events .event-card__label {
  font-size: 15px;
  color: #333333;
}
#events .event-card__series {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-body);
}
#events .event-card__meta-row dd {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   03 お知らせ（TOPページのみ）：タイトルの視認性を高める
   ・色（#222222）・フォントサイズ（16px）は既に目標値を満たしているため
     据え置き、body既定の font-weight: 300 により文字が細く見える点のみ補正する
   ・日付（.news-list__date）・カテゴリー（.news-list__category）は
     補助情報のため、色・サイズとも現状を維持する
   ・.news-list__text は03「お知らせ」ページ（news.html）ともクラスを共有するが、
     このファイルはTOPページのみ読み込むため03ページ側は変更されない
   -------------------------------------------------------------------------- */
#news .news-list__text {
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   02 研修会・イベント：「詳しく見る」ホバーから太字だけを外す
   （文字色・下線・上部ラベルの連動はそのまま維持）
   -------------------------------------------------------------------------- */
#topEventDetailBtn:hover,
#topEventDetailBtn:focus-visible {
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   04 私たちについて：「詳しく見る」ホバーでアクセントカラーに（太字にはしない）
   -------------------------------------------------------------------------- */
#aboutDetailLink:hover,
#aboutDetailLink:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}