/* features-hux-01.css — ★自動生成 (scripts/convert-tailwind.js)。手で編集しない。
 * 出自: feature-grids/1.html (HyperUI, MIT License, Copyright (c) Mark Mead)
 * Tailwind v4 のユーティリティを素のCSSへ焼き、.features-hux-01 にスコープし、
 * 色/本文サイズ/角丸/フォントをテーマ変数へ束縛したもの(生hex禁止=契約C3)。
 * ★@layer は意図的に剥がしてある。common.css が無レイヤーのため、レイヤー内に置くと常に負ける。 */
.features-hux-01 {
  --spacing: 0.25rem;
  --container-lg: 32rem;
  --container-7xl: 80rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.25;
}
.features-hux-01 .mx-auto {
  margin-inline: auto;
}
.features-hux-01 .mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.features-hux-01 .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.features-hux-01 .mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.features-hux-01 .grid {
  display: grid;
}
.features-hux-01 .inline-flex {
  display: inline-flex;
}
.features-hux-01 .size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.features-hux-01 .max-w-7xl {
  max-width: var(--container-7xl);
}
.features-hux-01 .max-w-lg {
  max-width: var(--container-lg);
}
.features-hux-01 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.features-hux-01 .gap-8 {
  gap: calc(var(--spacing) * 8);
}
.features-hux-01 .rounded-lg {
  border-radius: var(--radius);
}
.features-hux-01 .border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.features-hux-01 .border-gray-200 {
  border-color: color-mix(in srgb, var(--color-text) 18%, var(--color-bg));
}
.features-hux-01 .bg-gray-100 {
  background-color: var(--color-surface);
}
.features-hux-01 .p-3 {
  padding: calc(var(--spacing) * 3);
}
.features-hux-01 .p-6 {
  padding: calc(var(--spacing) * 6);
}
.features-hux-01 .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.features-hux-01 .py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.features-hux-01 .text-center {
  text-align: center;
}
.features-hux-01 .text-3xl\/tight {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}
.features-hux-01 .text-lg {
  font-size: var(--fs-h3);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.features-hux-01 .font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.features-hux-01 .font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.features-hux-01 .text-pretty {
  text-wrap: pretty;
}
.features-hux-01 .text-gray-700 {
  color: var(--color-text);
}
.features-hux-01 .text-gray-900 {
  color: var(--color-heading-ink);
}
@media (width >= 40rem) {
  .features-hux-01 .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .features-hux-01 .sm\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
}
@media (width >= 48rem) {
  .features-hux-01 .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  .features-hux-01 .lg\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
  .features-hux-01 *, .features-hux-01 ::before, .features-hux-01 ::after, .features-hux-01 ::backdrop {
    --tw-border-style: solid;
    --tw-font-weight: initial;
  }
}