@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:#fff;
}
[class*="m-i-bf"]::before,
[class*="m-i-af"]::after {
  content:"";
  display:block;
}

/* Arrow */
.m-i-arrow-A,
.m-i-bf-arrow-A::before,
.m-i-af-arrow-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow-a.svg);
  mask-image:url(/sapporo/assets/svg/arrow-a.svg);
  width:.8rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
}

/* Arrow */
.m-i-arrow-B,
.m-i-bf-arrow-B::before,
.m-i-af-arrow-B::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow-b.svg);
  mask-image:url(/sapporo/assets/svg/arrow-b.svg);
  width:1.2rem;
  aspect-ratio: 12/12;
}
@media (width <= 640px) {
}

.m-i-arrow-C,
.m-i-bf-arrow-C::before,
.m-i-af-arrow-C::after {
  -webkit-mask-image:url(/sapporo/assets/svg/arrow-c.svg);
  mask-image:url(/sapporo/assets/svg/arrow-c.svg);
  width:6px;
  aspect-ratio: 12/12;
}
@media (width <= 640px) {
}

/* Arrow */
.m-i-close-A,
.m-i-bf-close-A::before,
.m-i-af-close-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/close.svg);
  mask-image:url(/sapporo/assets/svg/close.svg);
  width:.6rem;
  aspect-ratio: 6/5;
}
@media (width <= 640px) {
}

/* Exclamation */
.m-i-exclamation-A,
.m-i-bf-exclamation-A::before,
.m-i-af-exclamation-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/exclamation.svg);
  mask-image:url(/sapporo/assets/svg/exclamation.svg);
  width:.3rem;
  aspect-ratio: 3/16;
}
@media (width <= 640px) {
}

/* Reserve Member Icon */
.m-i-reserve_member,
.m-i-bf-reserve_member::before,
.m-i-af-reserve_member::after {
  -webkit-mask-image:url(/sapporo/assets/svg/reserve_member.svg);
  mask-image:url(/sapporo/assets/svg/reserve_member.svg);
  width:3.0rem;
  aspect-ratio: 30/25;
}
@media (width <= 640px) {
}

/* Reserve Icon */
.m-i-reserve,
.m-i-bf-reserve::before,
.m-i-af-reserve::after {
  -webkit-mask-image:url(/sapporo/assets/svg/reserve.svg);
  mask-image:url(/sapporo/assets/svg/reserve.svg);
  width:2.1rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
}

/* 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/link-external-A.svg);
  mask-image:url(/sapporo/assets/svg/link-external-A.svg);
  width:1.1rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
  .m-i-external-A,
  .m-i-bf-external-A::before,
  .m-i-af-external-A::after {
    width:1.5rem;
  }
}

/* Facebook Icon */
.m-i-facebook,
.m-i-bf-facebook::before,
.m-i-af-facebook::after {
  -webkit-mask-image:url(/sapporo/assets/svg/icon-facebook.svg);
  mask-image:url(/sapporo/assets/svg/icon-facebook.svg);
  width:1.8rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
  .m-i-facebook,
  .m-i-bf-facebook::before,
  .m-i-af-facebook::after {
    width:2.0rem;
  }
}

/* Instagram Icon */
.m-i-instagram,
.m-i-bf-instagram::before,
.m-i-af-instagram::after {
  -webkit-mask-image:url(/sapporo/assets/svg/icon-instagram.svg);
  mask-image:url(/sapporo/assets/svg/icon-instagram.svg);
  width:1.8rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
  .m-i-instagram,
  .m-i-bf-instagram::before,
  .m-i-af-instagram::after {
    width:2.0rem;
  }
}

/* Star */
.m-i-star-A,
.m-i-bf-star-A::before,
.m-i-af-star-A::after {
  -webkit-mask-image:url(/sapporo/assets/svg/star.svg);
  mask-image:url(/sapporo/assets/svg/star.svg);
  width:.9rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
  .m-i-star-A,
  .m-i-bf-star-A::before,
  .m-i-af-star-A::after {
    width:.8rem;
  }
}

/* Reverse Radius Base */
[class*="m-i-r_radius"]:not([class*="m-i-bf"],[class*="m-i-af"]),
[class*="m-i-bf-r_radius"]::before,
[class*="m-i-af-r_radius"]::after {
  width:1.0rem;
  aspect-ratio: 1/1;
}
@media (width <= 640px) {
  [class*="m-i-r_radius"]:not([class*="m-i-bf"],[class*="m-i-af"]),
  [class*="m-i-bf-r_radius"]::before,
  [class*="m-i-af-r_radius"]::after {
    width:.6rem;
  }
}
.m-i-r_radius-lt,
.m-i-bf-r_radius-lt::before,
.m-i-af-r_radius-lt::after {
  -webkit-mask-image:url(/sapporo/assets/svg/reverse-radius-lt.svg);
  mask-image:url(/sapporo/assets/svg/reverse-radius-lt.svg);
}
.m-i-r_radius-rt,
.m-i-bf-r_radius-rt::before,
.m-i-af-r_radius-rt::after {
  -webkit-mask-image:url(/sapporo/assets/svg/reverse-radius-rt.svg);
  mask-image:url(/sapporo/assets/svg/reverse-radius-rt.svg);
}
.m-i-r_radius-rb,
.m-i-bf-r_radius-rb::before,
.m-i-af-r_radius-rb::after {
  -webkit-mask-image:url(/sapporo/assets/svg/reverse-radius-rb.svg);
  mask-image:url(/sapporo/assets/svg/reverse-radius-rb.svg);
}
.m-i-r_radius-lb,
.m-i-bf-r_radius-lb::before,
.m-i-af-r_radius-lb::after {
  -webkit-mask-image:url(/sapporo/assets/svg/reverse-radius-lb.svg);
  mask-image:url(/sapporo/assets/svg/reverse-radius-lb.svg);
}


/* 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;
}
@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;
  }
}


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