@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-external,
.m-i-bf-external::before,
.m-i-af-external::after {
  -webkit-mask-image:url(../svg/icon_external.svg);
  mask-image:url(../svg/icon_external.svg);
  width:2.2rem;
  aspect-ratio: 1/1;
  @media (width <= 767px) {
    width:2.4rem;
  }
}

/* ページトップ矢印 */
.m-i-pt_arrow,
.m-i-bf-pt_arrow::before,
.m-i-af-pt_arrow::after {
  -webkit-mask-image:url(../svg/pagetop_arrow.svg);
  mask-image:url(../svg/pagetop_arrow.svg);
  width:3.4rem;
  aspect-ratio: 1/1;
  @media (width <= 767px) {
    width:5.2rem;
  }
}

/* →矢印 */
.m-i-arrow_right-A,
.m-i-bf-arrow_right-A::before,
.m-i-af-arrow_right-A::after {
  -webkit-mask-image:url(../svg/arrow_right-b.svg);
  mask-image:url(../svg/arrow_right-a.svg);
  width:1.5rem;
  aspect-ratio: 15/14;
  @media (width <= 767px) {
    width:3.0rem;
  }
}

/* →矢印（丸囲い付き） */
.m-i-arrow_right-B,
.m-i-bf-arrow_right-B::before,
.m-i-af-arrow_right-B::after {
  -webkit-mask-image:url(../svg/arrow_right-b.svg);
  mask-image:url(../svg/arrow_right-b.svg);
  width:3.8rem;
  aspect-ratio: 1/1;
  @media (width <= 767px) {
    width:4.4rem;
  }
}

/* →矢印（丸囲い付き） */
.m-i-arrow_right-C,
.m-i-bf-arrow_right-C::before,
.m-i-af-arrow_right-C::after {
  -webkit-mask-image:url(../svg/arrow_right-c.svg);
  mask-image:url(../svg/arrow_right-c.svg);
  width:.8rem;
  aspect-ratio: 8/14;
  @media (width <= 767px) {
    width:1.8rem;
  }
}

/* メニュー展開 */
.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:4.0rem;
  aspect-ratio: 4/3;
}
/* メニュー閉じる */
.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.4rem;
  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;
  @media (width <= 767px) {
    width:3.2rem;
  }
}

.m-i-arrow_down,
.m-i-bf-arrow_down::before,
.m-i-af-arrow_down::after {
  -webkit-mask-image:url(../svg/arrow_down.svg);
  mask-image:url(../svg/arrow_down.svg);
  width:3.8rem;
  aspect-ratio: 1/1;
  @media (width <= 767px) {
    width:4.4rem;
  }
}

/* 代替駐車場確保見出し装飾 */
.m-i-ap_heading_deco,
.m-i-bf-ap_heading_deco::before,
.m-i-af-ap_heading_deco::after {
  -webkit-mask-image:url(../svg/ap_heading_deco.svg);
  mask-image:url(../svg/ap_heading_deco.svg);
  width:4.6rem;
  aspect-ratio: 46/66;
  @media (width <= 767px) {
    width:5.2rem;
  }
}

/* チェックアイコン */
.m-i-check,
.m-i-bf-check::before,
.m-i-af-check::after {
  -webkit-mask-image:url(../svg/icon_check.svg);
  mask-image:url(../svg/icon_check.svg);
  width:2.7rem;
  aspect-ratio: 27/24;
  @media (width <= 767px) {
    width:3.6rem;
  }
}

/* メールアイコン */
.m-i-mail,
.m-i-bf-mail::before,
.m-i-af-mail::after {
  -webkit-mask-image:url(../svg/icon_mail.svg);
  mask-image:url(../svg/icon_mail.svg);
  width:2.7rem;
  aspect-ratio: 27/24;
  @media (width <= 767px) {
    width:4.4rem;
  }
}

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