/* ============================================================
   トップ セクション11: 関連ページ (NEXT STEP)
   Figma: 243:8020 / 1440 x 633 / コンテンツ 1098px
   数値・色・タイポは Figma REST API の実測値。
   ============================================================ */

.nv-next{
  --nv-latin:'Montserrat','Inter',var(--nv-font);
  background:var(--nv-white);
  padding-block:88px;
}

/* ---- 見出し (中央揃え: 大英字 + 和文タイトル重ね + バー+ドット) ---- */
.nv-next__head{
  text-align:center;
  margin-bottom:56px;
}
.nv-next__eyebrow{
  display:block;
  font-family:var(--nv-latin);
  font-size:96px;
  line-height:1.5;                 /* 144 / 96 */
  font-weight:600;
  font-style:italic;               /* Montserrat SemiBold Italic */
  letter-spacing:.04em;
  color:#E2ECFB;
  margin:0;
  user-select:none;
}
.nv-next__title{
  margin:-72px 0 0;                /* NEXT STEP(144)に重ねる */
  font-size:40px;
  line-height:1.5;                 /* 60 / 40 */
  font-weight:700;
  color:var(--nv-text);
}
.nv-next__bar{
  position:relative;
  display:inline-block;
  width:40px;
  height:2px;
  margin-top:16px;
  background:var(--nv-main);
}

/* ---- カード3枚 (白 / border #D9D9D9 / radius 8 / 影なし) ---- */
.nv-next__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.nv-next__card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:248px;
  padding:24px;
  background:var(--nv-white);
  border:1px solid #D9D9D9;
  border-radius:8px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nv-next__card:hover{
  transform:translateY(-3px);
  border-color:var(--nv-main);
  box-shadow:0 12px 28px rgba(31,58,95,.10);
}

.nv-next__card-en{
  font-family:var(--nv-latin);
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--nv-main);
}
.nv-next__card-title{
  margin-top:16px;
  font-size:20px;
  line-height:1.5;                 /* 30 / 20 */
  font-weight:700;
  color:var(--nv-text);
}
/* 見出し下: 全幅グレー罫 + 左80pxの青罫 */
.nv-next__card-rule{
  position:relative;
  display:block;
  height:1px;
  margin-top:8px;
  background:#D9D9D9;
}
.nv-next__card-rule::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:80px;
  height:1px;
  background:var(--nv-main);
}
.nv-next__card-desc{
  margin-top:24px;
  font-size:14px;
  line-height:1.5;                 /* 21 / 14 */
  color:var(--nv-text);
}
.nv-next__card-more{
  margin-top:auto;
  padding-top:24px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.nv-next__card-more-label{
  font-size:16px;
  line-height:1.5;
  font-weight:700;
  color:var(--nv-text);
}
.nv-next__card-more-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--nv-main);
  color:#FFFFFF;
  transition:transform .2s ease;
}
.nv-next__card:hover .nv-next__card-more-icon{transform:translateX(4px)}

/* ---- レスポンシブ ---- */
@media (max-width:1024px){
  .nv-next{padding-block:64px}
  .nv-next__eyebrow{font-size:72px}
  .nv-next__title{margin-top:-52px}
  .nv-next__list{gap:20px}
  .nv-next__card{min-height:0;padding:24px}
}

/* ---- SP (Figma 390x707 実測) ---- */
@media (max-width:767px){
  /* セクション枠: 上32 / 下40 (cards末端 y667 / 全高707) */
  .nv-next{
    padding-top:32px;
    padding-bottom:40px;
  }

  /* 見出し: 透かし40(#EBF6FF) / タイトル24 重ね / バー24×3 + ドット */
  .nv-next__head{margin-bottom:24px}     /* head末端 y111 → cards y135 */
  .nv-next__eyebrow{
    font-size:40px;                       /* lh60(1.5) / ls1.6=.04em */
    color:#EBF6FF;                        /* Figma SP 実測 (デスクトップ #E2ECFB と別) */
  }
  .nv-next__title{
    font-size:24px;                       /* lh36(1.5) */
    margin-top:-28px;                     /* NEXT STEP(60) に重ね: title top64 - eyebrow top32 = 32 → 32-60 */
    letter-spacing:.04em;                 /* ls0.96 / 24 */
  }
  .nv-next__bar{
    width:24px;                           /* gradient line 24 */
    height:3px;                           /* stroke w3 */
    margin-top:8px;                       /* bar group y108 - title下端68(rel head) */
  }

  /* カード: 1列 / gap8 (135/315/495 → 8px間隔) */
  .nv-next__list{
    grid-template-columns:1fr;
    gap:8px;
  }
  .nv-next__card{
    min-height:0;
    padding:12px 16px;                    /* 上下12 / 左右16 (en top147-card135, desc右端354-card370) */
  }
  .nv-next__card-en{font-size:15px}       /* Montserrat SemiBold / lh22 / ls .04em */
  .nv-next__card-title{
    margin-top:1px;                       /* en直下: title top170 - en top147 - lh22 */
    font-size:18px;                       /* lh27(1.5) */
    letter-spacing:.04em;                 /* ls0.72 / 18 */
  }
  .nv-next__card-rule{margin-top:8px}     /* rule y205 - title top170 - lh27 */
  .nv-next__card-desc{
    margin-top:7px;                       /* desc y213 - rule y205 - 1px罫 */
    letter-spacing:.04em;                 /* ls0.56 / 14 */
  }
  .nv-next__card-more{
    margin-top:16px;                      /* more y271 - desc top213 - 2行42 */
    padding-top:0;
    gap:4px;                              /* label右端326 → icon左330 */
  }
  .nv-next__card-more-label{
    font-size:15px;                       /* Noto Bold / lh22 / ls .04em */
    letter-spacing:.04em;
  }
  .nv-next__card-more-icon{width:24px;height:24px}       /* Frame44 24×24 円 */
  .nv-next__card-more-icon svg{width:16px;height:16px}   /* tabler:arrow-right 16×16 */
}

/* ---- 下層バリアント: 薄水色地 (Figma: 制作実績 312:4584 = #EBF6FF 地 / 白透かし) ---- */
.nv-next--tint{background:var(--nv-base)}
.nv-next--tint .nv-next__eyebrow{color:var(--nv-white)}