html,
body {
  margin: 0;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; /* 縦方向に必ずスナップ */
  scroll-behavior: smooth; /* スムーズにカチッと動く */
}

/* 各スライド */
.slide {
  scroll-snap-align: start; /* スライドの頭でスナップ */
  height: 100vh; /* 画面全体を占有 */
  width: 100vw;
  transition: background 0.8s ease;

  &.content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
      "Zen Maru Gothic", "Kosugi Maru", sans-serif; */
    font-family: "Mochiy Pop One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 46px;
    font-weight: 1000;
    padding: 40px;
    box-sizing: border-box;

    img {
      width: 100%;
      object-fit: contain;
    }

    &.jl-here {
      .description {
        color: #139fec;
        width: 60%;
      }

      img {
        height: 80vh;
      }
    }
    &.youth-festival {
      gap: 20px;

      .title {
        color: #15a43f;
        width: 40%;
      }

      .description {
        margin: 0;
      }

      img {
        height: 70vh;
      }
    }
    &.try-with-sample {
      gap: 20px;

      .description {
        width: 60%;
      }

      img {
        height: 70vh;
      }
    }

    &.try-complete {
      gap: 20px;

      .description {
        width: 60%;
      }

      img {
        height: 70vh;
      }
    }
  }
}