/* ==========================================================================
   下層ページ共通テンプレートCSS
   対象：02 研修会・イベント、03 お知らせ、04 私たちについて、05 活動報告 等
   ・style.css のトークン（色・フォント・余白基準値）を継承する
   ・TOPページ（index.html / style.css）は変更しない
   ・各下層ページは、このファイルを共通で読み込んだうえで、
     ページ固有のCSS（events.css 等）を追加で読み込む
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通ページヘッダー（テキストのみ・番号／タイトル／リード文）
   ・カードなどの右カラムを持たない下層ページ向け（例：Hero作品は使用しないが
     2カラム構成も不要なページ）
   ・Hero作品はメインビジュアルとして使用しない。背景は白
   ・固定ヘッダー（サイト名／position: absolute）と重ならないよう
     上部に十分な余白を確保する
   -------------------------------------------------------------------------- */
.subpage-header {
  padding-top: calc(var(--header-height) + clamp(80px, 10vw, 140px));
  background-color: var(--color-bg-white);
}

/* TOPページの .section-header は section__container--split（2カラム）前提のため、
   下層ページでは「最大幅1320px＋中央寄せ」を解除し、画面端からの余白だけで
   左揃えにする（サイト名など固定ヘッダーの位置と揃える） */
.subpage-header > .section__container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   ファーストビュー（見出し＋右カラムのコンテンツ）
   ・TOPページ「02 研修会・イベント」セクションと同じ
     .section__container--split（基本値：左260〜380px／右1fr）をそのまま使う
   ・右側固定ナビが無い下層ページでは、TOPページより広い基本値のまま
     コンテンツ領域を広く使える
   ・背景はHTML側で .section--cream を付与して指定する
   -------------------------------------------------------------------------- */
.subpage-intro {
  padding-top: calc(var(--header-height) + clamp(64px, 8vw, 110px));
}

/* --------------------------------------------------------------------------
   セクションラベル（例：PAST EVENTS 過去のイベント）
   ・大見出しではなく、控えめな小さいラベルとして使用する
   -------------------------------------------------------------------------- */
.subpage-section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}
.subpage-section-label__en {
  font-family: var(--font-serif-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.subpage-section-label__ja {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Hero作品アクセント（ページ終端・フッター直前のみ）
   ・TOPページのようなメインビジュアルとしては使用しない
   ・作品「上端」の、色鉛筆で描き始めた不規則なギザギザの輪郭を見せる
     （object-position: top）。中央部分の切り抜きは行わない
   ・横幅100%、比率は変形させない（object-fit: cover は縦方向の
     トリミングのみに作用し、横幅を基準に等倍表示するため変形は生じない）
   ・作品自体への色補正・加工は行わない
   -------------------------------------------------------------------------- */
.subpage-hero-accent {
  width: 100%;
  height: clamp(120px, 14vw, 200px);
  margin: 0;
  margin-top: clamp(96px, 14vw, 180px); /* カード一覧とアクセントの間の十分な白い余白 */
}
.subpage-hero-accent__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* --------------------------------------------------------------------------
   レスポンシブ：スマートフォン（〜767px）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .subpage-header,
  .subpage-intro {
    padding-top: 140px;
  }
  .subpage-hero-accent {
    height: 120px;
    margin-top: 64px;
  }
}