/* ============================================================
   pages/approach.css
   /approach/ ページ固有スタイル
   Design System v2.0 参照
============================================================ */

/* ---- セクション本文 -------------------------------------- */
.section-body {
  font-size:     var(--text-base);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-4);
  max-width:     720px;
}
.section-body:last-child {
  margin-bottom: 0;
}

/* ---- セクション背景バリアント（Flow セクション） ---------- */
.section--alt {
  background-color: var(--color-surface);
}

/* ---- アプローチ・フロー ---------------------------------- */
.approach-flow {
  list-style: none;
  padding:    0;
  margin:     0 auto;
  max-width:  720px;
}

.approach-step {
  display:       flex;
  gap:           var(--space-8);
  align-items:   flex-start;
  padding:       var(--space-10) 0;
  border-bottom: 1px solid var(--color-border);
}
.approach-step:first-child {
  padding-top: 0;
}
.approach-step:last-child {
  border-bottom:  none;
  padding-bottom: 0;
}

.approach-step__number {
  font-family: var(--font-en);
  font-size:   var(--text-h2);
  font-weight: var(--weight-bold);
  color:       var(--color-accent);
  line-height: 1;
  min-width:   3rem;
  flex-shrink: 0;
}

.approach-step__body {
  flex:        1;
  padding-top: var(--space-1);
}

.approach-step__title {
  font-size:     var(--text-h3);
  font-weight:   var(--weight-bold);
  color:         var(--color-text);
  line-height:   var(--leading-heading);
  margin-bottom: var(--space-3);
}

.approach-step__text {
  font-size:   var(--text-base);
  color:       var(--color-text-sub);
  line-height: var(--leading-body);
}

/* ---- モバイル対応（480px 以下） -------------------------- */
@media (max-width: 480px) {
  .approach-step__number {
    font-size: var(--text-h3);
    min-width: 2.5rem;
  }
}