@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#mv {
  width: 100%;
  position: relative;
  container-type: inline-size;
}
#mv-contents {
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  padding-block: clamp(40px, (40vw / 3.75), 86px);
  .is-size-sp & {
    @media screen and (orientation: portrait) {
      min-height: calc((600 / 375) * 100cqw);
    }
  }
  .mv-logo {
    max-width: min((343vw / 3.75), 681px);
    margin-inline: auto;
  }
}
#mv-bg {
  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

  .mv-photo {
    inset: 0;
    position: absolute;
    animation: mv-slide 24s var(--mv-bg-delay, 0s) infinite;
    animation-fill-mode: both;
    opacity: 0;
    z-index: 1;
    &.is-num-1 {
      --mv-bg-sp: url('../images/mv_sp1.webp');
      --mv-bg-pc: url('../images/mv_pc1.webp');
      opacity: 1;
      z-index: 10;
    }
    &.is-num-2 {
      --mv-bg-sp: url('../images/mv_sp2.webp');
      --mv-bg-pc: url('../images/mv_pc2.webp');
      --mv-bg-delay: 4s;
      z-index: 20;
    }
    &.is-num-3 {
      --mv-bg-sp: url('../images/mv_sp3.webp');
      --mv-bg-pc: url('../images/mv_pc3.webp');
      --mv-bg-delay: 8s;
      z-index: 30;
    }
    &.is-num-4 {
      --mv-bg-sp: url('../images/mv_sp4.webp');
      --mv-bg-pc: url('../images/mv_pc4.webp');
      --mv-bg-delay: 12s;
      z-index: 40;
    }
    &.is-num-5 {
      --mv-bg-sp: url('../images/mv_sp5.webp');
      --mv-bg-pc: url('../images/mv_pc5.webp');
      --mv-bg-delay: 16s;
      z-index: 50;
    }
    &.is-num-6 {
      --mv-bg-sp: url('../images/mv_sp6.webp');
      --mv-bg-pc: url('../images/mv_pc6.webp');
      --mv-bg-delay: 20s;
      z-index: 60;
    }
    --mv-bg: var(--mv-bg-sp);
    .is-size-pc & {
      --mv-bg: var(--mv-bg-pc);
    }
    background: var(--mv-bg) no-repeat center center / cover;
  }
}
@keyframes mv-slide {
  0% {
    opacity: 0;
  }
  8.33% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ navArea ＝＝ ★*/
#navArea {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--default-color-white);
  padding: clamp(6px, (6vw / 3.75), 10px) 0; /*yはフォーカス線分をマイナス*/
  border-bottom: 1px solid var(--default-color-yellow2);
  .navi__inner {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth; /* スクロールを滑らかにする */
  }
  .navi-lineup {
    width: max-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--default-gap-40-32);
    padding: 2px 24px; /*yはフォーカス線分をプラス*/
    .navi-lineup__item {
      scroll-margin: 0 20px; /* 画面端に張り付かないためのマージン */
      &.is-active {
        scroll-margin-inline: 20px;
        --navi-lineup-item-fc: var(--default-color-yellow1);
      }
    }

    .navi-lineup__item--inner {
      padding: var(--default-gap-8-4);
      font-size: var(--default-font-size-14-12);
      line-height: 1;
      font-weight: bold;
      display: block;
      border-radius: 4px;
      color: var(--navi-lineup-item-fc, inherit);
      &:focus-visible {
        outline-offset: 0px;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  .section {
    padding-block: var(--default-gap-section-top) var(--default-gap-section-bottom);
  }
  .section__inner {
    width: var(--default-width);
    margin: auto;
  }
  .section-title {
    display: grid;
    justify-items: center;
    text-align: center;
    font-weight: bold;
    text-align: center;
    line-height: var(--default-font-lh-150);
    .base-title__main-text,
    .base-title__sub-text {
      font-family: var(--default-font-family-min);
    }
    .section:not(#intro) & {
      row-gap: 20px;
      margin-bottom: clamp(56px, (56vw / 3.75), 72px);
      .base-title__main-text {
        font-size: var(--default-font-size-section-title);
      }
      .base-title__sub-text {
        display: grid;
        justify-items: center;
        font-size: var(--default-font-size-18-16);
        color: var(--default-color-yellow1);
        &::before,
        &::after {
          content: '';
          width: calc(100% + 16px);
          height: 1px;
          background: currentColor;
        }
        &::after {
          margin-top: 4px;
        }
      }
    }
    #intro & {
      margin-bottom: clamp(64px, (64vw / 3.75), 80px);
      padding-block: 48px;
      position: relative;
      &::before,
      &::after {
        content: '';
        width: 100%;
        height: 20px;
        background: url(../images/introduction_ttl_kazari.svg) no-repeat center / contain;
        position: absolute;
        left: 0;
      }
      &::before {
        top: 0;
      }
      &::after {
        bottom: 0;
      }
      .base-title__lead-text {
        font-size: var(--default-font-size-20-16);
      }
      .base-title__main-text {
        font-size: clamp(28px, (28vw / 3.75), 38px);
        letter-spacing: -5.7px;
        margin-top: 8px;
      }
      .base-title__sub-text {
        order: -1;
        font-size: var(--default-font-size-20-16);
        color: var(--default-color-yellow1);
        margin-bottom: 16px;
      }
    }
  }
  .section-subtitle {
    text-align: center;
    font-family: var(--default-font-family-min);
    font-size: clamp(26px, (26vw / 3.75), 30px);
    line-height: var(--default-font-lh-150);
    font-weight: var(--default-font-weight-bold);
    margin-bottom: clamp(20px, (20vw / 3.75), 24px);
  }
}
/*section-grid*/
.section-grid {
  display: grid;
  gap: var(--section-grid-gap, var(--default-gap-section-gap));
  .section-grid__image {
    order: -1;
  }
}
/*section-items*/
.section-items {
  --section-items-gap-col: var(--default-gap-40-32);
  --section-items-gap-row: var(--default-gap-80-64);
  --section-item-gap: 8px;
  display: grid;
  column-gap: var(--section-items-gap-col);
  row-gap: var(--section-items-gap-row);
  grid-template-columns: repeat(
    auto-fit,
    calc((100% - var(--section-items-gap-col) * (var(--section-items-col-num) - 1)) / var(--section-items-col-num))
  );
  justify-content: center;
  .section-item,
  .section-item__detail {
    display: grid;
    align-content: start;
  }
  .section-item {
    gap: var(--default-gap-16-12);
  }
  .section-item__detail {
    gap: var(--section-item-gap);
  }
  .section-item__image {
    order: -1;
  }
  .section-item__title {
    line-height: var(--default-font-lh-150);
    font-weight: bold;
    color: var(--default-color-yellow1);
  }
  .section-item__more {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-item-gap);
    align-items: center;
    font-weight: bold;
    line-height: var(--default-font-lh-150);
  }
  .section-item__area {
    display: flex;
    align-items: center;
    gap: var(--default-gap-4-2);
    font-size: var(--default-font-size-18-16);
    &::before {
      content: '\e0c8';
      font-family: var(--default-font-family-icon);
      font-size: 1em;
      line-height: 1;
      translate: 0 0.05em;
    }
  }
  .section-item__label {
    display: inline-block;
    width: fit-content;
    padding: var(--default-gap-4-2) var(--default-gap-8-4);
    border-radius: var(--default-radius-4);
    border: 1px solid;
    font-size: var(--default-font-size-12);
    &.is-gourmet {
      color: var(--default-color-icon-gourmet);
    }
    &.is-sightseeing {
      color: var(--default-color-icon-sightseeing);
    }
    &.is-event {
      color: #3a75c3; /*未定*/
    }
    &.is-optional {
      color: #9e46ac; /*未定*/
    }
  }
}
/*section-notes*/
.section-notes {
  margin-top: var(--section-block-between-gap);
  .section-notes__inner:not(:first-child) {
    margin-top: var(--section-block-between-gap);
  }
  .section-notes__title {
    font-size: var(--default-font-size-14);
    line-height: var(--default-font-lh-150);
    margin-bottom: var(--default-gap-notes-item);
  }
}
/*intro*/
#intro {
  background: var(--default-color-yellow3) url(../images/introduction_bg.webp) no-repeat center top / var(--default-bg-width-pc);
  .is-size-pc & {
    .section-grid {
      grid-template-columns: calc((600 / var(--default-width-pc-val)) * 100%) 1fr;
    }
  }
}
/*point*/
#point {
  .section-items {
    --section-items-col-num: 1;
    @media (width > 640px) {
      --section-items-col-num: 2;
      .is-size-pc & {
        --section-items-col-num: 3;
      }
    }
    .section-item__title {
      font-family: var(--default-font-family-min);
      font-size: var(--default-font-size-24-18);
    }
  }
}
/*enjoy*/
#enjoy {
  position: relative;
  clip-path: inset(0);
  color: var(--default-color-white);
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100lvh;
    background: var(--default-color-font-black) url(../images/enjoy_bg.webp) no-repeat center top / var(--default-bg-width-pc);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .section-items {
    --section-items-gap-col: calc((64 / var(--default-width-pc-val)) * 100%);
    --section-items-col-num: 1;
    .is-size-pc & {
      width: var(--default-width);
      margin: auto;
    }
    @media (width > 640px) {
      --section-items-col-num: 2;
    }
    .section-item__title {
      color: var(--default-color-yellow2);
      font-family: var(--default-font-family-min);
      font-size: var(--default-font-size-26-18);
    }
    .section-item__image {
      overflow: hidden;
      border-radius: var(--default-radius-16);
      border: 1px solid var(--default-color-yellow2);
    }
  }
}
/*product*/
#product {
  background: var(--default-color-yellow3);
  .is-size-sp & {
    .section__inner {
      width: 100%;
      > :not(.product-more),
      .product-more .product-detail {
        width: var(--default-width);
        margin-inline: auto;
      }
    }
  }
  .product-main {
    display: grid;
    gap: var(--default-gap-40-32);
    font-weight: bold;
    line-height: var(--default-font-lh-150);
    @media (width > 920px) {
      grid-template-columns: 1fr calc((516 / var(--default-width-pc-val)) * 100%);
    }
    .product-main__texts {
      display: grid;
      gap: var(--default-gap-8-4);
      align-content: start;
    }
    .product-main__title {
      font-size: var(--default-font-size-26-18);
    }
    .product-main__airport {
      color: var(--default-color-white);
      line-height: var(--default-font-lh-180);
      background: var(--default-color-font-black);
      padding: 0 var(--default-gap-8-4);
      justify-self: start;
    }
    .product-main__departure {
      font-size: var(--default-font-size-18-16);
    }
  }
  .product-more {
    margin-top: var(--default-gap-section-gap);
    .product-schedule__wrapper {
      width: 100%;
      overflow: hidden;
      .is-size-sp & {
        .product-schedule {
          padding: 0 calc((20 / 375) * 100%);
        }
        &::after {
          margin: 12px calc((20 / 375) * 100%) 0;
        }
      }
    }
    .product-schedule {
      width: 100%;
      overflow-x: auto;
      .product-schedule__table {
        width: max-content;
        min-width: 100%;
        background: var(--default-color-white);
        border-collapse: collapse;
        font-size: var(--default-font-size-14);
        font-weight: bold;
      }
      .product-schedule__head {
        background: var(--default-color-font-black);
        color: var(--default-color-white);
        th {
          padding: var(--default-gap-8-4);
          &:not(:first-child) {
            border-left: 1px solid var(--default-color-white);
          }
          &.is-meal {
            padding: 0;
            &:first-child {
              border-left: 1px solid var(--default-color-white);
            }
          }
        }
        tr:not(:first-child) {
          border-top: 1px solid var(--default-color-white);
        }
      }
      .product-schedule__body {
        tr {
          &:not(:last-child) {
            border-bottom: 1px solid var(--default-color-font-black);
          }
          &.is-ride {
            background: var(--default-color-brown2);
          }
        }
        td {
          padding: var(--default-gap-8-4);
          vertical-align: top;
          text-align: left;
          em {
            color: #bd331a;
          }
          &:not(:last-child) {
            border-right: 1px solid var(--default-color-font-black);
          }
          &.is-day {
            width: 50px;
            text-align: center;
          }
          &.is-schedule {
            width: 220px;
          }
          &.is-detail {
            width: 552px;
          }
          &.is-stay {
            width: 132px;
            vertical-align: bottom;
          }
          &.is-meal {
            width: 35px;
            vertical-align: middle;
            text-align: center;
          }
        }
      }
    }
  }
  .section-buttons {
    margin-top: clamp(56px, (56vw / 3.75), 72px);
  }
  #mainArea:has(#product + #plan) & {
    padding-bottom: 0;
  }
}
/*plan*/
#plan {
  background: var(--default-color-yellow3);
  .is-size-sp & {
    .section__inner {
      width: 100%;
      > :not(.plan-product),
      .plan-product > :not(.plan-product__content) {
        width: var(--default-width);
        margin-inline: auto;
      }
    }
  }
  .plan-product {
    + .plan-product {
      margin-top: clamp(64px, (64vw / 3.75), 80px);
    }
    .plan-product__content {
      .is-size-sp & {
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
        padding: 0 calc((20 / 375) * 100%);
      }
    }
    .product-lineup {
      --product-lineup-gap: var(--default-gap-16-12);
      gap: var(--product-lineup-gap);
      .is-size-sp & {
        display: flex;
        width: max-content;
        margin-inline: auto;
        .product-lineup__item {
          width: 262px;
        }
      }
      .is-size-pc & {
        --product-lineup-col-num: 4;
        display: grid;
        grid-template-columns: repeat(
          auto-fit,
          calc((100% - var(--product-lineup-gap) * (var(--product-lineup-col-num) - 1)) / var(--product-lineup-col-num))
        );
        justify-content: center;
      }
      .product-lineup__item--link {
        display: grid;
        align-content: start;
        grid-template-rows: repeat(3, auto) 1fr;
        background: var(--default-color-white);
        border: 1px solid #000;
        border-radius: var(--default-radius-4);
        overflow: hidden;
        height: 100%;
        font-size: var(--default-font-size-12);
        line-height: var(--default-font-lh-130);
        > :not(.product-lineup__item--image) {
          padding-inline: 8px;
        }
      }
      .product-lineup__item--title {
        padding-top: 8px;
      }
      .product-lineup__item--name {
        &:not(:first-child) {
          margin-top: 8px;
        }
        .product-lineup__item--name--text {
          font-size: var(--default-font-size-14);
          font-weight: var(--default-font-weight-bold);
        }
      }
      .product-lineup__item--labels {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        .product-lineup__item--labels--item {
          padding: 4px;
          background: #eee;
        }
      }
      .product-lineup__item--details {
        margin-top: 12px;
      }
      .product-lineup__item--price {
        align-self: end;
        padding-bottom: 8px;
        margin-top: 24px;
      }
      .product-lineup__item--minmax {
        font-size: 20px;
        font-weight: var(--default-font-weight-bold);
        color: #ff0000;
        .is-en,
        .is-kara {
          font-size: var(--default-font-size-14);
        }
      }
      .product-lineup__item--price-fuel {
        margin-top: 12px;
      }
      .product-lineup__item--period {
        margin-top: 8px;
      }
    }
  }
}
/*activities*/
#activities {
  --activities-title-color: var(--default-color-primary);
  --activities-text-shadow-color: var(--default-color-white);
  .section-items {
    --section-items-col-num: 1;
    @media (width > 640px) {
      --section-items-col-num: 2;
      .is-size-pc & {
        --section-items-col-num: 3;
      }
    }
    .section-item__title {
      font-size: var(--default-font-size-20-16);
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#banner {
  background: var(--default-color-yellow3);
  padding-block: var(--default-gap-40-32);
  .reco-banner__list {
    width: min((296vw / 3.75), 500px);
    margin-inline: auto;
    display: grid;
    gap: var(--default-gap-40-32);
    grid-template-columns: repeat(2, 1fr);
    .is-size-pc & {
      width: min(90%, 904px);
      grid-template-columns: repeat(4, 1fr);
    }
    .reco-banner__image {
      aspect-ratio: 1 / 1;
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  .navi-lineup__item:not(.is-active) {
    .navi-lineup__item--inner {
      &:hover {
        --navi-lineup-item-fc: var(--default-color-yellow1);
      }
    }
  }
  .product-lineup__item--link,
  .reco-banner__link {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}