/* ============================================================
   トップ セクション12: CONTACT (CTA バンド)
   Figma: 258:12587 / 1440 x 540 / 青グラデ地 (#2A67D4 -> #4EB1EA / 横)
   数値・色・タイポは Figma REST API の実測値。
   ============================================================ */

.nv-contact{
  --nv-latin:'Montserrat','Inter',var(--nv-font);
  background:linear-gradient(90deg,#2A67D4,#4EB1EA);
  padding-block:56px 80px;
}

/* ---- 見出し (中央 / 白) ---- */
.nv-contact__head{
  text-align:center;
  margin-bottom:24px;
}
.nv-contact__eyebrow{
  font-family:var(--nv-latin);
  font-size:48px;
  line-height:1.5;                 /* 72 / 48 */
  font-weight:600;
  font-style:italic;               /* Montserrat SemiBold Italic */
  letter-spacing:.04em;
  color:#FFFFFF;
  margin:0;
}
.nv-contact__title{
  font-size:16px;
  line-height:1.5;
  font-weight:700;
  color:#FFFFFF;
}

/* ---- 白カード ---- */
.nv-contact__card{
  position:relative;
  width:min(800px, 100%);
  margin-inline:auto;
  padding:40px;
  background:#FFFFFF;
  border-radius:12px;
  text-align:center;
  /* 微細なドットテクスチャ (Figma: #F5F5F5 の小ドット) */
  background-image:radial-gradient(#F5F5F5 1.5px, transparent 1.6px);
  background-size:16px 16px;
}

.nv-contact__illust{
  position:absolute;
  left:-48px;
  bottom:-24px;
  width:180px;
  height:180px;
  pointer-events:none;
}

.nv-contact__lead{
  margin:0;
  font-size:28px;
  line-height:1.5;                 /* 42 / 28 */
  font-weight:700;
  color:var(--nv-text);
}
.nv-contact__desc{
  margin:16px 0 0;
  font-size:14px;
  line-height:1.5;                 /* 21 / 14 */
  color:var(--nv-text);
}

.nv-contact__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:380px;
  max-width:100%;
  height:80px;
  margin-top:24px;
  padding:0 32px;
  border:3px solid #FFFFFF;
  border-radius:999px;
  background:linear-gradient(90deg,#F5AF04,#FEA21C);
  box-shadow:0 0 20px rgba(9,139,222,.20);
  color:#FFFFFF;
  font-size:20px;
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nv-contact__btn-arrow{display:inline-flex;transition:transform .2s ease}
.nv-contact__btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(9,139,222,.35)}
.nv-contact__btn:hover .nv-contact__btn-arrow{transform:translateX(4px)}

/* ---- レスポンシブ ---- */
@media (max-width:1024px){
  .nv-contact{padding-block:48px 64px}
  .nv-contact__eyebrow{font-size:40px}
  .nv-contact__card{padding:36px}
}

/* ---- SP: Figma 390 x 472 / 青グラデ地 #2A67D4->#4EB1EA (実測: 695:27259) ---- */
@media (max-width:767px){
  /* 見出し top32 / カード下 64 (ノートPC逃がし) */
  .nv-contact{padding-block:32px 64px}

  /* 見出し (中央 / 白) */
  .nv-contact__head{margin-bottom:24px}
  .nv-contact__eyebrow{font-size:40px}                     /* Montserrat SemiBoldItalic w600 ls.04em lh1.5 (60/40) */
  .nv-contact__title{font-size:15px;letter-spacing:.04em}  /* Bold w700 (お問い合わせ) */

  /* 白カード 350x269 / r8 / 内側 上32・左右16・下40 */
  .nv-contact__card{padding:32px 16px 40px;border-radius:8px}

  /* 見出し(中央) 20px / サブ(左寄せ) 14px — 実測 lh1.5・ls.04em */
  .nv-contact__lead{font-size:20px;letter-spacing:.04em}                 /* 30/20 */
  .nv-contact__desc{margin-top:16px;text-align:left;letter-spacing:.04em} /* Noto Sans JP Regular / 21/14 */

  /* CTA 318x64 / 白ボーダー2 / r999 / ラベル中央・矢印を右16に固定 */
  .nv-contact__btn{
    width:100%;
    height:64px;
    margin-top:24px;
    padding:0;
    gap:0;
    border-width:2px;
    font-size:15px;              /* Noto Sans JP Bold w700 */
    letter-spacing:.04em;        /* ls0.60 */
    position:relative;
  }
  .nv-contact__btn-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
  .nv-contact__btn:hover .nv-contact__btn-arrow{transform:translateY(-50%) translateX(4px)}

  /* ノートPCイラスト: カード左下・104x104 (Figma frame (20,360) 104x104) */
  .nv-contact__illust{left:0;right:auto;bottom:-56px;width:104px;height:104px;transform:none}
}

/* ---- 下層バリアント: 2ボタン行 (Figma: 制作実績 312:4395 / 300x72 x2 / gap 16) ---- */
.nv-contact__btns--row{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:24px;
}
.nv-contact__btn--compact{
  width:300px;
  height:72px;
  margin-top:0;
  padding:0 24px;
  font-size:16px;
  gap:14px;
}
.nv-contact__btn--ghost{
  border:3px solid transparent;
  background:linear-gradient(var(--nv-white),var(--nv-white)) padding-box,
             linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
  box-shadow:none;
  color:var(--nv-text);
}
.nv-contact__btn--ghost .nv-contact__btn-arrow{color:var(--nv-main)}

@media (max-width:767px){
  .nv-contact__btns--row{flex-direction:column;align-items:stretch;gap:12px}
  .nv-contact__btn--compact{width:100%;height:64px}
}