@charset "UTF-8";

#mainContents {
  font-size: 18px;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.fade-in-up.is-active {
  opacity: 1;
  transform: translateY(0);
}
.delay-02 {
  transition-delay: 0.2s;
}
.delay-04 {
  transition-delay: 0.4s;
}
.delay-06 {
  transition-delay: 0.6s;
}
.c-yellow {
  color: #fff600;
}

h2 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 35px;
  color: #3c5f06;
  font-size: 36px;
  font-weight: 700;
}
.h2-row2 {
  font-size: 0.666em;
  font-weight: 400;
}
h3 {
  font-size: 28px;
}
@media (max-width: 768px) {
  h2 {
    gap: 7px;
    font-size: 30px;
  }
  h3 {
    font-size: 24px;
  }
}

.section-lead {
  margin: 0 auto 75px;
  /* text-align: left; */
  line-height: 2;
}
@media (max-width: 1000px) {
  .section-lead {
    max-width: 675px;
    text-align: justify;
  }
}
@media (max-width: 768px) {
}

.introduction-section {
  position: relative;
  padding-bottom: 0;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 760px;
    background: url(../images/introduction-bg.webp) no-repeat center center /
      cover;
    /* position: fixed; */
  }
  * {
    position: relative;
  }
}
.movie-link {
  display: block;
}
.introduction-lead {
  display: grid;
  gap: 30px;
  margin-top: 160px;
  padding-block: 145px 160px;
  background: url(../images/introduction-lead-bg.webp) no-repeat center center /
    cover;
  p {
    line-height: 2;
  }
}
.introduction-lead-title {
  margin-bottom: 35px;
  color: #3c5f06;
  font-size: 36px;
  font-weight: 700;
}
.introduction-lead-br {
  display: block;
}
@media (max-width: 1000px) {
  .introduction-lead {
    p {
      text-align: justify;
    }
  }
  .introduction-lead-br {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .is-adjusted {
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .introduction-section {
    &::before {
      background-image: url(../images/introduction-bg-sp.webp);
    }
  }
  .introduction-lead {
    background-image: url(../images/introduction-lead-bg-sp.webp);
  }
  .introduction-lead-title {
    font-size: 30px;
  }
}

.hakuba-section {
  position: relative;
  overflow: hidden;
  /* background-image:
    url(../images/hakuba-bg-r.webp), url(../images/hakuba-bg-l.webp);
  background-repeat: no-repeat, no-repeat;
  background-position:
    top -275px right,
    bottom -135px left;
  background-size: auto, auto; */
}
.hakuba-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 35px 6px;
}
.hakuba-title {
  gap: 6px;
  margin-bottom: 0;
  padding-top: 70px;
  font-size: 28px;
  font-weight: 400;
}
.hakuba-title-row2 {
  font-size: 0.85em;
}
.hakuba-disc {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: justify;
  line-height: 2;
}
@media (min-width: 1001px) {
  .hakuba-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-areas:
      "hakuba-images hakuba-title"
      "hakuba-images hakuba-disc";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
  }
  .hakuba-title {
    grid-area: hakuba-title;
  }
  .hakuba-disc {
    grid-area: hakuba-disc;
    padding-inline: 70px;
  }
  .hakuba-images {
    grid-area: hakuba-images;
  }
}
@media (max-width: 1000px) {
  .hakuba-content {
    grid-template-columns: 1fr;
  }
  .hakuba-title {
    padding-top: 0;
  }
  .hakuba-images {
    display: grid;
    gap: 20px;
    place-content: center;
  }
}
@media (min-width: 769px) and (max-width: 1000px) {
  .hakuba-disc {
    padding-inline: 30px;
  }
}

.parallax-image {
  position: absolute;
  will-change: transform;
}
.hakuba-bg-1 {
  top: -275px;
  right: 0;
}
.hakuba-bg-2-1, .hakuba-bg-2-2 {
  top: 320px;
  right: 518px;
}
.hakuba-bg-3 {
  bottom: -475px;
  left: 0;
}
.hakuba-bg-4-1, .hakuba-bg-4-2 {
  bottom: -500px;
  left: 526px;
}
@media (max-width: 768px){
  .hakuba-bg-1 {
    width: calc( 422 / 750 * 100vw );
    top: -110px;
  }
  .hakuba-bg-2-1, .hakuba-bg-2-2 {
    width: calc( 400 / 750 * 100vw );
    top: 300px;
    right: auto;
    left: 0;
  }
  .hakuba-bg-3 {
    width: calc( 450 / 750 * 100vw );
    bottom: -400px;
    left: -60px;
  }
  .hakuba-bg-4-1, .hakuba-bg-4-2 {
    width: calc( 450 / 750 * 100vw );
    bottom: -800px;
    left: auto;
    right: -22px;
  }
  .hakuba-bg-4-2 {
    bottom: -600px;
  }
}

.card-list {
  display: grid;
  gap: 80px;
  margin-top: 80px;
}
.card-item {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0 6px;
}
.card-title {
  position: relative;
  margin-top: 30px;
  line-height: 1.2;
}
.card-sub-title {
  margin-top: 5px;
  font-size: 24px;
}
.card-desc {
  margin-top: 30px;
  padding-inline: 70px;
  text-align: justify;
  word-break: break-all;
}
@media (min-width: 1001px) {
  .card-item {
    grid-template-areas:
      "card-image card-title"
      "card-image card-sub-title"
      "card-image card-desc";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 1fr;
  }
  .card-item.-reverse {
    grid-template-areas:
      "card-title card-image"
      "card-sub-title card-image"
      "card-desc card-image";
  }
  .card-title {
    grid-area: card-title;
  }
  .card-sub-title {
    grid-area: card-sub-title;
  }
  .card-image {
    grid-area: card-image;
  }
  .card-desc {
    grid-area: card-desc;
  }
}
@media (max-width: 1000px) {
  .card-item {
    grid-template-columns: 1fr;
    place-items: center;
  }
  .card-image {
    margin-top: 35px;
  }
  .card-desc {
    padding-inline: 4vw;
  }
}
@media (max-width: 768px) {
  .card-title {
    margin-top: 0;
  }
  .card-sub-title {
    font-size: 19px;
  }
}

.rooms-section {
  background-color: #f9fae2;
  background-image:
    url(../images/rooms-bg-r.webp), url(../images/rooms-bg-l.webp);
  background-repeat: no-repeat, no-repeat;
  background-position:
    right top,
    left bottom;
  background-size: auto, auto;
}
.rooms-title {
  color: #222222;
}
.rooms-lead-br {
  display: block;
}
.rooms-item-title {
  width: fit-content;
  margin-inline: auto;
  &::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -32px;
    width: 127px;
    height: auto;
    aspect-ratio: 1 / 1;
    background: url(../images/rooms-item-title-bg.webp) no-repeat center
      center / cover;
    z-index: -1;
  }
}
@media (max-width: 768px) {
  .rooms-section {
    background-size: calc(420 / 750 * 100vw), calc(420 / 750 * 100vw);
  }
}

.cuisine-title {
  color: #ffffff;
  &::before {
    content: "";
    position: absolute;
    top: -24px;
    left: -88px;
    width: 125px;
    height: auto;
    aspect-ratio: 125 / 65;
    background: url(../images/cuisine-title-bg.webp) no-repeat center center /
      cover;
  }
}
.cuisine-section {
  background-image: linear-gradient(90deg, #fdc937, #fb7b23);
  color: #ffffff;
}
.cuisine-item:first-of-type {
  .card-desc {
    text-align: left;
  }
}
.cuisine-item-title {
  &::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 80px;
    width: 257px;
    height: auto;
    aspect-ratio: 257 / 38;
    background: url(../images/cuisine-item-title-bg.webp) no-repeat center
      center / cover;
    z-index: -1;
  }
}
.cuisine-item.sanfermo {
  .cuisine-item-title {
    &::before {
      top: 27px;
    }
  }
}
@media (max-width: 1000px) {
  .rooms-lead-br {
    display: none;
  }
  .cuisine-item-title {
    max-width: 390px;
    width: 100%;
    &::before {
      right: 0;
    }
  }
}
@media (max-width: 768px) {
  .cuisine-title {
    &::before {
      width: 102px;
      top: -20px;
      left: -72px;
    }
  }
}

.experience-section {
  padding-bottom: 0;
  background: url(../images/experience-bg.webp) no-repeat center center / cover;
}
.experience-title {
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -6px;
    left: -56px;
    width: 325px;
    height: auto;
    aspect-ratio: 325 / 69;
    background: url(../images/experience-title-bg.webp) no-repeat center
      center / cover;
  }
}
.experience-main-image {
  margin-bottom: 30px;
}
.experience-list {
  display: grid;
  gap: 80px;
  margin-top: 150px;
}
.experience-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.experience-item-desc {
  padding-top: 30px;
  p {
    position: relative;
    z-index: 1;
    padding-inline: 20px;
    text-align: justify;
  }
}
.experience-item-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  color: #3c5f06;
  &::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 127px;
    height: auto;
    aspect-ratio: 127 / 112;
    background: url(../images/experience-item-title-bg.webp) no-repeat left
      top / cover;
    z-index: -1;
  }
}
.experience-item-title-row2 {
  font-size: 0.85em;
}
@media (min-width: 1001px) {
  .experience-item:nth-child(odd) {
    grid-template-areas: "experience-item-desc experience-item-image1 experience-item-image2";
  }
  .experience-item:nth-child(even) {
    grid-template-areas: "experience-item-image1 experience-item-image2 experience-item-desc";
  }
  .experience-item-desc {
    grid-area: experience-item-desc;
  }
  .experience-item-image1 {
    grid-area: experience-item-image1;
  }
  .experience-item-image2 {
    grid-area: experience-item-image2;
  }
}
@media (max-width: 1000px) {
  .experience-item {
    grid-template-columns: 1fr;
    place-items: center;
    padding-inline: 20px;
  }
  .experience-item-title {
    width: fit-content;
    margin-inline: auto;
    &::before {
      left: -75px;
    }
  }
  .experience-item-desc {
    margin-bottom: 15px;
    p {
      padding-inline: 0;
    }
  }
}
@media (max-width: 768px) {
  .experience-section {
    background-image: url(../images/experience-bg-sp.webp);
  }
  .experience-title {
    width: calc(680 / 750 * 100vw);
    &::before {
      left: 0;
      width: 285px;
    }
  }
  .activity-title {
    &::before {
      top: -25px;
    }
  }
  .experience-list {
    gap: 40px;
    margin-top: 0;
  }
}

.activity-section {
  margin-top: 160px;
  background: url(../images/activity-bg.webp) no-repeat center center / cover;
}
.activity-title {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 45px;
  color: #3c5f06;
  font-size: 36px;
  font-weight: 700;
}
.activity-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 20px;
}
.activity-item {
  p {
    margin-top: 15px;
    padding-inline: 15px;
    text-align: justify;
  }
}
.activity-item:nth-child(3) {
  p {
    letter-spacing: -0.04em;
  }
}
@media (max-width: 1000px) {
  .activity-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .activity-section {
    background-image: url(../images/activity-bg-sp.webp);
  }
  .activity-title {
    font-size: 30px;
  }
  .activity-list {
    gap: 20px 10px;
  }
  .activity-item {
    p {
      margin-top: 10px;
      padding-inline: 7px;
      font-size: 16px;
      line-height: 1.4;
    }
  }
}

.access-section,
.access-title,
.place-list * {
  color: #ffffff;
  tr {
    display: flex;
  }
  th {
    white-space: nowrap;
  }
}
.access-section {
  background: url(../images/access-bg.webp) no-repeat center center / cover;
}
.access-map {
  margin-bottom: 80px;
}
.access-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.access-method {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 35px 45px 45px;
  background: rgba(255, 255, 255, 0.8);
  color: #000000;
  border-radius: 10px;
}
.access-method-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  &::before {
    content: "";
    display: inline-block;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
.-icon-train {
  &::before {
    width: 30px;
    background: url(../images/icon-train.webp) no-repeat center / auto 100%;
  }
}
.-icon-car {
  &::before {
    width: 35px;
    background: url(../images/icon-car.webp) no-repeat center / 100% auto;
  }
}
.access-method-direction {
  text-align: justify;
  h4,
  h5 {
    font-size: 1em;
  }
}
.access-map {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 75px;
}
.access-map iframe {
  width: 100% !important;
  height: auto; 
  aspect-ratio: 4 / 3;
}
@media (min-width: 1001px) and (max-width: 1150px) {
  .access-method-title {
    font-size: calc(28 / 1150 * 100vw);
  }
}
@media (max-width: 1000px) {
  .access-methods {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .access-map {
    margin-bottom: 35px;
  }
  .access-method {
    padding: 35px 25px 25px;
  }
  .access-method-title {
    font-size: 19px;
  }
}

.course-section {
  color: #ffffff;
  a{
    color: #ffffff;
  }
}
.course-title {
  color: #ffffff;
}
.course-item {
  background: rgba(0, 0, 0, 0.5);
  font-size: 16px;
}
.schedule-list {
  &::before {
    background-color: #ffffff;
  }
}
.schedule-title {
  font-size: 16px;
}
.schedule-term {
  &::before {
    background-color: #ffffff;
  }
}
.course-note-section {
  background: url(../images/course-note-bg.webp) no-repeat center center / cover;
  h4 {
    font-size: 18px;
  }
}
.place-list {
  font-size: 24px;
}
.conditions-title {
  margin-top: 70px;
}
.conditions-item {
  &::before {
    content: "";
    position: relative;
    top: 2px;
    display: inline-block;
    width: 18px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-right: 2px;
    background-color: #ffffff;
    border-radius: 50%;
  }
}
@media (min-width: 1001px) {
  .course-section {
    position: relative;
    width: 100%;
    color: #ffffff;
    padding-block: 0;
  }
  .course-sticky-bg {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    z-index: 1;
    aspect-ratio: 1920 / 1248;
    background: url(../images/course-bg.webp) no-repeat top center / cover;
    will-change: transform; /* スムーズに動かすため */
  }
  .course-content,
  .course-note-section {
    position: relative;
    z-index: 2;
  }
  .course-title {
    margin-top: calc(-1248 / 1920 * 100% + 160px);
  }
  /* .course-note-section {
    margin-bottom: 160px;
  } */
}
@media (max-width: 1000px) {
  .course-section,
  .course-note-section {
    background: transparent;
    background-color: #000000;
  }
  .schedule-title{
    font-size: 24px;
  }
  .course-note-section {
    padding-block: 0;
  }
  .course-item {
    background-color: #6e6e6e;
  }
  .place-list {
    display: grid;
    gap: 5px;
      font-size: 19px;
    /* tr {
      line-height: 1.4;
      padding-block: 5px;
    } */
  }
  .course-note-footnote {
    font-size: 16px;
  }
}