/* workflow.css - Workflow / 導入フロー section */

.workflow {
  position: relative;
  padding: var(--sp-9) 0;
  background: var(--cal-bg);
  overflow: hidden;
}

/* --- Background circle motif ---------------------------------- */
.workflow__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.workflow__bg-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--cal-teal-tint);
}
.workflow__bg-circle--a { width: 380px; height: 380px; top: -140px; left: -180px; opacity: 0.5; }
.workflow__bg-circle--b { width: 280px; height: 280px; top: 28%; right: -130px; opacity: 0.55; }
.workflow__bg-circle--c { width: 320px; height: 320px; bottom: -160px; left: 38%; opacity: 0.4; }
.workflow__bg-circle--d { width: 220px; height: 220px; top: 62%; left: -100px; opacity: 0.45; }

.workflow__bg-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--cal-coral);
}
.workflow__bg-dot--a { width: 12px; height: 12px; top: 18%; right: 14%; }
.workflow__bg-dot--b { width: 8px;  height: 8px;  bottom: 22%; left: 16%; }

/* --- Inner container ------------------------------------------ */
.workflow__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* --- Header --------------------------------------------------- */
.workflow__header {
  text-align: center;
  margin-bottom: var(--sp-9);
}
.workflow__label {
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.workflow__heading {
  margin-bottom: var(--sp-4);
}
.workflow__lead {
  max-width: 36em;
  margin: 0 auto;
  color: var(--fg-2);
}

/* --- Steps list ----------------------------------------------- */
.workflow__steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  max-width: 880px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

/* Single 1px line through the icon column */
.workflow__steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--cal-line-strong);
  transform: translateX(-0.5px);
  z-index: 0;
}

.workflow__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  column-gap: var(--sp-6);
  z-index: 1;
}

/* Icon disc (88px) */
.workflow__icon {
  grid-column: 2;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--cal-white);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cal-teal);
  position: relative;
  z-index: 1;
}
.workflow__icon i,
.workflow__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

/* Alternating label position */
.workflow__text {
  display: block;
}
.workflow__step--left .workflow__text {
  grid-column: 1;
  text-align: right;
}
.workflow__step--right .workflow__text {
  grid-column: 3;
  text-align: left;
}

.workflow__step-num {
  display: block;
  margin-bottom: var(--sp-2);
}
.workflow__step-title {
  margin-bottom: var(--sp-2);
}
.workflow__step-desc {
  margin: 0;
  max-width: 28em;
}
.workflow__step--left .workflow__step-desc { margin-left: auto; }
.workflow__step--right .workflow__step-desc { margin-right: auto; }

/* --- Sub-cards under final step ------------------------------- */
.workflow__sub {
  position: relative;
  z-index: 1;
  margin: var(--sp-7) auto 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
}
.workflow__sub-card {
  background: var(--cal-white);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.workflow__sub-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cal-teal-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cal-teal);
}
.workflow__sub-icon i,
.workflow__sub-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}
.workflow__sub-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* --- Note ----------------------------------------------------- */
.workflow__note {
  margin: var(--sp-7) auto 0;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  max-width: 36em;
}

/* --- Scroll-in animation -------------------------------------- */
.workflow__step,
.workflow__sub-card {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.workflow__step.is-visible,
.workflow__sub-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Tablet / mobile ------------------------------------------ */
@media (max-width: 768px) {
  .workflow {
    padding: var(--sp-7) 0;
  }
  .workflow__header {
    margin-bottom: var(--sp-7);
  }
  .workflow__steps {
    gap: var(--sp-6);
    max-width: 480px;
  }
  .workflow__step {
    grid-template-columns: 1fr;
    row-gap: var(--sp-3);
    text-align: center;
  }
  .workflow__icon {
    grid-column: 1;
    margin: 0 auto;
    width: 64px;
    height: 64px;
  }
  .workflow__icon i,
  .workflow__icon svg {
    width: 24px;
    height: 24px;
  }
  .workflow__step--left .workflow__text,
  .workflow__step--right .workflow__text {
    grid-column: 1;
    text-align: center;
  }
  .workflow__step--left .workflow__step-desc,
  .workflow__step--right .workflow__step-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .workflow__sub {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  /* Tone down circles on small screens */
  .workflow__bg-circle--a { width: 220px; height: 220px; top: -80px; left: -120px; }
  .workflow__bg-circle--b { width: 180px; height: 180px; right: -90px; }
  .workflow__bg-circle--c { width: 200px; height: 200px; bottom: -100px; }
  .workflow__bg-circle--d { width: 140px; height: 140px; }
}

/* --- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .workflow__step,
  .workflow__sub-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}