@charset "utf-8";
/* CSS Document */

#faq {
	margin-bottom: 110px;
}
.faq_mv#mv_under img {
	object-position: 66%;
}
#faq .link_8 {
	gap: 20px 25px!important;
	flex-flow: row wrap;
}
#faq .link_8 li {
	width: calc((100% - 75px) / 4);
}
#faq .link_8 li a {
	cursor: pointer;
	word-break: inherit;
}
.panel2 {
	display: none;
}
.panel2.active {
	display: block;
}
.faq_bg {
	background: rgba(243,247,254,0.5);
	padding: 60px 6%;
}
.faq_bg > p {
	font-size: 13rem;
	color: rgba(189,181,151,0.15);
	letter-spacing: 0;
	font-family: 'Cormorant Garamond', serif;
	text-align: center;
	margin-top: 20px;
}

.faq_area {
	max-width: 900px;
	margin: 0 auto;
}
.faq_area section {
	border-bottom: 1px solid #2d4f0f;
}
.faq_area section:first-child {
	border-top: 1px solid #2d4f0f;
}
.faq_area h3 {
	padding: 18px 70px 18px 8px;
	font-size: 1.5rem;
	font-weight: 400;
	display: flex;
	align-items: center;
	line-height: 130%;
	position: relative;
	cursor: pointer;
}
.faq_area h3::before {
	content: "Q";
	font-size: 3rem;
	margin-right: 15px;
	font-weight: 400;
	color: #2d4f0f;
}
.faq_area h3::after {
	content: "";
	position: absolute;
	right: 20px;
	background: url(../images/faq/list-open.svg) center no-repeat;
	width: 30px;
	height: 30px;
	filter: brightness(0) saturate(100%) invert(24%) sepia(22%) saturate(2196%) hue-rotate(52deg) brightness(91%) contrast(88%);
}
.faq_area h3.open::after {
	background: url(../images/faq/list-close.svg) center no-repeat;
	filter: brightness(0) saturate(100%) invert(24%) sepia(22%) saturate(2196%) hue-rotate(52deg) brightness(91%) contrast(88%);
}
.faq_area section > div {
	background: #fff;
	padding: 18px 50px 20px;
	margin-bottom: 10px;
	display: none;
}
.faq_area section > div span {
	text-align: center;
	color: #d9847e;
	background: linear-gradient(transparent 60%, #faf9f7 0%);
	padding: 0 18px 2px;
	font-size: 2.0rem;
	font-weight: 500!important;
	letter-spacing: 0.3rem;
	text-indent: 0.3rem;
	display: table;
	margin: 0 auto 12px;
}
.faq_area div p {
	line-height: 157%;
}
.faq_area section > div .cmn_btn {
	max-width: 400px;
	margin: 20px auto 0;
	font-size: 1.3rem;
}
.faq_area section > div .cmn_btn a {
	height: 45px;
}

@media screen and (max-width: 1194px) {
	.faq_bg > p {
		font-size: 11rem;
	}
}
@media screen and (max-width: 1024px) {
	#faq .link_8 li {
		font-size: 1.3rem;
	}
	.faq_bg {
		padding: 60px 5%;
	}
	.faq_bg > p {
		font-size: 10rem;
	}
}
@media screen and (max-width: 768px) {
	.faq_bg > p {
		font-size: 8rem;
	}
}
@media screen and (max-width: 480px) {
	#faq {
		margin-bottom: 60px;
	}
	#faq .link_8 {
		margin-bottom: 50px;
		gap: 10px 15px!important;
	}
	#faq .link_8 li {
		width: calc((100% - 45px) / 4);
	}
	#faq .link_8 li a {
		font-size: 1.2rem;
	}
	.guide_faq_ttl {
		margin-bottom: 30px;
	}
	.faq_area h3 {
		font-size: 1.4rem;
		padding: 15px 40px 15px 0;
	}
	.faq_area h3::before {
		font-size: 2.6rem;
		line-height: 0;
	}
	.faq_area h3::after {
		right: 0;
		width: 22px;
		height: 22px;
	}
	.faq_area section > div {
		padding: 10px 25px 15px;
		font-size: 1.3rem;
	}
	.faq_area section > div .cmn_btn {
		font-size: 1.2rem;
		margin: 15px auto 0;
	}
	.faq_area section > div .cmn_btn a {
		height: 40px;
	}
	.faq_bg {
		padding: 30px 5%;
	}
	.faq_bg > p {
		font-size: 5.5rem;
		line-height: 90%;
		margin-top: 15px;
	}
}