/* 変数 */
:root {
	--preset-font-gothic: YuGothic, AdjustedYuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
	background-color: #f0f3f5;
	font-family: var(--preset-font-gothic);
	padding: clamp(15px, 5vw, 40px);
}

h1 {
	text-align: center;
	font-size: 1.5rem;
}

@scope (.container) {
	:scope {
		background-color: white;
		padding: clamp(15px, 5vw, 40px);
		display: grid;
		row-gap: 2.5em;
		max-inline-size: 900px;
		margin-inline: auto;
		line-height: 1.7;
		border-radius: 5px;
		font-size: 0.875rem;

		.section {
			> * + * {
				margin-block-start: 1em;
			}
		}

		a {
			color: inherit;
			text-decoration: underline;

			@media (any-hover: hover) {
				&:hover {
					text-decoration: none;
				}
			}
		}

		h2 {
			line-height: 1.6;
			font-size: 1.125rem;
		}

		h3 {
			line-height: 1.6;
			font-size: 1rem;
		}

		.num {
			--num-width: 2em;

			counter-reset: num;

			> li {
				counter-increment: num;

				position: relative;
				padding-inline-start: calc(var(--num-width) + 0.5em);

				&::before {
					content: counter(num)'.';
					inline-size: var(--num-width);
					text-align: end;
					position: absolute;
					inset-inline-start: 0;
					inset-block-start: 0;
				}
			}
		}

		.num-wrap {
			--num-width: 3em;

			counter-reset: num;

			> li {
				counter-increment: num;

				position: relative;
				padding-inline-start: var(--num-width);

				&::before {
					content: '（'counter(num)'）';
					inline-size: var(--num-width);
					text-align: end;
					position: absolute;
					inset-inline-start: 0;
					inset-block-start: 0;
				}
			}
		}

		.dot {
			--num-width: 1em;

			> li {
				position: relative;
				padding-inline-start: var(--num-width);

				&::before {
					content: '・';
					text-align: end;
					position: absolute;
					inset-inline-start: 0;
					inset-block-start: 0;
				}
			}
		}
	}
}