/* トップのバナー */

.top-banner {
	max-width: 780px;
	width: calc(100vw - 48px);
	height: auto;
	margin: 8px;
}

/* コード */

/* 一般のコードスタイリング */
/* 注：一部の宣言はインラインコード専用。 */
/* 'pre > code' でどれなのか確認できる。 */
code {
	/* lang="ja" は Cousine （Tor Browser）または他のフォントを必要とする。 */
	/* lang="en" ではフォントサイズは monospace または -moz-fixed
	/* の場合に 12px で、 Cousine またはリスト値の場合に 16px。 */
	font-family: Cousine, monospace;
	color: purple;
	background-color: palegoldenrod;
	border-radius: 4px;
	padding: 2px;
	word-wrap: anywhere;
}

pre {
	background-color: thistle;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 1em;
	padding-bottom: 1em;
	overflow-x: auto;
	white-space: pre-wrap;
	max-width: 50em; /* 80 文字 */
}

/* ディスプレイコードのためにインラインコード専用スタイリングをもとに戻す */
pre > code {
	color: unset;
	background-color: unset;
	border-radius: unset;
	padding: unset;
}

/* キーボードキー */

kbd {
	color: white;
	font-family: sans-serif;
	font-size: 85%;
	border-radius: 4px;
	border-block-style: outset;
	background-color: darkslategrey;
	padding-left: 3px;
	padding-right: 3px;
}

/* 表と画像 */

caption, figcaption {
	color: maroon;
	font-size: 80%;
}

/* 表 */

table {
	border-collapse: collapse;
	border-color: black;
	border-style: solid;
	border-width: 2px;
}

th, td {
	border-color: gray;
	border-style: solid;
	border-width: 1px;
	padding-left: 4px;
	padding-right: 4px;
}

thead {
	border-bottom-color: black;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	background-color: burlywood;
}

th:hover {
	background-color: chocolate;
}

tr.even {
	background-color: bisque;
}

tbody > tr:hover {
	background-color: lightgreen;
}

td:hover {
	background-color: limegreen;
}

caption {
	margin-top: 8px;
	margin-bottom: 4px;
}

/* 画像 */

img {
	/* alt テキスト */
	color: teal;
	font-style: italic;
	/* パッディング */
	/* 注：背景色が白の画像が必要。 */
	border-radius: 4px;
	padding: 4px;
	background-color: white;
	vertical-align: middle;
}

img.display {
	border-width: 3px;
	border-style: solid;
	border-color: lightgreen;
	border-radius: 8px;
	max-width: 90vw;
	max-height: 400px;
	width: auto;
	height: auto;
	margin: 4px;
}

img.display:hover {
	border-color: limegreen;
}

figcaption {
	margin-top: 4px;
	margin-bottom: 8px;
}

/* リスト */

li {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

/* 順序リストのネスト番号付け */

ol {
	counter-reset: item;
}
ol > li {
	counter-increment: item;
}
ol > li::marker {
	content: counters(item, ".") ". \200b";
}

.footnotes ol {
	counter-reset: foot;
}
.footnotes ol > li {
	counter-increment: foot;
}
.footnotes ol > li::marker {
	content: counter(foot) ". \200b";
}

/* main 内の h1〜h4 見出しの番号付け */

main h1::before, main h2::before, main h3::before, main h4::before {
	font-size: 80%;
	color: green;
}

main h1 {
	counter-increment: section1;
	counter-reset: section2 section3 section4;
}

main h1::before {
	content: counter(section1) ". ";
}

main h2 {
	counter-increment: section2;
	counter-reset: section3 section4;
}

main h2::before {
	content: counter(section1) "." counter(section2) ". ";
}

main h3 {
	counter-increment: section3;
	counter-reset: section4;
}

main h3::before {
	content: counter(section1) "." counter(section2) "." counter(section3) ". ";
}

main h4 {
	counter-increment: section4;
}

main h4::before {
	content: counter(section1) "." counter(section2) "." counter(section3) "." counter(section4) ". ";
}

/* 用語集 */

dt {
	font-weight: bold;
	margin-top: 2.0em;
}

dd > p:not(:first-child) {
	color: darkslategray;
	font-size: 90%;
}

/* 脚注 */

.footnotes {
	font-size: 85%;
}

/* その他 */

/* QR コード */
.qr {
	image-rendering: crisp-edges;
}

/* 上付き（例：「要確認」） */
sup > em {
	color: fuchsia;
}