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

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

/* 左矢印 */
.m-i-arrow_left,
.m-i-bf-arrow_left::before,
.m-i-af-arrow_left::after {
  -webkit-mask-image:url(/assets/svg/arrow_left.svg);
  mask-image:url(/assets/svg/arrow_left.svg);
  width:.6rem;
  aspect-ratio: 6/7;
}

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

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

/* 下矢印B（小） */
.m-i-select-down,
.m-i-bf-select-down::before,
.m-i-af-select-down::after {
  -webkit-mask-image:url(/assets/svg/select-down.svg);
  mask-image:url(/assets/svg/select-down.svg);
  width:.9rem;
  aspect-ratio: 9/10;
}


/* 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) {
  .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;
  }
}