@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"],.m-i-treat_in_out),
[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:currentColor;
}
[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(/recruit/assets/svg/arrow_right_a.svg);
  mask-image:url(/recruit/assets/svg/arrow_right_a.svg);
  width:1.1rem;
  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(/recruit/assets/svg/arrow_down_a.svg);
  mask-image:url(/recruit/assets/svg/arrow_down_a.svg);
  width:1.1rem;
  aspect-ratio: 1/1;
}

/* 下矢印A */
.m-i-arrow_down-B,
.m-i-bf-arrow_down-B::before,
.m-i-af-arrow_down-B::after {
  -webkit-mask-image:url(/recruit/assets/svg/arrow_down_b.svg);
  mask-image:url(/recruit/assets/svg/arrow_down_b.svg);
  width:1.2rem;
  aspect-ratio: 3/2;
}

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

/* JSDあしらい */
.m-i-treat,
.m-i-bf-treat::before,
.m-i-af-treat::after {
  -webkit-mask-image:url(/recruit/assets/svg/treat.svg);
  mask-image:url(/recruit/assets/svg/treat.svg);
  width:2.3rem;
  aspect-ratio: 23/30;
}

/* JSDあしらい外側 */
.m-i-treat_in_out {
  display:flex;
  justify-content: center;
  align-items: center;
  width:2.3rem;
  height:auto;
  aspect-ratio: 23/30;
  background-color:unset;
  position:relative;
}
.m-i-treat_in_out::before,
.m-i-treat_in_out::after {
  content:"";
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 23/30;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100%;
  mask-size:100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  position:absolute
}
.m-i-treat_in_out::before {
  -webkit-mask-image:url(/recruit/assets/svg/treat_in.svg);
  mask-image:url(/recruit/assets/svg/treat_in.svg);
  background-color:var(--cc-green-A);
}
.m-i-treat_in_out::after {
  -webkit-mask-image:url(/recruit/assets/svg/treat_out.svg);
  mask-image:url(/recruit/assets/svg/treat_out.svg);
  background-color:var(--cc-blue-A);
}
.p-c-reverse .m-i-treat_in_out::before,
.p-c-reverse .m-i-treat_in_out::after {
  background-color:currentColor;
}


/* 外部リンク */
.m-i-external,
.m-i-bf-external::before,
.m-i-af-external::after {
  -webkit-mask-image:url(/recruit/assets/svg/external.svg);
  mask-image:url(/recruit/assets/svg/external.svg);
  width:1.3rem;
  aspect-ratio: 1/1;
}


/* arroe
----------------------------------------------------------------------------- */
.m-arrow-A {
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:#fff;
  border-radius:50%;
  width:2.9rem;
  height:2.9rem;

  @media (width <= 767px) {
    width:2.1rem;
    height:2.1rem;
  }
  &::after {
    background-color:var(--cc-black-A);
  }

  &.-bd {
    border:1px solid var(--cc-black-A);
  }
}


/* 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:-2;
  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:hover) {
  .m-hover-opacity {
    transition:opacity var(--duration-hover-A);
  }
  .m-hover-opacity:hover {
    opacity:.6;
  }
}


/* セクションpadding-block
----------------------------------------------------------------------------- */
/* A */
.m-section_pb-A {
  padding-block:16.8rem 18.0rem;
  @media (width <= 767px) {
    padding-block:8.0rem 8.0rem;
  }
}
.m-section_pb-B {
  padding-block:14.0rem 14.0rem;
  @media (width <= 767px) {
    padding-block:6.0rem 6.0rem;
  }
}

/* セクションmargin-top
----------------------------------------------------------------------------- */
.m-section_mbs-A {
  margin-top:16.0rem;
  @media (width <= 767px) {
    margin-top:8.0rem;
  }
}
.m-section_mbs-B {
  margin-top:14.0rem;
  @media (width <= 767px) {
    margin-top:6.0rem;
  }
}
.m-section_mbs-C {
  margin-top:6.0rem;
  @media (width <= 767px) {
    margin-top:2.8rem;
  }
}


/* 白背景セクション
----------------------------------------------------------------------------- */
.m-section_white-A {
  background-color:rgb(from var(--cc-white-A) r g b / .6);
  border-radius:var(--radius-A);
  @media (width > 767px) {
    margin-inline:auto;
    padding:12.0rem 10.0rem 16.0rem;
    width:120.0rem;
  }
  @media (width <= 767px) {
    margin-inline:2.0rem;
    padding:6.0rem 2.5rem 8.0rem;
  }
}


/* グラデーションセクション
----------------------------------------------------------------------------- */
/* A */
.m-grad_section-A {
  position:relative;
  &::before,
  &::after {
    content:"";
    margin-inline:auto;
    background-image:linear-gradient(
      135deg,
      #7BFCE4 -45%,
      #6892EE 100%
    );
    position:absolute;
    inset-block:0;
    inset-inline:0;
    pointer-events: none;
    mix-blend-mode: multiply;
  }
  &::before {
    opacity:.25;
    z-index: -2;
  }
  &::after {
    opacity:.15;
    z-index: -1;
    @media (width > 767px) {
      width:140.0rem;
    }
    @media (width <= 767px) {
      width:calc(100% - 4.0rem);
    }
  }
}



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