/* CSS Document */

#entry{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(32px, calc(56 / 1200 * 100vw), 56px);
	margin: clamp(32px, calc(96 / 1200 * 100vw), 96px) 0;
	& h2{
		display: grid;
		justify-items: center;
		font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
		font-family: var(--font-title);
		letter-spacing: 0.2em;
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 58 / 40;
			width: 58px;
			background: #897750;
			opacity: 0.25;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 40" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polygon points="7 11 17 21 21 17 17 13 7 23 17 33 21 29 17 25 7 35 11 39 15 35 5 25 1 29 5 33 15 23 5 13 1 17 5 21 15 11 11 7 7 11"/><polygon points="25 5 35 15 39 11 35 7 25 17 35 27 39 23 35 19 25 29 29 33 33 29 23 19 19 23 23 27 33 17 23 7 19 11 23 15 33 5 29 1 25 5"/><polygon points="43 11 53 21 57 17 53 13 43 23 53 33 57 29 53 25 43 35 47 39 51 35 41 25 37 29 41 33 51 23 41 13 37 17 41 21 51 11 47 7 43 11"/></svg>') no-repeat center / contain;
		}
	}
	& h2+div{
		display: grid;
		grid-row-gap: 24px;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
		& p:nth-child(1){
			color: #853e3a;
		}
	}
	#step{
		grid-row: 2;
	}
	#terms{
		order: 1;
	}
	#form{
		display: contents;
	}
	#submit{
		order: 1;
	}
}

#terms{
	display: grid;
	grid-row-gap: 24px;
}

#termsText{
	& p{
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	& span{
		color: #853e3a;
	}
}

#termsBody{
	height: 400px;
	padding: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	border: 1px solid var(--color-border);
	overflow-y: auto;
	& h4{
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
	}
	& h5{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	}
	& ol{
		counter-reset: count;
		display: grid;
		grid-row-gap: 4px;
		&>li{
			counter-increment: count;
			position: relative;
			padding-left: 1.75em;
			&:before{
				content: counter(count)".";
				position: absolute;
				display: block;
				width: 1.75em;
				left: 0;
				text-align: right;
			}
		}
	}
	& ul{
		counter-reset: count;
		display: grid;
		grid-row-gap: 4px;
		&>li{
			counter-increment: count;
			position: relative;
			padding-left: 2em;
			&:before{
				content: "("counter(count)")";
				position: absolute;
				left: 0;
			}
		}
		&:has(>li:nth-child(10)){
			&>li{
				padding-left: 2.5em;
			}
		}
		& ul{
			margin-left: 1.75em;
			list-style-type: lower-latin;
			&>li{
				padding-left: unset;
				&:before{
					content: none;
				}
			}
		}
	}
	& div:has(>table){
		@media (max-width: 767.98px) {
			overflow-x: auto;
			& table{
				white-space: nowrap;
			}
		}
	}
	& table{
		width: 100%;
		margin: 4px 0;
		border: 1px solid var(--color-border);
		border-spacing: 0;
		vertical-align: middle;
	}
	& th{
		padding: 8px 16px;
		border: 1px solid var(--color-border);
		background: #eee;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	& td{
		padding: 8px 16px;
		border: 1px solid var(--color-border);
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	& hr{
		margin: 16px 0;
	}
}

#step{
	& ol{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		text-align: center;
	}
	& li{
		position: relative;
		counter-increment: count;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		grid-row-gap: 8px;
		justify-items: center;
		font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
		font-family: var(--font-min);
		&:before,
		&:after{
			grid-column: 1;
			grid-row: 1;
		}
		&:before{
			content: counter(count);
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 1.6em;
			background: #f2f2f2;
			border-radius: 100%;
			color: #999;
			font-size: clamp(16px, calc(24 / 768 * 100vw), 24px);
			font-family: var(--font-en);
			text-align: center;
			line-height: 1;
			z-index: 1;
		}
		&:after{
			content: "";
			align-self: center;
			width: 100%;
			border-top: 1px solid currentColor;
		}
		&:first-child:after{
			width: 50%;
			justify-self: end;
		}
		&:last-child:after{
			width: 50%;
			justify-self: start;
		}
		&.now:before{
			background: var(--color-theme-point);
			color: #fff;
		}
	}
}

#error{
	margin-bottom: calc(0px - clamp(16px, calc(32 / 1200 * 100vw), 32px));
	padding: 16px;
	border: 1px solid currentColor;
	color: red;
	font-weight: 700;
	& p{
		display: grid;
		column-gap: 4px;
		align-self: baseline;
		grid-template-columns: auto 1fr;
		&:before{
			content: "※";
		}
	}
}

#form{
	& legend{
		display: none;
	}
}

#submit{
	& p{
		width: 100%;
		color: #853e3a;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}