/* モバイル表示の修正用CSS - v3（最終調整） */

/* すべてのデバイスでヘッダーの基本スタイルを修正 */
header {
  position: relative !important;
  z-index: 9999 !important;
}

/* ヘッダー内の要素配置を修正 */
header > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* 折り返しを禁止 */
  gap: 0.5rem !important;
  width: 100% !important;
}

/* ロゴのコンテナ */
header > div:first-child > a:first-child,
header > div:first-child > div:first-child {
  flex: 0 0 auto !important;
  max-width: 100px !important; /* デフォルトで小さく */
  z-index: 10000 !important;
}

/* ロゴ画像 */
header img[alt*="Logo"],
header img[alt*="logo"],
header img[alt*="IQB"] {
  max-width: 100% !important; /* コンテナに合わせる */
  height: auto !important;
  display: block !important;
}

/* 言語切り替えボタンのコンテナ */
header > div:first-child > div:last-child {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  z-index: 10000 !important;
  display: flex !important;
  gap: 0.25rem !important;
}

/* 言語切り替えボタン */
header button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 0.3rem 0.5rem !important;
  font-size: 0.75rem !important;
}

/* モバイル表示の調整 */
@media (max-width: 768px) {
  /* ヘッダー全体 */
  header {
    padding: 0.5rem 0.75rem !important;
  }

  /* ロゴのサイズ調整 */
  header > div:first-child > a:first-child,
  header > div:first-child > div:first-child {
    max-width: 80px !important; /* モバイルでさらに小さく */
  }

  /* 言語切り替えボタンのサイズ調整 */
  header button {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
}

/* 極小画面（iPhone SE等）の対応 */
@media (max-width: 375px) {
  header > div:first-child > a:first-child,
  header > div:first-child > div:first-child {
    max-width: 60px !important; /* 極小画面で最小サイズ */
  }
}