@charset "UTF-8";

/* ==========================================================================
   成婚・入籍（page-marriage.php  .p-marriage）

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

     1. 成婚後もここまで相談できる … カード6枚
     2. 入籍まで伴走を継続。       … 見出し＋リード文＋比較図（1枚絵）
     3. プロポーズ〜入籍までのスケジュール例

   カード6枚はトップページの
   「今のあなたに当てはまるのはどれですか？」と同じ見た目にする、というご指示のため
   .p-front__choice* のクラスをそのまま使っている。
   css/front-page.css は functions.php の extends で読み込んでいる。

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

.p-marriage {
	--mr-tint: #fef7f3;      /* 丸と背景のうすいオレンジ */
	--mr-text: #6c635f;      /* 本文のグレー */
}

/* --------------------------------------------------------------------------
   1. 成婚後もここまで相談できる（カード6枚）
   -------------------------------------------------------------------------- */

/* カードが増えたぶん、下の余白を広げる
   （.p-detail__intro の 8px だとカードが次のセクションに近づきすぎるため） */
.p-marriage .p-detail__intro {
	padding-bottom: 48px;
}

/*
 * .p-front__choice* は front-page.css の変数を見ている。
 * このページには .p-front が付いていないので、ここで同じ値を渡しておく。
 */
.p-marriage__choices {
	--f-body: 14px;           /* カード本文（front-page.css と同じ） */
	--f-icon-bg: #fdeee4;     /* アイコンの丸 */
	--f-rule: #e2ddd9;        /* 見出しの下線 */
	margin-top: 28px;
}

/* --------------------------------------------------------------------------
   2. 入籍まで伴走を継続。

   「見出し＋リード文＋大きな1枚絵」の並びは、チームサポート制のページでも
   使うので css/page-support-detail.css の .p-detail__figure-section にある。
   ここでは絵の縦横比だけを決めている
   （画像が未配置のときに高さが潰れないようにするため）。
   -------------------------------------------------------------------------- */
.p-marriage__continue .p-detail__figure img,
.p-marriage__continue .p-detail__figure .img-slot--empty {
	aspect-ratio: 1024 / 582;
}

/* --------------------------------------------------------------------------
   3. プロポーズ〜入籍までのスケジュール例
   -------------------------------------------------------------------------- */
.p-marriage__schedule-section {
	padding: 48px 0 0px;
	background-color: #fff;
}

/* SP は縦に積み、矢印を下向きにする */
.p-marriage__schedule {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.p-marriage__schedule-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* 丸。1px の差で楕円にならないよう幅と高さは同じ値にしている */
.p-marriage__schedule-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 170px;
	height: 170px;
	padding: 16px;
	border-radius: 50%;
	background-color: var(--mr-tint);
	box-sizing: border-box;
}

.p-marriage__schedule-label {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 18px;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-primary);
	text-align: center;
}

.p-marriage__schedule-icon {
	display: block;
	width: 100%;
	line-height: 0;
}

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

.p-marriage__schedule-caption {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mr-text);
	text-align: center;
}

/* 丸と丸のあいだの矢印（SP は下向き） */
.p-marriage__schedule-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	transform: rotate(90deg);
}

.p-marriage__schedule-arrow svg {
	display: block;
	width: 20px;
	height: auto;
}

/* --- 入籍までサポートの仕組み（オレンジの枠） --- */
.p-marriage__scheme {
	margin-top: 32px;
	padding: 24px 20px;
	border: 1px solid var(--color-primary);
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
}

.p-marriage__scheme-title {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 18px;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text);
	text-align: center;
}

.p-marriage__scheme-list {
	margin: 16px auto 0;
	padding: 0;
	list-style: none;
}

.p-marriage__scheme-list li {
	position: relative;
	padding-left: 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mr-text);
}

/* 行頭の小さな丸 */
.p-marriage__scheme-list li::before {
	content: "";
	position: absolute;
	top: .65em;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--mr-text);
}

.p-marriage__scheme-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--mr-text);
	text-align: center;
}
.p-marriage__scheme-list {
	width: fit-content;
	margin: 0 auto;
	text-align: left;
}

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

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


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

@media (min-width: 840px) {

	/* --- 1. 成婚後もここまで相談できる --- */
	.p-marriage .p-detail__intro {
		padding-bottom: 80px;
	}

	.p-marriage__choices {
		--f-body: 16px;
		margin-top: 60px;
	}

	/* --- 3. スケジュール例 --- */
	.p-marriage__schedule-section {
		padding: 80px 0 0px;
	}

	/* PC は横並び。矢印も横向きに戻す */
	.p-marriage__schedule {
		/*
		 * 丸の直径。4つの丸と3つの矢印が 1 行に収まるよう、
		 * 画面が狭いときは自動で小さくなる（840px で約153px）。
		 * 1070px 以上はデザインどおりの 211px。
		 */
		--schedule-circle: clamp(150px, calc(25vw - 57px), 211px);
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 16px;
		margin-top: 30px;
	}

	.p-marriage__schedule-step {
		flex: 0 0 auto;
		gap: 15px;
		width: var(--schedule-circle);
	}

	.p-marriage__schedule-arrow {
		/* 丸の中心に合わせる */
		margin-top: calc(var(--schedule-circle) / 2 - 11px);
		transform: none;
	}

	.p-marriage__schedule-arrow svg {
		width: 27px;
	}

	.p-marriage__schedule-circle {
		gap: 6px;
		width: var(--schedule-circle);
		height: var(--schedule-circle);
		padding: clamp(14px, 2vw, 24px) clamp(16px, 2.3vw, 28px);
	}

	/* 題名が 1 行の丸と 2 行の丸で中の絵の高さがずれないよう、題名の欄を 2 行分の高さに揃える */
	.p-marriage__schedule-label {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.6em;
		/* 丸が縮んだときに中身がはみ出さないよう一緒に縮める */
		font-size: clamp(18px, 2.2vw, 26px);
		line-height: 1.3;
	}

	.p-marriage__schedule-icon img,
	.p-marriage__schedule-icon .img-slot--empty {
		max-height: clamp(62px, 8.4vw, 101px);
	}

	.p-marriage__schedule-caption {
		font-size: clamp(15px, 1.7vw, 20px);
		line-height: 1.4;
	}

	/* --- 入籍までサポートの仕組み --- */
	.p-marriage__scheme {
		margin-top: 50px;
		padding: 40px 60px;
	}

	.p-marriage__scheme-title {
		font-size: 20px;
	}

	.p-marriage__scheme-list {
		margin-top: 20px;
	}

	.p-marriage__scheme-list li {
		font-size: 16px;
		line-height: 27px;
	}

	.p-marriage__scheme-note {
		margin-top: 5px;
		font-size: 16px;
		line-height: 27px;
	}

}