/* docs/ 配下の資料で共通のスタイル。章の色・目次の採番は各資料の <style> に書く */
:root{
	--navy1:#12224d;
	--navy2:#2f5fbf;
	--ink:#1c2330;
	--ink-soft:#4a5568;
	--line:#d9dfe8;
	--code-bg:#f4f6fa;
	--link:#1a4fa0;
	--accent:var(--navy1);
	--accent2:var(--navy2);
	--soft:#f2f5fb;
}
*{box-sizing:border-box;}
body{
	margin:0;
	background:#fff;
	color:var(--ink);
	font-family:"Segoe UI","Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
	font-size:15.5px;
	line-height:1.85;
}
a{color:var(--link);background:transparent;}
.titlebar{
	background:linear-gradient(135deg,var(--navy1),var(--navy2));
	color:#fff;
	padding:34px 30px 30px;
}
.titlebar .inner{max-width:1600px;margin:0 auto;}
.titlebar h1{font-size:2.05em;margin:0 0 10px;color:#fff;}
.titlebar .lead{margin:0 0 6px;color:#e6edff;background:transparent;}
.titlebar .date{font-size:.88em;color:#d5e2ff;background:transparent;}
.titlebar code{background:rgba(255,255,255,.16);color:#fff;border:none;}

.wrap{max-width:1600px;margin:0 auto;padding:0 30px;}
.backlink{margin:18px 0 0;}
.back-home{
	display:inline-block;
	background:linear-gradient(100deg,var(--navy1),var(--navy2));
	color:#fff;
	text-decoration:none;
	font-weight:700;
	padding:2px 12px;
	border-radius:6px;
}
.back-home:hover{filter:brightness(1.1);}

section{
	background:linear-gradient(180deg,var(--soft),#fff 62%);
	border:1px solid var(--line);
	border-radius:10px;
	padding:4px 26px 26px;
	margin:34px 0;
}
section h1{
	background:linear-gradient(100deg,var(--accent),var(--accent2));
	color:#fff;
	font-size:1.5em;
	padding:14px 20px;
	margin:26px 0 20px;
	border-radius:8px;
	box-shadow:0 6px 16px rgba(18,34,77,.22);
}
section h1 code{background:rgba(255,255,255,.16);color:#fff;border:none;}
h2{
	font-size:1.16em;
	border-left:7px solid var(--accent);
	background:linear-gradient(90deg,var(--soft),#fff);
	color:var(--ink);
	padding:6px 12px;
	margin:30px 0 12px;
	border-radius:0 6px 6px 0;
}
h3{
	font-size:1.02em;
	color:var(--accent);
	background:transparent;
	display:inline-block;
	border-bottom:2px dotted var(--accent2);
	padding-bottom:3px;
	margin:20px 0 8px;
}
p{margin:10px 0;}
ul,ol{margin:10px 0;padding-left:1.6em;}
li{margin:5px 0;}
code{
	background:var(--code-bg);
	border:1px solid var(--line);
	color:#17335f;
	border-radius:4px;
	padding:1px 5px;
	font-size:.92em;
	font-family:Consolas,"Courier New",monospace;
}
pre{
	background:var(--code-bg);
	color:var(--ink);
	border:1px solid var(--line);
	border-left:5px solid var(--accent2);
	border-radius:6px;
	padding:13px 16px;
	overflow-x:auto;
	font-size:.9em;
	line-height:1.6;
}
pre code{background:none;border:none;padding:0;color:var(--ink);}

.tablewrap{overflow-x:auto;margin:14px 0;}
table{
	border-collapse:collapse;
	width:100%;
	background:#fff;
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 2px 8px rgba(18,34,77,.10);
	font-size:.95em;
}
th{
	background:linear-gradient(100deg,var(--accent),var(--accent2));
	color:#fff;
	text-align:left;
	padding:9px 12px;
	white-space:nowrap;
}
th code{background:rgba(255,255,255,.16);color:#fff;border:none;}
td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top;}
tr:nth-child(even) td{background:#fafbfe;}
.nowrap{white-space:nowrap;}
td.num{text-align:right;white-space:nowrap;}
td.best{font-weight:700;color:#17335f;}

.badge{
	display:inline-block;
	color:#fff;
	font-size:.8em;
	font-weight:700;
	padding:2px 9px;
	border-radius:11px;
	white-space:nowrap;
	margin-right:6px;
}
.b-ok{background:linear-gradient(100deg,#1d7a3c,#45b56c);color:#fff;}
.b-ng{background:linear-gradient(100deg,#a51f22,#e05a5c);color:#fff;}
.b-none{background:linear-gradient(100deg,#5a6472,#97a1ae);color:#fff;}
.b-warn{background:linear-gradient(100deg,#b8620a,#f0a548);color:#fff;}
/* ランタイムを指すバッジ（良い/悪いの意味は持たせない）。グラフの色もこの 3 色に揃える */
.b-node{background:linear-gradient(100deg,#1a4ea8,#4f8fe6);color:#fff;}
.b-deno{background:linear-gradient(100deg,#0d6e8c,#5ecbe6);color:#fff;}
.b-bun{background:linear-gradient(100deg,#1d7a3c,#45b56c);color:#fff;}

.callout{
	border-left:6px solid var(--accent);
	background:linear-gradient(180deg,var(--soft),#fff);
	color:var(--ink);
	border-radius:0 8px 8px 0;
	padding:12px 16px;
	margin:16px 0;
}
.callout strong{color:var(--accent);background:transparent;}

.toc ol{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	padding:0;
	margin:14px 0 4px;
}
.toc li{margin:0;}
.toc ol a{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:normal;
	width:310px;
	max-width:100%;
	background:linear-gradient(100deg,var(--accent),var(--accent2));
	color:#fff;
	text-decoration:none;
	font-size:.94em;
	font-weight:700;
	padding:8px 14px;
	border-radius:6px;
	line-height:1.45;
}
.toc ol a:hover{filter:brightness(1.1);}

svg{max-width:100%;height:auto;display:block;margin:16px 0;}
.legend{font-size:.9em;color:var(--ink-soft);margin:2px 0 18px;}
.legend span{margin-right:16px;white-space:nowrap;}

footer{
	max-width:1600px;
	margin:0 auto;
	padding:18px 30px 30px;
	border-top:1px solid var(--line);
}