@charset "UTF-8";

/* ===================================================================
 * ヘッダーを常に表示する（2026-09-01 新規ファイル）
 *
 * 岡田さん指示（9/1夜）：
 *   「どっちのサイトもスクロールするとヘッダーが出たり隠れたりする。常に出てていい。」
 *   「下スクロールするとヘッダーが全体的に上に引っ込む。さらに下スクロールすると出てくる」
 *
 * ■ 「出たり隠れたり」の正体（実測で特定）
 * 親テーマ blogsy は**ヘッダーを2つ**出力している。
 *   #site-header         … 本体。position:relative なので本文と一緒に流れて上へ消える
 *   #site-sticky-header  … 複製（template-parts/header/header-sticky-default.php）。
 *                          blogsy/assets/css/style.css 5048行目で
 *                          `position:fixed; top:-200px; opacity:0; transition:.6s`
 *                          ＝画面の外に置かれている
 * blogsy/assets/js/main.min.js の scroll ハンドラが
 *   scrollTop > $('#site-header').outerHeight() + 500   （＝96+500＝596px）
 * を境に複製へ `.fixed`（top:0/opacity:1）を付け外しする。
 * → 596pxまでは本体が上へ消え、596pxを超えると複製が降りてくる。上へ戻すとまた引っ込む。
 * 岡田さんの「上に引っ込む→さらに下で出てくる」という説明と実測が完全に一致した。
 *
 * ■ 対処（手段の比較のうえ採用）
 *   採用 (a) 本体 #site-header を position:sticky にし、複製は出さない
 *   不採用(b) 複製を常に .fixed 相当で固定 → ページ最上部で本体と**二重に見える**
 *   不採用(c) 親テーマJSの閾値を0にする上書きJSを足す → (b)と同じ二重＋JSが増える
 * (a) を選んだ理由：複製ヘッダーという仕組み自体を使わないので「出たり隠れたり」の原因が
 * 構造から消える。かつ sticky は要素を流れの中に残すため、fixed のように
 * 「本文が上へずれる分の padding-top を足す」ハックが要らない（採用サイト側の
 * .recruit-page{padding-top:72px} のようなズレ吸収が不要）。
 *
 * ■ 成立条件の確認（実測）
 * position:sticky は、間の祖先に overflow:hidden / transform 等があると効かない。
 *   #site-inner … overflow visible / transform none（display:flex だが縦積みなので影響なし）
 *   #site       … overflow visible / transform none
 *   body        … overflow visible
 *   html        … overflow-x:hidden / overflow-y:auto ＝ここがスクロールポート本体
 * いずれも阻害要因なし。ブラウザ上で実際に注入して、scrollY 0/1200/3000/1500/5000/最下部の
 * すべてで #site-header の top が 0px を維持することを確認したうえでファイル化した。
 *
 * ■ 親テーマJSへの影響（サイドバーの退避量）
 * main.min.js は複製ヘッダーの高さでサイドバーの固定位置も調整している
 * （`$('#site-sticky-header').outerHeight() + 10` を `.sidebar-container.sticky
 *  .sidebar-container-inner` と `.e-con.blogsy-sticky-column` の top に入れる）。
 * display:none にすると高さ0を返すので top は常に 10px になる。
 * **一方でこの変更後は #site-header（高さ96px）が常に画面上部に居座る**ので、
 * 「サイドバーをヘッダーの下に潜らせないための退避」が必要な状況は残ったまま、
 * 退避量だけが0扱いになる。つまり**サイドバーがあるページでは上端が隠れうる**。
 *
 * このサイトでは起きないことを実測で確認した（2026-09-01）：
 *   投稿詳細 /solution/cost-optimization/（post-2990・single-post）で
 *   `.sidebar-container` が **DOMに存在しない**＝子テーマ single.php の
 *   `'left' === $sidebar_position || 'right' === $sidebar_position` が偽
 *   （＝カスタマイザーのサイドバー位置が「なし」）。
 *   `.e-con.blogsy-sticky-column`（Elementor）も0件。
 * ※将来カスタマイザーでサイドバー位置を左右に変更した場合は、この退避量を
 *   ヘッダー高さ（96px）＋10px に直す必要がある。その時まで対処は入れない
 *   （いま存在しないものに向けた指定は動作確認ができないため）。
 *
 * ■ 読み込み条件
 * functions.php の gasp_header_always_visible_assets()（条件なし＝全ページ）。
 * 配色専用の corp-color.css に混ぜていないのは、これが配色ではなく挙動の変更で、
 * かつ corp-color.css は採用ページで読み込まれないため。
 *
 * ※2026-09-01 追記（段6で前提が変わったので訂正）：
 * このファイルを書いた時点では「採用テンプレートには #site-header が無いので当たらない」と
 * 書いていたが、**段6の header-recruit2.php が id="site-header" を出力する**ようになったため
 * 事実として誤りになった。いまは採用ページでもこのファイルの指定が当たり、
 * 採用ヘッダーも sticky で常時表示になる（実測で確認）。
 * これは岡田さんの「どっちのサイトも常に出てていい」に合致するので、そのままでよい。
 *
 * ※未解決：scroll-padding-top の 1024px以下の値（116px）は**コーポレートのモバイル
 * ヘッダー高さ**から算出したもの。採用v2のモバイル実測は173px（「採用サイト」ラベルが
 * 1行を占めて3段に折り返すため。recruit.css 段6マーカーの「※未解決」参照）。
 * 採用サイト側にページ内アンカーがあると、モバイルでは着地点が約57px分ヘッダーに隠れる。
 * ページ内アンカーの実在は未確認。ラベルを残すかの判断（岡田さん未確認）と一緒に決める。
 *
 * 戻し方＝このファイルと functions.php の該当マーカーを削除する。
 * remは使わない（このテーマはルートfont-sizeが10pxになる既知の罠）。
 * =================================================================== */

/* 本体ヘッダーを貼り付ける。z-index は親テーマの実測値999をそのまま明示する
 * （複製の998より上。ヒーローのスライダーや節背景の上に来る必要がある）。 */
#site-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* WP管理バー表示時は管理バーの下に置く（管理バーは position:fixed で手前に出る）。
 * 値は WordPress 標準の管理バー高さ（採用側 recruit.css の同趣旨の指定と揃えている）。 */
body.admin-bar #site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar #site-header {
		top: 46px;
	}
}

/* 複製ヘッダーは出さない。これで「596pxを境に降りてくる／引っ込む」動きが消える。 */
#site-sticky-header {
	display: none;
}

/* ページ内アンカーで飛んだ先が固定ヘッダーの裏に隠れないようにする。
 * 値はヘッダーの実測高さ：デスクトップ96px／1024px以下は116px
 * （親テーマのヘッダー切替は blogsy_ajax_object.header_breakpoint 既定1025px。
 *  狭い幅ではロゴが折り返して**背が高くなる**ため、値が大きいほうが下の指定になる）。 */
html {
	scroll-padding-top: 96px;
}
@media screen and (max-width: 1024px) {
	html {
		scroll-padding-top: 116px;
	}
}