/* ==========================================================================
   utilities.css — ユーティリティ層（u-*）

   置くのは PC / SP の表示切り替えと、改行位置の制御だけ。余白や装飾の
   ユーティリティは作らない（c-* / p-* の責務を侵食させないため）。
   詳細は docs/sp-strategy.md の決定10。

   読み込み順は pages/*.css の後、最後。表示切り替えを確実に勝たせる。
   全ページへ同じパス・属性・位置で置く（Swup Head Plugin がheadを
   差し替えるため、1枚でも欠けたり順序が違うと遷移時に不整合が出る）。

   ブレークポイントは SP 用の1本だけ（max-width: 767px / 決定2）。
   ========================================================================== */

/* PC専用。SPで隠す。
   p内の固定 <br> へ付ける用途が主で、PC表示は一切変えない（決定9） */
@media (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}

/* SP専用。768px以上で隠す */
@media (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}

/* 文節のかたまり。span と span の間だけで折り返させる。
   日本語はどこでも折れるため、幅が変わると「…をする／ことです。」のように
   文節の途中で切れる。包んだ範囲を1つの塊として扱わせて折り位置を決める。

   white-space: nowrap は付けない。付けると1つの塊が行に入らないときに
   溢れる。inline-block なら、その塊だけは中でも折れて逃げ道が残る。

   固定の <br class="u-pc"> / <br class="u-sp"> と役割が違う。<br> は
   「その帯で必ず折る位置」、こちらは「折ってよい位置」を決める。

   注意。inline-block は自分の行ボックス（親の line-height 分の高さ）を
   ベースラインで置くので、行間の広いテキストでは親の行が数px背伸びする。
   背景を持つテキスト（box-decoration-break: clone など）では箱の見え方が
   変わるので、そこには使わず <br class="u-sp"> で折る。 */
.u-phrase {
  display: inline-block;
}