/* ==========================================================================
   求人ページ専用スタイル — プロの副業 本体サイト準拠
   すべて .pj 配下にスコープ。SWELLの既存スタイルとは干渉しない。
   ========================================================================== */

/* 色・寸法は style.css の :root で定義。
   ここでは参照のみ（var() のフォールバックで単体でも動く）。 */

.pj {
	max-width: var(--pj-maxw, 1080px);
	margin: 0 auto;
	padding: 2.5rem 1.25rem 4rem;
	color: var(--pj-ink, #14140f);
	line-height: 1.9;
	font-size: 1rem;
}
.pj *, .pj *::before, .pj *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   見出し: 日本語 + 英字ラベル（本体サイトの NEW ARRIVAL / FEATURE と同じ型）
   -------------------------------------------------------------------------- */
.pj-en {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--pj-accent, #00a383);
	margin-bottom: .3rem;
}

.pj-head { margin-bottom: 2.25rem; }
.pj-head__title {
	font-size: 2rem; font-weight: 900; line-height: 1.35;
	margin: 0 0 .6rem; letter-spacing: .01em;
}
.pj-head__count { font-size: .875rem; color: var(--pj-ink-2, #4a4a45); margin: 0; }
.pj-head__count strong {
	font-size: 1.6rem; font-weight: 900; color: var(--pj-accent, #00a383);
	margin-right: .15rem; font-feature-settings: "tnum";
}

.pj-section { margin-bottom: 2.5rem; }
.pj-section__title {
	font-size: 1.25rem; font-weight: 900; line-height: 1.5;
	margin: 0 0 1rem; padding-bottom: .6rem;
	border-bottom: 2px solid var(--pj-accent, #00a383);
}
.pj-panel__title {
	font-size: 1.1rem; font-weight: 900; margin: 0 0 1.2rem;
	padding-bottom: .5rem; border-bottom: 2px solid var(--pj-accent, #00a383);
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.pj-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .85rem 2rem; font-size: .95rem; font-weight: 700;
	border-radius: 4px; text-decoration: none; border: 2px solid transparent;
	cursor: pointer; transition: filter .15s ease, background-color .15s ease;
	line-height: 1.4;
}
.pj-btn:hover { filter: brightness(1.08); text-decoration: none; }
.pj-btn:focus-visible { outline: 3px solid var(--pj-accent, #00a383); outline-offset: 2px; }

/* 主CTA: オレンジのグラデーション + 右下の切り欠き（本体サイトの応募ボタン） */
.pj-btn--cta {
	background: linear-gradient(100deg, var(--pj-cta-from, #f7a11a) 0%, var(--pj-cta-to, #f0592b) 100%);
	color: #fff; font-weight: 900; letter-spacing: .04em;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.pj-btn--solid { background: var(--pj-accent, #00a383); color: #fff; }
.pj-btn--ghost { background: #fff; color: var(--pj-accent, #00a383); border-color: var(--pj-accent, #00a383); }
.pj-btn--lg    { padding: 1.15rem 3.5rem; font-size: 1.05rem; }
.pj-btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   絞り込み
   -------------------------------------------------------------------------- */
.pj-filter {
	background: var(--pj-bg-soft, #f5f7f6);
	border-top: 3px solid var(--pj-accent, #00a383);
	padding: 1.5rem;
	margin-bottom: 2.5rem;
}
.pj-filter__row {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem;
}
.pj-field { display: flex; flex-direction: column; gap: .35rem; }
.pj-field__label { font-size: .75rem; font-weight: 700; color: var(--pj-ink-2, #4a4a45); }
.pj-field select {
	width: 100%; padding: .6rem .7rem; font-size: .9rem;
	border: 1px solid var(--pj-line, #e4e6e5); border-radius: 4px; background: #fff; color: var(--pj-ink, #14140f);
}
.pj-filter__actions { display: flex; gap: .75rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   一覧カード
   -------------------------------------------------------------------------- */
.pj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.pj-card {
	border: 1px solid var(--pj-line, #e4e6e5); background: #fff;
	border-left: 4px solid var(--pj-accent, #00a383);
	transition: box-shadow .15s ease, transform .15s ease;
}
.pj-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.pj-card__link { display: block; padding: 1.5rem 1.6rem; text-decoration: none; color: inherit; }
.pj-card__link:hover { text-decoration: none; }
.pj-card__catch { font-size: .78rem; color: var(--pj-accent, #00a383); font-weight: 700; margin: 0 0 .35rem; }
.pj-card__title { font-size: 1.15rem; font-weight: 900; line-height: 1.6; margin: 0 0 .9rem; }
.pj-card__meta {
	font-size: .78rem; color: var(--pj-ink-2, #4a4a45); margin: .9rem 0 0;
	display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}

.pj-tag {
	display: inline-block; font-size: .72rem; font-weight: 700; padding: .18rem .7rem;
	border-radius: 2px; color: var(--pj-accent-dark, #00806a); background: var(--pj-accent-tint, #e6f6f2);
}
.pj-tag--muted { color: var(--pj-ink-2, #4a4a45); background: var(--pj-bg-soft, #f5f7f6); }

/* --------------------------------------------------------------------------
   スペック
   -------------------------------------------------------------------------- */
.pj-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.pj-spec__item { margin: 0; }
.pj-spec dt {
	font-size: .7rem; font-weight: 700; color: #fff; background: var(--pj-accent, #00a383);
	display: inline-block; padding: .1rem .55rem; border-radius: 2px; margin: 0 0 .4rem;
}
.pj-spec dd { margin: 0; font-size: .95rem; line-height: 1.7; }
.pj-spec__num { font-size: 1.2rem; font-weight: 900; font-feature-settings: "tnum"; color: var(--pj-ink, #14140f); }

.pj-spec--inline { display: flex; gap: 1.75rem; margin: 0; }
.pj-spec--inline dt {
	font-size: .68rem; background: none; color: var(--pj-ink-3, #8a8a85); padding: 0; margin: 0 0 .1rem;
}
.pj-spec--inline dd { font-size: 1.05rem; font-weight: 900; font-feature-settings: "tnum"; }

/* --------------------------------------------------------------------------
   詳細
   -------------------------------------------------------------------------- */
.pj-hero { border-bottom: 1px solid var(--pj-line, #e4e6e5); padding-bottom: 1.9rem; margin-bottom: 2.25rem; }
.pj-hero__catch { font-size: .9rem; font-weight: 700; color: var(--pj-accent, #00a383); margin: 0 0 .6rem; }
.pj-hero__title { font-size: 2.05rem; font-weight: 900; line-height: 1.45; margin: 0 0 1.1rem; }
.pj-hero__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

.pj-layout { display: grid; grid-template-columns: 1fr 290px; gap: 2.5rem; align-items: start; }
.pj-main { min-width: 0; }

.pj-panel { background: var(--pj-bg-soft, #f5f7f6); padding: 1.6rem; margin-bottom: 2.5rem; }
.pj-panel--soft { background: #fff; border: 1px solid var(--pj-line, #e4e6e5); }
.pj-note { font-size: .78rem; color: var(--pj-ink-3, #8a8a85); margin: -.7rem 0 1.1rem; }

.pj-p  { margin: 0; }
.pj-ul { margin: 0; padding: 0; list-style: none; }
.pj-ul li {
	position: relative; padding-left: 1.7em; margin-bottom: .5rem;
}
/* 本体サイトのチェックボックス型マーカー */
.pj-ul li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 1em; height: 1em;
	border: 2px solid var(--pj-accent, #00a383); border-radius: 2px;
}
.pj-ul li::after {
	content: ""; position: absolute; left: .28em; top: .72em;
	width: .42em; height: .22em;
	border-left: 2px solid var(--pj-accent, #00a383); border-bottom: 2px solid var(--pj-accent, #00a383);
	transform: rotate(-45deg);
}

/* 向いている / 向いていない の対比 */
.pj-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.pj-fit__col { padding: 1.5rem; background: var(--pj-bg-soft, #f5f7f6); }
.pj-fit__col--good { background: var(--pj-accent-tint, #e6f6f2); }
.pj-fit__col--bad  { background: #fdf5ea; }
.pj-fit .pj-section__title { font-size: 1.05rem; border-bottom-width: 2px; }
.pj-fit__col--bad .pj-section__title { border-bottom-color: var(--pj-bad, #e08a2e); }
.pj-fit__col--bad .pj-en { color: var(--pj-bad, #e08a2e); }
.pj-fit__col--bad .pj-ul li::before { border-color: var(--pj-bad, #e08a2e); }
.pj-fit__col--bad .pj-ul li::after {
	border: 0; left: .18em; top: .62em; width: .8em; height: 2px;
	background: var(--pj-bad, #e08a2e); transform: none;
}

/* エージェントの一言 */
.pj-agent { margin-bottom: 2.5rem; }
.pj-agent__quote {
	margin: 0; padding: 1.75rem 2rem;
	background: #fff; border: 2px solid var(--pj-accent, #00a383);
	font-size: .97rem; position: relative;
}
.pj-agent__quote::before {
	content: "“"; position: absolute; top: -.15em; left: .35rem;
	font-size: 3.5rem; line-height: 1; color: var(--pj-accent, #00a383); opacity: .25;
}
.pj-agent__by { text-align: right; font-size: .82rem; color: var(--pj-ink-2, #4a4a45); margin: .7rem 0 0; }
.pj-agent__by strong { color: var(--pj-ink, #14140f); }

.pj-faq p { margin: 0 0 .8rem; }

.pj-cta {
	text-align: center; background: var(--pj-bg-soft, #f5f7f6);
	padding: 2.75rem 1.5rem; margin-top: 3.5rem;
}
.pj-cta__lead { font-size: 1.05rem; font-weight: 700; margin: 0 0 1.5rem; }
.pj-cta__note { font-size: .78rem; color: var(--pj-ink-3, #8a8a85); margin: 1.1rem 0 0; }

/* サイド */
.pj-side__box {
	position: sticky; top: 100px;
	border: 1px solid var(--pj-line, #e4e6e5); border-top: 4px solid var(--pj-accent, #00a383);
	padding: 1.5rem; background: #fff;
}
.pj-side__salary { font-size: 1.3rem; font-weight: 900; margin: 0 0 .2rem; font-feature-settings: "tnum"; }
.pj-side__hours  { font-size: .85rem; color: var(--pj-ink-2, #4a4a45); margin: 0 0 1.2rem; }
.pj-side__valid  { font-size: .72rem; color: var(--pj-ink-3, #8a8a85); margin: 1rem 0 0; text-align: center; }

.pj-related { margin-top: 3.5rem; }

/* ページネーション / 空状態 */
.pj-pagination { margin-top: 2.5rem; display: flex; justify-content: center; }
.pj-pagination .page-numbers {
	display: inline-block; padding: .5rem .9rem; margin: 0 .15rem;
	border: 1px solid var(--pj-line, #e4e6e5); text-decoration: none;
	font-size: .875rem; font-weight: 700; color: var(--pj-ink-2, #4a4a45);
}
.pj-pagination .page-numbers.current {
	background: var(--pj-accent, #00a383); color: #fff; border-color: var(--pj-accent, #00a383);
}

.pj-empty { text-align: center; padding: 4rem 1rem; background: var(--pj-bg-soft, #f5f7f6); }
.pj-empty__lead { font-size: 1.1rem; font-weight: 900; margin: 0 0 .5rem; }
.pj-empty p { color: var(--pj-ink-2, #4a4a45); font-size: .9rem; margin: 0 0 1.5rem; }

/* モバイル固定CTA */
.pj-sticky { display: none; }

@media (max-width: 900px) {
	.pj-layout { grid-template-columns: 1fr; gap: 0; }
	.pj-side { display: none; }
	.pj-fit { grid-template-columns: 1fr; }
	.pj-hero__title { font-size: 1.5rem; }
	.pj-head__title { font-size: 1.5rem; }
	.pj { padding: 1.75rem 1rem 6rem; }
	.pj-spec--inline { gap: 1.25rem; }

	.pj-sticky {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
		padding: .75rem 1rem; background: #fff;
		border-top: 1px solid var(--pj-line, #e4e6e5);
		box-shadow: 0 -2px 12px rgba(0,0,0,.08);
	}
	.pj-sticky__salary { font-size: .92rem; font-weight: 900; font-feature-settings: "tnum"; }
	.pj-sticky .pj-btn { padding: .75rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pj-card, .pj-btn { transition: none; }
	.pj-card:hover { transform: none; }
}