/*
 * トップページ：セクション単位のスクロールスナップ
 * 対象：<article class="h-main"> 内の <main> 直下の section
 */

@media screen and (min-width: 769px) {
  html,
  body {
    height: 100%;
  }

  /* h-main自体を縦スクロールコンテナにします。 */
  .h-main {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }

  /* 各sectionを1画面分のスナップ領域にします。 */
  .h-main > main > section {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* 元の固定高を画面高に合わせます。 */
  .h-main > main > .h-hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* 内容量が多いsectionは切れないようにします。 */
  .h-main > main > section:not(.h-hero) {
    display: flex;
    align-items: center;
  }

  .h-main > main > section:not(.h-hero) > [class$="__inner"] {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: visible;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* スクロール位置が分かるよう、現在のsectionを前面にします。 */
  .h-main > main > section.is-snap-active {
    z-index: 1;
  }
}

.h-main > main > section.h-section.h-footer {
    display: block;
}

/* SPは従来どおりの通常スクロールです。 */
@media screen and (max-width: 768px) {
  .h-main {
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
  }

  .h-main > main > section {
    min-height: 0;
    scroll-snap-align: none;
  }
}

/* OSでアニメーション軽減が指定されている場合 */
@media (prefers-reduced-motion: reduce) {
  .h-main {
    scroll-behavior: auto;
  }
}