/* ===== SWX FAQ - Material Design準拠 ===== */
.swx-faq {
  /* カラートークン（base.css参照） */
  --faq-primary: var(--swx-c-brand);
  --faq-surface: var(--swx-c-surface);
  --faq-surface-variant: color-mix(in oklab, var(--swx-c-surface) 96%, var(--swx-c-brand) 4%);
  --faq-on-surface: var(--swx-c-text);
  --faq-muted: var(--swx-c-muted);
  --faq-border: color-mix(in oklab, var(--swx-c-border) 60%, transparent);

  /* 全体レイアウト */
  max-width: 960px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  padding-block: clamp(24px, 4vw, 40px);
}

.swx-faq__group {
  margin: var(--swx-gap-6) 0;
}

.swx-faq__group-title {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  font-weight: 700;
  color: var(--faq-on-surface);
  margin: var(--swx-gap-6) 0 var(--swx-gap-4);
  position: relative;
  padding-bottom: var(--swx-gap-3);
}

.swx-faq__group-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--faq-primary), transparent);
  border-radius: 2px;
}

/* 検索 */
.swx-faq__search {
  margin: 0 0 var(--swx-gap-6);
}

.swx-faq__search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--faq-border);
  border-radius: var(--swx-radius);
  background: var(--faq-surface);
  color: var(--faq-on-surface);
  font-size: 0.9375rem;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.swx-faq__search-input:focus {
  outline: none;
  border-color: var(--faq-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--faq-primary) 20%, transparent);
}

/* アコーディオンカード（variant=accordion） */
.swx-faq[data-variant='accordion'] .swx-faq__item {
  background: var(--swx-c-surface);
  border-radius: 16px;
  border: 1px solid var(--faq-border);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  margin-bottom: 0.75rem;
  transition:
    box-shadow 160ms ease-out,
    transform 160ms ease-out,
    background-color 160ms ease-out,
    border-color 160ms ease-out;
}

.swx-faq[data-variant='accordion'] .swx-faq__item.is-open {
  background: var(--faq-surface-variant);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.26);
  border-color: color-mix(in oklab, var(--faq-primary) 40%, transparent);
}

/* 質問部分（ヘッダー） */
.swx-faq__summary,
.swx-faq__q {
  all: unset; /* ボタンリセット */
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.9rem 1.2rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--faq-on-surface);
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  transition: background-color 120ms ease-out;
}

.swx-faq__summary:hover,
.swx-faq__q:hover {
  background: rgba(0, 0, 0, 0.06);
}

.swx-faq__summary:focus-visible,
.swx-faq__q:focus-visible {
  outline: 2px solid var(--faq-primary);
  outline-offset: 3px;
}

/* Q. ラベル */
.swx-faq__q-label {
  font-weight: 700;
  color: var(--faq-primary);
  font-size: 0.9em;
}

/* 質問テキスト */
.swx-faq__q-text {
  line-height: 1.5;
  color: var(--faq-on-surface);
}

/* 右側のアイコン（▼/▲） */
.swx-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.swx-faq__icon::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid var(--faq-primary);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  transition: transform 160ms ease-out;
}

.swx-faq__item.is-open .swx-faq__icon::before {
  transform: rotate(225deg);
}

/* 回答部分（パネル） */
.swx-faq__detail,
.swx-faq__a {
  padding: 0 1.2rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--faq-on-surface);
  border-top: 1px solid var(--faq-border);
}

.swx-faq__detail p,
.swx-faq__a p {
  margin: 0.3rem 0 0;
  color: var(--faq-muted);
}

.swx-faq__detail p:first-child,
.swx-faq__a p:first-child {
  margin-top: 0.75rem;
}

/* リスト（variant=list） */
.swx-faq[data-variant='list'] .swx-faq__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--swx-gap-2);
  padding: var(--swx-gap-4);
  margin-bottom: var(--swx-gap-3);
  background: var(--swx-c-surface);
  border-radius: var(--swx-radius);
  border: 1px solid var(--faq-border);
}

.swx-faq[data-variant='list'] .swx-faq__q.-list {
  font-weight: 700;
  color: var(--faq-on-surface);
  font-size: 0.98rem;
}

.swx-faq[data-variant='list'] .swx-faq__a.-list {
  color: var(--faq-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 余白最適化 */
.swx-faq__item:last-child {
  margin-bottom: 0;
}

/* ===== Hero: FAQ ===== */
.swx-hero.-faq{
  position:relative; min-height:clamp(220px,45vh,420px);
  overflow:clip; display:grid;
}
.swx-hero.-faq .hero-bg{ position:absolute; inset:0; }
.swx-hero.-faq .hero-bg img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center 35%;
}
.swx-hero.-faq .overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, #000 0%, transparent) 20%,
    color-mix(in oklab, #000 30%, transparent) 70%,
    color-mix(in oklab, #000 45%, transparent) 100%
  ); pointer-events:none;
}
.swx-hero.-faq .hero-inner{
  position:relative; z-index:1; align-self:end;
  width:min(1100px,90%); margin:0 auto clamp(18px,4vw,28px);
  color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.swx-hero.-faq .hero-title{
  font-size:clamp(24px,4vw,40px); font-weight:800; color:#fff;
  letter-spacing:.02em; margin:0 0 .3em;
}
.swx-hero.-faq .hero-sub{ margin:0; font-size:clamp(14px,1.6vw,16px); opacity:.95; }

/* ===== hero ===== */
.faq-hero{padding:clamp(40px,9vw,96px) 0 clamp(20px,5vw,40px);
  background: radial-gradient(1200px 360px at 50% -10%, color-mix(in oklab,var(--brand,#ffd400) 16%,transparent), transparent), var(--surface,#fff);
  border-bottom:1px solid color-mix(in oklab,var(--ink,#111) 10%, transparent);
}
.faq-hero__title{margin:0 0 6px;font-size:clamp(26px,4vw,52px);font-weight:900;color:var(--ink,#111)}
.faq-hero__sub{margin:0;color:color-mix(in oklab,var(--ink,#111) 60%,transparent)}
.faq-intro{padding:clamp(24px,5vw,48px) 0}

/* ===== FAQ: Visual / Team voices ===== */
.faq-voices {
  padding: clamp(var(--swx-gap-8), 6vw, var(--swx-gap-12)) 0;
  background: var(--swx-c-bg);
  border-top: 1px solid var(--swx-c-border);
}

.faq-voices .container {
  max-width: min(1100px, 100% - 2rem);
  margin-inline: auto;
  /* padding は base.css で統一管理 */
}

.faq-voices .sec-title {
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--swx-c-text);
  margin: 0 0 var(--swx-gap-8);
  text-align: center;
  position: relative;
  padding-bottom: var(--swx-gap-4);
}

.faq-voices .sec-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--swx-c-brand), transparent);
  border-radius: 2px;
}

/* Team grid */
.team {
  display: grid;
  gap: var(--swx-gap-8);
  margin-top: var(--swx-gap-8);
}

/* Member card - Material Design準拠 */
.member {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: var(--swx-gap-6);
  align-items: center;
  background: var(--swx-c-surface);
  border: 1px solid var(--swx-c-border);
  border-radius: var(--swx-radius);
  padding: var(--swx-gap-6);
  box-shadow: var(--swx-shadow-sm);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.member::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--swx-c-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.member:hover {
  box-shadow: var(--swx-shadow-md);
  transform: translateY(-2px);
}

.member:hover::before {
  transform: scaleY(1);
}

/* Alternate layout (画像右配置) */
.member.-alt {
  grid-template-columns: 2fr 1.1fr;
}

.member.-alt .member__media {
  order: 2;
}

.member.-alt .member__body {
  order: 1;
}

/* Member media */
.member__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--swx-radius) * 0.8);
  background: var(--swx-c-bg);
  position: relative;
}

.member__media::after {
  content: '👤';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.1;
  pointer-events: none;
}

.member__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: calc(var(--swx-radius) * 0.8);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.member:hover .member__media img {
  transform: scale(1.02);
}

/* Member body */
.member__body {
  display: flex;
  flex-direction: column;
  gap: var(--swx-gap-3);
}

.member__lead {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--swx-c-text);
  margin: 0;
  position: relative;
  padding-left: var(--swx-gap-6);
}

.member__lead::before {
  content: '💬';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  opacity: 0.7;
}

.member__text {
  font-size: clamp(0.9375rem, 1.8vw, 1rem);
  line-height: 1.7;
  color: var(--swx-c-muted);
  margin: 0;
}

.member__meta {
  display: flex;
  align-items: center;
  gap: var(--swx-gap-2);
  font-size: 0.875rem;
  color: var(--swx-c-muted);
  margin: var(--swx-gap-2) 0 0;
  padding-top: var(--swx-gap-3);
  border-top: 1px solid var(--swx-c-border);
}

.member__meta::before {
  content: '📋';
  font-size: 1em;
  opacity: 0.6;
}

/* ===== FAQ: CTA ===== */
.faq-cta {
  padding: clamp(var(--swx-gap-8), 6vw, var(--swx-gap-12)) 0;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--swx-c-brand) 5%, transparent),
    var(--swx-c-bg)
  );
  border-top: 1px solid var(--swx-c-border);
}

.faq-cta .container {
  max-width: min(1100px, 100% - 2rem);
  margin-inline: auto;
  padding: 0 clamp(14px, 3vw, 24px);
  text-align: center;
}

.faq-cta .sec-title {
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--swx-c-text);
  margin: 0 0 var(--swx-gap-4);
}

.faq-cta .lead {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: var(--swx-c-muted);
  margin: 0 0 var(--swx-gap-8);
  line-height: 1.7;
}

/* CTA buttons row */
.cta-row {
  display: flex;
  gap: var(--swx-gap-4);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--swx-gap-6) 0;
}

/* Material Design buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--swx-gap-2);
  padding: 0.875rem 1.5rem;
  border-radius: var(--swx-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--swx-shadow-sm);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: inherit;
}

.btn:hover::before {
  opacity: 0.1;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--swx-c-brand);
  color: var(--swx-c-ink-on-brand);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--swx-c-brand) 40%, transparent);
}

.btn-primary::after {
  content: '→';
  font-size: 1.2em;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  box-shadow: 0 4px 12px color-mix(in oklab, var(--swx-c-brand) 50%, transparent);
}

.btn-primary:hover::after {
  transform: translateX(4px);
}

.btn-secondary {
  background: var(--swx-c-surface);
  color: var(--swx-c-text);
  border: 1px solid var(--swx-c-border);
}

.btn-secondary::after {
  content: '✉';
  font-size: 1.1em;
  opacity: 0.8;
}

.btn-secondary:hover {
  box-shadow: var(--swx-shadow-md);
  border-color: var(--swx-c-brand);
}

/* Next links */
.next-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--swx-gap-4);
  margin: var(--swx-gap-8) 0 0;
  padding: 0;
  list-style: none;
}

.next-links li {
  margin: 0;
}

.next-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--swx-gap-2);
  padding: var(--swx-gap-4);
  text-decoration: none;
  color: var(--swx-c-text);
  border: 1px solid var(--swx-c-border);
  border-radius: var(--swx-radius);
  background: var(--swx-c-surface);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9375rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.next-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--swx-c-brand);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: inherit;
  z-index: 0;
}

.next-links a::after {
  content: '→';
  position: relative;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0.25rem;
  color: inherit;
}

.next-links a > * {
  position: relative;
  z-index: 2;
}

.next-links a:hover {
  color: var(--swx-c-ink-on-brand) !important;
  border-color: var(--swx-c-brand);
  box-shadow: var(--swx-shadow-sm);
  transform: translateY(-2px);
}

.next-links a:hover > * {
  color: var(--swx-c-ink-on-brand) !important;
}

.next-links a:hover::before {
  opacity: 1;
}

.next-links a:hover::after {
  transform: translateX(4px);
  color: var(--swx-c-ink-on-brand) !important;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .member,
  .member.-alt {
    grid-template-columns: 1fr;
  }

  .member.-alt .member__media {
    order: 1;
  }

  .member.-alt .member__body {
    order: 2;
  }

  .member__media img {
    max-height: 220px;
  }

  .next-links {
    grid-template-columns: 1fr;
  }

  .cta-row {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}