/* ========================================================================== [2026-09-21] ヘッダー — 横並びメニューが画面外にはみ出す問題（言語別） 【現象】.header-container（max-width 1200px・左右padding 32px）の内側は 1136pxしかないのに、中身がそれを超える幅を必要とし、ヘッダーの 右側が画面外に出る。横スクロールバーは出ないため、利用者が 隠れた項目にたどり着く手段がない。 英語ページ：ロゴ286px＋メニュー818px＋言語切替135px＝1239px。 約1352px未満で言語切替が切れ、1024pxではContactボタンごと 312px分が画面外に出ていた。 メニュー818pxの内訳は項目7つ626px＋ギャップ32px×6＝192px。 2026-09-21に追加した「For employees」が104px＋ギャップ32px ＝136pxを占めており、これが不足の主因。追加前もすでに1366px 付近が限界で、今回の追加でその限界を割り込んだ。 日本語ページ：メニューは6項目・581pxで英語より短い。 それでも約1105px未満でははみ出す（1024pxで76px）。 英語より軽度のため気づかれていなかった。 【方針】ハンバーガーメニューに切り替える幅を、必要幅に応じて言語別に 引き上げる。 ・すべての言語 … 1199px以下（日本語の実測必要幅は約1105px。 1200pxでは92pxの余裕があることを確認済み） ・英語のみ … さらに 1200〜1399px も（実測で切れ始めるのは 約1352px。1360pxだと切替時点の余白が7pxしか 残らず、利用者の既定文字サイズが大きい場合や ページズーム時に破綻する。1400pxなら45px残る） style.css の @media (max-width: 768px) の数値は変えない。あの指定 には .news-grid や .services-grid など本文側のスマートフォン用指定も 同居しており、数値を上げるとノートPCでサイト全体がスマートフォン用 レイアウトになってしまうため。ここではヘッダーの開閉に関わる指定 だけを新しい幅で上書きする。 【言語の判定】 を使う。日本語ページは lang="ja"、英語ページは lang="en"。英語用の節だけ html[lang="en"] を前置する。 中文（zh-cn、保留中）は lang が en 以外になるため、自動的に 1199px以下の側（＝日本語と同じ扱い）に入る。公開時に中文メニューの 必要幅を実測し、1199pxで足りるかを確認すること。 【2つの節の範囲は重ならない】1199px以下と、1200〜1399px。 重ねると html[lang="en"] .header-nav（詳細度 0,2,1）が .header-nav.active（0,2,0）に勝ってしまい、英語ページで引き出しが 開かなくなる。範囲を分けることでこの衝突を避けている。 各節の内部では .active の指定を後に置き、同詳細度で後勝ちさせる。 【なぜ style.css に直接書かず、別ファイルにしたか】 このサイトは KUSANAGI 上で WEXAL Page Speed Technology （ngx_pagespeed）が動いており、CSS/JS を自動圧縮して最適化済みの コピーを元のURLのまま配信する。既存ファイルを書き換えても、 最適化コピーが入れ替わるまで数分のずれがある。新しいパスの ファイルには最適化コピーが存在しないため、待たずに反映される。 テーマのCSS/JSを変更した直後に「反映されていない」と見えたときは、 まず数分待ってから再確認すること。 【読み込み順】functions.php の yoshikawa_enqueue_scripts() で 'yoshikawa-main-style' に依存させて読み込む。style.css の 後に来るため、同じ詳細度でもこちらが優先される。 ========================================================================== */ /* -------------------------------------------------------------------------- すべての言語：1199px以下 -------------------------------------------------------------------------- */ @media (max-width: 1199px) { /* 横並びをやめ、ハンバーガーで開く引き出しにする。 #header が position:fixed のため、top:100% はヘッダーの直下を指す。 */ .header-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white; border-top: 1px solid var(--border-color); box-shadow: none; } .header-nav ul { flex-direction: column; padding: var(--spacing-md); gap: var(--spacing-sm); } /* 押せる範囲を 44×44 にする（WCAG 2.5.8 推奨）。線の見た目は変えない。 768px以下では style.css 側の指定が margin-right:-10px まで含めて別途効く。 */ .mobile-menu-toggle { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* 言語切替。デスクトップ用（ヘッダー右端）を隠し、 引き出しの中のモバイル用（nav の内側にある）を出す。 */ .language-switcher.desktop-only { display: none; } .language-switcher.mobile-only { display: flex; margin-left: 0; padding: var(--spacing-md); padding-top: 0; border-top: 1px solid var(--border-light); margin-top: var(--spacing-sm); justify-content: center; } .language-switcher.mobile-only .lang-link { padding: 0.5rem 1rem; font-size: 0.875rem; } /* 開いた状態。詳細度を .header-nav より1つ上げるため、この節の最後に置く。 */ .header-nav.active { display: block; } } /* -------------------------------------------------------------------------- 英語のみ：1200〜1399px 英語メニューは7項目・818pxで、この帯では横並びが収まらない。 日本語（581px）は収まるので、この節は英語だけに適用する。 -------------------------------------------------------------------------- */ @media (min-width: 1200px) and (max-width: 1399px) { html[lang="en"] .header-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white; border-top: 1px solid var(--border-color); box-shadow: none; } html[lang="en"] .header-nav ul { flex-direction: column; padding: var(--spacing-md); gap: var(--spacing-sm); } html[lang="en"] .mobile-menu-toggle { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; } html[lang="en"] .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } html[lang="en"] .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } html[lang="en"] .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } html[lang="en"] .language-switcher.desktop-only { display: none; } html[lang="en"] .language-switcher.mobile-only { display: flex; margin-left: 0; padding: var(--spacing-md); padding-top: 0; border-top: 1px solid var(--border-light); margin-top: var(--spacing-sm); justify-content: center; } html[lang="en"] .language-switcher.mobile-only .lang-link { padding: 0.5rem 1rem; font-size: 0.875rem; } /* 同詳細度で後勝ちさせるため、この節の最後に置く。 */ html[lang="en"] .header-nav.active { display: block; } }