/* banner-cta-hux-01.css — ★自動生成 (scripts/convert-tailwind.js)。手で編集しない。
 * 出自: ctas/1.html (HyperUI, MIT License, Copyright (c) Mark Mead)
 * Tailwind v4 のユーティリティを素のCSSへ焼き、.banner-cta-hux-01 にスコープし、
 * 色/本文サイズ/角丸/フォントをテーマ変数へ束縛したもの(生hex禁止=契約C3)。
 * ★@layer は意図的に剥がしてある。common.css が無レイヤーのため、レイヤー内に置くと常に負ける。 */
.banner-cta-hux-01 {
  --spacing: 0.25rem;
  --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-01 .mx-auto {
  margin-inline: auto;
}
.banner-cta-hux-01 .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.banner-cta-hux-01 .hidden {
  display: none;
}
.banner-cta-hux-01 .inline-block {
  display: inline-block;
}
.banner-cta-hux-01 .h-56 {
  height: calc(var(--spacing) * 56);
}
.banner-cta-hux-01 .w-full {
  width: 100%;
}
.banner-cta-hux-01 .max-w-xl {
  max-width: var(--container-xl);
}
.banner-cta-hux-01 .overflow-hidden {
  overflow: hidden;
}
.banner-cta-hux-01 .rounded-sm {
  border-radius: var(--radius);
}
.banner-cta-hux-01 .bg-emerald-600 {
  background-color: var(--color-primary);
}
.banner-cta-hux-01 .bg-gray-50 {
  background-color: var(--color-surface);
}
.banner-cta-hux-01 .object-cover {
  object-fit: cover;
}
.banner-cta-hux-01 .p-8 {
  padding: calc(var(--spacing) * 8);
}
.banner-cta-hux-01 .px-12 {
  padding-inline: calc(var(--spacing) * 12);
}
.banner-cta-hux-01 .py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.banner-cta-hux-01 .text-center {
  text-align: center;
}
.banner-cta-hux-01 .text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.banner-cta-hux-01 .text-sm {
  font-size: var(--fs-small);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.banner-cta-hux-01 .font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.banner-cta-hux-01 .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.banner-cta-hux-01 .text-gray-500 {
  color: var(--color-text);
}
.banner-cta-hux-01 .text-gray-900 {
  color: var(--color-heading-ink);
}
.banner-cta-hux-01 .text-white {
  color: var(--color-on-primary);
}
.banner-cta-hux-01 .transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  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-01 .hover\:bg-emerald-700:hover {
    background-color: var(--color-primary-dark);
  }
}
.banner-cta-hux-01 .focus\:ring-2:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.banner-cta-hux-01 .focus\:ring-yellow-400:focus {
  --tw-ring-color: var(--color-primary);
}
.banner-cta-hux-01 .focus\:outline-hidden:focus {
  --tw-outline-style: none;
  outline-style: none;
  @media (forced-colors: active) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}
@media (width >= 40rem) {
  .banner-cta-hux-01 .sm\:grid {
    display: grid;
  }
  .banner-cta-hux-01 .sm\:h-full {
    height: 100%;
  }
  .banner-cta-hux-01 .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .banner-cta-hux-01 .sm\:text-left {
    text-align: left;
  }
}
@media (width >= 48rem) {
  .banner-cta-hux-01 .md\:mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .banner-cta-hux-01 .md\:mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .banner-cta-hux-01 .md\:block {
    display: block;
  }
  .banner-cta-hux-01 .md\:p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .banner-cta-hux-01 .md\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
}
@media (width >= 64rem) {
  .banner-cta-hux-01 .lg\:px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .banner-cta-hux-01 .lg\:py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@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-01 *, .banner-cta-hux-01 ::before, .banner-cta-hux-01 ::after, .banner-cta-hux-01 ::backdrop {
    --tw-font-weight: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: initial;
    --tw-shadow-alpha: 100%;
    --tw-inset-shadow: 0 0 #0000;
    --tw-inset-shadow-color: initial;
    --tw-inset-shadow-alpha: 100%;
    --tw-ring-color: initial;
    --tw-ring-shadow: 0 0 #0000;
    --tw-inset-ring-color: initial;
    --tw-inset-ring-shadow: 0 0 #0000;
    --tw-ring-inset: initial;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 #0000;
  }
}