@charset 'utf-8';

:root {
	--fore: #111;
	--back: white;
	--opaque-back: #fff0;
	--link: #03c;
	--visited: #805;
	--text: #333;
	--outside: #eee;
	--moderate: #888;
	--vivid: #060;
	--pale: #eef;
	--thin: #eee;
	--emphasis: #ffd;
	--match: #fe7;
	--example: #efe;
	--code: #eff;
	--keyword: #82e;
	--preprocessor-keyword: #800;
}
@media screen and (prefers-color-scheme: dark) {
	:root {
		--fore: #eee;
		--back: black;
		--opaque-back: #0000;
		--link: #7be;
		--visited: #d5a;
		--text: #ccc;
		--outside: #222;
		--moderate: #aaa;
		--vivid: #9c9;
		--pale: #224;
		--thin: #444;
		--emphasis: #442;
		--match: #870;
		--example: #242;
		--code: #244;
		--keyword: #b6e;
		--preprocessor-keyword: #c44;
	}
	iframe {
		background-color: white;
	}
	.inversion img, .inversion canvas {
		filter: invert(1.0) hue-rotate(180deg);
	}
}

html {
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	background-color: var(--outside);
}
body {
	margin: 0;
}
p {
	margin: 1em 0;
	line-height: 1.5;
}
a:link {
	color: var(--link);
}
a:visited {
	color: var(--visited);
}
a:target {
	border: 1px red solid;
	background-color: red;
	color: white;
	border-radius: 0.25em;
	padding: 2px;
}
/* */
h1, h2, h3, h4, h5, h6 {
	color: var(--fore);
	font-weight: bold;
	margin: 2em 0 1em;
}
h1 {
	font-size: 1.6em;
	margin-top: 0.5em;
}
h2 {
	font-size: 1.2em;
	padding-left: 3px;
	border-left: 5px solid;
	padding-bottom: 1px;
	border-bottom: 1px solid;
}
h3 {
	font-size: 1.2em;
	padding-left: 3px;
	border-left: 5px solid;
}
h4 {
	font-size: 1.2em;
}
h4:before {
	content: '■';
}
h5, h6 {
	font-size: 1em;
}
h5:before {
	content: '●';
}
h1 img {
	max-width: 100%;
}
h2 img, h3 img {
	margin-right: 3px;
	vertical-align: middle;
}
h2:hover .anchor:after, h3:hover .anchor:after {
	content: '¶';
	padding-left: 0.5em;
	padding-right: 0.5em;
}
/* */
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
ul, ol {
	margin: 1em 0;
	padding-left: 40px;
	line-height: 1.5;
}
ul + ul, ol + ol {
	margin-top: 2em;
}
ul ul, ul ol, ol ol, ol ul {
	margin-top: 0;
}
td ul, td ol {
	padding-left: 20px;
}
li {
	margin: 0.5em 0;
}
/* */
.hierarchy-list {
	list-style-position: inside;
	padding-left: 25px;
}
.hierarchy-list ul, .hierarchy-list ol {
	border-left: 1px dotted;
	padding-left: 20px;
}
/* */
dl {
	margin: 1em 0;
	padding: 0;
}
dt {
	border: 1px var(--moderate) solid;
	border-top-left-radius: 0.5em;
	background-color: var(--thin);
	color: var(--fore);
	margin: 0;
	padding: 3px;
}
dd {
	border: 1px var(--moderate) solid;
	border-top-style: none;
	margin: 0 0 0.5em;
	padding: 0.5em 3px;
}
/* */
table {
	line-height: 1.5;
}
th, td {
	padding: 3px;
}
caption {
	text-align: left;
	/* white-space: nowrap; */
}
table.standard {
	background-color: var(--back);
	border-collapse: collapse;
	margin: 1em 0 3px;
}
table.standard caption {
	font-weight: bold;
	color: var(--fore);
}
table.standard th {
	background-color: var(--thin);
	color: var(--fore);
	border: 1px var(--moderate) solid;
	/* white-space: nowrap; */
}
table.standard td {
	border: 1px var(--moderate) solid;
}
table.standard p {
	margin: 0.5em 0;
	line-height: inherit;
}
table.fixed-width {
	table-layout: fixed;
	width: 100%
}
/* */
tr.separator th, tr.separator td {
	border-top-color: var(--moderate);
	border-top-width: 3px;
	border-top-style: double;
}
/* */
form {
	margin: 0;
}
fieldset {
	margin: 0.5em 0;
	padding: 0 3px 0.5em;
	border-radius: 0.5em;
}
fieldset table {
	border-spacing: 0;
}
fieldset th {
	white-space: nowrap;
}
fieldset textarea {
	width: 98%;
}
legend {
	font-weight: bold;
}
/* */
textarea, input, button, option {
	font-family: inherit;
}
input[type=submit], input[type=reset], input[type=button], button {
	padding: 3px 1em;
}
input[type=range] {
	vertical-align: middle;
	margin: 0 3px;
	padding: 1px;
}
input[readonly], textarea[readonly] {
	border: 1px var(--moderate) dotted;
}
input.reset {
	margin-left: 1em;
	color: red;
}
label input[type=text], label input[type=url], label input[type=number] {
	margin-left: 3px;
	margin-right: 3px;
}
select {
	font-family: inherit;
	font-size: inherit;
}
textarea {
	margin: 3px 0;
}
optgroup {
	font-family: inherit;
	font-style: normal;
	font-weight: bold;
}
/* */
img {
	font-weight: bold;
	color: var(--moderate);
}
a[href] img {
	border: 1px solid;
	border-radius: 3px;
	padding: 1px;
}
a[href] img[width="1"] {
	/* border-style: none; Not work in IE11 */
	border: none;
	padding: 0;
}
a[href] img:hover {
	border-color: red;
	opacity: 0.5;
}
/* */
code {
	font-family: Consolas, monospace;
	font-size: inherit;
	background-color: transparent;
	color: var(--vivid);
	text-align: center;
}
kbd {
	font-family: Arial, sans-serif;
	border: 1px var(--moderate) solid;
	border-radius: 0.5em;
	background-color: var(--thin);
	color: var(--fore);
	margin: 1px;
	padding: 0 3px;
	white-space: nowrap;
}
var {
	font-size: inherit;
	font-style: normal;
	color: brown
}
pre {
	font-family: Consolas, monospace;
	font-size: inherit;
	margin: 0.5em 0 3px;
	padding: 0.5em;
	border: 1px solid;
	background-color: var(--code);
	line-height: 1.2;
	overflow: auto;
	max-height: 300px; /* for outdated browser */
	max-height: 80vh;
}
pre b {
	text-decoration: underline dotted;
}
td pre {
	margin-top: 3px;
}
/* */
pre.syntax {
	background-color: var(--pale);
	border-color: var(--moderate);
}
.samp {
	background-color: var(--thin);
}
span.comment {
	color: var(--vivid);
}
span.keyword {
	color: var(--keyword);
}
span.preprocessor-keyword {
	color: var(--preprocessor-keyword);
}
/* */
pre.console {
	background-color: #333;
	color: white;
}
pre.console a:link, pre.console a:visited {
	color: #9cf;
}
pre.console var {
	color: #d55;
}
pre.console span.comment {
	color: #4c4;
}
/* */
blockquote {
	background: var(--pale) url('../images/icon/quote.png') no-repeat 2px 2px;
	color: var(--fore);
	border: 1px var(--moderate) solid;
	border-radius: 0.5em;
	margin: 1em 0;
	padding: 16px 0.5em 0.5em;
}
blockquote p {
	margin: 0.5em 0;
}
blockquote cite {
	display: block;
	text-align: right;
	font-size: smaller;
	font-style: normal;
	margin: 0.5em 0;
}
/* */
small {
	line-height: 1.2;
}
sub {
	vertical-align: baseline;
}
hr {
	margin: 1em 3px;
	border-width: 1px 0 0 0;
	border-color: inherit;
	border-style: solid;
}
canvas {
	margin: 1em 0;
	border: 1px solid;
	vertical-align: middle;
}
/* --- */
#g-container {
	min-width: 320px;
	background-color: var(--back);
	color: var(--text);
	box-shadow: 0 0 20px 0 black;
}
/* */
#g-body {
	margin: 5px;
}
#g-top, #g-header .breadcrumbs, #g-side {
	display: none;
}
/* */
#g-header {
	border-bottom: 1px var(--back) solid; /* for high-contrast mode */
}
#g-header, #g-footer {
	background-color: black;
	color: white;
	white-space: nowrap;
}
#g-header a, #g-footer a {
	text-decoration: none;
	border-radius: 0.5em;
}
#g-header a:link, #g-footer a:link {
	color: white;
}
#g-header a:visited, #g-footer a:visited {
	color: silver;
}
#g-header a:hover, #g-footer a:hover {
	background-color: silver;
	color: white;
}
#g-header ul, #g-category div {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* */
#g-category {
	padding: 0.5em 5px;
}
#g-category div {
	font-size: 1.6em;
	font-weight: bold;
}
#g-category a img, #header-list a img {
	/* border-style: none; Not work in IE11 */
	border: none;
	border-radius: 0;
	margin-right: 3px;
	vertical-align: middle;
	padding: 0;
}
/* */
.breadcrumbs {
	padding: 0.5em 5px;
	background-color: #222;
}
.breadcrumbs ul {
	margin: 0;
	padding-left: 0;
}
.breadcrumbs li {
	display: inline;
}
.breadcrumbs a {
	text-decoration: none;
}
.breadcrumbs a:after {
	content: '>';
	margin-left: 0.5em;
}
/* */
#g-footer {
	clear: both; /* NECESSARY */
	white-space: normal;
	border-top: 1px var(--back) solid; /* for high-contrast mode */
}
#g-footer li {
	line-height: 2;
}
#g-footer address {
	color: silver;
	font-style: normal;
	text-align: right;
	padding: 0.5em 5px;
}
#g-link {
	padding: 0.5em 5px;
}
#g-link ul {
	margin: 0;
	padding-left: 0;
}
#g-link li {
	display: inline;
}
#g-link li ~ li {
	border-left: 1px solid;
	padding-left: 0.5em;
}
/* */
#g-cse {
	width: 80%;
	border: 1px var(--moderate) solid;
	border-radius: 0.5em;
	background-color: var(--thin);
	color: var(--fore);
	margin: 2em 0 1em;
	padding: 0.5em;
}
#g-cse div {
	font-size: smaller;
	font-weight: bold;
}
#g-cse div:before {
	content: url('../images/icon/search.png');
}
#g-cse input[type=text] {
	width: 50%;
}
/* */
#g-ad {
	margin: 2em 0 1em;
}
#g-ad a img {
	border: none;
	padding: 0;
}
.optout {
	margin-top: 3px;
	font-size: smaller;
}
.optout:before {
	content: url('../images/icon/close.png');
	vertical-align: middle;
}
.amazon-widget {
	display: none;
}
/* --- */
div.reference {
	background-color: var(--thin);
	margin: 2em 0 1em;
	padding-bottom: 3px;
}
div.reference form {
	margin: 0.5em 20px;
}
a.reference:before {
	content: '参考：';
	font-weight: bold;
}
a.reference {
	font-size: smaller;
}
/* */
#table-of-contents {
	border-left: 1px solid;
	background-color: var(--pale);
	margin: 2em 0;
	padding-bottom: 3px;
}
#table-of-contents div {
	font-weight: bold;
	border-bottom: 1px solid;
	margin-left: 0.5em;
}
#table-of-contents > ul + ul {
	border-top: 1px solid;
	padding-top: 0.5em;
}
/* */
#header-list {
	margin: 2em 0 1em;
	padding-bottom: 1px;
}
#header-list summary, #g-side > div div {
	border: 1px var(--text) solid; /* for high-contrast mode */
	border-top-left-radius: 0.5em;
	background-color: var(--text);
	color: var(--back);
	font-weight: bold;
	padding: 3px 0.5em;
}
#header-list summary:hover {
	cursor: pointer;
}
#header-list > ul {
	border-left: 1px var(--text) solid;
	margin: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
/* */
#bottom-nav {
	margin: 2em 0 1em;
	border-top: 1px solid;
}
#bottom-nav ul {
	padding-left: 0;
}
#bottom-nav li {
	display: inline;
	margin-right: 0.5em;
}
#bottom-nav a:before {
	content: '≫';
	display: inline-block;
}
/* */
#related-page {
	margin-bottom: 1em;
}
#related-page h2 {
	border: 1px var(--text) solid; /* for high-contrast mode */
	border-top-left-radius: 0.5em;
	background-color: var(--text);
	color: var(--back);
	margin-bottom: 0;
	padding: 3px 0.5em;
}
#related-page ul {
	margin-top: 0;
	padding-left: 30px;
}
/* */
#beta {
	background: url('../images/beta.png') repeat-y right top;
}
#beta h1:after {
	content: '(Beta版)';
	color: red;
	margin-left: 0.5em;
}
.beta {
	font-size: smaller;
	font-weight: bold;
	color: var(--moderate);
}
/* */
.image-catalogue {
	list-style-type: none;
	padding-left: 0;
}
.image-catalogue li {
	overflow: hidden;
	margin-bottom: 1em;
}
.image-catalogue img {
	float: left;
	margin-right: 5px;
}
.image-catalogue li > div {
	margin-left: 157px;
	margin-right: 5px;
}
/* */
p.emphasis {
	padding: 0.5em;
	border-left: 5px orange solid;
	background-color: var(--emphasis);
}
div.emphasis {
	margin: 1em 0;
	padding: 1px 0.5em;
	border-left: 5px orange solid;
	background-color: var(--emphasis);
}
div.emphasis p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.path {
	font-family: Consolas, monospace;
	margin: 0 3px;
	padding: 0 3px;
	border: 1px var(--moderate) solid;
	border-radius: 0.5em;
	background-color: var(--pale);
}
/* */
.expression {
	font-family: 'Times New Roman';
	white-space: nowrap;
	margin: 3px 1em;
}
.expression sup {
	vertical-align: top;
}
.expression sub {
	vertical-align: bottom;
}
table.expression {
	border-left: 1px solid;
	border-right: 1px solid;
}
table .expression {
	margin-left: 0.5em;
}
/* */
.example-box {
	/* never use overflow: */
	border: 2px green solid;
	border-radius: 0.5em;
	background: url('../images/icon/sample.png') no-repeat right top;
	background-color: var(--example);
	margin: 1em 0;
	padding: 0.5em;
}
/* */
.textual {
	font-size: smaller;
	color: var(--vivid);
}
.gray-text {
	color: var(--moderate);
}
.key-text {
	border-radius: 0.5em;
}
/* */
.accept-message {
	color: var(--vivid);
}
.warning-message, .error-message {
	color: red;
}
.accept-message:before {
	content: url('../images/icon/accept.png');
}
.warning-message:before {
	content: url('../images/icon/warning.png');
}
.error-message:before {
	content: url('../images/icon/error.png');
}
/* */
span.image-snippet {
	font-size: smaller;
	font-weight: bold;
}
a.where {
	font-size: smaller;
	opacity: 0.5;
}
/* */
.icon-link a img {
	/* border-style: none; Not work in IE11 */
	border: none;
	border-radius: 0;
	margin-right: 3px;
	vertical-align: middle;
	padding: 0;
}
ul.icon-link {
	padding-left: 20px;
}
ul.icon-link > li {
	list-style-type: none;
}
/* */
.loading {
	font-size: 14px;
	font-weight: bold;
}
.loading:before {
	content: url('../images/icon/throbber.gif');
}
.processing textarea, input.processing, textarea.processing {
	background-image: url('../images/icon/throbber.gif');
	background-position: center;
	background-repeat: no-repeat;
}
a.copy:before {
	content: url('../images/icon/copy.png');
}
a.download:before {
	content: url('../images/icon/download.png');
}
a.feed-link:before {
	content: url('../images/icon/feed.png');
}
a[href$='.pdf']:before {
	content: url('../images/icon/pdf.png');
}
a[href$='.ppt']:before {
	content: url('../images/icon/ppt.png');
}
a[href$='.zip']:before {
	content: url('../images/icon/zip.png');
}
form[target=_blank] button span:after {
	content: url('../images/icon/external-link.png');
	margin-left: 3px;
}
@media screen and (min-width: 480px) {
	#g-top {
		display: block;
		float: right;
		padding: 5px;
	}
	/* */
	#g-header .breadcrumbs {
		display: block;
	}
	#g-cse input[type=text] {
		width: 70%;
	}
}
@media screen and (min-width: 640px) {
	#g-container {
		max-width: 960px;
		margin: 0 auto;
	}
	#g-contents {
		float: right;
		width: 80%;
	}
	#g-side {
		display: block;
		width: 19.5%;
	}
	#g-side > ul {
		font-weight: bold;
	}
	#g-side ul {
		list-style-type: none;
		margin: 0;
		padding-left: 0;
	}
	#g-side ul ul {
		font-weight: normal;
		border-left: 1px solid;
		padding-left: 3px;
	}
	#g-side li {
		margin: 0 0 1em;
	}
	#g-side ul ul ul, #g-side li li {
		margin-bottom: 0.5em;
	}
	#g-side a, #g-side span {
		text-decoration: none;
		border-radius: 0.5em;
		padding: 3px 0;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#g-side a:hover {
		background-color: var(--moderate);
	}
	/* */
	#g-side > div {
		margin: 2em 0 0;
	}
	#g-side > div ul {
		border-left: 1px var(--text) solid;
		padding-left: 3px;
	}
	#g-side > div li {
		margin-bottom: 0.5em;
	}
	#g-product li {
		text-align: center;
	}
	#g-product a img {
		/* border-style: none; Not work in IE11 */
		border: none;
	}
	/* */
	.image-catalogue {
		overflow: hidden;
	}
	.image-catalogue li {
		float: left;
		width: 50%;
		height: 100px;
		position: relative;
	}
	.image-catalogue li:before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 30%;
		background: linear-gradient( var(--opaque-back), var(--back) );
	}
}