@charset "utf-8";

/* fonts */

@font-face {
	font-family: "Kosugi Maru";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/kosugi-maru-regular.woff2) format("woff2");
}

@font-face {
	font-family: "Material Symbols Rounded";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/material-symbols-rounded.woff2) format("woff2");
}

/* common */

:root {
	--color-black: hsl(0 0 0);
	--color-white: hsl(0 0 100);
	--color-blue-dark: hsl(210 50 32);
	--color-blue-medium: hsl(210 50 64);
	--color-blue-light: hsl(210 50 96);
	--color-red-dark: hsl(330 50 32);
	--color-red-medium: hsl(330 50 64);
	--color-red-light: hsl(330 50 96);
	--max-width: 800px;
	--font-family-sans: "Kosugi Maru", sans-serif;
	--font-family-icon: "Material Symbols Rounded";
	--font-size-xxlarge: 1.5rem;
	--font-size-xlarge: 1.375rem;
	--font-size-large: 1.25rem;
	--font-size-larger: 1.125rem;
	--font-size-medium: 1rem;
	--font-size-smaller: 0.875rem;
	--font-size-small: 0.75rem;
	--font-size-xsmall: 0.625rem;
	--font-size-xxsmall: 0.5rem;
}

:focus-visible {
	outline: 2px solid var(--color-blue-dark);
	border-radius: .5rem;
}

html {
	scroll-behavior: smooth;
	scrollbar-color: silver transparent;
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background-color: var(--color-white);
	color: var(--color-blue-dark);
	font-family: var(--font-family-sans);
	font-size: var(--font-size-medium);
	line-height: 2;
}

/* app */

.app-block {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.app-header {
	background-color: var(--color-blue-medium);
	color: var(--color-white);
	line-height: 1;
}

.app-header ul {
	display: flex;
	place-items: center;
	gap: 1rem;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem;
	box-sizing: border-box;
	list-style: none;
}

.app-header li:first-child {
	flex: auto;
}

.app-header a {
	color: inherit;
	text-decoration: none;
}

.app-header i {
	font-family: var(--font-family-icon);
	font-size: var(--font-size-xxlarge);
	font-style: normal;
	font-variation-settings: "FILL" 1;
}

.app-breadcrumb {
	display: flex;
	gap: 1rem;
	place-items: center;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem 1rem 0;
	box-sizing: border-box;
}

.app-breadcrumb a {
	color: inherit;
	font-size: var(--font-size-smaller);
	text-decoration: none;
}

.app-breadcrumb small {
	font-size: var(--font-size-small);
}

.app-article {
	flex: auto;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1rem 2rem;
	box-sizing: border-box;
}

.app-article a {
	color: inherit;
}

.app-article h1 {
	margin: 1rem 0;
	font-size: var(--font-size-larger);
	font-weight: normal;
}

.app-article h2 {
	margin: 3rem 0 1rem;
	padding: 0 0 .5rem;
	border-bottom: 2px solid var(--color-blue-light);
	font-size: var(--font-size-larger);
	font-weight: normal;
}

.app-article h3 {
	margin: 1rem 0;
	font-size: var(--font-size-medium);
}

.app-article hr {
	height: 0;
	margin: 1rem 0;
	border: 0;
	border-top: 2px solid var(--color-blue-light);
}

.app-article img {
	vertical-align: middle;
}

.app-article ul:not([class]) {
	padding-inline-start: 1.5rem;
	list-style: disc;
}

.app-article ul:not([class]) li {
	padding-inline-start: .5rem;
}

.app-gotop {
	position: sticky;
	right: 1rem;
	bottom: 1rem;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1rem;
	box-sizing: border-box;
	text-align: right;
}

.app-gotop a {
	display: inline-flex;
	place-content: center;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 100%;
	background-color: var(--color-blue-light);
	color: inherit;
	text-decoration: none;
}

.app-footer {
	margin-top: -3em;
	padding: 1rem 0;
	background-color: var(--color-blue-light);
	font-size: var(--font-size-smaller);
}

.app-footer ul {
	display: flex;
	gap: 1rem;
	max-width: var(--max-width);
	margin: 1rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
	list-style: none;
}

.app-footer p {
	max-width: var(--max-width);
	margin: 1rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.app-footer a {
	color: inherit;
	text-decoration: none;
}

/* page */

.page-chara {
	display: grid;
	grid: auto / auto 1fr;
	gap: 1rem;
	place-items: start;
	margin: 1rem 0;
}

.page-chara a {
	overflow: hidden;
	border-radius: 100%;
}

.page-chara img {
	overflow-clip-margin: unset;
	width: 6rem;
	height: 6rem;
	border-radius: 100%;
	object-fit: cover;
	object-position: top;
}

.page-cover img {
	max-width: 100%;
	height: auto;
	border-radius: .5rem;
}

.page-datalist {
	border: 2px solid var(--color-blue-light);
	border-radius: .5rem;
}

.page-datalist dt {
	background-color: var(--color-blue-light);
}

.page-datalist dd {
	margin: 0;
	border-top: 2px solid var(--color-blue-light);
	font-size: var(--font-size-smaller);
}

.page-datalist :is(dt, dd):not(:has(a)) {
	padding: .5rem 1rem;
}

.page-datalist :is(dt, dd) a {
	display: flex;
	place-content: space-between;
	place-items: center;
	gap: 1rem;
	padding: .5rem 1rem;
	color: inherit;
	text-decoration: none;
}

.page-datalist :is(dt, dd) a::after {
	content: ">";
	font-size: var(--font-size-small);
}

.page-datetime {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
}

.page-info {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: .5rem;
	background-color: var(--color-blue-light);
}

.page-list {
	margin: 1rem 0;
	padding: 0;
	border: 2px solid var(--color-blue-light);
	border-radius: .5rem;
	list-style: none;
}

.page-list li:not(:has(a)) {
	padding: .5rem 1rem;
	border-bottom: 2px solid var(--color-blue-light);
}

.page-list li:not(:has(a)):last-child {
	border: 0;
}

.page-list li a {
	display: block;
	padding: .5rem 1rem;
	border-bottom: 2px solid var(--color-blue-light);
}

.page-list li:last-child a {
	border: 0;
}

.page-menu {
	display: grid;
	grid: auto / repeat(4, 1fr);
	gap: 1rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

.page-menu a {
	display: grid;
	place-items: center;
	gap: .5rem;
	padding: 1rem;
	border-radius: .5rem;
	background-color: var(--color-blue-light);
	color: inherit;
	text-decoration: none;
}

.page-menu i {
	font-family: var(--font-family-icon);
	font-size: var(--font-size-xxlarge);
	font-style: normal;
	font-variation-settings: "FILL" 1;
}

.page-menu span {
	font-size: var(--font-size-smaller);
}

.page-profile {
	display: flex;
	place-items: center;
	gap: .5rem;
	margin: 1rem 0;
	font-size: var(--font-size-smaller);
}

.page-profile img {
	width: 8rem;
	height: 8rem;
	border-radius: 100%;
}

.page-profile figcaption {
	display: flex;
	place-items: center;
}

.page-profile figcaption::before {
	content: "";
	border: .5rem solid transparent;
	border-right: .5rem solid var(--color-blue-light);
}

.page-profile figcaption span {
	display: block;
	padding: 1em 2em;
	border-radius: .5rem;
	background-color: var(--color-blue-light);
}

.page-text {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: .5rem;
	box-shadow: 0 0 .5rem .25rem var(--color-blue-light);
	font-family: inherit;
	white-space: pre-line;
}

.page-thumbnails {
	display: grid;
	grid: auto / repeat(4, 1fr);
	gap: 1rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.page-thumbnails a {
	display: block;
	overflow: hidden;
	border-radius: .5rem;
}

.page-thumbnails img {
	overflow-clip-margin: unset;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top;
}

.page-thumbnails span {
	font-size: var(--font-size-smaller);
}

.page-warning {
	margin: 1rem 0;
	padding: 1rem;
	border-radius: .5rem;
	background-color: var(--color-red-light);
	color: var(--color-red-dark);
}

/* mobile */

@media screen and (max-width: 640px) {

	.page-thumbnails {
		grid: auto / repeat(2, 1fr);
	}

}