/* ご利用の流れ：パソコンの専用寸法と配置。スマホの変更は../responsive.css。 */
/* このセクション固有の値（アイコンの丸の大きさ） */
:where([data-section="steps"][data-ui="nexa"]) {
  --steps-icon-size: 88px;
}

:where([data-section="steps"][data-ui="nexa"]).steps {
  padding-block: var(--space-section);
  overflow: hidden;
}

:where([data-section="steps"][data-ui="nexa"]) .steps__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-shade);
}

/* 4つを横に並べ、間に矢印 */
:where([data-section="steps"][data-ui="nexa"]) .steps__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-card-gap);
  margin-block-start: var(--space-heading);
}

:where([data-section="steps"][data-ui="nexa"]) .steps__item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-small);
  text-align: center;
}

:where([data-section="steps"][data-ui="nexa"]) .steps__item:not(:last-child)::after {
  content: "→";
  position: absolute;
  inset-block-start: calc(var(--steps-icon-size) / 2 + var(--font-size-number));
  inset-inline-end: calc(var(--space-card-gap) / -2);
  transform: translateX(50%);
  color: var(--color-primary);
  font-size: var(--font-size-card);
}

:where([data-section="steps"][data-ui="nexa"]) .steps__number {
  color: var(--color-primary);
  font-family: var(--font-latin);
  font-size: var(--font-size-number);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
}

:where([data-section="steps"][data-ui="nexa"]) .steps__icon {
  display: grid;
  place-items: center;
  width: var(--steps-icon-size);
  height: var(--steps-icon-size);
  border: var(--size-focus-line) solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  box-shadow: 0 0 var(--space-stack) var(--color-glow);
}

:where([data-section="steps"][data-ui="nexa"]) .steps__title {
  margin-block-start: var(--space-small);
  font-family: var(--font-title);
  font-size: var(--font-size-lead);
  font-weight: var(--weight-title);
  line-height: var(--line-heading);
}

:where([data-section="steps"][data-ui="nexa"]) .steps__text {
  color: var(--color-text-muted);
}