/* ============================================================
   料金ページ (PRICING) リニューアル
   正本デザイン: Figma 307:4681 / 1440幅 / コンテンツ 1100px
   共通トークン: base.css / 見出し・比較表・Hero は service-detail.css を流用
   関連ページ/CONTACT は top-11-next.css / top-12-contact.css を流用
   ============================================================ */

.nv-pricing{
  --nv-latin:'Montserrat','Inter',var(--nv-font);
  --nv-svc-muted:#5B6B82;
  --nv-svc-line:#D9D9D9;
}

/* ============================================================
   MONTHLY 月額プラン 3枚
   ============================================================ */
.nv-monthly{
  background:var(--nv-white);
  padding-block:80px;
}
.nv-plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.nv-plan{
  display:flex;
  flex-direction:column;
  background:var(--nv-white);
  border:1px solid var(--nv-svc-line);
  border-radius:12px;
  overflow:hidden;
}
.nv-plan--reco{
  border-color:var(--nv-main);
  box-shadow:0 16px 36px rgba(42,103,212,.16);
}
.nv-plan__head{
  padding:16px;
  text-align:center;
  background:#F1F5FB;
  font-family:var(--nv-latin);
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--nv-text);
}
.nv-plan--reco .nv-plan__head{
  background:linear-gradient(135deg,#2A67D4,#4EB1EA);
  color:var(--nv-white);
}
.nv-plan__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:24px 22px 28px;
}
.nv-plan__subtitle{
  font-size:14px;
  line-height:1.5;
  font-weight:700;
  text-align:center;
  color:var(--nv-text);
  min-height:42px;
}
.nv-plan__price{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  margin-top:12px;
  font-family:var(--nv-latin);
}
.nv-plan__price-main{
  font-size:34px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-plan__price-unit{
  font-size:14px;
  font-weight:700;
  color:var(--nv-svc-muted);
}
.nv-plan__desc{
  margin-top:14px;
  font-size:12px;
  line-height:1.7;
  color:var(--nv-svc-muted);
  text-align:center;
}
.nv-plan__features{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--nv-svc-line);
}
.nv-plan__feature{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.6;
  color:var(--nv-text);
}
.nv-plan__feature svg{flex-shrink:0;margin-top:2px;color:var(--nv-main)}
.nv-plan__feature--off{color:var(--nv-svc-muted)}
.nv-plan__feature--off svg{color:var(--nv-svc-line)}
.nv-plan__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:56px;
  margin-top:24px;
  border:2px solid transparent;
  border-radius:999px;
  background:
    linear-gradient(var(--nv-white),var(--nv-white)) padding-box,
    linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
  color:var(--nv-text);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  transition:color .2s ease,background .2s ease;
}
.nv-plan__cta svg{transition:transform .2s ease}
.nv-plan__cta:hover{
  background:linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
  color:var(--nv-white);
}
.nv-plan__cta:hover svg{transform:translateX(4px)}
.nv-plan--reco .nv-plan__cta{
  background:linear-gradient(90deg,#2A67D4,#4EB1EA);
  border-color:transparent;
  color:var(--nv-white);
}
/* 「月次工数を超えた場合」注記 */
.nv-monthly__note{
  margin-top:24px;
  padding:16px 20px;
  border-left:3px solid var(--nv-main);
  background:var(--nv-base);
  border-radius:0 8px 8px 0;
  font-size:13px;
  line-height:1.7;
  color:var(--nv-text);
}
.nv-monthly__note b{color:var(--nv-main)}

/* ============================================================
   CONSULTING 表 (メニュー / 価格 / 期間 / 含有内容)
   ============================================================ */
.nv-consulting{
  background:var(--nv-white);
  padding-block:80px;
}
.nv-ctable-wrap{overflow-x:auto}
.nv-ctable{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--nv-svc-line);
  border-radius:12px;
  overflow:hidden;
  font-size:14px;
}
.nv-ctable th,
.nv-ctable td{
  padding:14px 18px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--nv-svc-line);
  border-right:1px solid var(--nv-svc-line);
}
.nv-ctable tr:last-child td{border-bottom:0}
.nv-ctable th:last-child,
.nv-ctable td:last-child{border-right:0}
.nv-ctable thead th{
  background:var(--nv-text);
  color:var(--nv-white);
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
}
.nv-ctable tbody th{
  background:#F5F8FC;
  font-weight:700;
  color:var(--nv-text);
  white-space:nowrap;
}
.nv-ctable__price{
  font-family:var(--nv-latin);
  font-weight:700;
  color:var(--nv-text);
  white-space:nowrap;
}
.nv-ctable__period{white-space:nowrap;color:var(--nv-svc-muted)}
.nv-ctable__detail{line-height:1.7}

/* ============================================================
   FAQ アコーディオン (details/summary / JS不要)
   ============================================================ */
.nv-pfaq{
  background:var(--nv-base);
  padding-block:80px;
}
.nv-pfaq__list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.nv-pfaq__item{
  background:var(--nv-white);
  border:1px solid var(--nv-svc-line);
  border-radius:8px;
  overflow:hidden;
}
.nv-pfaq__q{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-pfaq__q::-webkit-details-marker{display:none}
.nv-pfaq__q-icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--nv-main);
  color:var(--nv-white);
  font-family:var(--nv-latin);
  font-size:13px;
  font-weight:700;
}
.nv-pfaq__q-text{flex:1 1 auto}
.nv-pfaq__q-arrow{
  flex-shrink:0;
  color:var(--nv-main);
  transition:transform .2s ease;
}
.nv-pfaq__item[open] .nv-pfaq__q-arrow{transform:rotate(180deg)}
.nv-pfaq__a{
  display:flex;
  gap:12px;
  padding:0 20px 20px 58px;
  font-size:14px;
  line-height:1.8;
  color:var(--nv-svc-muted);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .nv-monthly,.nv-consulting,.nv-pfaq{padding-block:64px}
  .nv-plans{gap:16px}
  .nv-plan__price-main{font-size:30px}
}
@media (max-width:767px){
  .nv-monthly,.nv-consulting,.nv-pfaq{padding-block:44px}

  /* MONTHLY: Figma SP 697:27401 はカード順 LIGHT→STANDARD→PREMIUM のまま */
  .nv-plans{grid-template-columns:1fr;gap:16px}
  .nv-plan__head{background:#E5E5E5}
  .nv-plan--reco .nv-plan__head{background:var(--nv-main)}
  .nv-plan__subtitle{min-height:0}
  .nv-plan__desc{text-align:left}
  /* Figma SP は「なし」項目も通常表示 */
  .nv-plan__feature--off{color:var(--nv-text)}
  .nv-plan__feature--off svg{color:var(--nv-main)}
  /* STANDARD の CTA も他カード同様の白地アウトライン */
  .nv-plan--reco .nv-plan__cta{
    background:
      linear-gradient(var(--nv-white),var(--nv-white)) padding-box,
      linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
    color:var(--nv-text);
  }

  /* 注記: Figma SP は白地 + 左グレー線 + 見出し/本文の2段 */
  .nv-monthly__note{
    margin-top:32px;
    padding:4px 0 4px 16px;
    border-left:2px solid #C0C0C0;
    border-radius:0;
    background:transparent;
  }
  .nv-monthly__note b{display:block;margin-bottom:6px;font-size:15px;color:var(--nv-text)}
  .nv-monthly__note-sep{display:none}
  .nv-monthly__note-body{color:var(--nv-svc-muted)}

  /* PRODUCTION: Figma SP はグレー地セクション */
  .nv-pricing .nv-svc-pricing{background:#F1F2F4}

  /* CONSULTING: ヘッダー青(中央) + ゼブラ行 + 価格/期間 中央揃え (Figma 697:27601) */
  .nv-ctable thead th{background:var(--nv-main);text-align:center}
  .nv-ctable tbody th{background:transparent}
  .nv-ctable tbody tr:nth-child(even) th,
  .nv-ctable tbody tr:nth-child(even) td{background:#F1F2F4}
  .nv-ctable__price,
  .nv-ctable__period{text-align:center}

  .nv-pfaq__q{font-size:14px}
  .nv-pfaq__a{padding-left:20px}
}