@layer utilities {
  /* ========== 余白 ========== */
  .u-mt-0 { margin-top: var(--space-0) !important; }
  .u-mb-0 { margin-bottom: var(--space-0) !important; }
  .u-mt-sm { margin-top: var(--space-2) !important; }
  .u-mb-sm { margin-bottom: var(--space-2) !important; }
  .u-mt-md { margin-top: var(--space-4) !important; }
  .u-mb-md { margin-bottom: var(--space-4) !important; }
  .u-mt-lg { margin-top: var(--space-8) !important; }
  .u-mb-lg { margin-bottom: var(--space-8) !important; }
  .u-mt-xl { margin-top: var(--space-12) !important; }
  .u-mb-xl { margin-bottom: var(--space-12) !important; }

  /* ========== テキスト ========== */
  .u-text-center { text-align: center !important; }
  .u-text-right { text-align: right !important; }
  .u-text-left { text-align: left !important; }
  .u-text-xs      { font-size: var(--text-xs) !important; }
  .u-text-sm      { font-size: var(--text-sm) !important; }
  .u-text-base    { font-size: var(--text-base) !important; }
  .u-text-l       { font-size: var(--text-l) !important; }
  .u-text-lg      { font-size: var(--text-lg) !important; }
  .u-text-xl      { font-size: var(--text-xl) !important; }
  .u-text-caption { font-size: var(--text-caption) !important; }
  .u-text-button  { font-size: var(--text-button) !important; }
  .u-text-2xl     { font-size: var(--text-2xl) !important; }
  .u-text-3xl     { font-size: var(--text-3xl) !important; }
  .u-text-4xl     { font-size: var(--text-4xl) !important; }

  /* ========== Font Weight Utilities ========== */
  .u-font-normal   { font-weight: var(--font-normal) !important; }
  .u-font-medium   { font-weight: var(--font-medium) !important; }
  .u-font-semibold { font-weight: var(--font-semibold) !important; }
  .u-font-bold     { font-weight: var(--font-bold) !important; }

  /* ========== Font Family Utilities ========== */
  .u-font-sans { font-family: var(--font-sans) !important; }
  .u-font-serif-display { font-family: var(--font-serif-display) !important; }

  /* ========== 画像サイズ ========== */
  /* 最大幅指定（レスポンシブ対応） */
  .u-img-xs { max-width: 200px !important; height: auto !important; }
  .u-img-sm { max-width: 300px !important; height: auto !important; }
  .u-img-md { max-width: 400px !important; height: auto !important; }
  .u-img-lg { max-width: 500px !important; height: auto !important; }
  .u-img-xl { max-width: 600px !important; height: auto !important; }
  .u-img-2xl { max-width: 800px !important; height: auto !important; }
  
  /* 幅指定（割合） */
  .u-img-w-25 { width: 25% !important; height: auto !important; }
  .u-img-w-33 { width: 33.333% !important; height: auto !important; }
  .u-img-w-50 { width: 50% !important; height: auto !important; }
  .u-img-w-66 { width: 66.666% !important; height: auto !important; }
  .u-img-w-75 { width: 75% !important; height: auto !important; }
  .u-img-w-100 { width: 100% !important; height: auto !important; }

  /* ========== 表示/レイアウト ========== */
  .u-flex { display: flex !important; }
  .u-grid { display: grid !important; }
  .u-block { display: block !important; }
  .u-inline { display: inline !important; }
  .u-inline-block { display: inline-block !important; }
  .u-hidden { display: none !important; }

  /* ========== Flexbox補助 ========== */
  .u-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

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

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

  .u-gap-sm { gap: var(--space-2) !important; }
  .u-gap-md { gap: var(--space-4) !important; }
  .u-gap-lg { gap: var(--space-6) !important; }

  /* ========== レスポンシブ表示 ========== */
  @media (max-width: 767px) {
    .u-hidden-sp { display: none !important; }
  }

  @media (min-width: 768px) {
    .u-hidden-pc { display: none !important; }
  }

  /* ========== その他 ========== */
  .u-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  /* スマホのみ表示される改行 */
  .sp-only {
    display: none;
  }
  
  @media (max-width: 767px) {
    .sp-only {
      display: block;
    }
  }
}