/* ------------------------------------------------------------
   ヘッダーナビ：TOP（chrome_shared.css）と同じ横1行レイアウト

   style.css のナビは float ベースで、項目7つ前提の固定 padding(0 20px)。
   項目が8つになるとロゴの横に収まらず、ナビごと下の行へ落ちて
   ヘッダーが 81px → 146px に伸びてしまう。
   chrome_shared.css を読まないページ（recruit直下・work配下）向けに、
   そのナビ部分だけを移植する。セレクタはナビに限定しているので
   ボタン・フッター等には影響しない。

   display に !important が必要な理由：
   これらのページの ul は bootstrap の .visible-lg を併用しており、
   .visible-lg{display:block!important} が効いている。!important 無しの
   display:flex は負けてしまい、li が縦積みになる。そのため
   chrome_shared.css と同じくメディアクエリ内で !important 指定する。
   （この2つの規則が visible-lg の表示/非表示も兼ねる）

   ※ style.css / mediaquery.css / bootstrap.min.css より後に読み込むこと
   ------------------------------------------------------------ */

/* ドロップダウン：横1行を維持（nowrap で“落ち”を防止、余白は可変） */
#fade-in2.dropmenu {
  float: none;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

/* ナビ ⇔ ハンバーガー 切替（bootstrap 相当：1200px） */
@media (min-width: 1200px) {
  #fade-in2.dropmenu { display: flex !important; }
}
@media (max-width: 1199px) {
  #fade-in2.dropmenu { display: none !important; }
}

.dropmenu:before, .dropmenu:after { display: none; } /* clearfix由来の余分なflex子要素を消す */
.dropmenu > li {
  float: none;
  position: relative;
  margin: 0;
  padding: 0 clamp(5px, 0.7vw, 20px);
  text-align: center;
  background: #fff;
  white-space: nowrap;
}
.dropmenu li.nav-red { padding: 0; height: auto; }