/* ============================================================
   トップ セクション04 — Neovisionの3つの強み (STRENGTH)
   Figma node 258:12580 / 1440px 基準・コンテンツ 1100px
   数値・色・タイポは Figma REST API の実測値
   ============================================================ */

.nv-strength{
  --nv-grad:linear-gradient(90deg,#2A67D4,#4EB1EA);
  --nv-en:'Montserrat','Noto Sans JP',sans-serif;
  padding:90px 0 128px;
  background:var(--nv-white);
  overflow:hidden;
}

/* ---- 見出し ---- */
.nv-strength-head{
  position:relative;
  text-align:center;
  margin-bottom:52px;
}
.nv-strength-eyebrow{
  display:block;
  font-family:var(--nv-en);
  font-weight:600;
  font-style:italic;
  font-size:96px;
  line-height:1;
  letter-spacing:3.84px;
  color:#E2ECFB;
  user-select:none;
}
.nv-strength-title{
  position:relative;
  margin:-56px 0 0;
  font-size:36px;
  font-weight:700;
  letter-spacing:1.44px;
  line-height:54px;
  color:var(--nv-text);
}
.nv-strength-title-accent{color:var(--nv-main);}
.nv-strength-line{
  display:block;
  width:40px;height:5px;
  margin:16px auto 0;
  border-radius:5px;
  background:var(--nv-grad);
  position:relative;
}

/* ---- 行レイアウト ---- */
.nv-strength-rows{
  display:flex;
  flex-direction:column;
  gap:80px;
}
.nv-strength-row{
  display:flex;
  align-items:center;
  gap:48px;
}
/* 02 は DOM が [本文 → 図版] の順なので、通常の row のままで Figma (本文左 / 図版右) になる */
.nv-strength-row.is-reverse{flex-direction:row;}

/* 図版は Figma 書き出し SVG (カード本体・影ごと SVG に含む)。
   SVG は影のブリード分だけ四辺が 20px 広いので、負マージンでカード実寸に戻す。 */
.nv-strength-figure{
  flex:0 0 526px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nv-strength-figure img{
  position:relative;
  z-index:1;                 /* 背面パネル (::before) より前面へ */
  display:block;
  width:calc(100% + 40px);   /* PC 526+40=566 / SP 350+40=390 */
  max-width:none;
  height:auto;
  margin:-20px;
}
.nv-strength-figure::before{ /* グレーの背面パネル #F1F2F4 820x260 (Figma 231:1578 / 231:1670) */
  content:"";
  position:absolute;
  left:-170px;top:130px;
  width:820px;height:260px;
  background:#F1F2F4;
}
.nv-strength-row.is-reverse .nv-strength-figure::before{left:-124px;}

.nv-strength-body{
  position:relative;   /* 背面パネルより前面 (パネルは本文左端に少しかかる) */
  z-index:1;
  flex:0 0 526px;
}
.nv-strength-head-row{
  display:flex;
  align-items:flex-start;
  gap:40px;
}
.nv-strength-num{
  flex:0 0 auto;
  font-family:var(--nv-en);
  font-weight:600;
  font-style:italic;
  font-size:56px;
  line-height:1;
  letter-spacing:2.24px;
  color:var(--nv-main);
}
.nv-strength-heading{
  margin:0;
  font-size:28px;
  font-weight:700;
  letter-spacing:1.12px;
  line-height:42px;
  color:var(--nv-text);
}
.nv-strength-desc{
  margin:24px 0 0;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.64px;
  line-height:28.8px;
  color:var(--nv-text);
}
.nv-strength-desc strong{font-weight:700;}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .nv-strength{padding:72px 0 96px;}
  .nv-strength-rows{gap:64px;}
  .nv-strength-row,
  .nv-strength-row.is-reverse{
    flex-direction:column;
    gap:40px;
  }
  .nv-strength-figure{flex:0 0 auto;width:100%;max-width:526px;}
  .nv-strength-body{flex:0 0 auto;width:100%;max-width:526px;}
  .nv-strength-eyebrow{font-size:72px;}
  .nv-strength-title{margin-top:-44px;}
}

@media (max-width:767px){
  /* ============================================================
     Figma SP 実測再現 (390px 幅 / 20px ガター → 350px コンテンツ)
     ツリー: sp/tree-04-strength.txt (390 x 1970)
     ============================================================ */

  /* ---- セクション枠 (header top y=32 / 最終要素 bottom y=1930) ---- */
  .nv-strength{padding:32px 0 40px;}

  /* ---- 見出し (STRENGTH 透かし #EBF6FF + タイトル + アクセントライン) ---- */
  .nv-strength-head{margin-bottom:24px;}
  .nv-strength-eyebrow{
    font-size:40px;      /* Montserrat SemiBoldItalic 40 */
    line-height:60px;    /* lh60 */
    letter-spacing:1.6px;/* ls1.60 */
    color:#EBF6FF;
  }
  .nv-strength-title{
    font-size:24px;       /* Noto Sans JP Bold 24 */
    line-height:36px;     /* lh36 */
    letter-spacing:0.96px;/* ls0.96 */
    margin-top:-36px;     /* 透かしに重ね title top y=56 に一致 */
  }
  .nv-strength-line{
    width:24px;height:3px;/* Figma line 24 / w3 */
    margin:8px auto 0;    /* title 下 8px */
  }

  /* ---- 行レイアウト: 番号+見出し → 図版 → 説明 の縦積み ----
     body を display:contents で解体し order で Figma SP の順序に並べ替え。
     行間 gap48 / head→figure 8 / figure→desc 32 (実測) */
  .nv-strength-rows{gap:48px;}
  .nv-strength-row,
  .nv-strength-row.is-reverse{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nv-strength-body{display:contents;}
  .nv-strength-head-row{
    order:1;
    align-items:center;   /* 番号(40) を見出し(2行/60) の縦中央へ = Figma num top +10 */
    gap:24px;
    margin-bottom:8px;
  }
  .nv-strength-num{font-size:40px;letter-spacing:1.6px;line-height:1;} /* Montserrat SemiBoldItalic 40 / lh40 */
  .nv-strength-heading{font-size:20px;line-height:30px;letter-spacing:0.8px;} /* Noto Sans JP Bold 20 / lh30 / ls0.80 */
  .nv-strength-desc{
    order:3;
    margin:0;
    font-size:15px;       /* Noto Sans JP 15 */
    line-height:27px;     /* lh27 */
    letter-spacing:0.6px; /* ls0.60 */
  }

  /* ---- 図版 (Figma SP 書き出し SVG: カード 350x260) ---- */
  .nv-strength-figure{
    order:2;
    flex:0 0 auto;
    width:100%;
    max-width:none;
    margin:0 0 32px;
  }
  /* 背面グレーパネル #F1F2F4 (346x200): 外側と下へ peek
     01/03=左へ (gray left x=0, right x=346) / 02=右へ (gray right x=390) */
  .nv-strength-figure::before{
    left:-20px;right:24px;top:84px;bottom:-24px;
    width:auto;height:auto;
  }
  .nv-strength-row.is-reverse .nv-strength-figure::before{
    left:24px;right:-20px;
  }
}