.faq_button-content {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 1rem;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: 2.5rem;
}

@media (min-width: 600px) {
	.faq_button-content {
		grid-template-columns: repeat(auto-fit, 10.25rem);
	}
}

.faq_button {
	min-width: 160px;
	display: inline-block;
	padding: 1px;
	border-radius: 8px;
	background: linear-gradient(90deg, #5FC4CF, #4A9ED9 53%, #175AC4);
}

.faq_button_text {
	width: 100%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: var(--c-light);
	border-radius: 8px;
	padding: 12px 0 14px;
	color: var(--c-dark);
	font-size: 16px;
	font-weight: var(--fw-lg);
	line-height: 145%;
}

.faq_button_arrow {
	color: var(--c-dark);
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-left: 0;
	border-bottom: 0;
	transform: translateY(-25%) rotate(135deg);
}

.faq_sec {
	max-width: 60rem;
	margin-inline: auto;
}

.faq_sec:not(:last-child) {
	margin-bottom: 2.5rem;
}

.faq_sec h2 {
	border-bottom: 1px solid var(--c-dark);
	padding-left: 1rem;
	margin-bottom: 1.5rem;
}

.p-faq {
	--side-pad: 1.5rem;
	--vertical-pad: 1rem;
	--gap: 1rem;
	--this-color: var(--c-dark);
	display: block;
	background: var(--c-light);
	border-radius: 10px;
	overflow: hidden;
	font-family: var(--ff-g);
	max-width: 57rem;
	margin-inline: auto;
	border: 1px solid #31BEC5;
}

.p-faq:not(:last-of-type) {
	margin-bottom: 1.5rem;
}

/**********************************
* ***質問
* **********************************/
.p-faq__head {
	display: flex;
	gap: var(--gap);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
	padding: 1rem;
	color: var(--c-light);
	background: #31BEC5;
	font-weight: var(--fw-lg);
}

/* アニメーション */
.p-faq[open] .p-faq__head {
	margin-bottom: 1rem;
}

.p-faq__head:hover,
.p-faq__head:focus {
	opacity: 0.8;
}

.p-faq__headInner {
	flex-grow: 1;
	position: relative;
	margin-left: .75rem;
}

.p-faq__headInner::before {
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	background: var(--c-light);
	left: -.75rem;
	top: 50%;
	transform: translateY(-50%);
}

/**********************************
* ***回答
* **********************************/
.p-faq__body {
	display: flex;
	gap: var(--gap);
	padding: 0 1rem 1rem 1rem;
}

/* アニメーション */
.p-faq[open] .p-faq__body {
	animation: fadein 0.5s ease;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.p-faq__bodyInner {
	flex-grow: 1;
	position: relative;
	margin-left: .75rem;
}

.p-faq__bodyInner::before {
	position: absolute;
	content: "";
	width: 1px;
	height: 100%;
	background: #C2C2C2;
	left: -.75rem;
	top: 50%;
	transform: translateY(-50%);
}

/**********************************
* ***QA文字
* **********************************/
/* QA文字　共通 */
.p-faq__icon {
	display: inline-block;
}

/* Q.文字 */
.p-faq__icon.--q::before {
	content: "Q";
}

/* A.文字 */
.p-faq__icon.--a::before {
	content: "A";
	font-weight: var(--fw-lg);
}

/**********************************
* ***開閉アイコン
* **********************************/
.p-faq__toggle {
	--toggle-size: 1.25em;
	position: relative;
	display: inline-block;
	width: var(--toggle-size);
	/* aspect-ratio: 1; */
}

.p-faq__toggle::before,
.p-faq__toggle::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	width: var(--toggle-size);
	height: 2px;
	background: var(--c-light);
	transition: var(--ani-t--normal) ease-out;
}

.p-faq__toggle::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

.p-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* アニメーション */
.p-faq[open] .p-faq__toggle::before {
	transform: translate(-50%, -50%) rotate(180deg);
}

.p-faq[open] .p-faq__toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 既存のマーカー */
.p-faq__head {
	list-style: none;
}

.p-faq__head::-webkit-details-marker {
	display: none;
}