:root {
  --rate-vw: 0.0714285714vw;
  --rate-fz: 0.0714285714vw;
}
@media screen and (max-width: 767px) {
  :root {
    --rate-vw: 0.1333333333vw;
    --rate-fz: 0.1333333333vw;
  }
}

/*------------------------------
service
------------------------------*/
main.service {
  font-feature-settings: "palt";
}

.service__section {
  padding: clamp(0px, 130 * var(--rate-vw), 130px) 0;
}
@media (max-width: 767px) {
  .service__section {
    padding-top: clamp(0px, 100 * var(--rate-vw), 100px);
    padding-bottom: clamp(0px, 100 * var(--rate-vw), 100px);
  }
}

.service__section--odm {
  background: #282828;
  color: #fff;
  padding-top: clamp(0px, 100 * var(--rate-vw), 100px);
}
.service__section--odm .service__flow {
  border: 1px solid #fff;
}
.service__section--odm .service__flow-step li:nth-child(n+2)::before {
  background: url(../img/service/icon_arrow_wh.svg) no-repeat center center/cover;
}

.service__header {
  display: flex;
  align-items: flex-end;
}
@media (max-width: 767px) {
  .service__header {
    display: block;
  }
}

.service__title {
  font-size: clamp(0px, 83 * var(--rate-fz), 83px);
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  line-height: 0.7;
}
@media (max-width: 767px) {
  .service__title {
    text-align: center;
    font-size: clamp(0px, 143 * var(--rate-fz), 143px);
  }
}

.service__catch {
  font-size: clamp(0px, 29 * var(--rate-fz), 29px);
  font-weight: 700;
  letter-spacing: 0.12em;
  position: relative;
  margin-left: 0.6em;
  padding-left: 1.2em;
  font-feature-settings: "palt";
}
.service__catch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #02ba7b;
  -webkit-clip-path: polygon(65% 0, 100% 0, 35% 100%, 0% 100%);
          clip-path: polygon(65% 0, 100% 0, 35% 100%, 0% 100%);
  width: 1em;
  aspect-ratio: 31/29;
}
@media (max-width: 767px) {
  .service__catch {
    font-size: clamp(0px, 42 * var(--rate-fz), 42px);
    margin-left: 0;
    text-align: center;
    margin-top: clamp(0px, 40 * var(--rate-vw), 40px);
    line-height: 1.6;
  }
  .service__catch::before {
    top: 0.4em;
    left: 2.2em;
  }
}

@media (max-width: 767px) {
  .service__catch--2::before {
    left: 0.9em;
  }
}

.service__items {
  margin-top: clamp(0px, 40 * var(--rate-vw), 40px);
}
@media (max-width: 767px) {
  .service__items {
    margin-top: 9%;
  }
}

.service__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service__item:nth-child(2) {
  margin-top: clamp(0px, 50 * var(--rate-vw), 50px);
}
@media (max-width: 767px) {
  .service__item {
    flex-direction: column;
  }
  .service__item:nth-child(2) {
    margin-top: clamp(0px, 80 * var(--rate-vw), 80px);
  }
}

.service__item-image {
  width: calc(300 / 1100 * 100%);
}
@media (max-width: 767px) {
  .service__item-image {
    width: 100%;
  }
}

.service__item-body {
  width: calc(760 / 1100 * 100%);
}
@media (max-width: 767px) {
  .service__item-body {
    width: 100%;
    margin-top: clamp(0px, 40 * var(--rate-vw), 40px);
  }
}

.service__item-heading {
  font-size: clamp(0px, 21 * var(--rate-fz), 21px);
  font-weight: 700;
  line-height: 2.7619047619;
  letter-spacing: 0.12em;
}
@media (max-width: 767px) {
  .service__item-heading {
    font-size: clamp(0px, 38 * var(--rate-fz), 38px);
    line-height: 1.4736842105;
    text-align: center;
  }
}

.service__item-description {
  font-size: clamp(0px, 15 * var(--rate-fz), 15px);
  font-weight: 400;
  line-height: 1.9333333333;
  letter-spacing: 0.08em;
}
@media (max-width: 767px) {
  .service__item-description {
    font-size: clamp(0px, 36 * var(--rate-fz), 36px);
    line-height: 1.8055555556;
    margin-top: 0.7em;
  }
}

.service__flow {
  padding: clamp(0px, 40 * var(--rate-vw), 40px) 0 clamp(0px, 45 * var(--rate-vw), 45px);
  border: 1px solid #231815;
  margin-top: clamp(0px, 60 * var(--rate-vw), 60px);
}
@media (max-width: 767px) {
  .service__flow {
    padding: clamp(0px, 60 * var(--rate-vw), 60px) 0 clamp(0px, 70 * var(--rate-vw), 70px);
  }
}

.service__flow-title {
  font-size: clamp(0px, 24 * var(--rate-fz), 24px);
  font-weight: 700;
  line-height: 1.4583333333;
  letter-spacing: 0.12em;
  text-align: center;
}
@media (max-width: 767px) {
  .service__flow-title {
    font-size: clamp(0px, 41 * var(--rate-fz), 41px);
  }
}

.service__flow-step {
  display: flex;
  justify-content: center;
  margin-top: 2%;
  gap: 0 clamp(0px, 56 * var(--rate-vw), 56px);
}
.service__flow-step li {
  font-size: clamp(0px, 22 * var(--rate-fz), 22px);
  height: 9em;
  font-weight: 700;
  line-height: 1.5909090909;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  color: #fff;
  background: #02ba7b;
  border-radius: 1em;
  text-align: center;
}
.service__flow-step li:nth-child(n+2) {
  position: relative;
}
.service__flow-step li:nth-child(n+2)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-150%, -50%);
  background: url(../img/service/icon_arrow.svg) no-repeat center center/contain;
  width: 1.1em;
  aspect-ratio: 25.3/6.4;
}
@media (max-width: 767px) {
  .service__flow-step {
    display: block;
    margin-top: 4%;
  }
  .service__flow-step li {
    width: clamp(0px, 444 * var(--rate-vw), 444px);
    margin: 0 auto;
    writing-mode: unset;
    height: unset;
    font-size: clamp(0px, 38 * var(--rate-fz), 38px);
  }
  .service__flow-step li:nth-child(n+2) {
    margin-left: auto;
    margin-top: 7.7%;
  }
  .service__flow-step li:nth-child(n+2)::before {
    top: -50%;
    left: 50%;
    transform: translateX(-35%) rotate(90deg);
    width: 1em;
  }
}

/*------------------------------
point
------------------------------*/
.point {
  padding: clamp(0px, 130 * var(--rate-vw), 130px) 0 clamp(0px, 90 * var(--rate-vw), 90px);
}

.point__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.point__item:nth-child(n+2) {
  margin-top: clamp(0px, 45 * var(--rate-vw), 45px);
}
@media (max-width: 767px) {
  .point__item {
    flex-direction: column-reverse;
  }
  .point__item:nth-child(n+2) {
    margin-top: 15%; /*  */
  }
}

.point__item-body {
  width: calc(760 / 1100 * 100%);
}
@media (max-width: 767px) {
  .point__item-body {
    width: 100%;
    margin-top: clamp(0px, 60 * var(--rate-vw), 60px);
  }
}

.point__item-lable {
  display: inline-block;
  font-size: clamp(0px, 25 * var(--rate-fz), 25px);
  font-weight: 600;
  color: #fff;
  font-family: "Outfit", sans-serif;
  background: #02ba7b;
  padding: 0.2em 1em;
  border-radius: 2em;
}
@media (max-width: 767px) {
  .point__item-lable {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: clamp(0px, 52 * var(--rate-fz), 52px);
    margin: 0 auto;
    width: clamp(0px, 290 * var(--rate-vw), 290px);
    padding: 0.2em 0.8em;
  }
}

.point__item-heading {
  font-size: clamp(0px, 24 * var(--rate-fz), 24px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  margin-top: 0.6em;
}
@media (max-width: 767px) {
  .point__item-heading {
    font-size: clamp(0px, 38 * var(--rate-fz), 38px);
    margin-left: 50%;
    transform: translateX(-50%);
    width: 110%;
    text-align: center;
    line-height: 1.7;
  }
}

@media (max-width: 767px) {
  .point__item-heading--2 {
    letter-spacing: 0.02em;
  }
}

.point__item-description {
  font-size: clamp(0px, 15 * var(--rate-fz), 15px);
  font-weight: 400;
  line-height: 1.9333333333;
  letter-spacing: 0.1em;
  margin-top: 0.5em;
}
@media (max-width: 767px) {
  .point__item-description {
    font-size: clamp(0px, 36 * var(--rate-fz), 36px);
    margin-top: 0.6em; /*  */
    line-height: 1.8; /*  */
  }
}

.point__item-image {
  width: calc(300 / 1100 * 100%);
}
@media (max-width: 767px) {
  .point__item-image {
    width: 100%;
  }
}

/*------------------------------
values
------------------------------*/
.values {
  padding-bottom: clamp(0px, 80 * var(--rate-vw), 80px);
}
@media (max-width: 767px) {
  .values {
    padding-bottom: clamp(0px, 100 * var(--rate-vw), 100px);
  }
}

.values__header {
  background: #282828;
  padding: clamp(0px, 85 * var(--rate-vw), 85px) 0;
  color: #fff;
}

.values__header-wrapper {
  display: flex;
  align-items: flex-end;
}
@media (max-width: 767px) {
  .values__header-wrapper {
    display: block;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 110%;
  }
}

.values__title {
  font-size: clamp(0px, 93 * var(--rate-fz), 93px);
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  line-height: 0.7;
}
@media (max-width: 767px) {
  .values__title {
    text-align: center;
    font-size: clamp(0px, 151 * var(--rate-fz), 151px);
  }
}

.values__catch {
  margin-left: 0.6em;
  font-size: clamp(0px, 28 * var(--rate-fz), 28px);
  font-weight: 700;
  letter-spacing: 0.14em;
  position: relative;
  padding-left: 1.2em;
}
.values__catch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #02ba7b;
  -webkit-clip-path: polygon(65% 0, 100% 0, 35% 100%, 0% 100%);
          clip-path: polygon(65% 0, 100% 0, 35% 100%, 0% 100%);
  width: 1em;
  aspect-ratio: 31/29;
}
@media (max-width: 767px) {
  .values__catch {
    font-size: clamp(0px, 42 * var(--rate-fz), 42px);
    margin-left: 0.9em;
    margin-top: 1em;
  }
}

.values__item {
  display: flex;
  align-items: center;
  padding: clamp(0px, 40 * var(--rate-vw), 40px) 0;
}
.values__item:nth-child(n+2) {
  border-top: 1px solid #757473;
}
@media (min-width: 768px) {
  .values__item {
    height: clamp(0px, 135 * var(--rate-vw), 135px);
  }
}
@media (max-width: 767px) {
  .values__item {
    display: block;
    padding-top: clamp(0px, 60 * var(--rate-vw), 60px);
    padding-bottom: clamp(0px, 80 * var(--rate-vw), 80px);
  }
}

.values__item-meta {
  width: calc(325 / 1100 * 100%);
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .values__item-meta {
    width: 100%;
    justify-content: center;
  }
}

.values__item-number {
  font-size: clamp(0px, 60 * var(--rate-fz), 60px);
  font-weight: 600;
  font-family: "Outfit", sans-serif;
  width: 1.3em;
}
@media (max-width: 767px) {
  .values__item-number {
    font-size: clamp(0px, 102 * var(--rate-fz), 102px);
  }
}

.values__item-title {
  font-size: clamp(0px, 49 * var(--rate-fz), 49px);
  font-weight: 700;
  line-height: 1.2040816327;
  margin-left: 0.5em;
  letter-spacing: 0.2em;
}
@media (max-width: 767px) {
  .values__item-title {
    font-size: clamp(0px, 72 * var(--rate-fz), 72px);
  }
}

.values__item-description {
  width: calc(780 / 1100 * 100%);
  font-size: clamp(0px, 15 * var(--rate-fz), 15px);
  font-weight: 400;
  line-height: 1.9333333333;
  letter-spacing: 0.12em;
}
@media (max-width: 767px) {
  .values__item-description {
    width: 100%;
    font-size: clamp(0px, 36 * var(--rate-fz), 36px);
    margin-top: 0.6em;
    line-height: 1.75;
  }
}

.values__cta {
  margin-top: clamp(0px, 60 * var(--rate-vw), 60px);
}
@media (max-width: 767px) {
  .values__cta {
    margin-top: clamp(0px, 20 * var(--rate-vw), 20px);
  }
}
/*# sourceMappingURL=service.css.map */