/* CSS Document */

details{
	all: unset;
	box-sizing: border-box;
	display: block;
	}
	details::details-content{
		box-sizing: border-box;
		}

summary{
	all: unset;
	box-sizing: border-box;
	display: block;
	}
	summary::-webkit-details-marker{
		display:none;
		}

#main{
	margin-bottom: 4em;
	}

#faq{
	padding-top: unset;
	}
	#faq h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 1rem 0 0.4em 0;
		background: #8D686D;
		color: #fff;
		font-weight: 700;
		font-size: clamp(2.4rem, 5.835vw + 1rem, 8rem);
		font-family: var(--font-serif);
		letter-spacing: 0.025em;
		text-align: center;
		line-height: 1;
		}
	#faq h2:lang(es){
		padding-bottom: 1.2rem;
		}
	#faq h2:lang(th){
		padding: 1.2rem 0 1.5rem 0;
		}

#faqList{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: 2em;
	margin-top: var(--space);
	}
	#faqList section{
		padding: unset;
		background: #fff;
		border: 1px solid #BDBDBD;
		}
	#faqList h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		padding: 0.8em;
		font-size: clamp(2rem, 1.953vw + 1rem, 2.8rem);
		font-family: var(--font-serif);
		line-height: 1.5;
		cursor: pointer;
		}
		#faqList h3:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: #8D686D;
			transform: translateY(calc(0.75em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="11" width="2" height="24"/><rect y="11" width="24" height="2"/></svg>') no-repeat center / contain;
			}
		#faqList h3.open:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect y="11" width="24" height="2"/></svg>');
			}
	#faqList h3+div{
		display: grid;
		grid-row-gap: 1em;
		padding: clamp(1em, 5vw, 2em);
		border-top: 1px solid #BDBDBD;
		}
	#faqList details{}
		#faqList details::details-content{
			display: contents !important;
			}
	#faqList summary{
		display: grid;
		grid-template-columns: auto 1fr auto;
		column-gap: 0.5em;
		padding: 1em;
		background: #fff;
		border: 1px solid #BDBDBD;
		font-weight: bold;
		cursor: pointer;
		}
		#faqList summary:before{
			content: "Q";
			color: var(--primary-color);
			font-size: 1.25em;
			}
		#faqList summary:after{
			content: "";
			align-self: center;
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			opacity: 0.5;
			transition: transform 0.2s ease-out;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black;"><polyline points="11 3.5 6 8.5 1 3.5"/></svg>') no-repeat center / contain;
			}
		#faqList summary.open:after{
			transform: scale(1, -1);
			}
	#faqList summary+div{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		margin: 1em 0;
		overflow: hidden;
		}
		#faqList summary+div:before{
			content: "A";
			grid-row: 1 / 3;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 1.8em;
			background: var(--primary-color);
			color: #fff;
			font-weight: bold;
			text-align: center;
			line-height: 1;
			}

.buttonSet{
	margin-top: 2em;
	}
	.buttonSet ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 0.5em 2em;
		}
	.buttonSet a{
		position: relative;
		display: grid;
		align-items: center;
		min-height: calc(48px + 6px);
		padding: 0.25em 1em calc(0.25em + 6px) 1em;
		color: inherit;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		}
		.buttonSet a:hover{}
			.buttonSet a:hover:after{
				animation: linkButB forwards 0.2s ease-in;
				}
		.buttonSet a:after{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 12px;
			background: currentColor;
			transform-origin: left center;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat center left / calc(100% - 4px) 3px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><polygon points="0 0 0 6 6 3 0 0"/></svg>') no-repeat center right / contain;
			}
	@media (max-width: 575.98px) {
		.buttonSet ul{
			display: grid;
			}
		}