@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  container-type: inline-size;
}
.mv {
  position: relative;
  height: var(--mv-size-h);
  background: var(--mv-bg) no-repeat center center / auto 100%;
  .is-size-sp & {
    --mv-max-width-val: 375;
    --mv-size-h: calc((565 / var(--mv-max-width-val)) * 100cqw);
    --mv-bg: url(../images/mv_bg_sp.webp);
    .mv__logo {
      width: calc((288 / var(--mv-max-width-val)) * 100cqw);
      padding-top: calc((48 / var(--mv-max-width-val)) * 100cqw);
      margin-inline: auto;
    }
  }
  .is-size-pc & {
    --mv-max-width-val: 1280;
    --mv-size-h: calc((500 / var(--mv-max-width-val)) * 100cqw);
    --mv-bg: url(../images/mv_bg_pc.webp);
    @container (width > 1280px) {
      --mv-size-h: 500px;
      background:
        var(--mv-bg) no-repeat center center / auto 100%,
        url(../images/mv_bg_wide_pc.webp) no-repeat center center / var(--default-bg-width-pc);
    }
    .mv__inner {
      max-width: 1280px;
      margin-inline: auto;
      container-type: inline-size;
    }
    .mv__logo {
      width: calc((456 / var(--mv-max-width-val)) * 100cqw);
      padding-top: calc((85 / var(--mv-max-width-val)) * 100cqw);
      margin-inline: auto calc((225 / var(--mv-max-width-val)) * 100cqw);
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
#mainArea {
  background:
    url(../images/main_line.webp) repeat-x center top / 120px,
    linear-gradient(180deg, #00a3f4 0%, #88e5f8 4.33%, #eaecc6 100%);
}
/*contents__inner*/
.contents__inner {
  width: var(--default-width);
  margin: auto;
}
/*section*/
.section {
  padding-block: clamp(50px, (50vw / 3.75), 80px);
  &:where(#staff, #voice) {
    background: #fff7ca;
  }
  &:has(.splide) {
    .section__inner {
      width: 100%;
    }
  }
  .section__inner {
    width: var(--default-width);
    margin: auto;
  }
}
/*section-title and subtitle*/
.section-title,
.section-subtitle {
  font-weight: var(--default-font-weight-bold);
  text-align: center;
  .base-title__inner {
    display: grid;
  }
}
.section-title {
  margin-bottom: var(--default-gap-section-gap);
  .section:has(.section-lead) & {
    margin-bottom: var(--default-gap-8-4);
  }
  .base-title__main-text {
    font-size: var(--default-font-size-section-title);
    color: var(--default-color-pink);
  }
  #point & {
    .base-title__sub-text {
      --base-title-font-size: clamp(20px, (20vw / 3.75), 32px);
      --base-title-font-bg: var(--default-color-yellow);
      --base-title-font-color: var(--default-color-right-blue);
      --base-title-font-bg-stroke: 6px;
      --base-title-font-shadow-posi: 0 4px;
    }
    .base-title__main-text {
      --base-title-font-size: clamp(28px, (28vw / 3.75), 36px);
      --base-title-font-bg: #e96566;
      --base-title-font-bg-stroke: 10px;
      --base-title-font-color: var(--default-color-yellow);
      --base-title-font-shadow-posi: 2px 5px;
    }
    .base-title__sub-text,
    .base-title__main-text {
      font-size: var(--base-title-font-size);
      .base-title__sub-text--inner,
      .base-title__main-text--inner {
        display: block;
        position: relative;
        &::before {
          content: attr(data-text);
          color: rgba(0, 0, 0, 0.1);
          background: currentColor;
          position: absolute;
          inset: 0;
          z-index: 0;
          translate: var(--base-title-font-shadow-posi);
        }
        .base-title__sub-text--item,
        .base-title__main-text--item {
          position: relative;
          z-index: 1;
          color: var(--base-title-font-color);
          background: var(--base-title-font-bg);
        }
        &::before,
        .base-title__main-text--item {
          line-height: var(--default-font-lh-120);
          height: 1.25em;
        }
        &::before,
        .base-title__sub-text--item,
        .base-title__main-text--item {
          display: block;
          /* 背景を「文字の輪郭」として切り抜く */
          -webkit-background-clip: text;
          background-clip: text;

          /* 輪郭線を透明にして、背景のグラデーションを透けさせる */
          -webkit-text-stroke: var(--base-title-font-bg-stroke) transparent;

          /* 内側の黄色を維持するための「重ね塗り」 */
          /* text-shadowを使って内側を塗りつぶすか、擬似要素を使います */
          paint-order: stroke fill;
        }
      }
    }
  }
  #support & {
    .base-title__main-text--item {
      display: block;
      color: var(--default-color-yellow);
      background: var(--default-color-primary);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-stroke: 6px transparent;
      paint-order: stroke fill;
    }
  }
}
.section-subtitle {
  margin-bottom: var(--default-gap-section-gap);
  .base-title__main-text {
    font-size: var(--default-font-size-32-24);
  }
}
/*section-lead*/
.section-lead {
  font-size: var(--default-font-size-20-16);
  font-weight: var(--default-font-weight-bold);
  color: var(--default-color-primary);
  margin-bottom: var(--default-gap-section-gap);
  text-align: center;
}
/*lead*/
#lead {
  padding-top: clamp(50px, (50vw / 3.75), 80px);
  + .section {
    padding-top: var(--default-gap-32-24);
  }
  .lead-image {
    width: var(--lead-image-size-w, clamp(190px, (190vw / 3.75), (190px * 2)));
    margin-inline: auto;
    .is-size-pc & {
      --lead-image-size-w: 529px;
    }
    &:not(:last-child) {
      margin-bottom: 16px;
    }
  }
  .lead-text {
    color: var(--default-color-white);
    text-align: center;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    font-size: var(--default-font-size-16);
    line-height: 1.6;
    font-weight: var(--default-font-weight-bold);
  }
}
/*point*/
#point {
  .section__inner {
    width: var(--default-width2);
    .is-size-pc & {
      position: relative;
      --point-section-inner-kazari-posi-x: -78px;
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 60px;
        width: 137px;
        height: 69px;
        background: url(../images/point_parts/point_kazari.webp) no-repeat center center / contain;
      }
      &::before {
        rotate: 8.825deg;
        left: var(--point-section-inner-kazari-posi-x);
      }
      &::after {
        rotate: -8.825deg;
        scale: -1 1;
        right: var(--point-section-inner-kazari-posi-x);
      }
    }
  }
  .section-title {
    .base-title__main-text {
      container-type: inline-size;
      display: grid;
      justify-content: center;
      align-items: center;
      grid-template-columns: repeat(3, auto);
      grid-template-areas:
        'kazari1 ttl1 kazari2'
        'kazari1 ttl2 kazari2';
      --section-title-kazari-posi: 2px;
      .base-title__main-text--inner {
        position: relative;
        z-index: 1;
        &:nth-child(1) {
          grid-area: ttl1;
        }
        &:nth-child(2) {
          grid-area: ttl2;
          &::before,
          .base-title__main-text--item {
            padding-left: calc(var(--base-title-font-bg-stroke) / 2);
            margin-left: calc((var(--base-title-font-bg-stroke) / 2) * -1);
          }
        }
      }
      &::before {
        grid-area: kazari1;
        translate: var(--section-title-kazari-posi) 0;
      }
      &::after {
        grid-area: kazari2;
        translate: calc(var(--section-title-kazari-posi) * -1) 0;
        scale: -1 1;
      }
      &::before,
      &::after {
        content: '';
        display: block;
        width: min((51.75vw / 3.75), 92px);
        height: auto;
        aspect-ratio: 92 / 88;
        background: url(../images/point_parts/point_ttl_kazari.svg) no-repeat center center / contain;
      }
      @container (width > 600px) {
        grid-template-columns: repeat(4, auto);
        grid-template-areas: 'kazari1 ttl1 ttl2 kazari2';
        --section-title-kazari-posi: 4px;
        margin-top: clamp(-16px, (-16vw / 3.75), -20px);
        .base-title__main-text--inner {
          &:nth-child(1) {
            &::before,
            .base-title__main-text--item {
              padding-inline: var(--base-title-font-bg-stroke) calc(var(--base-title-font-bg-stroke) / 2);
            }
          }
          &:nth-child(2) {
            &::before,
            .base-title__main-text--item {
              padding-right: calc(var(--base-title-font-bg-stroke) / 1.5);
              margin-left: calc(var(--base-title-font-bg-stroke) * -1);
            }
          }
        }
      }
    }
  }
  .point-navi__lineup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--default-gap-16-12);
    justify-content: center;
    padding-inline: 5px;
    .point-navi__lineup--item {
      width: min((110vw / 3.75), 180px);
    }
    .point-navi__lineup--item--link {
      display: block;
      position: relative;
    }
    .point-navi__lineup--item--image {
      &.is-on {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      transition: var(--default-transition-opacity);
    }
  }
  .point-lineup {
    width: var(--default-width);
    margin-inline: auto;
    container-type: inline-size;
    --point-inline-size-val: var(--default-width-sp-val);
    .is-size-pc & {
      --point-inline-size-val: var(--default-width-pc-val);
    }
    .point-lineup__item {
      --point-lineup-item-gap: calc((32 / var(--point-inline-size-val)) * 100cqw); /*--default-gap-section-gapをcqwに変更中*/
      padding-top: calc((80 / var(--point-inline-size-val)) * 100cqw); /*120-80はcqwに変更中*/
      .is-size-pc & {
        --point-lineup-item-gap: calc((40 / var(--point-inline-size-val)) * 100cqw);
        padding-top: calc((120 / var(--point-inline-size-val)) * 100cqw);
      }
    }
    .point-lineup__item--inner {
      position: relative;
      border-radius: 24px;
      background: var(--default-color-white);
      padding: calc((48 / var(--point-inline-size-val)) * 100cqw) calc((20 / var(--point-inline-size-val)) * 100cqw); /*64-48 and 24-20はcqwに変更中*/
      .is-size-pc & {
        border-radius: 32px;
        padding: calc((64 / var(--point-inline-size-val)) * 100cqw) calc((24 / var(--point-inline-size-val)) * 100cqw);
      }
    }
    .point-lineup__item--titles {
      margin-bottom: var(--default-gap-section-gap);
      .point-lineup__item--title-icon {
        width: clamp(68.8px, (68.8vw / 3.75), 91.7px);
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% -50%;
      }
      .point-lineup__item--main-title {
        font-weight: var(--default-font-weight-bold);
        text-align: center;
        .base-title__inner {
          display: grid;
        }
        .base-title__sub-text {
          color: var(--default-color-pink);
          font-size: var(--default-font-size-26-18);
        }
        .base-title__main-text {
          color: var(--default-color-right-blue);
          text-align: center;
          font-size: var(--default-font-size-36-28);
          line-height: var(--default-font-lh-120);
        }
      }
    }
    .point-lineup__item--main-detail {
      display: grid;
      gap: var(--default-gap-section-gap) var(--default-gap-24-20);
      justify-items: center;
      .is-size-pc & {
        --point-lineup-item-main-detail-img-size-w: calc((860 / var(--point-inline-size-val)) * 100cqw);
        .point-lineup__item--main-detail--image {
          width: var(--point-lineup-item-main-detail-img-size-w);
        }
      }
      &:not(:has(.point-lineup__item--main-detail--more)) {
        .point-lineup__item--main-detail--texts {
          row-gap: var(--default-gap-section-gap);
        }
        .point-lineup__item--main-detail--lead {
          text-align: center;
        }
        .point-lineup__item--main-detail--notes {
          justify-self: end;
        }
      }
      &:has(.point-lineup__item--main-detail--image):has(.point-lineup__item--main-detail--more) {
        .is-size-pc & {
          grid-template-columns: 1fr auto;
          --point-lineup-item-main-detail-img-size-w: calc((516 / var(--point-inline-size-val)) * 100cqw);
        }
        .is-size-sp & {
          .point-lineup__item--main-detail--image {
            order: -1;
          }
        }
      }
      .point-lineup__item--main-detail--texts {
        display: grid;
        gap: var(--default-gap-8-4);
      }
      .point-lineup__item--main-detail--lead {
        font-size: var(--default-font-size-20-16);
        font-weight: var(--default-font-weight-bold);
        color: var(--default-color-pink);
      }
      .point-lineup__item--main-detail--notes {
        display: grid;
        gap: var(--default-gap-8-4);
      }
      .point-lineup__item--main-detail--more {
        padding: var(--default-gap-24-20) var(--default-gap-16-12);
        border-radius: var(--default-radius-8);
        background: var(--default-color-pare-orange);
        .point-lineup__item--main-detail--more--title {
          color: var(--default-color-white);
          border-radius: var(--default-radius-4);
          background: var(--default-color-orange);
          padding: var(--default-gap-4-2) var(--default-gap-16-12);
          font-size: var(--default-font-size-16);
          font-weight: var(--default-font-weight-bold);
          margin-bottom: 12px;
          .base-title__inner {
            display: grid;
            grid-template-columns: repeat(3, auto);
            gap: 0.5em;
            justify-content: start;
            align-items: center;
            .is-size-sp & {
              justify-content: center;
              text-align: center;
            }
            &::before,
            &&::after {
              content: '';
              width: 0.75em;
              height: 0.75em;
              background: currentColor;
              border-radius: 2px;
              rotate: 45deg;
            }
          }
        }
        .point-lineup__item--main-detail--more--links {
          text-align: right;
          margin-top: clamp(8px, (8vw / 3.75), 16px);
        }
        .point-lineup__item--main-detail--more--list--inner {
          display: grid;
          grid-template-columns: 80px 1fr;
          align-items: center;
          font-size: var(--default-font-size-14);
          &:not(:first-child) {
            padding-top: var(--default-gap-4-2);
          }
          &:not(:last-child) {
            border-bottom: 1px dashed var(--default-color-notice);
            padding-bottom: var(--default-gap-8-4);
          }
          &:first-child {
            .point-lineup__item--main-detail--more--list--text {
              font-weight: var(--default-font-weight-bold);
            }
          }
        }
        .point-lineup__item--main-detail--more--list--notes {
          --notes-item-font-color: var(--default-color-font-black);
        }
      }
    }
    .point-lineup__item--tokuten {
      border-radius: var(--default-radius-8);
      background: #fbe8d3;
      margin-top: var(--default-gap-section-gap);
      .point-lineup__item--tokuten--inner {
        display: grid;
        gap: var(--default-gap-24-20);
        .is-size-sp & {
          padding: calc((12 / var(--point-inline-size-val)) * 100cqw) calc((20 / var(--point-inline-size-val)) * 100cqw);
          .point-lineup__item--tokuten--image {
            order: -1;
          }
        }
        .is-size-pc & {
          padding-block: 24px;
          padding-inline: calc((64 / var(--point-inline-size-val)) * 100cqw) calc((32 / var(--point-inline-size-val)) * 100cqw);
          grid-template-columns: 1fr auto;
          align-items: start;
          align-content: start;
          .point-lineup__item--tokuten--image {
            width: calc((375 / var(--point-inline-size-val)) * 100cqw);
          }
        }
      }
      .point-lineup__item--tokuten--texts {
        --point-lineup-item-tokuten-text-gap: var(--default-gap-8-4);
        display: grid;
        gap: var(--point-lineup-item-tokuten-text-gap);
      }
      .point-lineup__item--tokuten--title {
        color: #e88121;
        font-weight: var(--default-font-weight-bold);
        .base-title__inner {
          display: grid;
          gap: var(--point-lineup-item-tokuten-text-gap);
          .base-title__sub-text {
            font-size: var(--default-font-size-26-18);
          }
          .base-title__main-text {
            font-size: var(--default-font-size-32-24);
          }
        }
      }
      .point-lineup__item--tokuten--text {
        color: #6c2900;
      }
    }
    .point-lineup__item--slider {
      margin-top: var(--default-gap-section-gap);
      .splide__arrow {
        --slider-arrow-icon-posi-x: calc((var(--slider-arrow-size) + 10px) * -1);
      }
      .point-lineup__item--slider--title {
        background: var(--default-color-light-green);
        border-radius: var(--default-radius-button);
        text-align: center;
        font-size: 20px;
        color: var(--default-color-white);
        font-weight: var(--default-font-weight-bold);
        padding: var(--default-gap-4-2) min(((40 / var(--point-inline-size-val)) * 100cqw), 70px);
        margin-bottom: var(--default-gap-section-gap);
        .is-size-pc & {
          font-size: 32px;
        }
      }
      .point-lineup__item--slider--lineup--item {
        --point-lineup-item-slider-lineup-item-gap: 8px;
        padding: var(--default-gap-16-12);
        border-radius: var(--default-radius-8);
        border: 2px solid rgba(186, 232, 182, 0.25);
        background: #eeffe5;
        display: grid;
        align-content: start;
        gap: var(--point-lineup-item-slider-lineup-item-gap);
        line-height: var(--default-font-lh-120);
        .point-lineup__item--slider--lineup--item--image {
          order: -1;
        }
        .point-lineup__item--slider--lineup--item--title {
          margin-bottom: var(--point-lineup-item-slider-lineup-item-gap);
          .base-title__inner {
            display: grid;
            gap: var(--point-lineup-item-slider-lineup-item-gap);
          }
          .base-title__sub-text {
            width: 116px;
            margin-inline: auto;
          }
          .base-title__main-text {
            color: var(--default-color-dark-green);
            font-size: var(--default-font-size-16);
            font-weight: var(--default-font-weight-bold);
          }
        }
        .point-lineup__item--slider--lineup--item--text {
          font-size: var(--default-font-size-14);
        }
      }
    }
    .point-lineup__item--step {
      margin-top: var(--default-gap-section-gap);
      .point-lineup__item--step--title {
        background: var(--default-color-right-blue);
        font-size: var(--default-font-size-26-18);
        color: var(--default-color-white);
        font-weight: var(--default-font-weight-bold);
        text-align: center;
        margin-bottom: var(--default-gap-4-2);
        .is-size-sp & {
          padding: var(--default-gap-8-4);
        }
        .base-title__inner {
          display: flex;
          flex-wrap: wrap;
          gap: 0 1em;
          justify-content: center;
          align-items: center;
        }
        .base-title__sub-text {
          color: var(--default-color-yellow);
        }
      }
      .point-lineup__item--step--lead {
        font-size: var(--default-font-size-16);
        text-align: center;
      }
      .point-lineup__item--step--lineup--wrapper {
        margin-top: var(--point-lineup-item-gap); /*cqw版*/
        --point-lineup-item-step-lineup-item-arrow-yohaku: calc(
          var(--point-lineup-item-step-lineup-item-arrow-size) + (var(--point-lineup-item-step-lineup-item-gap) * 2)
        );
        .point-lineup__item--step--lineup {
          display: grid;
          line-height: var(--default-font-lh-120);
          gap: 0;
        }
        .point-lineup__item--step--lineup--item {
          display: grid;
          gap: var(--default-gap-8-4) 0;
          &:not(:last-child) {
            background: var(--point-lineup-item-step-lineup-item-arrow-bg) no-repeat
              var(--point-lineup-item-step-lineup-item-arrow-bg-posi, center bottom) / var(--point-lineup-item-step-lineup-item-arrow-size);
          }
        }
        .is-size-sp & {
          --point-lineup-item-step-lineup-item-gap: var(--default-gap-8-4);
          --point-lineup-item-step-lineup-item-arrow-size: min((37.5vw / 3.75), 50px);
          --point-lineup-item-step-lineup-item-arrow-bg: url(../images/point_parts/point_icon_step_arrow_bottom.svg);
          --point-lineup-item-step-lineup-item-arrow-bg-posi: center calc(100% - var(--point-lineup-item-step-lineup-item-gap));
          .point-lineup__item--step--lineup--item {
            &:not(:last-child) {
              padding-bottom: var(--point-lineup-item-step-lineup-item-arrow-yohaku);
            }
          }
        }
        .is-size-pc & {
          --point-lineup-item-step-lineup-item-size: 220px;
          --point-lineup-item-step-lineup-item-gap: 4.33px;
          --point-lineup-item-step-lineup-item-arrow-size: 50px;
          --point-lineup-item-step-lineup-item-arrow-bg: url(../images/point_parts/point_icon_step_arrow_right.svg);
          --point-lineup-item-step-lineup-item-arrow-bg-posi: calc(100% - var(--point-lineup-item-step-lineup-item-gap)) center;
          overflow-x: auto;
          overflow-y: hidden;
          .point-lineup__item--step--lineup {
            width: max-content;
            grid-template-columns:
              repeat(3, calc(var(--point-lineup-item-step-lineup-item-size) + var(--point-lineup-item-step-lineup-item-arrow-yohaku)))
              var(--point-lineup-item-step-lineup-item-size);
            grid-template-rows: repeat(2, auto) 1fr;
            align-content: start;
          }
          .point-lineup__item--step--lineup--item {
            grid-template-rows: subgrid;
            grid-row: span 3;
            &:not(:last-child) {
              padding-right: var(--point-lineup-item-step-lineup-item-arrow-yohaku);
            }
          }
        }
      }
      .point-lineup__item--step--lineup--item--title {
        .base-title__inner {
          display: grid;
          grid-template-columns: 36px 1fr;
          gap: var(--default-gap-8-4);
          align-items: center;
          font-size: var(--default-font-size-16);
          color: var(--default-color-pink);
          font-weight: var(--default-font-weight-bold);
          .point-lineup__item--step--lineup--item:last-child & {
            font-size: var(--default-font-size-20-16);
          }
        }
      }
    }
  }
}
/*point枠装飾*/
#point1 {
  .point-lineup__item--inner {
    position: relative;
    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
      width: calc((var(--point-kazari-size-w) / var(--point-inline-size-val)) * 100cqw);
      height: calc((var(--point-kazari-size-h) / var(--point-inline-size-val)) * 100cqw);
      background: var(--point-kazari-bg) no-repeat center center / contain;
      z-index: 1;
    }
    &::before {
      --point-kazari-bg: url(../images/point_parts/point01_kazari_shimajiro.webp);
      left: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
    }
    &::after {
      --point-kazari-bg: url(../images/point_parts/point01_kazari_mimirin.webp);
      right: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
    }
    .is-size-sp & {
      &::before {
        --point-kazari-size-w: 126.675;
        --point-kazari-size-h: 163.8;
        --point-kazari-posi-x: -13;
        --point-kazari-posi-y: -120;
      }
      &::after {
        --point-kazari-size-w: 87.3;
        --point-kazari-size-h: 171.225;
        --point-kazari-posi-x: -14;
        --point-kazari-posi-y: -115;
      }
    }
    .is-size-pc & {
      &::before {
        --point-kazari-size-w: 211.125;
        --point-kazari-size-h: 273;
        --point-kazari-posi-x: -53;
        --point-kazari-posi-y: -41.96;
      }
      &::after {
        --point-kazari-size-w: 145.5;
        --point-kazari-size-h: 285.375;
        --point-kazari-posi-x: -33.5;
        --point-kazari-posi-y: -42.34;
      }
    }
  }
}
.is-size-pc #point2 .point-lineup__item--slider,
.is-size-sp #point2 .point-lineup__item--inner {
  position: relative;
  &::before {
    content: '';
    display: block;
    position: absolute;
    left: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
    width: calc((var(--point-kazari-size-w) / var(--point-inline-size-val)) * 100cqw);
    height: calc((var(--point-kazari-size-h) / var(--point-inline-size-val)) * 100cqw);
    background: var(--point-kazari-bg) no-repeat center center / contain;
    z-index: 1;
    --point-kazari-bg: url(../images/point_parts/point02_kazari_nyakkii.webp);
  }
  .is-size-sp & {
    &::before {
      --point-kazari-size-w: 94.2;
      --point-kazari-size-h: 151.2;
      --point-kazari-posi-x: -12;
      --point-kazari-posi-y: -132.69;
      bottom: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
    }
  }
  .is-size-pc & {
    &::before {
      --point-kazari-size-w: 157;
      --point-kazari-size-h: 252;
      --point-kazari-posi-x: -72;
      --point-kazari-posi-y: -135;
      top: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
    }
  }
}
#point3 {
  .point-lineup__item--inner {
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
      right: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
      width: calc((var(--point-kazari-size-w) / var(--point-inline-size-val)) * 100cqw);
      height: calc((var(--point-kazari-size-h) / var(--point-inline-size-val)) * 100cqw);
      background: var(--point-kazari-bg) no-repeat center center / contain;
      z-index: 1;
      --point-kazari-bg: url(../images/point_parts/point03_kazari_torippii.webp);
    }
    .is-size-sp & {
      &::before {
        --point-kazari-size-w: 123;
        --point-kazari-size-h: 143.4;
        --point-kazari-posi-x: -12;
        --point-kazari-posi-y: -90.51;
      }
    }
    .is-size-pc & {
      .point-lineup__item--main-title {
        padding-inline: calc((145 / var(--point-inline-size-val)) * 100cqw);
      }
      &::before {
        --point-kazari-size-w: 205;
        --point-kazari-size-h: 239;
        --point-kazari-posi-x: -28;
        --point-kazari-posi-y: -74.76;
      }
    }
  }
}
#point4 {
  .point-lineup__item--inner {
    position: relative;
    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
      right: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
      width: calc((var(--point-kazari-size-w) / var(--point-inline-size-val)) * 100cqw);
      height: calc((var(--point-kazari-size-h) / var(--point-inline-size-val)) * 100cqw);
      background: var(--point-kazari-bg) no-repeat center center / contain;
      z-index: 1;
    }
    &::before {
      --point-kazari-bg: url(../images/point_parts/point04_kazari_shimajiro.webp);
    }
    &::after {
      --point-kazari-bg: url(../images/point_parts/point04_kazari_nyakkii.webp);
    }
    .is-size-sp & {
      &::before {
        --point-kazari-size-w: 126.675;
        --point-kazari-size-h: 163.8;
        --point-kazari-posi-x: -10;
        --point-kazari-posi-y: -101.79;
        bottom: auto;
        top: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
        right: auto;
        left: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
      }
      &::after {
        --point-kazari-size-w: 87.3;
        --point-kazari-size-h: 171.225;
        --point-kazari-posi-x: 0;
        --point-kazari-posi-y: -125;
      }
    }
    .is-size-pc & {
      &::before {
        --point-kazari-size-w: 180;
        --point-kazari-size-h: 255;
        --point-kazari-posi-x: 282;
        --point-kazari-posi-y: -90.16;
      }
      &::after {
        --point-kazari-size-w: 136;
        --point-kazari-size-h: 254;
        --point-kazari-posi-x: 123;
        --point-kazari-posi-y: -85.16;
      }
    }
  }
}
#point5 {
  .point-lineup__item--inner {
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      bottom: calc((var(--point-kazari-posi-y) / var(--point-inline-size-val)) * 100cqw);
      right: calc((var(--point-kazari-posi-x) / var(--point-inline-size-val)) * 100cqw);
      width: calc((var(--point-kazari-size-w) / var(--point-inline-size-val)) * 100cqw);
      height: calc((var(--point-kazari-size-h) / var(--point-inline-size-val)) * 100cqw);
      background: var(--point-kazari-bg) no-repeat center center / contain;
      z-index: 1;
      --point-kazari-bg: url(../images/point_parts/point05_kazari_mimirin.webp);
    }
    .is-size-sp & {
      &::before {
        --point-kazari-size-w: 97.875;
        --point-kazari-size-h: 169.425;
        --point-kazari-posi-x: -13.88;
        --point-kazari-posi-y: 780.56;
      }
    }
    .is-size-pc & {
      .point-lineup__item--step--lead {
        padding-inline: calc((50 / var(--point-inline-size-val)) * 100cqw);
      }
      &::before {
        --point-kazari-size-w: 163.125;
        --point-kazari-size-h: 282.375;
        --point-kazari-posi-x: -67.12;
        --point-kazari-posi-y: 259.59;
      }
    }
  }
}
/*product*/
#product {
  .product-shisaku {
    width: min(100%, 600px);
    margin-inline: auto;
    border-radius: var(--default-radius-8);
    border: 1px solid var(--default-color-pink);
    background: #f4fffa;
    padding: var(--default-gap-16-12) 0.5em;
    text-align: center;
    &:not(:last-child) {
      margin-bottom: var(--default-gap-section-gap);
    }
    .product-shisaku__text {
      font-size: var(--default-font-size-26-18);
      font-weight: var(--default-font-weight-bold);
      color: var(--default-color-pink);
      .is-small {
        font-size: var(--default-font-size-normal);
      }
    }
    .product-shisaku__notes {
      color: var(--default-color-font-black);
      --notes-item-font-size: var(--default-font-size-14);
      .product-shisaku__notes--item:not(.is-indent-1) {
        padding-left: 0;
        text-indent: 0;
      }
    }
  }
  .portal-navi {
    margin-bottom: var(--default-gap-section-gap);
    .portal-navi__lineup {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--default-gap-16-12);
      padding: 8px 16px;
      .is-size-pc & {
        gap: 24px;
      }
      .portal-navi__lineup--item--link {
        display: block;
        padding: var(--default-gap-16-12);
        border: 1px solid var(--default-color-corporate);
        border-radius: var(--default-radius-4);
        background: var(--portal-navi-lineup-item-bg, var(--default-color-white));
        color: var(--portal-navi-lineup-item-font-color, var(--default-color-corporate));
        font-size: var(--default-font-size-20-16);
        font-weight: var(--default-font-weight-bold);
        line-height: 1;
        &.is-active {
          --portal-navi-lineup-item-bg: var(--default-color-corporate);
          --portal-navi-lineup-item-font-color: var(--default-color-white);
        }
      }
    }
  }
  .product-lineup {
    font-family: var(--default-font-family-noto);
    &:not(.splide__list) {
      --col-gap: var(--default-gap-24-20);
      display: grid;
      gap: var(--default-gap-32-24) var(--col-gap);
      --col-num: 1;
      @media (width > 640px) {
        --col-num: 2;
        grid-template-columns: repeat(auto-fit, calc((100% - var(--col-gap) * (var(--col-num) - 1)) / var(--col-num)));
        justify-content: center;
      }
      .is-size-pc & {
        --col-num: 4;
        @media (width < 1200px) {
          --col-num: 3;
        }
      }
    }
    .product-lineup__item--link {
      height: 100%;
      display: grid;
      align-content: start;
      grid-template-rows: repeat(2, auto) 1fr;
      background: var(--default-color-white);
      color: inherit;
      font-weight: var(--default-font-weight-normal);
      border-radius: var(--default-radius-8);
      box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      @media (width > 640px) {
        .product-lineup__item--detail,
        .product-lineup__item--more {
          padding: clamp(8px, (8vw / 3.75), 16px);
          &.product-lineup__item--more {
            padding-top: 0;
          }
        }
      }
      @media (width <= 640px) {
        padding: 8px;
        gap: 0 8px;
        grid-template-columns: 138px 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
          'photo text'
          'type text';
        .product-lineup__item--photo {
          grid-area: photo;
        }
        .product-lineup__item--type {
          grid-area: type;
          align-self: start;
          font-size: var(--default-font-size-12);
        }
        .product-lineup__item--text-wrapper {
          grid-area: text;
          gap: 8px;
        }
      }
    }
    .product-lineup__item--photo--item {
      /* aspect-ratio: var(--product-lineup__item--photo-aspect-ratio, 944 / 628); */
      object-fit: cover;
      object-position: right bottom;
    }
    .product-lineup__item--type {
      background: var(--default-color-corporate);
      color: var(--default-color-white);
      text-align: center;
      font-size: clamp(12px, (12vw / 3.75), 14px);
      font-weight: var(--default-font-weight-bold);
      padding: 2px 8px;
    }
    .product-lineup__item--text-wrapper {
      display: grid;
      align-content: space-between;
      .product-lineup__item--title {
        font-size: clamp(14px, (14vw / 3.75), 16px);
        line-height: var(--default-font-lh-130);
        font-weight: var(--default-font-weight-bold);
        margin-bottom: 4px;
        &:has(.product-lineup__item--title--rank) {
          display: grid;
          gap: 8px;
          .product-lineup__item--title--rank .is-hotel-rank {
            display: block;
            width: 100%;
            height: min((12vw / 3.75), 14px);
            object-fit: contain;
            object-position: left center;
          }
        }
      }
      .product-lineup__item--point {
        font-size: clamp(12px, (12vw / 3.75), 14px);
      }
      .product-lineup__item--labels {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: clamp(8px, (8vw / 3.75), 16px);
        .product-lineup__item--label {
          font-size: var(--default-font-size-12);
          line-height: var(--default-font-lh-130);
          font-weight: bold;
          color: var(--product-lineup-item-label-font-color, var(--default-color-white));
          background: var(--product-lineup-item-label-bg, var(--default-color-notice));
          padding: 4px 8px;
          border-radius: var(--default-radius-4);
          &.is-type-airport {
            --product-lineup-item-label-bg: var(--default-color-world-main);
            --product-lineup-item-label-font-color: var(--default-color-white);
          }
          &.is-type-category {
            --product-lineup-item-label-bg: var(--default-color-world-sub);
            --product-lineup-item-label-font-color: var(--default-color-world-main);
          }
          &[class*='is-type-aw'] {
            --product-lineup-item-label-bg: var(--default-color-pink);
            --product-lineup-item-label-font-color: var(--default-color-white);
          }
          &.is-type-normal {
            --product-lineup-item-label-bg: #f0f7ff;
            --product-lineup-item-label-font-color: #0063b0;
          }
          &.is-type-support {
            --product-lineup-item-label-bg: #fffcd5;
            --product-lineup-item-label-font-color: #697180;
          }
        }
      }
      .product-lineup__item--price {
        text-align: right;
      }
      .product-lineup__item--minmax {
        color: var(--default-color-pink-dark);
        font-size: clamp(16px, (16vw / 3.75), 22px);
        line-height: var(--default-font-lh-130);
        color: #df0d00;
        font-weight: var(--default-font-weight-bold);
        .is-en,
        .is-kara {
          font-size: calc(14em / 22);
        }
      }
      .product-lineup__item--dep,
      .product-lineup__item--notes {
        font-size: var(--default-font-size-12);
        color: #697180;
      }
    }
  }
  .product-buttons {
    margin-top: var(--default-gap-section-gap);
  }
  .ui-static-tab-container:has(.ui-static-tab-content-item.is-active .product-buttons) {
    + .product-buttons {
      margin-top: 24px;
    }
  }
}
/*movie*/
#movie {
  .movie {
    container-type: inline-size;
    position: relative;
    max-width: 582px;
    margin-inline: auto;
    @media (width < 1230px) {
      --movie-kazari-size-w: 142;
      --movie-kazari-size-h: 199;
      --movie-max-width-val: var(--default-width-sp-val);
    }
    @media (width >= 1230px) {
      --movie-max-width-val: 582;
      --movie-kazari-size-w: 293;
      --movie-kazari-size-h: 411;
    }
    .movie__inner {
      @media (width < 1230px) {
        padding-bottom: calc(60 / var(--movie-max-width-val) * 100cqw);
        &::before {
          left: 0;
          /* translate: 100% 0; */
        }
        .movie-text {
          width: calc(197 / var(--movie-max-width-val) * 100cqw);
          height: calc(96 / var(--movie-max-width-val) * 100cqw);
          margin-top: calc(52 / var(--movie-max-width-val) * 100cqw);
          margin-left: auto;
        }
      }
      @media (width >= 1230px) {
        padding-bottom: calc(25.76 / var(--movie-max-width-val) * 100cqw);
        &::before {
          right: 0;
          translate: calc(100% + calc(13 / var(--movie-max-width-val) * 100cqw)) 0;
        }
        .movie-texts {
          text-align: center;
          margin-top: 40px;
        }
      }
      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        width: calc((var(--movie-kazari-size-w) / var(--movie-max-width-val)) * 100cqw);
        height: calc((var(--movie-kazari-size-h) / var(--movie-max-width-val)) * 100cqw);
        background: url(../images/movie_kazari_gaogao.webp) no-repeat center center / contain;
        z-index: 1;
      }
    }
  }
  .movie-texts {
    font-size: var(--default-font-size-20-16);
    font-weight: var(--default-font-weight-bold);
  }
  .youtube {
    overflow: hidden;
    .youtube__inner {
      height: calc((9 / 16) * 100cqw); /*YouTubeアスペクト比*/
      position: relative;
    }
    .youtube__thumb,
    .youtube__block,
    .youtube__iframe {
      width: 100%;
      height: 100%;
      &:is(.youtube__block, .youtube__iframe) {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .youtube__thumb {
      object-fit: cover;
    }
    .youtube__block {
      cursor: pointer;
      transition: opacity 0.3s;
      display: grid;
      justify-items: center;
      align-items: center;
      &::after,
      &::before {
        content: '';
        height: 0;
        width: var(--w, var(--size));
        padding-top: var(--h, var(--size));
        position: absolute;
      }
      &::after {
        --size: 10%;
        background: rgba(137, 137, 137, 0.8);
        border-radius: 100%;
      }
      &::before {
        --w: 3%;
        --h: 4%;
        background: #fff;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        transform: translateX(15%);
        z-index: 1;
      }
    }
    .youtube__iframe {
      z-index: 1;
    }
  }
}
/*support*/
#support {
  .support-lineup {
    + .support-lineup {
      margin-top: var(--default-gap-section-gap);
    }
    --col-gap: var(--default-gap-24-20);
    --col-num: 1;
    display: grid;
    gap: var(--default-gap-40-32) var(--col-gap);
    @media (width > 700px) {
      &.is-main {
        --col-num: 2;
      }
    }
    @media (width > 640px) {
      &.is-more {
        --col-num: 2;
      }
      .is-size-pc & {
        --col-num: 2;
        &.is-more {
          --col-num: 3;
        }
      }
      grid-template-columns: repeat(auto-fit, calc((100% - var(--col-gap) * (var(--col-num) - 1)) / var(--col-num)));
      justify-content: center;
    }
    .support-lineup__item {
      --support-lineup-item-border-size: clamp(3px, (3vw / 3.75), 7px);
      border-radius: min((8vw / 3.75), 16px);
      background: rgba(90, 194, 216, 0.5);
      padding: var(--support-lineup-item-border-size);
    }
    .support-lineup__item--inner {
      border-radius: min((4vw / 3.75), 8px);
      background: var(--default-color-white);
      padding: calc(var(--default-gap-24-20) - var(--support-lineup-item-border-size));
      height: 100%;
      .is-size-sp & {
        padding-inline: var(--default-gap-16-12);
      }
    }
    .support-lineup__item--title {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: var(--default-gap-8-4);
      align-items: center;
      font-size: var(--default-font-size-20-16);
      color: var(--default-color-primary);
      font-weight: var(--default-font-weight-bold);
      padding-bottom: 8px;
      /* border-bottom: 2px dashed var(--default-color-primary); */
      background: linear-gradient(to right, var(--default-color-primary) 3px, transparent 1px) repeat-x left bottom / 9px 2px;
      margin-bottom: var(--default-gap-16-12);
    }
    .support-lineup__item--detail {
      &:has(.support-lineup__item--photo) {
        display: grid;
        gap: var(--default-gap-16-12);
        .is-size-pc & {
          grid-template-columns: 150px 1fr;
        }
      }
    }
    .support-lineup__item--texts {
      display: grid;
      align-content: start;
      gap: var(--default-gap-8-4);
      font-size: var(--default-font-size-14);
    }
  }
}
/*notes*/
#notes {
  padding-bottom: var(--default-gap-120-80);
  .notes-lineup {
    display: grid;
    justify-content: end;
    text-align: right;
    gap: 8px;
    .is-size-sp & {
      .is-indent-1 {
        text-align: left;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*banner*/
#banner {
  background: #79ddf5;
  padding-block: var(--default-gap-40-32);
  &:not(:has(#reco-banner)) {
    display: none;
  }
  .section__inner {
    max-width: 904px;
  }
  #reco-banner {
    --col-num: 2;
    --gap: var(--default-gap-16-12);
    .is-size-pc & {
      --gap: 40px;
    }
    .reco-banner__list {
      display: grid;
      grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
      justify-content: center;
      gap: var(--gap);
      width: 100%;
      margin-inline: auto;
      .is-size-pc & {
        --col-num: 4;
      }
      .is-size-sp & {
        max-width: 476px;
      }
      .reco-banner__link,
      .reco-banner__image {
        display: block;
      }
      .reco-banner__image {
        object-fit: contain;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  #point .point-navi__lineup .point-navi__lineup--item--link {
    &:hover {
      .point-navi__lineup--item--image {
        &.is-on {
          opacity: 1;
        }
      }
    }
  }
  .portal-navi__lineup--item--link:not(.is-active) {
    transition: var(--default-transition-color), var(--default-transition-background);
    &:hover {
      --portal-navi-lineup-item-bg: var(--default-color-dummy);
      --portal-navi-lineup-item-font-color: var(--default-color-hover);
    }
  }
  .product-lineup__item--link,
  .reco-banner__link {
    transition: var(--default-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
}