/* steps.css — 業務診断の流れ（Figma: Frame 1753 2247:65310 / STEP）
   実値: 透かしSTEP 200px青グラデ / 青矢羽根帯 1535x567（左-156 上682）
         見出し 42.67px Black 中央 + 青バー / カード グレーグラデ radius 20
         px32 py24 gap16 / 番号 21.33px 青 / タイトル 24px Bold ls 0.08em
         画像 正方形 / 本文 16px lh1.8 / 役割分担タグ */

.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-240);
  padding-bottom: var(--space-40);
  overflow: hidden;
}

.steps__watermark {
  position: absolute;
  top: 6.9375rem;
  /* 1440pxカンバスで左85px（中央から-635px）。1440px超は中央基準で追従 */
  left: max(5.3125rem, calc(50% - 39.6875rem));
  z-index: 1; /* 青帯（steps__bg）より手前に出す */
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-watermark-gray); /* Figma実値: グレー→淡青 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.3; /* Figma実値 */
  pointer-events: none;
}

/* 上部の青い矢羽根帯（Figma: 1535x567 左-156 上115.87・上下反転） */
.steps__bg {
  position: absolute;
  top: 7.25rem;
  left: -9.75rem;
  /* 1440pxで右端まで61px残し。1440px超は差分を足して同じ見え方を維持 */
  width: max(95.9375rem, calc(100% + 5.9375rem));
  height: 35.4375rem;
  pointer-events: none;
}

/* 右上のイラスト（Figma: ⑦ 410x410 左998 上-98） */
.steps__deco {
  position: absolute;
  top: -6.1875rem;
  /* 1440pxカンバスで左998px（中央から+278px）。1440px超は中央基準で追従 */
  left: max(62.375rem, calc(50% + 17.375rem));
  width: 25.625rem;
  height: 25.625rem;
  pointer-events: none;
}

.steps__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: 0 var(--space-120);
}

.steps__title {
  margin: 0;
  color: var(--color-white); /* Figma: 青帯の上なので白 */
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.steps__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-white); /* Figma: 青帯の上なので白 */
}

.steps__rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--layout-max);
  margin-top: var(--space-48);
}

.steps__row {
  display: flex;
  align-items: stretch; /* Figma: カードは h-full で高さ揃え（上端・役割分担が揃う） */
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__row > .steps__card-item {
  display: flex;
  flex: 0 1 29.64%; /* Figma: 355.67/1200 */
  min-width: 0;
}

/* カード間・行末の » 矢印（Figma実値: 幅31px。ここが広いとカードが痩せる） */
.steps__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.9375rem;
}

.steps__arrow::after {
  content: "";
  width: 1.9375rem;
  height: 1.6875rem; /* アウトライン化chevronの実寸比 32.26:27.47（旧20pxだと縦が潰れる） */
  background: url("../../images/icon-double-chevron.svg") center / contain no-repeat;
}

.step-card {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius-20);
  background: var(--gradient-panel-gray);
}

.step-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.step-card__number {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.step-card__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  letter-spacing: 0.08em; /* Figma実値 1.92px/24px */
}

.step-card__divider {
  display: block;
  width: 100%;
  border-top: 2px solid var(--color-primary);
}

.step-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.step-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-card__text {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  text-align: justify;
}

.step-card__roles {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: auto;
  padding: var(--space-8) 0;
}

.step-card__roles-label {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  white-space: nowrap;
}

.step-card__tags {
  display: flex;
  gap: var(--space-8);
}

.step-card__tag {
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  white-space: nowrap;
}

.step-card__tag--client {
  background: var(--color-tag-yellow);
  color: var(--color-black);
}

/* --- 青帯バリアント（Figma: AIおたすけ隊 Frame 1753 2247:65893）----------
   実値: 帯 1564x703 上116.26 / 透かし グレーグラデ op.3 / 見出し・バー 白
         カード 4枚 252.75/1200 gap16 / 矢印 31px */

.steps--band {
  padding-bottom: var(--space-160);
  overflow: visible; /* 右上イラストがセクション上端からはみ出す（Figma準拠） */
}

.steps--band .steps__bg {
  top: 7.26625rem; /* ⚠ Figma実値 116.26px（y819.26の上下反転ベクター） */
  left: 0;
  /* 1440pxで右端まで32px残し。1440px超は差分を足して同じ見え方を維持 */
  width: max(88rem, calc(100% - 2rem));
  height: 43.9375rem;
}

.steps--band .steps__watermark {
  z-index: 1; /* 帯（steps__bg）より手前 */
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.3;
}

/* 帯の上では矢印を白に */
.steps--band .steps__arrow::after {
  background: var(--color-white);
  mask: url("../../images/icon-double-chevron.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-double-chevron.svg") center / contain no-repeat;
}

.steps--band .steps__title {
  color: var(--color-white);
  font-weight: var(--font-weight-bold); /* Figma: AIおたすけ隊の見出しはBold（Blackではない） */
  line-height: var(--line-height-body); /* Figma実値 68px/42.67px */
  letter-spacing: normal; /* Figma: この見出しはtracking無し */
}

.steps--band .steps__bar {
  background: var(--color-white);
}

/* 番号とタイトルの間（Figma: head gap 8px） */
.steps--band .step-card__head {
  gap: var(--space-8);
}

/* 本文はFigma準拠で左揃え（justifyだとLatin混じりの行が間延びするため） */
.steps--band .step-card__text {
  text-align: left;
}

.steps--band .steps__rows {
  margin-top: var(--space-40);
}

.steps--band .steps__row {
  gap: var(--space-16);
}

.steps--band .steps__row > .steps__card-item {
  flex: 0 1 21.0625%; /* Figma: 252.75/1200 */
}

.steps--band .steps__arrow {
  width: 1.9375rem;
}

/* 画像・役割分担なしの簡易カード（Figma: 2247:65901） */
.step-card--simple {
  gap: var(--space-32);
  padding: var(--space-32) var(--space-24);
  box-shadow: var(--shadow-step);
}

.step-card--simple .step-card__number {
  font-size: var(--font-size-h3-lg);
}

.step-card--simple .step-card__title {
  line-height: 2.5rem; /* ⚠ Figma実値 */
  letter-spacing: 0.03em; /* ⚠ Figma実値 0.72px/24px */
}

/* --- SP: カードは縦積み・矢印は下向きに ------------------------------------ */
@media (max-width: 767px) {
  /* SPは矢羽根帯（PCの装飾）をやめ、青ベタ塗りにする。
     塗りは最後のカードの中央あたりで終わらせる。位置はセクション下端から測る
     ＝ 下padding + 最後のカードの高さの約半分。上のカードの高さが変わってもズレにくい。
     カードの高さはページごとに違うので、切る位置は --steps-blue-cut で持つ。 */
  .steps {
    --steps-blue-cut: 22rem; /* 下padding40px + カード高さ485pxの半分 */
    padding-top: var(--space-48);
    background: linear-gradient(
      to top,
      transparent 0 var(--steps-blue-cut),
      var(--color-primary) var(--steps-blue-cut)
    );
    overflow: visible; /* イラストがセクション上端からはみ出すのを見せる */
  }
  /* --band（AIおたすけ隊）は下padding40px + カード高さ209pxの半分 */
  .steps--band {
    --steps-blue-cut: 10.5rem;
  }
  /* 透かしの位置は section.css の .section__watermark（トップ）に合わせる */
  .steps__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
  }
  .steps__bg,
  .steps--band .steps__bg,
  .step-card__divider {
    display: none;
  }
  /* 右上イラストは縮小して見出し右上に残す */
  .steps__deco {
    top: -6rem;
    left: auto;
    right: calc(-1 * var(--space-16));
    width: 10rem;
    height: 10rem;
  }
  .steps__heading {
    padding: 0 var(--space-24);
  }
  .steps__title {
    font-size: var(--font-size-h2);
  }
  .steps__rows,
  .steps--band .steps__rows {
    gap: var(--space-16);
    padding: 0 var(--space-24);
  }
  .steps__row,
  .steps--band .steps__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }
  .steps__row > .steps__card-item,
  .steps--band .steps__row > .steps__card-item {
    flex: none;
  }
  .steps__arrow,
  .steps--band .steps__arrow {
    width: 100%;
    justify-content: center;
  }
  /* SPは青地なので矢印を白に（--band と同じくmaskで塗り替える） */
  .steps__arrow::after {
    transform: rotate(90deg);
    background: var(--color-white);
    mask: url("../../images/icon-double-chevron.svg") center / contain no-repeat;
    -webkit-mask: url("../../images/icon-double-chevron.svg") center / contain no-repeat;
  }
  .page-template-page-ai .step-card--simple {
    min-height: 0;
  }
  /* 役割分担タグは小さなバッジなので、隣の「役割分担」ラベル（body）より2段階下げる */
  .step-card__tag {
    font-size: var(--font-size-h6);
  }
}