@charset "UTF-8";

/*===============================================================

	service

===============================================================*/

.section-header .service-heading {
  position: relative;
  margin-top: calc(var(--margin) * 4) !important;
  padding-bottom: .75em;
}
.main .section:first-child .section-header .service-heading {
  margin-top: calc(var(--margin) * 2) !important;
}
.service-heading::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,0);
  width: 90px;
  height: 4px;
  background-color: rgb(var(--color-primary));
}

.service-block {
  position: relative;
}
.service-block + .service-block {
  margin-top: var(--margin-l);
}
.service-body {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0,-50%);
  width: 50%;
  max-width: 620px;
  background-color: #fff;
  padding: calc(var(--margin) * 1.5);
}
.reverse .service-body {
  left: 0;
  right: auto;
  transform: translate(0,-50%);
}
.service-figure {
  width: 64%;
  margin-left: 0;
}
.reverse .service-figure {
  margin-left: auto;
  margin-right: 0;
}

.service-shopify {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc( var(--margin) * 1.5 );
  padding: calc( var(--margin) * 1.5 ) var(--margin);
  background-color: rgba( var(--color-primary-light), .3);
}
.service-shopify-badge {
  width: 40%;
  max-width: 200px;
}

@media (max-width: 768px) {
  .service-body {
    position: static;
    transform: none;
    width: auto;
    padding: 0;
    margin-top: var(--margin);
  }
  .reverse .service-body {
    transform: none;
  }
  .service-figure {
    width: auto;
  }
}


.service-slider {
  width: 80%;
}
.service-slider-cg {
  margin-left: calc( -1 * var(--margin) );
}
.service-slider-web {
  margin-right: calc( -1 * var(--margin) );
}
.service-slider figure {
  max-width: 960px;
}
@media (max-width: 768px) {
  .service-slider {
    width: 100vw;
  }
  .service-slider figure {
    max-width: 100vw;
  }
  .service-slider-cg {
    margin-right: calc( -1 * var(--margin) );
  }
  .service-slider-web {
    margin-left: calc( -1 * var(--margin) );
  }
}