@charset "UTF-8";

/* ==========================================================================
   提携サービス（page-partners.php  .p-partners）

   7ページ共通の余白・メインビジュアル・Q&A・CTA は
   css/page-support-detail.css（と、それが流用している css/page-first.css）にある。
   このファイルは、このページだけにある部分を受け持つ。

     1. 結婚のあれこれを 伴走支援できるように。
        ご指示により「初めての方へ」と同じセクションなので、ここには何も無い。
     2. 提携サービス一覧
     3. 提携サービス利用の流れ
        ご指示により「初めての方へ」の FLOW と同じ作り。ここには何も無い。
     4. 活用イメージ例

   SP ファーストで記述し、840px 以上を PC レイアウトとしています。
   画像が未配置の箇所は、指定サイズのグレーの図形（.img-slot--empty）で
   場所を確保しています。
   ========================================================================== */

.p-partners {
	--pt-tint: #fef7f3;      /* カードのうすいオレンジ */
	--pt-text: #6c635f;      /* 本文のグレー */
	--pt-rule: #e2ddd9;      /* 見出しの下線 */
}

/* --------------------------------------------------------------------------
   2. 提携サービス一覧
   -------------------------------------------------------------------------- */
.p-partners__list-section {
	padding: 48px 0 56px;
	background-color: #fff;
}

.p-partners__list-title {
	font-size: 24px;
}

/* SP は1列 */
.p-partners__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.p-partners__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 10px;
	background-color: var(--pt-tint);
	box-sizing: border-box;
}

.p-partners__item-icon {
	flex: 0 0 auto;
	display: block;
	width: 72px;
	line-height: 0;
}

.p-partners__item-icon img,
.p-partners__item-icon .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	/* 画像が未配置のときも高さが潰れないように */
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.p-partners__item-body {
	display: block;
}

.p-partners__item-title {
	display: block;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text);
}

.p-partners__item-text {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pt-text);
}

/* --------------------------------------------------------------------------
   4. 活用イメージ例
   -------------------------------------------------------------------------- */
.p-partners__cases-section {
	padding: 48px 0 56px;
	background-color: #fff;
}

.p-partners__cases-title {
	font-size: 24px;
}

.p-partners__cases {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

/* SP は写真を上、文章を下に積む */
.p-partners__case {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 写真。左上にオレンジの帯を重ねる */
.p-partners__case-photo {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.p-partners__case-photo img,
.p-partners__case-photo .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	/* 画像が未配置のときも高さが潰れないように */
	aspect-ratio: 322 / 192;
	object-fit: cover;
}

.p-partners__case-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 4px 16px;
	/* 上下の角がきれいに丸くなるよう、高さの半分より大きい値にしている */
	border-radius: 999px;
	background-color: var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

.p-partners__case-title {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pt-rule);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text);
}

.p-partners__case-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--pt-text);
}

/* --------------------------------------------------------------------------
   Q&A

   ご指示により、このページの Q&A だけ背景を白にする
   （ほかのページは css/page-first.css のうすいオレンジ）。
   デザインはほかのページと同じままにしている。
   -------------------------------------------------------------------------- */
.p-partners .p-first__qa {
	background-color: #fff;
}


/* ==========================================================================
   PC
   ========================================================================== */

@media (min-width: 840px) {

	/* --- 2. 提携サービス一覧 --- */
	.p-partners__list-section {
		padding: 80px 0;
	}

	.p-partners__list-title {
		font-size: 42px;
	}

	/* PC は3列×2段 */
	.p-partners__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px 22px;
		margin-top: 40px;
	}

	.p-partners__item {
		gap: 15px;
		padding: 28px 22px 22px 29px;
	}

	.p-partners__item-icon {
		width: 97px;
	}

	.p-partners__item-title {
		font-size: 20px;
		line-height: 32.5px;
	}

	.p-partners__item-text {
		font-size: 16px;
		line-height: 27px;
	}

	/* --- 4. 活用イメージ例 --- */
	.p-partners__cases-section {
		padding: 80px 0 120px;
	}

	.p-partners__cases-title {
		font-size: 42px;
	}

	.p-partners__cases {
		gap: 20px;
		margin-top: 40px;
	}

	/* PC は写真を左、文章を右に並べる */
	.p-partners__case {
		flex-direction: row;
		align-items: center;
		gap: 42px;
	}

	.p-partners__case-photo {
		flex: 0 0 auto;
		width: 322px;
	}

	.p-partners__case-body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.p-partners__case-tag {
		top: 15px;
		left: 15px;
		min-width: 103px;
		padding: 4px 20px 3px;
		font-size: 16px;
		line-height: 20px;
	}

	.p-partners__case-title {
		margin-bottom: 21px;
		padding-bottom: 12px;
		font-size: 22px;
		line-height: 39px;
	}

	.p-partners__case-text {
		font-size: 16px;
		line-height: 24px;
	}

}