/**
 * オンライン説明会ページの当日の流れとFAQ領域の基底表示を管理する。
 *
 * 流れカードとFAQの構造・状態表示、および各領域のレスポンシブ切替をこのファイルへ集約する。
 * 共通見出しのアクセント線はassets/css/pages/consultation/base.cssを利用し、ここでは流れ・FAQ固有の配置だけを管理する。
 * FAQの狭幅補正も基底定義の近くへ置き、後段の一括レスポンシブCSSによる上書きを避ける。
 */

/**
 * 当日の流れとFAQ
 *
 * 下層ヒーロー直後の導線、参加手順カード、質問開閉UIを一つの責務として管理する。
 * JavaScript不要のdetails要素を前提に、開閉状態はCSSだけで視覚化する。
 */

/**
 * 下層ヒーロー直後の余白と参加手順
 *
 * 共通下層ヒーローの直後だけ上余白を補正し、3ステップの参加手順をPCではカード列、スマートフォンでは横並び要素を含む1列へ切り替える。
 */

main.page-consultation .shs-lower-hero + .consultation-features {
	padding-top: 96px;
}

main.page-consultation .join-flow {
	padding: 108px 0 116px;
	background: radial-gradient( circle at 4% 10%, rgba(239, 120, 188, 0.07), transparent 20% ), #fff;
}

main.page-consultation .join-flow__head {
	max-width: 720px;
	margin: 0 auto 50px;
	text-align: center;
}

main.page-consultation .join-flow__head .accent-line {
	margin-inline: auto;
}

main.page-consultation .join-flow__list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
}

main.page-consultation .join-flow__list li {
	position: relative;
	min-height: 284px;
	padding: 36px 24px 28px;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(239, 120, 188, 0.95);
	border-radius: 18px;
	box-shadow: 0 12px 32px rgba(158, 83, 105, 0.06);
}

main.page-consultation .join-flow__list li > span {
	position: absolute;
	top: 18px;
	left: 20px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--wine);
	border-radius: 50%;
	font-family: Georgia, serif;
	font-size: 11px;
	line-height: 1;
}

main.page-consultation .join-flow__icon {
	width: 72px;
	height: 72px;
	margin: 5px auto 22px;
	display: grid;
	place-items: center;
	color: var(--rose);
	background: var(--rose-pale);
	border-radius: 50%;
}

main.page-consultation .join-flow__icon svg {
	width: 38px;
	height: 38px;
	display: block;
}

main.page-consultation .join-flow h3 {
	margin: 0 0 11px;
	color: var(--wine);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 1.55;
}

main.page-consultation .join-flow p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.85;
}

@media (max-width: 1024px) {
	main.page-consultation .join-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	main.page-consultation .shs-lower-hero + .consultation-features {
		padding-top: 70px;
	}

	main.page-consultation .join-flow {
		padding-block: 72px;
	}

	main.page-consultation .join-flow__list {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	main.page-consultation .join-flow__list li {
		min-height: 0;
		display: grid;
		grid-template-columns: 48px 62px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 14px;
		align-items: center;
		text-align: left;
		padding: 22px 18px;
	}

	main.page-consultation .join-flow__list li > span {
		position: static;
		grid-row: 1 / 3;
		width: 44px;
		height: 44px;
	}

	main.page-consultation .join-flow__icon {
		grid-row: 1 / 3;
		width: 58px;
		height: 58px;
		margin: 0;
	}

	main.page-consultation .join-flow__icon svg {
		width: 31px;
		height: 31px;
	}

	main.page-consultation .join-flow h3 {
		margin: 0;
		align-self: end;
		font-size: 17px;
	}

	main.page-consultation .join-flow p {
		align-self: start;
	}
}

.consultation-faq {
	padding: 106px 0 112px;
	background: #fff;
}

.consultation-faq__inner {
	max-width: 980px;
}

.consultation-faq-list {
	margin-top: 45px;
	border-top: 1px solid var(--line);
}

.consultation-faq-item {
	border-bottom: 1px solid var(--line);
}

.consultation-faq-item summary {
	position: relative;
	min-height: 72px;
	padding: 20px 58px 20px 8px;
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--wine);
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
}

.consultation-faq-item summary::-webkit-details-marker {
	display: none;
}

.consultation-faq-item summary > span {
	color: var(--rose);
	font-family: Georgia, serif;
	font-size: 20px;
	font-weight: 400;
}

.consultation-faq-item summary i {
	position: absolute;
	right: 17px;
	top: 50%;
	width: 22px;
	height: 22px;
	transform: translateY(-50%);
}

.consultation-faq-item summary i::before,
.consultation-faq-item summary i::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 4px;
	width: 14px;
	height: 1px;
	background: var(--wine);
	transition: transform 0.25s ease;
}

.consultation-faq-item summary i::after {
	transform: rotate(90deg);
}

.consultation-faq-item[open] summary i::after {
	transform: rotate(0deg);
}

.consultation-faq-item > div {
	overflow: hidden;
}

.consultation-faq-item p {
	margin: 0;
	padding: 0 58px 24px 43px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.95;
}

@media (max-width: 600px) {
	main.page-consultation .join-flow__list li {
		text-align: center;
	}
}

/**
 * FAQのスマートフォン補正
 *
 * 620px以下ではセクション余白を縮め、質問文の左余白と回答文の左右余白を詰める。
 * 開閉アイコン用の右余白は維持し、長い質問文でもアイコンと文字が重ならないようにする。
 */
@media (max-width: 620px) {
	.consultation-faq {
		padding-block: 76px;
	}

	.consultation-faq-item summary {
		padding-left: 0;
		font-size: 13px;
	}

	.consultation-faq-item p {
		padding-left: 36px;
		padding-right: 14px;
	}
}