/* ==========================================================================
   ユーティリティクラス — ReSpark サービスサイト
   ========================================================================== */

/* ============================================
   言語・数字クラス
   ============================================ */
.__lang-en {
  font-family: var(--ff-en);
  letter-spacing: var(--letter-spacing-en);
}

.__lang-ja {
  font-family: var(--font-family);
}

.font-num {
  font-family: var(--ff-en);
  font-feature-settings: "tnum";
}

/* ============================================
   表示・非表示 (ブレークポイント別)
   ============================================ */
.u-hide       { display: none !important; }
.u-show       { display: block !important; }
.u-show-flex  { display: flex !important; }
.u-show-grid  { display: grid !important; }

.u-sp-only    { display: block; }
.u-tablet-up  { display: none; }
.u-pc-only    { display: none; }

@media (min-width: 48em) {
  .u-sp-only   { display: none; }
  .u-tablet-up { display: block; }
}

@media (min-width: 64em) {
  .u-pc-only   { display: block; }
  .u-pc-hide   { display: none !important; }
}

/* ============================================
   テキスト揃え
   ============================================ */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

/* ============================================
   マージン (bottom)
   ============================================ */
.u-mb-xs  { margin-bottom: var(--space-xs); }
.u-mb-sm  { margin-bottom: var(--space-sm); }
.u-mb-md  { margin-bottom: var(--space-md); }
.u-mb-lg  { margin-bottom: var(--space-lg); }
.u-mb-xl  { margin-bottom: var(--space-xl); }
.u-mb-2xl { margin-bottom: var(--space-2xl); }
.u-mb-3xl { margin-bottom: var(--space-3xl); }
.u-mb-4xl { margin-bottom: var(--space-4xl); }

/* ============================================
   マージン (top)
   ============================================ */
.u-mt-xs  { margin-top: var(--space-xs); }
.u-mt-sm  { margin-top: var(--space-sm); }
.u-mt-md  { margin-top: var(--space-md); }
.u-mt-lg  { margin-top: var(--space-lg); }
.u-mt-xl  { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
.u-mt-3xl { margin-top: var(--space-3xl); }
.u-mt-4xl { margin-top: var(--space-4xl); }

/* ============================================
   パディング
   ============================================ */
.u-p-sm  { padding: var(--space-sm); }
.u-p-md  { padding: var(--space-md); }
.u-p-lg  { padding: var(--space-lg); }
.u-p-xl  { padding: var(--space-xl); }

.u-px-md { padding-inline: var(--space-md); }
.u-px-lg { padding-inline: var(--space-lg); }
.u-py-md { padding-block:  var(--space-md); }
.u-py-lg { padding-block:  var(--space-lg); }

/* ============================================
   アクセシビリティ
   ============================================ */
.u-sr-only,
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ============================================
   ハイライト (マーカー)
   ============================================ */
.u-marker {
  background: linear-gradient(transparent 60%, rgba(var(--color-cyan-rgb), 0.6) 60%);
}

.u-marker--lime {
  background: linear-gradient(transparent 60%, var(--color-lime) 60%);
}

/* ライム pill ハイライト（インライン強調・サンクスページ等） */
.u-pill--lime {
  margin: 0 0.25em;
  padding: 0.25em 0.6em;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  background-color: var(--color-lime);
  border-radius: 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;