/* ==========================================================================
   ページの先頭の見出し・ラベル・リード文の改行（2026-10-08 PM 指示 #11）
   --------------------------------------------------------------------------
   使い方: 先頭の見出し（h1）と、その上のラベル・下のリード文の要素に class="pw" を付け、
           ops/phrase-wrap.mjs を実行する（文節の切れ目に <wbr> が入る）。
   - 日本語・中国語・韓国語: <wbr>・空白・句読点の後ろ以外では折らない（keep-all）。
     1 つの文節が行の幅より長いときだけ、文節の中で折る（overflow-wrap: break-word）。
     anywhere にしない（見出しの balance が、語の中で折れる前提で行の長さを決めてしまうため）。
   - 見出し（h1）は行の長さをそろえる（balance）。ラベル・リード文は最後の行を短くしすぎない（pretty）。
   - .pw-p（ops/phrase-wrap.mjs が付ける）: 1 つの文節。文節の途中では折らない。
     文節が行の幅より長いときだけ、文節の中で、ふつうの日本語の決まり（行の頭に句読点・小書きの字を
     置かない）で折れる（inline-block の幅は行の幅を超えない）。
   - .pw-w（ops/phrase-wrap.mjs が付ける）: 6 字以上の文節の中の 1 語。文節が行の幅より長いときは、
     語と語の間で折れる（「監視／カメラ」。「カ／メラ」にしない）。
   - .pw-u（ops/phrase-wrap.mjs が付ける）: 「ICM-EventInsight」「Wi-Fi」「株式会社ＩＴＳＮ」のように、
     途中で折らない語。幅が足りないときだけ、語の中で折れる。
   文字の大きさ・色・余白は変えない。変わるのは行の分かれる位置だけ。
   ========================================================================== */
.pw {
  line-break: strict;
  text-wrap: pretty;
}
h1.pw {
  text-wrap: balance;
}
.pw:lang(ja),
.pw:lang(zh),
.pw:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pw-p {
  display: inline-block;
  word-break: normal;
}
.pw-w,
.pw-u {
  display: inline-block;
}
/* 9〜11 字の文節の中の補助の <wbr>（ops/phrase-wrap.mjs が付ける）は、画面の幅が 768px 以上では使わない。
   広い画面では、その長さの文節は行に収まるので、文節の途中で割らない。 */
@media (min-width: 768px) {
  .pw-s {
    display: none;
  }
}
/* 見出しのグラデーションの文字（.accent。background-clip: text と color: transparent）の中では、
   inline-block にしない。inline-block が 2 行に折れると、上の行にグラデーションが塗られず、
   文字が見えなくなるため。.accent の中は、<wbr> と keep-all だけで文節の途中で折らない。 */
.pw .accent .pw-p,
.pw .accent .pw-w,
.pw .accent .pw-u {
  display: inline;
  word-break: inherit;
}
/* .accent の中の、途中で折らない語（「Cloud-Based」など）は、行をまたがせない。
   ただし、見出しの全部が 1 語（「ICM-EventInsight」など）のときは、画面の幅より長いことがあるので、
   はみ出さないように語の中で折れるままにする。 */
.pw .accent .pw-u {
  white-space: nowrap;
}
.pw .accent .pw-u:only-child {
  white-space: normal;
}