@charset "utf-8";

/* ==========================================
関連法人：外枠・内枠
幅とセクション余白は共通レイアウトの変数で調整。
========================================== */

.p-partner__intro {
	--content-width: 132rem;
	--content-gutter: 4.8rem;
	--content-padding: 0rem;
	--section-space-top: 13rem;
	--section-space-bottom: 0rem;
	text-align: center;
}

.p-partner__group {
	--content-width: 132rem;
	--content-gutter: 4.8rem;
	--content-padding: 0rem;
	--section-space-top: 15rem;
}

/* ==========================================
関連法人：導入文・関連法人図
図版内の文字とロゴは添付PNGに含まれるため再作成しない。
========================================== */

.p-partner__intro-text {
	margin-top: 3.2rem;
	text-wrap: pretty;
}

.p-partner__intro h2 {
	text-wrap: balance;
}

.p-partner__intro h2 br {
	display: none;
}

.p-partner__diagram {
	width: 81.1rem;
	max-width: 100%;
	margin: 4.6rem auto 0;
}

.p-partner__diagram img {
	display: block;
	width: 100%;
}

/* ==========================================
関連法人：OUR GROUP 見出し
========================================== */

.p-partner__heading {
	text-align: center;
}

.p-partner__heading h2 {
	margin-top: 0.8rem;
}

.p-partner__list {
	margin-top: 1rem;
}

/* ==========================================
関連法人：法人紹介（4法人共通のページ内構造）
標準グループブロックをGridで配置し、編集時の構造を簡潔に保つ。
========================================== */

.p-partner__item {
	display: grid;
	grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
	align-items: start;
	gap: 5rem;
	padding: 8rem 0 8rem 5rem;
	scroll-margin-top: 4rem;
}

.p-partner__item + .p-partner__item {
	border-top: 0.1rem solid var(--ui-border-color);
}

.p-partner__body {
	width: 500px;
	max-width: 100%;
	min-width: 0;
}

.p-partner__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38rem;
	max-width: 100%;
	aspect-ratio: 380 / 110;
	overflow: hidden;
	padding: 1.8rem 3rem;
	border: 0.1rem solid var(--ui-border-color);
}

.p-partner__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.p-partner__name {
	margin-top: 3rem;
}

.p-partner__information {
	margin-top: 2.6rem;
	line-height: 1.5em;
}

.p-partner__information-row {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: start;
}

.p-partner__information-row + .p-partner__information-row {
	margin-top: 1rem;
}

.p-partner__information-row > p {
	margin: 0;
	line-height: 1.5em;
}

.p-partner__information-label {
	white-space: nowrap;
}

.p-partner__information-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.p-partner__url a {
	text-decoration: none;
	overflow-wrap: anywhere;
}

.p-partner__url a:hover {
	text-decoration: underline;
}

.p-partner__image img {
	aspect-ratio: 1500 / 862;
	object-fit: cover;
}

.p-partner__buttons {
	margin-top: 2.6rem;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
関連法人：レスポンシブ（1024px以下）
========================================== */

@media screen and (width <= 1024px) {
	.p-partner__intro {
		--section-space-top: 8rem;
	}

	.p-partner__group {
		--section-space-top: 9rem;
		--section-space-bottom: 9rem;
	}

	.p-partner__diagram {
		width: 65rem;
	}

	.p-partner__item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
		padding: 6rem 0;
	}

	.p-partner__logo {
		width: 34rem;
		padding-inline: 2rem;
	}
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
関連法人：レスポンシブ（768px以下）
スマホでは紹介写真、ロゴ・法人名・本文の順に統一。
========================================== */

@media screen and (width <= 768px) {
	.p-partner__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	.p-partner__image {
		grid-row: 1;
	}

	.p-partner__logo {
		width: 38rem;
	}
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ==========================================
関連法人：レスポンシブ（576px以下）
本文は共通c-textの文字サイズ・行間を流用。
========================================== */

@media screen and (width <= 576px) {
	.p-partner__intro {
		--content-gutter: 3.2rem;
		--section-space-top: 6rem;
	}

	.p-partner__group {
		--content-gutter: 3.2rem;
		--section-space-top: 6rem;
		--section-space-bottom: 6rem;
	}

	.p-partner__intro-text {
		margin-top: 2.4rem;
	}

	.p-partner__intro h2 br {
		display: initial;
	}

	.p-partner__diagram {
		margin-top: 3rem;
	}

	.p-partner__item {
		gap: 2.6rem;
		padding-block: 4.5rem;
	}

	.p-partner__logo {
		width: 100%;
		max-width: 38rem;
		padding: 1.6rem 2rem;
	}

	.p-partner__name {
		margin-top: 2.4rem;
	}

	.p-partner__information {
		margin-top: 2rem;
	}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */