/* utilities.css - ユーティリティクラス */

/* ビジュアル隠し */
.u-visually-hidden {
  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;
}

/* マージンユーティリティ */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-xs { margin-top: var(--spacing-xs) !important; }
.u-mt-sm { margin-top: var(--spacing-sm) !important; }
.u-mt-md { margin-top: var(--spacing-md) !important; }
.u-mt-lg { margin-top: var(--spacing-lg) !important; }
.u-mt-xl { margin-top: var(--spacing-xl) !important; }
.u-mt-xxl { margin-top: var(--spacing-xxl) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-xs { margin-bottom: var(--spacing-xs) !important; }
.u-mb-sm { margin-bottom: var(--spacing-sm) !important; }
.u-mb-md { margin-bottom: var(--spacing-md) !important; }
.u-mb-lg { margin-bottom: var(--spacing-lg) !important; }
.u-mb-xl { margin-bottom: var(--spacing-xl) !important; }
.u-mb-xxl { margin-bottom: var(--spacing-xxl) !important; }

.u-ml-0 { margin-left: 0 !important; }
.u-ml-xs { margin-left: var(--spacing-xs) !important; }
.u-ml-sm { margin-left: var(--spacing-sm) !important; }
.u-ml-md { margin-left: var(--spacing-md) !important; }
.u-ml-lg { margin-left: var(--spacing-lg) !important; }
.u-ml-xl { margin-left: var(--spacing-xl) !important; }

.u-mr-0 { margin-right: 0 !important; }
.u-mr-xs { margin-right: var(--spacing-xs) !important; }
.u-mr-sm { margin-right: var(--spacing-sm) !important; }
.u-mr-md { margin-right: var(--spacing-md) !important; }
.u-mr-lg { margin-right: var(--spacing-lg) !important; }
.u-mr-xl { margin-right: var(--spacing-xl) !important; }

/* パディングユーティリティ */
.u-pt-0 { padding-top: 0 !important; }
.u-pt-xs { padding-top: var(--spacing-xs) !important; }
.u-pt-sm { padding-top: var(--spacing-sm) !important; }
.u-pt-md { padding-top: var(--spacing-md) !important; }
.u-pt-lg { padding-top: var(--spacing-lg) !important; }
.u-pt-xl { padding-top: var(--spacing-xl) !important; }

.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-xs { padding-bottom: var(--spacing-xs) !important; }
.u-pb-sm { padding-bottom: var(--spacing-sm) !important; }
.u-pb-md { padding-bottom: var(--spacing-md) !important; }
.u-pb-lg { padding-bottom: var(--spacing-lg) !important; }
.u-pb-xl { padding-bottom: var(--spacing-xl) !important; }

.u-pl-0 { padding-left: 0 !important; }
.u-pl-xs { padding-left: var(--spacing-xs) !important; }
.u-pl-sm { padding-left: var(--spacing-sm) !important; }
.u-pl-md { padding-left: var(--spacing-md) !important; }
.u-pl-lg { padding-left: var(--spacing-lg) !important; }
.u-pl-xl { padding-left: var(--spacing-xl) !important; }

.u-pr-0 { padding-right: 0 !important; }
.u-pr-xs { padding-right: var(--spacing-xs) !important; }
.u-pr-sm { padding-right: var(--spacing-sm) !important; }
.u-pr-md { padding-right: var(--spacing-md) !important; }
.u-pr-lg { padding-right: var(--spacing-lg) !important; }
.u-pr-xl { padding-right: var(--spacing-xl) !important; }

/* テキストアライメント */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }

/* フォントウェイト */
.u-font-normal { font-weight: 400 !important; }
.u-font-medium { font-weight: 500 !important; }
.u-font-semibold { font-weight: 600 !important; }
.u-font-bold { font-weight: 700 !important; }

/* フォントサイズ */
.u-text-xs { font-size: var(--font-size-xs) !important; }
.u-text-sm { font-size: var(--font-size-sm) !important; }
.u-text-base { font-size: var(--font-size-base) !important; }
.u-text-lg { font-size: var(--font-size-lg) !important; }
.u-text-xl { font-size: var(--font-size-xl) !important; }
.u-text-xxl { font-size: var(--font-size-xxl) !important; }

/* カラーユーティリティ */
.u-text-primary { color: var(--color-primary) !important; }
.u-text-secondary { color: var(--color-secondary) !important; }
.u-text-accent { color: var(--color-accent) !important; }
.u-text-light { color: var(--color-text-light) !important; }
.u-text-success { color: var(--color-success) !important; }

.u-bg-primary { background-color: var(--color-primary) !important; }
.u-bg-secondary { background-color: var(--color-secondary) !important; }
.u-bg-accent { background-color: var(--color-accent) !important; }
.u-bg-light { background-color: var(--color-bg-light) !important; }
.u-bg-white { background-color: var(--color-bg) !important; }

/* ディスプレイユーティリティ */
.u-block { display: block !important; }
.u-inline { display: inline !important; }
.u-inline-block { display: inline-block !important; }
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-grid { display: grid !important; }
.u-hidden { display: none !important; }

/* フレックスユーティリティ */
.u-flex-1 { flex: 1 !important; }
.u-flex-auto { flex: auto !important; }
.u-flex-none { flex: none !important; }

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

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

.u-flex-row { flex-direction: row !important; }
.u-flex-col { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }

/* 位置ユーティリティ */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-sticky { position: sticky !important; }

/* オーバーフローユーティリティ */
.u-overflow-auto { overflow: auto !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-visible { overflow: visible !important; }
.u-overflow-x-auto { overflow-x: auto !important; }
.u-overflow-y-auto { overflow-y: auto !important; }

/* 境界線ユーティリティ */
.u-border { border: 1px solid var(--color-border) !important; }
.u-border-t { border-top: 1px solid var(--color-border) !important; }
.u-border-b { border-bottom: 1px solid var(--color-border) !important; }
.u-border-l { border-left: 1px solid var(--color-border) !important; }
.u-border-r { border-right: 1px solid var(--color-border) !important; }

.u-border-0 { border: 0 !important; }
.u-border-t-0 { border-top: 0 !important; }
.u-border-b-0 { border-bottom: 0 !important; }
.u-border-l-0 { border-left: 0 !important; }
.u-border-r-0 { border-right: 0 !important; }

/* 角丸ユーティリティ */
.u-rounded { border-radius: var(--border-radius) !important; }
.u-rounded-sm { border-radius: var(--border-radius-sm) !important; }
.u-rounded-lg { border-radius: var(--border-radius-lg) !important; }
.u-rounded-full { border-radius: 9999px !important; }
.u-rounded-none { border-radius: 0 !important; }

/* 影ユーティリティ */
.u-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.u-shadow-none { box-shadow: none !important; }

/* レスポンシブ表示ユーティリティ */
@media (max-width: 768px) {
  .u-hidden-mobile { display: none !important; }
}

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

/* アクセシビリティ */
.u-focus-ring:focus {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}

/* テキスト装飾ユーティリティ */
.u-text-decoration-none { text-decoration: none !important; }
.u-text-decoration-underline { text-decoration: underline !important; }

/* オブジェクトフィットユーティリティ */
.u-object-fit-contain { object-fit: contain !important; }
.u-object-fit-cover { object-fit: cover !important; }
.u-object-fit-fill { object-fit: fill !important; }

/* 位置指定ユーティリティ */
.u-top-sm { top: 10px !important; }
.u-right-sm { right: 10px !important; }
.u-z-2 { z-index: 2 !important; }

/* カスタム背景色 */
.u-bg-warm-light { background-color: #fff9f5 !important; }
.u-bg-cool-light { background-color: #f5f9ff !important; }
.u-bg-mint-light { background-color: #f5fffc !important; }
.u-bg-peach-light { background-color: #fff5f0 !important; }

/* 大きなテキストサイズ */
.u-text-4xl { font-size: 4rem !important; }

/* 印刷スタイル */
@media print {
  .u-print-hidden { display: none !important; }
}