/* 2027 採用サイト（/recruit/2027/）の不具合修正 2026-11-05
   2028 テスト版の点検で見つかった 2 件。Tailwind v4 の本体 CSS（@layer utilities）より
   レイヤー無しのこの指定が優先される。戻すときは 19361 の htmlheader からこのファイルの <link> を外す。
   資料: I:\Projects2\CMSハートコア\採用サイト2027_fix_20261105\README.md */

/* 1. スマホ（〜767px）の事業紹介のタブ
   business_adventure_2027.css が 1024px 以下で #business-tab-container を 2 列グリッドにするのに、
   ボタンの w-[48%] が残って幅がセルの半分になり、部門名が 1 字ずつ縦に折れ、英語名が枠からはみ出す */
@media (max-width: 1024px) {
  #business-tab-container .tab-btn { width: 100%; }
}
@media (max-width: 767px) {
  #business-tab-container .tab-btn { padding: 16px 14px; }
  #business-tab-container .tab-btn > span.text-lg { font-size: clamp(12px, 4vw, 18px); }
}

/* 2. ヘッダーのナビ（768〜1279px）
   項目が「タカノに／ついて」のように単語の途中で 2 行に折れる → 1 項目 1 行、収まらなければ項目単位で折り返す */
#header nav > a { white-space: nowrap; }
@media (max-width: 1279px) {
  #header nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
  #header nav > :not(:last-child) { margin-inline: 0; }
  #header nav > a { font-size: 12px; }
  #header nav > a.bg-blue-700 { padding-left: 14px; padding-right: 14px; }
}