/* ============================================================
   サービス一覧 セクション01: ページヒーロー
   Figma: 307:2075 / 1440 x 360
   背景 (グラデ + コーナー装飾) は Figma 実書き出し画像を使用
   トークンは base.css / Latin ディスプレイは Montserrat
   ============================================================ */

.nv-svc-hero{
  --nv-latin:'Montserrat', var(--nv-font);
  position:relative;
  overflow:hidden;
  background-color:#EBF6FF;
  background-image:url('../../images/top/services-hero-bg.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
.nv-svc-hero .nv-inner{
  position:relative;
  z-index:1;
  padding:96px 0 100px;
}

.nv-svc-hero__eyebrow{
  margin:0;
  font-family:var(--nv-latin);
  font-style:italic;
  font-weight:600;
  font-size:20px;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--nv-main);
}
.nv-svc-hero__title{
  margin:12px 0 0;
  font-size:40px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-svc-hero__lead{
  margin:24px 0 0;
  max-width:470px;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.04em;
  color:var(--nv-text);
}

@media (max-width:1024px){
  .nv-svc-hero .nv-inner{ padding:72px 0 80px; }
  .nv-svc-hero__title{ font-size:34px; }
}

@media (max-width:767px){
  .nv-svc-hero .nv-inner{ padding:48px 0 56px; }
  .nv-svc-hero__eyebrow{ font-size:16px; }
  .nv-svc-hero__title{ font-size:25px; }
  .nv-svc-hero__lead{ font-size:15px; margin-top:18px; }
  .nv-svc-hero__lead br{ display:none; }
}