@charset "utf-8";

/* ユーティリティクラス（`.u-*`・renewページ専用）。詳細: _claude/css-architecture.md 10章 */

/* ============================================================
 * spacing — margin / padding / gap
 * ============================================================ */

/* margin-top */
.u-margin-top-4  { margin-top: var(--space-4); }
.u-margin-top-5  { margin-top: var(--space-5); }
.u-margin-top-6  { margin-top: var(--space-6); }
.u-margin-top-8  { margin-top: var(--space-8); }
.u-margin-top-10 { margin-top: var(--space-10); }
.u-margin-top-12 { margin-top: var(--space-12); }
.u-margin-top-13 { margin-top: var(--space-13); }
.u-margin-top-14 { margin-top: var(--space-14); }
.u-margin-top-15 { margin-top: var(--space-15); }
.u-margin-top-16 { margin-top: var(--space-16); }
.u-margin-top-18 { margin-top: var(--space-18); }
.u-margin-top-20 { margin-top: var(--space-20); }
.u-margin-top-24 { margin-top: var(--space-24); }
.u-margin-top-28 { margin-top: var(--space-28); }
.u-margin-top-32 { margin-top: var(--space-32); }
.u-margin-top-36 { margin-top: var(--space-36); }
.u-margin-top-44 { margin-top: var(--space-44); }
.u-margin-top-48 { margin-top: var(--space-48); }
.u-margin-top-54 { margin-top: var(--space-54); }
.u-margin-top-56 { margin-top: var(--space-56); }
.u-margin-top-64 { margin-top: var(--space-64); }
.u-margin-top-72 { margin-top: var(--space-72); }
.u-margin-top-80 { margin-top: var(--space-80); }
.u-margin-top-88 { margin-top: var(--space-88); }
.u-margin-top-96 { margin-top: var(--space-96); }

/* margin-bottom */
.u-margin-bottom-4  { margin-bottom: var(--space-4); }
.u-margin-bottom-5  { margin-bottom: var(--space-5); }
.u-margin-bottom-6  { margin-bottom: var(--space-6); }
.u-margin-bottom-8  { margin-bottom: var(--space-8); }
.u-margin-bottom-10 { margin-bottom: var(--space-10); }
.u-margin-bottom-12 { margin-bottom: var(--space-12); }
.u-margin-bottom-13 { margin-bottom: var(--space-13); }
.u-margin-bottom-14 { margin-bottom: var(--space-14); }
.u-margin-bottom-15 { margin-bottom: var(--space-15); }
.u-margin-bottom-16 { margin-bottom: var(--space-16); }
.u-margin-bottom-18 { margin-bottom: var(--space-18); }
.u-margin-bottom-20 { margin-bottom: var(--space-20); }
.u-margin-bottom-24 { margin-bottom: var(--space-24); }
.u-margin-bottom-28 { margin-bottom: var(--space-28); }
.u-margin-bottom-32 { margin-bottom: var(--space-32); }
.u-margin-bottom-36 { margin-bottom: var(--space-36); }
.u-margin-bottom-44 { margin-bottom: var(--space-44); }
.u-margin-bottom-48 { margin-bottom: var(--space-48); }
.u-margin-bottom-54 { margin-bottom: var(--space-54); }
.u-margin-bottom-56 { margin-bottom: var(--space-56); }
.u-margin-bottom-64 { margin-bottom: var(--space-64); }
.u-margin-bottom-72 { margin-bottom: var(--space-72); }
.u-margin-bottom-80 { margin-bottom: var(--space-80); }
.u-margin-bottom-88 { margin-bottom: var(--space-88); }
.u-margin-bottom-96 { margin-bottom: var(--space-96); }

/* margin-inline（左右中央寄せ以外の左右マージンが要る場合） */
.u-margin-inline-4  { margin-left: var(--space-4);  margin-right: var(--space-4); }
.u-margin-inline-8  { margin-left: var(--space-8);  margin-right: var(--space-8); }
.u-margin-inline-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
.u-margin-inline-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
.u-margin-inline-24 { margin-left: var(--space-24); margin-right: var(--space-24); }
.u-margin-inline-auto { margin-left: auto; margin-right: auto; }

/* margin-block（縦の余白を上下セットで） */
.u-margin-block-8  { margin-top: var(--space-8);  margin-bottom: var(--space-8); }
.u-margin-block-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
.u-margin-block-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }
.u-margin-block-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); }

/* セクションの上下余白（PC 88px ／ SP 56px。値は settings.css の --section-padding） */
.u-padding-block-section { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }
.u-padding-top-section { padding-top: var(--section-padding); }
.u-padding-bottom-section { padding-bottom: var(--section-padding); }
.u-padding-bottom-section-large { padding-bottom: var(--section-padding-bottom-large); } /* ページ最後のセクション（CTAの直前）だけ下を広く */

/* background */
.u-background-section { background: var(--color-surface-muted); }

/* padding-top */
.u-padding-top-4  { padding-top: var(--space-4); }
.u-padding-top-8  { padding-top: var(--space-8); }
.u-padding-top-10 { padding-top: var(--space-10); }
.u-padding-top-12 { padding-top: var(--space-12); }
.u-padding-top-13 { padding-top: var(--space-13); }
.u-padding-top-16 { padding-top: var(--space-16); }
.u-padding-top-24 { padding-top: var(--space-24); }
.u-padding-top-44 { padding-top: var(--space-44); }
.u-padding-top-64 { padding-top: var(--space-64); }
.u-padding-top-72 { padding-top: var(--space-72); }
.u-padding-top-80 { padding-top: var(--space-80); }
.u-padding-top-88 { padding-top: var(--space-88); }

/* padding-bottom */
.u-padding-bottom-4  { padding-bottom: var(--space-4); }
.u-padding-bottom-8  { padding-bottom: var(--space-8); }
.u-padding-bottom-10 { padding-bottom: var(--space-10); }
.u-padding-bottom-15 { padding-bottom: var(--space-15); }
.u-padding-bottom-16 { padding-bottom: var(--space-16); }
.u-padding-bottom-24 { padding-bottom: var(--space-24); }
.u-padding-bottom-64 { padding-bottom: var(--space-64); }
.u-padding-bottom-80 { padding-bottom: var(--space-80); }
.u-padding-bottom-88 { padding-bottom: var(--space-88); }

/* padding-inline */
.u-padding-inline-10  { padding-left: var(--space-10);  padding-right: var(--space-10); }
.u-padding-inline-15  { padding-left: var(--space-15);  padding-right: var(--space-15); }
.u-padding-inline-16  { padding-left: var(--space-16);  padding-right: var(--space-16); }
.u-padding-inline-20  { padding-left: var(--space-20);  padding-right: var(--space-20); }
.u-padding-inline-32  { padding-left: var(--space-32);  padding-right: var(--space-32); }

/* padding-block */
.u-padding-block-3   { padding-top: 3px; padding-bottom: 3px; } /* chip系のみ使用する半端値。トークン化はしない */
.u-padding-block-4   { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.u-padding-block-13  { padding-top: var(--space-13); padding-bottom: var(--space-13); }
.u-padding-block-15  { padding-top: var(--space-15); padding-bottom: var(--space-15); }
.u-padding-block-16  { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* gap（flex/grid共通） */
.u-gap-4  { gap: var(--space-4); }
.u-gap-5  { gap: var(--space-5); }
.u-gap-6  { gap: var(--space-6); }
.u-gap-8  { gap: var(--space-8); }
.u-gap-10 { gap: var(--space-10); }
.u-gap-12 { gap: var(--space-12); }
.u-gap-14 { gap: var(--space-14); }
.u-gap-16 { gap: var(--space-16); }
.u-gap-18 { gap: var(--space-18); }
.u-gap-20 { gap: var(--space-20); }
.u-gap-24 { gap: var(--space-24); }
.u-gap-28 { gap: var(--space-28); }
.u-gap-36 { gap: var(--space-36); }
.u-gap-44 { gap: var(--space-44); }
.u-gap-54 { gap: var(--space-54); }

/* ============================================================
 * layout / display / flex
 * ============================================================ */
.u-container {
  width: 100%;
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

.u-block        { display: block; }
.u-inline-block { display: inline-block; }
.u-flex         { display: flex; }
.u-inline-flex  { display: inline-flex; }
.u-flex-column     { display: flex; flex-direction: column; }
.u-grid         { display: grid; }
.u-hidden       { display: none; }

.u-items-start    { align-items: flex-start; }
.u-items-center   { align-items: center; }
.u-items-end      { align-items: flex-end; }
.u-items-stretch  { align-items: stretch; }

.u-justify-start   { justify-content: flex-start; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }

.u-flex-1  { flex: 1 0 0; }
.u-flex-wrap { flex-wrap: wrap; }

.u-relative { position: relative; }
.u-absolute { position: absolute; }

/* ============================================================
 * responsive visibility — PC/SP出し分け（767px）
 * ============================================================ */
.u-pc-only              { display: block; }
.u-pc-only-inline       { display: inline; }
.u-pc-only-inline-block { display: inline-block; }
.u-pc-only-flex         { display: flex; }
.u-pc-only-inline-flex  { display: inline-flex; }
.u-pc-only-grid         { display: grid; }
@media (max-width: 767px) {
  .u-pc-only,
  .u-pc-only-inline,
  .u-pc-only-inline-block,
  .u-pc-only-flex,
  .u-pc-only-inline-flex,
  .u-pc-only-grid { display: none; }
}

.u-sp-only,
.u-sp-only-inline,
.u-sp-only-inline-block,
.u-sp-only-flex,
.u-sp-only-inline-flex,
.u-sp-only-grid { display: none; }
@media (max-width: 767px) {
  .u-sp-only              { display: block; }
  .u-sp-only-inline       { display: inline; }
  .u-sp-only-inline-block { display: inline-block; }
  .u-sp-only-flex         { display: flex; }
  .u-sp-only-inline-flex  { display: inline-flex; }
  .u-sp-only-grid         { display: grid; }
}

/* ============================================================
 * typography
 * ============================================================ */
.u-font-weight-regular { font-weight: 400; }
.u-font-weight-bold    { font-weight: 700; }

.u-text-align-left   { text-align: left; }
.u-text-align-center { text-align: center; }
.u-text-align-right  { text-align: right; }

.u-color-brand { color: var(--color-brand); }
.u-color-ink   { color: var(--color-ink); }
.u-color-text  { color: var(--color-ink-soft); }
.u-color-mute  { color: var(--color-text-mute); }
.u-color-white { color: var(--color-white); }

/* ============================================================
 * link — リンク文字の下線
 * .u-link-underline：いつもは下線あり。ホバーすると一度消えて、左から右へスーッと引き直される
 * 下線は background で描く（text-decoration では伸びる動きが作れないため。複数行でも行ごとに引ける）
 * ============================================================ */
.u-link-underline {
  padding-bottom: 2px; /* 文字と下線の間 */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
  text-decoration: none;
}

@media (hover: hover) {
  .u-link-underline:hover {
    animation: u-link-underline-draw var(--duration-base) var(--ease-base);
  }
}

@keyframes u-link-underline-draw {
  from {
    background-size: 0 1px;
  }

  to {
    background-size: 100% 1px;
  }
}

/* ============================================================
 * fade-in — スクロールして画面に入ったら、少し下からふわっと現れる
 * HTML：class="u-fade-in" data-fade-in（見た目はこのクラス、JS（common.js 3.）は data-fade-in をつかむ）
 * 動き：最初は透明で 24px 下にいる → JS が is-visible を付けたら、元の位置へ上がりながら表示（1回だけ）
 * JS が動かない環境（JS無効・読み込み失敗）で隠れたままにならないよう、
 *   <head> のインラインスクリプトが <html> に is-script-enabled を付けたときだけ「最初に隠す」が効く
 * 横に並ぶカードなど同時に画面に入る要素は .u-fade-in-delay-1〜5 を足して、少しずつずらして出す（順番に意味がある工程などは、行をまたいでも通しでずらす）
 * ============================================================ */
.is-script-enabled .u-fade-in {
  opacity: 0;
  transform: translateY(var(--fade-in-distance));
  transition:
    opacity var(--duration-fade-in) var(--ease-fade-in) var(--fade-in-delay, 0s),
    transform var(--duration-fade-in) var(--ease-fade-in) var(--fade-in-delay, 0s);
}

.is-script-enabled .u-fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* 順送りの刻み：--fade-in-step × 番号。基本 .3s（3・4カラム・6工程とも同じ。2026-09-16 ユーザー決定）
 * 経緯：.12s → .2s → 3カラムだけ .3s → 4カラムも .3s で統一。並びごとに変えたくなったら、親（ul 等）に --fade-in-step を持つクラスを足す */
.u-fade-in-delay-1 { --fade-in-delay: calc(var(--fade-in-step, .3s) * 1); }
.u-fade-in-delay-2 { --fade-in-delay: calc(var(--fade-in-step, .3s) * 2); }
.u-fade-in-delay-3 { --fade-in-delay: calc(var(--fade-in-step, .3s) * 3); }
.u-fade-in-delay-4 { --fade-in-delay: calc(var(--fade-in-step, .3s) * 4); }
.u-fade-in-delay-5 { --fade-in-delay: calc(var(--fade-in-step, .3s) * 5); }

/* SP（1カラムに落ちる幅）では順送りをやめる：カードは1枚ずつ別々に画面に入るので、遅らせると「入ったのに出ない」時間ができる
 * （2026-09-16 ユーザー確認「1カラムの時はディレイなくなってる？」→ なっていなかったので追加。2カラムのまま残る症状カードは同じ行が同時に出る） */
@media (max-width: 767px) {
  .u-fade-in-delay-1,
  .u-fade-in-delay-2,
  .u-fade-in-delay-3,
  .u-fade-in-delay-4,
  .u-fade-in-delay-5 {
    --fade-in-delay: 0s;
  }
}

/* ============================================================
 * radius / shadow
 * ============================================================ */
.u-radius-3   { border-radius: var(--radius-3); }
.u-radius-4   { border-radius: var(--radius-4); }
.u-radius-6   { border-radius: var(--radius-6); }
.u-radius-8   { border-radius: var(--radius-8); }
.u-radius-10  { border-radius: var(--radius-10); }
.u-radius-12  { border-radius: var(--radius-12); }
.u-radius-16  { border-radius: var(--radius-16); }
.u-radius-full { border-radius: var(--radius-full); }

.u-shadow-banner   { box-shadow: var(--shadow-banner); }
.u-shadow-navigation-card { box-shadow: var(--shadow-navigation-card); }

/* ============================================================
 * gradient scrim（.u-absolute u-inset-0 u-scrim-strong のように組み合わせる）
 * ============================================================ */
.u-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.u-scrim-strong { background-image: var(--gradient-scrim-strong); }
.u-scrim-soft   { background-image: var(--gradient-scrim-soft); }

/* ============================================================
 * text（語の途中で折り返させたくない所だけ、その語を囲む。例：<span class="u-nowrap">通常の電気料金</span>）
 * ============================================================ */
.u-nowrap { white-space: nowrap; }

/* ============================================================
 * accessibility
 * ============================================================ */
.u-screen-reader-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * SP（767px以下）だけ効く版 — `.u-sp-*`
 * PC用と並べて付け、SPのときだけ上書きする（例：class="u-margin-bottom-44 u-sp-margin-bottom-24"）
 * このファイルの最後に置くこと（PC用より後ろでないと上書きできない）
 * ============================================================ */
@media (max-width: 767px) {
  .u-sp-margin-top-4  { margin-top: var(--space-4); }
  .u-sp-margin-top-5  { margin-top: var(--space-5); }
  .u-sp-margin-top-6  { margin-top: var(--space-6); }
  .u-sp-margin-top-8  { margin-top: var(--space-8); }
  .u-sp-margin-top-10 { margin-top: var(--space-10); }
  .u-sp-margin-top-12 { margin-top: var(--space-12); }
  .u-sp-margin-top-13 { margin-top: var(--space-13); }
  .u-sp-margin-top-14 { margin-top: var(--space-14); }
  .u-sp-margin-top-15 { margin-top: var(--space-15); }
  .u-sp-margin-top-16 { margin-top: var(--space-16); }
  .u-sp-margin-top-18 { margin-top: var(--space-18); }
  .u-sp-margin-top-20 { margin-top: var(--space-20); }
  .u-sp-margin-top-24 { margin-top: var(--space-24); }
  .u-sp-margin-top-28 { margin-top: var(--space-28); }
  .u-sp-margin-top-32 { margin-top: var(--space-32); }
  .u-sp-margin-top-36 { margin-top: var(--space-36); }
  .u-sp-margin-top-44 { margin-top: var(--space-44); }
  .u-sp-margin-top-48 { margin-top: var(--space-48); }
  .u-sp-margin-top-54 { margin-top: var(--space-54); }
  .u-sp-margin-top-56 { margin-top: var(--space-56); }
  .u-sp-margin-top-64 { margin-top: var(--space-64); }
  .u-sp-margin-top-72 { margin-top: var(--space-72); }
  .u-sp-margin-top-80 { margin-top: var(--space-80); }
  .u-sp-margin-top-88 { margin-top: var(--space-88); }
  .u-sp-margin-top-96 { margin-top: var(--space-96); }
  .u-sp-margin-bottom-4  { margin-bottom: var(--space-4); }
  .u-sp-margin-bottom-5  { margin-bottom: var(--space-5); }
  .u-sp-margin-bottom-6  { margin-bottom: var(--space-6); }
  .u-sp-margin-bottom-8  { margin-bottom: var(--space-8); }
  .u-sp-margin-bottom-10 { margin-bottom: var(--space-10); }
  .u-sp-margin-bottom-12 { margin-bottom: var(--space-12); }
  .u-sp-margin-bottom-13 { margin-bottom: var(--space-13); }
  .u-sp-margin-bottom-14 { margin-bottom: var(--space-14); }
  .u-sp-margin-bottom-15 { margin-bottom: var(--space-15); }
  .u-sp-margin-bottom-16 { margin-bottom: var(--space-16); }
  .u-sp-margin-bottom-18 { margin-bottom: var(--space-18); }
  .u-sp-margin-bottom-20 { margin-bottom: var(--space-20); }
  .u-sp-margin-bottom-24 { margin-bottom: var(--space-24); }
  .u-sp-margin-bottom-28 { margin-bottom: var(--space-28); }
  .u-sp-margin-bottom-32 { margin-bottom: var(--space-32); }
  .u-sp-margin-bottom-36 { margin-bottom: var(--space-36); }
  .u-sp-margin-bottom-44 { margin-bottom: var(--space-44); }
  .u-sp-margin-bottom-48 { margin-bottom: var(--space-48); }
  .u-sp-margin-bottom-54 { margin-bottom: var(--space-54); }
  .u-sp-margin-bottom-56 { margin-bottom: var(--space-56); }
  .u-sp-margin-bottom-64 { margin-bottom: var(--space-64); }
  .u-sp-margin-bottom-72 { margin-bottom: var(--space-72); }
  .u-sp-margin-bottom-80 { margin-bottom: var(--space-80); }
  .u-sp-margin-bottom-88 { margin-bottom: var(--space-88); }
  .u-sp-margin-bottom-96 { margin-bottom: var(--space-96); }
  .u-sp-margin-inline-4  { margin-left: var(--space-4);  margin-right: var(--space-4); }
  .u-sp-margin-inline-8  { margin-left: var(--space-8);  margin-right: var(--space-8); }
  .u-sp-margin-inline-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
  .u-sp-margin-inline-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
  .u-sp-margin-inline-24 { margin-left: var(--space-24); margin-right: var(--space-24); }
  .u-sp-margin-inline-auto { margin-left: auto; margin-right: auto; }
  .u-sp-margin-block-8  { margin-top: var(--space-8);  margin-bottom: var(--space-8); }
  .u-sp-margin-block-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
  .u-sp-margin-block-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }
  .u-sp-margin-block-44 { margin-top: var(--space-44); margin-bottom: var(--space-44); }
  .u-sp-padding-top-4  { padding-top: var(--space-4); }
  .u-sp-padding-top-8  { padding-top: var(--space-8); }
  .u-sp-padding-top-10 { padding-top: var(--space-10); }
  .u-sp-padding-top-12 { padding-top: var(--space-12); }
  .u-sp-padding-top-13 { padding-top: var(--space-13); }
  .u-sp-padding-top-16 { padding-top: var(--space-16); }
  .u-sp-padding-top-24 { padding-top: var(--space-24); }
  .u-sp-padding-top-44 { padding-top: var(--space-44); }
  .u-sp-padding-top-64 { padding-top: var(--space-64); }
  .u-sp-padding-top-72 { padding-top: var(--space-72); }
  .u-sp-padding-top-80 { padding-top: var(--space-80); }
  .u-sp-padding-top-88 { padding-top: var(--space-88); }
  .u-sp-padding-bottom-4  { padding-bottom: var(--space-4); }
  .u-sp-padding-bottom-8  { padding-bottom: var(--space-8); }
  .u-sp-padding-bottom-10 { padding-bottom: var(--space-10); }
  .u-sp-padding-bottom-15 { padding-bottom: var(--space-15); }
  .u-sp-padding-bottom-16 { padding-bottom: var(--space-16); }
  .u-sp-padding-bottom-24 { padding-bottom: var(--space-24); }
  .u-sp-padding-bottom-64 { padding-bottom: var(--space-64); }
  .u-sp-padding-bottom-80 { padding-bottom: var(--space-80); }
  .u-sp-padding-bottom-88 { padding-bottom: var(--space-88); }
  .u-sp-padding-inline-10  { padding-left: var(--space-10);  padding-right: var(--space-10); }
  .u-sp-padding-inline-15  { padding-left: var(--space-15);  padding-right: var(--space-15); }
  .u-sp-padding-inline-16  { padding-left: var(--space-16);  padding-right: var(--space-16); }
  .u-sp-padding-inline-20  { padding-left: var(--space-20);  padding-right: var(--space-20); }
  .u-sp-padding-inline-32  { padding-left: var(--space-32);  padding-right: var(--space-32); }
  .u-sp-padding-block-3   { padding-top: 3px; padding-bottom: 3px; } /* chip系のみ使用する半端値。トークン化はしない */
  .u-sp-padding-block-4   { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
  .u-sp-padding-block-13  { padding-top: var(--space-13); padding-bottom: var(--space-13); }
  .u-sp-padding-block-15  { padding-top: var(--space-15); padding-bottom: var(--space-15); }
  .u-sp-padding-block-16  { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .u-sp-gap-4  { gap: var(--space-4); }
  .u-sp-gap-5  { gap: var(--space-5); }
  .u-sp-gap-6  { gap: var(--space-6); }
  .u-sp-gap-8  { gap: var(--space-8); }
  .u-sp-gap-10 { gap: var(--space-10); }
  .u-sp-gap-12 { gap: var(--space-12); }
  .u-sp-gap-14 { gap: var(--space-14); }
  .u-sp-gap-16 { gap: var(--space-16); }
  .u-sp-gap-18 { gap: var(--space-18); }
  .u-sp-gap-20 { gap: var(--space-20); }
  .u-sp-gap-24 { gap: var(--space-24); }
  .u-sp-gap-28 { gap: var(--space-28); }
  .u-sp-gap-36 { gap: var(--space-36); }
  .u-sp-gap-44 { gap: var(--space-44); }
  .u-sp-gap-54 { gap: var(--space-54); }
  .u-sp-margin-top-0 { margin-top: 0; }
  .u-sp-margin-bottom-0 { margin-bottom: 0; }
  .u-sp-padding-top-0 { padding-top: 0; }
  .u-sp-padding-bottom-0 { padding-bottom: 0; }

  .u-sp-font-weight-regular { font-weight: 400; }
  .u-sp-font-weight-bold    { font-weight: 700; }
  .u-sp-text-align-left   { text-align: left; }
  .u-sp-text-align-center { text-align: center; }
  .u-sp-text-align-right  { text-align: right; }
}