@charset "UTF-8";
/* ============================================================
   「選ばれる理由」の見た目。組み方は template-parts/service/reasons.php。
   SNS・meta・インフルエンサー・クリエイティブの4ページで使う。ページだけの図（改善フロー図など）は各ページの CSS に残る。
   値は fiz-tokens.css（src/tokens.css の写し）を使う。2026-09-24 部品ごとの整理でここへ移動。
   ============================================================ */
/* ---- 選ばれる理由 ---- */
.svc-reason {
  background: var(--color-bg-soft);
}

.svc-reason__points {
  display: grid;
  gap: var(--space-16);
  margin-bottom: 32px;
}

.svc-reason__point {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-24);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1); /* Figma の note カードの影（DROP_SHADOW 0,2 / ぼかし8 / 黒10%）。抜けていたと本人指摘（2026-09-17） */
}

.svc-reason__point h3 {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-reason__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.svc-reason__point p {
  margin: 0;
  font-size: var(--font-size-body);
}



@media (min-width: 768px) {

  .svc-reason__points {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
  }

  /* 3つ横並びのとき、見出しの行と本文の行をカードどうしでそろえる（見出しが1行と2行で混ざっても本文の始まりがそろう。2026-09-27 本人指示） */
  .svc-reason__point {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
  }}