@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  faq_box
**************************************************
--------------------------------------------------*/
.faq_box {
	margin-top: 66px;
	padding: 80px 0;
	background: #FFFFFA;
	border-top: var(--color-accent-5) 1px solid;
	border-bottom: var(--color-accent-5) 1px solid;
}

.faq_box .faq_inner {
	width: min(var(--content-sp-width-1), var(--content-pc-width-2));
	margin-inline: auto;
}

.faq_box .faq_section + .faq_section {
	margin-top: 84px;
}

.faq_box .faq_heading {
	font-size: 3.4rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-accent-4);
}

.faq_box .faq_list {
	margin-top: 29px;
}

.faq_box .faq_list > li {
	padding: 24px 0;
	border-bottom: #000 1px solid;
}

.faq_box .faq_list > li:first-child {
	padding-top: 0;
}

.faq_box .faq_list .question {
	cursor: pointer;
	position: relative;
	padding-inline: 50px;
	font-size: 1.4rem;
	line-height: 1.88;
}

.faq_box .faq_list .question::before {
	content: "Q";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-family: "Inter", sans-serif;
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--color-accent-5);
}

.faq_box .faq_list .question .flag_accordion {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: inline-block;
	width: 36px;
	height: 36px;
	border: var(--color-accent-5) 1px solid;
	border-radius: 50%;
}

.faq_box .faq_list .question .flag_accordion::before,
.faq_box .faq_list .question .flag_accordion::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	background: var(--color-accent-5);
	transition: all 0.3s ease;
}

.faq_box .faq_list .question .flag_accordion::before {
	width: 11px;
	height: 1px;
}

.faq_box .faq_list .question .flag_accordion::after {
	width: 1px;
	height: 11px;
}

.faq_box .faq_list .question.open .flag_accordion::before,
.faq_box .faq_list .question.open .flag_accordion::after {
	transform: translate(-50%, -50%) rotate(45deg);
	transition: all 0.3s ease;
}

.faq_box .faq_list .answer {
	padding-top: 24px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.88;
	color: var(--color-accent-1);
}


/* SP */
@media (max-width: 767px) {
	.faq_box {
		margin-top: 32px;
		padding: 50px 0;
	}

	.faq_box .faq_heading {
		font-size: 2.0rem;
	}

	.faq_box .faq_list .question {
		padding-left: 35px;
	}
}