@charset "utf-8";
/* ==========================================================
   トップページ「アラキが選ばれる3つの理由」スマホ調整 v78（2026-09-12）
   目的：文字の見切れをなくす／意味の途中で折り返さない／カード内の横幅を使う
   範囲：index.html の .reasons-section の中だけ。他ページ・他セクションには影響しない
   変更していないもの：文字サイズ・色・縦方向の余白・文章
   ブレイクポイントは既存の 760px に合わせている（新しい境界を増やさない）
   ========================================================== */
@media (max-width: 760px) {

  /* 文節単位の改行は活かしたまま、長い文節はその中で折り返す。
     （style.css 1964行付近の white-space:nowrap が見切れの原因だった。
       inline-block を外すと読点での改行がなくなるため、nowrap だけを解除する） */
  .reasons-section .jp-phrase {
    display: inline-block;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
    vertical-align: baseline;
    box-sizing: border-box;
  }

  /* grid の子要素が最小幅で押し広げられて右にはみ出すのを防ぐ */
  .reasons-section .reason-row,
  .reasons-section .reason-row > *,
  .reasons-section .reason-content,
  .reasons-section .reason-marker {
    min-width: 0;
    box-sizing: border-box;
  }

  /* カード内の横幅を使う（左右 26px/22px → 16px。上下の余白は変えない） */
  .reasons-section .reason-row {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* REASON 02 の見出しを「肩から指先まで、／積み重ねてきた24年」の2行にする。
     PC では効かないので1行のまま */
  .reasons-section .reason-keep { white-space: nowrap; }
}