@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-menu_open,
.m-i-bf-menu_open::before,
.m-i-af-menu_open::after {
  -webkit-mask-image:url(../svg/menu_open.svg);
  mask-image:url(../svg/menu_open.svg);
  width:3.0rem;
  aspect-ratio: 1/1;
}
/* メニュー閉じる */
.m-i-menu_close,
.m-i-bf-menu_close::before,
.m-i-af-menu_close::after {
  -webkit-mask-image:url(../svg/menu_close.svg);
  mask-image:url(../svg/menu_close.svg);
  width:3.0rem;
  aspect-ratio: 1/1;
}
.m-i-select_arrow,
.m-i-bf-select_arrow::before,
.m-i-af-select_arrow::after {
  -webkit-mask-image:url(../svg/select_arrow.svg);
  mask-image:url(../svg/select_arrow.svg);
  width:2.4rem;
  aspect-ratio: 2/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 > 767px) {
  [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 <= 767px) {
  [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:-100lvh;
      height:100lvh;
      position:sticky;
      top:0;
    }

    &.-bottom {
      img {
        margin-top:0;
      }
    }
    &.-top {
      img {
        margin-bottom:0;
      }
    }
  }
  img {
    object-fit: cover;
    width:100%;
    height:100%;
  }
}
@media (width > 767px) {
  *:has(> .m-abs_bg-pc) {
    position:relative;
    z-index: 1;
  }
  .m-abs_bg-pc {
    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:-100lvh;
        height:100lvh;
        position:sticky;
        top:0;
      }

      &.-bottom {
        img {
          margin-top:0;
        }
      }
      &.-top {
        img {
          margin-bottom:0;
        }
      }
    }
    img {
      object-fit: cover;
      width:100%;
      height:100%;
    }
  }
}
@media (width <= 767px) {
  *:has(> .m-abs_bg-sp) {
    position:relative;
    z-index: 1;
  }
  .m-abs_bg-sp {
    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:-100lvh;
        height:100lvh;
        position:sticky;
        top:0;
      }

      &.-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;
  }
}


/* long body m-lb
----------------------------------------------------------------------------- */
.m-lb {
  display:block;
  width:fit-content;
  line-height:1.35;
  transform:scaleY(1.35);
  letter-spacing: -.1em;
  color:#000;
}
.m-lb_wrap {
  display:flex;
  row-gap:calc(.4em);
  @media (width <= 767px) {
    flex-direction: column;
  }
  &.-pc {
    flex-direction: column;
  }
}


/* img width .m-iw
----------------------------------------------------------------------------- */
@property --f-iw {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.m-iw {
  --f-iw: var(--iw, 0);

  @media (width > 767px) {
    --f-iw: var(--iw-pc, var(--iw, 0));
  }
  @media (width <= 767px) {
    --f-iw: var(--iw-sp, var(--iw, 0));
  }

  width: calc(var(--f-iw) * .1rem);

  &.-ib {
    display:inline-block;
  }
}