/* =========================================================
   HERMITAGE ASAHIKAWA TRIP GUIDE
========================================================= */

.hermitage-trip-page {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 120px 20px 140px;
  overflow: hidden;

  background: #f4f2ed;
  color: #10252c;
}

.hermitage-trip-page *,
.hermitage-trip-page *::before,
.hermitage-trip-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   WIDTH
========================================================= */

.trip-hero,
.trip-location,
.trip-plans {
  width: 100%;
  max-width: 1480px;
  margin-left: 0;
  margin-right: auto;
}


/* =========================================================
   HERO
========================================================= */

.trip-hero {
  width: 100%;
  margin: 0 0 110px;
  overflow: hidden;

  background: #e8e2d8;
}

.trip-hero__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(380px, .85fr);

  min-height: 620px;
}


/* LEFT */

.trip-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  min-width: 0;
  padding:
    clamp(70px, 7vw, 120px)
    clamp(32px, 5vw, 80px);
}


.trip-eyebrow {
  margin: 0 0 28px;

  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .22em;

  opacity: .55;
}


.trip-hero h1 {
  max-width: 850px;
  margin: 0 0 34px;

  font-size: clamp(44px, 4.7vw, 78px);
  line-height: 1.22;

  font-weight: 600;
  letter-spacing: .05em;
}


.trip-hero__lead {
  max-width: 680px;
  margin: 0;

  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .055em;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.trip-hero__visual {
  position: relative;

  min-width: 0;
  min-height: 620px;

  background:
    linear-gradient(
      90deg,
      rgba(232,226,216,.34) 0%,
      rgba(232,226,216,.04) 28%,
      rgba(16,37,44,.07) 100%
    ),
    url("https://snow-resort-hermitage.com/wp-content/uploads/2026/06/k6jj-7.webp")
    center / cover no-repeat;

  clip-path:
    polygon(
      21% 0,
      100% 0,
      100% 100%,
      0 100%
    );
}


.trip-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(232,226,216,.28) 0%,
      rgba(232,226,216,.02) 34%,
      rgba(0,0,0,.06) 100%
    );

  pointer-events: none;
}
/* =========================================================
   SECTION HEAD
========================================================= */

.trip-section-head {
  max-width: 760px;
  margin-bottom: 56px;
}

.trip-section-head__en {
  margin: 0 0 16px;

  font-family: var(--font-en);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2em;

  opacity: .55;
}

.trip-section-head h2 {
  margin: 0 0 26px;

  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .06em;
}

.trip-section-head > p:not(.trip-section-head__en) {
  max-width: 650px;
  margin: 0;

  font-size: 13px;
  line-height: 2;
  letter-spacing: .045em;
}


/* =========================================================
   LOCATION
========================================================= */

.trip-location {
  padding-bottom: 135px;
}



/* =========================================================
   ACCESS GRID
========================================================= */

.trip-access-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  margin-top: 20px;

  border-top: 1px solid rgba(16,37,44,.18);
  border-left: 1px solid rgba(16,37,44,.18);
}

.trip-access-grid__item {
  min-width: 0;

  /* あえてしっかり余白を取る */
  padding: 28px;

  border-right: 1px solid rgba(16,37,44,.18);
  border-bottom: 1px solid rgba(16,37,44,.18);
}


/* =========================================================
   ACCESS IMAGE
========================================================= */

.trip-access-grid__image {
  width: min(100%, 230px);
  aspect-ratio: 1 / 1;

  margin: 0 auto 25px;

  overflow: hidden;
}

.trip-access-grid__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .65s ease;
}

.trip-access-grid__item:hover
.trip-access-grid__image img {
  transform: scale(1.045);
}


/* BODY */

.trip-access-grid__body {
  width: min(100%, 230px);
  margin: 0 auto;
}

.trip-access-grid__item span {
  display: block;
  margin-bottom: 16px;

  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .05em;
}

.trip-access-grid__item strong {
  display: block;

  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .08em;
}

.trip-access-grid__item small {
  display: block;
  margin-top: 6px;

  font-family: var(--font-en);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .18em;

  opacity: .45;
}

.trip-access-note {
  margin: 18px 0 0;
  font-size: 10px;
  line-height: 1.7;
  opacity: .55;
}


/* =========================================================
   PLANS
========================================================= */

.trip-plans {
  padding-top: 80px;

  border-top: 1px solid rgba(16,37,44,.16);
}

.trip-section-head--plans {
  margin-bottom: 100px;
}


/* =========================================================
   SINGLE PLAN
========================================================= */

.trip-plan {
  display: grid;
  grid-template-columns: minmax(260px, .35fr) minmax(0, 1fr);

  gap: clamp(45px, 6vw, 110px);

  padding: 0 0 120px;
}

.trip-plan + .trip-plan {
  padding-top: 90px;
  border-top: 1px solid rgba(16,37,44,.13);
}

.trip-plan__head {
  align-self: start;
  position: sticky;
  top: 80px;
}

.trip-plan__number {
  margin: 0 0 22px;

  font-family: var(--font-en);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .2em;

  opacity: .5;
}

.trip-plan__head h2 {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: .06em;
}

.trip-plan__head > p:last-child {
  margin: 0;

  font-size: 12px;
  line-height: 2;
  letter-spacing: .04em;
}

/* =========================================================
   PLAN TITLE DECORATION
========================================================= */

.trip-plan__title-wrap {
  position: relative;
  z-index: 0;

  margin: 0 0 30px;
}


/* TITLE */

.trip-plan__title-wrap h2 {
  position: relative;
  z-index: 2;

  margin: 0;

  max-width: 330px;
}


/* ROUND ILLUSTRATION */

.trip-plan__deco {
  position: absolute;
  z-index: 1;

  width: clamp(105px, 9vw, 150px);
  aspect-ratio: 1 / 1;

  right: -20px;
  top: 50%;

  object-fit: contain;

  transform:
    translateY(-42%)
    rotate(5deg);

  pointer-events: none;
  user-select: none;
}
/* =========================================================
   SMALL CARDS
========================================================= */

.trip-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.trip-card {
  position: relative;
  min-width: 0;

  background: rgba(255,255,255,.82);

  border: 1px solid rgba(16,37,44,.15);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.trip-card:hover {
  transform: translateY(-5px);

  background: #fff;

  box-shadow:
    0 18px 42px rgba(0,45,75,.09);
}

.trip-card__body {
  display: flex;
  flex-direction: column;

  min-height: 230px;
  padding: 27px 25px 24px;
}

.trip-card__en {
  margin: 0 0 18px;

  font-family: var(--font-en);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .17em;

  opacity: .5;
}

.trip-card h3 {
  margin: 0 0 18px;

  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: .055em;
}

.trip-card__time {
  margin: 0 0 28px;

  font-family: var(--font-en);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: .12em;

  opacity: .52;
}


/* =========================================================
   MAP BUTTON
   Same idea as sightseeing page
========================================================= */

.trip-card__map {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  width: 100%;
  margin-top: auto;
  padding: 11px 14px;

  border: 1px solid rgba(16,37,44,.38);

  color: inherit;
  text-decoration: none;

  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: .14em;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.trip-card__map:hover {
  background: #10252c;
  color: #fff;
}

.trip-card__map span {
  transition: transform .3s ease;
}

.trip-card__map:hover span {
  transform: translate(3px,-3px);
}


/* =========================================================
   PC / LEFT DRAWER
========================================================= */

@media (min-width: 1025px) {

  .hermitage-trip-page {
    padding:
      130px
      clamp(50px, 4vw, 90px)
      150px
      460px;
  }

  .trip-hero,
  .trip-location,
  .trip-plans {
    width: min(1480px, calc(100vw - 550px));
    max-width: none;
  }

}


/* =========================================================
   LARGE
========================================================= */

@media (min-width: 1800px) {

  .hermitage-trip-page {
    padding-left: 470px;
    padding-right: 100px;
  }

  .trip-hero,
  .trip-location,
  .trip-plans {
    width: min(1580px, calc(100vw - 590px));
  }

  .trip-card-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  .hermitage-trip-page {
    padding: 110px 36px 120px;
  }

  .trip-access-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .trip-plan {
    grid-template-columns: 250px minmax(0,1fr);
    gap: 40px;
  }

  .trip-card-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .hermitage-trip-page {
    padding: 82px 20px 95px;
  }


  /* HERO */

 /* HERO */

.trip-hero {
  margin-bottom: 75px;
}

.trip-hero__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.trip-hero__content {
  width: 100%;
  padding: 92px 20px 55px;
}

.trip-hero h1 {
  margin-bottom: 28px;

  font-size: clamp(36px, 10.5vw, 52px);
  line-height: 1.3;
}

.trip-hero__lead {
  font-size: 13px;
  line-height: 2;
}

.trip-hero__lead br {
  display: none;
}


/* 写真をタイトルの下へ */

.trip-hero__visual {
  width: 100%;
  min-height: 300px;

  background-position: center;

  clip-path:
    polygon(
      0 13%,
      100% 0,
      100% 100%,
      0 100%
    );
}

  /* HEAD */

  .trip-section-head {
    margin-bottom: 38px;
  }

  .trip-section-head h2 {
    margin-bottom: 22px;
    font-size: 29px;
  }



  /* ACCESS */

  .trip-access-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .trip-access-grid__item {
    padding: 14px 12px 18px;
  }

  .trip-access-grid__image {
    width: 100%;
    margin-bottom: 16px;
  }

  .trip-access-grid__body {
    width: 100%;
  }

  .trip-access-grid__item span {
    min-height: 0;
    margin-bottom: 10px;

    font-size: 11px;
  }

  .trip-access-grid__item strong {
    font-size: 12px;
  }

  .trip-access-grid__item small {
    font-size: 7px;
  }



  /* PLANS */

  .trip-plans {
    padding-top: 55px;
  }

  .trip-section-head--plans {
    margin-bottom: 70px;
  }

  .trip-plan {
    display: block;
    padding-bottom: 85px;
  }

  .trip-plan + .trip-plan {
    padding-top: 65px;
  }

  .trip-plan__head {
    position: static;
    margin-bottom: 36px;
  }

  .trip-plan__head h2 {
    font-size: 27px;
  }

  .trip-card-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
  }

  .trip-card__body {
    min-height: 205px;
    padding: 18px 14px 14px;
  }

  .trip-card__en {
    margin-bottom: 12px;
    font-size: 7px;
    letter-spacing: .11em;
  }

  .trip-card h3 {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
  }

  .trip-card__time {
    margin-bottom: 20px;
    font-size: 7px;
    line-height: 1.5;
  }

  .trip-card__map {
    gap: 5px;
    padding: 10px 8px;
    font-size: 7px;
    letter-spacing: .07em;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 370px) {

  .trip-card-grid {
    gap: 7px;
  }

  .trip-card__body {
    padding: 16px 11px 12px;
  }

  .trip-card h3 {
    font-size: 13px;
  }

}

/* =========================================================
   TRIP CARD IMAGE
========================================================= */

.trip-card {
  overflow: hidden;
}


.trip-card__image {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 10;

  overflow: hidden;
}


.trip-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .65s ease;
}


.trip-card:hover
.trip-card__image img {
  transform: scale(1.055);
}
@media (max-width: 768px) {

  .trip-card-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap: 9px;
  }


  .trip-card__image {
    aspect-ratio: 1 / .82;
  }


  .trip-card__body {
    min-height: 190px;

    padding:
      16px
      12px
      13px;
  }


  .trip-card__en {
    margin-bottom: 10px;

    font-size: 7px;
  }


  .trip-card h3 {
    margin-bottom: 11px;

    font-size: 14px;
  }


  .trip-card__time {
    margin-bottom: 18px;

    font-size: 7px;
  }

}
/* =========================================================
   SEASON GUIDE
========================================================= */

.other-season-section {
  position: relative;
  z-index: 1;

  width: 100%;

  margin-top: 140px;
  padding-top: 68px;

  border-top: 1px solid rgba(16,37,44,.16);
}


/* =========================================================
   HEAD
========================================================= */

.other-season-head {
  width: min(100%, 760px);
  margin: 0 0 36px;
}


.other-season-head__en {
  margin: 0 0 12px;

  font-family: var(--font-en);
  font-size: 11px;
  line-height: 1;

  letter-spacing: .18em;

  opacity: .55;
}


.other-season-head h2 {
  margin: 0;

  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.5;

  font-weight: 600;
  letter-spacing: .065em;
}


/* =========================================================
   SEASON CARDS
========================================================= */

.season-location-links {
  display: grid;

  width: 100%;
  margin: 0;
}


/* 今回は3枚 */

.season-location-links--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}


/* CARD */

.season-card {
  display: block;

  width: 100%;

  overflow: hidden;

  background: #fff;
  color: #111;

  text-decoration: none;

  border: 1px solid rgba(16,37,44,.16);

  box-shadow:
    0 18px 48px rgba(0,45,75,.13);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.season-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 26px 70px rgba(0,45,75,.18);
}


/* IMAGE */

.season-card__image {
  width: 100%;

  aspect-ratio: 16 / 8.5;

  overflow: hidden;
}


.season-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .6s ease;
}


.season-card:hover .season-card__image img {
  transform: scale(1.06);
}


/* CONTENT */

.season-card__content {
  padding: 20px 22px 22px;
}


.season-card__content span {
  display: block;

  margin: 0 0 8px;

  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1;

  letter-spacing: .16em;

  opacity: .68;
}


.season-card__content h3 {
  margin: 0 0 8px;

  font-size: 16px;
  line-height: 1.5;

  font-weight: 600;
  letter-spacing: .08em;
}


.season-card__content p {
  margin: 0;

  font-family: var(--font-en);
  font-size: 12px;

  letter-spacing: .12em;

  opacity: .72;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .other-season-section {
    margin-top: 90px;
    padding-top: 50px;
  }


  .other-season-head {
    margin-bottom: 28px;
  }


  .other-season-head h2 {
    font-size: 27px;
  }


  .season-location-links--three {
    grid-template-columns: 1fr;
    gap: 18px;
  }


  .season-card__image {
    aspect-ratio: 16 / 9;
  }
  .trip-plan__title-wrap {
    width: min(100%, 340px);
    margin-bottom: 26px;
  }

  .trip-plan__title-wrap h2 {
    max-width: 260px;
  }

.trip-plan__deco {
  width: 135px;

  right: -5px;
  top: 50%;

  transform:
    translateY(-45%)
    rotate(5deg);
}
}