@charset "utf-8";

/* list-faq */
.list-faq::details-content {
	transition: opacity 0.5s, transform 0.5s;
	transform: translateY(-25px);
	opacity: 0;
}
.list-faq[open]::details-content {
	transform: translateY(0);
	opacity: 1;
}
.list-faq__mark {
	position: absolute;
	font-family: var(--font-en);
	font-weight: var(--weight-bold);
	line-height: 1;
}
.list-faq__mark--answer {
	color: var(--color-blue);
}
.list-faq__question {
	position: relative;
	z-index: 1;
	list-style: none;
	cursor: pointer;
	background: var(--color-gray-light);
	font-weight: var(--weight-bold);
}
.list-faq__question::before,
.list-faq__question::after {
	position: absolute;
	top: calc(50% - 1px);
	display: block;
	width: 15px;
	height: 2px;
	content: "";
	border-radius: 1px;
	background-color: var(--color-black);
}
.list-faq__question::after {
	transition: transform 0.5s;
	transform: rotate(90deg);
}
.list-faq[open] .list-faq__question::after {
	transform: rotate(0deg);
}
.list-faq__answer {
	position: relative;
}
.list-faq__answer > :where(p, ol, ul):first-of-type {
	margin-top: 0;
}
.list-faq__answer > :last-child {
	margin-bottom: 0;
}
@media (max-width: 1024px) {
	.list-faq {
		margin-top: 15px;
	}
	.list-faq__mark {
		top: 17px;
		left: 15px;
		font-size: 2.5rem;
	}
	.list-faq__mark--answer {
		top: 27px;
	}
	.list-faq__question {
		padding: 15px 45px 15px 55px;
	}
	.list-faq__question::before,
	.list-faq__question::after {
		right: 15px;
	}
	.list-faq__answer {
		padding: 25px 15px 50px 55px;
	}
}
@media (min-width: 1025px) {
	.list-faq {
		margin-top: 25px;
	}
	.list-faq__mark {
		top: 27px;
		left: 25px;
		font-size: 3.0rem;
	}
	.list-faq__question {
		padding: 25px 65px 25px 80px;
		font-size: 1.7rem;
	}
	.list-faq__question::before,
	.list-faq__question::after {
		right: 25px;
	}
	.list-faq__answer {
		padding: 25px 25px 50px 80px;
	}
	.list-faq__answer-heading {
		font-size: 1.7rem;
	}
}