@charset "UTF-8";

/* =============================================================================

Minor CSS

・優先度の低い単一パーツクラス「.m-×××」
アイコンなど、レイアウトやグローバル系より優先度を低く設定

上記はここに記述する

============================================================================= */

/* Mask Image Icon .m-i-
::before .m-i-bf
::after .m-i-af
----------------------------------------------------------------------------- */
/* Mask Image Icon Base */
[class*="m-i-"]:not([class*="m-i-bf"],[class*="m-i-af"]),
[class*="m-i-bf"]::before,
[class*="m-i-af"]::after {
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100%;
  mask-size:100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  height:auto;
  background-color:var(--base-color);
}
[class*="m-i-bf"]::before,
[class*="m-i-af"]::after {
  content:"";
  display:block;
}

/* 右矢印A */
.m-i-arrow_right-A,
.m-i-bf-arrow_right-A::before,
.m-i-af-arrow_right-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow_right_a.svg);
  mask-image:url(/sapporo/assets/svg/arrow_right_a.svg);
  width:1.0rem;
  aspect-ratio: 1/1;
}

/* 下矢印A */
.m-i-arrow_down-A,
.m-i-bf-arrow_down-A::before,
.m-i-af-arrow_down-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow_down_a.svg);
  mask-image:url(/sapporo/assets/svg/arrow_down_a.svg);
  width:1.0rem;
  aspect-ratio: 1/1;
}

/* 下矢印B（小） */
.m-i-arrow_down-B,
.m-i-bf-arrow_down-B::before,
.m-i-af-arrow_down-B::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow_down_b.svg);
  mask-image:url(/sapporo/assets/svg/arrow_down_b.svg);
  width:.6rem;
  aspect-ratio: 1/1;
}

/* 上矢印A */
.m-i-arrow_up-A,
.m-i-bf-arrow_up-A::before,
.m-i-af-arrow_up-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow_up_a.svg);
  mask-image:url(/sapporo/assets/svg/arrow_up_a.svg);
  width:1.0rem;
  aspect-ratio: 1/1;
}

/* External Link Icon */
.m-i-external-A,
.m-i-bf-external-A::before,
.m-i-af-external-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/external.svg);
  mask-image:url(/sapporo/assets/svg/external.svg);
  width:1.6rem;
  aspect-ratio: 1/1;
}

/* レストラン予約アイコン */
.m-i-r_restaurant-A,
.m-i-bf-r_restaurant-A::before,
.m-i-af-r_restaurant-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/r_restaurant_a.svg);
  mask-image:url(/sapporo/assets/svg/r_restaurant_a.svg);
  width:2.0rem;
  aspect-ratio: 1/1;
}

/* 宿泊予約アイコン */
.m-i-r_stay-A,
.m-i-bf-r_stay-A::before,
.m-i-af-r_stay-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/r_stay_a.svg);
  mask-image:url(/sapporo/assets/svg/r_stay_a.svg);
  width:2.0rem;
  aspect-ratio: 1/1;
}

/* ベストレートアイコン */
.m-i-bestrate-A,
.m-i-bf-bestrate-A::before,
.m-i-af-bestrate-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/bestrate_a.svg);
  mask-image:url(/sapporo/assets/svg/bestrate_a.svg);
  width:1.8rem;
  aspect-ratio: 1/1;
}

/* 拡大アイコン */
.m-i-zoom-A,
.m-i-bf-zoom-A::before,
.m-i-af-zoom-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/zoom.svg);
  mask-image:url(/sapporo/assets/svg/zoom.svg);
  width:2.0rem;
  aspect-ratio: 1/1;
}
.m-i-zoom_out-A,
.m-i-bf-zoom_out-A::before,
.m-i-af-zoom_out-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/zoom_out.svg);
  mask-image:url(/sapporo/assets/svg/zoom_out.svg);
  width:2.0rem;
  aspect-ratio: 1/1;
}

/* インスタグラム */
.m-i-insta-A,
.m-i-bf-insta-A::before,
.m-i-af-insta-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/insta.svg);
  mask-image:url(/sapporo/assets/svg/insta.svg);
  width:2.0rem;
  aspect-ratio: 1/1;
}


/* object-fit .m-of-
----------------------------------------------------------------------------- */
/* :where([class*="m-of-"]:not([class*="m-of-pc-"],[class*="m-of-sm-"])) {} */
[class*="m-of-"]:not([class*="m-of-pc-"],[class*="m-of-sp-"]) {
  overflow:hidden;
}
[class*="m-of-"]:not([class*="m-of-pc-"],[class*="m-of-sp-"]) :where(img,video) {
  width:100%;
  height:100%;
}
.m-of-cover :where(img,video) {
  object-fit:cover;
}
.m-of-contain :where(img,video) {
  object-fit:contain;
}
:where(.m-of-cover,.m-of-contain).-full {
  position:relative;
}
:where(.m-of-cover,.m-of-contain).-full :where(img,video) {
  position:absolute;
  top:0;
  left:0;
}
:where(.m-of-cover,.m-of-contain).-top :where(img,video) {
  object-position:center top;
}
:where(.m-of-cover,.m-of-contain).-bottom :where(img,video) {
  object-position:center bottom;
}
@media (width > 640px) {
  [class*="m-of-pc-"] {
    overflow:hidden;
  }
  [class*="m-of-pc-"] :where(img,video) {
    width:100%;
    height:100%;
  }
  .m-of-pc-cover :where(img,video) {
    object-fit:cover;
  }
  .m-of-sm-contain :where(img,video) {
    object-fit:contain;
  }
}
@media (width <= 640px) {
  [class*="m-of-sp-"] {
    overflow:hidden;
  }
  [class*="m-of-sp-"] :where(img,video) {
    width:100%;
    height:100%;
  }
  .m-of-sp-cover :where(img,video) {
    object-fit:cover;
  }
  .m-of-sp-contain :where(img,video) {
    object-fit:contain;
  }
}


*:has(> .m-abs_bg) {
  position:relative;
  z-index: 1;
}
.m-abs_bg {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  pointer-events: none;

  &.-fixed {
    overflow:visible;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    img {
      margin-block:-100dvh;
      width:100%;
      height:calc(100dvh - var(--header-height));
      position:sticky;
      top:var(--header-height);
    }

    &.-bottom {
      img {
        margin-top:0;
      }
    }
    &.-top {
      img {
        margin-bottom:0;
      }
    }
  }
  img {
    object-fit: cover;
    width:100%;
    height:100%;
  }
}

/* hover opacity
----------------------------------------------------------------------------- */
@media(hover:hover) {
  .m-hover-brightness {
    transition:filter var(--duration-hover-A);
  }
  .m-hover-brightness:hover {
    filter:brightness(1.2);
  }
  .m-hover-opacity {
    transition:opacity var(--duration-hover-A);
  }
  .m-hover-opacity:hover {
    opacity:.6;
  }
  .m-hover-i_scale {
    overflow:hidden;

    &:hover {
      > img,> picture img {
        transform:scale(1.1);
      }
    }
    :is(.splide__slide,.column-item,.item):has(.l-button-A:hover) & > img,
    :is(.splide__slide,.column-item,.item):has(.l-button-A:hover) & > picture img {
      transform:scale(1.1);
    }

    > img,> picture img {
      transition-property: transform;
      transition-duration: var(--duration-hover-A);
    }
  }
}