/* CSS Document */

#pamphlet{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-block: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(72px, calc(96 / 1200 * 100vw), 96px);
}
#pamphlet>*{
	grid-column: 2;
}
#pamphlet h2{
	font: 600 clamp(20px, calc(28 / 768 * 100vw), 28px) var(--font-min);
	letter-spacing: 0.1em;
	text-align: center;
}
#pamphlet #pamphletList{
	margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
}

#pamphletList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 12px), 200px), 1fr));
	grid-gap: clamp(40px, calc(56 / 1200 * 100vw), 56px) clamp(16px, calc(48 / 1200 * 100vw), 48px);
}
#pamphletList section{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	grid-row-gap: 0;
}
#pamphletList section:not(:has(figure)):before{
	content: "";
	grid-column: 1;
	grid-row: 2;
	aspect-ratio: 1 / 1.414;
	background: var(--dummy);
	background-size: 50%;
	border: 1px solid currentColor;
}
#pamphletList section h3{
	display: grid;
	align-items: center;
	padding: 8px 16px;
	background: var(--color-theme);
	color: #fff;
	font: 600 clamp(14px, calc(16 / 576* 100vw), 16px) var(--font-min);
}
#pamphletList section h3+div{
	display: grid;
	grid-row-gap: 8px;
	margin-top: 16px;
}
#pamphletList section h3+div p{
	margin-bottom: 8px;
}
#pamphletList section p{
	font-size: clamp(12px, calc(14 / 576 * 100vw), 14px);
}
#pamphletList section p:empty{
	display: none;
}
#pamphletList section a{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(16px, calc(24 / 768 * 100vw), 24px);
	align-items: center;
	min-height: 48px;
	padding: 4px 16px;
	background: #808080;
	color: #fff;
	font-family: var(--font-min);
	text-align: center;
	text-decoration: none;
}
#pamphletList section a:nth-of-type(1){
	margin-top: auto;
}
#pamphletList section a: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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><path d="M8,14.5v-5.25c0-.33.13-.65.37-.88.23-.23.55-.37.88-.37s.65.13.88.37c.23.23.37.55.37.88v2.75h2c.53,0,1.04.21,1.41.59s.59.88.59,1.41v.5"/><path d="M7.26,4.1c-1.25-1.37-2.92-2.28-4.75-2.59-.12-.02-.25,0-.37.03-.12.04-.23.1-.33.18-.1.08-.18.19-.23.3-.05.12-.08.24-.08.37v7.13c0,.22.08.43.22.59.15.16.35.27.56.29,1.43.19,2.77.76,3.9,1.63"/><path d="M7.26,6.86v-2.76"/><path d="M12.23,10.4c.22-.02.42-.13.56-.29.15-.16.23-.38.22-.59V2.39c0-.13-.03-.25-.08-.37-.05-.12-.13-.22-.23-.3-.1-.08-.21-.14-.33-.18-.12-.04-.25-.04-.37-.03-1.83.3-3.5,1.21-4.75,2.59"/></svg>') no-repeat center / contain;
}
#pamphletList section a[href*=".pdf"]:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><path d="M9.5,1.5v4h4"/><path d="M13.5,13.5c0,.27-.11.52-.29.71s-.44.29-.71.29H3.5c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71V2.5c0-.27.11-.52.29-.71.19-.19.44-.29.71-.29h6.5l3.5,3.5v8.5Z"/></svg>');
}
#pamphletList section a[href*=".zip"]:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><path d="M1.5,13.25V2.75c0-.27.11-.52.29-.71.19-.19.44-.29.71-.29h3.69c.23,0,.45.07.63.2.18.14.31.33.37.56l.31,1.24h6c.27,0,.52.11.71.29s.29.44.29.71v8.5c0,.27-.11.52-.29.71-.19.19-.44.29-.71.29H2.5c-.27,0-.52-.11-.71-.29-.19-.19-.29-.44-.29-.71Z"/></svg>');
}
#pamphletList section a:hover{
	background: var(--color-theme);
}
#pamphletList section a[href*=".pdf"],
#pamphletList section a[href*=".zip"]{
	background: #fff;
	border: 1px solid var(--color-border);
	color: inherit;
}
#pamphletList section a[href*=".pdf"]:hover,
#pamphletList section a[href*=".zip"]:hover{
	color: var(--color-theme);
}
#pamphletList section figure{
	grid-column: 1;
	grid-row: 2;
	border: 1px solid currentColor;
}
#pamphletList section figure img{
	aspect-ratio: 1 / 1.414;
	object-fit: cover;
}

#pamphletSubmit{
	position: sticky;
	bottom: 0;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
	padding: 24px 0;
	background: rgba(250, 250, 250, 0.7);
}
#pamphletSubmit>*{
	grid-column: 2;
}
#pamphletSubmit a{
	justify-self: center;
	display: grid;
	align-items: center;
	column-gap: 8px;
	width: min(100%, 280px);
	min-height: 48px;
	background: var(--color-theme);
	padding: 4px 16px;
	border-radius: 24px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	text-decoration: none;
}
#pamphletSubmit:not(.on){
	display: none;
}