/* features-hux-03.css — ★自動生成 (scripts/convert-tailwind.js)。手で編集しない。
 * 出自: sections/1.html (HyperUI, MIT License, Copyright (c) Mark Mead)
 * Tailwind v4 のユーティリティを素のCSSへ焼き、.features-hux-03 にスコープし、
 * 色/本文サイズ/角丸/フォントをテーマ変数へ束縛したもの(生hex禁止=契約C3)。
 * ★@layer は意図的に剥がしてある。common.css が無レイヤーのため、レイヤー内に置くと常に負ける。 */
.features-hux-03 {
  --spacing: 0.25rem;
  --container-7xl: 80rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --font-weight-semibold: 600;
}
.features-hux-03 .mx-auto {
  margin-inline: auto;
}
.features-hux-03 .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.features-hux-03 .grid {
  display: grid;
}
.features-hux-03 .max-w-7xl {
  max-width: var(--container-7xl);
}
.features-hux-03 .max-w-prose {
  max-width: 65ch;
}
.features-hux-03 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.features-hux-03 .gap-4 {
  gap: calc(var(--spacing) * 4);
}
.features-hux-03 .rounded {
  border-radius: 0.25rem;
}
.features-hux-03 .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.features-hux-03 .py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.features-hux-03 .text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.features-hux-03 .font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.features-hux-03 .text-pretty {
  text-wrap: pretty;
}
.features-hux-03 .text-gray-700 {
  color: var(--color-text);
}
.features-hux-03 .text-gray-900 {
  color: var(--color-heading-ink);
}
@media (width >= 40rem) {
  .features-hux-03 .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .features-hux-03 .sm\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
}
@media (width >= 48rem) {
  .features-hux-03 .md\:max-w-none {
    max-width: none;
  }
  .features-hux-03 .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-hux-03 .md\:items-center {
    align-items: center;
  }
  .features-hux-03 .md\:gap-8 {
    gap: calc(var(--spacing) * 8);
  }
}
@media (width >= 64rem) {
  .features-hux-03 .lg\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
}
@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-03 *, .features-hux-03 ::before, .features-hux-03 ::after, .features-hux-03 ::backdrop {
    --tw-font-weight: initial;
  }
}

/* ===== ここから追記（plan: features-hux-03-plan.md §6）。トーン「間（呼吸）」＝装飾を足さず
 * 余白の量と角丸だけで軽さを作る。
 * 1) `.hux > [class*="py-"]` のpadding-blockゼロ化ルール(hux-bind.css)は【直下の子】にしか効かない。
 *    本モジュールのルートは section.hux の直下が無クラス<section>で、py-8を持つdivはその孫にあたるため
 *    ゼロ化が空振りし、PC側(section:0+py-8:32=32px)よりSP側(section:56+py-8:32=88px)が厚いという
 *    逆転が起きていた(実測値は計画§3参照)。ここでpy-8を明示的に上書きして解消する。
 *    PC側はhux-bind.cssの「サイトのセクション余白は96px前後」という基準に合わせ
 *    calc(--space-lg*2)=96pxとし、SP側は.section(56px)と足しても過密にならないよう--space-sm(24px)に絞る
 *    (合計80px。既存の88pxから見ても窮屈にはならない)。
 * 2) 列間ガターを --space-* トークンへ統一し、余白量を増やす(SP: 16px→32px / PC: 32px→48px)。
 * 3) 写真の角丸を 0.25rem から明確に拡大。features-hux-05の0.5remとは別値(差別化)。
 *    aspect-ratio 16/9 + object-fit:coverは common.css の .feature-img / .two-col img と同じ組み合わせ
 *    (このリポジトリの「写真+テキスト2カラム」共通作法)。hux-bind.cssのmax-height:460pxと併用しても
 *    縦長差し替え写真がレターボックス化せず破綻しない(実測: 実装フェーズ probe.mjs compare で確認)。 */
.features-hux-03 .py-8 {
  padding-block: calc(var(--space-lg) * 2);
}
.features-hux-03 .gap-4 {
  gap: var(--space-md);
}
.features-hux-03 .rounded {
  border-radius: 1rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 768px) {
  .features-hux-03 .py-8 {
    padding-block: var(--space-sm);
  }
}
@media (width >= 48rem) {
  .features-hux-03 .md\:gap-8 {
    gap: var(--space-lg);
  }
}
/* ===== 追記ここまで ===== */