/* faq.css — よくあるご質問（Figma: FAQ 2025:10668）
   実値: pt 160 pb 80 / 見出し 32px Bold lh1.8 + 黒バー 60x4
         項目 #F3F3F3 radius 16 px16 py24 gap24 / Qバッジ 32px #1561AB
         質問文 16px Medium lh1.8 ls0.1em / +アイコン 14px 青 */

.faq {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-160) var(--space-40) var(--space-80);
  overflow: hidden;
}

.faq__watermark {
  position: absolute;
  top: 4.3125rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.4;
  pointer-events: none;
}

.faq__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80);
  width: 100%;
  max-width: var(--layout-max);
}

.faq__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.faq__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

.faq__bar {
  display: block;
  width: 3.75rem;
  height: .25rem;
  background: var(--color-black);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 60rem;
}

.faq-item {
  border-radius: var(--radius-lg);
  background: var(--color-gray-light);
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-16);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  /* 1文字を正円の上下左右中央に置く：行送りと継承した字間（末尾に付いて左に寄る）を打ち消す */
  line-height: var(--line-height-none);
  letter-spacing: 0;
  /* Noto Sans JPのメトリクスだと僅かに下寄りに見えるため、1pxだけ上へ光学調整 */
  padding-bottom: 2px;
}

/* Aバッジ：Qの反転配色（白地・青枠・青文字） */
.faq-item__badge--a {
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-accent); /* 枠線はサイズに影響しない内側描画（.btn--outlineと同手法） */
  color: var(--color-accent);
}

.faq-item__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

/* 開閉アイコン：バー2本で + を描き、open時は縦バーを畳んで − にする
   （バーはicon-plus.svgと同じ 3px・角丸・#0078CF） */
.faq-item__icon {
  position: relative;
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .875rem;
  height: .1875rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg); /* 縦バー */
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(180deg); /* 縦バーが時計回りに回転して横バーに重なり − になる */
}

/* 開いたとき回答をふわっと表示（開閉の高さアニメーションは assets/js/faq-accordion.js） */
@keyframes ic-faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-4)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.faq-item[open] .faq-item__answer {
  animation: ic-faq-answer-in 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-item__answer {
    animation: none;
  }
}

/* 回答行：Qと同じバッジ（A）+ 本文。バッジ分でテキスト開始位置は質問文と揃う */
.faq-item__answer {
  display: flex;
  align-items: flex-start; /* 複数行でもバッジは1行目に揃える */
  gap: var(--space-24);
  padding: 0 var(--space-16) var(--space-24);
}

.faq-item__answer-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

/* --- SP ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .faq {
    padding: var(--space-48) var(--space-24);
  }
  .faq__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
  }
  .faq__inner {
    gap: var(--space-40);
  }
  .faq-item__question,
  .faq-item__answer {
    gap: var(--space-16);
  }
}