/* ============================================================
   トップ セクション07: Neovisionの3つのサービス
   Figma: 243:7976 (SERVICES) / 1440x1492 基準
   値は Figma REST API 実測 (fontSize/letterSpacing/fill) に準拠
   トークンは base.css を参照 (--nv-text #1F3A5F / --nv-main #2A67D4 ...)
   ============================================================ */

.nv-services{
  /* Latin ディスプレイ (透かし・番号・価格) は Montserrat */
  --nv-latin:'Montserrat', var(--nv-font);
  background:var(--nv-base);
  padding:88px 0;
}

/* --- 見出し --- */
.nv-services__head{
  position:relative;
  text-align:center;
  padding-top:40px;
  margin-bottom:64px;
}
.nv-services__watermark{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--nv-latin);
  font-size:96px;
  font-style:italic;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  color:#ffffff;              /* Figma: SERVICES は白 (#EBF6FF 面に微差で浮かす) */
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.nv-services__title{
  position:relative;
  z-index:1;
  margin:0;
  font-family:var(--nv-latin);
  font-size:40px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-services__title-em{            /* 「3」= Montserrat Bold Italic 48px 青 */
  font-family:var(--nv-latin);
  font-style:italic;
  font-weight:700;
  font-size:48px;
  color:var(--nv-main);
}
.nv-services__accent{
  position:relative;
  display:block;
  width:40px;
  height:4px;
  margin:20px auto 0;
  border-radius:4px;
  background:var(--nv-main);
}
.nv-services__accent::after{
  content:"";
  position:absolute;
  top:0;
  left:48px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--nv-main);
}

/* --- カード --- */
.nv-services__list{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.nv-services__card{
  display:flex;
  gap:56px;
  padding:40px 56px;
  background:var(--nv-white);
  border-radius:12px;
}
.nv-services__body{
  flex:1 1 auto;
  min-width:0;
}
.nv-services__side{
  flex:0 0 336px;
  display:flex;
  flex-direction:column;
}

.nv-services__badge{
  display:inline-block;
  padding:2px 12px;
  border-radius:999px;
  background:var(--nv-main);
  color:var(--nv-white);
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
}
.nv-services__titlerow{
  display:flex;
  align-items:baseline;
  gap:24px;
  margin-top:0;
}
.nv-services__num{
  flex-shrink:0;
  font-family:var(--nv-latin);
  font-size:40px;
  font-style:italic;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  color:var(--nv-main);
}
.nv-services__cardtitle{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nv-services__cardtitle-en{
  font-family:var(--nv-latin);
  font-size:32px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-services__cardtitle-sub{
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.04em;
  color:var(--nv-main);
}
.nv-services__desc{
  margin:24px 0 0;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--nv-text);
}

/* --- 機能リスト（チェックピル） --- */
.nv-services__features{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nv-services__feature{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:4px 18px;
  border-radius:999px;
  background:#f1f2f4;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-services__check{ flex-shrink:0; }

/* --- 価格 --- */
.nv-services__price{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:24px 0 0;
  font-family:var(--nv-latin);
}
.nv-services__price-main{
  font-size:24px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-services__price-sub{
  font-size:16px;
  font-weight:700;
  color:#828282;
}

/* --- CTA ボタン（グラデーション枠 #2A67D4→#4EB1EA / 3px） --- */
.nv-services__cta{
  margin-top:40px;
  text-align:center;
}
.nv-services__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:260px;
  height:64px;
  border:3px 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:16px;
  font-weight:700;
  letter-spacing:.04em;
  transition:color .2s ease,background .2s ease;
}
.nv-services__btn svg{ transition:transform .2s ease; }
.nv-services__btn:hover{
  background:linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
  color:var(--nv-white);
}
.nv-services__btn:hover svg{ transform:translateX(4px); }

/* --- レスポンシブ --- */
@media (max-width:1024px){
  .nv-services{ padding:64px 0; }
  .nv-services__watermark{ font-size:72px; }
  .nv-services__title{ font-size:34px; }
  .nv-services__title-em{ font-size:41px; }
  .nv-services__head{ margin-bottom:48px; }
  .nv-services__card{ gap:40px; padding:36px 40px; }
  .nv-services__side{ flex-basis:300px; }
  .nv-services__cardtitle-en{ font-size:26px; }
  .nv-services__num{ font-size:36px; }
}

@media (max-width:767px){
  /* SP 390px 基準 / 左右20pxガター(コンテンツ350px) / Figma 607:1309 実測 */
  .nv-services{ padding:32px 0 40px; }

  /* --- 見出し（SERVICES 透かし 40px / タイトル 24px） --- */
  .nv-services__head{ padding-top:24px; margin-bottom:24px; }
  .nv-services__watermark{ font-size:40px; top:8px; }   /* Montserrat SemiBoldItalic 40px w600 ls.04em 白 */
  .nv-services__title{ font-size:24px; }                /* Noto Sans JP Bold 24px lh36 ls.04em */
  .nv-services__title-em{ font-size:29px; }             /* 「3」= タイトル比 1.2x（Figmaの強調維持） */
  .nv-services__accent{ width:24px; height:3px; margin-top:8px; }
  .nv-services__accent::after{ left:31px; width:3px; height:3px; }

  /* --- カード列（1カラム縦積み / 間隔16px） --- */
  .nv-services__list{ gap:16px; }
  .nv-services__card{
    flex-direction:column;
    gap:24px;              /* 本文(desc)→機能リストの間隔 */
    padding:16px;         /* Figma: カード内側余白16px */
    border-radius:8px;    /* Figma r=8 */
  }
  .nv-services__side{ flex-basis:auto; }

  /* --- カード内テキスト --- */
  .nv-services__badge{ font-size:15px; }                /* Noto Sans JP Bold 15px / padding 2px12px は共通 */
  .nv-services__titlerow{
    align-items:flex-start;  /* Figma SP は番号とタイトルが上端揃え */
    margin-top:0;
    gap:12px;
  }
  .nv-services__num{ font-size:32px; }                  /* Montserrat SemiBoldItalic 32px w600 ls.04em */
  .nv-services__cardtitle-en{ font-size:22px; }         /* Montserrat Bold 22px lh1.2 ls.04em */
  .nv-services__cardtitle-sub{ font-size:13px; }        /* Noto Sans JP 13px */
  .nv-services__desc{ margin-top:8px; font-size:15px; line-height:1.47; } /* Regular 15px lh22 */

  /* --- 機能リスト（Figma 14px / padding 4px18px / gap 8px は共通のまま） --- */

  /* --- 価格 --- */
  .nv-services__price{ margin-top:16px; }
  .nv-services__price-main{ font-size:20px; }           /* Bold 20px */
  .nv-services__price-sub{ font-size:14px; }            /* 補足 グレー #828282 */

  /* --- CTA（260x56 / 枠2px / 15px） --- */
  .nv-services__cta{ margin-top:24px; }
  .nv-services__btn{
    max-width:100%;      /* width:260px は素のルールを継承 / 狭幅であふれない */
    height:56px;
    border-width:2px;    /* Figma stroke w=2 */
    font-size:15px;
  }
}