/* ==========================================================================
   service-newbiz-3.css — 02「こんな課題」／04「なぜ起きるのか」を主役にするときの見せ方
   --------------------------------------------------------------------------
   ★案 N-3 は 2 つとも使う。案 N-4 は .nb3-issues だけを使う
     （04 は案 N-1 と同じ既定の 2 列にする・2026-09-14 三嶋指示）。

   ★02 は紺地。7 項目を大きな文字で並べ、読み飛ばさせない。
   ★04 は白地のまま、1 段組みにして 1 要因ずつ読ませる。
     既定（768px 以上で 2 列）だと «一覧» に見え、読み物にならない。
   ★紺地の文字色は白と navy-200 だけ。navy-400 は使わない。
   ========================================================================== */

.nb3-issues .nb-issues__text {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
}

.nb3-issues .nb-issues__no {
  font-size: var(--text-3xl);
}

/* --------------------------------------------------------------------------
   04 なぜ起きるのか — 1 段組みに戻す
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .nb3-cause .nb-cause__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
}

.nb3-cause .nb-cause__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .nb3-cause .nb-cause__item {
    /* ★22em。要因名が確定原稿の勝ち筋 5 要素になり、最長「精度の高いペルソナ設定」が
       11 字 × 32px = 352px 必要になった。16em（＝272px）だと
       «精度の高いペルソ／ナ設定» と語中で折れる（1425px で実測）。
       22em = 374px で 1 行に収まる。 */
    grid-template-columns: 22em minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }

  .nb3-cause .nb-cause__key {
    grid-column: 1;
    grid-row: 1;
  }

  .nb3-cause .nb-cause__name {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  .nb3-cause .nb-cause__body {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.nb3-cause .nb-cause__name {
  font-size: var(--text-3xl);
}

.nb3-cause .nb-cause__body {
  max-width: var(--measure);
  font-size: var(--text-lg);
}