@charset "utf-8";

.content{
	width: var(--wid-1024);
	margin: auto;
	padding: 6rem 0 0;

	.common_title{
		display: flex;
		gap: 2rem;
		align-items: center;
		flex-direction: row;
		white-space: nowrap;
		&::after{
			content: "";

			width: 100%;
		}
	}
	.faq{
		color: var(--main-color);
		.common_title::after{border: 1px solid var(--main-color);}
		.faq_box{
			margin-top: 3rem;
			display: flex;
			flex-direction: column;
			gap: 2rem;
		}
		.faq_q{
			width: 100%;
			text-align: left;
			background: var(--gradeD);
			border: none;
			font-size: 1.6rem;
			padding: 2.5rem 4.8rem 2.5rem 5.6rem;
			position: relative;
			font-weight: 700;
			color: #000;
			cursor: pointer;
		}
		.faq_q::after{
			content: "";
			position: absolute;
			right: 1.6rem;
			top: 50%;
			transform: translateY(-50%) rotate(180deg);
			width: 25px;
			height: 36px;
			background: url(../img/arrow.svg) no-repeat center/contain;
			transition: transform .2s ease;
		}
		.faq_q[aria-expanded="true"]::after{
			transform: translateY(-50%) rotate(0deg);
		}
		.faq_q .qa_icon{
			position: absolute;
			left: 1.6rem;
			top: 50%;
			transform: translateY(-50%);
			font-size: 3.2rem;
			color: #00a040;
			font-family: var(--font-en);
			font-weight: 400;
		}
		.faq_a{
			background: #fff;
			border-radius: 8px;
			padding: 0 2rem 0 5.6rem;
			margin-top: 0;
			color: #000;
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transition: max-height .35s ease, opacity .35s ease, padding .35s ease, margin .35s ease;
			position: relative;

			.qa_icon{
				position: absolute;
				left: 1.6rem;
				top: 50%;
				transform: translateY(-50%);
				font-size: 3.2rem;
				color: #00a040;
				font-family: var(--font-en);
			}
		}
		.faq_q[aria-expanded="true"] + .faq_a{
			max-height: 1000px;
			padding: 1.6rem 2rem 2rem 5.6rem;
			margin-top: .8rem;
			opacity: 1;
		}
	}
}

main .content:nth-last-of-type(1){
	margin-bottom: 8rem;
}