@charset "UTF-8";

/* 線の描画アニメーション(common.css) */
.hero__deco-path {
  stroke: var(--color-accent);
}

.hero__en,
.hero__sub {
  color: var(--color-text);
}

/* ============================================================
  FAQ
  =========================================================== */

.faq__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 150px 20px;

  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
}

/* ============================================================
  左:追従ナビ
  =========================================================== */

.faq__nav {
  position: sticky;
  top: 120px; /* 固定ヘッダーの高さ+余白 */
  align-self: start; /* stickyを効かせるために必須 */
}

.faq__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq__nav-list li + li {
  margin-top: 24px;
}

.faq__nav-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.3s ease;
}

/* 「〉」の矢印 */
.faq__nav-list a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.faq__nav-list a:hover {
  color: var(--color-accent);
}

/* ============================================================
  右:質問一覧
  =========================================================== */

.faq__group {
  scroll-margin-top: 120px; /* アンカー移動時にヘッダーに隠れない */
}

.faq__group + .faq__group {
  margin-top: 100px;
}

/* ---------- カテゴリ見出し(▼付き) ---------- */
.faq__group-title {
  margin: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: 2.4rem;
  color: var(--color-accent);
}

.faq__group-title::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid var(--color-accent); /* 上辺(水平) */
  border-right: 20px solid transparent; /* 右側を透明にして斜辺を作る */
  flex-shrink: 0;
}

/* ---------- 各QA ---------- */
.faq__item {
  border-bottom: 1px solid var(--color-accent);
}

/* ---------- Q(ボタン) ---------- */
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

/* Q・A のマーク(共通) */
.faq__mark {
  flex-shrink: 0;
  width: 40px;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-accent);
}
.faq__mark-a {
  flex-shrink: 0;
  width: 40px;
  font-size: 3.2rem;
  line-height: 1;
  color: #363936;
}

.faq__q-text {
  flex: 1;
  font-size: 2rem;
  line-height: 1.6;
}

/* 開閉の矢印 */
.faq__arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transform: rotate(-135deg); /* 閉じているとき:上向き(∧) */
  transition: transform 0.3s ease;
}

.faq__q[aria-expanded="true"] .faq__arrow {
  transform: rotate(45deg) translateY(-4px); /* 開いているとき:下向き(∨) */
}

/* ---------- A(アコーディオン) ---------- */
.faq__a {
  display: grid;
  grid-template-rows: 0fr; /* 閉じた状態 */
  transition: grid-template-rows 0.4s ease;
}

.faq__a.is-open {
  grid-template-rows: 1fr; /* 開いた状態 */
}

.faq__a-body {
  overflow: hidden; /* 高さ0のとき中身を隠す */
  display: flex;
  gap: 20px;
  padding: 0 10px;
}

.faq__a.is-open .faq__a-body {
  padding: 0 10px 40px;
}

.faq__a-text {
  flex: 1;
  margin: 0;
  line-height: 2;
}

.faq__link {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: bold;
}

/* ============================================================
  レスポンシブ
  =========================================================== */

@media (max-width: 980px) {
  .faq__inner {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 0px 20px 80px;
  }

  /* SPではナビの追従を解除して横並びに */
  .faq__nav {
    position: static;
  }

  .faq__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
  }

  .faq__nav-list li + li {
    margin-top: 0;
  }

  .faq__group + .faq__group {
    margin-top: 60px;
  }

  .faq__group-title {
    font-size: 1.8rem;
    margin-bottom: 0px;
  }

  .faq__mark {
    width: 28px;
    font-size: 2.6rem;
  }
  .faq__mark-a {
    width: 28px;
    font-size: 2.6rem;
  }

  .faq__q {
    gap: 12px;
    padding: 24px 0;
  }

  .faq__q-text {
    font-size: 1.6rem;
  }

  .faq__a-body {
    gap: 12px;
    padding: 0;
  }

  .faq__a.is-open .faq__a-body {
    padding: 0 0 30px;
  }
}
@media (max-width: 660px) {
  .faq__nav-list {
    flex-direction: column; /* 縦積みに */
    gap: 20px;
    justify-content: flex-start;
  }
}