@charset "UTF-8";

:root {
	--margin-small: 2rem;
	--margin-medium: 3rem;
}

@media (width >=1080px) {
	:root {
		--margin-small: 4rem;
		--margin-medium: 5rem;
	}
}

/* reset */
main {
	font-weight: 400;

	a:hover {
		text-decoration: initial;
	}
}

/* utility */
@media (width >=480px) {
	.disp-xs {
		display: none;
	}
}

@media (width >=1080px) {
	.disp-s {
		display: none;
	}
}

@media (width < 1080px) {
	.disp-m {
		display: none;
	}
}

.mx-auto {
	margin-inline: auto;
}

.mt-s {
	margin-top: var(--margin-small);
}

.mt-m {
	margin-top: var(--margin-medium);
}

.max-il-l {
	max-inline-size: 86rem;
}

.mt-0-64em {
	margin-top: 0.64em;
}

.mt-0-8em {
	margin-top: 0.8em;
}

.mt-1em {
	margin-top: 1em;
}

.mt-1-6em {
	margin-top: 1.6em;
}

.mt-2em {
	margin-top: 2em;
}

.text-right {
	text-align: right;
}

.font-caption {
	font-size: 1.2rem;
}

/* note-list */
.note-list {
	li::before {
		content: "※";
		margin-right: 0.25em;
	}
}

.counter-note-list {
	counter-reset: note-counter;

	li {
		counter-increment: note-counter;
	}

	li::before {
		content: "※" counter(note-counter);
		margin-right: 0.25em;
	}
}

@media (width >=1080px) {
	.note-list {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 0.5em;

		li::before {
			margin-right: 0;
		}
	}

	.counter-note-list {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 0 0.5em;

		li {
			display: grid;
			grid-template-columns: subgrid;
			grid-column: 1 / -1;
		}

		li::before {
			grid-column: 1;
			margin-right: 0;
		}
	}
}

/* ordered-list */
.ordered-list {
	list-style-type: decimal;
	padding-left: 1.5em;

	>li:not(:first-child) {
		margin-top: 1em;
	}
}

.ordered-list li::marker,
.ordered-list-ttl {
	font-weight: bold;
}

/* page */
.page-basic {
	padding-bottom: 4rem;
}

.page-header--padding {
	padding: 4rem 0;
}

.page-header__main-title {
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
}

@media (width >=1080px) {
	.page-basic {
		padding-bottom: 10rem;
	}

	.page-header--padding {
		padding: 8rem 0;
	}

	.page-header__main-title {
		font-size: 3rem;
	}
}