/* faq-hux-01.css — ★自動生成 (scripts/convert-tailwind.js)。手で編集しない。
 * 出自: faqs/1.html (HyperUI, MIT License, Copyright (c) Mark Mead)
 * Tailwind v4 のユーティリティを素のCSSへ焼き、.faq-hux-01 にスコープし、
 * 色/本文サイズ/角丸/フォントをテーマ変数へ束縛したもの(生hex禁止=契約C3)。
 * ★@layer は意図的に剥がしてある。common.css が無レイヤーのため、レイヤー内に置くと常に負ける。 */
.faq-hux-01 {
  --spacing: 0.25rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --font-weight-medium: 500;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-hux-01 .flex {
  display: flex;
}
.faq-hux-01 .size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.faq-hux-01 .shrink-0 {
  flex-shrink: 0;
}
.faq-hux-01 .items-center {
  align-items: center;
}
.faq-hux-01 .justify-between {
  justify-content: space-between;
}
.faq-hux-01 .gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}
.faq-hux-01 :where(.space-y-4 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
.faq-hux-01 .rounded-md {
  border-radius: var(--radius);
}
.faq-hux-01 .border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.faq-hux-01 .border-gray-100 {
  border-color: color-mix(in srgb, var(--color-text) 18%, var(--color-bg));
}
.faq-hux-01 .bg-gray-50 {
  background-color: var(--color-surface);
}
.faq-hux-01 .p-4 {
  padding: calc(var(--spacing) * 4);
}
.faq-hux-01 .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.faq-hux-01 .pt-4 {
  padding-top: calc(var(--spacing) * 4);
}
.faq-hux-01 .text-lg {
  font-size: var(--fs-h3);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.faq-hux-01 .font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.faq-hux-01 .text-gray-900 {
  color: var(--color-heading-ink);
}
.faq-hux-01 .transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.faq-hux-01 .duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.faq-hux-01 .group-open\:-rotate-180:is(:where(.group):is([open], :popover-open, :open) *) {
  rotate: calc(180deg * -1);
}
.faq-hux-01 .\[\&_summary\:\:-webkit-details-marker\]\:hidden summary::-webkit-details-marker {
  display: none;
}

/* ── FAQ 見栄え強化 ── */
.faq-hux-01 .space-y-4 {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
  border-radius: var(--radius-card, 4px);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(23,61,60,0.07);
}

.faq-hux-01 :where(.space-y-4 > :not(:last-child)) {
  margin-block-start: 0;
  margin-block-end: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));
}

.faq-hux-01 details {
  background: #fff;
  transition: background 0.2s ease;
}

.faq-hux-01 details[open] {
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
}

.faq-hux-01 summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.75rem;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
  list-style: none;
  transition: background 0.2s ease;
  position: relative;
}

.faq-hux-01 summary::before {
  content: 'Q';
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

.faq-hux-01 summary:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
}

.faq-hux-01 summary h2 {
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--fs-h3, 1.2rem) !important;
  font-weight: 600;
  color: var(--color-heading-ink);
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

.faq-hux-01 summary svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.faq-hux-01 details[open] summary svg {
  transform: rotate(180deg);
}

/* 回答エリア */
.faq-hux-01 details > p {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0 1.75rem 1.5rem 1.75rem;
  font-size: var(--fs-body, 1rem) !important;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0;
}

.faq-hux-01 details > p::before {
  content: 'A';
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-secondary, #B49A62);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  margin-top: 0.1em;
}

/* アニメーション */
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-hux-01 details[open] > p {
  animation: faq-open 0.22s ease both;
}

/* モバイル */
@media (max-width: 768px) {
  .faq-hux-01 summary {
    padding: 1.1rem 1.1rem;
    gap: 0.75rem;
  }
  .faq-hux-01 details > p {
    padding: 0 1.1rem 1.25rem 1.1rem;
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  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)))) {
  .faq-hux-01 *, .faq-hux-01 ::before, .faq-hux-01 ::after, .faq-hux-01 ::backdrop {
    --tw-space-y-reverse: 0;
    --tw-border-style: solid;
    --tw-font-weight: initial;
    --tw-duration: initial;
  }
}