@charset "utf-8";
section > section {
	width: calc(100% - 2rem);
	margin-left: auto;
	margin-right: auto;
	padding: 2em 0;
}
h3{
	margin-bottom: 0.5em;
}
.faq-details {
	border-bottom: 1px solid #eee;
	overflow: hidden;
}
/* 質問エリア */
.faq-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
	cursor: pointer;
	list-style: none;
	background-color: #fff;
	transition: background-color 0.2s;
}
.faq-summary::-webkit-details-marker {
	display: none;
} /* Safari用 */
.faq-summary:hover {
	background-color: #fcfcfc;
}
/* Qアイコンの自動表示 */
.question {
	display: flex;
	align-items: center;
	font-weight: bold;
}
.question::before {
	content: "Q";
	color: var(--main);
	margin-right: 0.8em;
	font-size: 1.2em;
}
/* プラスマイナスアイコン */
.icon {
	position: relative;
	width: 1em;
	height: 1em;
}
.icon:before, .icon:after {
	content: "";
	position: absolute;
	background-color: #666;
	transition: transform 0.3s;
}
.icon:before { /* 横棒 */
	width: 100%;
	height: 2px;
	top: 50%;
	transform: translateY(-50%);
}
.icon:after { /* 縦棒 */
	width: 2px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
}
/* 開いた時に縦棒を回転させて消す（マイナスに見せる） */
.faq-details.is-open .icon:after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}
/* 回答エリアのアニメーション設定 */
.faq-content {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: height 0.3s ease-out, opacity 0.3s ease-out;
}
.faq-details.is-open .faq-content {
	opacity: 1;
}
/* Aアイコンの自動表示 */
.faq-body {
	padding: 1em;
	display: flex;
	line-height: 1.6;
}
.faq-body::before {
	content: "A";
	color: #ff4757;
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 0.8em;
}
@media screen and (min-width: 768px) {
	section > section {
		width: 70%;
		max-width: 960px;
	}
}