.faq {
	margin-top: 1rem;
	background-image: url('../../../image/module/home/block_7-bg.png');
	background-repeat: no-repeat; 
	background-position: right top;
}
.faq .content {
	width: min(90%, 104rem); 
	margin: 0 auto; 
	padding-top: 1rem;
	padding-bottom: 5rem;
}
.faq .item {
	position: relative; 
	padding: 1rem 7rem 1rem 7rem; 
	border-bottom: 1px solid #dbdadc;
}
.faq .item + .item {margin-top: 1rem;}
.faq .item .question {
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	position: relative; 
	line-height: 1; 
	cursor: pointer;
	padding: 0;
}
.faq .item .question span {font-size: 2rem;}
.faq .item .question i {width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; font-size: 28px;}
.faq .item .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-top: 0;
    opacity: 0;    margin-top: 3rem;
    font-size: 18px;
}
.faq .item .answer p {margin: 0;}
.faq .item .question:hover,
.faq .item .question.active {color: var(--color-main);}

.faq .item.active {border-radius: 20px; background-color: white; padding: 3rem 7rem 1rem 7rem;}
.faq .item.active::before {
	content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px;
	background: linear-gradient(0deg, var(--color-main), white 90%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}
.faq .item.active .question {margin-top: -2rem;}
.faq .item.active .question:before {
	content: ''; position: absolute; top: 15px; right: -7rem; z-index: 1;
	width: 5.5rem; height: 10px; background-color: var(--color-main);
}
.faq .item.active .question span {font-weight: bold;}
.faq .item.active .question i {border: 1px solid black;}
.faq .item.active .question:hover i {border-color: var(--color-main);}
.faq .item.active .answer {max-height: 500px; padding: 0 0 3rem 0; opacity: 1; font-size: 20px;}