/* =====================================================================
   セクションスナップ（page-id-7 のみ）

   【Elementorでの設定】
   各コンテナ → Advanced（高度な設定）→ CSS Classes に入力
   ※ ドット（.）は付けず、クラス名だけを入力する
   ※ クラスは、セクション全体を包む一番外側のコンテナ1つだけに付ける
     （入れ子の内側にも付けると、スナップ位置が二重になって途中で止まる）
   ※ ページ内リンク（/#concept など）の移動先になるセクションには、
     必ずいずれかのクラスを付ける

   ■ 全デバイスでスナップするセクション
     snap-section ... 全デバイスで100vh内に収まるセクション
     snap-fit     ... PC・タブレットは100vh内に収まるが、
                      スマホ（767px以下）では縦長になるセクション
                      ・768px以上：snap-section と同じ動き
                      ・767px以下：snap-tall と同じ動き（セクション内は自由にスクロール）
     snap-tall    ... 全デバイスで画面より高いセクション
     snap-small   ... 100vhより小さいまま見せたいセクション

   ■ PC・タブレットだけスナップするセクション（スマホはスナップなし）
     snap-section-pc ... PC・タブレットで100vhに収めてスナップ
     snap-tall-pc    ... PC・タブレットで画面より高いセクション
     snap-small-pc   ... PC・タブレットで100vhより小さいセクション

   ■ 何も付けない ... スナップさせないセクション
   ■ footer       ... <footer>タグなら自動で効く（クラス指定は不要）
   ===================================================================== */


/* ----------------------------------------------------------------
   [1] スナップの有効化
   対象：html（クラス指定は不要）
   ---------------------------------------------------------------- */

/* PC・タブレット（768px以上）：しっかり吸着 */
html:has(body.page-id-7:not(.elementor-editor-active)) {
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  scroll-padding-top: 0;        /* 固定ヘッダーがあればその高さ（例：80px）に */
}

/* スマホ（767px以下）：緩く吸着
   ・「-pc」を付けたセクションはスマホでスナップ位置を持たないため、
     mandatory のままだと、そのセクション内で止まれず通過してしまう
   ・proximity にすると、スナップ位置の近くだけ吸着し、
     スナップなしのセクションでは自由にスクロールできる
   ・「-pc」クラスを使わない場合は、このブロックを削除してよい */
@media (max-width: 767px) {
  html:has(body.page-id-7:not(.elementor-editor-active)) {
    scroll-snap-type: y proximity;
  }
}


/* ----------------------------------------------------------------
   [2] 100vhのセクション（全デバイス）
   対象：CSS Classes に「snap-section」を付けたコンテナ
   ・scroll-snap-stop: always = 勢いよくスクロールしても1セクションずつ止まる
   ---------------------------------------------------------------- */
body.page-id-7:not(.elementor-editor-active) .snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  min-height: 100dvh;
}


/* ----------------------------------------------------------------
   [3] PC・タブレットは収まる／スマホは縦長になるセクション
   対象：CSS Classes に「snap-fit」を付けたコンテナ
   ---------------------------------------------------------------- */

/* PC・タブレット（768px以上）：snap-section と同じ動き */
@media (min-width: 768px) {
  body.page-id-7:not(.elementor-editor-active) .snap-fit {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* スマホ（767px以下）：上端だけスナップ。セクション内は自由にスクロール
   ・scroll-snap-stop は付けない（長いセクションを素早く通過できるように） */
@media (max-width: 767px) {
  body.page-id-7:not(.elementor-editor-active) .snap-fit {
    scroll-snap-align: start;
    min-height: 100vh;
    min-height: 100dvh;
  }
}


/* ----------------------------------------------------------------
   [4] 画面より高いセクション（全デバイス）
   対象：CSS Classes に「snap-tall」を付けたコンテナ
   ・上端だけスナップ。セクション内は自由にスクロールできる
   ・scroll-snap-stop は付けない
   ---------------------------------------------------------------- */
body.page-id-7:not(.elementor-editor-active) .snap-tall {
  scroll-snap-align: start;
}


/* ----------------------------------------------------------------
   [5] 100vhより小さいセクション（全デバイス）
   対象：CSS Classes に「snap-small」を付けたコンテナ
   ---------------------------------------------------------------- */
body.page-id-7:not(.elementor-editor-active) .snap-small {
  scroll-snap-align: start;
}


/* ----------------------------------------------------------------
   [6] PC・タブレットだけスナップするセクション（スマホはスナップなし）
   ・768px以上でのみ指定を有効にする
   ・767px以下では何も指定しない（高さも通常のまま）
   ---------------------------------------------------------------- */
@media (min-width: 768px) {

  /* 100vhのセクション
     対象：CSS Classes に「snap-section-pc」を付けたコンテナ */
  body.page-id-7:not(.elementor-editor-active) .snap-section-pc {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* 画面より高いセクション
     対象：CSS Classes に「snap-tall-pc」を付けたコンテナ
     ・上端だけスナップ。セクション内は自由にスクロールできる */
  body.page-id-7:not(.elementor-editor-active) .snap-tall-pc {
    scroll-snap-align: start;
  }

  /* 100vhより小さいセクション
     対象：CSS Classes に「snap-small-pc」を付けたコンテナ */
  body.page-id-7:not(.elementor-editor-active) .snap-small-pc {
    scroll-snap-align: start;
  }
}


/* ----------------------------------------------------------------
   [7] フッター
   対象：<footer> タグ（クラス指定は不要）
   ・<footer>タグでない場合は、フッターのコンテナに「snap-footer」を付け、
     下のセレクタ「footer」を「.snap-footer」に書き換える
   ---------------------------------------------------------------- */
body.page-id-7:not(.elementor-editor-active) footer {
  scroll-snap-align: end;
}