/* banner-cta-hux-02.css — ★自動生成 (scripts/convert-tailwind.js)。手で編集しない。
 * 出自: ctas/4.html (HyperUI, MIT License, Copyright (c) Mark Mead)
 * Tailwind v4 のユーティリティを素のCSSへ焼き、.banner-cta-hux-02 にスコープし、
 * 色/本文サイズ/角丸/フォントをテーマ変数へ束縛したもの(生hex禁止=契約C3)。
 * ★@layer は意図的に剥がしてある。common.css が無レイヤーのため、レイヤー内に置くと常に負ける。 */
.banner-cta-hux-02 {
  --spacing: 0.25rem;
  --breakpoint-2xl: 96rem;
  --container-xl: 36rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --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-medium: 500;
  --font-weight-bold: 700;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-cta-hux-02 .mx-auto {
  margin-inline: auto;
}
.banner-cta-hux-02 .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.banner-cta-hux-02 .grid {
  display: grid;
}
.banner-cta-hux-02 .hidden {
  display: none;
}
.banner-cta-hux-02 .inline-block {
  display: inline-block;
}
.banner-cta-hux-02 .h-40 {
  height: calc(var(--spacing) * 40);
}
.banner-cta-hux-02 .w-full {
  width: 100%;
}
.banner-cta-hux-02 .max-w-screen-2xl {
  max-width: var(--breakpoint-2xl);
}
.banner-cta-hux-02 .max-w-xl {
  max-width: var(--container-xl);
}
.banner-cta-hux-02 .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.banner-cta-hux-02 .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.banner-cta-hux-02 .gap-4 {
  gap: calc(var(--spacing) * 4);
}
.banner-cta-hux-02 .rounded-sm {
  border-radius: var(--radius);
}
.banner-cta-hux-02 .border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.banner-cta-hux-02 .border-blue-600 {
  border-color: var(--color-primary);
}
.banner-cta-hux-02 .bg-blue-600 {
  background-color: var(--color-primary);
}
.banner-cta-hux-02 .bg-gray-100 {
  background-color: var(--color-surface);
}
.banner-cta-hux-02 .object-cover {
  object-fit: cover;
}
.banner-cta-hux-02 .p-8 {
  padding: calc(var(--spacing) * 8);
}
.banner-cta-hux-02 .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.banner-cta-hux-02 .px-12 {
  padding-inline: calc(var(--spacing) * 12);
}
.banner-cta-hux-02 .py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.banner-cta-hux-02 .py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.banner-cta-hux-02 .text-center {
  text-align: center;
}
.banner-cta-hux-02 .text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.banner-cta-hux-02 .text-sm {
  font-size: var(--fs-small);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.banner-cta-hux-02 .font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.banner-cta-hux-02 .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.banner-cta-hux-02 .text-gray-700 {
  color: var(--color-text);
}
.banner-cta-hux-02 .text-gray-900 {
  color: var(--color-heading-ink);
}
.banner-cta-hux-02 .text-white {
  color: var(--color-on-primary);
}
.banner-cta-hux-02 .transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
@media (hover: hover) {
  .banner-cta-hux-02 .hover\:bg-transparent:hover {
    background-color: transparent;
  }
  .banner-cta-hux-02 .hover\:text-blue-600:hover {
    color: var(--color-primary);
  }
}
@media (width >= 40rem) {
  .banner-cta-hux-02 .sm\:mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .banner-cta-hux-02 .sm\:block {
    display: block;
  }
  .banner-cta-hux-02 .sm\:h-56 {
    height: calc(var(--spacing) * 56);
  }
  .banner-cta-hux-02 .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
}
@media (width >= 48rem) {
  .banner-cta-hux-02 .md\:mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .banner-cta-hux-02 .md\:h-full {
    height: 100%;
  }
  .banner-cta-hux-02 .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .banner-cta-hux-02 .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .banner-cta-hux-02 .md\:p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .banner-cta-hux-02 .md\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
}
@media (width >= 64rem) {
  .banner-cta-hux-02 .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .banner-cta-hux-02 .lg\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .banner-cta-hux-02 .lg\:px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .banner-cta-hux-02 .lg\:py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
}
@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)))) {
  .banner-cta-hux-02 *, .banner-cta-hux-02 ::before, .banner-cta-hux-02 ::after, .banner-cta-hux-02 ::backdrop {
    --tw-border-style: solid;
    --tw-font-weight: initial;
  }
}