/* CSS Document */

#main{
	margin-bottom: clamp(80px, calc(160 / 992 * 100dvw), 160px);
}

#faq{
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 0.5em 0;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
		text-align: center;
	}
}

#list{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	margin-top: clamp(48px, calc(64 / 992 * 100dvw), 64px);
	& details{
	    border: 1px solid #dedede;
	}
	& summary{
		display: grid;
		grid-template-columns: auto 1fr auto;
		column-gap: 0.5em;
		padding: clamp(16px, calc(24 / 992 * 100dvw), 24px);
		font-weight: 700;
		cursor: pointer;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.825em - 50%));
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 17px;
			background: var(--color-theme);
			transform: translateY(calc(0.825em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" style="fill: none; stroke: black; stroke-miterlimit: 10;"><line x1="8.5" x2="8.5" y2="17"/><line y1="8.5" x2="17" y2="8.5"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" style="fill: none; stroke: black; stroke-miterlimit: 10;"><line y1="8.5" x2="17" y2="8.5"/></svg>');
		}
	}
	& summary+div{
		padding: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	    border-top: 1px dashed #dedede;
	}
}

.fr-view{
	font-weight: 500;
}