@charset "UTF-8";

@font-face {font-family: "源暎モノコード"; font-weight: 400; src: url("/fonts/GenEiMonoCode-Regular.woff2") format("woff2");}
@font-face {font-family: "源暎モノコード"; font-weight: 700; src: url("/fonts/GenEiMonoCode-Bold.woff2"   ) format("woff2");}

:root {
	--width : 50rem;
	--margin: 1.5rem;
	--slided: calc(var(--margin) * -1);

	--color-background: white;
	--color-foreground: #1a1a1a;
	--color-theme: green;

	--color-solid-background: seagreen;
	--color-solid: white;
	--color-solid-link: yellow;
	--color-border: khaki;
	--color-window: ivory;

	--color-emphasis: darkgreen;
	--color-operation: green;

	@media (prefers-color-scheme: dark) {
		--color-background: black;
		--color-foreground: gainsboro;
		--color-theme: cadetblue;

		--color-solid-background: darkslategray;
		--color-solid: whitesmoke;
		--color-border: #2e2e2e;
		--color-window: #1a1a1a;

		--color-emphasis: cadetblue;
		--color-operation: khaki;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 1ex var(--margin) 0 var(--margin);
	background-color: var(--color-background);
	color           : var(--color-foreground);
	letter-spacing: 0.05ex;
	font-family: sans-serif;
}

p {
	margin: 1rem 0;
	line-height: 1.8;
	max-width: var(--width);
}
p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}
section + p {
	margin-top: 8rem;
}
:is(ul, ol, dd, td) p {
	margin: 0;
	line-height: 1.6;
}
:is(ul, ol, dd, td) p:last-child {
	margin-bottom: 1ex;
}

blockquote {
	margin: 1rem 0;
	padding: 0.5em;
	max-width: var(--width);
	background-color: var(--color-window);
	border: solid thin var(--color-border);
	border-radius: 0.5ex;
}

ul, ol {
	margin: 1.5rem 0;
	padding : 0;
	line-height : 1.6;
	max-width: var(--width);
}
ul {
	list-style-type: square;
	margin-left: 1.5em;
}
li {
	padding-left: 0.2ex;
}
li::marker {
	color: var(--color-theme);
}
ul.pattern {
	list-style-type : upper-latin;
}
ul.bare {
	list-style-type : none;
	margin-left: 0;
}
ul.bare > li {
	padding-left: 0;
}
ol {
	margin-left: 1.5em;
}
ol > li::marker {
	font-weight: bold;
}

dl {
	max-width: var(--width);
	margin: 1rem 0;
}
dt {
	font-weight: bold;
}
dd {
	margin-left: 2rem;
	line-height: 1.6;
}
dt + dd {
	margin-top: 0.5ex;
}
dd + dt {
	margin-top: 1.5ex;
}

dl table {
	margin-top   : 1ex;
	margin-bottom: 1ex;
}

:is(th, td, dd) > *:is(ul, ol):first-child {
	margin-top: 0;
}
:is(dl, table) *:is(ul, ol, table):last-child {
	margin-bottom: 0;
}

video,
figure {
	margin: 2rem 0;
	max-width: var(--width);
}
@media (max-width: 53rem) {
	video,
	figure {
		max-width: 100%;
	}
}
video.size-free,
figure.size-free {
	max-width: 100%;
}
figcaption {
	color: var(--color-theme);
}
figcaption:first-child {
	margin-bottom: 1ex;
	font-weight: bold;
}
figcaption:last-child {
	margin-top: 1ex;
}

figure img,
figure svg {
	display : block;
	max-width: 100%;
	height: auto;
}
figure.bordered img,
figure.bordered svg {
	border: solid thin var(--color-border);
}
figure.rounded img,
figure.rounded svg {
	border-radius: 1ex;
}
figure.filled img,
figure.filled svg {
	background-color: var(--color-window);
}

iframe {
	border: none;
}

img {
	border-style : none;
}
img.inline {
	height: 1em;
}

em {
	color: var(--color-emphasis);
	font-weight: bold;
	font-style: normal;
}
strong {
	color: var(--color-emphasis);
	font-style: normal;
	font-size : 120%;
}
abbr[title] {
	border-style: none none dashed none;
	border-width: thin;
	border-color: var(--color-operation);
	text-decoration: none;
}
abbr[title]::after {
	content: "†";
	vertical-align: -20%;
	color: var(--color-theme);
	font-weight: normal;
	font-size: 80%;
}
q::before,
q::after {
	content: "";
}

a {
	color: var(--color-operation);
}
a:not(:has(*:is(img, svg))):hover {
	text-decoration: none;
	background-color: var(--color-operation);
	color: var(--color-background);
	transition: background-color 200ms, color 200ms;
}
a:hover *:is(img, svg) {
	opacity: 0.5;
}

:focus {
	outline: medium solid currentcolor;
	text-decoration: none;
}

/****
文書の構造
*/

body > section {
	margin: 4rem 0;
}
body > section > section {
	margin: 5rem 0;
}
body > section > h2 + section,
body > section > h1 + section {
	margin-top: 3rem;
}
body > section > section > section {
	margin: 3rem 0;
}
body > section > section > h3 + section,
body > section > section > h1 + section {
	margin-top: 2rem;
}

h1,
h2,
h3,
h4 {
	clear: both;
	border-width: thin;
	border-color: var(--color-theme);
	color: var(--color-theme);
}
h1 > img {
	max-width: 100%;
}
header > h1 {
	margin : 0.5rem var(--slided) 0 var(--slided);
	padding: 0.2rem var(--margin);
	border-style: none none solid none;
	font-size: 200%;
	font-weight: normal;
}
header > h1 img {
	vertical-align: bottom;
}

h2,
body > section > h1 {
	margin : 0 var(--slided) 2rem var(--slided);
	padding: 0.2em 1em 0.2em var(--margin);
	background-color: var(--color-solid-background);
	color: var(--color-solid);
	font-size: 150%;
	font-weight: normal;
}
h3,
body > section > section > h1 {
	margin : 0 var(--slided) 2rem 0;
	padding: 0.1em;
	border-style: none none solid none;
	font-size: 130%;
}
h4,
body > section > section > section > h1 {
	margin : 0 0 1rem 2.7ex;
	padding: 0;
	font-size: 120%;
}
h4::before,
body > section > section > section > h1::before {
	content: "　";
	margin: 0 0.6ex 0 -2.6ex;
	background-image: url("/edl/images/h4.svg");
	background-size : contain;
	background-repeat: no-repeat;
	background-position: center;
}

header div.path a,
nav             a,
ul.menu-list > li > a,
dl.menu-list > dt > a {
	padding-inline: 1ex;
	text-decoration: none;
}

header {
	margin-bottom: 1rem;
}
header div.path {
	margin-right: 1rem;
}
header div.path a {
	white-space: nowrap;
	margin-right: 1ex;
	padding-right: 2ex;
	background-image: url("/edl/images/to.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 0.8ex;
}

#logo {
	display: block;
	float  : right;
	width  : 16em;
	max-width: 100%;
}
#logo img {
	width: 100%;
}
#update-attributes {
	max-width: var(--width);
	margin-top: 0.5rem;
	margin-bottom: 1rem;

	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	justify-content: flex-end;
	align-items: center;
}
#update-attributes address {
	height: 1.25em;
}
#update-attributes img {
	height: 100%;
}

@media (max-width: 35em) {
	:root {
		--margin: 1rem;
	}
	header > h1 {
		font-size: 150%;
	}
	h2,
	body > section > h1,
	h3,
	body > section > section > h1 {
		font-size: 120%;
	}
	h4,
	body > section > section > section > h1 {
		font-size: 100%;
	}
}

.toc {
	max-width: var(--width);
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr;
}
.toc nav > ul {
	margin : 0;
	padding: 1ex;
	background-color: var(--color-window);
	border: solid thin var(--color-border);
	border-radius: 0.5ex;
	list-style-type: none;
	font-weight: bold;
}
.toc nav > ul ul {
	margin : 0 0 1ex 1em;
	padding: 0;
	list-style-type: none;
	font-weight: normal;
}
.toc nav > ul > li:last-child ul {
	margin-bottom: 0;
}
.toc + p {
	margin-top: 2rem;
}

@media (min-width: 40em) {
	.toc {
		grid-template-columns: max-content 1fr;
		grid-template-rows   : 1fr min-content;
	}
	.toc > .overview {
		grid-row   : 1 / 3;
		grid-column: 2;
	}
	.toc nav {
		grid-row   : 1;
		grid-column: 1;
		max-width  : 20em;
		margin-top : 0;
	}

	.toc.layout2 {
		grid-row-gap: 3rem;
	}
	.toc.layout2 > .overview {
		grid-row   : 1;
		grid-column: 2;
	}
	.toc.layout2 nav {
		grid-row   : 1 / 3;
		grid-column: 1;
	}
}

footer {
	clear: both;
	margin : 2rem var(--slided) 0 var(--slided);
	padding: 1em 2em;
	background-color: var(--color-solid-background);
	color: var(--color-solid);
}
footer a {
	color: var(--color-solid-link);
}
footer a:not(:has(*:is(img, svg))):hover {
	background-color: var(--color-solid-link);
	color: var(--color-solid-background);
}

.clearFloat {
	clear: both;
}

/****
テーブル
*/

table {
	margin: 1.5rem 0;
	border-collapse: collapse;
}
table, th, td {
	border: solid thin var(--color-solid-background);
}
th, td {
	padding: 1ex;
}
th {
	color: var(--color-theme);
}
thead th,
tfoot th {
	background-color: var(--color-solid-background);
	color: var(--color-solid);
}
tbody th,
tbody td {
	text-align: left;
	vertical-align: top;
}
caption {
	margin: 0.5ex 0;
	text-align: left;
	color: var(--color-theme);
	font-weight: bold;
	word-break: keep-all;
}

/* 縦線のないテーブル */
table.horizontal {
	border-width : thick;
	border-color: var(--color-solid-background);
}
table.horizontal {
	border-left  : none;
	border-right : none;
}
table.horizontal > * > tr > *:is(th, td) {
	border-left  : none;
	border-right : none;
	border-bottom: none;
}
table.horizontal > thead > tr > th {
	padding: 0.5ex 1ex;
	text-align: start;
}
table.horizontal > tbody > tr:first-child > * {
	border: none;
}

/* 行の区切り線 */
table.horizontal > * > tr.section > *:is(th, td) {
	border-top-width: thick;
}

/****
独自の定義リスト
*/
*.keyValList {
	display: grid;
	grid-template-columns: max-content 1fr;
	row-gap: 0.5ex;
	max-width: var(--width);
}
*.keyValList.rows-separated {
	row-gap: 1ex;
}
 *.keyValList > *.key,
dl.keyValList > dt {
	margin: 0 0.5ex 0 0;
	color: inherit;
	font-weight: bold;
	line-height: 1.5;
}
 *.keyValList > *.key + *,
dl.keyValList > dd {
	margin: 0 0 0 1em;
	text-indent: -1em;
	line-height: 1.5;
}
 *.keyValList > *.key + * *,
dl.keyValList > dd * {
	text-indent: 0;
}
 *.keyValList > *.key + *::before,
dl.keyValList > dd::before {
	position: relative;
	left: 1em;
	display: inline-block;
	width: 1em;
	content: ":";
	font-weight: bold;
}
 *.keyValList > *.key ul,
dl.keyValList > dt    ul {
	list-style-type: none;
	margin: 0;
	margin-top: 0;
	color: inherit;
	line-height: 1.5;
}
 *.keyValList > *.key li,
dl.keyValList > dt    li {
	padding-left: 0;
}

*.keyValList.horizontal,
*.keyValList.horizontal > * {
	border-color: var(--color-solid-background);
}
*.keyValList.horizontal {
	gap: 0;
	border-style: solid none solid none;
	border-width: thick;
}
*.keyValList.horizontal > * {
	margin : 0;
	padding: 1ex;
	border-style: none none solid none;
	border-width: thin;
	text-indent: 0;
}
 *.keyValList.horizontal > *.key:last-child,
 *.keyValList.horizontal > *.key:last-child + *,
dl.keyValList.horizontal > dt:last-of-type,
dl.keyValList.horizontal > dd:last-of-type {
	border-bottom: none;
}
 *.keyValList.horizontal > *.key + *::before,
dl.keyValList.horizontal > dd::before {
	content: none;
}

/****
コードなど
*/

kbd {
	display: inline-block;
	min-width: 1.8em;
	margin: 0.2ex 0;
	padding: 0.5ex;
	border: solid thin currentcolor;
	border-radius: 0.5ex;
	text-align: center;
	font-size: small;
	font-family: sans-serif;
	line-height: 1;
}
code,
.file {
	font-family : "源暎モノコード", monospace;
	white-space : pre-wrap;
	word-break: break-all;
}
.file {
	color: var(--color-emphasis);
}
code.inline,
code.block {
	background-color: var(--color-window);
	border: solid thin var(--color-border);
	border-radius: 0.4ex;
}
code.inline {
	display: inline-block;
	margin: 0.5ex;
	padding: 0 1ex;
}
code.block {
	display: block;
	margin : 1.5rem 0;
	padding: 1ex 1em;
}

/****
独自の見出し
*/
div.title {
	margin: 1rem 0 1ex 0;
	color: var(--color-theme);
	font-weight: bold;
}
div.title + ul,
div.title + ol,
div.title + dl,
div.title + *.keyValList,
div.title + code.block {
	margin-top: 1ex;
}

/****
説明
*/
em.guide.dialogue::before {content: "『";}
em.guide.dialogue::after  {content: "』";}
em.guide.tab::before      {content: "《";}
em.guide.tab::after       {content: "》";}
em.guide.button::before   {content: "［";}
em.guide.button::after    {content: "］";}
em.guide.input::before    {content: "〈";}
em.guide.input::after     {content: "〉";}
em.guide.value::before    {content: "「";}
em.guide.value::after     {content: "」";}
em.guide.menu::before     {content: "【";}
em.guide.menu::after      {content: "】";}
em.guide.submenu::before  {content: "【";}
em.guide.submenu::after   {content: "】";}
em.guide.category::before {content: "〔";}
em.guide.category::after  {content: "〕";}

svg.resources {
	display: none;
}


/****
記事一覧
*/

ul.menu-list > li,
dl.menu-list > dt {
	list-style-type: none;
	background-image: url("/edl/images/to.svg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: auto 1ex;
	padding-left: 1ex;
}
ul.menu-list {
	margin-left: 0;
}
ul.menu-list > li:not(:first-of-type) {
	margin-top: 0.5ex;
}

dl.menu-list > dt {
	font-size: 120%;
}
dl.menu-list > dd + dt {
	margin-top: 1.5rem;
}
dl.menu-list > dt + dd {
	margin-top: 0.5rem;
}
ul.menu-list > li > a:not(:hover) > time,
dl.menu-list > dt > a:not(:hover) > time {
	color: var(--color-theme);
}

/****
AdSense
*/
.googleAdSense {
	max-width: var(--width);
	margin: 3rem 0;
}
.toc .googleAdSense {
	display: flex;
	margin: 0;
}
.googleAdSense + section {
	margin-top: 4rem;
}