@charset "utf-8";

/* 全体設定 */
html {
	background-color: #6a96b4;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
body {
	width: 100%;
	max-width: 900px;
	min-width: 360px;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem 1.5rem 3rem;
	text-align: left;
	line-height: 1.7rem;
	
	background-color: #78a6c8;
	opacity: 1.0;
	color: #080808;
	
	font-family: "Verdana", "BIZ UDGothic", "Meiryo", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.01rem;
}

h1 {font-family: "Times New Roman", "BIZ UDMincho", serif;}
h2 {font-family: "Times New Roman", "BIZ UDMincho", serif;}
h3 {
	font-family: "Times New Roman", "BIZ UDMincho", serif;
	margin-top: 3.0rem;
	margin-bottom: 1.0rem;
}
section {margin-bottom: 5.0rem;}

button {cursor: pointer;}
nav {
	font-size: 1.2rem;
	margin-top: 0.5rem;
}
p {margin: 0rem;}
ul {margin: auto;}
li {text-align: left;}
table {
	width: fit-content;
	margin: auto;
}
table tr {text-align: left;}
table th, td {
	border:solid 0.1rem #2b2b2b;
	padding: 0.4rem;
}
hr {
	background-color: #080808;
	height: 1px;
	border: none;
}

/* リンク設定 */
a:link {
	text-decoration: none;
	color: #000d99;
}
a:hover {
	text-decoration: underline;
	color: #00337f;
}
a:active {
	text-decoration: underline;
	color: #3900ad;
}
a:visited {
	text-decoration: none;
	color: #3c0081;
}
a.title-letter:link {color: #2b2b2b;}

/* ダークモード設定 */
@media (prefers-color-scheme: dark) {
	html {background-color: #1d1d1d;}
	body {
		background-color: #101010;
		color: #e0d8d0;
	}
	a:link {
		text-decoration: none;
		color: #b3d7ff;
	}
	a:hover {
		text-decoration: underline;
		color: #cce5ff;
	}
	a:active {
		text-decoration: underline;
		color: #ffcce5;
	}
	a:visited {
		text-decoration: none;
		color: #ffb3d7;
	}
	a.title-letter:link {color: #fffdfd;}
	hr {
 		background-color: #e0d8d0;
	}
}

/* 余白設定 */
.margin-t50 {margin-top: 5.0rem;}
.margin-t30 {margin-top: 3.0rem;}
.margin-t20 {margin-top: 2.0rem;}
.margin-t15 {margin-top: 1.5rem;}
.margin-t10 {margin-top: 1.0rem;}
.margin-t05 {margin-top: 0.5rem;}
.margin-t03 {margin-top: 0.3rem;}
.margin-t00 {margin-top: 0rem;}
.margin-b30 {margin-bottom: 3.0rem;}
.margin-b20 {margin-bottom: 2.0rem;}
.margin-b15 {margin-bottom: 1.5rem;}
.margin-b10 {margin-bottom: 1.0rem;}
.margin-b05 {margin-bottom: 0.5rem;}
.margin-b03 {margin-bottom: 0.3rem;}
.margin-b00 {margin-bottom: 0rem;}
.margin-0 {margin: 0rem;}
.padding-0 {padding: 0rem;}
.padding-r05 {padding-right : 0.5rem;}
.padding-l00 {padding-left : 0rem;}
.padding-l05 {padding-left : 0.5rem;}
.padding-l10 {padding-left : 1rem;}
.padding-l15 {padding-left : 1.5rem;}
.line-height13 {line-height: 1.3;}
.indent20 {text-indent: 2.0rem;}

/* フォント設定 */
.font-jp1 {font-family: "BIZ UDゴシック", sans-serif;}
.font-jp2 {font-family: "BIZ UD明朝 Medium", serif;}
.font-jp3 {font-family: "Meiryo", sans-serif;}
.font-en1 {font-family: "Verdana", sans-serif;}
.font-en2 {font-family: "Times New Roman", serif;}
.font-en3 {font-family: "MyricaM M", "PT Mono", monospace;}

.font-size22 {font-size: 2.2rem;}
.font-size14 {font-size: 1.4rem;}
.font-size12 {font-size: 1.2rem;}
.font-size11 {font-size: 1.1rem;}
.font-size10 {font-size: 1.0rem;}

.italic {font-style: italic;}

/* Solarized Color Dark*/
.base03 {background-color: #002b36;}
.base02 {background-color: #073642;}
.base01 {color: #586e75;}
.base0 {color: #839496;}
.base1 {color: #93a1a1;}
.yellow {color: #b58900;}
.orange {color: #cb4b16;}
.red {color: #dc322f;}
.magenta {color: #d33682;}
.violet {color: #6c71c4;}
.blue {color: #268bd2;}
.cyan {color: #2aa198;}
.green {color: #859900;}

/* 並び・揃えの設定 */
.inline {display: inline;}
.flow-root {display: flow-root;}
.float-left {
	float: left;
	margin-right: 1.0rem;
}
.float-right {
	float: right;
	margin-left: 1.0rem;
}
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}
.tb-center {vertical-align: middle;}
.flex {
	display: flex;
	justify-content: space-between;
}

/* アコーディオン */
summary::-webkit-details-marker {
	display: none;
}
summary {
	list-style: none;
	cursor: pointer;
}

#container {
	position: relative;
	padding:0;
}
#container span {
	position: absolute;
	top: 3.5rem;
	left: 6.5rem;
}