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

/*
 * 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;
}

/* #6 スクリーンリーダー専用テキスト（視覚的に隠すが読み上げ対象）。
 * 文脈依存の h1（各ページの見出し）を視覚デザインを変えずに提供する。
 * テーマの .screen-reader-text は display:none（＝AT にも隠れる不適切実装）の
 * ため、独自クラスを用いて display は隠さず画面外配置で AT に残す。 */
.wk-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: block !important;
}

/* #9 スキップリンク（WCAG 2.4.1）。通常は画面外、キーボードフォーカス時のみ表示。 */
.wk-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: #001d9a;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}
.wk-skip-link:focus {
    left: 8px;
    top: 8px;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/*
 * TOP メニューのホバー時ピクセルズレ（下線が一瞬太くなってから細く戻る）対策。
 *
 * 原因: テーマは非カレント項目に border-bottom を持たせず（高さ 38px）、
 * ホバー/カレント時のみ `border-bottom:1px solid #001D9A` を付与する。
 * アンカーは box-sizing:border-box かつ高さ auto なので、この 1px 追加で総高が
 * 38→39px に増える。さらにアンカーに `transition: all 0.4s` が効いており
 * border-width(0→1px) まで遷移するため、ホバー境界で hover が一瞬外れて再取得し、
 * 下線が太く→細くとパルスして 1px 分レイアウトがずれる。
 *
 * 対策: rest 時に 1px の透明ボーダーを常時確保して高さを一定化（カレント項目と
 * 他項目の 1px 段差も解消）。遷移は色系のみに限定し、幅・高さは一切遷移させない。
 * 見た目（ホバーで青い 1px 下線が出る）は完全に維持する。
 */
#nav_menu #navy > li > a:not(.nav_trigger) {
    border-bottom: 1px solid transparent !important;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}
#nav_menu #navy > li.current_page_item > a:not(.nav_trigger),
#nav_menu #navy > li.current > a:not(.nav_trigger),
#nav_menu #navy > li:hover > a:not(.nav_trigger) {
    border-bottom-color: #001d9a !important;
}

/*
 * 右上 SNS アイコンのホバーで横スライドするラベルが、隣接アイコン（特に中央の X）
 * の上に重なってクリック/ホバーを奪う問題への対策。
 *
 * .soc_name は絶対配置でアイコン枠外へ展開し（Facebook は右へ、末尾の YouTube は
 * 左へ）、pointer-events:auto かつホバー時 z-index:10 のため隣の X アイコンを覆って
 * クリックを横取りする。さらにラベル上でホバーが維持され続け、ラベルが外れない。
 *
 * 対策: スライド表示（アニメ・見た目）は維持し、ラベルとその背景擬似要素を
 * pointer-events:none にして下のアイコンへ透過させる。ポインタがアイコン枠に入れば
 * 隣のホバーが即座に外れてラベルが消え、X を確実にクリックできる。
 */
.top-socials > a > span.soc_name,
.top-socials span.soc_name:before,
.top-socials span.soc_name:after {
    pointer-events: none !important;
}