/* ============================================================
   @kit-token  typography-ja.css
   @status     beta
   @since      0.3.0
   @source     北商物産
   @todo       ルビ・縦組みは未対応（必要な案件が出たら足す）

   和文の折り返し制御。site.css より後に読み込む。

   なぜ独立ファイルなのか：
   「改行が気持ち悪い」は案件ごとの手直しでは消えず、毎回同じ指摘を受ける。
   原因は word-break: auto-phrase（文節で折る指定）が Chrome 系にしか
   実装されておらず、Safari＝iPhone と Firefox では効かないこと。
   auto-phrase に頼る限り、制作側の Chrome では綺麗に見えて
   閲覧者の iPhone では語の途中で折れる、という食い違いが必ず残る。

   よってこのファイルの原則は「auto-phrase に依存しない」。
   全ブラウザで効く手段（.np）を実体とし、auto-phrase は
   効けば少し良くなる上乗せとしてのみ使う。
   ============================================================ */

:root {
  /* 行長の上限。和文は1行30〜40字を超えると視線の戻りが辛くなる */
  --measure-ja:      34em;   /* 通常の本文・リード */
  --measure-ja-lead: 26em;   /* センター寄せの本文はさらに短く */
  --bp-ja-br:        900px;  /* .br-pc が効き始める幅 */
}

/* ------------------------------------------------------------
   1. 全ブラウザで効く土台
   ------------------------------------------------------------ */
html {
  /* 行頭に小書き仮名・長音符・拗促音を送らない（禁則） */
  line-break: strict;
  /* 長いURLや型番がコンテナを突き破らないように */
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   2. 文節を割らせない実体（全ブラウザ）

   <span class="np">対応できる、</span> の内部では改行されず、
   span と span の境界だけが改行位置になる。

   inline-block の幅は shrink-to-fit ＝ min(max-content, 利用可能幅) なので、
   コンテナより長い塊は内部で折り返す。つまり溢れることはなく、
   「折れないと困る場面では従来どおり折れる」安全側に倒れる。
   ------------------------------------------------------------ */
.np { display: inline-block; }

/* ------------------------------------------------------------
   3. PC幅だけで効かせる意図的な改行

   デザイン上2行で組みたい見出しに <br class="br-pc"> を入れる。
   狭い画面では無効になり、自動の折り返しに任せる。
   素の <br> を見出しに直接書かないこと（全幅で固定発火して行が割れる）。
   ------------------------------------------------------------ */
.br-pc { display: none; }
@media (min-width: 900px) { .br-pc { display: inline; } }

/* ------------------------------------------------------------
   4. 行長の上限ユーティリティ
   ------------------------------------------------------------ */
.measure      { max-width: var(--measure-ja); }
.measure-lead { max-width: var(--measure-ja-lead); }
.measure.is-center,
.measure-lead.is-center { margin-inline: auto; }

/* ------------------------------------------------------------
   5. Chrome 系だけの上乗せ（無くても崩れない）

   .np を打っていない一般の見出しが、Chrome では文節で折れるようになる。
   これが効かない環境が前提なので、ここに頼った設計にはしない。
   ------------------------------------------------------------ */
@supports (word-break: auto-phrase) {
  .h-ja,
  .sec-title, .hero__title, .page-hero__title, .block__title,
  .svc__title, .news__title, .sub-h, .tile__cap .ja,
  .loc__info h4, .policy__item h3, .brand .ja, .footer__brand .ja {
    word-break: auto-phrase;
  }

  /* リード級の短い段落にも効かせる（「貢献してま／いりました」を防ぐ）。
     効かない環境では従来どおり任意位置で折れるだけで、破綻はしない。
     住所や沿革のような長文の表組みには入れない
     ── 行末が文節に丸められる分だけ右端のラグが大きくなるため。 */
  .hero__lead, .sec-lead, .message__body, .loc__info p {
    word-break: auto-phrase;
  }

  /* .svc__desc（事業カードの説明文）は入れない。
     カードは幅が狭いので、文節で丸めると行末が揃わず
     カードの右側が不自然に空いて見える。ここは行末まで詰める。
     （2026-08-17 指示。auto-phrase の効かない iPhone/Firefox が本来の見え方） */
}