@charset "utf-8";

/* 共通 */
.qa_anchor_list,
.que_list,
.qa_content {
	padding-inline: 32rem;
}
.que,
.ans {
	position: relative;

	&::before {
		font-family: "Lexend", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		position: absolute;
	}
}
.que::before {
	content: 'Q.';
	color: var(--green-1);
}
.ans::before {
	content: 'A.';
	color: var(--orange);
}

/* 一覧ページ */
nav:has(.pannkuzu) + * {
	margin-top: 56rem;
}
.qa_anchor_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rem;

	& a {
		height: 48rem;
		font-size: 12rem;
		font-weight: 700;
		line-height: 1.8;
		padding-left: 8rem;
		display: flex;
		align-items: center;
		position: relative;

		&::after {
			width: 9rem;
			height: 3rem;
			margin-block: auto;
			inset: 0 auto;
			right: 8rem;
		}
	}
}
.qa_archive {
	margin-top: 80rem;

	& h2 {
		font-size: 20rem;
		font-weight: 700;
		line-height: 1.5;
		padding: 16rem 32rem;
	}
	& .que_list {
		margin-top: 32rem;

		& li {
			border-bottom: var(--border-green-2);
		}
		& a {
			font-size: 14rem;
			font-weight: 700;
			line-height: 1.5;

			&::before {
				top: 24rem;
				left: 0;
			}

			& span {
				padding: 24rem 48rem 24rem 24rem;
				display: block;
			}
		}
	}
	& + .contact {
		margin-top: 120rem;
	}
}

/* 詳細ページ */
.qa_content {
	& dt {
		font-size: 18rem;
		font-weight: 700;
		line-height: 1.5;
		padding-left: 2em;
	}
	& dd {
		font-size: 14rem;
		line-height: 1.8;
		margin-top: 24rem;
		padding: 24rem 24rem 24rem 64rem;

		& p,
		& ul,
		& ol {
			& + p {
				margin-top: 1.5em;
			}
			& small {
				font-size: 12rem;
			}
			& b {
				font-weight: 700;
			}
			& a {
				text-decoration: underline;
			}
			& + ul,
			& + ol {
				margin-top: 1em;
			}
		}
		& h2,
		& h3 {
			font-weight: 700;
		}
		& h2 {
			font-size: 16rem;
			margin-top: 1.5em;
		}
		& h3 {
			font-size: 14rem;
		}
		& h2 + h3 {
			margin-top: 16rem;
		}
		& h3 + p {
			margin-top: 12rem;
		}
		& p + h3 {
			margin-top: 2em;
		}
	}
	& dt::before,
	& dd::before {
		font-size: 24rem;
	}
	& dt::before {
		top: -6rem;
		left: 0;
	}
	& dd::before {
		top: 24rem;
		left: 24rem;
	}

	& .btn_wrap {
		margin-top: 56rem;
	}
	& + .contact {
		margin-top: 120rem;
	}
}