@charset "utf-8";

/*============================　
　既存スタイル上書き及び追加
=============================*/
.p-contetns-contact:has(+ .p-contents) {
  padding-bottom: 0;
}

.p-top + .p-contetns-contact {
  padding-top: 32px;
}

.p-contents--top + .p-contents {
  margin-top: clamp(64px, calc(32.609865470852014px + 8.370702541106128vw), 120px);
}

/* メインビジュアル */
/* ------------------- */
.p-top {
  position: relative;
  background-image: url("../images/mv.webp");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

@media screen and (min-width: 768px) {
  .p-top {
    background-color: #f0f0f0;
    border-radius: 15px;
  }
}

@media not screen and (min-width: 768px) {
  .p-top {
    background-color: #000000;
    padding: 130px 0 50px;
    border-radius: 10px;
    background-repeat: no-repeat;
  }
}

/* h3見出し */
.titleLine:before,
.titleLine:after {
  min-width: 40px;
}

@media not screen and (min-width: 768px) {
  .titleLine span {
    margin-inline: 12px;
  }
}

/* リンクカード */
.p-info__item.n-hover {
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .p-info__item[data-size="large"] {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 40px;
  }

  .p-info__item[data-size="large"] :where(.p-info-item__head) {
    grid-column: 1;
    width: 240px;
    height: 100%;
    align-self: center;
    grid-row: 1 / 4;
  }

  .p-info__item[data-size="large"] :where(.p-info-item__heading) {
    grid-column: 2;
    align-self: end;
    text-align: left;
  }

  .p-info__item[data-size="large"] :where(.p-info-item__detail) {
    grid-column: 2;
    align-self: start;
  }

  .p-info__item[data-size="large"] :where(.p-view-list-button) {
    grid-column: 2;
    align-self: end;
  }

  .p-info-item__foot {
    height: 155px;
  }
}

/* ボタン */
.p-contetns-contact__button[data-size="small"] {
  max-width: fit-content;
  padding: 0.75rem 1.5rem;
}

.p-contetns-contact__button[data-size="small"] .p-contetns-contact__text {
  font-size: 16px;
}

.p-view-list-button[data-size="small"] {
  margin-inline: auto;
  max-width: 100%;
  width: 400px;
  padding: 0.75rem 1.5rem;
}

@media not screen and (min-width: 768px) {
  .p-view-list-button[data-size="small"] {
    width: 100%;
  }
}

/*============================　
　固有スタイル　.s-xx
=============================*/

/* 共通 */
/* ------------------- */
.s-text-sm {
  font-size: clamp(0.875rem, calc(0.804932735426009rem + 0.29895366218236175vw), 1rem);
}

.s-text {
  font-size: 16px;
}

.s-text-lg {
  font-size: clamp(1rem, calc(0.929932735426009rem + 0.29895366218236175vw), 1.125rem);
  line-height: 1.3;
}

.s-text-xl {
  font-size: clamp(1.125rem, calc(1.054932735426009rem + 0.29895366218236175vw), 1.25rem);
  line-height: 1.3;
}

.s-text-2xl {
  font-size: clamp(1.3125rem, calc(1.0672645739910314rem + 1.046337817638266vw), 1.75rem);
  line-height: 1.3;
}

.s-text-3xl {
  font-size: clamp(1.5625rem, calc(1.2471973094170403rem + 1.345291479820628vw), 2.25rem);
  line-height: 1.3;
}

[class*="s-text"]:is(.p-page-heading + *) {
  margin-top: 48px;
}

.s-mx-auto {
  margin-inline: auto;
}

.s-fit-mx {
  max-width: fit-content;
  margin-inline: auto;
}

.s-w720-mx {
  max-width: 720px;
  margin-inline: auto;
}

/* Support for expansion into Japan */
/* ------------------- */
.p-info.grid .p-info__item {
  gap: 24px;
}

@media screen and (min-width: 768px) {
  .p-info.grid {
    display: grid;
    gap: 38px;
    grid-template-columns: repeat(3, 1fr);
  }

  .p-info.grid .p-info__item {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}

/* 旅行 */
/* ------------------- */
.s-travel__coming {
  display: grid;
}

.s-travel__coming > * {
  grid-area: 1 / -1;
}

.s-travel__comingText {
  z-index: 1;
  padding: 20px 20px 24px;
  color: #fff;
  place-self: center;
  text-align: center;
}

.s-travel__comingText h3 {
  font-size: clamp(3rem, 1.7745rem + 5.2288vw, 5.5rem);
  font-weight: 500;
}

.s-travel__comingText p {
  margin-top: 12px;
  font-size: clamp(1.25rem, 0.6373rem + 2.6144vw, 2.5rem);
}

.s-travel__coming img {
  height: 100%;
  object-fit: cover;
}
