/* ==========================================================================
   サポート一覧ページ（page-support.php）
   メインビジュアル・Q&A・CTA は page-first.css を流用しているため、
   ここではこのページ固有のセクションだけを定義しています。
   - SP ファーストで記述し、840px 以上を PC レイアウトとしています。
   ========================================================================== */

.p-support {
	--support-circle-bg: #fef7f3;   /* 1セクション目の丸の背景 */
	--support-cream: #fdf6ee;       /* セクション背景のクリーム色 */
	--support-way-bg: #fff0e9;      /* 相談方法の丸の背景 */
	--support-note-bg: #f9f9f9;     /* 相談方法の下の 3 つの枠 */
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   セクション共通の本文（タイトル下の説明文）
   指示どおり PC 18px / SP 16px
   -------------------------------------------------------------------------- */
.p-support__lead {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   1. 3つの丸
   -------------------------------------------------------------------------- */
.p-support__points {
	padding: 40px 0 60px;
	background-color: var(--color-bg);
}

/* SP は縦並び、PC は横並び */
.p-support__point-list {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-support__point {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 人物画像が入る */
.p-support__point-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 250px;
	overflow: hidden;
}

.p-support__point-circle img,
.p-support__point-circle .img-slot--empty {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-support__point-text {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-primary);
}

.p-support__point-lead {
	margin: 45px 0 0;
	font-size: 14px;
	line-height: 2;
	text-align: center;
	color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   2. サポート内容カード
   -------------------------------------------------------------------------- */
.p-support__services {
	padding: 48px 0;
	background-color: var(--support-cream);
}

.p-support__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

/* ドロップシャドウ付きのカード */
.p-support__card {
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
	overflow: hidden;
}

/* SP は画像がカードの上、PC は左。画像を出し分ける */
.p-support__card-media--pc {
	display: none;
}

.p-support__card-media--sp img,
.p-support__card-media--sp .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 3;
	object-fit: cover;
}

.p-support__card-body {
	padding: 18px 16px 20px;
}

.p-support__card-title {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #E54600;
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.6;
	color: #1A1311;
}

.p-support__card-text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-body);
}

/* 質問例 */
.p-support__card-examples {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px;
	border-radius: 6px;
	background-color: var(--support-cream);
}

.p-support__card-balloon {
	flex: 0 0 auto;
	line-height: 0;
}

.p-support__card-balloon img,
.p-support__card-balloon .img-slot--empty {
	width: 50px;
	height: auto;
	/* 画像未配置でもプレースホルダーが潰れないように比率を指定する */
	aspect-ratio: 8 / 8;
}

.p-support__card-example-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text-body);
}

.p-support__card-example-list li {
	padding-left: 0.2em;
	text-indent: -1em;
}

.p-support__card-example-list li::before {
	content: "「";
}

.p-support__card-example-list li::after {
	content: "」";
}

.p-support__card-more {
	margin: 14px 0 0;
	text-align: right;
}

/* --------------------------------------------------------------------------
   3. チームサポート
   -------------------------------------------------------------------------- */
.p-support__team {
	padding: 48px 0;
	background-color: var(--color-bg);
}

.p-support__team .p-support__lead .bold{
	font-weight: bold;
}

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

.p-support__team-image img,
.p-support__team-image .img-slot--empty {
	display: block;
	width: 90%;
	height: auto;
	margin: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   4. 相談方法
   -------------------------------------------------------------------------- */
.p-support__contact {
	padding: 48px 0 0;
	background-color: var(--support-cream);
}

.p-support__contact .box{
	background-color: white;
	max-width: 90%;
	border-radius: 10px;
	margin: 0 auto 40px;
	padding: 30px 15px;
}

.p-support__ways {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.p-support__way {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*
 * 丸の中は「オレンジの明朝体（上）＋アイコン画像（下）」。
 * page-first.php の FLOW と違い、丸の色は白ではなく #fff0e9。
 */
.p-support__way-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 130px;
	height: 130px;
	padding: 12px;
	border-radius: 50%;
	background-color: var(--support-way-bg);
}

.p-support__way-label {
	margin: 0;
	font-family: var(--font-mincho);
	/* 明朝体は太字にしない */
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	margin-top: 15px;
	color: var(--color-primary);
}
@media (max-width: 839px) {
	.p-support__way-label.is-member-system {
		font-size: 16px;
	}
}

.p-support__way-icon {
	line-height: 0;
}

.p-support__way-icon img,
.p-support__way-icon .img-slot--empty {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* 丸の下はオレンジの明朝体を置かず、説明文だけ */
.p-support__way-name {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-body);
}

/* --- 下に並ぶ 3 つの枠（SP は縦並び） --- */
.p-support__notes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 32px 0 0;
	padding: 0px;
	list-style: none;
}

.p-support__note {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 13px;
	border-radius: 10px;
	background-color: var(--support-note-bg);
	text-align: center;
}

.p-support__note-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-primary);
}

.p-support__note-value {
	font-size: 15px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. 成婚後サポート
   -------------------------------------------------------------------------- */
.p-support__after {
	padding: 40px 0 56px;
	background-color: var(--color-bg);
}

.p-support__after-image {
	margin-top: 10px;
	margin: 25px auto;
}

.p-support__after-image img,
.p-support__after-image .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	.p-support__lead {
		margin-top: 24px;
		font-size: 16px;
		line-height: 1.8;
	}

	/* --- 1. 3つの丸 --- */
	.p-support__points {
		padding: 20px 0 88px;
	}

	.p-support__point-list {
		/* minmax(0, …) にして、中身より列を狭くできるようにする */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
	}

	.p-support__point-circle {
		/* 画面が狭いときは列の幅まで縮む（840〜1199px 対策） */
		width: min(320px, 100%);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.p-support__point-text {
		margin-top: 20px;
		font-size: 16px;
	}

	.p-support__point-lead {
		margin-top: 80px;
		font-size: 16px;
		line-height: 3.0;
	}

	/* --- 2. サポート内容カード --- */
	.p-support__services {
		padding: 100px 0 80px;
	}

	.p-support__services  .l-section{
		max-width: 1100px;
	}

	.p-support__cards {
		gap: 28px;
		margin-top: 48px;
	}

	/* PC は画像が左、本文が右 */
	.p-support__card {
		grid-template-columns: 360px 1fr;
		align-items: stretch;
	}

	.p-support__card-media--pc {
		display: block;
		height: 100%;
	}

	.p-support__card-media--sp {
		display: none;
	}

	.p-support__card-media--pc img,
	.p-support__card-media--pc .img-slot--empty {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 260px;
		object-fit: cover;
	}

	.p-support__card-body {
		padding: 25px 30px 20px;
	}

	.p-support__card-title {
		font-size: 21px;
	}

	.p-support__card-text {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.7;
	}

	.p-support__card-examples {
		gap: 14px;
		margin-top: 18px;
		padding: 10px 15px;
	}

	.p-support__card-balloon img,
	.p-support__card-balloon .img-slot--empty {
		width: 70px;
	}

	.p-support__card-example-list {
		font-size: 16px;
	}

	/* --- 3. チームサポート --- */
	.p-support__team {
		padding: 80px 0 96px;
	}

	.p-support__team-image {
		margin-top: 20px;
	}

	.p-support__team-image img,
.p-support__team-image .img-slot--empty {
	margin: 45px auto;
}

	/* --- 4. 相談方法 --- */

	.p-support__contact .box{
		max-width: 1200px;
		border-radius: 20px;
		margin: 0 auto 60px;
		padding: 60px;
	}

	.p-support__contact {
		padding-top: 80px;
	}

	.p-support__ways {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
		margin-top: 48px;
	}

	.p-support__way-circle {
		/*
		 * 画面が狭いときは列の幅に合わせて縮む（840〜1199px 対策）。
		 * 幅と高さに同じ式を使い、真円のままにしている。
		 * 1200px 以上はデザインどおりの 180px。
		 */
		width: clamp(150px, calc(25vw - 60px), 180px);
		height: clamp(150px, calc(25vw - 60px), 180px);
		gap: 6px;
	}

	/* 指示どおり 25px */
	.p-support__way-label {
		font-size: 21px;
		margin-top: 10px;
	}

	.p-support__way-icon img,
	.p-support__way-icon .img-slot--empty {
		/* 丸が縮んだときに中身がはみ出さないよう一緒に縮める */
		width: clamp(64px, 6.7vw, 80px);
		height: clamp(64px, 6.7vw, 80px);
	}

	.p-support__way-name {
		margin-top: 14px;
		font-size: 16px;
	}

	.p-support__notes {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin-top: 48px;
	}

	.p-support__note {
		flex-direction: row;
		justify-content: center;
		gap: 1px;
		padding: 20px;
	}

	.p-support__note-label {
		font-size: 14px;
	}

	.p-support__note-value {
		font-size: 16px;
	}

	/* --- 5. 成婚後サポート --- */
	.p-support__after {
		padding: 64px 0 96px;
	}

	.p-support__after-image {
		max-width: 950px;
		margin: 45px auto;
	}
}
.p-support__card-more a {
	color: #E54600;
}

.p-support__card-more a:hover {
	color: #6C635F;
}

.p-support__notes {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.p-support__note {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.p-support__note-label {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #1A1311;
}

.p-support__note-value {
	margin-top: 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: #1A1311;
}

.p-support__note-value.is-orange {
	color: #E54600;
}

@media (max-width: 839px) {
	.p-support__note-label {
		font-size: 14px;
	}
	
	.p-support__note-value {
		font-size: 18px;
		margin-top: 0;
	}

	.p-support__notes {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.p-support__note {
		width: 100%;
	}
}