@charset "utf-8";

/* ==========================================================================
   Projects 詳細：章スナップ（PC のみ）のレイアウト
   - 右カラムの各章 .section を「1章＝最低1画面」にする。
   - スナップ自体は assets/js/gallery-snap.js（ChapterSnap）。CSS scroll-snap は「最寄り」
     にしか吸着せず 1 ノッチで先へ進めないため使わない（競合するので足さないこと）。
   - 戻す時は styles.php の reiro_projects_gallery_mode を 'fade'（この CSS は読み込まれない）。
   ========================================================================== */
@media screen and (min-width: 768px) {

  .single .mainContents .contents .section[data-gallery-index] {
    min-height: 100vh;
    padding-top: 10rem /* 固定ヘッダー(8rem)を避ける */
  }

  /* 章内の h2 は padding-top で位置を取るので上マージン不要。
     目次アンカー(#section-n)は h2 に付くため、着地＝章先頭（スナップ位置）に揃える */
  .single .mainContents .contents .section[data-gallery-index] h2 {
    margin-top: 0;
    scroll-margin-top: 10rem
  }

  /* 最後の章は min-height で十分（旧仕様の 30dvh 余白は不要） */
  .single .mainContents .contents .section[data-gallery-index]:last-child {
    padding-bottom: 0
  }

  .gallery .thumbnail__img,
  .gallery .gallery__container {
    will-change: opacity
  }
}