@charset "UTF-8";
/**
 * 人を知る(Person)ページ固有スタイル。
 * Interview(人物カード)/ X Talk(プロジェクトカード)/ 採用TOPへ戻る。
 * 共通トークン・ヘッダー・フッター・見出しはcommon.css。
 * 設計はFigmaのPC 1440 / SP 390基準。
 */

/**
 * ページ全体。PCでは固定rem化(--u=1px相当)し、子セクション(interview/xtalk/
 * person-back等)がこの--uを継承する。共通見出し(page/section-heading)は自前の--uを持つ。
 * SPは@media内でvwへ復帰。
 */
.person {
	--u: var(--u-fix);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-bottom: calc(150 * var(--u));
}

/**
 * Interview(人物カード:PC 4列 / SP 2列)。
 * メディア枠は縦カプセル(角丸=幅の半分)で、カード動画(ACF card_video)が入る。
 */
.interview {
	margin-top: calc(149 * var(--u));
}

/**
 * 設計のカードは242幅・列間50・左右ガター161(1440で4列=242*4+50*3+161*2)。
 * 写真185はカード中央に置かれ、職種名/説明文がカード幅いっぱい(242)を使う。
 * カードは縮めず242固定のまま列数だけ落とす(4→3→2→1)。列を縮めると
 * 説明文(実幅228.5)が3行→4行に崩れるため、幅追従にはできない。
 * 左右位置はjustify-content:centerに任せる=1440で自動的に設計の161になり(1440-25*2-1118)/2+25、
 * 狭幅ではガター2.5remまで詰めてから段減するので4列が1168まで保たれる。
 * auto-fitではなくauto-fill。auto-fitはアイテムが1つも置かれない列を潰し両側のgapも消すため、
 * 記事数が収まる列数より少ないとき(例: 4列に3枚)その枚数ぶんが中央へ寄り、
 * 先頭カードが設計の1列目に載らない。
 */
.person-grid {
	margin-top: calc(97.2 * var(--u));
	padding-inline: 2.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, calc(242 * var(--u)));
	justify-content: center;
	column-gap: calc(50 * var(--u));
	row-gap: calc(80 * var(--u));
}

/**
 * カード全体が詳細へのリンク。縦積み・中央寄せのレイアウトはリンク側が担う。
 * カードはグリッド行の高さまで伸びるので、リンクもその高さいっぱいにして余りを見出しの下へ送る。
 */
.person-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	text-align: center;
	color: inherit;
	text-decoration: none;
}

/**
 * 写真は設計どおりカード(242)の中央に185で置く=カード幅の76.4463%。
 * カードが242固定なのでPCでは常に設計の185×290になる。
 * 縦横比は設計(185:290)を維持、角丸は幅の半分で自動カプセル化(999pxで代替)。
 */
.person-card__media {
	width: calc(185 / 242 * 100%);
	aspect-ratio: 185 / 290;
	border-radius: 999px;
	overflow: hidden;
	background: #eee;
}

.person-card__media img,
.person-card__media video,
.project-card__media img,
.project-card__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * 職種名は「領域＋職能」の切れ目でテンプレートが改行を入れる(addix_recruit_role_break)。
 * ここは自動折り返しせず、その<br>位置でだけ改行する。
 * カード幅242は「ビジネスプロデューサー」(11字)が22pxでちょうど収まる幅で、支給原稿の13字は
 * そのままでは溢れる(クリエイティブディレクター=282px)。
 * 太さ700は設計の実値(このページの職種名・プロジェクト名のみ700)。
 */
.person-card__title {
	margin: calc(31 * var(--u)) 0 0;
	max-width: 100%;
	font-family: var(--ff-jp);
	--title-fs: max(1.2rem, calc(22 * var(--u)));
	font-weight: 700;
	font-size: var(--title-fs);
	line-height: 1.5;
	/* 2行ぶんを確保する。職種名が1行のカード(AI推進)でもタグ以下が他カードと同じ高さに来る。
	   margin-bottom:autoだと余りが見出しの下に入り、逆にタグ以下が1行ぶん下がる。 */
	min-height: calc(2 * 1.5 * var(--title-fs));
	white-space: nowrap;
}

.person-card__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	gap: calc(10 * var(--u));
	margin: calc(15 * var(--u)) 0 0;
}

/**
 * 説明文はカード幅(242)いっぱい。設計の改行はテンプレート側の<br>で入る。
 */
.person-card__desc {
	max-width: 100%;
	margin: calc(15 * var(--u)) 0 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;
}

/**
 * X Talk(プロジェクトカード:PC 2列 / SP 1列)。
 * メディア枠は横カプセル(角丸=高さの半分)。テキストは左寄せ。
 */
.xtalk {
	margin-top: calc(150 * var(--u));
}

/**
 * 幅に応じ2→1列へ段減。ガター/列間は1440で設計値(189/119)になる。
 */
.project-grid {
	margin-top: calc(97.2 * var(--u));
	padding-inline: clamp(2.5rem, 13.1%, 18.9rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	column-gap: clamp(2rem, 11.2%, 11.9rem);
	row-gap: calc(80 * var(--u));
}

/**
 * カード全体が詳細へのリンク。縦積み・左寄せのレイアウトはリンク側が担う。
 */
.project-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
}

/**
 * メディアは列幅に追従。縦横比(471:300)維持、角丸は高さ半分で横カプセル(999pxで代替)。
 */
.project-card__media {
	width: 100%;
	aspect-ratio: 471 / 300;
	border-radius: 999px;
	overflow: hidden;
	background: #eee;
}

.project-card__title {
	margin: calc(31 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: 1.5;
}

.project-card__tags {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: calc(10 * var(--u)) calc(16 * var(--u));
	margin: calc(15 * var(--u)) 0 0;
}

.project-card__client {
	margin: calc(15 * var(--u)) 0 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;
}

/**
 * 採用TOPへ戻る。
 */
.person-back {
	display: flex;
	justify-content: center;
	margin-top: calc(150 * var(--u));
}

.person-back__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(275 * var(--u));
	height: calc(45 * var(--u));
	border-radius: calc(22.5 * var(--u));
	background: var(--c-black);
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--c-white);
}

/**
 * SP(Figma:390基準・--uは純vw)。
 * Interview 2列、X Talk 1列。カプセル比率とgapを設計値へ。
 */
@media (max-width: 768px) {
	.person {
		/* SPはページ全体をvwスケールへ復帰。子セクションが継承する。 */
		--u: var(--u-sp);
		padding-bottom: calc(120 * var(--u));
	}

	.interview {
		margin-top: calc(79 * var(--u));
	}

	.person-grid {
		margin-top: calc(60 * var(--u));
		padding-inline: calc(25 * var(--u));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: calc(20 * var(--u));
		row-gap: calc(40 * var(--u));
	}

	.person-card__media {
		width: calc(160 * var(--u));
		height: calc(251 * var(--u));
		border-radius: calc(80 * var(--u));
	}

	/**
	 * SPは列幅160に対し職種名が長く、設計も2行に折返す。改行位置はPCと同じくテンプレートが
	 * 入れる<br>(語の切れ目「ビジネス/プロデューサー」)なのでnowrapを解除するだけでよい。
	 * keep-all/anywhereは、職能語に一致せず<br>が入らない職種が来たときの保険。
	 * 幅で切ると長音符が孤立するため、keep-allで語中を割らせず枠外へも出さない。
	 */
	.person-card__title {
		margin-top: calc(20 * var(--u));
		--title-fs: max(1.2rem, calc(16 * var(--u)));
		line-height: 1.6;
		min-height: calc(2 * 1.6 * var(--title-fs));
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/**
	 * リード文もSPは設計が語の切れ目で改行する(文言のZWSPはpage-people.php)。
	 * 設計は x=64・幅260。共通のpadding(45/65)だと枠が230しかなく最終行の「。」が溢れるため
	 * ここで設計値へ戻す(節のpadding25 + 39 = 64 / 右は390-25-324 = 41)。
	 * 共通の.section-heading__leadは他ページも使うためpersonに限定する。
	 */
	.person .section-heading__lead {
		padding-left: calc(39 * var(--u));
		padding-right: calc(41 * var(--u));
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.person-card__tags {
		margin-top: calc(10 * var(--u));
	}

	.person-card__desc {
		/* 設計149(カード160の中央)。 */
		width: calc(149 * var(--u));
		white-space: normal;
		margin-top: calc(15 * var(--u));
		font-size: max(1.2rem, calc(14 * var(--u)));
		line-height: 1.8;
	}

	.person-card__desc br {
		display: none;
	}

	.xtalk {
		margin-top: calc(120 * var(--u));
	}

	.project-grid {
		margin-top: calc(60 * var(--u));
		padding-inline: calc(25 * var(--u));
		grid-template-columns: minmax(0, 1fr);
		row-gap: calc(60 * var(--u));
	}

	.project-card__media {
		height: calc(217 * var(--u));
		border-radius: calc(108.5 * var(--u));
	}

	.project-card__title {
		margin-top: calc(31 * var(--u));
		font-size: max(1.2rem, calc(22 * var(--u)));
		line-height: 1.5;
	}

	.project-card__tags {
		margin-top: calc(15 * var(--u));
	}

	/**
	 * X TalkのタグはSPでもPCと同じ15px・160%(枠32)。人物カードは14px・150%(枠29)。
	 */
	.project-card__tags .card-tag {
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 1.6;
	}

	.project-card__client {
		margin-top: calc(15 * var(--u));
		font-size: max(1.2rem, calc(16 * var(--u)));
	}

	.person-back {
		margin-top: calc(60 * var(--u));
	}

	.person-back__link {
		width: calc(340 * var(--u));
	}
}