@charset "utf-8";

/* ==========================================================
   LOCAZOO / グローバルナビゲーション 追加スタイル
   既存 style.css の後に読み込む想定（追記型）
   ========================================================== */

:root {
	/* ナビの文字色。白背景に対して 11.0:1（WCAG AAA） */
	--lcz-nav-text: #2c3e50;
	/* ホバー時のアクセント */
	--lcz-nav-accent: #0cbfde;
	/* ドロップダウン内のホバー背景 */
	--lcz-nav-hover-bg: #f2f6f8;
	/* ナビ項目のフォントウェイト。
	   他のナビ項目（サービス等）の Computed 値に合わせる */
	--lcz-nav-weight: 500;
}

/* ----------------------------------------------------------
   1. ナビゲーション全体の文字色
   既存CSSが a や span に色を当てているため、
   同じ深さのセレクタで明示的に上書きする
   ---------------------------------------------------------- */
#lcz_nav_list_ nav ul li > a,
#lcz_nav_list_ nav ul li > a span,
#lcz_nav_list_ nav ul li > .nav_parent_,
#lcz_nav_list_ nav ul li > .nav_parent_ span,
#lcz_sp_nav_ nav ul li > a,
#lcz_sp_nav_ nav ul li > a span,
#lcz_sp_nav_ nav ul li > .sp_nav_parent_,
#lcz_sp_nav_ nav ul li > .sp_nav_parent_ span {
	color: var(--lcz-nav-text);
}

/* ----------------------------------------------------------
   2. ドロップダウンの親（button）を既存の a と同じ見た目に揃える
   ---------------------------------------------------------- */
#lcz_nav_list_ nav ul li .nav_parent_ {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	/* ★font: inherit は li からの継承になるため、
	   既存CSSが a / span に当てている font-weight は拾えない。
	   他のナビ項目に合わせて明示する */
	font-weight: var(--lcz-nav-weight);
}
#lcz_nav_list_ nav ul li .nav_parent_ span {
	font-weight: inherit;
}

#lcz_sp_nav_ nav ul li .sp_nav_parent_,
#lcz_sp_nav_ nav ul li .sp_nav_parent_ span {
	font-weight: var(--lcz-nav-weight);
}

/* 開閉インジケーター（▾） */
#lcz_nav_list_ nav ul li .nav_parent_::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
	flex: 0 0 auto;
}
#lcz_nav_list_ nav ul li.is_open_ .nav_parent_::after {
	transform: translateY(1px) rotate(-135deg);
}

/* ----------------------------------------------------------
   3. ホバー／フォーカス
   一時的な状態なのでアクセントカラーを使用
   ---------------------------------------------------------- */
#lcz_nav_list_ nav ul li > a:hover,
#lcz_nav_list_ nav ul li > a:hover span,
#lcz_nav_list_ nav ul li > .nav_parent_:hover,
#lcz_nav_list_ nav ul li > .nav_parent_:hover span,
#lcz_nav_list_ nav ul li.is_open_ > .nav_parent_,
#lcz_nav_list_ nav ul li.is_open_ > .nav_parent_ span {
	color: var(--lcz-nav-accent);
}

/* ----------------------------------------------------------
   4. カレント表示
   色だけに依存させず下線を併用する
   （WCAG 1.4.1「色の使用」への対応）
   ---------------------------------------------------------- */
#lcz_nav_list_ nav ul li.is_current_ > a,
#lcz_nav_list_ nav ul li.is_current_ > a span {
	color: var(--lcz-nav-text);
	font-weight: 700;
}
#lcz_nav_list_ nav ul li.is_current_ > a {
	position: relative;
}
#lcz_nav_list_ nav ul li.is_current_ > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--lcz-nav-accent);
}

#lcz_sp_nav_ nav ul li.is_current_ > a,
#lcz_sp_nav_ nav ul li.is_current_ > a span {
	color: var(--lcz-nav-text);
	font-weight: 700;
}

/* ----------------------------------------------------------
   5. ドロップダウンパネル
   ---------------------------------------------------------- */
#lcz_nav_list_ nav ul li.has_child_ {
	position: relative;
}

#lcz_nav_list_ .nav_child_ {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 100;

	/* ★親とパネルの間にホバーが切れる隙間を作らないための余白
	   （見た目の余白はここで確保し、要素としては連続させる） */
	padding-top: 14px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, -6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

#lcz_nav_list_ nav ul li.is_open_ > .nav_child_ {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

#lcz_nav_list_ .nav_child_ > ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	min-width: 200px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04);
	display: block;
}

#lcz_nav_list_ .nav_child_ > ul > li {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

#lcz_nav_list_ .nav_child_ > ul > li > a,
#lcz_nav_list_ .nav_child_ > ul > li > a span {
	color: var(--lcz-nav-text);
}

#lcz_nav_list_ .nav_child_ > ul > li > a {
	display: block;
	padding: 11px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease;
}

/* パネル内は文字色を変えず背景で反応させる
   （文字色を薄い水色にすると背景とのコントラストが不足するため） */
#lcz_nav_list_ .nav_child_ > ul > li > a:hover,
#lcz_nav_list_ .nav_child_ > ul > li > a:focus-visible {
	background: var(--lcz-nav-hover-bg);
}

/* ----------------------------------------------------------
   6. フォーカス可視化（キーボード操作時のみ）
   ---------------------------------------------------------- */
#lcz_nav_list_ a:focus-visible,
#lcz_nav_list_ .nav_parent_:focus-visible,
#lcz_sp_nav_ a:focus-visible,
#lcz_sp_nav_ .sp_nav_parent_:focus-visible {
	outline: 2px solid var(--lcz-nav-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ----------------------------------------------------------
   7. モバイルドロワー：アコーディオン
   ---------------------------------------------------------- */
#lcz_sp_nav_ nav ul li .sp_nav_parent_ {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	width: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
}

/* 親項目の ▸ アイコンを開閉に合わせて回転させる */
#lcz_sp_nav_ nav ul li .sp_nav_parent_ .ew_icon {
	transition: transform .2s ease;
}
#lcz_sp_nav_ nav ul li.is_open_ .sp_nav_parent_ .ew_icon {
	transform: rotate(90deg);
}

#lcz_sp_nav_ .sp_nav_child_ {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height .28s ease;
}
#lcz_sp_nav_ nav ul li.is_open_ > .sp_nav_child_ {
	max-height: 320px;
}

#lcz_sp_nav_ .sp_nav_child_ > li > a {
	display: block;
	padding: 12px 0 12px 28px;
	font-size: 15px;
}
#lcz_sp_nav_ .sp_nav_child_ > li > a span {
	color: var(--lcz-nav-text);
}

/* ----------------------------------------------------------
   8. モバイルドロワー：下部固定CTA
   ---------------------------------------------------------- */
#lcz_sp_nav_cta_ {
	margin-top: 32px;
	padding: 0 20px calc(24px + env(safe-area-inset-bottom));
}
#lcz_sp_nav_cta_ a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	background: var(--lcz-nav-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 8px;
	text-decoration: none;
}

/* ----------------------------------------------------------
   9. モーション設定への配慮
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#lcz_nav_list_ .nav_child_,
	#lcz_nav_list_ .nav_parent_::after,
	#lcz_sp_nav_ .sp_nav_child_,
	#lcz_sp_nav_ .sp_nav_parent_ .ew_icon {
		transition: none;
	}
}