/* =========================================================
   HP-HEADER-001 SPヘッダー初期状態
========================================================= */
.sp-header{
  display:none; /* 初期状態は非表示 */
}

/* =========================================================
   HP-HEADER-002 ナビバー
========================================================= */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  height:100px;
  z-index:1000;
  transition:0.3s;
}

/* スクロール時 */
.navbar.scrolled,
.navbar.scrolled .pc-header{
  width:100%;
  background:rgba(0,31,100,0.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* =========================================================
   HP-HEADER-003 PCヘッダー
========================================================= */
.pc-header{
  display:flex;                  /* ロゴとメニューを横並び */
  justify-content:space-between; /* 左右配置 */
  align-items:center;            /* 縦中央 */
  padding:0 50px;                /* ナビバーとの調整 */
  width:100%;                    /* ナビバー幅いっぱい */
}

/* =========================================================
   HP-HEADER-004 ロゴ
========================================================= */
.logo{
  display:flex;       /* ロゴエリアを横並びにする */
  align-items:center; /* ロゴを縦中央に配置 */
  height:100px;       /* ナビバーの高さに合わせる */
  width:auto;         /* 新画像の実サイズに合わせる */
  cursor:pointer;     /* クリック可能な見た目にする */
}

.logo-icon{
  height:100px;       /* 丸ロゴの表示高さ */
  width:auto;         /* 縦横比を維持 */
  display:block;      /* img下の余白を防ぐ */
  object-fit:contain; /* 画像を潰さず収める */
}

.logo-name{
  height:58px;        /* 社名ロゴの表示高さ */
  width:auto;         /* 縦横比を維持 */
  display:block;      /* img下の余白を防ぐ */
  object-fit:contain; /* 画像を潰さず収める */
  transform:none;     /* 旧画像用の位置補正を解除 */
}

.logo-link{
  display:flex;        /* ロゴマークと社名ロゴを横並び */
  align-items:center;  /* 2つの画像を縦中央に揃える */
  gap:8px;             /* ロゴマークと社名ロゴの間隔 */
  height:100px;        /* 高さをメニューに合わせる */
  text-decoration:none;/* リンク下線を消す */
  overflow:hidden;     /* はみ出した部分をクリック対象外にする */
}

/* =========================================================
   HP-HEADER-005 PCプルダウン
========================================================= */
.dropdown{
  position:relative; /* 子要素（.dropdown-menu）の配置基準 */
}

.dropdown-menu{
  position:absolute;                      /* 親要素を基準に配置 */
  top:100%;                               /* 親メニュー直下に表示 */
  left:0;                                 /* 左端基準で配置 */
  min-width:260px;                        /* 最小横幅 */
  background:rgba(0,31,100,0.9);          /* ナビバー・モバイルメニューと同色へ統一 */
  backdrop-filter:blur(6px);              /* 背景ぼかし */
  -webkit-backdrop-filter:blur(6px);      /* Safari対応 */
  border-radius:0;                        /* 角丸なし */
  padding:0;                              /* 内側余白なし */
  box-shadow:0 10px 30px rgba(0,0,0,0.15);/* 浮き上がる影 */
  opacity:0;                              /* 初期は透明 */
  visibility:hidden;                      /* 初期は非表示 */
  transition:0.3s;                        /* 表示切替アニメーション */
  z-index:999;                            /* 前面表示 */
}

.dropdown:hover .dropdown-menu{
  opacity:1;          /* 表示 */
  visibility:visible; /* 非表示解除 */
}

.dropdown-menu li{
  list-style:none;                            /* リスト記号削除 */
  border-bottom:1px solid rgba(255,255,255,0.75); /* 下線区切り */
}

.dropdown-menu a{
  display:block;                    /* クリック範囲拡大 */
  padding:14px 22px;                /* 内側余白 */
  color:#fff;                       /* 文字色 */
  text-decoration:none;             /* 下線削除 */
  font-size:14px;                   /* 文字サイズ */
  transition:background 0.25s,color 0.25s; /* 背景色・文字色変化 */
}

.dropdown-menu a:hover{
  background:#ffffff; /* ホバー背景色 */
  color:#0b4ea2;      /* ホバー文字色 */
}

/* =========================================================
   HP-HEADER-101 SP表示（768px以下）
========================================================= */
@media(max-width:768px){
  .pc-header{
    display:none; /* PCメニュー非表示 */
  }

  .sp-header{
    display:flex;       /* SPメニュー表示 */
    align-items:center; /* 縦中央 */
    gap:12px;           /* 要素間隔 */
    width:100%;         /* 横幅は最大 */
    padding:0 12px;     /* 横幅だけ余白 */
  }

  #news,
  #about,
  #service{
    scroll-margin-top:100px; /* SPモバイルメニューのアンカーリンク用スクロール調整 */
  }

  .mobile-menu{
    display:none;
    background:rgba(14,90,255,0.9);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .mobile-menu a{
    color:white;          /* メニュー文字色 */
    text-decoration:none; /* 下線を非表示 */
    font-size:14px;       /* メニュー文字サイズ */
    transition:0.3s;      /* ホバー時の変化を滑らかに */
  }

  .mobile-menu a:hover{
    opacity:0.7; /* ホバー時に少し薄くする */
  }

  .mobile-menu.active{
    display:flex;          /* active時に表示 */
    flex-direction:column; /* リンクを縦並び */
    position:absolute;     /* 移動式 */
    height:100vh;          /* ビューポート全体をカバー */
    top:100px;             /* 三本線ボタンの下に余白を調整 */
    left:0;
    right:0;
    bottom:0;
    padding:20px;          /* 上下余白はtopで調整する */
    gap:20px;              /* リンク間隔を20pxに設定 */
    z-index:2000;
    background:rgba(0,31,100,0.9);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  html,
  body{
    overflow-x:hidden; /* 横スクロール防止 */
  }

  .mobile-close{
    position:absolute; /* メニュー内の右上に配置 */
    top:24px;          /* 上からの距離 */
    right:24px;        /* 右からの距離 */
    width:44px;        /* ボタン幅 */
    height:44px;       /* ボタン高さ */
    border:none;       /* 枠線なし */
    background:none;   /* 背景なし */
    color:#ffffff;     /* 文字色：白 */
    font-size:36px;    /* ×の大きさ */
    line-height:1;     /* 縦位置調整 */
    cursor:pointer;    /* クリック可能にする */
  }

  .logo{
    width:auto;      /* ロゴ全体の幅は中身に合わせる */
    max-width:none;  /* 右端切れの原因になる制限を解除 */
    flex-shrink:1;   /* 必要時だけ縮小 */
  }

  .logo-icon{
    width:clamp(82px,22vw,100px);            /* 画面幅に応じて会社ロゴを可変表示 */
    height:90px;         /* 現在の表示高さを維持 */
    max-height:none;     /* ヘッダー内に収める */
    object-fit:contain;  /* 画像を潰さず表示 */
    flex-shrink:0;       /* ロゴを縮ませない */
  }

  .logo-name{
    width:clamp(210px,54vw,240px);           /* 画面幅に応じて社名ロゴを可変表示 */
    height:auto;        /* 縦横比を維持 */
    max-height:none;    /* 高さを出しすぎない */
    object-fit:contain; /* 画像を潰さず表示 */
    transform:none;     /* 位置補正を解除 */
  }

  .sp-menu-toggle{
    display:flex;          /* SPのみ表示 */
    flex-direction:column; /* 縦並び */
    justify-content:center;/* 縦中央 */
    align-items:center;    /* 横中央 */
    width:42px;            /* ボタン幅 */
    height:42px;           /* ボタン高さ */
    padding:0;             /* 内余白なし */
    border:none;           /* 枠線なし */
    background:none;       /* 背景なし */
    cursor:pointer;        /* 指マーク */
    flex-shrink:0;         /* 縮小禁止 */
  }

  .sp-menu-toggle span{
    display:block;      /* 線として表示 */
    width:24px;         /* 線の長さ */
    height:2px;         /* 線の太さ */
    margin:3px 0;       /* 線同士の間隔 */
    background:#ffffff; /* 白線 */
  }
}

/* =========================================================
   HP-HEADER-102 PC表示（769px以上）
========================================================= */
@media(min-width:769px){
  #mobileMenu{
    display:none !important; /* PC表示へ戻った際にモバイルメニューを非表示 */
  }
}