@charset "UTF-8";
/**
 * 募集要項(Requirement)ページ固有スタイル。
 *
 * 中途/新卒の切替タブ(CSSのみ) → 中途:職種カード / 新卒:マイナビ導線。
 * 共通トークン・ヘッダー・フッター・見出しはcommon.css。
 * 設計はFigma:PC 1440 / SP 390。
 */

/**
 * ページ全体をPCでは固定rem化(タブ・パネル・カード・注記・マイナビ)。
 * タブ(2枚×458)は狭幅でflex-shrinkにより縮んで収まるためvwは使わない。
 * SPは@media内でvwへ復帰する。
 */
.requirement {
	--u: var(--u-fix);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-bottom: calc(151 * var(--u));
}

/**
 * 切替タブ(中途採用:黒 / 新卒採用:淡灰)。
 * フォルダタブ状に上端を丸め、アクティブ側を前面かつ高くする。
 * 切替はラジオ(:checked)で行いJSを使わない。
 */
.req-tabs {
	/* 設計は区切り線(y=353)からタブ上端(y=433)まで80。共通見出しの::after(1px)の
	   下端が353.99に来るため、その箱を基準にすると79で設計のy=433に一致する。 */
	margin-top: calc(79 * var(--u));
	/* 狭幅で画面端に張り付かないよう左右にガターを確保する。全ブリードの下線
	   (::after)はviewport基準のため影響しない。SPは@media内で0へ。 */
	padding-inline: clamp(2.5rem, 5%, 6rem);
}

.req-tabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.req-tabs__bar {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc(20 * var(--u));
	min-height: calc(120 * var(--u));
}

.req-tabs__bar::after {
	content: "";
	position: absolute;
	z-index: 4;
	left: calc(50% - 50vw);
	bottom: 0;
	width: 100vw;
	height: 1px;
	background: var(--c-black);
}

/**
 * 設計は英字/和文の行ボックスを8.5px空けて、タブ内で上下中央に置く
 * (アクティブ120・非アクティブ105とも中央から±0.25px)。
 */
.req-tab {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(8.5 * var(--u));
	width: calc(458 * var(--u));
	height: calc(105 * var(--u));
	border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0;
	cursor: pointer;
	/* せり上がりの参照: addix.co.jp のタブ挙動。 */
	transition: height 0.3s ease-out;
}

.req-tab--career {
	background: var(--c-black);
	color: #4c4948;
}

.req-tab--newgrad {
	background: #f0f0f0;
	color: #ccc;
}

/**
 * 設計の行間はAUTO(=フォント固有の既定行間)。normalがその正確な対応で、
 * Gotham 18px→21.5 / Noto 34px→49.5 と設計の実測に一致する。
 */
.req-tab__en {
	font-family: "Gotham", var(--ff-mont);
	font-weight: 350;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: normal;
	transition: color 0.3s ease-out;
}

.req-tab__ja {
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(34 * var(--u)));
	line-height: normal;
	transition: color 0.3s ease-out;
}

/**
 * アクティブ(チェック済み)とホバーは同一の見た目のため、セレクタを併記する。
 * ホバー(参照: addix.co.jp/business/solution/ のタブ挙動)は非アクティブタブを
 * アクティブと同じ見た目(背が伸びてせり上がり+文字色反転)へ変化させる。
 * ホバー結果=アクティブ表示のため、タップで残る:hoverもcheck後の
 * 表示と一致し、SPでも破綻しない。
 */
#req-tab-career:checked ~ .req-tabs__bar .req-tab--career,
#req-tab-newgrad:checked ~ .req-tabs__bar .req-tab--newgrad,
.req-tab:hover {
	z-index: 2;
	height: calc(120 * var(--u));
}

#req-tab-career:checked ~ .req-tabs__bar .req-tab--career .req-tab__ja,
.req-tab--career:hover .req-tab__ja {
	color: var(--c-white);
}

#req-tab-career:checked ~ .req-tabs__bar .req-tab--career .req-tab__en,
.req-tab--career:hover .req-tab__en {
	color: #ccc;
}

#req-tab-newgrad:checked ~ .req-tabs__bar .req-tab--newgrad .req-tab__ja,
#req-tab-newgrad:checked ~ .req-tabs__bar .req-tab--newgrad .req-tab__en,
.req-tab--newgrad:hover .req-tab__ja,
.req-tab--newgrad:hover .req-tab__en {
	color: #221814;
}

#req-tab-career:focus-visible ~ .req-tabs__bar .req-tab--career,
#req-tab-newgrad:focus-visible ~ .req-tabs__bar .req-tab--newgrad {
	outline: 2px solid var(--c-sub);
	outline-offset: 2px;
}

/**
 * パネル(タブ本文)。選択中のラジオに対応する1枚だけを表示する。
 */
.req-panel {
	display: none;
	margin-top: calc(80 * var(--u));
}

#req-tab-career:checked ~ .req-panel--career,
#req-tab-newgrad:checked ~ .req-panel--newgrad {
	display: block;
}

/**
 * 中途採用:職種カード(PC 3列 / SP 1列)。
 * PCは3枚を等高(300)。カード上部に見出しと区切り線、下に職種リンク。
 * .requirementの固定rem(--u)を継承し、auto-fitで幅に応じ3→2列へ段減する。
 * カード幅は設計286pxのまま伸ばさず中央寄せ、折返し時の縦間隔はrow-gap。
 */
.req-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, calc(286 * var(--u)));
	justify-content: center;
	column-gap: calc(40 * var(--u));
	row-gap: calc(40 * var(--u));
}

/**
 * 設計の枠は286×300・角丸20・線1pxがstrokeAlign:INSIDE(=CSSのborder-boxと同義)。
 * よって子の位置は設計の枠上端から線1px分内側で引く。
 */
.req-card {
	display: flex;
	flex-direction: column;
	min-height: calc(300 * var(--u));
	border: 1px solid var(--c-black);
	border-radius: calc(20 * var(--u));
}

.req-card__title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100 * var(--u));
	flex-shrink: 0;
	/* 設計の行ボックスは枠中央より7px下(=padding-topの半分)にある。 */
	padding-top: calc(14 * var(--u));
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

.req-card__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: calc(216 * var(--u));
	height: 1px;
	background: var(--c-black);
}

.req-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	/* 上下paddingは設計の区切り線(=タイトル枠の下端)と職種行/カード下端の距離。
	   職種3行のカード300・空カード208のどちらも、この値で設計の高さに一致する。 */
	padding: calc(30 * var(--u)) 0 calc(44 * var(--u));
}

.req-jobs {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 設計の職種行は46px間隔。行ボックス32のため gap は14。 */
	gap: calc(14 * var(--u));
}

.req-jobs li {
	/* inline-flexのリンクをベースライン上に置かず、li高さを行ボックス32へ一致させる。 */
	display: flex;
}

.req-job {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

.req-job__arrow {
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
	filter: brightness(0);
}

.req-empty {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

/**
 * 新卒採用:マイナビ導線ボタン(スタジアム型)。
 */
.req-panel--newgrad {
	text-align: center;
}

.req-mynavi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--u));
	width: calc(345 * var(--u));
	height: calc(51 * var(--u));
	border-radius: calc(25.5 * var(--u));
	background: var(--c-black);
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(20 * var(--u)));
	line-height: 1.6;
	/* ベースライン揃えをやめ、パネル高さをボタン高さ(51)に一致させる。 */
	vertical-align: top;
	color: var(--c-white);
}

.req-mynavi__arrow {
	width: calc(19 * var(--u));
	height: calc(19 * var(--u));
	filter: brightness(0) invert(1);
}

/**
 * 外部遷移の注記(両タブ共通)。
 */
.req-note {
	/* 設計はカード下端(933→972.5)・ボタン下端(684.15→723.65)とも39.5。 */
	margin: calc(39.5 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(15 * var(--u)));
	line-height: 1.6;
	text-align: center;
}

/**
 * SP(Figma:390基準・--uは純vw)。
 * タブは幅を詰め、カードは1列。カード高さは設計値(空:207 / 職種あり:299)。
 */
@media (max-width: 768px) {
	.requirement {
		/* SPはページ全体をvwスケールへ復帰。子孫が継承する。 */
		--u: var(--u-sp);
		padding-bottom: calc(125 * var(--u));
	}

	.req-tabs {
		margin-top: calc(29 * var(--u));
		/* SPは既存デザイン維持(ガター無し)。 */
		padding-inline: 0;
	}

	.req-tabs__bar {
		gap: calc(5 * var(--u));
		min-height: calc(76 * var(--u));
	}

	/**
	 * SPは設計が状態ごとに手作業でズレており(英字→和文の行ボックス間隔が
	 * アクティブ12.92/非アクティブ10.83、上下中央でもない)、単一の規則では
	 * 同時に一致させられない。gap0+padding-top4が4箇所の誤差を最小化する(最大1.4px)。
	 */
	.req-tab {
		gap: 0;
		width: calc(178 * var(--u));
		height: calc(65 * var(--u));
		padding-top: calc(4 * var(--u));
		border-radius: calc(15 * var(--u)) calc(15 * var(--u)) 0 0;
	}

	.req-tab__en {
		font-family: var(--ff-mont);
		font-weight: 600;
		/* 例外:他は下限1.2rem。SPタブ英字は設計10pxのため潰さないよう下限1.0rem。 */
		font-size: max(1.0rem, calc(10 * var(--u)));
	}

	.req-tab__ja {
		font-size: max(1.2rem, calc(20 * var(--u)));
		/* PCはAUTO(normal)だがSPは160%。分岐が要る。 */
		line-height: 1.6;
	}

	/**
	 * SPのアクティブ/ホバー時のタブ高さは76(PC値120を上書き)。文字色反転は基底の規則が効く。
	 */
	#req-tab-career:checked ~ .req-tabs__bar .req-tab--career,
	#req-tab-newgrad:checked ~ .req-tabs__bar .req-tab--newgrad,
	.req-tab:hover {
		height: calc(76 * var(--u));
	}

	#req-tab-career:checked ~ .req-tabs__bar .req-tab--career .req-tab__en,
	#req-tab-newgrad:checked ~ .req-tabs__bar .req-tab--newgrad .req-tab__en,
	.req-tab--career:hover .req-tab__en,
	.req-tab--newgrad:hover .req-tab__en {
		font-weight: 500;
	}

	.req-panel {
		margin-top: calc(40 * var(--u));
	}

	.req-cards {
		/* 幅は.requirementのSP vw(--u)を継承した設計286px。 */
		grid-template-columns: calc(286 * var(--u));
		row-gap: calc(40 * var(--u));
	}

	.req-card {
		min-height: calc(208 * var(--u));
	}

	.req-card--open {
		min-height: calc(300 * var(--u));
	}

	/**
	 * 設計はPCが600/20px/160%・字間0、SPが500/16px/200%・字間2%。
	 */
	.req-mynavi {
		width: calc(340 * var(--u));
		font-weight: 500;
		font-size: max(1.2rem, calc(16 * var(--u)));
		line-height: 2;
		letter-spacing: 0.02em;
	}

	.req-mynavi__arrow {
		width: calc(16 * var(--u));
		height: calc(16 * var(--u));
	}

	.req-note {
		margin-top: calc(50 * var(--u));
	}

	#req-tab-newgrad:checked ~ .req-note {
		margin-top: calc(29.5 * var(--u));
	}
}