@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
#faq .c-main__ttl02-wrap {
  background: url(../images/faq/header_fv.jpg) no-repeat top center/cover;
}

#faq main {
	margin-inline: auto;
	padding: 10rem 0;
	width: min(95%, 1200px);
}

summary {
	display: block;
}

summary::-webkit-details-marker {
	display: none;
}

.system-category {
	border-bottom: 2px solid #333;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 1.875rem;
	padding-bottom: 1.875rem;
	text-align: center;
}

.faq-list {
	margin-bottom: 6.25rem;
}

.faq-items {
	border-top: 1px dotted #1e1e1e;
}

.faq-item {
	border-bottom: 1px dotted #1e1e1e;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	padding: 32px 72px 32px 32px;
	text-align: justify;
}

.faq-question {
	display: block;
	position: relative;
}

.faq-question::before,
.faq-question::after {
	background: #333;
	content: "";
	position: absolute;
	top: 50%;
	translate: 0 -50%;
}

.faq-question::before {
	height: 1px;
	right: -40px;
	width: 16px;
}

.faq-question::after {
	height: 16px;
	right: -32px;
	transition: rotate 0.3s ease;
	width: 1px;
}

details[open] .faq-question::after {
	rotate: 90deg;
}

.faq-question-text {
	list-style: none;
	position: relative;
}

.faq-question-text::before {
	color: #00549c;
	content: "Q.";
	font-size: 16px;
	left: -24px;
	position: absolute;
	top: 0;
	translate: 0 0;
}

.faq-answer {
	padding: 24px 0 0;
}

.faq-answer-text {
	font-size: 13px;
	line-height: 1.6;
	list-style: none;
	position: relative;
	text-align: justify;
}

.faq-answer-text p a {
	font-weight: 700;
	text-decoration: underline;
}

.faq-answer-text::before {
	content: "A.";
	font-size: 16px;
	left: -24px;
	line-height: 24px;
	position: absolute;
	top: -4px;
}

@media (any-hover: hover) {

.faq-question:hover {
	cursor: pointer;
}

}

}

/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#faq .c-main__ttl02-wrap {
  background: url(../images/faq/sp_header_fv.jpg) no-repeat top center/cover;
}

#faq main {
	margin-inline: auto;
	padding: 19.324vw 0;
	width: min(95%, 94.2vw);
}

summary {
	display: block;
}

summary::-webkit-details-marker {
	display: none;
}

.system-category {
	border-bottom: 0.4vw solid #333;
	font-size: 4.831vw;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 7vw;
	padding-bottom: 3vw;
	text-align: center;
}

.faq-list {
	margin-bottom: 12.077vw;
}

.faq-items {
	border-top: 0.2vw dotted #1e1e1e;
}

.faq-item {
	border-bottom: 0.2vw dotted #1e1e1e;
	font-size: 3.865vw;
	font-weight: 700;
	line-height: 1.6;
	padding: 3.865vw 13.527vw 3.865vw 7.729vw;
	text-align: justify;
}

.faq-question {
	display: block;
	position: relative;
}

.faq-question::before,
.faq-question::after {
	background: #333;
	content: "";
	position: absolute;
	top: 3.14vw;
	translate: 0 0;
}

.faq-question::before {
	height: 0.242vw;
	right: -10.386vw;
	width: 3.865vw;
}

.faq-question::after {
	height: 3.865vw;
	right: -8.696vw;
	top: 1.449vw;
	transition: rotate 0.3s ease;
	width: 0.242vw;
}

details[open] .faq-question::after {
	rotate: 90deg;
}

.faq-question-text {
	list-style: none;
	position: relative;
}

.faq-question-text::before {
	color: #00549c;
	content: "Q.";
	font-size: 3.865vw;
	left: -5.797vw;
	position: absolute;
	top: -0.3vw;
	translate: 0 0;
}

.faq-answer {
	padding: 5.797vw 0 0;
}

.faq-answer-text p a {
	font-weight: 700;
	text-decoration: underline;
}

.faq-answer-text {
	font-size: 3.14vw;
	line-height: 1.6;
	list-style: none;
	position: relative;
	text-align: justify;
}

.faq-answer-text::before {
	content: "A.";
	font-size: 3.382vw;
	left: -5.797vw;
	line-height: 5.797vw;
	position: absolute;
	top: -0.6vw;
}

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

.faq-question:hover {
	cursor: pointer;
}

}

}