/* ============================================================
   FAQ: カテゴリタブ + アコーディオン + インライン CTA
   Figma: FAQ PC版 569:4263 / カード 1100x76(閉) / 影 0,0,20 青15%
   数値・色・タイポは Figma REST API の実測値。
   ============================================================ */

.nv-faq-main{
  background:var(--nv-white);
  padding-block:16px 0;
}

/* ---- カテゴリタブ (絞り込みチップ) ---- */
ul.nv-faq-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:56px 0 0;
  padding:0;
  list-style:none;
}
.nv-faq-tab{
  display:inline-flex;
  align-items:center;
  height:45px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:#F1F2F4;
  font-family:var(--nv-font);
  font-size:14px;
  line-height:21px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nv-faq-tab:hover{transform:translateY(-2px)}
.nv-faq-tab.is-active{
  background:var(--nv-main);
  color:var(--nv-white);
}

/* ---- カテゴリブロック ---- */
.nv-faq-cat{margin-top:56px}
.nv-faq-cat.is-hidden{display:none}
.nv-faq-cat__head{
  display:flex;
  align-items:center;
}
.nv-faq-cat__title{
  margin:0;
  font-size:28px;
  line-height:1.5;                 /* 42 / 28 */
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-faq-cat__rule{
  position:relative;
  height:1px;
  margin:14px 0 24px;
  border:0;
  background:#D9D9D9;
}
.nv-faq-cat__rule::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100px;
  height:1px;
  background:var(--nv-main);
}

/* ---- Q&A アコーディオン ---- */
ul.nv-faq-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.nv-faq-item{
  background:var(--nv-white);
  border-radius:12px;
  box-shadow:0 0 20px rgba(42,103,212,.15);
}

/* 質問行 (button) */
.nv-faq-q{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:20px 40px;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  border-radius:12px;
}
.nv-faq-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  font-family:'Montserrat','Inter',var(--nv-font);
  font-size:20px;
  line-height:1;
  font-weight:600;
}
.nv-faq-badge--q{
  background:var(--nv-main);
  color:var(--nv-white);
}
.nv-faq-q__text{
  flex:1;
  font-size:18px;
  line-height:1.5;                 /* 27 / 18 */
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-faq-q__chevron{
  flex:0 0 24px;
  width:24px;
  height:24px;
  color:var(--nv-main);
  transition:transform .25s ease;
}
.nv-faq-item.is-open .nv-faq-q__chevron{transform:rotate(90deg)}

/* 回答行 (開いたとき) */
.nv-faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.nv-faq-item.is-open .nv-faq-a{grid-template-rows:1fr}
.nv-faq-a__inner{
  overflow:hidden;
}
.nv-faq-a__row{
  display:flex;
  gap:16px;
  padding:0 40px 24px;
}
.nv-faq-badge--a{
  background:var(--nv-white);
  border:1px solid var(--nv-main);
  color:var(--nv-main);
}
.nv-faq-a__text{
  flex:1;
  padding-top:6px;
  font-size:16px;
  line-height:1.5;                 /* 24 / 16 */
  letter-spacing:.04em;
  color:var(--nv-text);
}

/* ---- インライン CTA (薄水色帯) ---- */
.nv-faq-cta{
  position:relative;
  overflow:hidden;
  margin-top:88px;
  padding-block:56px;
  background:var(--nv-base);
  text-align:center;
}
/* 角の白い斜め装飾 (Figma: Group 630606 / 630007) */
.nv-faq-cta__deco{
  position:absolute;
  width:99px;
  height:24px;
  border-radius:999px;
  background:#FFFFFF;
  opacity:.9;
  transform:rotate(-45deg);
  pointer-events:none;
}
.nv-faq-cta__deco--tl{left:-24px;top:32px}
.nv-faq-cta__deco--br{right:-24px;bottom:32px}

.nv-faq-cta__lead{
  position:relative;
  display:inline-block;
  margin:0;
  padding:0 28px;
  font-size:16px;
  line-height:1.5;                 /* 24 / 16 */
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
/* 左右の斜め装飾ライン (Figma: #2A67D4 の短い斜線) */
.nv-faq-cta__lead::before,
.nv-faq-cta__lead::after{
  content:"";
  position:absolute;
  top:6px;
  width:2px;
  height:32px;
  background:var(--nv-main);
}
.nv-faq-cta__lead::before{left:0;transform:rotate(20deg)}
.nv-faq-cta__lead::after{right:0;transform:rotate(-20deg)}
.nv-faq-cta__btns{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:24px;
}
.nv-faq-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:300px;
  height:72px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nv-faq-cta__btn-arrow{display:inline-flex;transition:transform .2s ease}
.nv-faq-cta__btn:hover{transform:translateY(-2px)}
.nv-faq-cta__btn:hover .nv-faq-cta__btn-arrow{transform:translateX(4px)}
/* color は .nv-page a{color:inherit} (0,1,1) に負けないよう親付きで指定 */
.nv-faq-cta .nv-faq-cta__btn--primary{
  border:3px solid #FFFFFF;
  background:linear-gradient(90deg,#F5AF04,#FEA21C);
  box-shadow:0 0 20px rgba(9,139,222,.20);
  color:#FFFFFF;
}
.nv-faq-cta__btn--ghost{
  border:3px solid transparent;
  background:linear-gradient(var(--nv-white),var(--nv-white)) padding-box,
             linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
  color:var(--nv-text);
}
.nv-faq-cta__btn--ghost .nv-faq-cta__btn-arrow{color:var(--nv-main)}

/* ---- レスポンシブ ---- */
@media (max-width:1024px){
  ul.nv-faq-tabs{gap:8px}
  .nv-faq-q{padding:20px 24px}
  .nv-faq-a__row{padding:0 24px 24px}
}

/* ---- SP: Figma 673:19491「FAQ SP版」(390px / 20px ガター) の REST 実測 ---- */
@media (max-width:767px){
  .nv-faq-main{padding-block:8px 0}

  /* パンくず */
  .nv-faq-main .nv-crumb{gap:8px}
  .nv-faq-main .nv-crumb li{gap:8px}

  /* カテゴリタブ: 2 行に折り返す (横スクロールしない) */
  ul.nv-faq-tabs{
    flex-wrap:wrap;
    gap:12px 8px;
    margin-top:40px;
    padding-bottom:0;
  }
  .nv-faq-tab{
    height:26px;
    padding:0 12px;
    font-size:12px;
    line-height:18px;
  }

  /* カテゴリ見出し */
  .nv-faq-cat{margin-top:24px}
  .nv-faq-cat__title{font-size:20px;letter-spacing:.8px}
  .nv-faq-cat__rule{margin:8px 0 16px}
  .nv-faq-cat__rule::before{width:40px}

  /* Q&A カード */
  ul.nv-faq-list{gap:8px}
  .nv-faq-item{border-radius:8px}
  .nv-faq-q{
    gap:8px;
    padding:16px;
    border-radius:8px;
  }
  .nv-faq-badge{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:18px;
    letter-spacing:.72px;
  }
  .nv-faq-q__text{font-size:16px;letter-spacing:.64px}
  /* SP は閉じ ▼ / 開き ▲ (Figma: 右向きアイコンを +90° / -90°) */
  .nv-faq-q__chevron{transform:rotate(90deg)}
  .nv-faq-item.is-open .nv-faq-q__chevron{transform:rotate(-90deg)}
  .nv-faq-a__row{gap:8px;padding:0 16px 16px}
  .nv-faq-a__text{
    padding-top:0;
    font-size:15px;
    letter-spacing:.6px;
  }

  /* インライン CTA */
  .nv-faq-cta{margin-top:40px;padding-block:40px}
  .nv-faq-cta__deco{width:60px;height:16px}
  .nv-faq-cta__deco--tl{left:-16px;top:128px}
  .nv-faq-cta__deco--br{right:-16px;bottom:0}
  .nv-faq-cta__lead{
    padding:0 28px;
    font-size:15px;
    letter-spacing:.6px;
  }
  .nv-faq-cta__lead br{display:none}
  .nv-faq-cta__lead::before,
  .nv-faq-cta__lead::after{top:2px;height:24px}
  .nv-faq-cta__btns{
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:24px;
  }
  .nv-faq-cta__btn{
    gap:10px;
    width:260px;
    height:64px;
    font-size:15px;
    letter-spacing:.6px;
  }
  .nv-faq-cta .nv-faq-cta__btn--primary{border-width:2px}
  /* SP のゴースト: グラデ枠ではなく白地 + 青影 */
  .nv-faq-cta__btn--ghost{
    border:0;
    background:#FFFFFF;
    box-shadow:0 0 20px rgba(9,139,222,.20);
  }
}