@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#mv {
  /*is-page-kaigai*/
  &:has(.mv-main__logo--image) {
    --mv-minus-h: calc(var(--hisnav-h) + var(--breadcrumb-h));
    --mv-h: calc(811vw / 3.75);
    --mv-inner-h: calc(700vw / 3.75);
    --mv-inner-bh: calc(100lvh - var(--mv-minus-h));
    height: min(var(--mv-inner-bh), var(--mv-inner-h));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    @media(width > 600px) {
      --mv-h: 1080px;
      --mv-inner-h: 936px;
      --mv-minus-h: calc(var(--hisnav-h) + var(--breadcrumb-h) + var(--gnav-h));
    }
    .mv-wrapper, .mv-bg {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .mv-wrapper {
      height: min(var(--mv-inner-bh), var(--mv-inner-h));
      top: var(--mv-minus-h);
    }
    .mv-main__logo {
      opacity: 0;
      animation: mv-fade-in 1s 1s linear forwards;
    }
    .mv-bg {
      height: min(100lvh, var(--mv-h));
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 1;
        z-index: 5;
        position: absolute;
        animation: mv-fade-out 1s 2.5s linear forwards;
      }
      .mv-bg__photo {
        inset: 0;
        position: absolute;
        animation: mv-slide 16s var(--mv-bg-delay, 0s) infinite;
        transform: translateZ(0); /*iOS描画対策*/
        opacity: 0;
        z-index: 1;
        &.is-num-1 {
          --mv-bg-delay: 2s;
        }
        &.is-num-2 {
          --mv-bg-delay: 6s;
        }
        &.is-num-3 {
          --mv-bg-delay: 10s;
        }
        &.is-num-4 {
          --mv-bg-delay: 14s;
        }
      }
    }
    .mv-main__logo--image {
      display: block;
      width: 100%;
      height: min((323vw / 3.75), 500px);
      object-fit: contain;
      object-position: center top;
    }
  }
  /*is-page-kokunai*/
  .is-page-kokunai & {
    --mv-h: min((400vw / 3.75), 600px);
    .mv-main__text {
      margin-top: min((40vw / 3.75), 97px);
    }
    .mv-main__text--image {
      width: 100%;
      height: min((17vw / 3.75), 24px);
      object-fit: contain;
    }
  }
}
@keyframes mv-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mv-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mv-slide {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    opacity: 0;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*is-page-topのみ*/
.is-page-top {
  /*is-page-top > main-lead*/
  .main-lead {
    box-shadow: var(--default-shadow);
    .main-lead__inner {
      display: grid;
      justify-items: center;
      gap: min((33vw / 3.75), 33px) calc((30 / var(--default-width-pc-val)) * 100%);
      .is-pc & {
        grid-template-columns: calc((368 / var(--default-width-pc-val)) * 100%) 1fr;
        .main-lead__photo {
          order: -1;
          margin-top: 7px;
          width: 100%;
          height: 0;
          padding-top: calc((260 / 368) * 100%);
        }
        .main-lead__text {
          text-align: left;
          padding-right: 1em;
        }
      }
    }
    .main-lead__photo {
      width: min((220vw / 3.75), 368px);
      height: min((156vw / 3.75), 260px);
      position: relative;
    }
    .main-lead__text {
      text-align: center;
    }
  }
  /*is-page-top > area*/
  #area {
    .is-pc & {
      .section__inner {
        width: 100%;
      }
      --sec-ttl-mb: 0;
      .area-content {
        position: relative;
        width: var(--default-width);
        margin: auto;
      }
    }
    .area-map {
      .is-sp & {
        display: none;
      }
      .is-pc & {
        width: calc((1920 / var(--default-width-pc-val)) * 100%);
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        z-index: -1;
        .area-map__photo {
          width: 100%;
          height: 0;
          padding-top: calc((800 / 1920) * 100%);
          position: relative;
        }
      }
    }
    .area-map-pin {
      .is-sp & {
        display: none;
      }
      .is-pc & {
        position: relative;
        .area-map-pin__item {
          width: var(--size-w);
          padding-top: var(--size-h);
          position: absolute;
          mask: var(--icon) no-repeat 0 0 / contain;
          background: var(--bg, var(--default-color-brown-dark2));
          top: 0;
          margin-top: var(--posi-y);
          &.is-active {
            --bg: var(--sub-color1);
          }
          &:is(.is-hawaii, .is-america, .is-maldives) {
            right: 0;
            margin-right: var(--posi-x);
          }
          &:is(.is-oceania, .is-europe, .is-asia) {
            left: 0;
            margin-left: var(--posi-x);
          }
          &.is-hawaii {
            --icon: url("../images/kaigai/map_pin_hawaii.svg");
            --size-w: calc((297 / var(--default-width-pc-val)) * 100%);
            --size-h: calc((227 / var(--default-width-pc-val)) * 100%);
            --posi-x: calc((306 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((138 / var(--default-width-pc-val)) * 100%);
          }
          &.is-america {
            --icon: url("../images/kaigai/map_pin_america.svg");
            --size-w: calc((224 / var(--default-width-pc-val)) * 100%);
            --size-h: calc((238 / var(--default-width-pc-val)) * 100%);
            --posi-x: calc((7 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((76 / var(--default-width-pc-val)) * 100%);
          }
          &.is-maldives {
            --icon: url("../images/kaigai/map_pin_maldives.svg");
            --size-w: calc((628 / var(--default-width-pc-val)) * 100%);
            --size-h: calc((212 / var(--default-width-pc-val)) * 100%);
            --posi-x: calc((199 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((345 / var(--default-width-pc-val)) * 100%);
          }
          &.is-oceania {
            --icon: url("../images/kaigai/map_pin_oceania.svg");
            --size-w: calc((436 / var(--default-width-pc-val)) * 100%);
            --size-h: calc((150 / var(--default-width-pc-val)) * 100%);
            --posi-x: calc((264 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((427 / var(--default-width-pc-val)) * 100%);
          }
          &.is-europe {
            --icon: url("../images/kaigai/map_pin_europe.svg");
            --size-w: calc((297 / var(--default-width-pc-val)) * 100%);
            --size-h: calc((332 / var(--default-width-pc-val)) * 100%);
            --posi-x: calc((6 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((104 / var(--default-width-pc-val)) * 100%);
          }
          &.is-asia {
            --icon: url("../images/kaigai/map_pin_asia.svg");
            --size-w: calc((226 / var(--default-width-pc-val)) * 100%);
            --size-h: calc((261 / var(--default-width-pc-val)) * 100%);
            --posi-x: calc((293 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((151 / var(--default-width-pc-val)) * 100%);
          }
        }
      }
    }
    .area-lineup {
      .is-sp & {
        --col-num: 2;
        --gap: min((15vw / 3.75), 27px);
        display: grid;
        gap: var(--gap);
        grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
        justify-content: center;
      }
      .is-pc & {
        display: block;
        position: relative;
        padding-top: calc((577 / var(--default-width-pc-val)) * 100%);
        .area-lineup__item {
          width: calc((200 / var(--default-width-pc-val)) * 100%);
          position: absolute;
          top: 0;
          margin-top: var(--posi-y);
          font-size: min((15vw / 8.61), 16px);
          &:is(.is-hawaii, .is-america, .is-maldives) {
            right: 0;
            margin-right: var(--posi-x);
          }
          &:is(.is-oceania, .is-europe, .is-asia) {
            left: 0;
            margin-left: var(--posi-x);
          }
          &.is-hawaii {
            --posi-x: calc((348 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((139 / var(--default-width-pc-val)) * 100%);
          }
          &.is-america {
            --posi-x: calc((7 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((77 / var(--default-width-pc-val)) * 100%);
          }
          &.is-maldives {
            --posi-x: calc((199 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((434 / var(--default-width-pc-val)) * 100%);
          }
          &.is-oceania {
            --posi-x: calc((264 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((454 / var(--default-width-pc-val)) * 100%);
          }
          &.is-europe {
            --posi-x: calc((21 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((313 / var(--default-width-pc-val)) * 100%);
          }
          &.is-asia {
            --posi-x: calc((293 / var(--default-width-pc-val)) * 100%);
            --posi-y: calc((152 / var(--default-width-pc-val)) * 100%);
          }
        }
      }
      .area-lineup__item {
        .base-banner__photo {
          width: 100%;
          height: 0;
          padding-top: calc((216 / 350) * 100%);
          position: relative;
        }
      }
    }
  }
  /*is-page-top > theme*/
  #theme {
    .theme-lineup {
      --col-num: 2;
      --gap: min((15vw / 3.75), 27px);
      display: grid;
      gap: var(--gap);
      grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
      justify-content: center;
      font-size: min((14vw / 3.75), 22px);
      .is-pc & {
        --col-num: 3;
      }
      .theme-lineup__item {
        .base-banner__photo {
          width: 100%;
          height: 0;
          padding-top: calc((216 / 350) * 100%);
          position: relative;
        }
      }
    }
  }
  /*is-page-top > product_tour*/
  #product_tour {
    .product-lineup:has(.product-lineup__item--button) {
      .product-lineup__item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: min((20vw / 3.75), 30px) 0;
      }
      .base-button {
        width: calc((283 / 348) * 100%);
        justify-self: center;
        .base-button__link {
          width: 100%;
        }
      }
    }
  }
  /*is-page-top > area*/
  #area {
    .mutual-banner {
      margin-top: min((40vw / 3.75), 93px);
    }
  }
}
/*article*/
#article {
  .section__inner {
    width: 100%;
  }
  .article {
    max-width: var(--default-width-pc);
    margin: auto;
  }
  .splide__arrow {
    --slider-arrow-icon-posi-y: 90px;
    --slider-arrow-icon-posi-ty: 0;
  }
  .article__track {
    --slider-item-w: min((160vw / 3.75), 230px);
    --slider-gap: min((12vw / 3.75), 22px);
    margin: 0 min((18vw / 3.75), 18px);
  }
  @media(width > 1140px) {
    .article__track {
      --slider-item-w: 240px;
      --slider-gap: 12px;
      width: calc(986px + var(--slider-gap));
      margin: auto;
      overflow: hidden;
    }
    .article__item {
      padding: 5px;
    }
  }
  .article__item {
    background: #fff;
    .article__link {
      height: 100%;
      display: grid;
      gap: min((8vw / 7.5), 8px);
      color: inherit;
      align-content: start;
    }
    .article__image--wrapper {
      padding-top: 100%;
      position: relative;
    }
    .article__detail--label, .article__detail--text {
      display: none;
    }
  }
  .article-buttons {
    margin-top: min((20vw / 3.75), 40px);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .article__link {
    &:hover {
      --opacity: 1;
    }
    .article__image--wrapper::after {
      content: "";
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .2);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      opacity: var(--opacity, 0);
      transition: var(--default-hover-transition-opacity);
    }
  }
}