/* ==========================================================
   ユーティリティ / ヘルパー (u- プレフィックス)
   BP: SP 〜767px / タブレット 768〜1023px / PC 1024px〜
   ========================================================== */

/* --- 表示切替(<br> の改行コントロール・要素の出し分け) ---
   例: <br class="u-sp">  … SPのみ改行
       <br class="u-pc">  … PCのみ改行
   ブロック要素に付ける場合は display: revert がその要素の既定値に戻す */
.u-sp,
.u-tb,
.u-pc {
  display: none;
}

@media (max-width: 767px) {
  .u-sp {
    display: revert;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-tb {
    display: revert;
  }
}

@media (min-width: 1024px) {
  .u-pc {
    display: revert;
  }
}

/* SP以外(タブレット+PC)/ PC以外(SP+タブレット) */
@media (min-width: 768px) {
  .u-not-pc-hide { /* 予備: 必要時に使用 */
  }
}

/* --- 語のまとまりで折り返す(中途半端な改行位置の防止) ---
   例: <span class="u-phrase">高精度な</span><span class="u-phrase">マークアップ</span> */
.u-phrase {
  display: inline-block;
}

/* --- 折り返し禁止 --- */
.u-nowrap {
  white-space: nowrap;
}

/* --- 視覚的に隠すがスクリーンリーダーには読ませる --- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- アニメーション抑制(アクセシビリティ) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}