/* CSS Document */

#main{
	margin-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
}

#brochure{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 400"><path fill="white" opacity="0.1" d="M1366,23.59c-49.72-11.77-99.48-14.67-129.8-13.61-72.45,2.53-178.28,33.01-293.37,99-115.09,66-225.53,101.23-331.84,117.95-106.31,16.72-223.2,3.97-276.26-12.54s-163.7-59.58-216.27-89.37C118.46,125.02,65.87,92.63,0,85.07v262.08c42.97,5.38,91.05,1.56,142.21-15.86,145.25-49.45,176.76-76.57,288.31-79.7,111.56-3.13,200.19,20.55,289.72,42.68,89.53,22.12,389.57,114.18,563.27,86.69,29.99-4.75,57.55-11.84,82.48-20.89V23.59Z"/></svg>') no-repeat center -24px / max(640px, 100%) clamp(240px, calc(400 / 1200 * 100dvw), 400px);
	}
	& h2{
		grid-row: 1;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0;
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(35 / 768 * 100dvw), 35px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M452.22,106.19v-35.16c0-2.22-.91-4.39-2.48-5.97-1.58-1.56-3.73-2.47-5.97-2.47h-69.58c-3.91,0-8.25.5-13.08,1.38-8.42,1.53-18.3,4.28-28.8,8.16-15.75,5.83-32.86,14.12-48.03,24.78-7.56,5.34-14.66,11.25-20.81,17.8-2.69,2.86-5.17,5.86-7.47,8.95-5.02-6.83-11.12-13.06-17.84-18.72-16.03-13.47-35.69-23.88-53.94-31.08-9.12-3.58-17.91-6.36-25.78-8.28-3.94-.95-7.64-1.7-11.08-2.2-3.45-.5-6.61-.78-9.55-.78h-69.6c-2.22,0-4.39.91-5.95,2.47-1.58,1.58-2.48,3.75-2.48,5.97v35.16H0v322.13l233.19,14.06v7.03h45.62v-7.03l233.19-14.06V106.19h-59.78ZM219.72,413.5c-12.59-3.64-26.44-6.58-39.66-8.81-13.23-2.25-25.81-3.75-35.92-4.5-19.69-1.41-50.64-2.67-76.78-3.58-16.25-.58-30.61-1-39.16-1.23V133.88h31.58v238.16c0,2.25.91,4.41,2.48,5.98,1.56,1.58,3.73,2.47,5.95,2.47h69.59c2.44-.02,5.94.34,10.05,1.09,7.2,1.33,16.3,3.83,25.98,7.39,14.56,5.38,30.53,13.19,44.16,22.75,1,.72,1.97,1.42,2.92,2.12-.41-.11-.8-.25-1.2-.34ZM247.56,414.7c-2.95-3.05-6.11-5.98-9.41-8.77-16.03-13.47-35.69-23.88-53.94-31.06-9.12-3.59-17.91-6.38-25.78-8.28-3.94-.97-7.64-1.69-11.08-2.19-3.45-.53-6.61-.81-9.55-.81h-61.14V79.48h61.14c2.44-.02,5.94.33,10.05,1.08,7.2,1.31,16.3,3.81,25.98,7.41,14.56,5.38,30.53,13.16,44.16,22.75,6.81,4.78,13.03,10.03,18.22,15.55,4.73,5.02,8.58,10.3,11.34,15.67v272.77h0ZM264.44,414.72V142c4.34-8.5,11.44-16.72,20.28-24.16,14.05-11.84,32.33-21.62,49.25-28.28,8.44-3.31,16.56-5.88,23.56-7.58,3.5-.86,6.73-1.48,9.56-1.91s5.25-.61,7.09-.59h61.14v284.11h-61.14c-3.91.03-8.25.5-13.08,1.39-8.42,1.53-18.3,4.3-28.8,8.16-15.75,5.83-32.86,14.14-48.03,24.78-7.19,5.05-13.91,10.64-19.84,16.8ZM483.8,395.16h-79c-4.41,0-9.73.31-15.83.89-10.67,1.03-23.69,2.86-37.47,5.27-20.69,3.62-43.03,8.56-61.55,14.19-.61.19-1.17.36-1.77.53,13.52-10.56,30.22-19.34,45.78-25.45,8.44-3.33,16.56-5.89,23.56-7.58,3.5-.86,6.73-1.5,9.56-1.91,2.83-.42,5.25-.61,7.09-.61h69.58c2.23,0,4.39-.89,5.97-2.47s2.48-3.73,2.48-5.98v-238.16h31.58v261.28Z"/></svg>') no-repeat center / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		& p{
			font-weight: 500;
			font-size: clamp(14px, calc(20 / 768 * 100dvw), 20px);
			text-align: center;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
		}
		& ul{
			display: grid;
			justify-content: center;
			margin-top: 8px;
		}
		& li{
			padding-left: 1em;
			text-indent: -1em;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
	}
}

#list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 264px), 1fr));
	grid-gap: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	margin-top: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
	& section{
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 210 / 297;
			background: var(--dummy);
			border-radius: 10px;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& p{
			font-weight: 500;
		}
		& a{
			justify-self: center;
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 240px);
			min-height: 48px;
			padding: 4px 1em;
			background: var(--color-theme);
			border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
			color: #fff;
			font-weight: 500;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4,0c-1.1,0-2,.9-2,2v12c0,1.1.9,2,2,2h8c1.1,0,2-.9,2-2V5.33c0-.53-.21-1.04-.58-1.42l-3.33-3.33c-.38-.37-.88-.58-1.41-.58H4ZM12.17,5.5h-2.92c-.42,0-.75-.33-.75-.75V1.83l3.67,3.67Z"/></svg>') no-repeat center / contain;
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 210 / 297;
			object-fit: contain;
			background: #f2f2f2;
			border-radius: 10px;
		}
	}
}