@charset "UTF-8";


/* faq ---------------------------------------*/

.faq {
	padding: 67px 60px 60px;
}

.faq-head {
	margin-bottom: 40px;
}

.faq-head-title {
	font-size: 40px;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #262626;
	margin-bottom: 31px;
	text-align: center;
}

.faq-head-text {
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 2;
	color: #595959;
	text-align: center;
}

.faq-list-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.faq-list {
	margin-bottom: 120px;
}

.faq-list-item {
	border-bottom: 1px solid #D9D9D9;
	padding-bottom: 4px;
	margin-bottom: 11px;
}
.faq-list-item:last-child {
	margin-bottom: 0;
}

.faq-list-item-question {
	padding: 20px 0 15px 44px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	cursor: pointer;
}

.faq-list-item-question-title {
	font-size: 16px;
	letter-spacing: 0.07em;
	line-height: 1.6;
	position: relative;
}

.faq-list-item-question-title::before {
	display: inline-block;
	content: 'Q';
	vertical-align: middle;
	margin-right: 10px;
	font-family: outfit;
	font-size: 24px;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #B59071;
	width: 22px;
	height: 24px;
	text-align: center;
	position: absolute;
	left: -44px;
	top: 1px;
}

.faq-list-item-question-icon {
	width: 40px;
	height: 40px;
	margin-right: 4px;
	position: relative;
	transition: all .6s var(--easeImage);
}

.faq-list-item-question-icon span {
	display: block;
	width: 100%;
	height: 100%;
	background: #956134;
	border-radius: 50%;
	transition: all .6s var(--easeImage);
}

.faq-list-item-question-icon:hover span {
	transform: scale(1.2);
}

.faq-list-item-question-icon::before {
	display: inline-block;
	content: '';
	background: #fff;
	width: 1.5px;
	height: 14px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	transition: all .6s var(--easeImage);
}

.is-open .faq-list-item-question-icon::before {
	transform: translate(-50%, -50%) rotate(180deg);
	opacity: 0;
}

.faq-list-item-question-icon::after {
	display: inline-block;
	content: '';
	background: #fff;
	width: 14px;
	height: 1.5px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all .6s var(--easeImage);
}

.faq-list-item-answer {
	padding: 0 0 20px 44px;
	position: relative;
}

.faq-list-item-answer::before {
	display: inline-block;
	content: 'A';
	vertical-align: middle;
	margin-right: 10px;
	font-family: outfit;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #B59071;
	width: 22px;
	height: 24px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 2px;
}

.faq-list-item-answer-text {
	font-size: 16px;
	letter-spacing: 0.07em;
	line-height: 1.65;
}

.faq-list-item-answer-text-link {
	color: #956134;
}

.faq-list-item-answer-text-link:hover {
	text-decoration: underline;
}

.faq-btn-wrapper {
	text-align: center;
}

.faq-btn-text {
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 26px;
}

.faq-btn {
	display: inline-block;
	width: 640px;
	height: 80px;
	max-width: 100%;
	background: #956134;
	border: 1px solid #956134;
	border-radius: 50px;
	padding: 0 20px;
	font-size: 16px;
	letter-spacing: 0.02em;
	line-height: 80px;
	color: #fff;
	text-align: center;
	transition: all .6s var(--easeImage);
}

.faq-btn:hover {
	background: #fff;
	color: #956134;
}

/* small pc */
@media screen and (min-width: 768px) and (max-width: 1000px){

}
/* small pc */

@media screen and (min-width: 768px) and (max-width: 860px){


}


@media screen and (max-width: 767px){


	/* faq ---------------------------------------*/

	.faq {
		padding: 45px 20px 60px;
	}

	.faq-head {
		margin-bottom: 20px;
	}

	.faq-head-title {
		font-size: 24px;
		letter-spacing: -0.02em;
		margin-bottom: 16px;
	}

	.faq-head-text {
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: left;
	}

	.faq-list {
		margin-bottom: 80px;
	}

	.faq-list-item {
		border-bottom: 1px solid #D9D9D9;
		padding-bottom: 4px;
		margin-bottom: 0;
	}

	.faq-list-item:last-child {
		margin-bottom: 0;
	}

	.faq-list-item-question {
		padding: 20px 0 15px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		/* position: relative; */
		cursor: pointer;
		gap: 10px;
	}

	/* .faq-list-item-question::before {
		display: inline-block;
		content: 'Q';
		vertical-align: middle;
		margin-right: 10px;
		font-family: outfit;
		font-size: 20px;
		letter-spacing: 0.02em;
		line-height: 1;
		color: #B59071;
		width: 20px;
		height: 20px;
		text-align: center;
		position: absolute;
		left: 0;
		top: 20px;
	} */

	.faq-list-item-question-title {
		font-size: 14px;
		letter-spacing: 0.1em;
		line-height: 1.6;
		flex: 1;
	}

	.faq-list-item-question-title::before {
		display: inline-block;
		content: 'Q';
		vertical-align: middle;
		margin-right: 10px;
		font-family: outfit;
		font-size: 20px;
		letter-spacing: 0.02em;
		line-height: 1;
		color: #B59071;
		width: 20px;
		height: 20px;
		text-align: center;
		position: absolute;
		left: -30px;
		top: 1px;
	}

	.faq-list-item-question-icon {
		width: 32px;
		height: 32px;
		background: #956134;
		border-radius: 50%;
		margin-right: 0;
		position: relative;
	}

	.faq-list-item-question-icon:hover span {
		transform: scale(1);
	}

	.faq-list-item-question-icon::before {
		width: 1px;
		height: 11px;
	}

	.faq-list-item-question-icon::after {
		width: 11px;
		height: 1px;
	}

	.faq-list-item-answer {
		padding: 0 0 13px 30px;
		position: relative;
	}

	.faq-list-item-answer::before {
		display: inline-block;
		content: 'A';
		vertical-align: middle;
		margin-right: 10px;
		font-family: outfit;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.02em;
		line-height: 1;
		color: #B59071;
		width: 20px;
		height: 20px;
		text-align: center;
		position: absolute;
		left: 0;
		top: 2px;
	}

	.faq-list-item-answer-text {
		font-size: 14px;
		letter-spacing: 0.07em;
		line-height: 1.6;
	}
	
	.faq-list-item-answer-text-link:hover {
		text-decoration: none;
	}

	.faq-btn-wrapper {
		text-align: center;
	}

	.faq-btn-text {
		font-size: 14px;
		letter-spacing: 0.1em;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 15px;
	}

	.faq-btn {
		display: inline-block;
		width: 100%;
		height: 56px;
		max-width: 100%;
		background: #956134;
		border-radius: 50px;
		padding: 0 10px;
		font-size: 14px;
		letter-spacing: 0.02em;
		line-height: 56px;
		color: #fff;
		text-align: center;
		transition: all .25s ease;
	}

	.faq-btn:hover {
		background: #956134;
		color: #fff;
	}

}