@charset "utf-8";

/*-----------------------------------*
 *  Common                           *
 *-----------------------------------*/
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	color: #333;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 95px;
}
body, a, h1, h2, h3, h4, h5, h6, pre, input, select, option, button {
	font-size: 11pt;
	font-style: normal;
	font-weight: normal;
	font-family:"游ゴシック体","Yu Gothic",YuGothic,"Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"Helvetica Neue",Helvetica,Arial,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	text-align: left;
	text-decoration: none;
}
a {
	color: #339;
	text-decoration: underline dashed #99c;
	text-decoration-thickness: from-font;
}
li {
	list-style: none;
}
br.sp {
	display: none;
}

#cover {
	background-color: #000;
	position: fixed;
	left: 0;
	top: 50px;
	right: 0;
	bottom: 0;
	opacity: 0.1;
	z-index: 2;
	visibility: hidden;
}

#pagetop {
	color: #fff !important;
	background-color: #333;
	border-radius: 25px;
	font-size: 30px;
	text-align: center;
	position: fixed;
	width: 50px;
	height: 50px;
	right: 20px;
	bottom: 30px;
	opacity: 0.7;
	text-decoration: underline double;
	text-decoration-thickness: from-font;
}

/*-----------------------------------*
 *  Header                           *
 *-----------------------------------*/
header {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: #fff;
}
header h1 {
	margin: 0 10px 0 10px;
/*	text-align: center;*/
}
header h1 a {
	position: relative;
	color: #000;
	font-family: "Arial";
	font-weight: 900;
	font-size: 30px;
	letter-spacing: 5px;
	text-decoration: none;
}
header h1 a::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "";
	background: url('alpha.png');
}

/*-----------------------------------*
 *  Footer                           *
 *-----------------------------------*/
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 25px;
	padding: 0 10px 0 0;
	background: #333;
	text-align: right;
}
footer :is(a, small) {
	display: inline-block;
	height: 25px;
	line-height: 25px;
	font-size: 9pt;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}

/*-----------------------------------*
 *  Side Column                      *
 *-----------------------------------*/
aside {
	position: fixed;
	left: 0;
	top: 50px;
	bottom: 25px;
	width: 250px;
	overflow: auto;
	padding: 50px 10px 40px 10px;
	background: #fff;
}
aside section {
	position: relative;
	margin: 40px 0 0 0;
}
aside section:first-child {
	margin: 0;
}
aside section > h5 {
	height: 25px;
	line-height: 25px;
	border-bottom: 1.5px solid #333;
	white-space: nowrap;
	overflow: hidden;
	font-weight: bold;
}
aside section > h5:first-child {
	margin: 0;
}

aside section ul {
	margin: 20px 0 0 10px;
}
aside section ul li {
	padding: 2px 0 2px 0;
}
aside section ul li a {
	text-decoration: none;
}
aside section ul li a.current {
	font-weight: bold;
	text-decoration: underline 2px solid #ff0;
}

aside section > details {
	margin: 20px 0 0 10px;
}
aside section > details summary {
	cursor: pointer;
}
aside section > details ul {
	margin: 0 0 0 20px;
}


#sopen {
	color: #fff !important;
	background-color: #333;
	font-size: 9pt;
	text-align: center;
	display: block;
	position: fixed;
	width: 20px;
	height: 45px;
	line-height: 45px;
	left: 0;
	top: 50px;
	opacity: 0.7;
	text-decoration: none;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
}
#sclose {
	color: #fff !important;
	background-color: #333;
	font-size: 9pt;
	text-align: center;
	display: block;
	position: absolute;
	width: 20px;
	height: 45px;
	line-height: 45px;
	top: 0;
	right: 10px;
	opacity: 0.7;
	text-decoration: none;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
}
@keyframes sopenframe {
	from { left: -250px; }
	to { left: 0; }
}
@keyframes scloseframe {
	from { left: 0; }
	to { left: -250px; }
}
@media screen and (max-width:899px) {
	aside {
		display: none;
		position: fixed;
		left: -250px;
		top: 50px;
		bottom: 25px;
		z-index: 3;
		overflow: auto;
	}
	aside.sopen {
		animation: sopenframe 200ms linear forwards;
	}
	aside.sclose {
		animation: scloseframe 200ms linear forwards;
	}
}
@media screen and (min-width:900px) {
	#sopen { display: none; }
	#sclose { display: none; }
}


/*-----------------------------------*
 *  Main Column                      *
 *-----------------------------------*/
main {
	margin: 50px 0 0 0;
	padding: 50px 10px 20vh 260px;
}
@media screen and (max-width:899px) {
	main {
		padding-left: 30px;
	}
}
main > h2 {
	padding: 0 5px 0 5px;
	height: 25px;
	line-height: 25px;
	border-bottom: 1.5px solid #333;
	white-space: nowrap;
	overflow: hidden;
	font-weight: bold;
}
main > h3 {
	margin: 20px 0 0 10px;
	font-weight: bold;
}
main > p {
	margin: 20px 0 0 10px;
}
main > pre {
	margin: 20px 0 0 10px;
}
main  > div.inner {
	margin: 0 10px 0 20px;
}

main > section {
	margin: 80px 0 0 0;
}
main > section:first-child {
	margin-top: 0;
}
main > section > h3 {
	padding: 0 5px 0 5px;
	height: 25px;
	line-height: 25px;
	border-top: 1.5px solid #33c;
	border-bottom: 1.5px solid #33c;
	white-space: nowrap;
	overflow: hidden;
	font-weight: bold;
}
main > section > h3:first-child {
	margin: 0;
}
main > section > h3 {
	color: #339;
	background: #eef;
}


main article {
	min-height: 100vh;
}

main article section {
	position: relative;
	margin: 80px 0 0 0;
}
main article section.border {
	padding: 5px 10px 40px 0;
	border: 1px dashed #999;
}
main article section > div.inner {
	margin: 10px 10px 0 20px;
}
main article section > p {
}
main article section > h3 {
	display: inline-block;
	margin: 0 10px 0 10px;
	padding: 0 5px 0 5px;
	color: #fff;
	font-size: 9pt;
	font-weight: bold;
	background: #666;
}

main article section > dl {
	margin: 20px 10px 0 20px;
}
main article section > dl dt {
	margin-top: 20px;
	font-size: 10pt;
	font-weight: bold;
}
main article section > dl dd {
	padding: 2px 0 2px 10px;
}
main article section > dl dd::before {
	margin: 0 5px 0 0;
	content:"\0025b8";
	color: #06c;
}
main article section > dl dd a {
	display: inline-block;
	margin-right: 20px;
	text-decoration: none;
}
main article section > dl dd a.current {
	font-weight: bold;
	text-decoration: underline 2px solid #ff0;
}

.sample {
	padding: 0 10px 0 10px;
	font-size: 18pt;
	font-family: "Arial";
	font-weight: 900;
	letter-spacing: 4px;
}
.mask {
	color: #fff;
	background: url('gc00020500.100x50.png') #339;
}
.cmask {
	color: #339;
	position: relative;
}
.cmask::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	background: url('gc00020500.100x50.png');
}


/*-----------------------------------*
 *  Gallery                          *
 *-----------------------------------*/
ul.gallery {
	margin: 20px 10px 0 20px;
	display: grid;
	grid-template-columns:repeat(5, 1fr);
	gap: 10px;
}
ul.gallery li {
	position: relative;
	height: 120px;
}
ul.gallery li a {
	display: block;
	height: 100px;
	border-radius: 10px;
}
ul.gallery li span {
	position: absolute;
	display: block;
	width: 100%;
	height: 20px;
	top: 100px;
	left: 0;
	background: #fff;
	font-size: 9pt;
	text-align: center;
}
@media screen and (min-width:450px) and (max-width:899px) {
	ul.gallery li { height: 100px; }
	ul.gallery li a { height: 80px; }
	ul.gallery li span { top: 80px; }
}
@media screen and (max-width:449px) {
	ul.gallery li { height: 80px; }
	ul.gallery li a { height: 60px; }
	ul.gallery li span { top: 60px; }
}

/*-----------------------------------*
 *  Viewer                           *
 *-----------------------------------*/
#viewer {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #0006;
	z-index: 3;
	visibility: hidden;
}
#viewer_close {
	position: fixed;
	right: 10px;
	top: 5px;
	cursor: pointer;
}
#viewer_base {
	background-color: #fff;
	position: fixed;
	left: 40px;
	top: 45px;
	right: 40px;
	bottom: 45px;
	padding: 20px;
	border-radius: 10px;
	overflow: auto;
	
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	gap: 20px;
}
@media screen and (max-width:599px) {
	#viewer_base {
		left: 10px;
		right: 10px;
		grid-template-columns:repeat(1, 1fr);
	}
}
#preview {
	min-height: 120px;
	border-radius: 10px;
}
#viewer_base dl dt {
	margin: 20px 0 0 0;
	font-size: 9pt;
	font-weight: bold;
}
#viewer_base dl dt:first-child {
	margin-top: 0;
}
#viewer_base dl dd {
	padding: 0 0 0 0;
	white-space: nowrap;
}
#viewer_base dl dd span {
	margin: 0 10px 0 10px;
}
#viewer_base dl dd.button {
	text-align: right;
}
#viewer_base form label {
	cursor: pointer;
}
#viewer_base form select {
	padding: 2px 5px 2px 5px;
	border: 1px solid #999;
	border-radius: 4px;
	cursor: pointer;
}
#viewer_base form input[type="checkbox"] {
	margin: 0 10px 0 0;
}
#viewer_base form input[type="number"] {
	width: 60px;
	padding: 2px 2px 2px 5px;
	border: 1px solid #999;
	border-radius: 4px;
}
#viewer_base form dd.button a {
	color: #fff;
	background: url('alpha.png') #000;
	padding: 5px 20px 5px 20px;
	border: 1px solid #999;
	border-radius: 4px;
	cursor: pointer;
	font-family: "Arial";
	font-weight: 900;
	text-decoration: none;
}

/*-----------------------------------*
 *  Markdown                         *
 *-----------------------------------*/
.markdown {
	line-height: 1.9;
}
.markdown.help {
	max-height: none;
	overflow: scroll;
	margin: 20px 10px 0 10px;
	padding: 0;
	border: 0;
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: bold;
	color: #339;
	text-decoration: none;
}
.markdown h1 { margin-top: 40px; border-bottom: 1.5px solid #339; }
.markdown h2 { margin-top: 30px; border-bottom: 1px dashed #339; margin-left: 5px; }
.markdown h3 { margin-left: 5px; }
.markdown h3::before { content: "\0025a8"; margin-right: 2px; }
.markdown h4 { margin-left: 10px; text-decoration: underline 0.5px double; }
.markdown h5 { margin-left: 20px; text-decoration: underline; }
.markdown h6 { margin-left: 20px; }

.markdown p {
	margin: 20px 0 0 0;
	padding: 0;
}
.markdown pre {
	margin: 20px 0 0 0;
	padding: 10px;
	max-height: 20em;
	overflow: auto;
	border: 1px solid #333;
	border-radius: 4px;
	background: #fff;
}
.markdown code {
	dsplay: inline-block;
	margin: 0 5px 0 5px;
	padding: 2px 5px 2px 5px;
	border: 0.5px solid #333;
	border-radius: 4px;
	background: #fff;
}
.markdown pre code {
	dsplay: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.markdown blockquote {
	margin: 20px 0 0 0;
	padding: 5px 5px 5px 10px;
	border-left: 1.5px solid #333;
	background: #eef;
}
.markdown ul, .markdown ol {
	margin: 20px 0 0 0;
	padding: 0;
}
.markdown li {
	margin: 0 0 0 20px;
	padding: 0;
}
.markdown ul > li { list-style: disc; }
.markdown li ul > li { list-style: circle; }
.markdown li li ul > li { list-style: square; }
.markdown ol > li { list-style: decimal; }

.markdown hr {
	margin: 20px 0 20px 0;
	border: none;
	border-top: 1px dotted #333;
}
.markdown .table {
	display: block;
	padding: 0;
	margin: 20px 0 0 0;
	overflow: auto;
}

.markdown table {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}
.markdown table.detail {
	display: table;
	width: auto;
}
.markdown table:first-child {
	margin-top: 0;
}
.markdown table th {
	padding: 2px 5px;
	border: 0.5px solid #333;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
}
.markdown table td {
	padding: 0px 10px;
	background: #fff;
	border: 0.5px solid #333;
	white-space: nowrap;
}
.markdown table th {
	color: #fff;
	background: #06c;
}
.markdown table tfoot td,
.markdown table tfoot th {
	color: #fff;
	background: #666;
}
.markdown table tr.subtotal,
.markdown table col.subtotal,
.markdown table tbody td.subtotal {
	color: #333;
	background: #eee;
}
.markdown table tr.subtotal td {
	color: #333;
	background: #eee;
}
.markdown table col.total,
.markdown table tbody td.total {
	color: #fff;
	background: #999;
}
.markdown table th.left,
.markdown table td.left {
	text-align: left;
}
.markdown table th.center,
.markdown table td.center {
	text-align: center;
}
.markdown table th.right,
.markdown table td.right {
	text-align: right;
}

.markdown :is(h1, h2, h3, h4, h5, h6, p, pre, blockquote, hr, ul, ol, .table):first-child,
.markdown :is(h5, h6) + :is(p, pre, blockquote, hr, ul, ol, .table) {
	margin-top: 0;
}
.markdown h1 ~ :is(p, pre, blockquote, hr, ul, ol, .table) { margin: 20px 0 20px 5px; }
.markdown h2 ~ :is(p, pre, blockquote, hr, ul, ol, .table) { margin: 10px 0 10px 10px; }
.markdown h3 ~ :is(p, pre, blockquote, hr, ul, ol, .table) { margin: 10px 0 10px 10px; }
.markdown h4 ~ :is(p, pre, blockquote, hr, ul, ol, .table) { margin: 10px 0 10px 15px; }
.markdown h5 ~ :is(p, pre, blockquote, hr, ul, ol, .table) { margin: 5px 0 5px 20px; }
.markdown h6 ~ :is(p, pre, blockquote, hr, ul, ol, .table) { margin-left: 20px; }

div.markdown strong {
	font-weight: bold;
	color: #f00;
	text-decoration: underline 3px #ff0;
}
dd.markdown strong {
	font-weight: bold;
	color: #33f;
}
.markdown em {
	font-weight: bold;
	font-style: normal;
	text-decoration: underline 3px #ff0;
}
.markdown b {
	font-weight: bold;
}
.markdown i {
	font-style: italic;
}
.markdown del {
	color: #fcc;
	text-decoration: line-through;
	text-decoration-thickness: from-font;
}
.markdown ins {
	color: #39f;
}
.markdown img {
	max-width: 100%;
}