@charset "UTF-8";

/* ==========================================================================
   交際・プロポーズ（page-relationship.php  .p-relationship）

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

     1. 交際中の悩みは 一つずつ解消しましょう。
     2. 交際中に相談できること
     3. 仮交際〜真剣交際〜成婚の流れ
        ご指示により「初めての方へ」の FLOW と同じ作り。ここには何も無い。
     4. 真剣交際へ進むべき？ 見極めチェック
     5. 相談したいことに合わせて、話す相手を選べる

   丸の中に絵が入っているところ（相談できることのアイコン・仲人Tの写真）は、
   ご指示により丸ごと1枚の画像で入れる前提にしている。
   そのため CSS では丸い下じきを描かず、縦横比だけを決めている。

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

.p-relationship {
	--rel-tint: #fef7f3;      /* うすいオレンジ */
	--rel-gray: #f7f7f7;      /* Q&A と同じ灰色 */
	--rel-text: #6c635f;      /* 本文のグレー */
	--rel-rule: #e2ddd9;      /* 見出しの下線 */
}

/* --------------------------------------------------------------------------
   1. 交際中の悩みは 一つずつ解消しましょう。

   セクションの見出しは .c-heading の既定（SP 25px / PC 40px）に任せている。
   「初めての方へ」のページと同じ大きさにするため、ここでは font-size を指定しない。
   -------------------------------------------------------------------------- */
.p-relationship__worries-section {
	padding: 48px 0 56px;
	background-color: #fff;
}

.p-relationship__worries {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

/* 白いカード。影で浮かせる */
.p-relationship__worry {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .13);
	overflow: hidden;
}

.p-relationship__worry-photo {
	line-height: 0;
}

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

.p-relationship__worry-body {
	padding: 20px 24px 30px;
}

.p-relationship__worry-title {
	margin: 0 0 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--rel-rule);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
	text-align: center;
}

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

/* --------------------------------------------------------------------------
   2. 交際中に相談できること
   -------------------------------------------------------------------------- */
.p-relationship__topics-section {
	padding: 48px 0 56px;
	background-color: #fff;
}

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

.p-relationship__topic {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 16px;
	border-radius: 16px;
	background-color: #fff;
	box-shadow: 4px 2px 5px rgba(0, 0, 0, .09);
	box-sizing: border-box;
}

/* 丸ごと1枚の画像が入る */
.p-relationship__topic-icon {
	flex: 0 0 auto;
	display: block;
	width: 84px;
	line-height: 0;
}

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

.p-relationship__topic-body {
	display: block;
	min-width: 0;
}

.p-relationship__topic-title {
	display: block;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rel-rule);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text);
}

.p-relationship__topic-text {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--rel-text);
}

/* --------------------------------------------------------------------------
   4. 真剣交際へ進むべき？ 見極めチェック
   -------------------------------------------------------------------------- */
.p-relationship__check-section {
	padding: 48px 0 56px;
	background-color: var(--rel-tint);
}

/* うすいオレンジの上に置く白い箱 */
.p-relationship__check {
	padding: 28px 20px 32px;
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
}

.p-relationship__check-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* 丸とリボンごと1枚の画像が入る */
.p-relationship__check-avatar {
	flex: 0 0 auto;
	width: 140px;
	line-height: 0;
}

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

.p-relationship__check-head-text {
	text-align: center;
}

.p-relationship__check-title {
	margin: 0;
	font-family: var(--font-mincho);
	/* .c-heading と同じ大きさ */
	font-size: 25px;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text);
}

.p-relationship__check-lead {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--rel-text);
}

/* --- チェックボックス（押せる） --- */
.p-relationship__check-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.p-relationship__check-item {
	display: flex;
}

/*
 * 見た目は label 側で作る。
 * input は隠さず、label の中に置いて一緒に押せるようにしている
 * （キーボード操作でも選べるようにするため）。
 */
.p-relationship__check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.p-relationship__check-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px 16px 16px 50px;
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
	cursor: pointer;
}

/* 四角い枠 */
.p-relationship__check-label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 22px;
	height: 22px;
	border: 1px solid var(--rel-text);
	background-color: #fff;
	transform: translateY(-50%);
	box-sizing: border-box;
}

/* チェックの印。ふだんは消しておく */
.p-relationship__check-label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 22px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: translateY(-70%) rotate(-45deg);
	opacity: 0;
}

.p-relationship__check-input:checked + .p-relationship__check-label::after {
	opacity: 1;
}

.p-relationship__check-input:checked + .p-relationship__check-label {
	background-color: var(--rel-tint);
}

.p-relationship__check-input:focus-visible + .p-relationship__check-label {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. 相談したいことに合わせて、話す相手を選べる

   写真はサポート一覧ページと同じものを PC / SP で出し分けている。
   背景は Q&A と同じ色にして、下のセクションと1つのまとまりに見せる。
   -------------------------------------------------------------------------- */
.p-relationship__team-section {
	padding: 48px 0;
	background-color: white;
}

.p-relationship__team-section .c-lead {
	margin-top: 16px;
	text-align: center;
}

.p-relationship__team-image {
	margin-top: 28px;
}

.p-relationship__team-image img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}


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

@media (min-width: 840px) {

	/* --- 1. 交際中の悩み --- */
	.p-relationship__worries-section {
		padding: 84px 0 40px;
	}

	.p-relationship__worries {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 26px;
		margin-top: 60px;
	}

	.p-relationship__worry-body {
		padding: 20px 24px 30px;
	}

	.p-relationship__worry-title {
		font-size: 20px;
		line-height: 35px;
	}

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

	/* --- 2. 相談できること --- */
	.p-relationship__topics-section {
		padding: 40px 0 84px;
	}

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

	.p-relationship__topic {
		gap: 28px;
		padding: 39px 25px;
	}

	.p-relationship__topic-icon {
		width: 126px;
	}

	.p-relationship__topic-title {
		padding-bottom: 10px;
		font-size: 20px;
		line-height: 32.5px;
	}

	.p-relationship__topic-text {
		margin-top: 10px;
		font-size: 16px;
		line-height: 27px;
	}

	/* --- 4. 見極めチェック --- */
	.p-relationship__check-section {
		padding: 60px 0 80px;
	}

	.p-relationship__check {
		padding: 60px 84px;
	}

	/* PC は写真を左、見出しを右に並べる */
	.p-relationship__check-head {
		flex-direction: row;
		justify-content: center;
		gap: 39px;
	}

	.p-relationship__check-avatar {
		width: 185px;
	}

	.p-relationship__check-head-text {
		width: 500px;
		text-align: left;
	}

	.p-relationship__check-title {
		font-size: 32px;
		line-height: 1.6;
		/* 「真剣交際へ進むべき？」を1行に収める（改行は <br> で入れている） */
		white-space: nowrap;
	}

	.p-relationship__check-lead {
		margin-top: 14px;
		font-size: 16px;
		line-height: 26px;
	}

	/* PC は2列×3段 */
	.p-relationship__check-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px 24px;
		margin-top: 44px;
	}

	.p-relationship__check-label {
		padding: 20px 29px 20px 71px;
		font-size: 17px;
	}

	.p-relationship__check-label::before {
		left: 20px;
		width: 27px;
		height: 27px;
	}

	.p-relationship__check-label::after {
		left: 27px;
		width: 14px;
		height: 8px;
	}

	/* --- 5. 話す相手を選べる --- */
	.p-relationship__team-section {
		padding: 100px 0;
	}

	.p-relationship__team-section .c-lead {
		margin-top: 20px;
		font-size: 17px;
		line-height: 30px;
	}

	.p-relationship__team-image {
		margin-top: 44px;
	}

}