/* =================================================================
 * utilities.css — 流体スケーリング & PCファースト用の最小限ヘルパ
 * 原則として utility class は最小限に抑え、コンポーネント側で書く。
 *
 * 流体スケーリング方針:
 *   PC基準1440px → SP基準390px の間で px 値を線形補間する。
 *   tokens.css のサイズトークン（例: --fs-h1-pc/sp）を呼び出して
 *     font-size: clamp(var(--fs-h1-sp), calc(...), var(--fs-h1-pc));
 *   の形でコンポーネント側で組む。
 *
 * メディアクエリ方針: **PC ファースト**
 *   → 規定値は PC（1024px 以上）を主、`@media (max-width: 1023.98px)` で SP 上書き
 * =================================================================*/

/* ---------- 流体スケーリング用カスタムプロパティ ---------- */
/* PC領域 390-1440px の線形補間係数:
 * (100vw - 390px) / (1440 - 390) = (100vw - 390px) / 1050
 * 任意のサイズ補間は:
 *   clamp(SP値, calc(SP値 + (PC値 - SP値) * (100vw - 390px) / 1050), PC値);
 */

/* ---------- テキスト強調（Figma タイポグラフィ 項目13） ---------- */
/* キーカラーの強調。<em class="u-em-key"> / <strong class="u-em-key"> で使う */
.u-em-key { color: var(--color-key); }

/* ---------- カラー ユーティリティ（Figma カラーガイドライン 5824:93065） ----------
 * 静的ページ側で class 指定だけで色を当てたい場合用。
 * 共通コンポーネント（c-*）が使えるならそちらを優先する。
 */
/* 文字色 */
.u-text-default    { color: var(--color-text-default); }
.u-text-sub        { color: var(--color-text-sub); }
.u-text-disabled   { color: var(--color-text-disabled); }
.u-text-key        { color: var(--color-key); }
.u-text-secondary  { color: var(--color-secondary); }
.u-text-orange-01  { color: var(--color-orange-01); }
.u-text-light-orange-01 { color: var(--color-light-orange-01); }
.u-text-light-orange-02 { color: var(--color-light-orange-02); }
.u-text-alert      { color: var(--color-alert); }
.u-text-white      { color: var(--color-white); }
.u-text-black      { color: var(--color-black); }
.u-text-grey-900   { color: var(--color-grey-900); }
.u-text-body       { color: var(--color-text-body); }
.u-text-blue-01    { color: var(--color-blue-01); }
.u-text-link       { color: var(--color-link); }
.u-text-link-hover { color: var(--color-link-hover); }
.u-text-neutral-01 { color: var(--color-neutral-01); }
.u-text-neutral-02 { color: var(--color-neutral-02); }
.u-text-neutral-03 { color: var(--color-neutral-03); }
.u-text-neutral-04 { color: var(--color-neutral-04); }

/* 背景色 */
.u-bg-01           { background-color: var(--color-bg-01); }
.u-bg-02           { background-color: var(--color-bg-02); }
.u-bg-03           { background-color: var(--color-bg-03); }
.u-bg-secondary    { background-color: var(--color-bg-secondary); }
.u-bg-light-orange-01 { background-color: var(--color-light-orange-01); }
.u-bg-light-orange-02 { background-color: var(--color-light-orange-02); }
.u-bg-key          { background-color: var(--color-key); }
.u-bg-secondary-color { background-color: var(--color-secondary); }
.u-bg-orange-01    { background-color: var(--color-orange-01); }
.u-bg-alert        { background-color: var(--color-alert); }
.u-bg-white        { background-color: var(--color-white); }
.u-bg-black        { background-color: var(--color-black); }
.u-bg-neutral-01   { background-color: var(--color-neutral-01); }
.u-bg-grey-900     { background-color: var(--color-grey-900); }
.u-bg-blue-01      { background-color: var(--color-blue-01); }
.u-bg-neutral-02   { background-color: var(--color-neutral-02); }
.u-bg-neutral-03   { background-color: var(--color-neutral-03); }
.u-bg-neutral-04   { background-color: var(--color-neutral-04); }
.u-bg-disabled     { background-color: var(--color-bg-disabled); }
.u-bg-bg-default   { background-color: var(--color-bg-default); }

/* 罫線色 */
.u-border-line     { border-color: var(--color-border); }
.u-border-key      { border-color: var(--color-key); }
.u-border-secondary { border-color: var(--color-secondary); }
.u-border-orange-01 { border-color: var(--color-orange-01); }
.u-border-light-orange-01 { border-color: var(--color-light-orange-01); }
.u-border-light-orange-02 { border-color: var(--color-light-orange-02); }
.u-border-alert    { border-color: var(--color-alert); }
.u-border-white    { border-color: var(--color-white); }
.u-border-black    { border-color: var(--color-black); }
.u-border-neutral-01 { border-color: var(--color-neutral-01); }
.u-border-neutral-02 { border-color: var(--color-neutral-02); }
.u-border-neutral-03 { border-color: var(--color-neutral-03); }
.u-border-neutral-04 { border-color: var(--color-neutral-04); }
.u-border-grey-900 { border-color: var(--color-grey-900); }
.u-border-blue-01  { border-color: var(--color-blue-01); }
.u-border-bg-01    { border-color: var(--color-bg-01); }
.u-border-bg-02    { border-color: var(--color-bg-02); }
.u-border-bg-03    { border-color: var(--color-bg-03); }

/* カテゴリー・区分カラー（背景） */
.u-bg-cat-orange-red    { background-color: var(--color-cat-orange-red); }
.u-bg-cat-orange        { background-color: var(--color-cat-orange); }
.u-bg-cat-light-purple  { background-color: var(--color-cat-light-purple); }
.u-bg-cat-purple        { background-color: var(--color-cat-purple); }
.u-bg-cat-blue          { background-color: var(--color-cat-blue); }
.u-bg-cat-dark-cyan     { background-color: var(--color-cat-dark-cyan); }
.u-bg-cat-green-yellow  { background-color: var(--color-cat-green-yellow); }
.u-bg-cat-pastel-orange       { background-color: var(--color-cat-pastel-orange); }
.u-bg-cat-pastel-light-purple { background-color: var(--color-cat-pastel-light-purple); }
.u-bg-cat-pastel-blue         { background-color: var(--color-cat-pastel-blue); }
.u-bg-cat-pastel-dark-cyan    { background-color: var(--color-cat-pastel-dark-cyan); }

/* カテゴリー・区分カラー（文字色） */
.u-text-cat-orange-red    { color: var(--color-cat-orange-red); }
.u-text-cat-orange        { color: var(--color-cat-orange); }
.u-text-cat-light-purple  { color: var(--color-cat-light-purple); }
.u-text-cat-purple        { color: var(--color-cat-purple); }
.u-text-cat-blue          { color: var(--color-cat-blue); }
.u-text-cat-dark-cyan     { color: var(--color-cat-dark-cyan); }
.u-text-cat-green-yellow  { color: var(--color-cat-green-yellow); }
.u-text-cat-pastel-orange       { color: var(--color-cat-pastel-orange); }
.u-text-cat-pastel-light-purple { color: var(--color-cat-pastel-light-purple); }
.u-text-cat-pastel-blue         { color: var(--color-cat-pastel-blue); }
.u-text-cat-pastel-dark-cyan    { color: var(--color-cat-pastel-dark-cyan); }

/* カテゴリー・区分カラー（罫線色） */
.u-border-cat-orange-red    { border-color: var(--color-cat-orange-red); }
.u-border-cat-orange        { border-color: var(--color-cat-orange); }
.u-border-cat-light-purple  { border-color: var(--color-cat-light-purple); }
.u-border-cat-purple        { border-color: var(--color-cat-purple); }
.u-border-cat-blue          { border-color: var(--color-cat-blue); }
.u-border-cat-dark-cyan     { border-color: var(--color-cat-dark-cyan); }
.u-border-cat-green-yellow  { border-color: var(--color-cat-green-yellow); }
.u-border-cat-pastel-orange       { border-color: var(--color-cat-pastel-orange); }
.u-border-cat-pastel-light-purple { border-color: var(--color-cat-pastel-light-purple); }
.u-border-cat-pastel-blue         { border-color: var(--color-cat-pastel-blue); }
.u-border-cat-pastel-dark-cyan    { border-color: var(--color-cat-pastel-dark-cyan); }

/* ---------- 表示切替 ---------- */
.u-pc-only { display: revert; }
.u-sp-only { display: none; }

@media (max-width: 1023.98px) {
  .u-pc-only { display: none; }
  .u-sp-only { display: revert; }
}

/* ---------- コンテナ ---------- */
.u-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter-pc);
}

@media (max-width: 1023.98px) {
  .u-container {
    padding-inline: var(--space-gutter-sp);
  }
}

/* ---------- セクション余白 ---------- */
.u-section {
  padding-block: var(--space-section-pc);
}

@media (max-width: 1023.98px) {
  .u-section {
    padding-block: var(--space-section-sp);
  }
}