/* CSS Document */

#main{
	overflow: hidden;
	}
	#main h2{
		font: 700 clamp(24px, 4.8vw, 32px) var(--font-min);
		letter-spacing: 0.025em;
		text-align: center;
		}
	@media (min-width: 1200px) {
		#main h2{
			font-size: 36px;
			}
		}

#pamphlet{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	}
	#pamphlet > *{
		grid-column: 2;
		z-index: 1;
		}
	#pamphlet h2{
		grid-column: 1 / 4;
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		padding: clamp(48px, 9.6vw, 64px) 0;
		background: var(--pattern);
		border-bottom: 1px solid var(--color-border);
		font: 700 clamp(24px, 4.8vw, 32px) var(--font-min);
		letter-spacing: 0.025em;
		text-align: center;
		}
		#pamphlet h2:before{
			content: "";
			}
	#pamphlet h2+div{
		margin: clamp(48px, 9.6vw, 64px) auto;
		}

#pamphletList{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: clamp(32px, 6vw, 40px) clamp(24px, 4.8vw, 32px);
	padding-bottom: clamp(32px, 6vw, 40px);
	border-bottom: 1px solid currentColor;
	}
	#pamphletList dl{
		display: grid;
		grid-template-areas: 'photo' 'title' 'text' 'link';
		grid-template-rows: auto auto 1fr auto;
		align-content: start;
		grid-gap: 8px 0;
		}
		#pamphletList dl:before{
			content: "";
			grid-area: photo;
			aspect-ratio: 1 / 1.414;
			background: var(--dummy);
			background-size: cover;
			}
			#pamphletList dl:has(img):before{
				visibility: hidden;
				}
	#pamphletList dt{
		grid-area: title;
		}
	#pamphletList dt+dd{
		grid-area: text;
		font-size: clamp(12px, 2.1vw, 14px);
		}
	#pamphletList dd+dd{
		display: contents;
		}
		#pamphletList dd img{
			grid-area: photo;
			aspect-ratio: 1 / 1.414;
			object-fit: contain;
			}
		#pamphletList dd a{
			grid-area: link;
			justify-self: center;
			display: grid;
			grid-template-columns: auto 18px;
			align-items: center;
			grid-gap: 8px;
			min-height: 40px;
			width: min(80%, 160px);
			margin-top: 16px;
			padding: 4px 16px;
			outline: 1px solid var(--color-border);
			outline-offset: -1px;
			border-radius: 20px;
			font-size: clamp(12px, 2.1vw, 14px);
			color: inherit;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			}
			#pamphletList dd a:after{
				content: "";
				aspect-ratio: 1;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 4v13h-6c-0.728 0-1.412 0.195-2 0.535v-10.535c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879zM11 17.535c-0.588-0.34-1.272-0.535-2-0.535h-6v-13h5c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121zM22 2h-6c-1.38 0-2.632 0.561-3.536 1.464-0.167 0.167-0.322 0.346-0.464 0.536-0.142-0.19-0.297-0.369-0.464-0.536-0.904-0.903-2.156-1.464-3.536-1.464h-6c-0.552 0-1 0.448-1 1v15c0 0.552 0.448 1 1 1h7c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414c0 0.552 0.448 1 1 1s1-0.448 1-1c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h7c0.552 0 1-0.448 1-1v-15c0-0.552-0.448-1-1-1z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
			#pamphletList dd a:hover{
				outline: none;
				background: var(--color-theme);
				color: #fff;
				}
			#pamphletList dd a[href*=".pdf"]: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"><path d="m8.27,10.93c.19.2.45.31.73.31s.54-.11.73-.31l4-4.24c.38-.4.36-1.03-.04-1.41-.4-.38-1.04-.36-1.41.04l-2.27,2.41V1c0-.55-.45-1-1-1s-1,.45-1,1v6.72l-2.27-2.41c-.38-.4-1.01-.42-1.41-.04-.4.38-.42,1.01-.04,1.41l4,4.24Zm7.73-.93c-.55,0-1,.45-1,1v4H2v-4c0-.55-.45-1-1-1s-1,.45-1,1v5c0,.55.45,1,1,1h15c.55,0,1-.45,1-1v-5c0-.55-.45-1-1-1Z"/></svg>');
				-webkit-mask-size: 17px 17px;
				}
	@media (min-width: 768px) {
		#pamphletList{
			grid-template-columns: repeat(3, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#pamphletList{
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 48px 40px;
			padding-bottom: 80px;
			}
		}

#pamphletFoam{
	display: grid;
	justify-items: center;
	grid-gap: clamp(24px, 4.8vw, 32px);
	padding: clamp(40px, 7.2vw, 48px) 0 clamp(64px, 10.8vw, 72px) 0;
	}
	@media (min-width: 1200px) {
		#pamphletFoam{
			padding: 56px 0 80px 0;
			}
		}

.button{
	display: grid;
	grid-template-areas: 'text icon';
	grid-template-columns: 1fr clamp(24px, 4.8vw, 32px);
	align-items: center;
	grid-gap: 8px;
	min-width: 240px;
	min-height: clamp(48px, 8.4vw, 56px);
	padding: 4px 16px 4px 24px;
	background: var(--color-theme2);
	border-radius: clamp(24px, 4.2vw, 28px);
	color: #fff;
	font-size: clamp(12px, 2.4vw, 16px);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	}
	.button:before,
	.button:after{
		content: "";
		grid-area: icon;
		aspect-ratio: 1;
		transform: translateX(4px);
		}
	.button:before{
		background: currentColor;
		border-radius: 100%;
		}
	.button:after{
		-webkit-mask: var(--icon-chevron) center no-repeat;
		-webkit-mask-size: 14px 14px;
		background: var(--color-theme2);
		}
	@media (min-width: 1200px) {
		.button{
			min-height: 80px;
			padding: 8px 32px;
			border-radius: 40px;
			}
		}