@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
#pageApp {
  position: relative;
}
.fixed-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  .fixed-bg__photo {
    inset: 0;
    position: absolute;
    animation: var(--animation-name, animation-bg-switch) 16s var(--fixed-bg-delay, 0s) infinite;
    opacity: 0;
    z-index: 1;
    &.is-num-1 {
      --fixed-bg-sp: url('../images/mv_photo_01_sp.webp');
      --fixed-bg-pc: url('../images/mv_photo_01_pc.webp');
    }
    &.is-num-2 {
      --fixed-bg-sp: url('../images/mv_photo_02_sp.webp');
      --fixed-bg-pc: url('../images/mv_photo_02_pc.webp');
      --fixed-bg-delay: 4s;
    }
    &.is-num-3 {
      --fixed-bg-sp: url('../images/mv_photo_03_sp.webp');
      --fixed-bg-pc: url('../images/mv_photo_03_pc.webp');
      --fixed-bg-delay: 8s;
    }
    &.is-num-4 {
      --fixed-bg-sp: url('../images/mv_photo_04_sp.webp');
      --fixed-bg-pc: url('../images/mv_photo_04_pc.webp');
      --fixed-bg-delay: 12s;
    }
    --fixed-bg: var(--fixed-bg-sp);
    @media (width >=981px) {
      --fixed-bg: var(--fixed-bg-pc);
    }
    background: var(--fixed-bg) no-repeat center center / cover;
  }
}
@keyframes animation-bg-switch {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    opacity: 0;
  }
}
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  container-type: inline-size;
}
/*mv*/
.mv {
  .mv-title {
    container-type: inline-size;
    background: color-mix(in srgb, var(--default-color-black) 47%, transparent);
    padding-block: min(calc((124 / 375) * 100cqw), 196px) min(((174 / 375) * 100cqw), 217px);
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: min(calc((236 / 375) * 100cqw), 236px);
      background: linear-gradient(to bottom, transparent 0%, var(--default-color-black) 100%);
      position: absolute;
      bottom: 0;
    }
    .mv-logo {
      container-type: inline-size;
      position: relative;
      z-index: 1;
      width: min((316vw / 3.75), 671px);
      margin-inline: auto;
      .base-img {
        display: block;
        height: calc((182 / 316) * 100cqw);
      }
    }
  }
  .mv-texts {
    background: var(--default-color-black);
    color: var(--default-color-white);
    padding-block: var(--default-gap-96-64) clamp(80px, (80vw / 3.75), 160px);
    text-align: center;
    letter-spacing: 0.56px;
    .is-size-pc & {
      letter-spacing: 1.4px;
    }
    .mv-texts__inner {
      width: var(--default-width);
      margin-inline: auto;
    }
    .mv-lead {
      &:not(:first-child) {
        margin-top: 1em;
      }
    }
  }
}

/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section*/
.section {
  padding-block: var(--section-padding-block-start, min((56vw / 3.5), 100px)) var(--section-padding-block-end, min((80vw / 3.5), 96px));
  background: var(--section-bg-color, #e4e1dc);
  color: var(--section-font-color, inherit);
}
.section-header {
  width: var(--section-header-size-w, var(--default-width2));
  margin-inline: auto;
}
.section-title {
  text-align: center;
  --base-title-lead-font-size: clamp(14px, (14vw / 3.75), 24px);
  --base-title-main-font-size: clamp(24px, (24vw / 3.75), 40px);
  display: grid;
  gap: 22px;
  justify-items: center;
  letter-spacing: var(--section-title-letter-spacing, clamp(2.4px, (2.4vw / 3.75), 4px));
  &::after {
    content: '';
    width: clamp(96px, (96vw / 3.75), 160px);
    height: 2px;
    opacity: 0.8;
    background: var(--default-color-primary);
  }
}
.section-subtitle {
  text-align: center;
  font-size: var(--base-title-sub-font-size, clamp(14px, (14vw / 3.75), 24px));
  line-height: var(--base-title-sub-font-lh, var(--default-font-lh-180));
  margin-bottom: var(--section-subtitle-margin-bottom, var(--default-gap-32-24));
  .base-title__inner {
    grid-template-columns: repeat(3, auto);
    align-items: center;
    justify-content: center;
    gap: var(--section-subtitle-gap, var(--default-gap-16-12));
    &::before,
    &::after {
      content: '';
      display: block;
      width: var(--section-subtitle-line-width, min(((49 / var(--default-width-sp-val)) * 100cqw), 86.5px));
      height: 2px;
      background: var(--section-subtitle-line-color, var(--default-color-primary));
    }
  }
}
.section-lead {
  letter-spacing: 1.4px;
  text-align: center;
  margin-block: var(--section-lead-margin-block-start, var(--default-gap-40-32)) var(--section-lead-margin-block-end, var(--default-gap-96-64));
  padding-inline: var(--section-lead-padding-inline, var(--gutter-1x));
}
.section-contents {
  width: var(--section-contents-size-w, var(--default-width));
  margin-inline: auto;
  container-type: inline-size;
}
.section-nav {
  --section-nav-border-color: #c0c5cc;
  container-type: inline-size;
  background: var(--default-color-white);
  position: relative;
  box-shadow: 0 6px 10px -6px color-mix(in srgb, #2c2a29 20%, transparent);
  .section-nav__inner {
    @container (min-width: 501px) {
      & {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
      }
      .section-nav__inner2 {
        padding-inline: var(--gutter-3x);
        width: 100%;
        min-width: max-content;
      }
      .section-nav__lineup {
        display: flex;
        justify-content: center;
        width: fit-content;
        min-width: var(--default-width2);
        --section-nav-border-width: 1px;
        padding: 0 var(--section-nav-border-width);
        gap: var(--section-nav-border-width);
      }
      .section-nav__item {
        position: relative;
        flex: 1;
        min-width: 160px;
        &::before,
        &:last-child::after {
          content: '';
          display: block;
          width: var(--section-nav-border-width);
          height: calc(100% - var(--gutter-2x));
          background: var(--section-nav-border-color);
          position: absolute;
          --section-nav-border-posi: calc(var(--section-nav-border-width) * -1);
          top: 50%;
          transform: translateY(-50%);
        }
        &::before {
          left: var(--section-nav-border-posi);
        }
        &:last-child::after {
          right: var(--section-nav-border-posi);
        }
      }
      .section-nav__link {
        background: var(--section-nav-bg-color, var(--default-color-white));
        padding: var(--gutter-1x) var(--gutter-half);
        text-align: center;
      }
    }
    @container (max-width: 500.99px) {
      .section-nav__lineup {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: var(--gutter-2x) var(--gutter-3x);
        gap: var(--gutter-2x) var(--gutter-5x);
        &:has(.section-nav__item:nth-child(even):last-child) {
          .section-nav__item:nth-last-child(-n + 2) {
            --section-nav-border-status: none;
          }
        }
      }
      .section-nav__item {
        font-size: var(--default-font-size-12);
        display: grid;
        gap: var(--gutter-1x);
        &:last-child {
          --section-nav-border-status: none;
        }
        &::after {
          content: var(--section-nav-border-status, '');
          border-bottom: 1px dashed var(--section-nav-border-color);
        }
      }
      .section-nav__link {
        grid-template-columns: 1fr auto;
        align-items: center;
        &::after {
          content: var(--default-icon-arrow-down);
          font-family: var(--default-icon-ff);
          font-size: 1.75em;
          line-height: 1;
          font-weight: var(--default-font-weight-normal);
          letter-spacing: normal;
          color: #697180;
        }
      }
    }
  }
  .section-nav__lineup {
    width: var(--default-width2);
    margin-inline: auto;
  }
  .section-nav__link {
    display: grid;
    height: 100%;
    font-family: var(--default-font-family-min);
    font-weight: var(--default-font-weight-bold);
    line-height: var(--default-font-lh-150);
  }
}
/*travelStyle*/
#travelStyle {
  .base-card {
    --base-card-gap-row: calc((120 / var(--default-width-pc-val)) * 100cqw);
    .base-card__item {
      @container (min-width: 751px) {
        gap: 0 calc((40 / var(--default-width-pc-val)) * 100cqw);
        grid-template-rows: auto 1fr;
        --base-card-buttons-margin-top: 40px;
        &:nth-child(odd) {
          grid-template-areas:
            'image title'
            'image text';
          grid-template-columns: auto 1fr;
          .base-buttons {
            justify-content: start;
          }
        }
        &:nth-child(even) {
          grid-template-areas:
            'title image'
            'text image';
          grid-template-columns: 1fr auto;
          .base-card__item--title,
          .base-card__item--texts {
            justify-self: end;
          }
          .base-card__item--texts {
            text-align: right;
          }
          .base-card__item--labels,
          .base-buttons {
            justify-content: end;
          }
        }
        .base-card__item--title {
          grid-area: title;
        }
        .base-card__item--texts {
          grid-area: text;
        }
        .base-card__item--image {
          grid-area: image;
          width: calc((600 / var(--default-width-pc-val)) * 100cqw);
        }
      }
    }
  }
}
/*specialExperience*/
#specialExperience {
  --base-card-gap-row: 64px;
  --base-card-gap-column: calc((44 / var(--default-width-pc-val)) * 100cqw);
}
/*peaceOfMind*/
#peaceOfMind {
  --section-bg-color: var(--default-color-white);
  --section-lead-margin-block-end: var(--default-gap-64-48);
  --base-card-gap-row: var(--default-gap-32-24);
  --base-card-gap-column: calc((64 / var(--default-width-pc-val)) * 100cqw);
  .base-card {
    .base-card__item--image {
      width: calc((281 / 335) * 100%);
      margin-inline: auto;
      .is-size-pc & {
        width: calc((255 / 325) * 100%);
      }
    }
    .base-card__item--title {
      text-align: center;
      font-size: 24px;
      line-height: var(--default-font-lh-150);
      letter-spacing: 2.4px;
      margin-block: var(--default-gap-16-12) var(--gutter-2x);
    }
  }
}
/*travelPartner*/
#travelPartner {
  --section-bg-color: var(--default-color-black);
  --section-font-color: var(--default-color-white);
  --base-card-gap-row: var(--default-gap-96-64);
  --base-card-gap-column: calc((48 / var(--default-width-pc-val)) * 100cqw);
  .base-card {
    .base-card__item--title {
      text-align: center;
      font-size: 24px;
      line-height: var(--default-font-lh-150);
      letter-spacing: 2.4px;
      margin-block: var(--gutter-1x) var(--gutter-2x);
    }
  }
}
/*qualita*/
#qualita {
  .base-card {
    --base-card-gap-row: var(--gutter-2x);
    --base-card-gap-column: var(--gutter-2x);
    @container (max-width: 600.99px) {
      .base-title__inner {
        --base-card-title-align-items: end;
        --base-card-title-gap: var(--gutter-2x);
        .base-title__sub-text {
          letter-spacing: 0.64px;
          .is-inline-block {
            display: block;
          }
        }
      }
    }
    .base-card__item {
      background: var(--default-color-white);
      border: 1px solid var(--default-color-primary);
      padding: var(--gutter-1x) var(--gutter-2x);
    }
    .base-card__item--title {
      padding-bottom: var(--gutter-1x);
      margin-bottom: var(--gutter-1x);
      border-bottom: 1px solid var(--default-color-primary);
      --base-title-main-font-size: 32px;
      --base-title-sub-font-size: 16px;
      --base-title-sub-font-lh: var(--default-font-lh-150);
      .base-title__inner {
        grid-template-columns: auto 1fr;
        align-items: var(--base-card-title-align-items, center);
        gap: var(--base-card-title-gap, var(--gutter-1x));
      }
    }
  }
}
/*consultation*/
#consultation {
  --section-bg-color: var(--default-color-white);
  --section-lead-margin-block-end: var(--default-gap-64-48);
  --section-contents-size-w: min(var(--default-width-sp), 980px);
  .is-size-sp & {
    --section-title-letter-spacing: 0.48px;
  }
  .base-card {
    --base-buttons-margin-top: var(--default-gap-32-24);
  }
  .consultation-more {
    margin-top: clamp(64px, (64vw / 3.75), 104px);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  .section-nav {
    .section-nav__link {
      @container (min-width: 501px) {
        transition: var(--default-transition-background);
        &:hover {
          --section-nav-bg-color: var(--default-color-primary);
        }
      }
      @container (max-width: 500.99px) {
        &:hover {
          color: var(--default-color-primary);
        }
      }
    }
  }
}