/* ==========================================================================
   開発アプローチ・事例（approach.html）
   ========================================================================== */

/* 見出し帯のカバー画像（PC用 2400×1018 / スマホ用 1080×1080） */
.page-header--cover {
  background-image: var(--cover-overlay), url("../assets/covers/cover-approach-pc.jpg");
}

@media (max-width: 767px) {
  .page-header--cover {
    background-image: var(--cover-overlay), url("../assets/covers/cover-approach-sp.jpg");
  }
}

/* 事例の下はすぐCTAが続くため、下側の余白をなくして間を詰める */
.section--approach {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   比較表
   ※ スマホでは項目ごとのカード状に組み替えるため、<table> ではなく
     role="table" を付けた div をグリッドで組んでいる
   -------------------------------------------------------------------------- */
.compare {
  overflow-x: auto; /* 狭い画面では横スクロール */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--sw-white);
}

.compare__table {
  display: grid;
  grid-template-columns: 22% 1fr 1fr;
  width: 100%;
  min-width: 640px;
  font-size: 15px;
  line-height: 1.8;
}

/* 行要素は箱を作らず、セルを直接グリッドに並べる */
.compare__row {
  display: contents;
}

.compare__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
}

.compare__head--before {
  font-weight: 700;
  color: var(--text-muted);
}

.compare__head--after {
  font-weight: 700;
  background: var(--sw-navy-800);
  color: #fff;
}

.compare__cell {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.compare__cell--label {
  font-weight: 700;
  color: var(--text-heading);
}

.compare__cell--before {
  color: var(--text-muted);
}

.compare__cell--after {
  background: var(--surface-tint);
  color: var(--text-heading);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Before / After
   -------------------------------------------------------------------------- */
.demo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
}

.demo__media {
  aspect-ratio: 16 / 9;
}

.demo__caption {
  font-size: 14px;
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   課題解決事例
   -------------------------------------------------------------------------- */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
}

.case {
  padding-top: 6px;
}

.case__label {
  font-size: 12px;
  font-weight: 700;
}

.case__label--issue {
  color: var(--sw-warning);
}

.case__label--result {
  color: var(--brand-primary);
}

.case__result {
  color: var(--text-heading);
}

/* ==========================================================================
   レスポンシブ（639px 以下）
   比較表を横スクロールさせず、項目ごとのカード状に縦に積む
   ========================================================================== */
@media (max-width: 639px) {
  .compare {
    overflow-x: visible;
  }

  .compare__table {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  /* 列見出しは各セルのラベル（data-label）で代わりに表示する */
  .compare__head {
    display: none;
  }

  .compare__cell {
    border-bottom: none;
  }

  .compare__cell--label {
    padding: 20px 20px 10px;
  }

  /* 2項目目以降は上に区切り線（1行目は非表示の見出し行なので、3行目以降が対象） */
  .compare__row + .compare__row + .compare__row .compare__cell--label {
    border-top: 1px solid var(--border-default);
  }

  .compare__cell--before {
    padding: 0 20px 14px;
  }

  .compare__cell--after {
    margin: 0 12px 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
  }

  .compare__cell--before::before,
  .compare__cell--after::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .compare__cell--before::before {
    color: var(--text-muted);
  }

  .compare__cell--after::before {
    color: var(--brand-primary);
  }
}