@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-sp,
.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: 525px;
  background: url("../img/bgmv.webp") no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .title-logo {
    width: 448px;
    background: #fff;
    border-radius: 30px;
    padding: 24px;
    margin: auto;
    text-align: center;
  }
}
.nav-wrapper {
  background: #fff;
  padding-block: 8px;
  .inner {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: center;
    .nav-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      li {
        a {
          display: block;
          border-radius: 8px;
          padding: 16px;
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          &:hover {
            background-color: var(--content-color-gold600);
            color: #fff;
          }
        }
      }
    }
    .display_selected {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 180px;
      height: 53px;
      background: #66b0eb;
      border-radius: 8px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      padding: 16px;
      &::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: 20px;
        height: 20px;
        display: block;
      }
    }
    .dep-select-zone {
      display: none;
      width: 180px;
      position: absolute;
      z-index: 50;
      background: #fff;
      .dep-select > li {
        padding: 4px;
        cursor: default;
        display: block;
        font-size: 14px;
        text-align: center;
        line-height: 1.5;
        &:hover,
        .selected {
          background: var(--content-color-blue);
          color: #fff;
        }
      }
      .close-button {
        display: none;
      }
    }
  }
}

/***** メインコンテンツ *****/
.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: 36px;
        }
        .head-title {
          font-size: 56px;
        }
      }
    }
    .sub-title {
      display: grid;
      gap: 8px;
      justify-items: center;
      font-size: 40px;
      font-weight: 900;
      text-align: center;
      > .title-icon {
        font-size: 24px;
        color: #fff !important;
        padding: 4px 8px;
      }
      > .sub-title-catch {
        font-size: 26px;
        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: 64px;
    }
    .main-content {
      display: grid;
      gap: 24px;
    }
    .campaign-box {
      background: var(--content-color-cream);
      padding: 16px;
      font-size: 20px;
      font-weight: 900;
      color: var(--content-color-gold);
      text-align: center;
      > span {
        display: block;
        font-size: 14px;
        font-weight: normal;
      }
    }
    .special-content {
      display: grid;
      gap: 24px;
      .special-title-box {
        text-align: center;
        font-weight: 900;
        .special-title-aori {
          display: flex;
          justify-content: center;
          > span {
            font-size: 24px;
            color: var(--content-color-gold);
          }
          &::before,
          &::after {
            content: "/";
            font-size: 24px;
            color: var(--content-color-gold);
            display: block;
          }
          &::before {
            transform: scaleX(-1);
          }
        }
        .special-title-sub {
          font-size: 24px;
        }
        .special-titme-main {
          font-size: 28px;
        }
      }
    }
    .special-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      > li {
        display: grid;
        grid-template-columns: 183px 1fr;
        gap: 16px;
        align-items: flex-start;
        .special-img {
          position: relative;
          .course-icon {
            background: var(--content-color-gold600);
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            padding: 0 4px;
            position: absolute;
            top: 0;
            left: 0;
          }
          > img {
            width: 100%;
            height: 183px;
            object-fit: cover;
            object-position: center;
          }
        }
        .special-box {
          display: grid;
          gap: 8px;
          line-height: 1.5;
          .special-midashi {
            font-size: 20px;
            font-weight: 900;
          }
          .special-price-txt {
            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: 750px;
      margin: auto;
    }
    .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: 24px;
        height: 24px;
        display: block;
      }
      > a {
        font-size: 16px;
        font-weight: bold;
        color: var(--content-color-link);
        text-decoration: underline;
      }
    }
    .caption {
      display: block;
      font-size: 12px;
      text-align: right;
    }
    .product-wrapper {
      display: grid;
      gap: 40px;
      .product-title {
        font-size: 32px;
        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: 467px;
        margin: 24px auto 0;
        > a {
          display: flex;
          gap: 16px;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          background: var(--content-color-gold600);
          padding: 16px;
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          text-align: center;
          &::before,
          &::after {
            content: "";
            display: block;
            mask: var(--bg-img-setting);
            background: #fff;
            width: 24px;
            height: 24px;
          }
          &::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 > a::before {
        mask-image: url(/cmn/icon2/pack.svg);
      }
      .link-list {
        display: flex;
        gap: 16px;
        margin: 24px auto 0;
        justify-content: center;
        > .link-button.tour {
          width: calc((100% - 16px) / 2);
          margin: 0;
        }
        .link-button.tour:empty {
          display: none;
        }
      }
    }

    .discount-content {
      border: var(--content-border-4) #f3e3b4;
      background: #fff;
      padding: 24px;
      display: grid;
      gap: 16px;
      .discount-title {
        font-size: 26px;
        font-weight: 900;
        color: var(--content-color-gold);
        text-align: center;
        > small {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .discount-title.is-baggage {
        margin-top: 8px;
        padding-top: 24px;
        border-top: 1px dashed var(--content-color-gold);
      }
      .coupon-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        > li {
          display: grid;
          gap: 8px;
          background: var(--content-color-yellow);
          padding: 8px;
          border-radius: 2px;
          text-align: center;
          .coupon-title {
            font-size: 30px;
            font-weight: 900;
            .coupon-catch {
              font-size: 20px;
            }
          }
          .code-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
          }
          .coupon-condition {
            font-size: 14px;
            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: 4px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            display: flex;
            gap: 4px;
            justify-content: center;
            align-items: center;
            &::after {
              content: "";
              background: url(/cmn/icon2/content_copy.svg) var(--bg-img-setting);
              width: 16px;
              height: 16px;
              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;
              }
            }
          }
        }
      }
      .coupon-list.is-one {
        grid-template-columns: auto;
      }
      .baggage-service-box {
        background: var(--content-color-yellow);
        padding: 8px;
        .baggage-title {
          font-size: 30px;
          font-weight: 900;
          text-align: center;
          padding-bottom: 16px;
          .baggage-catch {
            font-size: 20px;
          }
          > small {
            font-size: 16px;
          }
        }
        .baggage-txt {
          font-size: 14px;
          text-align: center;
          padding-bottom: 8px;
        }
        .baggage-service-list {
          background: #fff;
          padding: 4px;
          line-height: 1.5;
          > li {
            font-size: 14px;
            > .is-bold {
              font-weight: bold;
            }
          }
        }
      }
    }

    .caution-content {
      .caution-inbox {
        display: none;
        .caution-title {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          padding-bottom: 24px;
        }
        .caution-list {
          display: grid;
          gap: 24px;
          > li {
            .caution-midashi {
              font-weight: bold;
              padding-bottom: 4px;
            }
            .caution-data > li {
              font-size: 12px;
              line-height: 1.5;
              padding-left: 1em;
              text-indent: -1em;
            }
          }
        }
      }
      .accordion-button {
        width: 160px;
        margin: 24px auto 0;
        border-radius: 32px;
        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: 4px;
          font-size: 14px;
          &::after {
            content: "";
            background: var(--bg-img-setting);
            background-image: url(/cmn/icon2/add_circle.svg);
            width: 16px;
            height: 16px;
            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 60%, 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: 240px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
      align-items: center;
    }
  }
  .select-tab {
    width: var(--content-width);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: flex-end;
  }
  .select-tab > li {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
    background: var(--content-color-gray);
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    cursor: pointer;
    > span {
      display: flex;
      gap: 4px;
      align-items: center;
      small {
        font-size: 18px;
      }
    }
    &.is-current {
      height: 96px;
      background: var(--content-color-gold600);
    }
    &:hover {
      background: var(--content-color-gold600);
    }
  }
  .select-wrapper {
    > .section-container {
      display: none;
      > .inner {
        display: grid;
        gap: 40px;
      }
    }
    > .section-container.is-active {
      display: block;
      background:
        url("../img/bghead_sapporo.webp") no-repeat center top / 100%,
        #fff;
      padding-block: 64px;
    }
  }

  .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: 16px;
      .ice-tour-schedule {
        font-size: 20px;
        line-height: 1.5;
        > .is-blue {
          font-weight: bold;
          color: var(--content-color-blue);
        }
      }
    }
  }
  .sapporo-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    > li {
      display: grid;
      gap: 0;
      grid-template-rows: subgrid;
      grid-row: span 2;
      padding: 24px;
      position: relative;
      .sapporo-list-img::before {
        content: "";
        background: var(--bg-img-setting);
        width: 280px;
        height: 82px;
        display: block;
        position: relative;
        margin: -6px auto;
      }
      .sapporo-list-box {
        padding: 8px;
        background: #fff;
        .sapporo-list-midashi {
          display: grid;
          text-align: center;
          line-height: 1.5;
          padding-bottom: 8px;
          .sapporo-list-name {
            font-size: 28px;
            font-weight: 900;
          }
          .sapporo-list-sub {
            font-size: 24px;
            font-weight: bold;
            color: var(--content-color-gold);
          }
        }
        .sapporo-list-txt {
          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);
    padding: 24px;
    display: grid;
    grid-template-columns: 536px 1fr;
    gap: 16px;
    align-items: flex-start;
    .ice-tokuten-img {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      > li > .tokuten-caption {
        display: block;
        background: #fff;
        font-size: 24px;
        font-weight: bold;
        color: var(--content-color-gold);
        text-align: center;
        padding: 0 4px;
      }
    }
    .ice-tokuten-box {
      display: grid;
      gap: 8px;
      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: 44px;
        }
        &::before {
          transform: scaleX(-1);
        }
        > span {
          display: block;
          background: var(--content-color-gold600);
          font-size: 24px;
          font-weight: 900;
          color: #fff;
          text-align: center;
          padding: 4px 8px;
        }
      }
      .ice-tokuten-midashi {
        font-size: 24px;
        font-weight: 900;
        color: var(--content-color-blue);
        text-align: center;
      }
      .ice-tokuten-txt {
        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: grid;
      gap: 64px;
      .hakodate-wrapper {
        display: grid;
        gap: 40px;
        .sub-title {
          color: var(--content-color-lagoon);
        }
        .hakodate-tokuten {
          display: grid;
          grid-template-columns: 1fr 478px;
          gap: 16px;
          align-items: flex-start;
          .hakodate-tokuten-box {
            display: grid;
            gap: 16px;
            justify-items: center;
            .hakodate-tokuten-midashi {
              font-size: 26px;
              font-weight: 900;
              color: var(--content-color-gold);
              padding: 0 20px 8px;
              background: linear-gradient(to bottom, rgba(245 200 0 / 0%) 60%, rgba(245 200 0 / 50%) 60%);
            }
            .hakodate-tokuten-txt {
              font-size: 18px;
              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: 18px;
                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: 4px;
            > li > img {
              width: 100%;
              height: 340px;
              object-fit: cover;
              object-position: center;
            }
          }
        }
        .hotel-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          > li {
            background:
              url(../img/bg_snow.webp) repeat,
              linear-gradient(to bottom, rgba(112 193 199 / 0%), rgba(112 193 199 / 100%));
            padding: 24px;
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
            gap: 0;
            position: relative;
            &::after {
              content: "";
              background: var(--bg-img-setting);
              width: 157px;
              height: 62px;
              position: absolute;
              top: 0;
              left: 0;
              transform: rotate(-5deg);
            }
            .hotel-img {
              position: relative;
              .img-caption {
                font-size: 18px;
                font-weight: bold;
                color: #fff;
                background: var(--content-color-gold600);
                padding: 0 4px;
                position: absolute;
                right: 0;
                bottom: 0;
              }
            }
            .hotel-box {
              background: #fff;
              padding: 16px;
              display: grid;
              gap: 16px;
              .hotel-midashi {
                font-size: 28px;
                font-weight: 900;
                color: var(--content-color-lagoon);
                text-align: center;
                padding-bottom: 8px;
              }
              .hotel-txt {
                line-height: 1.8;
              }
              .hotel-bf-box {
                display: grid;
                grid-template-columns: 165px 1fr;
                gap: 16px;
                align-items: flex-start;
                .hotel-bf-img > img {
                  width: 100%;
                  height: 165px;
                  object-fit: cover;
                  object-position: center;
                }
              }
              .hotel-bf-item {
                display: grid;
                gap: 8px;
                .hotel-bf-midashi {
                  display: flex;
                  gap: 8px;
                  align-items: center;
                  font-size: 20px;
                  font-weight: 900;
                  color: var(--content-color-lagoon);
                  &::before {
                    content: "";
                    background: var(--bg-img-setting) url(../img/ico_onecoin.svg);
                    width: 43px;
                    height: 52px;
                    display: block;
                    flex-shrink: 0;
                  }
                }
                .hotel-bf-txt {
                  font-size: 14px;
                  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: grid;
      gap: 64px;
      .tomamu-wrapper {
        display: grid;
        gap: 40px;
        .sub-title {
          color: var(--content-color-violet);
        }
        .tomamu-point-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          > li {
            background:
              url(../img/bg_snow.webp) repeat,
              linear-gradient(to bottom, rgba(228 170 238 / 0%), rgba(228 170 238 / 100%));
            padding: 24px;
            &::before {
              content: "";
              background: var(--bg-img-setting);
              width: 280px;
              height: 82px;
              display: block;
              position: relative;
              margin: -6px auto;
            }
            .tomamu-point-box {
              background: #fff;
              padding: 16px;
              display: grid;
              gap: 16px;
              .tomamu-point-title {
                display: grid;
                gap: 8px;
                .tomamu-point-midashi {
                  font-size: 28px;
                  font-weight: 900;
                  color: var(--content-color-violet);
                  text-align: center;
                  > span {
                    display: block;
                    font-size: 24px;
                    font-weight: bold;
                    color: var(--content-color-gold);
                  }
                }
                .tomamu-point-copy {
                  line-height: 1.8;
                }
              }
              .tomamu-point-item {
                display: grid;
                grid-template-columns: 165px 1fr;
                gap: 16px;
                align-items: flex-start;
                .tomamu-point-img {
                  display: grid;
                  gap: 4px;
                  > img {
                    width: 100%;
                    height: 165px;
                    object-fit: cover;
                    object-position: center;
                  }
                }
                .tomamu-point-txt {
                  font-weight: bold;
                  line-height: 1.5;
                  display: grid;
                  gap: 8px;
                }
              }
            }
          }
          > 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 {
            grid-template-columns: subgrid;
            grid-column: span 2;
            .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: 64px;
    .dp-wrapper {
      .sub-title {
        color: var(--content-color-gold600);
      }
      .dp-point-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: flex-start;
        > li {
          display: grid;
          grid-template-columns: 264px 1fr;
          gap: 16px;
          align-items: flex-start;
          .dp-point-item {
            display: grid;
            gap: 8px;
            .dp-point-midashi {
              font-size: 20px;
              font-weight: 900;
              color: var(--content-color-gold600);
            }
            .dp-point-txt {
              line-height: 1.8;
            }
          }
        }
      }
    }
    .dp.product-wrapper {
      display: grid;
      gap: 40px;
      .dp-link-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        > li > a {
          display: block;
          width: 100%;
          background: var(--content-color-gold600);
          border-radius: 999px;
          padding-block: 16px;
          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: 24px;
            height: 24px;
            position: absolute;
            top: 0;
            right: 16px;
            bottom: 0;
            margin: auto;
          }
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

/*** 特集バナー ***/
.container.foot {
  background:
    url(../img/bg_snow.webp) repeat,
    var(--content-color-gray);
  padding-block: 64px;
  .bnr-list {
    margin: 0 !important;
  }
}

/*** 検索 ***/
.container.search {
  padding-block: 64px;
  background: url("../img/bg_search.webp") no-repeat center / cover;
  > .inner {
    width: min(var(--content-width), 992px);
    margin: auto;
  }
}

@media (769px <= width <= 1103px) {
  .is-pc {
    display: none;
  }
  .is-tb {
    display: block;
  }
  .nav-wrapper .inner {
    width: 100vw;
    display: flex;
    gap: 16px;
    justify-content: center;
    .nav-list {
      gap: 16px;
      li {
        a {
          padding: 16px 8px;
          font-size: 16px;
        }
      }
    }
  }
  .main-container {
    .container {
      .title-wrapper {
        .title-box .head-title {
          font-size: 50px;
        }
      }
      .sub-title {
        font-size: 36px;
      }
      .bodycopy {
        font-size: 16px;
      }
      .special-list:not(.is-one) {
        > li {
          grid-template-columns: auto;
          grid-template-rows: subgrid;
          grid-row: span 2;
          gap: 8px;
        }
      }
      .special-list.is-one {
        width: 100%;
      }
    }
  }

  /*** 札幌 ***/
  .container.sapporo {
    .sapporo-list {
      > li {
        padding: 16px;
        .sapporo-list-img::before {
          width: 100%;
        }
        .sapporo-list-box {
          .sapporo-list-midashi {
            .sapporo-list-name {
              font-size: 22px;
            }
            .sapporo-list-sub {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  /*** 函館 ***/
  .container.hakodate {
    .section-container {
      > .inner {
        .hakodate-wrapper {
          .hakodate-tokuten {
            grid-template-columns: repeat(2, 1fr);
            .hakodate-tokuten-box {
              .hakodate-tokuten-midashi {
                font-size: 22px;
                padding: 0 8px 8px;
              }
              .hakodate-tokuten-item {
                display: grid;
                gap: 4px;
                .hakodate-tokuten-txt {
                  font-size: 16px;
                  line-height: 1.5;
                }
                .hakodate-tokuten-example {
                  padding: 8px;
                  .tokuten-example-midashi {
                    font-size: 16px;
                  }
                }
              }
            }
            .hakodate-tokuten-img {
              grid-template-columns: auto;
              > li > img {
                height: 180px;
              }
            }
          }
          .hotel-list {
            > li {
              padding: 16px;
              .hotel-box {
                .hotel-midashi {
                  font-size: 22px;
                }
                .hotel-txt {
                  line-height: 1.5;
                }
                .hotel-bf-box {
                  grid-template-columns: auto;
                  .hotel-bf-item {
                    .hotel-bf-midashi {
                      font-size: 18px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /*** トマム ***/
  .container.tomamu {
    .section-container {
      > .inner {
        .tomamu-wrapper {
          .tomamu-point-list {
            > li {
              padding: 16px;
              .tomamu-point-box {
                .tomamu-point-title {
                  .tomamu-point-midashi {
                    font-size: 22px;
                    > span {
                      font-size: 16px;
                    }
                  }
                  .tomamu-point-copy {
                    line-height: 1.5;
                  }
                }
                .tomamu-point-item {
                  grid-template-columns: auto;
                }
              }
            }
          }
        }
      }
    }
  }

  /*** DP ***/
  .container.dp {
    .section-container > .inner {
      .dp-wrapper {
        .dp-point-list {
          > li {
            grid-template-columns: auto;
          }
        }
      }
      .dp.product-wrapper {
        .dp-link-list {
          > li > a {
            padding-block: 8px;
            &::after {
              right: 8px;
            }
          }
        }
      }
    }
  }
}
@media (769px <= width <= 1024px) {
  .container.sapporo {
    .ice-tokuten {
      grid-template-columns: auto;
      .ice-tokuten-img {
        width: 400px;
        margin: auto;
        > li > .tokuten-caption {
          font-size: 14px;
        }
      }
    }
  }
}
@media (1025px <= width <= 1103px) {
  .container.sapporo {
    .ice-tokuten {
      display: grid;
      grid-template-columns: 400px 1fr;
      .ice-tokuten-img > li > .tokuten-caption {
        font-size: 18px;
      }
    }
  }
}