@charset "utf-8";
/*------------------------------------------------*/
/*★ チャーターLP共通ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
.mv {
  width: 100%;
  padding-top: var(--mv-size-h);
  background: var(--mv-bg) no-repeat center / cover;
  .is-size-sp & {
    --mv-bg: var(--mv-bg-sp);
    --mv-size-h: calc((340 / 375) * 100%);
  }
  .is-size-pc & {
    --mv-bg: var(--mv-bg-pc);
    --mv-size-h: calc((600 / 1280) * 100%);
    @media (width > 1280px) {
      --mv-size-h: 600px;
    }
    @media (width > 2080px) {
      background-size: contain;
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ 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-blue1);
  .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-bg: var(--default-color-primary);
        --navi-lineup-item-fc: var(--default-color-white);
      }
    }

    .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;
      background: var(--navi-lineup-item-bg, transparent);
      color: var(--navi-lineup-item-fc, inherit);
      &:focus-visible {
        outline-offset: 0px;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  .section {
    --section-gap: clamp(64px, (64vw / 3.75), 80px) 0;
    --section-block-between-gap: clamp(32px, (32vw / 3.75), 40px);
    padding: var(--section-gap);
    &:first-of-type {
      --section-gap: var(--default-gap-64-48) 0 0;
    }
  }
  .section__inner {
    width: var(--default-width);
    margin: auto;
  }
  .section-title {
    display: grid;
    justify-items: center;
    font-weight: bold;
    line-height: var(--default-font-lh-150);
    text-align: center;
    margin-bottom: var(--section-block-between-gap);
    .base-title__main-text,
    .base-title__sub-text {
      font-family: var(--default-font-family-min);
    }
    .base-title__main-text {
      font-size: var(--default-font-size-40-32);
      color: var(--default-color-primary);
    }
    font-size: var(--default-font-size-40-32);
    #ship & {
      line-height: var(--default-font-lh-130);
      margin-bottom: var(--default-gap-64-48);
      .base-title__main-text {
        font-size: clamp(33px, (33vw / 3.75), 46px);
      }
      .base-title__sub-text {
        font-size: var(--default-font-size-22-17);
        color: var(--default-color-cruise-table-color);
        margin-top: var(--default-gap-8-4);
      }
      .base-title__lead-text {
        font-size: var(--default-font-size-20-16);
        color: var(--default-color-blue1);
        margin-bottom: var(--default-gap-16-12);
      }
    }
    .section:not(#ship) & {
      &::before {
        content: '';
        width: 56px;
        height: 47.089px;
        background: url(../images/section_ttl_icon.svg) no-repeat center / contain;
      }
    }
  }
}
/*section-grid*/
.section-grid {
  display: grid;
  gap: var(--section-grid-gap);
  .section-grid__image {
    order: -1;
  }
}
/*section-items*/
.section-items {
  display: grid;
  --section-items-gap: var(--section-items-gap-row) var(--section-items-gap-col);
  gap: var(--section-items-gap);
  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 {
    display: grid;
    align-content: start;
    gap: var(--section-item-gap, 0);
  }
  .section-item__image {
    order: -1;
  }
  .section-item__title {
    line-height: var(--default-font-lh-150);
    font-weight: bold;
  }
}
/*section-notes*/
.section-notes {
  margin-top: var(--section-block-between-gap);
}
/*section-buttons*/
.section-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--default-gap-24-20);
  margin-top: clamp(24px, (24vw / 3.75), 32px);
}
/*ship*/
#ship {
  --section-grid-gap: 24px;
  .is-size-pc & {
    .section-grid {
      grid-template-columns: calc((460 / var(--default-width-pc-val)) * 100%) 1fr;
    }
  }
}
/*point*/
#point {
  .section-items {
    --section-items-gap-col: var(--default-gap-40-32);
    --section-items-gap-row: var(--default-gap-64-48);
    --section-item-gap: 8px;
    --section-items-col-num: 1;
    @media (width > 640px) {
      --section-items-col-num: 2;
      .is-size-pc & {
        --section-items-col-num: 3;
      }
      grid-template-rows: repeat(2, auto) 1fr;
      .section-item {
        grid-template-rows: subgrid;
        grid-row: span 3;
      }
    }
    .section-item__title {
      font-size: var(--default-font-size-22-17);
      color: var(--default-color-blue1);
    }
  }
}
/*enjoy*/
#enjoy {
  --section-border: 2px solid var(--default-color-cruise-table-color);
  border-top: var(--section-border);
  border-bottom: var(--section-border);
  background: var(--default-color-cruise-bg-tel);
  &.section {
    padding: 6px 0;
  }
  .section__inner {
    --section-border: 1px solid var(--default-color-cruise-table-color);
    padding: var(--section-gap);
  }
  &,
  .section__inner {
    width: 100%;
    border-top: var(--section-border);
    border-bottom: var(--section-border);
  }
  .section-items {
    width: var(--default-width);
    margin: auto;
    --section-items-gap-col: var(--default-gap-40-32);
    --section-items-gap-row: var(--default-gap-64-48);
    --section-item-gap: var(--default-gap-16-12);
    --section-items-col-num: 1;
    @media (width > 640px) {
      --section-items-col-num: 2;
    }
    .section-item__title {
      color: var(--default-color-primary);
      font-family: var(--default-font-family-min);
      font-size: var(--default-font-size-26-18);
      padding-bottom: 4px;
      border-bottom: 1px solid var(--default-color-cruise-table-color);
      .is-small {
        font-size: var(--default-font-size-20-16);
      }
    }
  }
}
/*product*/
#product {
  .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 420px;
    }
    .product-main__title {
      display: grid;
      gap: 8px;
      .base-title__lead-text {
        font-size: var(--default-font-size-20-16);
        display: flex;
        align-items: center;
        gap: 8px;
        .label {
          padding: 0 4px;
          font-size: var(--default-font-size);
          color: var(--default-color-white);
          background: var(--default-color-cruise-table-color);
        }
      }
      .base-title__main-text {
        font-size: var(--default-font-size-26-18);
        .is-small {
          font-size: var(--default-font-size-22-17);
        }
      }
    }
    .product-main__departure {
      font-size: var(--default-font-size-20-16);
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--default-color-blue1);
      .is-small {
        font-size: var(--default-font-size-18-16);
      }
    }
  }
  .product-more {
    margin-top: var(--section-block-between-gap);
    display: grid;
    gap: var(--default-gap-40-32);
    align-items: start;
    @media (width > 1150px) {
      grid-template-columns: 644px 1fr;
    }
    .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;
        }
      }
      &.is-overflowing {
        &::after {
          content: '※横にスクロールできます';
          display: block;
          color: var(--default-color-notice);
          font-size: var(--default-font-size-notice);
          margin-top: 12px;
        }
      }
    }
    .product-schedule {
      width: 100%;
      overflow-x: auto;

      .product-schedule__table {
        width: max-content;
        min-width: 100%;
        border: 1px solid var(--default-color-cruise-table-color);
      }
      .product-schedule__head {
        background: var(--default-color-cruise-table-color);
        color: var(--default-color-white);
        font-weight: bold;
        th {
          padding: var(--default-gap-12-8) var(--default-gap-8-4);
          &:not(:last-child) {
            border-right: 1px solid var(--default-color-white);
          }
          &.is-meal {
            color: var(--default-color-font-black);
            font-size: var(--default-font-size-14);
            background: var(--default-color-table-color2);
            border-color: var(--default-color-cruise-table-color);
            padding: 4px 0;
          }
        }
      }
      .product-schedule__body {
        tr {
          &:not(:last-child) {
            border-bottom: 1px dashed var(--default-color-cruise-table-color);
          }
        }
        td {
          padding: var(--default-gap-16-12) var(--default-gap-8-4);
          &:not(:last-child) {
            border-right: 1px solid var(--default-color-cruise-table-color);
          }
          &:not(.is-schedule) {
            text-align: center;
          }
          &.is-day {
            width: 50px;
          }
          &.is-schedule {
            width: 195px;
            .is-schedule-week {
              font-size: var(--default-font-size-12);
            }
          }
          &.is-port {
            width: 151px;
          }
          &.is-time-in,
          &.is-time-out {
            width: 71px;
          }
          &.is-meal {
            width: 35px;
            font-size: var(--default-font-size-12);
          }
        }
      }
    }
    .product-detail {
      --border: 1px solid var(--default-color-cruise-table-color);
      border-top: var(--border);
      border-bottom: var(--border);
      .product-detail__list {
        display: grid;
        grid-template-columns: max-content 1fr;
        .product-detail__item {
          display: grid;
          grid-template-columns: subgrid;
          grid-column: span 2;
          border-bottom: 1px dashed var(--default-color-cruise-table-color);
        }
        .product-detail__item--title {
          min-width: min((110vw / 3.75), 126px);
          font-weight: bold;
          padding: var(--default-gap-12-8) var(--default-gap-8-4);
        }
        .product-detail__item--text {
          padding: var(--default-gap-12-8) var(--default-gap-8-4);
        }
      }
      .product-detail__notes {
        padding: var(--default-gap-8-4);
        font-size: var(--default-font-size-notice);
        color: var(--default-color-notice);
        .product-detail__note {
          padding-left: 1em;
          text-indent: -1em;
        }
      }
    }
  }
}
/*price*/
#price {
  .section-title ~ * {
    --section-block-between-gap: var(--default-gap-16-12);
  }
  .is-size-sp & {
    .section__inner {
      width: 100%;
      > :not(.price-table) {
        width: var(--default-width);
        margin-inline: auto;
      }
    }
  }
  .section-buttons {
    padding-top: var(--section-block-between-gap);
  }
  .price-table {
    border: 1px solid var(--default-color-primary);
    .is-size-sp & {
      border-left: none;
      border-right: none;
    }
  }
  .price-table__head {
    background: var(--default-color-primary);
    color: var(--default-color-white);
    th {
      padding: var(--default-gap-8-4);
      &:not(:last-child) {
        border-right: 1px solid var(--default-color-white);
      }
      .is-small {
        font-size: var(--default-font-size-notice);
      }
    }
  }
  .price-table__body {
    tr {
      &.is-odd {
        background: var(--default-color-cruise-bg-tel);
      }
      &:not(.is-border-dashed):not(:last-child) {
        border-bottom: 1px solid var(--default-color-table-color2);
      }
    }
    td {
      padding: var(--default-gap-8-4);
      .is-border-dashed & {
        border-bottom: 1px dashed var(--default-color-table-color2);
      }
      &.is-room-name {
        width: min((180vw / 3.75), 474px);
        font-weight: bold;
      }
      &.is-price {
        width: min((140vw / 3.75), 250px);
        font-weight: bold;
        text-align: right;
        font-size: var(--default-font-size-20-16);
        color: var(--default-color-price);
        .is-size-sp & {
          line-height: var(--default-font-lh-130);
        }
        .is-en,
        .is-kara {
          font-size: 14px;
        }
      }
    }
  }
}
/*port*/
#port {
  position: relative;
  clip-path: inset(0);
  .is-size-sp & {
    --port-section-bg: var(--port-section-bg-sp);
  }
  .is-size-pc & {
    --port-section-bg: var(--port-section-bg-pc);
  }
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 100lvh;
    background: var(--port-section-bg) no-repeat center top / cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .section-title {
    text-shadow: 0 0 min((4vw / 3.75), 8px) #fff;
    &::before {
      filter: drop-shadow(0px 0px min((4vw / 3.75), 8px) #fff);
    }
  }
  .section-lead {
    padding: 4px 0;
    border-top: 1px solid var(--default-color-primary);
    border-bottom: 1px solid var(--default-color-primary);
    background: var(--default-color-blue2);
    max-width: 760px;
    margin: 0 auto clamp(56px, (56vw / 3.75), 72px);
    .section-lead__text {
      padding: var(--default-gap-16-12);
      border-top: 1px solid var(--default-color-primary);
      border-bottom: 1px solid var(--default-color-primary);
      background: var(--default-color-white);
      font-weight: bold;
      line-height: var(--default-font-lh-150);
    }
  }
  .section-items {
    --section-items-col-num: 2;
    --section-items-gap-col: var(--default-gap-24-20);
    --section-items-gap-row: var(--default-gap-64-48);
    .is-size-pc & {
      --section-items-col-num: 4;
    }
    grid-template-rows: auto 1fr;
    .section-item {
      grid-template-rows: subgrid;
      grid-row: span 2;
      background: var(--default-color-white);
    }
    .section-item__title {
      font-size: var(--default-font-size-20-16);
    }
    .section-item__texts {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: var(--default-gap-8-4);
      padding: var(--default-gap-12-8);
      font-size: var(--default-font-size-14-12);
      line-height: var(--default-font-lh-150);
    }
    .section-item__label {
      align-self: end;
      margin-top: var(--default-gap-8-4);
      display: inline-block;
      width: fit-content;
      padding: 2px 8px;
      border-radius: var(--default-radius-4);
      border: 1px solid;
      &.is-gourmet {
        color: #c54171;
      }
      &.is-event {
        color: #3a75c3;
      }
      &.is-sightseeing {
        color: #64ac4e;
      }
      &.is-optional {
        color: #9e46ac;
      }
    }
  }
  .section-notes {
    padding: var(--default-gap-12-8);
    background: var(--default-color-white);
    margin-top: var(--section-block-between-gap);
  }
  .section-credit {
    width: fit-content;
    display: block;
    margin: var(--section-block-between-gap) 0 0 auto;
    padding: 0 var(--default-gap-4-2);
    background: rgba(0, 0, 0, 0.5);
    font-size: var(--default-font-size-notice);
    color: var(--default-color-white);
    line-height: var(--default-font-lh-150);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  .is-device-pc & {
    padding: var(--default-gap-pc-only80) 0;
    background: var(--default-color-cruise-bg-tel);
  }
}
/*contact*/
#contact {
  text-align: center;
  list-style: var(--default-font-lh-130);
  .section-title {
    font-weight: bold;
  }
  .is-size-sp & {
    background: var(--default-color-white);
    .section-title {
      font-size: var(--default-font-size-20-16);
      background: var(--default-color-primary);
      color: var(--default-color-white);
      padding: var(--default-gap-12-8);
    }
    .contact-detail {
      padding: var(--default-gap-24-20) var(--default-gap-24-20) var(--default-gap-32-24);
    }
  }
  .is-size-pc & {
    .section__inner {
      width: min(90%, 992px);
      margin: auto;
      background: var(--default-color-white);
      border: 1px solid #ccc;
      padding: 20px 20px 24px;
    }
    .section-title {
      font-size: 24px;
      font-weight: bold;
      color: var(--default-color-primary);
      margin-bottom: 1em;
    }
  }
  .contact-detail__title {
    font-size: var(--default-font-size-20-16);
    margin-bottom: var(--default-font-size-20-16);
    .base-title__main-text {
      display: flex;
      flex-wrap: wrap;
      gap: 0 1em;
      justify-content: center;
    }
  }
  .contact-detail__text {
    font-size: var(--default-font-size-14-12);
    margin-top: var(--default-gap-16-12);
  }
  .contact-detail__button {
    ~ .contact-detail__button {
      margin-top: var(--default-gap-40-32);
    }
    .contact-detail__button--link {
      display: grid;
      justify-content: center;
      align-items: center;
      gap: 0 0.5em;
      min-height: min((90vw / 7.5), 46px);
      width: min(100%, 280px);
      padding: var(--default-gap-4-2) var(--default-gap-12-8);
      margin: auto;
      border: 1px solid;
      border-radius: var(--default-radius-4);
      color: var(--contact-detail-button-fc, #555);
      font-size: var(--default-gap-24-20);
      font-weight: bold;
      .contact-detail__tel & {
        grid-template-columns: repeat(2, max-content);
        --contact-detail-button-fc: #004bb0;
        &::before {
          content: '';
          width: 1em;
          height: 1.5em;
          background: var(--contact-detail-button-icon) no-repeat center center / cover;
          --contact-detail-button-icon: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2254%22%20height%3D%2254%22%20viewBox%3D%220%200%2054%2054%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23004bb0%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Ctitle%3Eicon_smartphone%3C%2Ftitle%3E%20%3Cg%20id%3D%22%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%22%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36.375%2C4H17.625A5.625%2C5.625%2C0%2C0%2C0%2C12%2C9.625v34.75A5.625%2C5.625%2C0%2C0%2C0%2C17.625%2C50h18.75A5.625%2C5.625%2C0%2C0%2C0%2C42%2C44.375V9.625A5.625%2C5.625%2C0%2C0%2C0%2C36.375%2C4ZM27%2C48a3%2C3%2C0%2C1%2C1%2C3-3A2.996%2C2.996%2C0%2C0%2C1%2C27%2C48Zm11-8H16V8H38Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
        }
      }
      .contact-detail__branch & {
        font-size: var(--default-gap-20-16);
        grid-template-columns: 1fr max-content;
        --contact-detail-button-icon: var(--default-icon-arrow-right);
        &[target='_blank'] {
          --contact-detail-button-icon: var(--default-icon-blank);
        }
        &::after {
          content: var(--contact-detail-button-icon, '');
          font-family: var(--default-icon-ff);
          font-size: var(--contact-detail-button-icon-fs, 1em);
          line-height: 1;
          font-weight: normal;
        }
        .contact-detail__button--link--text {
          padding-left: 0.5em;
        }
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  .navi-lineup__item:not(.is-active) {
    .navi-lineup__item--inner {
      &:hover {
        --navi-lineup-item-bg: var(--default-color-blue1);
        --navi-lineup-item-fc: var(--default-color-white);
      }
    }
  }
}