/* --------------------------------------------------------------------------
 * ハブ内ナビ — 親の面から子への導線（/media/ と /agent-service/ で共用）
 *
 * 配色は求人一覧 /jobs/ に揃える。白地・濃紺の文字・1pxの罫で、
 * 主張しすぎずに「この下に何があるか」だけを示す。
 * ----------------------------------------------------------------------- */
.qp-hubnav {
	background: var(--qp-bg, #FFFFFF);
	border-block: 1px solid var(--qp-border, #E5E5E5);
}

.qp-hubnav__inner {
	max-width: var(--qp-maxw, 1160px);
	margin: 0 auto;
	padding-block: 14px;
	padding-inline: var(--qp-gutter, 24px);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.qp-hubnav__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--qp-ink-3, #737373);
	white-space: nowrap;
}

.qp-hubnav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	min-width: 0;
}

.qp-hubnav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 44px のタップ領域。行間ではなく内側余白で確保する。 */
	min-height: 44px;
	padding-inline: 12px;
	border-radius: 8px;
	color: var(--qp-ink-1, #1E293B);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	/* 和文はどこでも折れてよいが、意味の切れ目を優先する。 */
	word-break: normal;
	overflow-wrap: anywhere;
}

.qp-hubnav__link:hover {
	background: var(--qp-hover, #F5F5F5);
	color: var(--qp-ink-1, #1E293B);
}

.qp-hubnav__link-note {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--qp-ink-3, #737373);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.qp-hubnav__inner {
		/* 狭い画面では見出しを1行目に置き、リンクを下へ回す。 */
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.qp-hubnav__link {
		padding-inline: 8px;
	}
}