/* Intersect: services. BEM CSS. ビルド不要で直接編集できます。 */

.services__page {
  min-height: 100vh;
  background-color: var(--color-white);
}
.services__logistics {
  overflow: hidden;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-zinc-100);
  padding-block: calc(var(--spacing) * 16);
}
@media (width >= 48rem) {
  .services__logistics {
    padding-block: calc(var(--spacing) * 24);
  }
}
.services__inner {
  margin-inline: auto;
  max-width: var(--container-7xl);
  padding-inline: var(--space-6);
}
@media (width >= 64rem) {
  .services__inner {
    padding-inline: calc(var(--spacing) * 8);
  }
}
.services__columns {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: flex-start;
  gap: calc(var(--spacing) * 12);
}
@media (width >= 64rem) {
  .services__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .services__columns {
    gap: calc(var(--spacing) * 16);
  }
}
.services__service-eyebrow {
  margin-bottom: calc(var(--spacing) * 3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  text-transform: uppercase;
}
@media (width >= 48rem) {
  .services__service-eyebrow {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
}
.services__heading {
  margin-bottom: calc(var(--spacing) * 6);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-zinc-900);
}
@media (width >= 40rem) {
  .services__heading {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}
.services__lead {
  margin-bottom: calc(var(--spacing) * 8);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-zinc-600);
}
@media (width >= 48rem) {
  .services__lead {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
}
:where(.services__features > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(
    calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
  );
  margin-block-end: calc(
    calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
  );
}
.services__features {
  padding-top: calc(var(--spacing) * 2);
}
.services__feature-card {
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-accent);
  background-color: var(--color-zinc-50);
  padding: calc(var(--spacing) * 5);
}
.services__feature-title {
  margin-bottom: calc(var(--spacing) * 1.5);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-zinc-900);
}
.services__feature-icon {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  flex-shrink: 0;
  color: var(--color-accent);
}
.services__feature-text {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-zinc-600);
}
.services__logistics-image {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-zinc-100);
  --tw-shadow:
    0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
    0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow:
    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 40rem) {
  .services__logistics-image {
    aspect-ratio: 16/10;
  }
}
@media (width >= 64rem) {
  .services__logistics-image {
    aspect-ratio: 4/3;
  }
}
.services__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}
.services__image-shade {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  --tw-gradient-position: to top in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: color-mix(
    in srgb,
    oklch(14.1% 0.005 285.823) 40%,
    transparent
  );
}
@supports (color: color-mix(in lab, red, red)) {
  .services__image-shade {
    --tw-gradient-from: color-mix(
      in oklab,
      var(--color-zinc-950) 40%,
      transparent
    );
  }
}
.services__image-shade {
  --tw-gradient-via: transparent;
  --tw-gradient-via-stops:
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  );
}
.services__image-caption {
  position: absolute;
  bottom: calc(var(--spacing) * 6);
  left: calc(var(--spacing) * 6);
  background-color: color-mix(in srgb, #0b1644 85%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
  .services__image-caption {
    background-color: color-mix(in oklab, var(--color-accent) 85%, transparent);
  }
}
.services__image-caption {
  padding-inline: calc(var(--spacing) * 3.5);
  padding-block: calc(var(--spacing) * 1.5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
  color: var(--color-white);
  text-transform: uppercase;
  --tw-shadow:
    0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
    0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow:
    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,)
    var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
    var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
    var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
    var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
    var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
    var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
    var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
    var(--tw-backdrop-sepia,);
}
.services__hvac {
  overflow: hidden;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-zinc-200);
  background-color: color-mix(
    in srgb,
    oklch(96.7% 0.001 286.375) 80%,
    transparent
  );
}
@supports (color: color-mix(in lab, red, red)) {
  .services__hvac {
    background-color: color-mix(
      in oklab,
      var(--color-zinc-100) 80%,
      transparent
    );
  }
}
.services__hvac {
  padding-block: calc(var(--spacing) * 16);
}
@media (width >= 48rem) {
  .services__hvac {
    padding-block: calc(var(--spacing) * 24);
  }
}
.services__hvac-image {
  position: relative;
  order: 2;
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-zinc-200);
  --tw-shadow:
    0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
    0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow:
    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@media (width >= 40rem) {
  .services__hvac-image {
    aspect-ratio: 16/10;
  }
}
@media (width >= 64rem) {
  .services__hvac-image {
    order: 1;
  }
}
@media (width >= 64rem) {
  .services__hvac-image {
    aspect-ratio: 4/3;
  }
}
.services__hvac-photo {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.services__hvac-content {
  order: 1;
}
@media (width >= 64rem) {
  .services__hvac-content {
    order: 2;
  }
}
.services__hvac-feature-card {
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-accent);
  background-color: var(--color-white);
  padding: calc(var(--spacing) * 5);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow:
    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.services__workflow {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-zinc-100);
  background-color: var(--color-white);
  padding-block: calc(var(--spacing) * 20);
}
@media (width >= 48rem) {
  .services__workflow {
    padding-block: calc(var(--spacing) * 28);
  }
}
.services__workflow-heading {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing) * 16);
  max-width: var(--container-2xl);
  text-align: center;
}
.services__workflow-eyebrow {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  text-transform: uppercase;
}
@media (width >= 48rem) {
  .services__workflow-eyebrow {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
}
.services__workflow-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-zinc-900);
}
@media (width >= 48rem) {
  .services__workflow-title {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}
.services__workflow-description {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-zinc-500);
}
@media (width >= 48rem) {
  .services__workflow-description {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
}
.services__steps {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 8);
}
@media (width >= 48rem) {
  .services__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .services__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.services__step-card {
  position: relative;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-zinc-200);
  background-color: var(--color-zinc-50);
  padding: calc(var(--spacing) * 6);
}
@media (width >= 48rem) {
  .services__step-card {
    padding: calc(var(--spacing) * 8);
  }
}
.services__step-number {
  margin-bottom: calc(var(--spacing) * 4);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent);
  opacity: 80%;
}
.services__step-title {
  margin-bottom: calc(var(--spacing) * 2.5);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-zinc-900);
}