/* CSS Document */

#pagePath{
	background: #41583F;
	color: #fff;
}

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

#pamphlet{
	margin-bottom: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	display: grid;
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) 0 clamp(56px, calc(64 / 1200 * 100vw), 64px) 0;
		background: #41583F;
		color: #fff;
		font: 600 clamp(45px, calc(65 / 768 * 100vw), 65px) 'eb-garamond', var(--font-min);
		letter-spacing: 0.045em;
		text-align: center;
	}
	& h2+div{
		justify-self: center;
		margin-top: clamp(40px, calc(72 / 1200 * 100vw), 72px);
	}
	#pamphletTab{
		margin-top: clamp(40px, calc(72 / 1200 * 100vw), 72px);
	}
	#pamphletList{
		margin-top: clamp(64px, calc(96 / 1200 * 100vw), 96px);
	}
}

#pamphletTab{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px) 24px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		text-align: center;
		min-width: min(100%, 280px);
		min-height: clamp(56px, calc(80 / 768 * 100vw), 80px);
		padding: 4px 24px;
		border: 1px solid #41583F;
		border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
		color: inherit;
		font-weight: 600;
		font-size: clamp(21px, calc(23 / 768 * 100vw), 23px);
		text-decoration: none;
		.select &{
			background: #41583F;
			color: #fff;
		}
	}
}

#pamphletList{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(64px, calc(96 / 1200 * 100vw), 96px);
	& section{
		scroll-margin-top: var(--space);
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		color: #2A4029;
		font: 700 clamp(20px, calc(30 / 768 * 100vw), 30px) 'eb-garamond', var(--font-min);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(20px, calc(30 / 768 * 100vw), 30px);
			background: currentColor;
			transform: translateY(calc(0.825em - 50%));
			-webkit-mask: var(--logoMark) no-repeat center / contain;
		}
	}
	& h3+div{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
		grid-gap: clamp(40px, calc(72 / 1200 * 100vw), 72px) clamp(8px, calc(24 / 1200 * 100vw), 24px);
		margin-top: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	}
	& dl{
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-gap: 16px;
		}
	& dt{
		font-weight: 600;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.06em;
		}
	& dd{
		&:nth-of-type(1){
			letter-spacing: 0.06em;
			}
		&:has(img){
			order: -1;
			background: #f2f2f2;
			}
		&:has(a){
			margin-top: 8px;
			}
		&:has(select){
			justify-self: center;
			}
		& img{
			aspect-ratio: 1;
			object-fit: contain;
			}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-height: clamp(40px, calc(48 / 768 * 100vw), 48px);
			padding: 8px 16px;
			border: 1px solid #41583F;
			border-radius: clamp(40px, calc(24 / 768 * 100vw), 24px);
			color: inherit;
			font: 600 clamp(16px, calc(18 / 768 * 100vw), 18px) var(--font-min);
			text-align: center;
			text-decoration: none;
			&:after{
				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;"><polyline points="0.5 10 0.5 15.5 15.5 15.5 15.5 10"/><polyline points="8 0 8 11 12 6"/></svg>') no-repeat center / contain;
			}
		}
	}
}