/* CSS Document */

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

#contact{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1000px);
	justify-content: center;
	margin-top: clamp(16px, calc(48 / 1200 * 100vw), 48px);
	& h2{
		color: var(--color-theme);
		font: 700 clamp(40px, calc(49 / 768 * 100vw), 49px) var(--font-min);
	}
	& h2+div{
		margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
}

#download{
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 56px;
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		border: 1px solid #41583F;
		border-radius: 28px;
		color: inherit;
		font-size: 24px;
		letter-spacing: 0.06em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 24px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black;"><path d="M10.93,0v17.5l5.07-5"/><path d="M.5,10.5v13h23v-13"/></svg>') no-repeat center / contain;
		}
	}
}

#form{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1000px);
	justify-content: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}

#noticeHead{
	margin-bottom: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}

#noticeFoot{
	margin-top: clamp(8px, calc(16 / 1200 * 100vw), 16px);
}

#agreement{
	justify-self: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	& label{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
	}
	& label,
	& p{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 8px;
		align-items: center;
		justify-content: center;
		padding: 8px 16px;
		font-weight: 600;
		font-size: 18px;
		& a{
			display: contents;
		}
	}
	& label{
		& input{
			transform: none;
		}
	}
	& p{
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 20px;
			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 20 20" style="fill: none; stroke: black; stroke-width: 2px;"><polyline points="1 8 8 15 19 4"/></svg>') no-repeat center / contain;
		}
	}
}

#captcha{
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	.captcha-holder{
		width: 100%;
		border-color: #f33f46;
		border-width: 2px;
	}
	.captcha-success{
		border-color: #5bd25b;
	}
}

#submit{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		align-items: center;
		column-gap: 1em;
		min-width: min(100%, 360px);
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 4px 16px;
		border: 1px solid #41583F;
		border-radius: clamp(28px, calc(32 / 768 * 100vw), 32px);
		color: inherit;
		font-weight: 600;
		font-size: 23px;
		text-align: center;
		text-decoration: none;
		&#btnConfirm{
			&.lsf-error-btn{
				background: #707070;
				border-color: currentColor;
				color: #fff;
				pointer-events: none;
			}
		}
		&#btnModify{
			border-color: #707070;
		}
		&#btnSend{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
	}
}

.acids{
	&:after{
		content: "Required";
		color: #f33f46;
		font-weight: bold;
		}
}

.entry{
	display: grid;
	border: 1px solid #707070;
	@media (min-width: 576px) {
		grid-template-columns: auto 1fr;
		border-left-width: 0;
		& dt,
		& dd{
			&:nth-of-type(n+2){
				border-top: 1px solid #707070;
			}
		}
	}
	& dt{
		display: grid;
		align-items: center;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
		background: #8D968D;
		color: #243124;
		font: 700 clamp(16px, calc(18 / 768 * 100vw), 18px) 'eb-garamond', var(--font-min);
		&.acids{
			position: relative;
			&:after{
				position: absolute;
				right: 0;
				top: 0;
				padding: 4px 8px;
				background: #f33f46;
				color: #fff;
				font-size: 12px;
				font-family: var(--font);
			}
		}
		@media (min-width: 576px) {
			width: clamp(200px, calc(280 / 768 * 100vw), 280px);
		}
	}
	& dd{
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.06em;
	}
	& ul{
		display: grid;
		grid-gap: 0.25em 1em;
		@media (min-width: 576px) {
			display: flex;
			flex-wrap: wrap;
		}
		&.err{
			padding: 0.5em;
		}
	}
	& small{
		display: block;
		font-size: 0.875em;
	}
}

.err{
	background-color: #ffffcc;
	border: 2px solid #f33f46;
}