/* CSS Document */

#pamphlet{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0 clamp(64px, calc(120 / 1200 * 100dvw), 120px) 0;
	background: linear-gradient(transparent, #dfe9f2 120px, #dfe9f2 calc(100% - 120px), transparent);
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& h2+div{
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
		letter-spacing: 0.025em;
	}
}

#pamphletList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 256px), 1fr));
	grid-gap: 40px clamp(24px, calc(32 / 1200 * 100vw), 32px);
	margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	& section{
		display: grid;
		align-content: start;
		grid-template-rows: auto auto 1fr;
		grid-row-gap: 16px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 1.414;
			border-radius: 8px;
			background: var(--dummy);
			background-size: 50%;
		}
		& div{
			&:has(a):not(:last-child){
				margin-bottom: 8px;
			}
		}
		& h3{
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 576* 100vw), 16px);
		}
		& p{
			font-size: clamp(12px, calc(14 / 576 * 100vw), 14px);
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 180px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: #f9fbfc;
			border-radius: 20px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 18px;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="17 12 17 17 1 17 1 12"/><polyline points="13 7 9 11 5 7"/><line x1="9" y1="2" x2="9" y2="11"/></svg>') no-repeat center / contain;
			}
		}
		& h4{
			font-size: clamp(12px, calc(14 / 576 * 100vw), 14px);
		}
		& h4+div{
			margin-top: 8px;
		}
		& label{
			font-size: 14px;
			letter-spacing: 0.05em;
			&:has(select){
				display: flex;
				align-items: center;
				column-gap: 8px;
				white-space: nowrap;
			}
			&:not(:has(select)){
				display: grid;
				align-items: center;
				column-gap: 8px;
				min-height: 48px;
				padding: 8px 16px;
				background: #ccc;
				border-radius: 24px;
				font-weight: 700;
				text-align: center;
				text-decoration: none;
			}
		}
		& select{
			min-height: 40px;
			padding: 0.25em 1em;
			border-radius: 20px;
			background-color: #f9fbfc;
			border: none;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
			& img{
				aspect-ratio: 1 / 1.414;
				border-radius: clamp(4px, calc(8 / 576 * 100vw), 8px);
				object-fit: cover;
			}
		}
	}
}

#pamphletSubmit{
	display: grid;
	justify-content: center;
	grid-row-gap: 32px;
	margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	& p{
		letter-spacing: 0.05em;
	}
	& a{
		justify-self: center;
		display: grid;
		align-items: center;
		column-gap: 8px;
		width: min(100%, 280px);
		min-height: 48px;
		background: #7baac4;
		border-radius: 24px;
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
	}
	&:not(.on){
		//display: none;
	}
}