/* layout.css — 共通レイアウト（サイドナビ 248px ＋ メイン 1000px の2カラム）
   Figma: 各ページ共通。左右 64px、カラム間 64px。サイドナビは追従（sticky） */

/* 大きな画面では全体（サイドナビ＋メイン）を 1440px で止めて中央に置く。
   画面端まで伸ばす要素（TOP の MV・流れるギャラリー）が使う値：
   --site-gutter＝左右の余白 / --site-side＝最大幅で止まったときに外側にできる余白 /
   --site-main-offset＝画面左端からメイン列の左端まで */
.site {
  --site-gutter: var(--space-64);
  --site-max: var(--width-page);
  --site-side: max(0px, (100vw - var(--site-max)) / 2);
  --site-main-offset: calc(var(--site-gutter) * 2 + var(--width-sidebar) + var(--site-side));

  display: flex;
  align-items: flex-start;
  gap: var(--space-64);
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.site__sidebar {
  position: relative;
  z-index: 1; /* 画面幅いっぱいのギャラリーより手前に出す */
  flex-shrink: 0;
  align-self: stretch;
  width: var(--width-sidebar);
  padding: var(--space-56) 0 var(--space-80); /* 下はメイン列の下余白（80）と同じ：追従が止まる位置をメインの下端に揃える */
}

.site__sidebar-inner {
  position: sticky;
  top: var(--space-56);
  display: flex;
  flex-direction: column;
  gap: var(--space-120); /* サイドナビと追加ブロックの間隔（Figma: お知らせ詳細）*/
}

/* 追加ブロックでビューポートより長くなるページでは追従させない */
.site__sidebar--static .site__sidebar-inner {
  position: static;
}

.site__main {
  flex: 1 0 0;
  min-width: 0;
}

/* 下層ページのメイン列（上 120 / 下 80 / gap 40）Figma: 各下層ページ共通 */
.page-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding: var(--space-120) 0 var(--space-80);
}

.page-stack > * {
  width: 100%;
}

/* 1200px 以下：1カラム（サイドナビの列をやめ、ロゴ → メイン → 追加ブロックの順に縦に並べる）。
   メニューは下部バー＋ハンバーガーメニュー（site-nav.css）。比率縮小は解除（base.css）*/
@media (max-width: 1200px) {
  .site {
    --site-gutter: var(--space-24);
    --site-max: calc(var(--width-content) + var(--site-gutter) * 2);
    --site-main-offset: calc(var(--site-gutter) + var(--site-side));

    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 列の箱を外して、中身（ロゴ・追加ブロック）を .site の子として並べ替える */
  .site__sidebar,
  .site__sidebar-inner {
    display: contents;
  }

  .site__main {
    flex: none;
    order: 2;
  }

  /* ロゴが上に来るので、メイン列の上余白を詰める */
  .site__main > main {
    padding-top: var(--space-40);
  }
}