/* =============================================================
 * getaya.jp 独自ヘッダー CSS（PC専用 / 992px以上のみ適用）
 *
 * このファイルは丸ごと getaya-header.css として独立させている。
 * 既存の assets/css/style.css（長大化しているファイル）とは分離し、
 * ヘッダー関連の変更はこのファイルだけを見れば完結するようにするため。
 *
 * スマホ（991px以下）はこのファイルの影響を受けない
 * （Lightning標準の見た目のまま。次回スマホヘッダー実装時に
 * このファイル内へ @media (max-width: 991.98px) セクションを追加する）。
 * ============================================================= */

/* -------------------------------------------------------------
 * SECTION: フォントについて
 * BIZ UDPGothic の読み込みは、このファイル内の @import ではなく
 * inc/enqueue.php 側で wp_enqueue_style() を使って行っている。
 * （@import はブロックされたり読み込み順序が不安定になりやすいため）
 * ----------------------------------------------------------- */

@media (min-width: 992px) {

	/* ---------------------------------------------------------
	 * SECTION: ヘッダー全体（sticky固定 + スクロール時の透過）
	 * --------------------------------------------------------- */
	.getaya-header {
		/* 【修正】G3 Pro Unitのheader-trans.jsがid="site-header"を直接
		   操作しposition等をインラインで上書きしていたため、確実に
		   勝つよう!importantを付与(該当JS自体は無効化済みだが念のため)。 */
		position: sticky !important;
		top: 0 !important;
		left: 0;
		width: 100%;
		z-index: 9999;
		font-family: 'BIZ UDPGothic', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	}

	/* body.scrolled は Lightning標準JS（assets/js/main.js）が
	   スクロール量0px超で自動的に付与するクラス。
	   【変更】以前はこのクラスに乗せてスクロール時に半透明へ切り替えて
	   いたが、今回廃止。ヘッダーは常にカスタマイザー指定の背景色の
	   まま(不透明)で固定表示する。 */

	/* ---------------------------------------------------------
	 * SECTION: ヘッダー上部（タグライン・電話・SNS）
	 * 【修正】背景(.getaya-header-top)は100%幅のまま、
	 * 中身(.getaya-header-top__inner)だけ1200pxで中央寄せにする。
	 * 【修正】高さを30px→24pxへ縮小。
	 * --------------------------------------------------------- */
	.getaya-header-top {
		height: 24px;
		background-color: var(--getaya-header-top-bg, #150075);
		border-bottom: 1px solid rgba(255,255,255,0.15);
		width: 100%;
	}
	.getaya-header-top__inner {
		max-width: 1200px;
		margin: 0 auto;
		height: 100%;
		padding: 0 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.getaya-header-top__tagline {
		margin: 0;
		font-size: 11px;
		letter-spacing: 0.06em;
		color: var(--getaya-header-top-text, #ffffff);
	}
	.getaya-header-top__tagline--sp {
		display: none; /* PCでは短縮版を出さない */
	}
	.getaya-header-top__right {
		display: flex;
		align-items: center;
		gap: 16px;
	}
	.getaya-header-top__tel {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		color: var(--getaya-header-top-text, #ffffff);
		text-decoration: none;
	}
	.getaya-header-top__sns {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.getaya-header-top__sns a {
		color: var(--getaya-header-top-text, #ffffff);
		font-size: 13px;
		text-decoration: none;
	}
	.getaya-header-top__mypage {
		font-size: 11px;
		color: var(--getaya-header-top-text, #ffffff);
		text-decoration: none;
		border-left: 1px solid rgba(255,255,255,0.3);
		padding-left: 16px;
	}

	/* ---------------------------------------------------------
	 * SECTION: ヘッダー本体（ロゴ・グローバルナビ・カート）
	 * 【修正】背景(.getaya-header-main)は100%幅のまま、
	 * 中身(.getaya-header-main__inner)だけ1200pxで中央寄せにする。
	 * 【修正】高さを68px→56pxへ縮小。
	 * --------------------------------------------------------- */
	.getaya-header-main {
		height: 56px;
		background-color: var(--getaya-header-bg, #150075);
		width: 100%;
	}
	.getaya-header-main__inner {
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 24px;
	}
	.getaya-header-main__logo {
		margin: 0;
		flex-shrink: 0;
	}
	.getaya-header-main__logo img {
		/* 【修正】30px→42px(140%)に拡大。ヘッダー高さ(56px)は変えず、
		   余白を切り詰めて収める。 */
		max-height: 42px;
		width: auto;
	}
	/* 【修正】グローバルナビ本体(<ul>)の内部レイアウトは、Lightning標準の
	   スタイルにすべて委ねる(独自のflex/gap/余白指定は撤去)。
	   このnav要素だけ、当ヘッダー内で右詰めに配置する。 */
	.getaya-header-main__nav {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	.getaya-header-main__cart {
		flex-shrink: 0;
	}
	.getaya-header-cart-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 18px;
		text-decoration: none;
	}
	.getaya-header-cart-badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background-color: #ba2753;
		color: #ffffff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}
	.getaya-header-cart-icon {
		width: 22px;
		height: 22px;
		display: block;
	}

	/* ---------------------------------------------------------
	 * SECTION: 旧ヘッダー上部（G3 Pro Unit標準）の非表示化
	 * getaya-header-top（このファイルの独自実装）に置き換えたため、
	 * Lightning標準の#header-top（宣伝文言+電話番号）は
	 * PC幅では非表示にする。プラグイン側の設定・データは
	 * 一切変更していないので、必要になればいつでも復元できる。
	 * スマホ（991px以下）は次回のスマホヘッダー対応まで
	 * このまま残す（今は何も変えない）。
	 * --------------------------------------------------------- */
	#header-top {
		display: none !important;
	}

	/* ---------------------------------------------------------
	 * SECTION: グローバルナビ サブメニュー
	 *
	 * 【方針転換】独自のホバー式・クリック式アコーディオンとも、
	 * 実装のたびに不具合(意図しない場所が開く、位置がずれる、
	 * ナビが間延びする等)を繰り返し、実用に耐えられなかった。
	 * 「勝つ」より「撤退」の判断により、PCメニューに関する独自CSS・
	 * 独自JS・開閉ボタン・hover/click制御・サブメニュー位置調整は
	 * すべて撤去し、Lightning標準の見た目・DOM・CSS・JS挙動に
	 * 完全に戻した。子テーマ側は何も追加しない
	 * (template-parts/site-header.php側で menu_class に
	 * 'global-nav-list' を指定し、Lightning本体のCSS
	 * (_global-nav--process--sub-drop.scss 等)がそのまま効く
	 * 状態にしている)。
	 *
	 * 見た目のカスタマイズ(配色・開閉ボタンの形など)は、
	 * この標準状態が正常に動作することを確認してから、
	 * 別工程で最小限に検討する。今回はその第一弾として、
	 * 文字色だけ白に指定する(構造・挙動には触れない)。
	 * --------------------------------------------------------- */
	.global-nav-list > li > a {
		color: #ffffff;
	}

	/* ---------------------------------------------------------
	 * SECTION: グローバルナビ 現在地表示
	 * 【変更】Lightning標準の現在地マーカーは、::before/::afterの
	 * 二重三角形(下向きの吹き出し矢印のような形)で、洗練された
	 * 印象ではなかったため非表示にし、代わりに文字の直下に小さな
	 * ドット1つだけを置く控えめな表示に変更した。ホバー時と同じ
	 * 「文字がわずかに太くなる」変化も現在地では常時適用し、
	 * 色は変えない(色を変えると選択中のような強い主張になり、
	 * 「粋」の落ち着いた雰囲気からは離れるため)。
	 * --------------------------------------------------------- */
	.global-nav-list > li.current-menu-item::before,
	.global-nav-list > li.current-menu-item::after,
	.global-nav-list > li.current-menu-parent::before,
	.global-nav-list > li.current-menu-parent::after,
	.global-nav-list > li.current-menu-ancestor::before,
	.global-nav-list > li.current-menu-ancestor::after,
	.global-nav-list > li.current_page_item::before,
	.global-nav-list > li.current_page_item::after,
	.global-nav-list > li.current_page_parent::before,
	.global-nav-list > li.current_page_parent::after,
	.global-nav-list > li.current_page_ancestor::before,
	.global-nav-list > li.current_page_ancestor::after {
		content: none !important;
		display: none !important;
		border: 0 !important;
	}
	.global-nav-list > li.current-menu-item > a,
	.global-nav-list > li.current-menu-parent > a,
	.global-nav-list > li.current-menu-ancestor > a,
	.global-nav-list > li.current_page_item > a,
	.global-nav-list > li.current_page_parent > a,
	.global-nav-list > li.current_page_ancestor > a {
		position: relative;
		font-weight: 700;
		letter-spacing: 0.03em;
	}
	.global-nav-list > li.current-menu-item > a::after,
	.global-nav-list > li.current-menu-parent > a::after,
	.global-nav-list > li.current-menu-ancestor > a::after,
	.global-nav-list > li.current_page_item > a::after,
	.global-nav-list > li.current_page_parent > a::after,
	.global-nav-list > li.current_page_ancestor > a::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -6px;
		transform: translateX(-50%);
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background-color: #d8ce63; /* 金の差し色(既存の差し色と同じ値を直接指定) */
	}
	/* 【不具合修正】実機のタブレット/横向きスマホ等、実際はタッチ端末
	   (device-mobile)でも画面幅がPC相当(992px以上)になるケースがある。
	   Lightning標準はデバイス種別(device-pc)でのみ1階層目の開閉ボタンを
	   隠すため、この「幅はPCだが端末はスマホ」の場合にボタンの白い枠が
	   見えてしまっていた。画面幅基準でも確実に隠す。 */
	.global-nav-list > li > .acc-btn {
		display: none !important;
	}

	/* ---------------------------------------------------------
	 * SECTION: カートアイコンのホバー色もキーカラーに統一。
	 * --------------------------------------------------------- */
	.getaya-header-cart-link:hover,
	.getaya-header-cart-link:focus {
		color: var(--getaya-key-color, #337ab7);
	}

}

/* =============================================================
 * SECTION: スマホヘッダー（991px以下）
 *
 * ステップ1: ヘッダー上部・本体のレイアウト整理。
 * ハンバーガーメニューの見た目調整は次のステップで行う。
 * ============================================================= */
@media (max-width: 991.98px) {

	/* 【不具合修正】PCでは#header-top(Lightning標準の旧ヘッダー上部)を
	   非表示にしていたが、スマホでは非表示にし忘れていた。これが
	   「ヘッダーのお化け」の実体の一つだったため、こちらも非表示にする。 */
	#header-top {
		display: none !important;
	}

	.getaya-header {
		/* 【修正】G3 Pro Unitのheader-trans.jsがid="site-header"を直接
		   操作しposition等をインラインで上書きしていたため、確実に
		   勝つよう!importantを付与(該当JS自体は無効化済みだが念のため)。 */
		position: sticky !important;
		top: 0 !important;
		left: 0;
		width: 100%;
		z-index: 9999;
		font-family: 'BIZ UDPGothic', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	}
	/* 【変更】スクロール時に半透明になる演出は廃止(PC版と統一)。
	 * ヘッダーは常にカスタマイザー指定の背景色のまま(不透明)で
	 * 固定表示する。 */

	/* ---------------------------------------------------------
	 * SECTION: ヘッダー上部（タグライン・電話のみ。SNS/マイページは割愛）
	 * --------------------------------------------------------- */
	.getaya-header-top {
		height: 28px;
		background-color: var(--getaya-header-top-bg, #150075);
		width: 100%;
	}
	.getaya-header-top__inner {
		height: 100%;
		padding: 0 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.getaya-header-top__tagline {
		margin: 0;
		font-size: 10px;
		color: var(--getaya-header-top-text, #ffffff);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.getaya-header-top__tagline--pc {
		display: none; /* スマホではSP用の短縮文言だけ出す */
	}
	.getaya-header-top__tel {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		color: var(--getaya-header-top-text, #ffffff);
		text-decoration: none;
		flex-shrink: 0;
	}
	/* SNS・マイページは今回のスマホ上部バーでは割愛(ハンバーガーメニュー
	   側にマイページ導線を別途用意する)。 */
	.getaya-header-top__sns,
	.getaya-header-top__mypage {
		display: none;
	}

	/* ---------------------------------------------------------
	 * SECTION: ヘッダー本体（ロゴ・カート・ハンバーガー）
	 * グローバルナビ本体(横一列のメニュー)はスマホでは表示せず、
	 * Lightning標準のハンバーガーメニュー(#vk-mobile-nav)側に任せる。
	 * --------------------------------------------------------- */
	.getaya-header-main {
		height: 52px;
		background-color: var(--getaya-header-bg, #150075);
		width: 100%;
	}
	.getaya-header-main__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		padding: 0 12px;
		/* ハンバーガーボタン(position:fixedで別途配置)の幅だけ
		   右側に余白を確保し、カートと重ならないようにする。 */
		padding-right: 56px;
	}
	.getaya-header-main__logo {
		margin: 0;
	}
	.getaya-header-main__logo img {
		max-height: 32px;
		width: auto;
	}
	/* 横一列のグローバルナビは非表示(ハンバーガーメニューに一本化)。 */
	.getaya-header-main__nav {
		display: none;
	}
	.getaya-header-cart-link {
		position: relative;
		display: inline-flex;
		color: #ffffff;
		font-size: 20px;
		text-decoration: none;
	}
	.getaya-header-cart-icon {
		width: 24px;
		height: 24px;
		display: block;
	}
	.getaya-header-cart-badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background-color: #ba2753;
		color: #ffffff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}

	/* ---------------------------------------------------------
	 * SECTION: ハンバーガーボタン（Lightning標準の要素・JSはそのまま、
	 * 見た目だけ独自化）
	 *
	 * Lightning標準は開閉2種類のSVG画像を背景に出し分けているが、
	 * ここでは画像に頼らずCSSの線(疑似要素+背景グラデーション)で
	 * 3本線を描画し、開いた時(.menu-open、Lightning標準JSが
	 * 自動で付け外しするクラス)は✕に変形させる。
	 * 位置も、Lightning標準のヘッダーではなく当ヘッダー本体の
	 * 中央に来るよう独自に指定している。
	 * --------------------------------------------------------- */
	#vk-mobile-nav-menu-btn {
		top: 37px !important; /* 上部バー28px + 本体52pxの中央 */
		right: 12px !important;
		width: 32px !important;
		height: 32px !important;
		background-image: none !important;
		text-indent: -9999px; /* 元の"MENU"テキストを隠す */
		overflow: hidden;
		/* 【修正】Lightning標準の背景(半透明の黒)と枠線が「□」として
		   残って見えていたため、両方とも明示的に消す。 */
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		/* 【不具合修正】ボタン自体のz-index(Lightning標準は2100)が
		   ヘッダー(z-index:9999)より低く、ヘッダーの下に潜って
		   クリックが届かなくなっていた。開いたメニュー本体
		   (#vk-mobile-nav)のz-indexは以前直したが、ボタン自体を
		   直し忘れていたのが「反応しない」の直接の原因だった。 */
		z-index: 10001 !important;
	}
	#vk-mobile-nav-menu-btn::before,
	#vk-mobile-nav-menu-btn::after,
	#vk-mobile-nav-menu-btn {
		transition: all 0.3s ease;
	}
	/* 中央の線はボタン自体の背景で描く。【修正】見やすいよう少し太く長く。 */
	#vk-mobile-nav-menu-btn {
		background-image: linear-gradient(#ffffff, #ffffff) !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 26px 3px !important;
	}
	#vk-mobile-nav-menu-btn::before,
	#vk-mobile-nav-menu-btn::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 26px;
		height: 3px;
		background-color: #ffffff;
		transform: translateX(-50%);
	}
	#vk-mobile-nav-menu-btn::before {
		top: 8px;
	}
	#vk-mobile-nav-menu-btn::after {
		top: 21px;
	}
	/* 開いている時（Lightning標準JSがmenu-openクラスを付与）は✕に変形。 */
	#vk-mobile-nav-menu-btn.menu-open {
		background-image: none !important; /* 中央線を消す */
	}
	#vk-mobile-nav-menu-btn.menu-open::before {
		top: 15px;
		transform: translateX(-50%) rotate(45deg);
	}
	#vk-mobile-nav-menu-btn.menu-open::after {
		top: 15px;
		transform: translateX(-50%) rotate(-45deg);
	}

	/* ---------------------------------------------------------
	 * SECTION: ハンバーガーメニュー本体（開いた時のオーバーレイ）
	 * Lightning標準の開閉・アコーディオン機構はそのまま、
	 * 見た目（配色・文字サイズ）だけ独自化する。
	 * --------------------------------------------------------- */
	#vk-mobile-nav {
		/* 【修正】背景を75%の濃さ(25%透過)に。 */
		background-color: color-mix(in srgb, var(--getaya-header-bg, #150075) 75%, transparent) !important;
		/* 【修正】ヘッダー(z-index:9999)の下に潜り込んでいたため、
		   それより確実に高い値に引き上げる。 */
		z-index: 10000 !important;
		/* 【追加】開閉をフェード+わずかな拡大(0.98→1.0)で演出する。
		   Lightning標準の位置移動アニメーションに、透明度と拡大の
		   変化を重ねる形。 */
		transition: opacity 0.3s ease, transform 0.3s ease !important;
	}
	#vk-mobile-nav:not(.vk-mobile-nav-open) {
		opacity: 0;
		transform: scale(0.98);
		pointer-events: none;
	}
	#vk-mobile-nav.vk-mobile-nav-open {
		opacity: 1;
		transform: scale(1);
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer {
		/* 【修正】1階層目「ABOUT」の＋マークが、ヘッダー側の
		   ハンバーガー✕ボタンと重なって押しづらかったため、
		   メニュー全体の開始位置を下げて避ける。 */
		padding-top: 56px;
		padding-bottom: 40px; /* ブランドマークの下にも少し余白を持たせる */
	}
	/* 【追加】メニュー最下段の下、40pxの余白を空けてセンター配置で
	   ブランドマークを表示する。開閉状態に応じて自然に下へ移動し、
	   場合によってはスクロールしないと見えなくなってよい仕様。 */
	#vk-mobile-nav .vk-mobile-nav-menu-outer > ul::after {
		content: "";
		display: block;
		width: 100%;
		height: 100px;
		margin-top: 40px;
		background-image: url('https://getaya.jp/wp-content/uploads/2026/09/tsu-mark-s.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 100px;
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer a {
		display: block;
		color: #ffffff;
		font-size: 24px;
		padding-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	/* 【修正】各階層ごとに50pxずつインデントする(1階層目から適用)。 */
	#vk-mobile-nav .vk-mobile-nav-menu-outer > ul > li > a {
		padding-left: 50px;
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer > ul > li > .sub-menu > li > a {
		padding-left: 100px;
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer > ul > li > .sub-menu > li > .sub-menu > li > a {
		padding-left: 150px;
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
		padding-left: 200px;
	}
	/* 孫メニュー以降は少し小さめに。 */
	#vk-mobile-nav .vk-mobile-nav-menu-outer .sub-menu .sub-menu a {
		font-size: 18px;
		color: rgba(255, 255, 255, 0.85);
	}
	/* 開閉ボタン(runAcc()がJSで自動挿入)もLightning標準の画像アイコン
	   ではなく、CSSで描くシンプルな＋/－に差し替える。 */
	#vk-mobile-nav .vk-mobile-nav-menu-outer li.menu-item-has-children {
		position: relative;
	}
	#vk-mobile-nav .vk-mobile-nav-menu-outer li.menu-item-has-children > a {
		padding-right: 56px; /* 開閉ボタンの分の余白 */
	}
	#vk-mobile-nav .acc-btn {
		background-image: none !important;
		position: absolute !important;
		top: 0;
		right: 0;
		width: 56px !important;
		height: 56px !important; /* タップしやすいよう指の腹サイズを確保 */
	}
	#vk-mobile-nav .acc-btn::before,
	#vk-mobile-nav .acc-btn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		background-color: #ffffff;
		transition: transform 0.25s ease;
	}
	#vk-mobile-nav .acc-btn::before {
		width: 14px;
		height: 2px;
		transform: translate(-50%, -50%);
	}
	#vk-mobile-nav .acc-btn::after {
		width: 2px;
		height: 14px;
		transform: translate(-50%, -50%);
	}
	/* 開いている時（acc-btn-closeクラスが外れる）は－だけにする。 */
	#vk-mobile-nav .acc-btn.acc-btn-close::after {
		transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
	}

}

/* =============================================================
 * SECTION: フッター コンテナ幅
 *
 * Lightning標準の.containerクラス(max-width:960px)がフッターの
 * 中身(.site-footer-content)を狭めていた。.containerはサイト内の
 * 他の場所(本文カラム等)でも使われる汎用クラスのため、そちらには
 * 影響させず、フッターに限定して広げる。実機でmax-width:1200pxに
 * なり、他の.container要素(ヘッダーコンテナ等)には影響しないことを
 * 確認済み。
 * ============================================================= */
.site-footer .container {
	max-width: 1200px;
}