.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;        /* 横並び */
  gap: 12px;
  opacity: 0.8;
}

.nav li a {
  display: inline-block;
  width: 140px;         /* ← 横幅を固定すると縦書きにならない */
  padding: 14px 0;
  background: linear-gradient(#7FAFD9, #1e6fd9);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;   /* 中央揃え */
  white-space: nowrap;  /* 折り返し防止 */
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.nav li a:hover {
  background: linear-gradient(#7FAFD9, #2b7fe0);
  transform: translateY(-2px);
}
/* ▼ ドロップダウンの親要素 */
.nav li {
  position: relative;
}

/* ▼ ドロップダウンメニュー */
.nav li ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 48px; /* 親ボタンの下に配置 */
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  display: none; /* 初期は非表示 */
  min-width: 140px;
  z-index: 100;
}

/* ▼ ドロップダウン内のリンク */
.nav li ul li a {
  display: block;
  padding: 10px;
  background: #fff;
  color: #333;
  font-size: 14px;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.nav li ul li a:hover {
  background: #f0f4ff;
  color: #1e6fd9;
}

/* ▼ ホバーで表示 */
.nav li:hover > ul {
  display: block;
}

.nav2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;        /* 横並び */
  gap: 12px;
  opacity: 0.8;
}

.nav2 li a {
  display: inline-block;
  width: 140px;         /* ← 横幅を固定すると縦書きにならない */
  padding: 14px 0;
  background: linear-gradient(#D9C08A, #e8d9b9);
  color: #060606;
  text-decoration: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;   /* 中央揃え */
  white-space: nowrap;  /* 折り返し防止 */
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.nav2 li a:hover {
  background: linear-gradient(#D9C08A, #D9C08A);
  transform: translateY(-2px);
}