@font-face { font-family: "mp2p700"; src: url("../font/mplus-2p-bold-s.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "mp2p500"; src: url("../font/mplus-2p-medium-s.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "mp2c700"; src: url("../font/mplus-2c-bold-s.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "mp2c500"; src: url("../font/mplus-2c-medium-s.woff2") format("woff2"); font-display: swap; }

@media (forced-colors: none) {
	html {
		/* dark */
		/*
		--c-bg: rgb(251,251,246);
		--c-text: rgb(34,34,34);
		--c-anchor: rgb(50,124,88);
		--c-underline: rgba(50,124,88,.75);
		--url-exticon: url("../img/icon-external-black.svg");
		*/
		/* light */
		/**/
		--c-bg: rgb(48,45,38);
		--c-text: rgb(250,250,245);
		--c-anchor: rgb(191,253,139);
		--c-underline: rgba(191,253,139,.75);
		--url-exticon: url("../img/icon-external.svg");
		/**/
		background-color: var(--c-bg);
		color: var(--c-text);
	}
	a {
		color: var(--c-anchor);
		text-decoration: underline 1px var(--c-underline);
		/* text-underline-offset: .175em; */
	}
}

a[target="_blank"]::after {
	content: "";
	background: var(--url-exticon) center / contain no-repeat;
	width: .7em;
	aspect-ratio: 1/1;
	display: inline-block;
	margin-inline: .25em .15em;
}

h1 { margin-block: 0.67em; font-size: 2em; } /* 新仕様へのFirefox以外への対応 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
h1, h2, h3, h4, h5, h6 { line-height:1.3; margin-block: 2em 1.2em; }

img { max-width: 100%; height: auto; }

@media screen and (max-width: 768px), screen and (max-height: 400px) {
	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.5rem; }
}

.logo {
	font-family: mp2c700, mp2p700;
	letter-spacing: .035em;
	line-height: 1.3;
	display: inline-block;
	small {
		font-family: mp2c500, mp2p500;
		font-size: .416666666666667em;
		letter-spacing: .1em;
		word-spacing: -.1em;
		display: block;
	}
}

body {
	font-family: sans-serif;
	max-width: 100%;
	width: 720px;
	@media screen and (max-height: 720px) {
		width: calc(100vh + 15px * 2);
	}
	margin-inline: auto;
	padding-inline: 15px;
	box-sizing: border-box;
	& > * { margin-top: 6rem; }
	& > header {
		@media screen and (max-height: 720px) { margin-top: 3rem; }
		.logo {
			font-size: 24px;
			text-decoration: none;
			color: inherit;
			small { margin-left: .06em; }
		}
		& > h1 {
			font-weight: inherit;
			.logo { font-size: clamp(36px, 4.55vw, 56px); }
			& + nav .logo {
				font-size: inherit;
				margin-bottom:initial;
				margin-right:.1em;
			}
		}
	}
	& > footer {
		text-align:right;
		font-size: .8175em;
		margin-bottom:7em;
	}
}

nav { font-size: .8175rem; }

article {
	line-height: 1.7;
	font-size: 1.0625rem;
	hr {
		width:45%;
		margin-block: 2em;
	}
	footer {
		text-align:right;
		margin: 1.75em 0 0 0;
		time {
			font-size: 0.941176470588235em;
			&::before { content: "\FF08"; }
			&::after { content: "\FF09"; }
		}
	}
}

section {
	& > * { margin-top: 3rem; }
	& > header {
		margin-top: 6rem;
		margin-bottom: 3.5rem;
	}
	&.short article {
		font-size: .9375rem;
		& + article { margin-top: 1.5em; }
		* { display: inline; }
	}
}