/* =========================================================
  Header
  - モバイル(<768): ロゴ + 電話のみ（小さめ）
  - 768+: DL/お問い合わせを表示（サイズ調整）
  - 960+: 既存のサイズ感に復帰
========================================================= */

/* ヘッダー本体 */
header {
  width: 100%;
  /*background: #fff;*/
	background-color: rgba(255, 255, 255, 0.9);
}

/* ヘッダーバー（共通） */
/*header ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  box-sizing: border-box;
}*/

/* 共通リストアイテム */
header ul li {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: 0 1 auto;
}

/* ロゴ（モバイル：小さめ） */
header ul li.headLogo {
  flex: 1 1 auto;         /* a のサイズに合わせる */
  min-width: auto;        /* ここは固定しない */
  background: none;       /* 背景は a に移動 */
  /* クリック範囲をロゴの箱に限定したいので relative 不要 */
}

/* a をロゴ画像の箱にする（高さだけ指定・幅は比率で自動） */
header ul li.headLogo a {
  --logo-h: 20px;                 /* ロゴ高さだけ指定 */
  display: block;                 /* a をブロックにしてサイズ指定可に */
  height: var(--logo-h);          /* 高さを変数で制御 */
  aspect-ratio: 156 / 23;         /* ロゴの比率を維持しつつ幅が決まる */
  background: url(/assets/images/common/co_logo_bridgead.png) no-repeat left center / contain;
  text-indent: -9999px;           /* テキストは非表示に */
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

header ul li.headLogo span {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* 電話番号（モバイル：小さめ） */
header ul li.headTel {
  min-width: 0;              /* flex収まり優先 */
  background: url(/assets/images/common/co_tel.png) no-repeat left center / 24px auto;
  padding-left: 28px;        /* 24px + 余白4px */
  justify-content: flex-end;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
header ul li.headTel a {
  color: inherit;
  text-decoration: none;
}

/* 資料DL・お問い合わせ（モバイルでは非表示） */
header ul li.headDownload,
header ul li.headContact {
  display: none;
  min-width: 112px;
}
header ul li.headDownload a,
header ul li.headContact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  line-height: 1.2;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s ease-in-out;
  text-decoration: none;
}

/* 資料DL */
header ul li.headDownload a {
  border: 1px solid var(--color-link);
  background: var(--color-link);
  color: #fff;
}
header ul li.headDownload a:hover {
  border-color: var(--color-link-hover);
  background: var(--color-link-hover);
}

/* お問い合わせ */
header ul li.headContact a {
  border: 1px solid var(--color-link);
  background: #fff;
  color: var(--color-text);
}
header ul li.headContact a:hover {
  border-color: var(--color-link-hover);
  background: #fff;
  color: #777;
}

/* キーボード操作時の可視フォーカス */
header a:focus-visible {
  outline: 3px solid rgba(0, 112, 243, 0.35);
  outline-offset: 2px;
}

/* =========================================================
  ブレークポイント
========================================================= */

/* 360px未満でさらに詰める（超狭幅保険） */
@media (max-width: 359.98px) {
	header ul li.headLogo a {
		--logo-h: 18px;
	}
  header ul li.headTel {
		font-size: 18px;
		padding-left: 24px;
		background-size: 22px auto;
	}
}

/* 640px〜：DL/お問い合わせを表示 */
@media (min-width: 640px) {
	header ul li.headLogo a {
		--logo-h: 22px;
	}
  header ul li.headTel {
    min-width: 180px;
    background-size: 26px auto;
    padding-left: 30px;
    font-size: 20px;
  }
  header ul li.headDownload,
  header ul li.headContact {
    display: flex;
  }
}

/* 768px〜：DL/中間サイズ */
@media (min-width: 768px) {
  header ul li.headTel {
    min-width: 200px;
    background-size: 30px auto;
    padding-left: 40px;
    font-size: 22px;
  }
	header ul li.headDownload,
	header ul li.headContact {
		min-width: 142px;
	}
	header ul li.headDownload a,
	header ul li.headContact a {
		font-size: 14px;
	}
}

/* 960px〜：従来のサイズ感 */
@media (min-width: 960px) {
	header ul li.headLogo a {
		--logo-h: 23px;
	}
  header ul li.headTel {
    min-width: 220px;
    background-size: 38px auto;
    padding-left: 48px;
    font-size: 24px;
  }
}