/* メニュー全体 */
#gnav {
  background-color: #4F78A1;
  text-align: center;
}

/* 横並び */
#gnav > ul {
  display: flex;
  justify-content: center;
}

/* 下層は縦 */
#gnav ul ul {
  display: block;
}

#gnav li {
  position: relative;
}

/* ===== 矢印 ===== */
#gnav li.has-children::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ff1d5e;
  border-right: 2px solid #ff1d5e;
  transform: translateY(-50%) rotate(135deg);
}

#gnav ul ul li.has-children::before {
  border-color: #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* ===== サブメニュー ===== */
#gnav li.has-children > ul {
  position: absolute;
  left: 0;
  top: 64px;
  z-index: 4;
  background-color: #4F78A1;
  width: 450px;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

/* hoverで表示 */
#gnav li.has-children:hover > ul,
#gnav li.has-children ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}

/* リンク */
#gnav a {
  display: block;
  color: #fff;
  padding: 20px 35px;
  white-space: nowrap;
}

#gnav a:hover {
  color: #000;
}

#gnav ul ul a {
  padding: 10px 35px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.6);
}

/* 3階層目 */
#gnav ul ul ul {
  top: 0;
  left: 182px;
  background: #66adf5;
}
/* ===== ナビ全体を正しくレイアウト ===== */
#gnav {
  display: flex;
  align-items: center;          /* 縦中央 */
  justify-content: center;
  height: 80px;                 /* ★ 明示的に高さを持たせる */
  background-color: #3f82c2;    /* 画像に近い色 */
  position: relative;
  z-index: 1000;
}

/* ===== ulを高さいっぱいに ===== */
#gnav > ul {
  height: 100%;
  align-items: center;
}

/* ===== 1階層目リンク ===== */
#gnav > ul > li > a {
  white-space: nowrap;          /* 折り返さない */
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ===== 矢印位置修正 ===== */
#gnav li.has-children::before {
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

/* ===== サブメニューが nav に隠れないように ===== */
#gnav li.has-children > ul {
  top: 80px;                    /* nav の高さと一致させる */
}

/* ===== 白い謎ボックス対策 ===== */
body {
  margin: 0;
}

/* ===== サブメニューが他要素に負けない ===== */
#gnav li.has-children > ul {
  z-index: 2000;
}