@charset "UTF-8";

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

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

/* 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;
}

.font-bold {
	font-weight: 700;
}

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

/* 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) {

  .counter-note-list,
  .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;
	}
}

/* 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;
	}
}

/* kigaki */
.kigaki-header {
	padding: 4rem 0 2rem;
	text-align: center;
}

@media (width >=1080px) {
	.kigaki-header {
		padding: 2rem 0 5rem;
	}
}