/*
 * 制作体制ページ専用スタイル。
 * 役割カードを主役にし、誰が何を担当し、どう制作全体をつなぐかを簡潔に見せる。
 * 文字サイズ・見出し階層は typography.css の共通ルールを使う。
 */

.p-team-hero .p-page-hero__inner {
	max-width: 900px;
}

.p-team-roles__intro {
	max-width: 840px;
	margin: 0 auto 48px;
	text-align: center;
}

.p-team-roles__intro .c-section-title {
	max-width: 760px;
	margin-right: auto;
	margin-bottom: 22px;
	margin-left: auto;
}

.p-team-roles__intro > p:not(.c-eyebrow) {
	max-width: 760px;
	margin: 0 auto;
	color: var(--color-text);
}

.p-team-roles__intro > p:not(.c-eyebrow) + p {
	margin-top: 10px;
}

.p-team-roles__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.p-team-role-card {
	min-width: 0;
	overflow: hidden;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.p-team-role-card__visual {
	aspect-ratio: 1.42 / 1;
	overflow: hidden;
	background: var(--color-background-subtle);
	border-bottom: 1px solid var(--color-border);
}

.p-team-role-card__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-team-role-card__body {
	padding: 22px 18px 24px;
}

.p-team-role-card h3 {
	margin: 0;
}

.p-team-role-card__lead {
	min-height: 4.9em;
	margin: 8px 0 0;
	color: var(--color-text);
}

.p-team-role-card__label {
	padding-top: 17px;
	margin: 18px 0 0;
	color: var(--color-heading);
	border-top: 1px solid var(--color-border);
}

.p-team-role-card ul {
	padding: 8px 0 0;
	margin: 0;
	list-style: none;
}

.p-team-role-card li {
	position: relative;
	padding: 5px 0 5px 14px;
	color: var(--color-text);
}

.p-team-role-card li::before {
	position: absolute;
	top: 0.92em;
	left: 1px;
	width: 4px;
	height: 4px;
	content: "";
	background: var(--color-primary);
	border-radius: 50%;
}

.p-team-owner__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
	align-items: center;
	gap: 80px;
}

.p-team-owner__copy .c-section-title {
	max-width: 640px;
	margin-bottom: 22px;
}

.p-team-owner__copy > p:not(.c-eyebrow) {
	max-width: 650px;
	margin: 0;
	color: var(--color-text);
}

.p-team-owner__copy > p:not(.c-eyebrow) + p {
	margin-top: 14px;
}

.p-team-owner__media {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

.p-team-owner__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.p-team-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
	align-items: center;
	gap: 80px;
}

.p-team-contact__media {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

.p-team-contact__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.p-team-contact__copy .c-section-title {
	margin-bottom: 22px;
}

.p-team-contact__copy > p:not(.c-eyebrow) {
	margin: 0;
	color: var(--color-text);
}

.p-team-contact__copy > p:not(.c-eyebrow) + p {
	margin-top: 14px;
}

@media (max-width: 1120px) {
	.p-team-roles__intro {
		max-width: 760px;
		margin-bottom: 40px;
	}

	.p-team-roles__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.p-team-role-card__visual {
		aspect-ratio: 1.7 / 1;
	}

	.p-team-role-card__lead {
		min-height: 0;
	}
}

@media (max-width: 960px) {
	.p-team-owner__layout,
	.p-team-contact__layout {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.p-team-owner__media,
	.p-team-contact__media {
		max-width: 760px;
	}
}

@media (max-width: 768px) {
	/*
	 * スマホではコピーラッパーだけをレイアウト上ほどき、
	 * 小見出し → 見出し → 画像 → 本文の順に読む流れへ揃える。
	 */
	.p-team-owner__layout,
	.p-team-contact__layout {
		gap: 0;
	}

	.p-team-owner__copy,
	.p-team-contact__copy {
		display: contents;
	}

	.p-team-owner__copy .c-eyebrow,
	.p-team-contact__copy .c-eyebrow {
		order: 1;
	}

	.p-team-owner__copy .c-section-title,
	.p-team-contact__copy .c-section-title {
		order: 2;
		margin-bottom: 0;
	}

	.p-team-owner__media,
	.p-team-contact__media {
		order: 3;
		width: 100%;
		margin-top: 24px;
	}

	.p-team-owner__copy > p:not(.c-eyebrow),
	.p-team-contact__copy > p:not(.c-eyebrow) {
		order: 4;
	}

	.p-team-owner__copy .c-section-title + p,
	.p-team-contact__copy .c-section-title + p {
		margin-top: 24px;
	}

	.p-team-owner__copy > .u-center {
		order: 5;
	}
}

@media (max-width: 680px) {
	.p-team-roles__intro {
		margin-bottom: 32px;
	}

	.p-team-roles__cards {
		grid-template-columns: 1fr;
	}

	.p-team-role-card__visual {
		aspect-ratio: 1.85 / 1;
	}

	.p-team-role-card__body {
		padding: 20px;
	}

	.p-team-owner__media img,
	.p-team-contact__media img {
		aspect-ratio: 4 / 3;
	}
}