@charset "utf-8";

/*-----------------------------------------------------------------------------------------------*/
/* よくいただく質問 -----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.contents dl {
	border-bottom: var(--color-border) solid 1px;
	padding: var(--margin-30) 0;
}
.contents dt {
	cursor: pointer;
	display: flex;
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
	padding-left: 30px;
	position: relative;
}
.contents dt::before {
	border-right: var(--color-black) solid 2px;
	border-bottom: var(--color-black) solid 2px;
	content: "";
	height: 12px;
	position: absolute;
	top: 7px;
	left: 5px;
	transform: rotate(-45deg);
	transition: border-color 0.2s ease-out;
	width: 12px;
}
.contents .q { width: 1.5em; }
.contents .text { flex: 1; }

.contents dt:hover { color: var(--color-hover); }
.contents dt:hover::before { border-color: var(--color-hover); }

.contents dd {
	font-size: var(--font-m);
	max-height: 0;
	overflow: hidden;
	line-height: var(--line-m);
	/*padding-top: var(--margin-20);*/
	padding-left: 30px;
	transition: max-height 0.2s ease-out;
	text-align: justify;
}
.contents dd > div { padding-top: var(--margin-20); }
.contents dd p:not(:first-of-type) { margin-top: 2em; }
.contents dd img { max-width: 480px; }


.contents dl.active dt::before {
	top: 5px;
	transform: rotate(45deg);
}
/*-----------------------------------------------------------------------------------------------*/