@charset "UTF-8";
/**************************************/
.under.service {
  padding-bottom: 0;
}
@media (max-width: 834px) {
  .under.service .under-mv--wide {
    margin-bottom: 0;
  }
}

/* -------------------------
 * イントロ
 * ------------------------- */
.service-intro.under-sec {
  padding-block: 0 10.5rem;
}

.service-intro__flex {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem 12%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 9rem;
}
@media (max-width: 834px) {
  .service-intro__flex {
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
  }
}

.service-intro__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 499px) {
  .service-intro__btns {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.service-intro__btn {
  border: solid 1px #c0bfbd;
  background-color: #fff;
  color: #262626;
}
@media (max-width: 499px) {
  .service-intro__btn {
    width: 100%;
  }
}

/* -------------------------
 * メインコンテンツ 
 * ------------------------- */
.service-main {
  padding-bottom: 11rem;
  background: #eef3f2;
}
@media (max-width: 834px) {
  .service-main {
    padding-bottom: 6rem;
  }
}

.service-main__item {
  padding-block: 7.5rem;
}
.service-main__item:first-child {
  padding-block: 12rem 7.5rem;
}

.service-main__item--cut {
  background-color: #edf3f2;
  background: url(../img/service/main_bg.webp) no-repeat top left/cover;
}

.service-main__item--color,
.service-main__item--care {
  background: #f6f9f9;
}

.service-main__item--perm {
  background: #eef3f2;
}

.service-main__item-flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 5%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 834px) {
  .service-main__item-flex {
    grid-template-columns: 1fr;
  }
}

.service-main__body {
  display: grid;
  grid-template-columns: auto 1fr;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 834px) {
  .service-main__body {
    grid-template-columns: 1fr;
    display: contents;
  }
}

.service-main__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-right: 1px solid #ddd;
  padding-right: 4rem;
  margin-right: 4rem;
}
@media (max-width: 834px) {
  .service-main__category {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media (max-width: 834px) {
  .service-main__category {
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding-right: 0rem;
    padding-bottom: 2rem;
    margin-right: 0rem;
  }
}
.service-main__category .num {
  line-height: 1;
}
.service-main__category .name {
  line-height: 1;
}

.service-main__ttl-wrap {
  font-weight: 500;
}

.service-main__txt {
  padding-block: 3rem 4rem;
}
@media (max-width: 834px) {
  .service-main__txt {
    padding-block: 2rem 3rem;
  }
}

@media (max-width: 834px) {
  .service-main__img {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

@media (max-width: 834px) {
  .service-main__txt-area {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

@media (max-width: 834px) {
  .service-main__btn {
    margin-inline: auto;
  }
}/*# sourceMappingURL=service.css.map */