/* -----------------------------------------------------------------------------
 * フロントエンド（公開サイト）の不具合対策
 * -------------------------------------------------------------------------- */

/*
 * Sticky ヘッダーがウィンドウ幅の変更に追従しない問題の対策。
 *
 * 「Sticky Menu (or Anything!) on Scroll」プラグインは、ヘッダーを固定表示に
 * する際 <header id="site_header"> にインラインで position:fixed と
 * width:XXXXpx（読込時のビューポート幅の実px）を書き込む。この幅が
 * ウィンドウリサイズで更新されないため、ヘッダーと上部メニューが元の幅の
 * まま固定され「リサイズされない」ように見える。
 *
 * インラインの固定px幅を !important で打ち消し、ビューポート相対幅
 * （position:fixed に対する width:100% ＝ 常にウィンドウ幅）にすることで、
 * リサイズ時に正しくリフローさせる。内側の .content / .container は
 * max-width で中央寄せされるため、レイアウトは崩れない。
 */
header#site_header.element-is-sticky {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* プラグインが挿入するスペーサーも固定px幅を持つため、狭い幅での
   横スクロール発生を防ぐためビューポート相対幅にする。 */
.sticky-element-placeholder {
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * コンテナ幅を「流動的」にして、1200px 等のブレークポイントでの段差をなくす。
 *
 * 既定では bootstrap.css が .container を width:750/970/1170px（≥768/992/1200）、
 * responsive.css が max-width:625/750/970/1170px と固定値で段階切替するため、
 * 例えば 1200px を境に 970→1170px と幅が「飛ぶ」。
 *
 * これを width:calc(100% - 30px)（＝左右15pxのゆとりを保ちつつビューポートに
 * 連続追従）＋ max-width:1170px（最大幅は従来どおり）に統一し、段差をなくして
 * シームレスに伸縮させる。padding は足さない（bootstrap の row/col の
 * ネガティブマージンと干渉しないよう、幅の縮小＋中央寄せで内側の余白を作る）。
 */
.content,
.container {
    width: calc(100% - 30px) !important;
    max-width: 1170px !important;
}

/*
 * フッターの文字視認性（コントラスト）改善。
 *
 * フッター背景は濃紺(#001D9A)＋最下部の暗いバー。既定では本文が薄いグレー
 * (#989898 ≈ 4.4:1 で AA 4.5:1 未満)、コピーライトや「公式サイトの確認方法」
 * リンクは暗色で背景に埋もれて読みにくい（黒地に黒＝ほぼ不可視）。
 * フッター内のテキストとリンクを高コントラストの明色に統一する（WCAG 1.4.3）。
 */
#footer,
#footer p,
#footer li,
#footer td,
#footer th,
#footer address,
#footer span,
#footer .textwidget,
#footer .footer_row {
    color: #e2e7f0 !important;   /* 濃紺/暗色地で約11:1。住所・TEL・FAX・コピーライト等 */
}
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer .footer_title,
#footer a {
    color: #ffffff !important;   /* 見出し・リンク（「公式サイトの確認方法」含む）を白で可視化 */
}
#footer a:hover,
#footer a:focus {
    color: #cfe0ff !important;
    text-decoration: underline;
}

/*
 * アクセシビリティ改善
 */

/* #4 キーボードフォーカスの可視化（WCAG 2.4.7）。
 * テーマは複数箇所で :focus{outline:none} にしており、キーボード操作時に
 * 現在位置が分からない。:focus-visible（キーボード操作時のみ）に明瞭な
 * アウトラインを付与する（マウスクリックでは出ない）。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.nav_trigger:focus-visible,
.hm_go_top:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

/* #5 赤字のコントラスト不足（WCAG 1.4.3）。
 * 「＊お知らせ＊」等の .red-color は純赤 #FF0000（白背景で約4:1・AA未満）。
 * 濃い赤に下げて 4.5:1 以上を確保する。 */
.red-color,
.text_red,
.text-red {
    color: #c62828 !important;
}

/* 言語切替（Bogo）の「English」等が濃紺トップバーで #666 グレー（約2.2:1）で
 * 読みにくいため白にする（WCAG 1.4.3）。 */
.topbar .bogo-language-switcher a,
.topbar .bogo-language-switcher .bogo-language-name {
    color: #ffffff !important;
}
