/* ==========================================================================
   service-newbiz-issues-1.css — 02「よくある課題」3 カラム案
   --------------------------------------------------------------------------
   2026-09-15、三嶋のご指摘「3 行ではなく 3 カラムにできないか。なぜかダサい」から 3 案を出し、
   **案 C-1 で決着した**。**このファイルが本体（demo/service-newbiz/）の姿**になる。
   _page4.php が既定で読むので、hero/ と head/ の比較ページにも同じ姿で効く。
   比較の記録は demo/service-newbiz/issues/ に残してある（0 = 前の姿・2 / 3 = 不採用）。
   ★1024px 以上でだけ 3 カラムにする。それ未満は 3 行のまま。
     1024px 未満だと 1 カラムが 250px を切り、22px の和文が 1 行 11 字しか入らない。
     ★SP の姿はこの案でも変えていない。
   ★縦罫は使わず、余白だけで 3 カラムを分ける。角丸カードにしない。
   ★番号は最大 52px / 700 / navy-400。18.66px 以上かつ bold なので 3.21:1 で足りる。
   ========================================================================== */

@media (min-width: 1024px) {
  .nb-cols-1 .nb-issues__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 3 列の文字幅をそろえつつ、カラム内の余白は抑える。 */
    margin-inline: calc(var(--space-10) * -1);
    /* 上下の罫で «3 つで 1 つの帯» に見せる。行だったときの横罫の役割を引き継ぐ */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .nb-cols-1 .nb-issues__item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    /* ★★**この 1 行を消すと 3 列がガタガタになる**（2026-09-15 三嶋のご指摘で発覚）。
       li は ul の grid 行に合わせて **3 列とも同じ高さに引き伸ばされる**。
       このとき align-content の既定（normal ＝ stretch）だと、
       余った高さが **番号の行と中身の行に等分**され、中身が下へ押し下がる。
       中身が短い列ほど大きく押し下がるので、列ごとに文字の頭がずれる。
       実測（1425px）：01 と 03 は番号の行が 52px → **67.3px** に伸び、
       文字の頭が 1836px。02 だけ説明文が 3 行で余りが無く 1821px にいた。**15px のズレ。**
       align-content: start にすると余りは **下にまとめて残る**ので、3 列の頭がそろう。 */
    align-content: start;
    gap: var(--space-3);
    padding-block: var(--space-12);
    /* ★3 列とも同じ。片側だけ 0 にすると文字幅が割れて折れ方が変わる（上の注記） */
    padding-inline: var(--space-6);
    border-bottom: 0;
  }

  .nb-cols-1 .nb-issues__no {
    font-size: var(--text-5xl);
    line-height: var(--lh-none);
  }

  .nb-cols-1 .nb-issues__text {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    /* ★★カラムが狭いので «うまくいかなかった» が «う／まくいかなかった» と語中で折れる。
       文節で折る（Chrome 119 以降・1425px で実測）。
       Safari / Firefox は未対応だが、その場合は従来どおりの折り返しに戻るだけで壊れない。
       すでに demo/service-cat-1.css で使っている書き方に合わせた。 */
    word-break: auto-phrase;
  }

  /* 左から順に現れる。移動量は既定の 16px のまま、遅らせるだけ（ギミックにしない） */
  .nb-cols-1 .nb-issues__item:nth-child(2) {
    transition-delay: 80ms;
  }

  .nb-cols-1 .nb-issues__item:nth-child(3) {
    transition-delay: 160ms;
  }
}