/* --------------------------------------------------------------------------
 * トップのヒーロー — 2カラム分割（Wellfound 型の構成）
 *
 * 構成だけ Wellfound から採り、色・寸法は求人一覧 /jobs/ のトークンを使う。
 * 白地・濃紺の見出し・主ボタンは濃紺塗り、オレンジは識別にだけ使う。
 * グラデーションと装飾は置かない。
 * ----------------------------------------------------------------------- */
.qp-hs {
	background: var(--qp-bg, #FFFFFF);
	padding-block: clamp(40px, 6vw, 76px);
	border-bottom: 1px solid var(--qp-border, #E5E5E5);
}

.qp-hs__inner {
	max-width: var(--qp-maxw, 1160px);
	margin: 0 auto;
	padding-inline: var(--qp-gutter, 24px);
}

/* ---- 見出しと入口 ---- */
.qp-hs__head {
	max-width: 760px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

/*
 * 和文は語の区切りが無いため、幅任せにすると語の途中で折れる。
 * 意味のまとまりを span で包み、その単位で折る（求人一覧と同じ方式）。
 */
.qp-hs__nb {
	display: inline-block;
	word-break: normal;
	overflow-wrap: anywhere;
	max-width: 100%;
}

.qp-hs__title {
	margin: 0 0 16px;
	/* 下限は 320px でも意味の切れ目だけで折れる大きさに合わせてある。 */
	font-size: clamp(1.625rem, 4.6vw, 3rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.025em;
	color: var(--qp-ink-1, #1E293B);
}

.qp-hs__lead {
	margin: 0 0 28px;
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	line-height: 1.9;
	color: var(--qp-ink-2, #525252);
}

.qp-hs__search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 620px;
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--qp-border-strong, #D4D4D4);
	border-radius: 999px;
	background: var(--qp-bg, #FFFFFF);
}

.qp-hs__search:focus-within {
	border-color: var(--qp-ink-1, #1E293B);
}

.qp-hs__search-icon {
	flex-shrink: 0;
	color: var(--qp-ink-3, #737373);
}

.qp-hs__search-input {
	flex: 1;
	min-width: 0;
	/* 44px のタップ領域を入力欄自身で確保する。 */
	min-height: 44px;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
	color: var(--qp-ink-1, #1E293B);
	/* iOS で 16px 未満の入力欄はフォーカス時に画面を拡大するため、狭い画面では 16px にする。 */
}

.qp-hs__search-input::placeholder {
	color: var(--qp-ink-3, #737373);
}

.qp-hs__search-input:focus {
	outline: none;
}

.qp-hs__search-btn {
	flex-shrink: 0;
	min-height: 44px;
	padding-inline: 22px;
	border: 0;
	border-radius: 999px;
	background: var(--qp-ink-1, #1E293B);
	color: #FFFFFF;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.qp-hs__search-btn:hover {
	background: #334155;
}

.qp-hs__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.qp-hs__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 44px のタップ領域。見た目は小さくても触れる面は確保する。 */
	min-height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--qp-border, #E5E5E5);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--qp-ink-2, #525252);
	text-decoration: none;
	white-space: nowrap;
}

.qp-hs__chip:hover {
	border-color: var(--qp-ink-4, #A3A3A3);
	background: var(--qp-hover, #F5F5F5);
	color: var(--qp-ink-1, #1E293B);
}

.qp-hs__chip-n {
	font-weight: 700;
	color: var(--qp-ink-3, #737373);
	font-variant-numeric: tabular-nums;
}

/* ---- 2カラム ---- */
.qp-hs__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 28px);
}

.qp-hs__col {
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--qp-border, #E5E5E5);
	border-radius: 14px;
	background: var(--qp-bg, #FFFFFF);
}

.qp-hs__eyebrow {
	margin: 0 0 8px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--qp-accent-ink, #C2410E);
}

.qp-hs__col-title {
	margin: 0 0 14px;
	font-size: clamp(1.0625rem, 2vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.55;
	color: var(--qp-ink-1, #1E293B);
	word-break: normal;
	overflow-wrap: anywhere;
}

.qp-hs__col-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--qp-ink-1, #1E293B);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.qp-hs__col-link:hover {
	color: var(--qp-accent-ink, #C2410E);
}

/* ---- 実物カード ---- */
.qp-hs__cards {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--qp-border, #E5E5E5);
}

.qp-hs__card a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 0;
	border-bottom: 1px solid var(--qp-border, #E5E5E5);
	text-decoration: none;
	color: inherit;
}

.qp-hs__card a:hover .qp-hs__card-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.qp-hs__card-meta {
	font-size: 0.75rem;
	color: var(--qp-ink-3, #737373);
	font-variant-numeric: tabular-nums;
}

.qp-hs__card-sep {
	margin-inline: 6px;
	/* 隣の文字と同じ濃さにする。--qp-ink-4 は白地で 2.5:1 しか出ない。 */
	color: var(--qp-ink-3, #737373);
}

.qp-hs__card-title {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--qp-ink-1, #1E293B);
	word-break: normal;
	overflow-wrap: anywhere;
	/* 2行で打ち切る。3行目が出ると2枚のカードの高さが揃わない。 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- 数字の帯 ---- */
.qp-hs__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px clamp(24px, 4vw, 48px);
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--qp-border, #E5E5E5);
}

.qp-hs__stats div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qp-hs__stats dt {
	font-size: 0.75rem;
	color: var(--qp-ink-3, #737373);
}

.qp-hs__stats dd {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--qp-ink-1, #1E293B);
	font-variant-numeric: tabular-nums;
}

.qp-hs__source {
	margin: 14px 0 0;
	font-size: 0.75rem;
	line-height: 1.8;
	color: var(--qp-ink-3, #737373);
}

@media (max-width: 720px) {
	.qp-hs__split {
		grid-template-columns: 1fr;
	}

	.qp-hs__search {
		padding-left: 12px;
	}

	/* iOS はフォーカス時に 16px 未満の入力欄で画面を拡大する。 */
	.qp-hs__search-input {
		font-size: 1rem;
	}

	.qp-hs__search-btn {
		padding-inline: 16px;
	}
}