@charset "UTF-8";

#fap{
    background-color: var(--white)
}
.faq_header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    gap: 2rem;
	margin: 2rem 0 4rem
}
@media (min-width: 48em) {
	.faq_header {
		padding-top: 8rem;
		padding-bottom: 5rem;
		margin: 0 auto
	}
}
@media (max-width: 37.5em) {
	.faq_header {
		gap: 0
	}
}
.faq__heading {
	color: var(--brown);
	font-family: 'Zen Maru Gothic', serif;
    font-weight: 900;
    font-size: clamp(3rem, 2.857rem + 0.625vw, 4rem);
	line-height: 1.3;
	text-align: center;
	text-transform: capitalize;
	display: inline-block;
}
@media (min-width: 48em) {
	.faq__heading {
		letter-spacing: 3px;
		line-height: 1.28
	}
}
.faq__subtitle{
	display: inline-block;
    font-size: 1.3rem;
    font-weight: bold;
	color: var(--brown);
	text-align: center
}
.faq-wrapper{
    border-radius: 1rem;
    max-width: 800px;
    margin: 0 auto;
}
.faq-container{
    background-color: var(--brown);
    color: #fff;
	border-radius: 1rem;
	margin-bottom: 1rem;
}

.faq__btn{
    background-color: var(--brown);
    color: #fff;
    display: block;
    width: 100%;
    border: none;
    padding: 1.125rem 0 1.125rem 1.5625rem;
    cursor: pointer;
    position: relative;
	border-radius: 1rem;
    font-family: 'Zen Maru Gothic', serif;
    text-align: left;
}
@media (max-width: 37.5em){
	.faq__btn{
	padding: 1.125rem;
	}
}
.faq__btn:hover{
    background-color: var(--yellow);
    color: var(--brown)
}
.faq__btn::before,
.faq__btn::after{
    content: "";
    position: absolute;
    display: block;
    width: 16px;
    height: 2px; 
    background-color: #fff;
    right: 1rem;
    top: 1.825rem
}
.faq__btn::after{
    opacity: 1;
    transform: rotate(90deg);
    transition: all 0.3s;
	top: 1.825rem
}
.faq__btn.show::after{
    opacity: 0;
    transform: none
}
.faq-answer p{
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    opacity: 0;
    transition: all 0.3s
}
.faq-answer.show p{
	font-family: 'Zen Maru Gothic', serif;
    padding: 1.125rem 4.5rem;
    line-height: 1.7;
    opacity: 1;
    transform: none;

}
@media(max-width: 37.5em){
    .faq-answer.show p{
    padding: 1.125rem;
}
}
.faq-container .method-number::after{
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    background-image: url("../img/line_white.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
}
.faq-container dl{
    display: flex;
} 

.faq-container dt{
    padding-right: 1rem;
    display: inline-block;
    padding-right: 1rem;
} 
.faq-container dd{
    display: inline-block;
    max-width: 16rem;
}