@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");

/* CSS Document */
:root {
  --content-color-base: #2c2a29;
  --content-color-link: #3064d5;
  --content-color-blue: #0063b1;
  --content-color-lagoon: #0a5e64;
  --content-color-ocean: #bccff9;
  --content-color-red: #df0d00;
  --content-color-violet: #9c27b0;
  --content-color-violet200: #d8aaee;
  --content-color-gold: #644c10;
  --content-color-gold600: #8e6e1c;
  --content-color-yellow: #f5c800;
  --content-color-cream: #fff9bb;
  --content-color-gray: #e0e0e0;
  --bg-img-setting: no-repeat center center / contain;
  --content-width-sp: calc(335vw / 3.75);
  --content-width-pc: 1104px;
  --content-width: min(var(--content-width-sp), var(--content-width-pc));
  --content-bg-width-pc: max(100%, 1920px);
  --font-size-pc: 16px;
  --font-size-sp: calc(14vw / 3.75);
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --font-sans: "Noto Sans JP", serif;
  --font-serif: "Noto Serif JP", serif;
  --content-hover-speed: 0.3s;
  --content-open-new: url(/cmn/icon2/open_in_new.svg);
  --content-arrow-down: url(/cmn/icon2/expand_more.svg);
  --content-arrow-up: url(/cmn/icon2/expand_less.svg);
  --content-arrow-right: url(/cmn/icon2/chevron_right.svg);
  --content-border-1: 1px solid;
  --content-border-2: 2px solid;
  --content-border-4: 4px solid;
}

.is-pc,
.is-tb,
.nopc {
  display: none;
}
.is-pc.is-tb {
  display: block;
}
.main {
  font-family: var(--font-sans);
  font-size: var(--content-font-size);
  color: var(--content-color-base);
  line-height: 1.3;
  position: relative;
}
.main * {
  box-sizing: border-box;
}
.inner {
  width: var(--content-width);
  margin: auto;
  position: relative;
}
a {
  transition: var(--content-hover-speed);
}
img {
  height: auto;
}
.note-list > li,
.note-txt {
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #737373;
  padding-left: 1em;
  text-indent: -1em;
  > a {
    color: var(--content-color-link);
    text-decoration: underline;
  }
}

/***** MV・ナビ *****/
.title-container {
  width: 100%;
  height: calc(400vw / 3.75);
  background: url("../img/bgmv.webp") repeat-y center top / auto 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  .title-logo {
    width: calc(255vw / 3.75);
    background: #fff;
    border-radius: 16px;
    padding: calc(20vw / 3.75) calc(12vw / 3.75);
    margin: auto;
    text-align: center;
  }
}
.nav-wrapper {
  background: #fff;
  padding-block: calc(4vw / 3.75);
  .inner {
    display: grid;
    gap: calc(16vw / 3.75);
    padding-block: calc(16vw / 3.75);
    .nav-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      li {
        a {
          display: block;
          padding-block: calc(16vw / 3.75);
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          &:hover {
            background-color: var(--content-color-gold600);
            color: #fff;
          }
        }
      }
      > li:nth-child(-n + 2) {
        border-bottom: var(--content-border-1) #c0c5cc;
      }
      > li:nth-child(odd) {
        border-right: var(--content-border-1) #c0c5cc;
      }
    }
    .display_selected {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 53px;
      background: #66b0eb;
      border-radius: 8px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      padding: calc(16vw / 3.75);
      &::after {
        content: "";
        --webkit--mask: var(--content-arrow-down) var(--bg-img-setting);
        mask: var(--content-arrow-down) var(--bg-img-setting);
        background: var(--content-color-base);
        width: calc(16vw / 3.75);
        height: calc(16vw / 3.75);
        display: block;
      }
    }
    .dep-select-zone {
      display: none;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      transition: all 0.5s;
      z-index: 100;
      background: rgba(0 0 0 / 80%);
      padding: calc(64vw / 3.75) calc(40vw / 3.75);
      .dep-select {
        display: grid;
        gap: calc(8vw / 3.75);
        > li {
          display: block;
          cursor: default;
          padding: calc(8vw / 3.75);
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          text-align: center;
          &.selected {
            background: #fff;
            color: var(--content-color-black);
          }
        }
      }
      .close-button {
        margin: calc(40vw / 3.75) auto;
        width: 5em;
        padding: calc(8vw / 3.75);
        border: var(--content-border-1);
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }
    }
  }
}

/***** メインコンテンツ *****/
.main-container {
  position: relative;
  .container {
    width: 100%;
    .title-wrapper {
      height: 335px;
      display: flex;
      gap: 8px;
      justify-content: center;
      text-align: center;
      .title-box {
        width: var(--content-width);
        margin: auto;
        font-weight: 900;
        color: #fff;
        .title-sub {
          display: inline;
          font-size: 20px;
        }
        .head-title {
          font-size: 32px;
        }
      }
    }
    .sub-title {
      display: grid;
      gap: calc(8vw / 3.75);
      justify-items: center;
      font-size: 26px;
      font-weight: 900;
      text-align: center;
      > .title-icon {
        font-size: 18px;
        color: #fff !important;
        padding: calc(4vw / 3.75) calc(8vw / 3.75);
      }
      > .sub-title-catch {
        font-size: 16px;
        color: var(--content-color-gold);
      }
    }
    .bodycopy {
      font-size: 18px;
      font-weight: normal;
      color: var(--content-color-base);
      text-align: center;
    }

    .section-container {
      background: #fff;
      padding-block: calc(64vw / 3.75);
    }
    .main-content {
      display: flex;
      flex-direction: column;
      gap: calc(24vw / 3.75);
    }
    .campaign-box {
      background: var(--content-color-cream);
      padding: calc(8vw / 3.75);
      font-size: 16px;
      font-weight: 900;
      color: var(--content-color-gold);
      text-align: center;
      > span {
        display: block;
        font-size: 12px;
        font-weight: normal;
      }
    }
    .special-content {
      display: grid;
      gap: calc(24vw / 3.75);
      .special-title-box {
        text-align: center;
        font-weight: 900;
        .special-title-aori {
          display: flex;
          justify-content: center;
          > span {
            font-size: 16px;
            color: var(--content-color-gold);
          }
          &::before,
          &::after {
            content: "/";
            font-size: 16px;
            color: var(--content-color-gold);
            display: block;
          }
          &::before {
            transform: scaleX(-1);
          }
        }
        .special-title-sub {
          font-size: 16px;
        }
        .special-titme-main {
          font-size: 20px;
        }
      }
    }
    .special-list {
      display: grid;
      gap: calc(24vw / 3.75);
      > li {
        display: grid;
        gap: calc(16vw / 3.75);
        .special-img {
          display: grid;
          gap: calc(4vw / 3.75);
          position: relative;
          .course-icon {
            background: var(--content-color-gold600);
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            line-height: 1.5;
            padding: 0 calc(4vw / 3.75);
            position: absolute;
            top: 0;
            left: 0;
          }
          > img {
            width: 100%;
            height: 143px;
            object-fit: cover;
            object-position: center;
          }
        }
        .special-box {
          display: grid;
          gap: calc(8vw / 3.75);
          line-height: 1.5;
          .special-midashi {
            font-size: 18px;
            font-weight: 900;
          }
          .special-price-txt {
            font-size: 16px;
            font-weight: bold;
            color: var(--content-color-gold);
            .normal-price {
              display: block;
              font-size: 14px;
              font-weight: normal;
              color: var(--content-color-base);
            }
          }
          .special-opetration-date {
            font-weight: bold;
          }
          .special-item {
            font-weight: bold;
            color: var(--content-color-gold);
            line-height: 1.5;
          }
        }
      }
    }
    .special-list.is-one {
      display: block;
      width: 100%;
      margin: auto;
      > li > .special-img {
        margin: auto;
        > img {
          width: auto;
          height: 167.5px;
        }
      }
    }
    .special-notice-box {
      display: grid;
      gap: 8px;
      text-align: right;
      .txt-link {
        justify-content: flex-end;
      }
    }
    .txt-link {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        content: "";
        mask: var(--content-open-new) var(--bg-img-setting);
        background: var(--content-color-link);
        width: calc(16vw / 3.75);
        height: calc(16vw / 3.75);
        display: block;
      }
      > a {
        font-weight: bold;
        color: var(--content-color-link);
        text-decoration: underline;
      }
    }
    .caption {
      display: block;
      font-size: 12px;
      text-align: right;
    }
    .product-wrapper {
      display: flex;
      flex-direction: column;
      gap: calc(40vw / 3.75);
      .product-title {
        font-size: 26px;
        color: var(--content-color-gold);
        text-align: center;
      }
      .area00 {
        display: none;
      }
      .item-label.winter1::after {
        content: "グルメ満喫";
        background-color: var(--content-color-red);
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }
      .item-label.winter2::after {
        content: "流氷と氷満喫";
        background-color: var(--content-color-blue);
        font-size: 12px;
        color: #fff;
        font-weight: bold;
        text-align: center;
      }
      .link-button.tour,
      .link-button.dp {
        width: 100%;
        margin: calc(24vw / 3.75) auto 0;
        > a {
          display: flex;
          gap: calc(8vw / 3.75);
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          background: var(--content-color-gold600);
          padding: calc(12vw / 3.75);
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          text-align: center;
          &::before,
          &::after {
            content: "";
            display: block;
            mask: var(--bg-img-setting);
            background: #fff;
            width: calc(16vw / 3.75);
            height: calc(16vw / 3.75);
          }
          &::after {
            mask-image: var(--content-arrow-right);
          }
          &:hover {
            opacity: 0.7;
          }
        }
      }
      .link-button.tour > a::before {
        mask-image: url(/cmn/icon2/trip.svg);
      }
      .link-button.dp {
        margin-top: 0;
        > a::before {
          mask-image: url(/cmn/icon2/pack.svg);
        }
      }
      .link-list {
        display: flex;
        flex-direction: column;
        gap: calc(16vw / 3.75);
        margin: calc(24vw / 3.75) auto 0;
        justify-content: center;
        > .link-button.tour {
          width: 100%;
          margin: 0;
        }
        .link-button.tour:empty {
          display: none;
        }
      }
    }

    .discount-content {
      border: var(--content-border-4) #f3e3b4;
      background: #fff;
      padding: calc(16vw / 3.75);
      display: grid;
      gap: calc(16vw / 3.75);
      .discount-title {
        font-size: 24px;
        font-weight: 900;
        color: var(--content-color-gold);
        text-align: center;
        > small {
          display: block;
          font-size: 14px;
          font-weight: bold;
        }
      }
      .discount-title.is-baggage {
        margin-top: calc(8vw / 3.75);
        padding-top: calc(24vw / 3.75);
        border-top: 1px dashed var(--content-color-gold);
      }
      .coupon-list {
        > li {
          display: grid;
          gap: calc(8vw / 3.75);
          background: var(--content-color-yellow);
          padding: calc(8vw / 3.75);
          border-radius: 2px;
          text-align: center;
          .coupon-title {
            font-size: 20px;
            font-weight: 900;
            .coupon-catch {
              display: block;
              font-size: 14px;
            }
          }
          .coupon-item {
            display: grid;
            gap: calc(4vw / 3.75);
          }
          .code-list {
            display: grid;
            gap: calc(16vw / 3.75);
          }
          .coupon-condition {
            font-size: 12px;
            font-weight: bold;
          }
          .coupon-price {
            font-size: 14px;
            font-weight: bold;
            > em {
              font-size: 30px;
              font-weight: 900;
              color: var(--content-color-red);
            }
          }
          .code-txt {
            background: #fff;
            padding: calc(4vw / 3.75);
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            display: flex;
            gap: calc(8vw / 3.75);
            justify-content: center;
            align-items: center;
            &::after {
              content: "";
              background: url(/cmn/icon2/content_copy.svg) var(--bg-img-setting);
              width: calc(16vw / 3.75);
              height: calc(16vw / 3.75);
              display: block;
            }
          }
          .msgBoard {
            display: none;
            font-size: 12px;
            font-weight: bold;
            color: var(--content-color-khaki);
          }
          .code-list {
            display: grid;
            gap: 16px;
            align-items: flex-start;
            > li {
              display: grid;
              grid-template-rows: subgrid;
              grid-row: span 4;
              gap: 4px;
              background: #fff;
              padding: 8px;
              > .code-txt {
                border: var(--content-border-1) #939dad;
              }
            }
          }
        }
      }
      .baggage-service-box {
        background: var(--content-color-yellow);
        padding: 8px;
        .baggage-title {
          font-size: 20px;
          font-weight: 900;
          text-align: center;
          padding-bottom: calc(8vw / 3.75);
          .baggage-catch {
            display: block;
            font-size: 14px;
          }
          > small {
            font-size: 12px;
          }
        }
        .baggage-txt {
          text-align: center;
          padding-bottom: calc(8vw / 3.75);
        }
        .baggage-service-list {
          background: #fff;
          padding: calc(4vw / 3.75);
          line-height: 1.5;
          > li > .is-bold {
            font-weight: bold;
          }
        }
      }
    }

    .caution-content {
      .caution-inbox {
        display: none;
        .caution-title {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          padding-bottom: calc(24vw / 3.75);
        }
        .caution-list {
          display: grid;
          gap: calc(24vw / 3.75);
          > li {
            .caution-midashi {
              font-weight: bold;
              padding-bottom: calc(4vw / 3.75);
            }
            .caution-data > li {
              font-size: 12px;
              line-height: 1.5;
              padding-left: 1em;
              text-indent: -1em;
            }
          }
        }
      }
      .accordion-button {
        width: 160px;
        margin: calc(24vw / 3.75) auto 0;
        border-radius: 100px;
        border: var(--content-border-1) #939dad;
        background: #fff;
        padding-block: 8px;
        text-align: center;
        cursor: pointer;
        > span {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: calc(4vw / 3.75);
          font-size: 14px;
          &::after {
            content: "";
            background: var(--bg-img-setting);
            background-image: url(/cmn/icon2/add_circle.svg);
            width: calc(16vw / 3.75);
            height: calc(16vw / 3.75);
            display: block;
          }
        }
      }
      .accordion-button.is-open {
        width: 90px;
        ::after {
          background-image: url(/cmn/icon2/cancel.svg);
        }
      }
    }
  }
}

/*** 札幌 ***/
.container.sapporo {
  padding-bottom: 64px;
  background: linear-gradient(180deg, #fff 65%, color-mix(in srgb, #66b0eb 80%, transparent 20%) 100%), url(../img/bgmv.webp);
  > .title-wrapper {
    height: auto !important;
    display: block;
    background: url(../img/bg_sapporo.webp) no-repeat center / cover;
    .title-box {
      height: 221px;
      display: flex;
      flex-direction: column;
      gap: calc(8vw / 3.75);
      justify-content: center;
      align-items: center;
    }
  }
  .select-tab {
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(8vw / 3.75);
    align-items: flex-end;
  }
  .select-tab > li {
    height: 106px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
    background: var(--content-color-gray);
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    cursor: pointer;
    > span {
      display: flex;
      flex-direction: column;
      gap: calc(4vw / 3.75);
      align-items: center;
      small {
        font-size: 16px;
      }
    }
    &.is-current {
      height: 114px;
      background: var(--content-color-gold600);
    }
    &:hover {
      background: var(--content-color-gold600);
    }
  }
  .select-wrapper {
    > .section-container {
      display: none;
      > .inner {
        display: grid;
        gap: calc(40vw / 3.75);
      }
    }
    > .section-container.is-active {
      display: block;
      background:
        url("../img/bghead_sapporo.webp") no-repeat center top / 100%,
        #fff;
      padding-block: calc(64vw / 3.75);
    }
  }

  .is-gourumet {
    .sub-title {
      color: var(--content-color-red);
      > .title-icon {
        background: var(--content-color-red);
      }
    }
  }
  .is-ice {
    .sub-title {
      color: var(--content-color-blue);
      > .title-icon {
        background: var(--content-color-blue);
      }
    }
    .ice-tour-items {
      display: grid;
      gap: calc(16vw / 3.75);
      .ice-tour-schedule {
        font-size: 16px;
        line-height: 1.5;
        > .is-blue {
          font-weight: bold;
          color: var(--content-color-blue);
        }
      }
    }
  }
  .sapporo-list {
    display: grid;
    gap: calc(16vw / 3.75);
    > li {
      padding: calc(16vw / 3.75);
      position: relative;
      .sapporo-list-img::before {
        content: "";
        background: var(--bg-img-setting);
        width: calc(196vw / 3.75);
        height: calc(46vw / 3.75);
        display: block;
        position: relative;
        margin: -4px auto;
      }
      .sapporo-list-box {
        padding: calc(16vw / 3.75) calc(8vw / 3.75);
        background: #fff;
        .sapporo-list-midashi {
          display: grid;
          text-align: center;
          line-height: 1.5;
          padding-bottom: calc(8vw / 3.75);
          .sapporo-list-name {
            font-size: 24px;
            font-weight: 900;
          }
          .sapporo-list-sub {
            font-size: 18px;
            font-weight: bold;
            color: var(--content-color-gold);
          }
        }
        .sapporo-list-txt {
          font-size: 16px;
          line-height: 1.8;
        }
      }
    }
  }
  .sapporo-list.gourmet > li {
    background:
      url(../img/bg_snow.webp) repeat,
      linear-gradient(to bottom, rgba(236 110 102 / 0%), rgba(236 110 102 / 100%));
    > .sapporo-list-box .sapporo-list-midashi {
      &::before {
        content: "HISオリジナル";
        background: var(--content-color-gold600);
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        text-align: center;
      }
      .sapporo-list-name {
        color: var(--content-color-red);
      }
    }
  }
  .sapporo-list.gourmet > li:first-child {
    .sapporo-list-img::before {
      background-image: url(../img/ico_ballon_gourmet1.svg);
    }
    .sapporo-list-box .sapporo-list-midashi::before {
      content: none;
    }
  }
  .sapporo-list.gourmet > li:nth-child(2) .sapporo-list-img::before {
    background-image: url(../img/ico_ballon_gourmet2.svg);
  }
  .sapporo-list.gourmet > li:last-child .sapporo-list-img::before {
    background-image: url(../img/ico_ballon_gourmet3.svg);
  }
  .special-content.is-bustour .special-title-sub,
  .special-content.is-bustour .special-midashi {
    color: var(--content-color-red);
  }

  .sapporo-list.ice > li {
    background:
      url(../img/bg_snow.webp) repeat,
      linear-gradient(to bottom, rgba(102 176 235 / 0%), rgba(102 176 235 / 100%));
    .sapporo-list-name {
      color: var(--content-color-blue);
    }
  }
  .sapporo-list.ice > li:first-child .sapporo-list-img::before {
    background-image: url(../img/ico_ballon_ryuhyo1.svg);
  }
  .sapporo-list.ice > li:nth-child(2) .sapporo-list-img::before {
    background-image: url(../img/ico_ballon_ryuhyo2.svg);
  }
  .sapporo-list.ice > li:last-child .sapporo-list-img::before {
    background-image: url(../img/ico_ballon_ryuhyo3.svg);
  }
  .ice-tokuten {
    background: var(--content-color-cream);
    display: grid;
    gap: calc(16vw / 3.75);
    align-items: flex-start;
    .ice-tokuten-img {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: calc(4vw / 3.75);
      > li > .tokuten-caption {
        display: block;
        background: #fff;
        font-size: 16px;
        font-weight: bold;
        color: var(--content-color-gold);
        text-align: center;
        padding: 0 calc(4vw / 3.75);
      }
    }
    .ice-tokuten-box {
      display: grid;
      gap: calc(8vw / 3.75);
      padding: calc(8vw / 3.75);
      align-items: flex-start;
      .ice-tokuten-catch {
        display: flex;
        justify-content: center;
        &::before,
        &::after {
          content: "";
          clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 0% 100%, 0% 0%);
          background: var(--content-color-gold600);
          display: block;
          width: 21px;
          height: 32px;
        }
        &::before {
          transform: scaleX(-1);
        }
        > span {
          display: block;
          background: var(--content-color-gold600);
          font-size: 16px;
          font-weight: 900;
          color: #fff;
          text-align: center;
          padding: calc(4vw / 3.75) calc(8vw / 3.75);
        }
      }
      .ice-tokuten-midashi {
        font-size: 16px;
        font-weight: 900;
        color: var(--content-color-blue);
      }
      .ice-tokuten-txt {
        font-size: 16px;
        line-height: 1.8;
        > .is-bold {
          font-weight: bold;
        }
      }
    }
  }
  .special-content.is-warmset .special-title-sub,
  .special-content.is-warmset .special-midashi {
    color: var(--content-color-blue);
  }
}

/*** 函館 ***/
.container.hakodate {
  background: linear-gradient(180deg, #fff 80%, color-mix(in srgb, #70c1c7 80%, transparent 20%) 100%), url(../img/bgmv.webp);
  .title-wrapper {
    background: url(../img/bg_hakodate.webp) no-repeat center / cover;
  }
  .section-container {
    background: url(../img/bghead_hakodate.webp) no-repeat center top / 100%;
    > .inner {
      display: flex;
      flex-direction: column;
      gap: calc(64vw / 3.75);
      .hakodate-wrapper {
        display: flex;
        flex-direction: column;
        gap: calc(40vw / 3.75);
        .sub-title {
          color: var(--content-color-lagoon);
        }
        .hakodate-tokuten {
          display: grid;
          gap: calc(16vw / 3.75);
          align-items: flex-start;
          .hakodate-tokuten-box {
            display: grid;
            gap: calc(16vw / 3.75);
            justify-items: center;
            .hakodate-tokuten-midashi {
              font-size: 16px;
              font-weight: 900;
              color: var(--content-color-gold);
              padding: 0 calc(18vw / 3.75) calc(8vw / 3.75);
              background: linear-gradient(to bottom, rgba(245 200 0 / 0%) 60%, rgba(245 200 0 / 50%) 60%);
            }
            .hakodate-tokuten-item {
              display: grid;
              gap: calc(16vw / 3.75);
              .hakodate-tokuten-txt {
                font-weight: bold;
                line-height: 1.8;
                > .is-bold {
                  color: var(--content-color-lagoon);
                }
              }
              .hakodate-tokuten-example {
                background: #cfeaec;
                padding: 16px;
                line-height: 1.5;
                .tokuten-example-midashi {
                  font-size: 16px;
                  font-weight: 900;
                  color: var(--content-color-lagoon);
                }
                .tokuten-example-list {
                  .is-midashi {
                    font-weight: bold;
                  }
                  .is-value {
                    font-weight: bold;
                    color: var(--content-color-red);
                  }
                }
              }
            }
          }
          .hakodate-tokuten-img {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: calc(4vw / 3.75);
            > li > img {
              width: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }
        .hotel-list {
          display: grid;
          gap: calc(16vw / 3.75);
          > li {
            background:
              url(../img/bg_snow.webp) repeat,
              linear-gradient(to bottom, rgba(112 193 199 / 0%), rgba(112 193 199 / 100%));
            padding: calc(16vw / 3.75);
            position: relative;
            &::after {
              content: "";
              background: var(--bg-img-setting);
              width: calc(110vw / 3.75);
              height: calc(50vw / 3.75);
              position: absolute;
              top: 0;
              left: 0;
              transform: rotate(-5deg);
            }
            .hotel-img {
              position: relative;
              .img-caption {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                background: var(--content-color-gold600);
                padding: 0 calc(4vw / 3.75);
                position: absolute;
                right: 0;
                bottom: 0;
              }
            }
            .hotel-box {
              background: #fff;
              padding: calc(16vw / 3.75) calc(8vw / 3.75);
              display: grid;
              gap: calc(16vw / 3.75);
              .hotel-midashi {
                font-size: 24px;
                font-weight: 900;
                color: var(--content-color-lagoon);
                text-align: center;
                padding-bottom: calc(8vw / 3.75);
              }
              .hotel-txt {
                line-height: 1.8;
              }
              .hotel-bf-box {
                display: grid;
                gap: calc(16vw / 3.75);
                align-items: flex-start;
                .hotel-bf-img > img {
                  width: 100%;
                  height: 143px;
                  object-fit: cover;
                  object-position: center;
                }
              }
              .hotel-bf-item {
                display: grid;
                gap: calc(8vw / 3.75);
                .hotel-bf-midashi {
                  display: flex;
                  gap: calc(8vw / 3.75);
                  align-items: center;
                  font-size: 18px;
                  font-weight: 900;
                  color: var(--content-color-lagoon);
                  &::before {
                    content: "";
                    background: var(--bg-img-setting) url(../img/ico_onecoin.svg);
                    width: calc(43vw / 3.75);
                    height: calc(52vw / 3.75);
                    display: block;
                    flex-shrink: 0;
                  }
                }
                .hotel-bf-txt {
                  line-height: 1.5;
                }
              }
            }
          }
          > li:first-child::after {
            background-image: url(../img/ico_ballon_hakodate1.svg);
          }
          > li:nth-child(2) {
            &::after {
              background-image: url(../img/ico_ballon_hakodate2.svg);
            }
            .hotel-box .hotel-bf-box .hotel-bf-item .hotel-bf-midashi::before {
              content: none;
            }
          }
          > li:nth-child(3)::after {
            background-image: url(../img/ico_ballon_hakodate3.svg);
          }
          > li:last-child::after {
            background-image: url(../img/ico_ballon_hakodate4.svg);
          }
        }
      }
    }
  }
}

/*** トマム ***/
.container.tomamu {
  background: linear-gradient(180deg, #fff 80%, color-mix(in srgb, #e4aaee, transparent 15%) 100%), url(../img/bgmv.webp);
  .title-wrapper {
    background: url(../img/bg_tomamu.webp) no-repeat center / cover;
  }
  .section-container {
    background: url(../img/bghead_tomamu.webp) no-repeat center top / 100%;
    > .inner {
      display: flex;
      flex-direction: column;
      gap: calc(64vw / 3.75);
      .tomamu-wrapper {
        display: flex;
        flex-direction: column;
        gap: calc(40vw / 3.75);
        .sub-title {
          color: var(--content-color-violet);
        }
        .tomamu-point-list {
          display: grid;
          gap: calc(16vw / 3.75);
          > li {
            background:
              url(../img/bg_snow.webp) repeat,
              linear-gradient(to bottom, rgba(228 170 238 / 0%), rgba(228 170 238 / 100%));
            padding: calc(16vw / 3.75);
            &::before {
              content: "";
              background: var(--bg-img-setting);
              width: calc(196vw / 3.75);
              height: calc(57.5vw / 3.75);
              display: block;
              position: relative;
              margin: -6px auto;
            }
            .tomamu-point-box {
              background: #fff;
              padding: calc(16vw / 3.75) calc(8vw / 3.75);
              display: grid;
              gap: calc(16vw / 3.75);
              .tomamu-point-title {
                display: grid;
                gap: calc(8vw / 3.75);
                .tomamu-point-midashi {
                  font-size: 24px;
                  font-weight: 900;
                  color: var(--content-color-violet);
                  text-align: center;
                  > span {
                    display: block;
                    font-size: 18px;
                    font-weight: bold;
                    color: var(--content-color-gold);
                  }
                }
                .tomamu-point-copy {
                  line-height: 1.8;
                }
              }
              .tomamu-point-item {
                display: grid;
                gap: calc(16vw / 3.75);
                .tomamu-point-img {
                  display: grid;
                  gap: calc(4vw / 3.75);
                  > img {
                    width: 100%;
                    height: 143px;
                    object-fit: cover;
                    object-position: center;
                  }
                }
                .tomamu-point-txt {
                  font-weight: bold;
                  line-height: 1.5;
                  display: grid;
                  gap: calc(8vw / 3.75);
                }
              }
            }
          }
          > li:first-child::before {
            background-image: url(../img/ico_ballon_tomamu1.svg);
          }
          > li:nth-child(2)::before {
            background-image: url(../img/ico_ballon_tomamu2.svg);
          }
          > li:last-child {
            .tomamu-point-box .special-list .special-box .special-midashi {
              color: var(--content-color-violet);
            }
            &::before {
              background-image: url(../img/ico_ballon_tomamu3.svg);
            }
          }
        }
        .special-content.is-tomamu .special-title-sub {
          color: var(--content-color-violet);
        }
      }
    }
  }
}

/* DP */
.container.dp {
  .title-wrapper {
    background: url(../img/bg_airHotel.webp) no-repeat center / cover;
  }
  .section-container > .inner {
    display: grid;
    gap: calc(64vw / 3.75);
    .dp-wrapper {
      .sub-title {
        color: var(--content-color-gold600);
      }
      .dp-point-list {
        display: grid;
        gap: calc(24vw / 3.75);
        align-items: flex-start;
        > li {
          display: grid;
          gap: calc(16vw / 3.75);
          align-items: flex-start;
          .dp-point-item {
            display: grid;
            gap: 8px;
            .dp-point-midashi {
              font-size: 18px;
              font-weight: 900;
              color: var(--content-color-gold600);
            }
            .dp-point-txt {
              line-height: 1.8;
            }
          }
        }
      }
    }
    .dp.product-wrapper {
      display: grid;
      gap: calc(40vw / 3.75);
      .dp-link-list {
        display: grid;
        gap: calc(16vw / 3.75);
        > li > a {
          display: block;
          width: 100%;
          background: var(--content-color-gold600);
          border-radius: 999px;
          padding-block: calc(12vw / 3.75);
          font-weight: bold;
          color: #fff;
          text-align: center;
          line-height: 1.5;
          position: relative;
          &::after {
            content: "";
            mask: var(--bg-img-setting) var(--content-arrow-right);
            background: #fff;
            width: calc(16vw / 3.75);
            height: calc(16vw / 3.75);
            position: absolute;
            top: 0;
            right: calc(16vw / 3.75);
            bottom: 0;
            margin: auto;
          }
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

/*** 特集バナー ***/
.container.foot {
  background:
    url(../img/bg_snow.webp) repeat,
    var(--content-color-gray);
  padding-block: calc(64vw / 3.75);
  .bnr-list {
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16vw / 3.75);
    > li {
      width: 100%;
    }
  }
}

/*** 検索 ***/
.container.search {
  padding-block: calc(64vw / 3.75);
  background: url("../img/bg_search.webp") no-repeat center / cover;
  .inner {
    width: 100vw;
    margin: auto;
  }
}