/* ============================================================
   Neovision リニューアル ヘッダー
   正本デザイン: Figma node 307:4553 (1440x76)
   トークンは base.css の :root 変数 (--nv-*) を利用
   ============================================================ */

.nv-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--nv-white);
  border-bottom:1px solid #E5EFFA;
  font-family:var(--nv-font);
  color:var(--nv-text);
  -webkit-font-smoothing:antialiased;
}

.nv-header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  height:76px;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:40px;
}

/* --- ロゴ (Figma 書き出し SVG / ヘッダー・フッター共通) --- */
.nv-logo{
  display:inline-flex;
  align-items:center;
}
.nv-logo img{
  display:block;
  height:32px;
  width:auto;
}

/* --- 右側 (ナビ + アクション) --- */
.nv-header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:40px;
}

.nv-header-nav{
  display:flex;
  align-items:center;
  gap:40px;
}

.nv-header-nav a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:16px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  color:var(--nv-text);
  white-space:nowrap;
  transition:color .18s ease;
}
.nv-header-nav a:hover,
.nv-header-nav a:focus-visible{
  color:var(--nv-main);
}

/* 下向きシェブロン (サービス) */
.nv-header-nav .nv-caret{
  display:inline-block;
  width:7px;
  height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}

/* --- サービス ドロップダウン (デスクトップ: ホバー/フォーカスで開く) --- */
.nv-nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.nv-dropdown{
  position:absolute;
  top:100%;
  left:0;
  /* 項目下端(46px)基準。ヘッダー下端(76px)を越え+8pxの余白で着地させ、ヘッダーと被らせない */
  transform:translate(0, 46px);
  width:548px; /* 260pxの項目を常時2列 (横あふれ防止) */
  padding:10px;
  background:var(--nv-white);
  border:1px solid #E5EFFA;
  border-radius:14px;
  box-shadow:0 18px 36px rgba(31,58,95,.14);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:96;
}
/* トグルとパネルの隙間(死角)を橋渡ししてホバーを継続。隣のナビ項目を塞がないよう
   トグル幅ぶんだけに横幅を制限する (right は使わない) */
.nv-dropdown::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:110px;
  height:40px;
}
.nv-has-dropdown:hover .nv-dropdown,
.nv-has-dropdown:focus-within .nv-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(0, 38px);
}
.nv-has-dropdown:hover .nv-caret,
.nv-has-dropdown:focus-within .nv-caret{
  transform:translateY(0) rotate(225deg);
}

.nv-dropdown-link{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start !important;
  gap:3px !important;
  width:260px; /* タイトル・説明文が各1行に収まる幅 (最長説明文で約214px + 左右padding) */
  padding:12px 14px;
  border-radius:10px;
  white-space:normal !important;
  transition:background .15s ease;
}
.nv-dropdown-link:hover,
.nv-dropdown-link:focus-visible{
  background:var(--nv-base);
}
.nv-dropdown-title{
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap; /* 2段に折り返さない (幅は .nv-dropdown-link:260px で担保) */
  color:var(--nv-text);
}
.nv-dropdown-link:hover .nv-dropdown-title,
.nv-dropdown-link:focus-visible .nv-dropdown-title{
  color:var(--nv-main);
}
.nv-dropdown-desc{
  font-size:12.5px;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap; /* 2段に折り返さない */
  color:var(--nv-text-sub, #5B6B7B);
}

/* --- アクションボタン (無料診断 / お問い合わせ) --- */
.nv-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.nv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:160px;
  height:56px;
  padding-inline:16px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:filter .18s ease, box-shadow .18s ease;
}

.nv-btn--primary{
  background:linear-gradient(90deg, var(--nv-accent-y1) 0%, var(--nv-accent-y2) 100%);
  color:var(--nv-white);
  box-shadow:0 6px 16px rgba(245,175,4,.24);
}
.nv-btn--primary:hover,
.nv-btn--primary:focus-visible{
  filter:brightness(1.05);
  box-shadow:0 8px 20px rgba(245,175,4,.32);
}

/* 枠線はグラデーション (main → ライトブルー) 3px */
.nv-btn--ghost{
  color:var(--nv-text);
  border:3px solid transparent;
  background:linear-gradient(var(--nv-white), var(--nv-white)) padding-box,
             linear-gradient(90deg, var(--nv-main) 0%, #4EB1EA 100%) border-box;
}
.nv-btn--ghost:hover,
.nv-btn--ghost:focus-visible{
  background:linear-gradient(var(--nv-base), var(--nv-base)) padding-box,
             linear-gradient(90deg, var(--nv-main) 0%, #4EB1EA 100%) border-box;
}

/* --- ハンバーガー (モバイルのみ) --- */
.nv-hamburger{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  align-items:center;
  justify-content:center;
  border-radius:8px;
}
.nv-hamburger-bars{
  position:relative;
  display:block;
  width:24px;
  height:16px;
}
.nv-hamburger-bars span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:var(--nv-text);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nv-hamburger-bars span:nth-child(1){top:0}
.nv-hamburger-bars span:nth-child(2){top:7px}
.nv-hamburger-bars span:nth-child(3){top:14px}

.nv-header.is-open .nv-hamburger-bars span:nth-child(1){top:7px;transform:rotate(45deg)}
.nv-header.is-open .nv-hamburger-bars span:nth-child(2){opacity:0}
.nv-header.is-open .nv-hamburger-bars span:nth-child(3){top:7px;transform:rotate(-45deg)}

/* --- 背景オーバーレイ (モバイルメニュー) --- */
.nv-header-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(31,58,95,.4);
  opacity:0;
  transition:opacity .25s ease;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .nv-header-inner{
    padding-inline:24px;
    gap:16px;
  }
  .nv-logo img{height:28px}

  .nv-hamburger{display:inline-flex}

  /* ナビ + アクションを全幅ドロップダウンに (横方向オーバーフローを作らない) */
  .nv-header-right{
    position:fixed;
    top:76px;
    left:0;
    right:0;
    z-index:95;
    margin-left:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    max-height:calc(100dvh - 76px);
    padding:16px 24px 32px;
    background:var(--nv-white);
    border-top:1px solid #E5EFFA;
    box-shadow:0 24px 32px rgba(31,58,95,.12);
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
  }
  .nv-header.is-open .nv-header-right{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .nv-header-nav{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .nv-header-nav a{
    font-size:17px;
    padding:14px 4px;
    border-bottom:1px solid #EDF3F9;
  }

  /* モバイル: サービスのドロップダウンは常時展開 (インデント表示) */
  .nv-nav-item{
    display:block;
    position:static;
  }
  .nv-header-nav .nv-nav-toggle .nv-caret{
    display:none; /* タップで開く挙動は使わず常時展開のため矢印は不要 */
  }
  .nv-dropdown{
    position:static;
    transform:none;
    /* モバイルは縦インデントの常時展開に戻す (デスクトップの横並びをリセット) */
    flex-direction:column;
    flex-wrap:nowrap;
    width:auto;
    max-width:none;
    gap:0;
    min-width:0;
    opacity:1;
    /* 親パネル(.nv-header-right)の開閉状態に追従させる。
       visible/auto の固定値だと閉じたメニューでも透明なままクリックできてしまう */
    visibility:inherit;
    pointer-events:inherit;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0 0 0 12px;
    margin:0 0 2px;
    background:transparent;
    border-left:2px solid #E5EFFA;
  }
  .nv-dropdown::before{display:none}
  .nv-dropdown-link{
    width:auto;
    padding:12px 4px !important;
    border-bottom:1px solid #EDF3F9;
    border-radius:0;
  }
  .nv-dropdown-link:hover,
  .nv-dropdown-link:focus-visible{background:transparent}
  .nv-dropdown-title{font-size:15.5px}
  .nv-dropdown-desc{display:none} /* モバイルは説明文を隠して簡潔に */

  .nv-header-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:24px;
  }
  .nv-btn{
    width:100%;
    height:52px;
  }

  /* 背景オーバーレイはヘッダー下のみを覆う (ヘッダーバーは操作可能に保つ) */
  .nv-header-backdrop{top:76px}
  .nv-header.is-open .nv-header-backdrop{
    display:block;
    opacity:1;
  }
}

@media (max-width:767px){
  /* --- ヘッダーバー (Figma SP 390x58) --- */
  .nv-header-inner{
    height:58px;
    padding-inline:20px; /* 左右20pxガター (コンテンツ幅350px) */
  }

  /* ロゴ: Figma SP 文字箱 147x42 → SVG(206x32)を高さ23pxで表示 (幅≈148px) */
  .nv-logo img{height:23px}

  /* --- ハンバーガー: 40x40 ブルーグラデ丸ボタン + 白バー3本 (Figma実測) --- */
  .nv-hamburger{
    width:40px;
    height:40px;
    margin-left:auto;
    border-radius:999px;
    background:linear-gradient(135deg, #4EB1EA 0%, #2A67D4 100%);
    box-shadow:0 4px 12px rgba(42,103,212,.26);
  }
  .nv-hamburger-bars{
    width:20px;
    height:14px;
  }
  .nv-hamburger-bars span{
    height:2px;
    border-radius:999px;
    background:var(--nv-white);
  }
  /* バー間隔 4px (Figma: y0/y6/y12 → 中心6px刻み) */
  .nv-hamburger-bars span:nth-child(1){top:0}
  .nv-hamburger-bars span:nth-child(2){top:6px}
  .nv-hamburger-bars span:nth-child(3){top:12px}
  /* 開いた時の×印は丸ボタン中心 (top:6px) で交差 */
  .nv-header.is-open .nv-hamburger-bars span:nth-child(1){top:6px;transform:rotate(45deg)}
  .nv-header.is-open .nv-hamburger-bars span:nth-child(2){opacity:0}
  .nv-header.is-open .nv-hamburger-bars span:nth-child(3){top:6px;transform:rotate(-45deg)}

  /* モバイルメニュー(展開パネル)のオフセットをSPヘッダー高さ58pxに合わせる */
  .nv-header-right{
    top:58px;
    max-height:calc(100dvh - 58px);
  }
  .nv-header-backdrop{top:58px}
}

/* モーション控えめ設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .nv-header-right,
  .nv-hamburger-bars span,
  .nv-header-backdrop{transition:none}
}