@charset "UTF-8";
/*--------------------------------------------------------------------
●定義
--------------------------------------------------------------------*/
:root {
	--main-font-size:	12pt;
	--sub-font-size:	11pt;
	--list-font-size:	10.5pt;
	--log-font-size:	10pt;
	--small-font-size:	9pt;
}

/*--------------------------------------------------------------------
●メイン配置
--------------------------------------------------------------------*/
* {
	box-sizing:		border-box;
}
html {
	margin-top:		0;
	font-size:		var(--main-font-size);
	line-height:		1.5;
	min-height:		100%;
}

header {
	position:		absolute;
	font-size:		var(--small-font-size);
	right:			4px;
	top:			0;
}

body {
	background-image:	linear-gradient(to bottom, #eef8ee, #b4dac3);
	margin:			0;
	padding:		0;
}

h1
{
	font-size:		22pt;
	font-weight:		bold;
	line-height:		100%;
	border-bottom:		2px solid #6b75b8;
	padding:		0 0.5em;
	margin:			calc(var(--small-font-size)*1.6) 0 0 0;
}
h1 a,
h1 a:link,
h1 a:visited {
	color:			inherit;
	text-decoration:	none;
}
#main {
	margin:			1em;
}

#footer
{
	border-top:		2px solid #6b75b8;
	text-align:		right;
	margin:			1.5em 0 0.6em 0;
	padding:		0 1em;
	font-size:		var(--small-font-size);
	line-height:		120%;
}

/*--------------------------------------------------------------------
●サンプル画像
--------------------------------------------------------------------*/
.sample-images {
	display:		flex;
	gap:			6px;
}
.sample-images a {
	display:		block;
	max-width:		256px;
	box-sizing:		content-box;
	border:			1px solid blue;
}
.sample-images a img {
	display:		block;
	max-width:		100%;
}

/*--------------------------------------------------------------------
●本文
--------------------------------------------------------------------*/
article {
	background-color:	#fafafa;
	border:			2px solid rgb(94,100,150);
	margin:			10px 0;
	border-radius:		10px;
	padding-left:		1em;
}
article div.body {
	margin:			0.5em;
}

article h2::before,
article h3::before {
	border:			6px solid #235280;
	border-radius:		6px;
	content:		"";
	display:		inline-block;
	height:			0;
	margin-right:		2px;
	margin-left:		10px;
}
article h2, article h3 {
	font-size:		120%;
	margin:			8px 0 0.5em -1em;
}
article h2::after {
	display:		block;
	content:		"";
	height:			3px;
	margin:			0 6px;
	background-image:	linear-gradient(to right, #233370, #fff);
}
article h3::before {
	margin-left:		0px;
}
article h3 {
	margin:			1em 0 1em -0.5em;
	font-size:		100%;
}



/*--------------------------------------------------------------------
●基本
--------------------------------------------------------------------*/
a:link, a:visited {
	color:			#04c;
}

p {
	text-indent:		1em;
}
p:has(+ p) {
	margin-bottom:		0.5em;
}
h3 + p, p + p {
	margin-top:		0.5em;
}
p.ni {
	text-indent:		0;
}

em, strong {
	color:			#c00;
}
em {
	font-style:		normal;
}

pre, code {
	background-color:	#e9e9e9;
}
code {
	padding:		2px 6px;
}
pre {
	margin:			0 1em;
	padding:		0.5em 1em;
	border-radius:		6px;
	overflow-x:		auto;
}

.hide {
	display:		none;
}

/*--------------------------------------------------------------------
●テーブルデザイン
--------------------------------------------------------------------*/
div.table-container {
	margin:			1em;
	overflow-x:		auto;
}
table {
	border-collapse:	collapse;
	empty-cells:		show;
	border-radius:		4px;
}
table, th, td {
	border:			1px solid #bbb;
}
td {
	padding-left:		2px;
	padding-right:		2px;
}
th, td {
	font-size:		var(--sub-font-size);
}

th {
	background-color:	#b1f0c2;
}
td {
	background-color:	#f3fff9;
}

/*--------------------------------------------------------------------
●配置
--------------------------------------------------------------------*/
.l	{
	text-align:	left;
}
.c	{
	text-align:	center;
}
.r	{
	text-align:	right;
}

/*--------------------------------------------------------------------
●ボタンデザイン
--------------------------------------------------------------------*/
button:not(.baguetteBox-button) {
	padding:		4px 8px;
	text-indent:		0;
	line-height:		100%;
	vertical-align:		middle;
	font-family:		sans-serif;

	cursor:			pointer;

	color:			#f9f9f9;
	font-weight:		bold;
	border:			1px solid #7ea6b5;
	border-radius:		6px;
	background-image:	linear-gradient(to bottom, #8391ca, #5f73a1);
}
button:hover, button:focus
{
	border-radius:		6px;
	cursor:			pointer;
	background-image:	none;
	background-color:	#859Ce6;
}
button:disabled
{
	color:			#666;
	background-image:	none;
	background-color:	#8892b3;
}
label {
	user-select: none;
}
button.left-margin,
button + button:not(.no-margin),
button + label:not(.note), 
label  + button,
button + a {
	margin-left:		1em;
}
button + a {
	vertical-align:		middle;
	font-size:		90%;
}
button:has(+ .note) {
	margin-right:		0.5em;
}
.note {
	display:		inline-block;
	font-size:		var(--sub-font-size);
}

/*--------------------------------------------------------------------
●サイズ指定
--------------------------------------------------------------------*/
.small { font-size: 90%; }

.w20 { width: 20px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w140 { width: 140px; }
.w160 { width: 160px; }
.w200 { width: 200px; }
.w240 { width: 240px; }
.w280 { width: 280px; }
.w300 { width: 300px; }
.w320 { width: 320px; }
.w360 { width: 360px; }
.w400 { width: 400px; }
.w440 { width: 440px; }
.w480 { width: 480px; }
.w500 { width: 500px; }
.w520 { width: 520px; }
.w560 { width: 560px; }
.w600 { width: 600px; }
.w640 { width: 640px; }
.w700 { width: 700px; }
.w800 { width: 800px; }

.w80p { width:  80%; }
.w90p { width:  90%; }
.w95p { width:  95%; }
.w100p{ width: 100%; box-sizing: border-box; }

.mw200 { min-width: 200px; }
.mw300 { min-width: 300px; }
.mw400 { min-width: 400px; }

/*--------------------------------------------------------------------
●レスポンシブ設定
--------------------------------------------------------------------*/
.sp { display: none; }

@media screen and (max-width: 600px) {
	/* font size */
	:root {
		--main-font-size:	11pt;
		--sub-font-size:	10pt;
		--list-font-size:	9pt;
		--log-font-size:	9pt;
		--small-font-size:	8.5pt;
	}
	h1 {
		font-size:		20pt;
	}
	ol, ul {
		padding-left:		2em;
	}
	.omit {
		display:		none;
	}
}
@media screen and (max-width: 460px) {
	h1 {
		font-size:		16pt;
		padding:		0 3px;
	}
	#main {
		margin:			1em 0.5em;
	}
	.omit2 {
		display:		none;
	}
}