@charset "UTF-8";

@media screen and (min-width: 768px),print {

#faq { width: 1100px; margin: 0 auto 100px; }

#faq .faq-list { border-top: 1px solid #E5E0CF; }

#faq .faq-item { border-bottom: 1px solid #E5E0CF; }

#faq .faq-q {
	position: relative;
	display: flex;
	align-items: center;
	padding: 28px 60px 28px 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: #1a1a1a;
}

#faq .faq-q .faq-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: 24px;
	border-radius: 50%;
	background-color: #F5F0DF;
	color: #D4300E;
	font-size: 22px;
	font-weight: 700;
	line-height: 44px;
	text-align: center;
	font-family: 'Abril Fatface', serif;
}

#faq .faq-q .faq-q-text { flex: 1 1 auto; }

#faq .faq-q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 16px;
	height: 16px;
	margin-top: -10px;
	border-right: 2px solid #D4300E;
	border-bottom: 2px solid #D4300E;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

#faq .faq-item.is-open .faq-q::after {
	margin-top: -4px;
	transform: rotate(225deg);
}

#faq .faq-a {
	display: none;
	margin: 0;
	padding: 0 0 32px 0;
}

#faq .faq-item.is-open .faq-a { display: flex; }

#faq .faq-a .faq-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: 24px;
	border-radius: 50%;
	background-color: #D4300E;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 44px;
	text-align: center;
	font-family: 'Abril Fatface', serif;
}

#faq .faq-a .faq-a-text {
	flex: 1 1 auto;
	margin-bottom: 0;
	padding-top: 8px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

}


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

#faq { margin: 0 5.3vw 16vw; }

#faq .faq-list { border-top: 1px solid #E5E0CF; }

#faq .faq-item { border-bottom: 1px solid #E5E0CF; }

#faq .faq-q {
	position: relative;
	display: flex;
	align-items: center;
	padding: 5vw 9vw 5vw 0;
	cursor: pointer;
	font-size: 4.2vw;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: #1a1a1a;
}

#faq .faq-q .faq-icon {
	flex: 0 0 auto;
	width: 9vw;
	height: 9vw;
	margin-right: 4vw;
	border-radius: 50%;
	background-color: #F5F0DF;
	color: #D4300E;
	font-size: 4.8vw;
	font-weight: 700;
	line-height: 9vw;
	text-align: center;
	font-family: 'Abril Fatface', serif;
}

#faq .faq-q .faq-q-text { flex: 1 1 auto; }

#faq .faq-q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2vw;
	width: 3vw;
	height: 3vw;
	margin-top: -2vw;
	border-right: 2px solid #D4300E;
	border-bottom: 2px solid #D4300E;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

#faq .faq-item.is-open .faq-q::after {
	margin-top: -1vw;
	transform: rotate(225deg);
}

#faq .faq-a {
	display: none;
	margin: 0;
	padding: 0 0 5vw 0;
}

#faq .faq-item.is-open .faq-a { display: flex; }

#faq .faq-a .faq-icon {
	flex: 0 0 auto;
	width: 9vw;
	height: 9vw;
	margin-right: 4vw;
	border-radius: 50%;
	background-color: #D4300E;
	color: #fff;
	font-size: 4.8vw;
	font-weight: 700;
	line-height: 9vw;
	text-align: center;
	font-family: 'Abril Fatface', serif;
}

#faq .faq-a .faq-a-text {
	flex: 1 1 auto;
	margin-bottom: 0;
	padding-top: 1vw;
	font-size: 3.8vw;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

}