/* ============================================================
   トップ セクション01: ヒーロー  (Figma 243:7964 / 1440x720)
   デザイン幅1440px基準。ステージを container として cqw で等比スケール。
   1cqw = ステージ幅の1% = 14.4px (@1440)。px値は px/14.4 cqw で表現。
   ============================================================ */

.nv-hero {
  background: linear-gradient(180deg, #edf3fc 0%, #ebf6ff 100%);
  overflow: hidden;
  /* ヘッダー背後へ引き上げ、ヘッダー〜FVの余白を詰める。
     不透明・sticky・z-index:100 のヘッダーが上部を覆うため重なりは見えない。 */
  margin-top: -120px;
}

.nv-hero__stage {
  position: relative;
  width: min(1440px, 100%);
  margin-inline: auto;
  aspect-ratio: 1440 / 680;  /* CTA削除後の下部デッド余白を詰める (旧720) */
  container-type: inline-size;
  background: url("../../images/top/hero-bg.svg") center / 100% 100% no-repeat;
  overflow: hidden;
}

/* ---- テキストブロック ---- */
.nv-hero__body {
  position: absolute;
  inset: 0;
}

.nv-hero__title,
.nv-hero__lead,
.nv-hero__desc,
.nv-hero__ctas {
  position: absolute;
  left: 10.347cqw;              /* 149px */
  margin: 0;
  white-space: nowrap;
}

.nv-hero__title {
  top: 15.486cqw;             /* 223px (イラスト中心[y359]にテキスト塊を縦中央で揃える / 旧129px) */
  color: var(--nv-text);
  font-weight: 700;
  line-height: 1.5;
}
.nv-hero__title-l1,
.nv-hero__title-l2 {
  display: block;
}
.nv-hero__title-l1 {
  font-size: 3.333cqw;         /* 48px 基調 */
  letter-spacing: 0.156cqw;    /* 2.24px */
}
.nv-hero__title-l2 {
  font-size: 4.444cqw;         /* 64px */
  letter-spacing: 0.178cqw;    /* 2.56px */
}
.nv-hero__accent {
  color: var(--nv-main);
  font-size: 5cqw;             /* 72px (AI) */
}
.nv-hero__accent--lg {
  font-size: 4.444cqw;         /* 64px (価値) */
}

/* ---- サブキャッチ + アンダーライン ---- */
.nv-hero__lead {
  top: 31.319cqw;             /* 451px (見出しから+228pxの相対位置を維持 / 旧357px) */
  color: var(--nv-text);
  font-size: 1.667cqw;         /* 24px */
  font-weight: 700;
  letter-spacing: 0.067cqw;    /* 0.96px */
}
.nv-hero__underline {
  position: absolute;
  top: 3.056cqw;               /* lead から 44px 下 (sec y401) */
  left: 0;
  width: 22.5cqw;              /* 324px */
  height: 2px;
  /* 全幅は薄グレー、左80pxは青→シアンのグラデーション */
  background:
    linear-gradient(90deg, #2a67d4 0%, #4eb1ea 100%) left center / 5.556cqw 100% no-repeat,
    #d9d9d9;
}

/* ---- 説明文 ---- */
.nv-hero__desc {
  top: 29.514cqw;             /* 425px */
  color: var(--nv-text);
  font-size: 1.25cqw;         /* 18px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05cqw;    /* 0.72px */
}

/* ---- CTA ---- */
.nv-hero__ctas {
  top: 30.556cqw;             /* 440px (desc 削除 2026-07-14 に伴い 519px から詰め) */
  display: flex;
  gap: 1.111cqw;              /* 16px */
}
.nv-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.694cqw;              /* 10px */
  height: 5cqw;               /* 72px */
  border-radius: 999px;
  font-size: 1.25cqw;         /* 18px */
  font-weight: 700;
  letter-spacing: 0.05cqw;
  box-shadow: 0 0 10px rgba(9, 139, 222, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.nv-hero__cta--primary {
  width: 20.833cqw;           /* 300px */
  color: var(--nv-white);
  background: linear-gradient(90deg, var(--nv-accent-y1) 0%, var(--nv-accent-y2) 100%);
  border: 3px solid var(--nv-white);
}
.nv-hero__cta--ghost {
  width: 16.667cqw;           /* 240px */
  color: var(--nv-text);
  background: var(--nv-white);
  border: 3px solid var(--nv-main);
}
.nv-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(9, 139, 222, 0.28);
}
.nv-hero__cta--primary:hover { filter: brightness(1.03); }
.nv-hero__arrow {
  width: 1.667cqw;            /* 24px */
  height: 1.667cqw;
  flex-shrink: 0;
}

/* ---- イラスト ---- */
/* 表示ボックスは Figma ノード 231:1227 の実バウンディングボックス(722,140.66,620,590.5 / page座標)。
   透過PNG(2x)なので背景SVGにそのまま重なる。 */
.nv-hero__art {
  position: absolute;
  left: 50.139cqw;           /* 722px */
  top: 4.49cqw;              /* 64.66px (Figma実測どおり / 変更なし) */
  width: 43.056cqw;          /* 620px */
  height: 41.007cqw;         /* 590.5px */
}
.nv-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   入場アニメーション (CSSのみ / JS不要)
   方針: 見出しが1文字ずつ勢いよく立ち上がるカスケード (軽いオーバーシュート付き)。
   全文字の着地後、AI/価値 が発光しながらブランドブルーに灯り、
   リード→下線で締める。イラストは登場後ゆっくり浮遊し続ける。
   時差は各文字の --i (マークアップ側で付与) × 45ms。
   ============================================================ */

/* 文字: 下から跳ね上がり、わずかに行き過ぎて着地する */
@keyframes nv-hero-ch-rise {
  0% {
    opacity: 0;
    transform: translateY(0.65em) scale(0.9);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(-0.09em) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* アクセント: 発光しながらブランドブルーへ灯り、余韻の光を残す */
@keyframes nv-hero-ignite {
  0% {
    color: var(--nv-text);
    text-shadow: 0 0 0 rgba(42, 103, 212, 0);
  }
  55% {
    color: var(--nv-main);
    text-shadow: 0 0 28px rgba(42, 103, 212, 0.6), 0 0 60px rgba(78, 177, 234, 0.35);
  }
  100% {
    color: var(--nv-main);
    text-shadow: 0 0 14px rgba(78, 177, 234, 0.25);
  }
}

/* リード: ぼかしが晴れながら浮かび上がる */
@keyframes nv-hero-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* 下線: 左から描画 */
@keyframes nv-hero-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* イラスト: 少し小さい状態からふわっと立ち上がる */
@keyframes nv-hero-art-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* イラスト: 登場後のごく緩やかな浮遊ループ */
@keyframes nv-hero-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}

/* 文字カスケード (--i はマークアップで 0..19 を付与 / 45ms刻み) */
.nv-hero__ch {
  display: inline-block;
  animation: nv-hero-ch-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.045s + 0.05s) both;
}

/* アクセント文字は「立ち上がり」+ 全文字着地後の「発光点灯」の2段 */
.nv-hero__accent {
  animation:
    nv-hero-ch-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.045s + 0.05s) both,
    nv-hero-ignite 0.9s ease-out 1.5s both;
}

.nv-hero__lead {
  animation: nv-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}

.nv-hero__underline {
  transform-origin: left center;
  animation: nv-hero-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

/* イラスト: コンテナで入場、img で浮遊 (transform の競合を回避) */
.nv-hero__art {
  animation: nv-hero-art-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.nv-hero__art img {
  animation: nv-hero-float 3.5s ease-in-out 2.4s infinite alternate;
}

/* モーション控えめ設定では全アニメーションを止め、完成状態で表示 */
@media (prefers-reduced-motion: reduce) {
  .nv-hero__ch,
  .nv-hero__accent,
  .nv-hero__lead,
  .nv-hero__underline,
  .nv-hero__art,
  .nv-hero__art img {
    animation: none;
  }
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* タブレット: 等比スケールを維持しつつ、短くなりすぎないよう下限を確保 */
@media (max-width: 1024px) {
  .nv-hero__stage {
    min-height: 460px;
  }
}

/* スマホ: Figma SP 390x656 (node 695:23979) を忠実再現。
   縦積みフレックス。左右20pxガター / コンテンツ350px。
   実測: 見出し line1(AI36/価値32/base24) + line2(32) / lh1.5 / ls0.04em。
   表示順は title→lead→desc→イラスト→CTA (body を display:contents で透過し order で差し込み)。 */
@media (max-width: 767px) {
  .nv-hero {
    /* 常時の -120px はモバイルヘッダー(58px)では SP 見出し(y32)を隠すため解除 */
    margin-top: 0;
    /* SP 背景: 上#FFFFFF → 下#EBF6FF の縦グラデ */
    background: linear-gradient(180deg, #ffffff 0%, #ebf6ff 100%);
  }

  /* ステージ = 縦積みフレックス。padding 上32 / 左右20 / 下40 */
  .nv-hero__stage {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    container-type: normal;
    /* SP 装飾: 右上=青グラデの丸線2本 (Figma Group630007 w24/w12) / 左下=白丸線 (Line598:4543 w24)。
       hero(section) の縦グラデを土台に、線だけを inline SVG で重ねる (viewBox 390x656 を stage に等倍ストレッチ)。 */
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 656' preserveAspectRatio='none' fill='none'%3E%3Cline x1='361' y1='74' x2='450' y2='-15' stroke='url(%23a)' stroke-width='24' stroke-linecap='round'/%3E%3Cline x1='383' y1='86' x2='462' y2='7' stroke='url(%23b)' stroke-width='12' stroke-linecap='round'/%3E%3Cline x1='-13' y1='500' x2='34' y2='453' stroke='%23FFFFFF' stroke-width='24' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='361' y1='74' x2='450' y2='-15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E2ECFB'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='383' y1='86' x2='462' y2='7' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E2ECFB'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px 28px;
  }

  /* body を透過し、子(title/lead/desc/ctas)を stage の直接フレックス子にする */
  .nv-hero__body {
    display: contents;
  }

  /* 絶対配置(cqw)を解除 */
  .nv-hero__title,
  .nv-hero__lead,
  .nv-hero__desc,
  .nv-hero__ctas {
    position: static;
    top: auto;
    left: auto;
    margin: 0;
  }

  /* ---- 見出し ---- (Figma SP: line1 box54 + line2 box48 = 102 / ls 0.04em) */
  .nv-hero__title {
    width: 100%;
    letter-spacing: 0.04em;      /* SP ls: 2.24/56 = 1.28/32 = 0.72/18 = 0.64/16 = 0.04em */
    white-space: normal;
  }
  .nv-hero__title-l1,
  .nv-hero__title-l2 {
    display: block;
    white-space: nowrap;         /* vw連動サイズで折返さない */
  }
  /* line1「AIに推薦される価値を、」: 基調24 / AI 56 / 価値 32。
     行箱は最大字(AI 56)が支配。Figma実測 box54 (lh84=1.5x56 を OVR で圧縮) → 54/56≒0.96 */
  /* 上限pxを引き上げ、幅の広いSP(400〜520px)でも vw 比率で文字が大きくなる (右余白を解消)。
     vw 係数は据え置きなので折り返しは発生しない。 */
  .nv-hero__title-l1   { font-size: min(30px, 6.15vw); line-height: 1.0; }
  /* line2「すべての企業へ。」: 32→40 / lh1.4 */
  .nv-hero__title-l2   { font-size: min(40px, 8.20vw); line-height: 1.4; }
  .nv-hero__accent     { font-size: min(38px, 7.7vw); }   /* AI (Figma視覚: 基調より一回り大) */
  .nv-hero__accent--lg { font-size: min(38px, 7.7vw); }   /* 価値 (AIと同等の強調) */

  /* ---- サブキャッチ + アンダーライン (18/lh1.5/ls0.04em) ---- */
  .nv-hero__lead {
    width: fit-content;          /* 文字幅(243相当)にフィット → 下線幅の基準 */
    max-width: 100%;
    align-self: flex-start;
    margin-top: 14px;            /* 見出し下端から14 */
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .nv-hero__underline {
    position: static;
    display: block;
    top: auto;
    left: 0;
    width: 100%;                 /* = リード文字幅 (243相当) */
    height: 1px;                 /* SP 実測 w1 */
    margin-top: 4px;
    background:
      linear-gradient(90deg, #2a67d4 0%, #4eb1ea 100%) left center / 48px 100% no-repeat,
      #d9d9d9;
  }

  /* ---- 説明文 (16/lh1.5/ls0.04em / 2行折返し) ---- */
  .nv-hero__desc {
    width: 100%;
    margin-top: 16px;            /* リード群下端から16 */
    font-size: clamp(14px, 4.1vw, 16px);
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .nv-hero__desc br { display: none; }  /* SP は自然折返しで2行 */

  /* ---- イラスト (200x203相当 / 中央 / desc↔CTA の間) ---- */
  .nv-hero__art {
    position: static;
    order: 4;                    /* desc(0)の後、CTA(5)の前 */
    align-self: center;
    width: min(280px, 64vw);     /* 200→280 に拡大: 周囲の余白を詰め、幅に対して大きく見せる */
    height: auto;
    margin-top: 16px;            /* リード群下端から16 */
  }
  .nv-hero__art img { height: auto; }

  /* ---- CTA (縦積み / 全幅 / gap8) ---- */
  .nv-hero__ctas {
    order: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;                    /* SP: プライマリ下端552→ゴースト上端560 */
    width: 100%;
    margin-top: 20px;            /* イラスト下端から20 */
  }
  .nv-hero__cta {
    position: relative;          /* 矢印を右端に絶対配置するため */
    width: 100%;
    gap: 0;
    font-size: 16px;
    letter-spacing: 0.04em;      /* SP ls 0.64/16 */
  }
  .nv-hero__cta--primary {
    height: 64px;                /* SP 実測 */
    border-width: 2px;           /* SP: 白ボーダー2px */
  }
  .nv-hero__cta--ghost {
    height: 56px;                /* SP 実測 */
    border: 2px solid transparent;  /* SP: グラデーションボーダー2px */
    background:
      linear-gradient(var(--nv-white), var(--nv-white)) padding-box,
      linear-gradient(90deg, #2a67d4 0%, #4eb1ea 100%) border-box;
  }
  .nv-hero__arrow {              /* 矢印は右端に固定 (SP x330 → 右16px) */
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;                 /* SP 実測 24x24 */
    height: 24px;
  }
}