@charset "UTF-8";

.faq {
	margin-top: 90px;
	padding: 90px 0 195px;
	background: var(--bg-mesh);
}

.faq_sec {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	padding: 84px 90px 105px;
	background: var(--color-white);
}

.faq_sec:not(:first-child) {
	margin-top: 60px;
}

.faq_ttl {
	flex-shrink: 0;
	font-size: 21px;
	white-space: nowrap;
	writing-mode: vertical-lr;
}

.faq_list {
	display: grid;
	flex: 1;
	gap: 10px;
	margin-top: -28px;
}

.faq_item {
	border-bottom: var(--border);
}

.faq_item::details-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s;

	content-visibility: initial;
}

.faq_item[open]::details-content {
	grid-template-rows: 1fr;
}

.faq_item_q {
	position: relative;
	padding: 26px 45px 26px 0;
	font-size: 16px;
	line-height: 1.4375;
	cursor: pointer;
}

.faq_item_q::before,
.faq_item_q::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 20px;
	height: 1px;
	background: var(--color-black);
}

.faq_item_q::before {
	transition: transform 0.3s;
}

.faq_item_q::after {
	transform: rotate(90deg);
	transition: transform 0.3s;
}

.faq_item[open] .faq_item_q::after {
	transform: rotate(0deg);
}

.faq_item_q > span {
	display: inline-block;
	background: var(--bg-border);
	line-height: 1.3;
	transition: background 0.25s var(--ease);
}

@media (hover: hover) {
	.faq_item_q:hover > span {
		background: var(--bg-border-hover);
	}
}

.faq_item_a {
	overflow: hidden;
}

.faq_item_cnt {
	padding-bottom: 26px;
	line-height: 2;
}

.faq_item_cnt a {
	display: inline-block;
	position: relative;
	line-height: 1.3;
}

.faq_item_cnt a::after {
	content: "";
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-black);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}

.faq_item_cnt a:hover::after {
	transform: scaleX(0);
	transform-origin: right;
}

@media screen and (max-width: 1259.98px) {
}

@media screen and (max-width: 767.98px) {
	.faq {
		margin-top: 60px;
		padding-top: 60px;
		padding-bottom: 150px;
	}

	.faq_sec {
		flex-direction: column;
		gap: 15px;
		padding: 35px 30px 45px;
	}

	.faq_sec:not(:first-child) {
		margin-top: 30px;
	}

	.faq_ttl {
		font-size: 18px;
		white-space: wrap;
		writing-mode: initial;
	}

	.faq_list {
		margin-top: 0;
	}

	.faq_item {
	}

	.faq_item::details-content {
	}

	.faq_item[open]::details-content {
	}

	.faq_item_q {
		padding: 18px 26px 18px 0;
		font-size: 14px;
	}

	.faq_item_q::before,
	.faq_item_q::after {
		width: 14px;
	}

	.faq_item_q::before {
	}

	.faq_item_q::after {
	}

	.faq_item[open] .faq_item_q::after {
	}

	.faq_item_a {
	}

	.faq_item_cnt {
		padding-bottom: 18px;
		line-height: 1.8;
	}
}