/* CSS Document */

#main{
	margin-bottom: clamp(64px, calc(128 / 1200 * 100vw), 128px);
}

#pamphlet{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 0.75fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			height: 1em;
			background: currentColor;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		text-align: center;
	}
	#pamphletList{
		margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	}
}

#pamphletList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
	grid-gap: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	& section{
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-row-gap: 16px;
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	}
	& h3+div{
		display: grid;
		align-content: space-between;
		grid-row-gap: 16px;
		&:has(p:empty){
			align-content: end;
		}
	}
	& p{
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		&:empty{
			display: none;
		}
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		margin: 0 auto;
		padding: 4px 16px;
		border: 1px solid #C1272D;
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		text-align: center;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: #C1272D;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M11.73,14.21H10v3.94h1.78c1.11,0,1.28-.4,1.28-2S12.72,14.21,11.73,14.21Zm-5.4,0H4.41V16.1H6.32c.56,0,.92-.1.92-.94S6.89,14.21,6.33,14.21ZM20,0H2A2,2,0,0,0,0,2V20a1.75,1.75,0,0,0,0,.4A2,2,0,0,0,2,22H20a2,2,0,0,0,2-1.6,1.75,1.75,0,0,0,0-.4V2A2,2,0,0,0,20,0ZM6.41,17h-2v2.05h-1V13.27h3.1c1.3,0,1.78.58,1.78,1.87S7.8,17,6.41,17Zm5.49,2.05H9V13.27h2.81c1.48,0,2.3.32,2.3,2.93C14.08,18.45,13.47,19.09,11.9,19.09ZM19,14.21H16v1.58h2.83v.94H16v2.36H15V13.27h4ZM21,11H1V2A1,1,0,0,1,2,1H9V6H7.26a.3.3,0,0,0-.21.51l3.74,3.74a.29.29,0,0,0,.42,0L15,6.51A.3.3,0,0,0,14.74,6H13V1h7a1,1,0,0,1,1,1Z"/></svg>') no-repeat center / contain;
		}
	}
	& figure{
		order: -1;
		background: #E7E7E7;
		& img{
			aspect-ratio: 1;
			object-fit: contain;
		}
	}
}
	#pamphletList .linkBut{
		background: #fff;
		color: inherit;
		fill: #C1272D;
		box-shadow: 0 0 0 1px #C1272D inset;
		}
		#pamphletList .linkBut:hover{
			background: #FAEBEC;
			box-shadow: 0 0 0 2px #C1272D inset;
			}
		#pamphletList .linkBut i{
			margin: 0 0.5em 0 0;
			order: -1;
			}