/* ============================================================
   📄 css/nav.css
   【このファイルの役割】
   TOP・空き家管理LP・リフォームLP の「全ページ共通ナビゲーション」
   のデザインを管理するファイルです。

   ⚠️ このファイルはオレンジ（#FF6B1A）で書かれています。
      空き家管理LP → lp/kanri/index.html 末尾の <style> で青に上書き
      リフォームLP  → lp/reform/index.html 末尾の <style> で緑に上書き
      上書き方法：同じクラス名に !important をつけて後ろに書く

   【ナビに追加するメニュー項目】
   → index.html・lp/kanri/index.html・lp/reform/index.html
     それぞれの <ul class="site-nav-links"> 内に <li><a href="...">名前</a></li> を追加
   ============================================================ */


/* ============================================================
   🔝 ナビゲーションバー全体
   ページ上部に固定表示（スクロールしても追いかけてくる）

   【高さを変えるなら】→ .site-nav-inner の height を変える（現在68px）
   【背景色を変えるなら】→ background の rgba の最後の数値を変える
      1.0 = 完全不透明な白、0.9 = 少し透過した白
   ============================================================ */
.site-nav {
  position: sticky;   /* スクロールしても上部に固定 */
  top: 0;
  z-index: 1000;      /* 他の要素より前面に表示（数値が大きいほど前） */
  background: rgba(255,255,255,0.97);   /* ← 背景色（97%不透明な白） */
  backdrop-filter: blur(12px);          /* すりガラス効果（後ろがぼやける） */
  border-bottom: 3px solid #FF6B1A;    /* ← ナビ下部のオレンジ線（太さと色） */
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ナビ内部のレイアウト（ロゴ・リンク・LINEボタンを横並びにする） */
.site-nav-inner {
  max-width: 1100px;    /* コンテンツの最大幅（これ以上広がらない） */
  margin: 0 auto;
  padding: 0 24px;      /* ← 左右の余白 */
  height: 68px;         /* ← ナビバーの高さ */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


/* ============================================================
   🏷️ ナビのロゴ（左端のSKETマーク＋文字）
   【ロゴの大きさを変えるなら】→ svg の height を変える（現在38px）
   【バッジ（「空き家管理」等の小さいタグ）の色を変えるなら】
   → .site-nav-logo-badge の background を変える
   ============================================================ */
.site-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;   /* ロゴが縮まないようにする */
}
.site-nav-logo svg { height: 38px; width: auto; }

/* ロゴ横の小さいバッジ（「空き家管理」「リフォーム・活用」等） */
/* ⚠️ TOPページにはこのバッジはありません（LPページのみ） */
.site-nav-logo-badge {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  background: #FF6B1A;   /* ← バッジ背景色（LPページで !important 上書き） */
  color: #fff;
  padding: 2px 8px;
  border-radius: 50px;
  white-space: nowrap;
}


/* ============================================================
   🔗 ナビリンク（TOP・空き家管理・リフォーム・お問い合わせ）
   【リンクの文字色を変えるなら】→ .site-nav-links a の color を変える
   【ホバー・アクティブ色を変えるなら】→ :hover と .active の color・background
      LPページでは !important で青・緑に上書きしています
   ============================================================ */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;      /* ← リンク間の間隔 */
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-links a {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;           /* ← 通常時のリンク文字色 */
  padding: 6px 14px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s ease;
}
/* マウスを乗せたとき・現在のページのリンク */
.site-nav-links a:hover,
.site-nav-links a.active {
  color: #FF6B1A;       /* ← ホバー・アクティブ時の文字色（オレンジ） */
  background: #FFF0E8;  /* ← ホバー・アクティブ時の背景色（薄オレンジ） */
}
/* 🔵 管理LP → color: #4169E1 !important; background: #EBF0FB !important; で上書き */
/* 🟢 リフォームLP → color: #3CB371 !important; background: #E8F5EE !important; で上書き */


/* ============================================================
   💬 LINEボタン（ナビ右端の緑いボタン）
   【表示文字を変えるなら】→ 各 index.html の <a class="site-nav-line"> 内テキストを変える
   【ボタン色を変えるなら】→ background: #06C755 を変える（LINEカラーなので変更非推奨）
   【LINEのURL】→ href="https://lin.ee/uhYmEX6" を変える
   ============================================================ */
.site-nav-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #06C755;   /* ← LINEグリーン（変更非推奨） */
  color: #fff !important;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(6,199,85,0.3);
  transition: 0.3s ease;
}
.site-nav-line:hover {
  background: #05a649 !important;   /* ← ホバー時の色（少し濃い緑） */
  transform: translateY(-1px);
  color: #fff !important;
}

/* ============================================================
   🟠 無料相談ボタン（ナビ右端のオレンジボタン）
   ヒーローセクションの「無料相談はこちら」と同じ色・デザイン
   【ボタン色を変えるなら】→ background: #FF6B1A を変える
   【文字を変えるなら】→ index.html の <a class="site-nav-contact"> 内テキストを変える
   ============================================================ */
.site-nav-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #FF6B1A;   /* ← オレンジ（ヒーローボタンと同色） */
  color: #fff !important;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255,107,26,0.3);
  transition: 0.3s ease;
}
.site-nav-contact:hover {
  background: #e55a0f !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* 2ボタンをまとめるラッパー */
.site-nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}


/* ============================================================
   ☰ ハンバーガーボタン（スマートフォン表示時の三本線）
   【変更不要】PCでは非表示、スマホ（768px以下）で表示されます。
   クリックすると .site-nav-mobile（モバイルメニュー）が開きます。
   ============================================================ */
.site-nav-hamburger {
  display: none;   /* PCでは非表示 → スマホでは下の @media で flex に変わる */
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  border: none;
  background: none;
  flex-shrink: 0;
}
.site-nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;      /* ← 三本線の色 */
  border-radius: 2px;
  transition: 0.3s ease;
}
/* ハンバーガーが「×」になるアニメーション（open クラスが付いたとき） */
.site-nav-hamburger.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }  /* 1本目：右下へ回転 */
.site-nav-hamburger.open span:nth-child(2) { opacity: 0; }                                  /* 2本目：消える */
.site-nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }  /* 3本目：右上へ回転 */


/* ============================================================
   📱 モバイルメニュー（ハンバーガーを押すと開くメニュー）
   【リンク項目を変えるなら】→ 各 index.html の .site-nav-mobile 内の ul を編集
   【背景色を変えるなら】→ background: #fff を変える
   【ホバー色を変えるなら】→ .site-nav-mobile ul a:hover の background・color を変える
      LPページでは !important で上書きされています
   ============================================================ */
.site-nav-mobile {
  display: none;           /* 初期状態：非表示 */
  position: fixed;
  top: 68px;               /* ← ナビバーの高さと合わせる（68px） */
  left: 0;
  right: 0;
  background: #fff;        /* ← メニューの背景色 */
  border-bottom: 2px solid #FF6B1A;   /* ← メニュー下部のオレンジ線 */
  padding: 16px 24px 20px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-8px);
  opacity: 0;
  transition: 0.3s ease;
  pointer-events: none;
}
/* open クラスが付いたら表示（js/nav.js が付け外しする） */
.site-nav-mobile.open {
  display: block;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.site-nav-mobile ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-nav-mobile ul a {
  display: block;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;             /* ← メニューリンクの文字色 */
  text-decoration: none;
  border-radius: 8px;
  transition: 0.2s ease;
}
.site-nav-mobile ul a:hover {
  background: #FFF0E8;     /* ← ホバー時の背景色（薄オレンジ） */
  color: #FF6B1A;          /* ← ホバー時の文字色（オレンジ） */
}
/* モバイルメニュー内のボタン群（LINEボタン＋オレンジボタン）を縦並び */
.site-nav-mobile .site-nav-btns {
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
/* モバイルメニュー内のLINEボタン（横幅いっぱいに広げる） */
.site-nav-mobile .site-nav-line,
.site-nav-mobile .site-nav-contact {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 0.95rem;
}


/* ============================================================
   📌 現在ページのラベル（スマホでロゴ横に表示される小さい文字）
   例）空き家管理LPを開くと「空き家管理」と表示される
   【変更不要】PCでは非表示、スマホでのみ表示されます。
   【表示テキストを変えるなら】→ 各 index.html の .site-nav-current の中身を変える
   ============================================================ */
.site-nav-current {
  font-size: 0.72rem;
  color: #FF6B1A;       /* ← 文字色（LPページで上書きされる） */
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 2px;
  display: none;        /* PCでは非表示 → スマホでは下の @media で block に変わる */
}


/* ============================================================
   📱 スマートフォン用の切り替え（768px以下）
   【変更不要】ここでPCとスマホの表示要素を切り替えています。
   ============================================================ */
@media (max-width: 768px) {
  .site-nav-links          { display: none; }   /* PCのナビリンクを非表示 */
  .site-nav-line.desktop-only { display: none; } /* PCのLINEボタンを非表示 */
  .site-nav-hamburger      { display: flex; }   /* ハンバーガーボタンを表示 */
  .site-nav-current        { display: block; }  /* 現在ページラベルを表示 */
}