@charset "utf-8";

html {
}
body {
	background-color: #fff;
}

body, a, input, textarea, select, optgroup, option, button {
	color: #630;
	font-size: 100%;
	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;
	font-variant-emoji: emoji;
}

h1, h2, h3, h4, h5, h6,
address, button, caption, cite, code, dfn,
em, strong, th, var {
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
}

body, div, dl, dt, dd, ul, ol, li, th, td, details, summary,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, code,
form, fieldset, legend {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th {
	text-align: left;
}

fieldset, img {
	border: 0;
}

a {
	text-decoration: none;
}

/*-----------------------------------**
**  Common                           **
**-----------------------------------*/
.monospace, .monospace a {
	font-family: Emoji,"Osaka-等幅","ＭＳ ゴシック",monospace;
	font-variant-emoji: emoji;
}
.pre { white-space: pre; }

.textarea {
	white-space: pre-wrap;
	tab-size: 4;
}

.scroll {
	display: block;
/*	max-height: 10em;*/
	max-height: 150pt;
	overflow: auto;
	background: #fff;
	border: 1px solid #630;
	padding: 10px;
}

.clear { clear: both; }
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { display: inline-block; }
.clearfix { display: block; }

.small { font-size: smaller; }
.info { color: #00f; font-size: smaller; }
.notice { color: #f00; font-size: smaller; }
.comment { color: #393; font-size: smaller; }

.red { color: #f33; }
.green { color: #393; }
.blue { color: #33f; }
.orange { color: #963; }
.cyan { color: #699; }
.purple { color: #c6c; }
.gray { color: #999; }
.black { color: #000; }

.none { display: none; }
.inline { display: inline; }
.block { display: block; }

img.thumbnail {
	border: 1px solid #fff;
}

.notice a {
	color: #630;
	text-decoration: underline;
	text-decoration-thickness: from-font;
}

.boxinfo {
	color: #33c;
	border: 1px solid #66c;
	background: #ccf;
	padding: 5px 10px 5px 10px;
	font-size: smaller;
}
.boxnotice {
	color: #c33;
	border: 1px solid #c66;
	background: #fcc;
	padding: 5px 10px 5px 10px;
	font-size: smaller;
}
.boxmessage {
	border: 1px solid #963;
	padding: 5px 10px 5px 10px;
	font-size: smaller;
}

summary {
	margin: 0 0 20px 0;
	font-size: smaller;
/*	font-weight: normal;*/
	cursor: pointer;
}

[dropzone][draggable] {
	cursor: move;
}

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeout {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes slidedown {
	from { height: 0; }
	to { opacity: 1; }
}
.fadein { animation: fadein 300ms linear forwards; }
.fadeout { animation: fadeout 300ms linear forwards; }

/*-----------------------------------**
**  Header                           **
**-----------------------------------*/
#header {
	position: fixed;
	width: 100%;
	top: 0;
	height: 30px;
	padding: 5px 0 0 0;
	color: #fff;
	background: #f60;
	overflow: hidden;
}
#header h1 {
	margin: 0 0 0 10px;
	font-size: smaller;
}
#header .account {
	float: right;
	margin: 0 10px 0 10px;
	font-size: smaller;
	color: #fff;
	min-width: 40px;
}

/*-----------------------------------**
**  Sub Header                       **
**-----------------------------------*/
#sheader {
	position: fixed;
	width: 100%;
	top: 35px;
	height: 94px;
	padding: 5px 0 0 0;
	background: #fc9;
	border-bottom: 1px dotted #630;
	overflow: hidden;
}
.sheader {
	height: 94px;
	padding: 5px 0 0 0;
	background: #fc9;
	border-bottom: 1px dotted #630;
	overflow: hidden;
}

.headline {
	height: 30px;
	margin: 0 10px 0 10px;
	background: #c63;
	overflow: hidden;
}
.headline h2, .headline h3 {
	margin: 0 0 0 10px;
	padding: 2px 0 0 0;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
}

.rmenu {
	float: right;
}
.rmenu li {
	float: left;
	height: 24px;
	margin: 2px 4px 2px 0;
	padding: 0 10px 0 10px;
	background: #fff;
	border: 1px solid #c63;
	border-radius: 14px;
	white-space: nowrap;
	overflow: hidden;
}
.rmenu li a { font-size: smaller; }
.rmenu li a.submit::before { content: "\002318"; color: #393; font-weight: bold; margin-right: 5px; }
.rmenu li a.cancel::before { content: "\002718"; color: #933; font-weight: bold; margin-right: 5px; }
.rmenu li a.close::before { content: "\002718"; color: #933; font-weight: bold; margin-right: 5px; }

.navi {
	margin: 5px 10px 0 10px;
	border-bottom: 0.5px dashed #630;
	overflow: hidden;
	white-space: nowrap;
}
.navi:after { content: ""; display: block; clear: both; }
.navi { display: inline-block; }
.navi { display: block; }
.navi li {
	display: inline-block;
	margin: 0 0 0 10px;
	font-size: smaller;
}
.navi li:before {
	content: ">";
	margin: 0 10px 0 0;
}
.navi li:first-child:before {
	content: none;
	margin: 0;
}
.navi li a {
	color: #630;
}


.menu {
	padding: 0 10px 0 10px;
	clear: both;
}
.menu li span {
	float: left;
	margin: 4px 0 0 0;
	padding: 2px 10px 2px 10px;
	border-radius: 14px;
	font-size: smaller;
	color: #c96;
}
.menu li button {
	float: left;
	margin: 4px 0 0 10px;
	padding: 2px 10px 2px 10px;
	height: 24px;
	font-size: smaller;
	background: #fff;
	border-radius: 14px;
	border: 1px solid #c63;
	cursor: pointer;
}
.menu li button::before {
	content: "\002318";
	color: #393;
	font-weight: bold;
	margin-right: 5px;
}
/*
.menu li button {
	float: left;
	margin: 4px 0 0 0;
	padding: 2px 10px 2px 10px;
	border-radius: 14px;
	font-size: smaller;
	color: #c96;
}
*/
.menu li a {
	float: left;
	margin: 4px 0 0 0;
	padding: 2px 10px 2px 10px;
	border-radius: 14px;
	font-size: smaller;
}
.menu li a.year {
	padding: 2px 0 2px 0;
}
.menu li a.month {
	padding: 2px 0 2px 0;
}
.menu li.rmenu a {
	float: right;
}
.menu li.rlink a {
	float: right;
}
.menu li.ope a {
	float: right;
}
.menu li.submit a {
	float: right;
	background: #fff;
	border: 1px solid #c63;
	margin-left: 10px;
	margin-right: 10px;
}
.menu li.menu a::after { content: "\0025be"; }
.menu li.rmenu a::after { content: "\0025be"; }
.menu li.link a::after { content: "\0025be"; }
.menu li.rlink a::after { content: "\0025b8"; }
.menu li.submit a::before { content: "\002318"; margin-right: 5px; }
.menu li.current a { color: #fff; background: #c63; }

.menu li a.top::before, .menu li span.top::before { content: "\002b06\00fe0e"; }
.menu li a.left::before, .menu li span.left::before { content: "\002b05\00fe0e"; }
.menu li a.right::before, .menu li span.right::before { content: "\0027a1\00fe0e"; }

/*-----------------------------------**
**  Contents                         **
**-----------------------------------*/
#contents {
	position: fixed;
	top: 135px;
	left: 0;
	right: 0;
	bottom: 35px;
	padding: 0 20px 20px 20px;
	overflow: auto;
}
.contents {
	position: fixed;
	top: 135px;
	left: 20px;
	right: 21px;
	bottom: 21px;
	padding: 0 10px 10px 10px;
	overflow: auto;
}
@media screen and (max-width:660px) {
	#contents { padding: 0 10px 20px 10px; }
}

#contents .section {
	margin: 20px 0 40px 0;
}

.contents .section {
	margin: 10px 0 40px 0;
}

.section::after { content: ""; display: block; clear: both; }
.section { display: inline-block; }
.section { display: block; }

.section h3 {
	margin: 20px 0 10px 0;
	clear: both;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	font-size: smaller;
}

.section h4 {
	padding: 2px 10px 2px 10px;
	background: #c63;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
}
.section h5 {
	padding: 2px 10px 2px 10px;
	background: #666;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
}

/*-----------------------------------**
**  2 Columns                        **
**-----------------------------------*/
.col2 {
	float: left;
	box-sizing: border-box;
	width: 50%;
}
.col2.left { padding-right: 20px; }
.col2.right { padding-left: 20px; }
@media screen and (max-width:660px) {
	.col2 { float: none; width: 100%; }
	.col2.left { padding: 0; margin-bottom:40px; }
	.col2.right { padding: 0; margin-bottom:40px; }
}


/*-----------------------------------**
**  Navi                             **
**-----------------------------------*/
/*
.navi {
	margin: 10px 0 0 0;
	border-bottom: 1px dashed #630;
}
.navi:after { content: ""; display: block; clear: both; }
.navi { display: inline-block; }
.navi { display: block; }
.navi li {
	float: left;
	margin: 0 10px 0 0;
	font-size: smaller;
}
.navi li:before {
	content: ">";
	margin: 0 10px 0 0;
}
.navi li:first-child:before {
	content: none;
	margin: 0;
}
.navi li a {
	color: #630;
}
*/

/*-----------------------------------**
**  Footer                           **
**-----------------------------------*/
#footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 30px;
	padding: 5px 0 0 0;
	color: #fff;
	background: #333;
	overflow: hidden;
}
#footer address {
	margin: 0 10px 0 0;
	font-size: smaller;
	text-align: right;
}

/*-----------------------------------**
**  Layer                            **
**-----------------------------------*/
#cover {
	position: fixed;
	display: none;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #333;
	opacity: 0.5;
	cursor: pointer;
}
#pane {
	position: fixed;
	display: none;
	top: 34px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	overflow: auto;
	background:#fff;
	border: 1px solid #630;
	box-shadow: 0 0 10px #333;
}

/*-----------------------------------**
**  Layer (Message)                  **
**-----------------------------------*/
#mcover {
	position: fixed;
	display: none;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #333;
	opacity: 0.5;
	cursor: pointer;
}
#message {
	position: fixed;
	display: none;
	top: 135px;
	margin: 0 auto 0 auto;
	left: 10%;
	width: 80%;
	overflow: hidden;
	background:#fff;
	border: 1px solid #630;
	box-shadow: 0 0 10px #333;
}
#message div {
	padding: 20px;
	margin: 0 0 20px 0;
	max-height: 150px;
	overflow: auto;
	font-size: smaller;
	text-align: center;
}
#message ul {
	position: relative;
	float: left;
	left: 50%;
}
#message li {
	position: relative;
	float: left;
	left: -50%;
}
#message li a {
	display: block;
	padding: 5px 20px 5px 20px;
	margin: 0 20px 20px 20px;
	font-size: smaller;
	border-radius: 4px;
	
	border: 1px solid #630;
	background: #c63;
	box-shadow: 1px 1px 1px #c96;
	color: #fff;
}
#message li a.cancel {
	border: 1px solid #630;
	background: #fff;
	box-shadow: 1px 1px 4px #ccc;
	color: #630;
}


/*-----------------------------------**
**  Layer (Account)                  **
**-----------------------------------*/
@keyframes accountframe {
	from { width: 0px; }
	to { width: 220px; }
}
.accountani {
	animation: accountframe 200ms linear forwards;
}

#account {
	position: fixed;
	display: none;
	top: 35px;
	bottom: 35px;
	right: 0px;
	width: 220px;
	padding: 10px 10px 0 10px;
	background: #fff;
	font-size: smaller;
	overflow: auto;
}
#account h6 {
	padding: 2px 10px 2px 10px;
	color: #fff;
	background: #630;
	white-space: nowrap;
	overflow: hidden;
}
#account ul {
	margin: 0 0 20px 0;
}
#account ul li {
	margin: 10px 0 0 0;
	white-space: nowrap;
	overflow: hidden;
}
#account ul li a {
	display: block;
	padding: 2px 10px 2px 10px;
	border-radius: 14px;
}
#account ul li a::before {
	content: "\0025b8";
	margin-right: 5px;
}
#account ul li.current a {
	color: #fff;
	background: #c63;
}
#account p {
	margin: 10px 0px 0 20px;
}
#account #qr {
	width: 160px;
	height: 160px;
	margin: 10px 0px 10px 20px;
}

/*-----------------------------------**
**  Layer (Action)                   **
**-----------------------------------*/
@keyframes actionframe {
	from { width: 0px; }
	to { width: 220px; }
}
.actionani {
	animation: actionframe 200ms linear forwards;
}

#action {
	position: fixed;
	display: none;
	top: 135px;
	bottom: 35px;
	right: 0px;
	width: 220px;
	padding: 10px 10px 0 10px;
	background: #fff;
	font-size: smaller;
	overflow: auto;
}
#action h6 {
	padding: 2px 10px 2px 10px;
	color: #fff;
	background: #630;
	white-space: nowrap;
	overflow: hidden;
}
#action ul {
	margin: 0 0 20px 0;
}
#action ul li {
	margin: 10px 0 0 0;
	white-space: nowrap;
	overflow: hidden;
}
#action ul li a {
	display: block;
	padding: 2px 10px 2px 10px;
	border-radius: 14px;
}
#action ul li a::before {
	content: "\0025b8";
	margin-right: 5px;
}
#action ul li.current a {
	color: #fff;
	background: #c63;
}

/*-----------------------------------**
**  Layer (Upload)                   **
**-----------------------------------*/
@keyframes uploadopenframe {
	from { height: 0; }
	to { height: 35vh; }
}
@keyframes uploadcloseframe {
	from { height: 35vh; }
	to { height: 0; }
}
.uploadopen {
	animation: uploadopenframe 200ms linear forwards;
}
.uploadclose {
	animation: uploadcloseframe 200ms linear forwards;
}

#upload {
	position: fixed;
	display: none;
	bottom: 35px;
	left: 0px;
	right: 0px;
	height: 35vh;
	background: #000;
	opacity: 0.8;
	font-size: smaller;
	overflow: auto;
}

ul.upload {
	margin: 20px 20px 0 20px;
}
ul.upload li {
	color: #fff;
}
ul.upload li span {
	margin-left: 20px;
}
ul.upload li span.success {
	color: #66f;
}
ul.upload li span.error {
	color: #f66;
}


/*-----------------------------------**
**  Contents (Home)                  **
**-----------------------------------*/
p.home {
	margin: 20px 10px 40px 10px;
}

dl.home {
	margin: 0 10px 0 10px;
}

dl.home dt {
	margin: 20px 0 10px 0;
	clear: both;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	font-size: smaller;
}

dl.home dd {
	margin: 0 0 5px 20px;
}
dl.home dd::after { content: ""; display: block; clear: both; }
dl.home dd { display: inline-block; }
dl.home dd { display: block; }

dl.home dd > a, dl.home dd > span {
	display: block;
	float: left;
	margin: 0 20px 0 0;
	border-radius: 10px;
	white-space: nowrap;
}
dl.home dd > a:last-child, dl.home dd > span:last-child {
	margin-right: 0;
}

dl.home dd a:hover {
	background: #ffc;
}

dl.home dd.i0 { margin-left: 20px; }
dl.home dd.i1 { margin-left: 40px; }
dl.home dd.i2 { margin-left: 60px; }
dl.home dd.i3 { margin-left: 80px; }
dl.home dd.i4 { margin-left: 100px; }
dl.home dd.i5 { margin-left: 120px; }
dl.home dd.i6 { margin-left: 140px; }
dl.home dd.i7 { margin-left: 160px; }
dl.home dd.i8 { margin-left: 180px; }
dl.home dd.i9 { margin-left: 200px; }
dl.home dd.i10 { margin-left: 220px; }

ul.home {
	margin: 20px 0 0 0;
}
ul.home li a:hover {
	background: #ffc;
}

@media screen and (max-width:660px) {
	dl.home dd {
		margin-left: 5px;
	}
}

/*-----------------------------------**
**  Contents (Login)                 **
**-----------------------------------*/
ul.buttons {
	margin: 20px 0 0 0;
}

ul.buttons li {
	display: inline-block;
	margin: 0 0 20px 20px;
	width: 300px;
}

ul.buttons li a {
	display: block;
	border: 1px solid #633;
	border-left: 8px solid #c63;
	border-radius: 8px;
	padding: 20px;
}


/*-----------------------------------**
**  Contents (Links)                 **
**-----------------------------------*/
div.links {
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap;
	margin: 0 0 0 5px;
}
div.links a,
div.links span,
div.links label {
	padding: 0 8px 0 8px;
	margin: 0 0 0 5px;
	white-space: nowrap;
	border: 1px solid #630;
	background: #ffffff;
	color: #630;
	text-decoration: none !important;
	font-size: smaller;
	border-radius: 3px;
}
div.links span {
	color: #ccc;
	border-color: #ccc;
}
div.links label {
	cursor: pointer;
}
div.links a.levelup::before { content: "\002199\00fe0e"; }
div.links span.levelup::before { content: "\002199\00fe0e"; }
div.links a.leveldown::before { content: "\002197\00fe0e"; }
div.links span.leveldown::before { content: "\002197\00fe0e"; }
div.links a.up::before { content: "\0025b2"; }
div.links span.up::before { content: "\0025b2"; }
div.links a.down::before { content: "\0025bc"; }
div.links span.down::before { content: "\0025bc"; }
div.links a.remove::before { content: "\002718"; }
div.links span.remove::before { content: "\002718"; }
div.links a.stop::before { content: "\002717"; }
div.links span.stop::before { content: "\002717"; }
div.links a.end::before { content: "\0021e9"; }
div.links span.end::before { content: "\0021e9"; }
div.links a.cancel::before { content: "\0021b6"; }
div.links span.cancel::before { content: "\0021b6"; }
div.links a.fix::before { content: "\002318"; }
div.links span.fix::before { content: "\002318"; }
div.links a.children::before { content: "\002263"; }
div.links span.children::before { content: "\002263"; }
div.links a.cclose::before { content: "\0022a0"; }
div.links span.cclose::before { content: "\0022a0"; }
div.links a.order::before { content: "\0021c5"; }
div.links a.append::before { content: "\002724"; }
div.links a.create::before { content: "\00271a"; }
div.links a.detail::before { content: "\00274f"; }
div.links a.edit::before { content: "\00270e"; }
div.links a.select::before { content: "\002714"; }
/*div.links a.refer::before { content: "\00261e"; }*/
div.links a.refer::before { content: "..."; }
div.links a.authority::before { content: "\002756"; }
div.links a.expand::before { content: "\0025bd"; }
div.links a.view::before { content: "\0022ee"; }
div.links a.api::before { content: "\0022ee"; }
div.links a.download::before { content: "\0022bd"; }

div.links a.move::before { content: "\0027bd"; color:#c63; font-weight:bold; }
div.links a.login::before { content: "\0027a4"; color:#393; font-weight:bold; }
div.links a.logout::before { content: "\002718"; color:#933; font-weight:bold; }

a.mark, span.mark {
	display: block;
	float:left;
	width: 1em;
	padding-right: 10px;
}
/*
a.mark.folder::before { content: "\002610"; }
a.mark.afolder::before { content: "\002611"; }
*/
a.mark.cabinet::before, span.mark.cabinet::before { content: "\01f4bc"; font-size:smaller; }
a.mark.pfolder::before, span.mark.pfolder::before { content: "\01f5c2\00fe0f"; font-size:smaller; }
a.mark.folder::before, span.mark.folder::before { content: "\01f4c1"; font-size:smaller; }
a.mark.afolder::before, span.mark.afolder::before { content: "\01f4c2"; font-size:smaller; }
a.mark.parent::before, span.mark.parent::before { content: "\01f4d1"; font-size:smaller; }
a.mark.children::before, span.mark.children::before { content: "\002263"; }
a.mark.nochildren::before, span.mark.nochildren::before { content: "\002261"; color: #ccc; }
a.mark.cclose::before, span.mark.cclose::before { content: "\002612"; }

.icon::before { font-size:smaller; margin-right: 4px; }
.icon.middle::before { font-size:100%; }

.icon.large::before {
	display: block;
	float:left;
	font-size: 16px;
	width: 25px;
	height: 25px;
	padding-right: 2px;
	text-align: center;
	overflow: hidden;
}

.icon.class::before { content: "\01f4d0"; }
.icon.master::before { content: "\01f4dd"; }
.icon.role::before { content: "\01f3f7\00fe0f"; }
/*.icon.idp::before { content: "\01f642"; }*/
.icon.idp::before { content: "\01f46a"; }
.icon.group::before { content: "\01f46a"; }
.icon.calendar::before { content: "\01f4c5"; }
.icon.date::before { content: "\01f4c6"; }

.icon.dconfig::before { content: "\002699\00fe0f"; }
.icon.style::before { content: "\01f3a8"; }
.icon.frame::before { content: "\01f3a8"; }
.icon.layout::before { content: "\01f3a8"; }
.icon.template::before { content: "\01f4f0"; }
.icon.resource::before { content: "\01f4c4"; }
.icon.map::before { content: "\01f5fa\00fe0f"; }

.icon.config::before { content: "\002699\00fe0f"; }
.icon.sync::before { content: "\01f91d"; }
.icon.destination::before { content: "\01f310"; }
.icon.datasource::before { content: "\01f520"; }
.icon.message::before { content: "\002709\00fe0f"; }

.icon.site::before { content: "\01f3e0"; }
.icon.model::before { content: "\01f6d6"; }
.icon.design::before { content: "\01f3a8"; }
.icon.service::before { content: "\1f3e2"; }
.icon.env::before { content: "\002699\00fe0f"; }
.icon.senv::before { content: "\002699\00fe0f"; }
.icon.report::before { content: "\1f4d2"; }
/*.icon.node::before { content: "\01f5c4\00fe0f"; }*/
.icon.node::before { content: "\01f4bb"; }
/*.icon.sendmail::before { content: "\01f4e8"; }*/
.icon.sendmail::before { content: "\002709\00fe0f"; }
/*.icon.database::before { content: "\01f6e2\00fe0f"; }*/
.icon.database::before { content: "\01f522"; }
.icon.saml::before { content: "\01f510"; }
.icon.oauth::before { content: "\01f510"; }
/*.icon.auth::before { content: "\01f642"; }*/
.icon.auth::before { content: "\01f464"; }
.icon.owner::before { content: "\01f468\00200d\01f4bc"; }
.icon.system::before { content: "\01f6e0\00fe0f"; }

.icon.folder::before { content: "\01f4c1"; }
.icon.afolder::before { content: "\01f4c2"; }
.icon.eyes::before { content: "\01f440"; }
.icon.object::before { content: "\01f4cb"; }
.icon.api::before { content: "\01f527"; }
.icon.css::before { content: "\01f5bc\00fe0f"; }
.icon.url::before { content: "\01f9ed"; }
.icon.email::before { content: "\01f4e7"; }
.icon.outer::before { content: "\01f9ed"; }

.zicon {
	font-size: 25px;
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	text-align: center;
	overflow: hidden;
	margin: 0px 0 5px 0;
}

.cssview {
	float: left;
	width: 160px;
	height: 120px;
	background: #eef;
	margin: 0 10px 10px 0;
	border: 1px dotted #ccc;
}
.cssbody {
	width: 160px;
	height: 120px;
	color: #000;
	background: #fff;
}
.csssource {
	float: left;
}

@media screen and (max-width:660px) {
	.csssource {
		float: none;
		clear: both;
	}
}

/*-----------------------------------**
**  Contents (List)                  **
**-----------------------------------*/
ul.list {
	margin-top: 20px;
}
ul.list li {
/*
	margin: 4px 0 4px 0;
	padding: 2px 10px 2px 10px;
*/
	padding: 4px 10px 4px 10px;
	border-top: 1px dotted #963;
	white-space: nowrap;
	overflow: hidden;
}
ul.list li:first-child {
	border: none;
}
ul.list.nomark li a::before {
	content: "";
	margin-right: 0;
}
ul.list li.current {
	color: #fff;
	background: #c63;
	border-radius: 20px;
}
ul.list li.current a {
	color: #fff;
}
ul.list li.wrap {
	white-space: normal;
}
ul.list li.i0 { padding-left: 10px; }
ul.list li.i1 { padding-left: 30px; }
ul.list li.i2 { padding-left: 50px; }
ul.list li.i3 { padding-left: 70px; }
ul.list li.i4 { padding-left: 90px; }
ul.list li.i5 { padding-left: 110px; }
ul.list li.i6 { padding-left: 130px; }
ul.list li.i7 { padding-left: 150px; }
ul.list li.i8 { padding-left: 170px; }
ul.list li.i9 { padding-left: 190px; }
ul.list li.i10 { padding-left: 210px; }
ul.list li.i11 { padding-left: 230px; }
ul.list li.i12 { padding-left: 250px; }
ul.list li.i13 { padding-left: 270px; }
ul.list li.i14 { padding-left: 290px; }
ul.list li.i15 { padding-left: 310px; }
ul.list li.i16 { padding-left: 330px; }
ul.list li.i17 { padding-left: 350px; }
ul.list li.i18 { padding-left: 370px; }
ul.list li.i19 { padding-left: 390px; }
ul.list li.i20 { padding-left: 410px; }

ul.list .empty { color: #ccc; font-size: smaller; }
ul.list .disabled { color: #ccc; }
ul.list .readonly { color: #ccc; }

ul.list li div.item {
	float: left;
}

ul.list li div.text {
	margin: 5px 0 5px 0;
	padding: 10px 0 10px 20px;
	border-left: 5px solid #963;
	font-size: smaller;
	white-space: normal;
}
ul.list li div.text:last-child {
	margin-bottom: 20px;
}
ul.list li div.text:after { content: ""; display: block; clear: both; }
ul.list li div.text { display: inline-block; }
ul.list li div.text { display: block; }

ul.list li img {
	float: left;
	margin: 0 20px 0 0;
}
ul.list li div.noimage {
	float: left;
	margin: 0 20px 0 0;
	width: 120px;
	height: 80px;
	background: #eee;
	color: #ccc;
	text-align: center;
	font-size: smaller;
}
ul.list li span.key {
	display: inline-block;
	padding: 0 10px 0 10px;
	margin: 0 0 5px 0;
	font-size: smaller;
	color: #fff;
	background: #c63;
}

ul.list li div.tags {
	margin: 0;
	padding: 0 0 5px 0;
}
ul.list li div.tags:last-child {
/*	margin-bottom: 20px;*/
}

ul.list li div.fields {
	margin: 0;
	padding: 5px 0 5px 0;
	font-size: smaller;
	color: #999;
}
ul.list li div.fields span {
	margin-left: 10px;
}
ul.list li div.fields span:first-child {
	margin-left: 0;
}
ul.list li div.fields:last-child {
	margin-bottom: 20px;
}

ul.list li span.id {
	display: block;
	padding: 3px 0 0 0;
	float: left;
	width: 7em;
	font-size: smaller;
	font-weight: bold;
}

.status {
	display: block;
	float: left;
	width: 28px;
	padding: 0 8px 0 8px;
	margin: 4px 10px 0 0;
	font-size: 11px;
	color: #ccc;
	background: #fff;
	border: 1px solid #ccc;
	text-align: center;
}
.status.s1  { color: #fff; background: #66f; border-color: #66f; }
.status.s11 { color: #66f; background: #fff; border-color: #66f; }
.status.s2  { color: #fff; background: #393; border-color: #393; }
.status.s12 { color: #393; background: #fff; border-color: #393; }
.status.s3  { color: #fff; background: #999; border-color: #999; }
.status.s13 { color: #999; background: #fff; border-color: #999; }

.status.s0::before { content:"確定"; }
.status.s1::before, .status.s11::before { content:"新規"; }
.status.s2::before, .status.s12::before { content:"更新"; }
.status.s3::before, .status.s13::before { content:"停止"; }
.status.s9::before { content:"なし"; }

.status.s0.en::before { content:"FIX"; }
.status.s1.en::before, .status.s11.en::before { content:"NEW"; }
.status.s2.en::before, .status.s12.en::before { content:"UPD"; }
.status.s3.en::before, .status.s13.en::before { content:"DWN"; }
.status.s9.en::before { content:"NON"; }

.tag {
	padding: 0 10px 0 10px;
	margin: 0 10px 0 0;
	font-size: smaller;
	color: #fff;
	background: #c63;
	white-space: nowrap;
}
.tag.box {
	border: 1px solid #ccc;
	color: #ccc;
	background: none;
}
.tag.red { color: #c66; border-color: #c66; background: #fcc; }
.tag.green { color: #696; border-color: #696; background: #cfc; }
.tag.blue { color: #66c; border-color: #66c; background: #ccf; }
.tag.orange { color: #963; border-color: #963; background: #fc9; }
.tag.cyan { color: #699; border-color: #699; background: #cff; }
.tag.purple { color: #c6c; border-color: #c6c; background: #fcf; }
.tag.gray { color: #666; border-color: #666; background: #ccc; }
.tag.black { color: #fff; border-color: #333; background: #666; }

/*-----------------------------------**
**  Contents (Tile)                  **
**-----------------------------------*/
ul.tile {
	margin-top: 20px;
}
ul.tile li {
	display: inline-block;
	width: 200px;
	margin: 0 10px 0 0;
}
ul.tile li a {
	display: block;
	padding: 4px 0 4px 0;
	white-space: nowrap;
	overflow: hidden;
}
ul.tile.staff li a::before { content: "\01f464"; margin-right: 5px; }


/*-----------------------------------**
**  Contents (Table)                 **
**-----------------------------------*/
div.report {
	overflow: auto;
	padding: 0 0 20px 0;
}
table.report {
	border: 1px solid #963;
}
table.report col.month { min-width: 35px; }
table.report col.week { min-width: 35px; }
table.report col.date { min-width: 35px; }
table.report col.holiday { min-width: 35px; background: #fee; }
table.report col.base { min-width: 35px; background: #eef; }
table.report col.sat { min-width: 35px; background: #eef; }
table.report col.sun { min-width: 35px; background: #fee; }

table.report th, table.report td {
	padding: 2px 10px 2px 10px;
	border: 1px solid #963;
	vertical-align: top;
	font-size: smaller;
}
table.report th {
	white-space: nowrap;
}
table.report thead th {
	color: #fff;
	background: #c63;
}
table.report thead tr.code th {
	color: #630;
	background: #fc9;
}
table.report thead tr.code th.holiday, table.report thead td.holiday { color: #f33; }
table.report thead tr.code th.base, table.report thead td.base { color: #33f; }
table.report thead tr.code th.sat, table.report thead td.sat { color: #33f; }
table.report thead tr.code th.sun, table.report thead td.sun { color: #f33; }
table.report tbody th {
	background: #fc9;
}
table.report th a {
	color: #fff;
	text-decoration: underline dashed;
	text-decoration-thickness: from-font;
}
table.report td a {
	text-decoration: underline dashed;
	text-decoration-thickness: from-font;
}
table.report tr.total th, table.report tr.total td {
	background: #fee;
}
table.report tbody td {
}
table.report a.next:after {
	content: "\0025b9";
	margin-left: 5px;
}

table.report th.empty, table.report th.empty a { color: #c96; }
table.report td.empty, table.report td.empty a { color: #ccc; }
table.report th span.disabled { color: #c96; }
table.report td span.disabled { color: #ccc; }
dl.properties table.report td span.disabled { color: #c96; }


table.report td { white-space: nowrap; }
table.report td.wrap { white-space: normal; min-width:100px; }
table.report td.nowrap { white-space: nowrap; }
table.report td.narrow { white-space: nowrap; width: 20px; }
table.report td.center { text-align: center; }
table.report td.right { text-align: right; }
table.report td.n { text-align: right; }
table.report th.current { font-weight: bold; }
table.report td.current { background: #ffc; }

table.report td.i0 { padding-left: 10px; }
table.report td.i1 { padding-left: 30px; }
table.report td.i2 { padding-left: 50px; }
table.report td.i3 { padding-left: 70px; }
table.report td.i4 { padding-left: 90px; }
table.report td.i5 { padding-left: 110px; }
table.report td.i6 { padding-left: 130px; }
table.report td.i7 { padding-left: 150px; }
table.report td.i8 { padding-left: 170px; }
table.report td.i9 { padding-left: 190px; }
table.report td.i10 { padding-left: 210px; }

table.report td.in { background: #ffc; border-left-color: #ffc; border-right-color: #ffc; }
table.report td.inh { background: #ffc; border-left-color: #963; border-right-color: #ffc; }
table.report td.int { background: #ffc; border-left-color: #ffc; border-right-color: #963; }
table.report td.inht { background: #ffc; border-left-color: #963; border-right-color: #963; }

table.report td.in-red { color: #c66; background: #fcc; border-left-color: #fcc; border-right-color: #fcc; }
table.report td.inh-red { color: #c66; background: #fcc; border-left-color: #963; border-right-color: #fcc; }
table.report td.int-red { color: #c66; background: #fcc; border-left-color: #fcc; border-right-color: #963; }
table.report td.inht-red { color: #c66; background: #fcc; border-left-color: #963; border-right-color: #963; }

table.report td.in-green { color: #696; background: #cfc; border-left-color: #cfc; border-right-color: #cfc; }
table.report td.inh-green { color: #696; background: #cfc; border-left-color: #963; border-right-color: #cfc; }
table.report td.int-green { color: #696; background: #cfc; border-left-color: #cfc; border-right-color: #963; }
table.report td.inht-green { color: #696; background: #cfc; border-left-color: #963; border-right-color: #963; }

table.report td.in-blue { color: #66c; background: #ccf; border-left-color: #ccf; border-right-color: #ccf; }
table.report td.inh-blue { color: #66c; background: #ccf; border-left-color: #963; border-right-color: #ccf; }
table.report td.int-blue { color: #66c; background: #ccf; border-left-color: #ccf; border-right-color: #963; }
table.report td.inht-blue { color: #66c; background: #ccf; border-left-color: #963; border-right-color: #963; }

table.report td.in-orange { color: #963; background: #fc9; border-left-color: #fc9; border-right-color: #fc9; }
table.report td.inh-orange { color: #963; background: #fc9; border-left-color: #963; border-right-color: #fc9; }
table.report td.int-orange { color: #963; background: #fc9; border-left-color: #fc9; border-right-color: #963; }
table.report td.inht-orange { color: #963; background: #fc9; border-left-color: #963; border-right-color: #963; }

table.report td.in-cyan { color: #699; background: #cff; border-left-color: #cff; border-right-color: #cff; }
table.report td.inh-cyan { color: #699; background: #cff; border-left-color: #963; border-right-color: #cff; }
table.report td.int-cyan { color: #699; background: #cff; border-left-color: #cff; border-right-color: #963; }
table.report td.inht-cyan { color: #699; background: #cff; border-left-color: #963; border-right-color: #963; }

table.report td.in-purple { color: #c6c; background: #fcf; border-left-color: #fcf; border-right-color: #fcf; }
table.report td.inh-purple { color: #c6c; background: #fcf; border-left-color: #963; border-right-color: #fcf; }
table.report td.int-purple { color: #c6c; background: #fcf; border-left-color: #fcf; border-right-color: #963; }
table.report td.inht-purple { color: #c6c; background: #fcf; border-left-color: #963; border-right-color: #963; }

table.report td.in-gray { color: #666; background: #eee; border-left-color: #eee; border-right-color: #eee; }
table.report td.inh-gray { color: #666; background: #eee; border-left-color: #963; border-right-color: #eee; }
table.report td.int-gray { color: #666; background: #eee; border-left-color: #eee; border-right-color: #963; }
table.report td.inht-gray { color: #666; background: #eee; border-left-color: #963; border-right-color: #963; }

table.report td.in-black { color: #fff; background: #999; border-left-color: #999; border-right-color: #999; }
table.report td.inh-black { color: #fff; background: #999; border-left-color: #963; border-right-color: #999; }
table.report td.int-black { color: #fff; background: #999; border-left-color: #999; border-right-color: #963; }
table.report td.inht-black { color: #fff; background: #999; border-left-color: #963; border-right-color: #963; }

table.report td.in-white { color: #630; background: #fff; border-left-color: #fff; border-right-color: #fff; }
table.report td.inh-white { color: #630; background: #fff; border-left-color: #963; border-right-color: #fff; }
table.report td.int-white { color: #630; background: #fff; border-left-color: #999; border-right-color: #963; }
table.report td.inht-white { color: #630; background: #fff; border-left-color: #963; border-right-color: #963; }

table.report td.in-term {
	background-image: linear-gradient(to bottom, #963, #963);
	background-position: left center;
	background-size: 100% 4px;
	background-repeat: no-repeat;
}
table.report td.inh-term {
	background-image: linear-gradient(to bottom, #963, #963), linear-gradient(to bottom, #963, #963);
	background-size: 100% 4px, 4px 16px;
	background-position: left center, left center;
	background-repeat: no-repeat;
}
table.report td.int-term {
	background-image: linear-gradient(to bottom, #963, #963), linear-gradient(to bottom, #963, #963);
	background-size: 100% 4px, 4px 16px;
	background-position: left center, right center;
	background-repeat: no-repeat;
}
table.report td.inht-term {
	background-image: linear-gradient(to bottom, #963, #963), linear-gradient(to bottom, #963, #963), linear-gradient(to bottom, #963, #963);
	background-size: 100% 4px, 4px 16px, 4px 16px;
	background-position: left center, left center, right center;
	background-repeat: no-repeat;
}

table.report.log a { text-decoration: none; }
table.report.log a.dup::after { content: "\0025b4"; margin-left: 5px; }
table.report.log a.ddown::after { content: "\0025be"; margin-left: 5px; }
table.report.log a.even::before { content: "…"; }
table.report.log a.desc::before { content: "▼"; }
table.report.log a.asc::before { content: "▲"; }

table.report.log td { text-align: right; }
table.report.log td a:after { content: "\0025b9"; margin-left: 5px; }
table.report.log thead tr:last-child th { color: #630; background: #fc9; }
table.report.log thead tr:last-child th a { color: #630; }
table.report.log tbody th a { color: #630; }
table.report.log tbody th a:after { content: "\0025b9"; margin-left: 5px; }
table.report.log tbody td:last-child { background: #fcc; }
table.report.log tfoot th { background: #fcc; }
table.report.log tfoot td { background: #fcc; }
table.report.log tfoot td:last-child { font-weight: bold; }


/*-----------------------------------**
**  Contents (Table)                 **
**-----------------------------------*/
table.list {
/*	width: 100%;*/
	border-top: 1px solid #963;
	border-bottom: 1px solid #963;
}
table.list caption {
	font-size: smaller;
}
table.list thead th {
	padding: 2px 10px 2px 10px;
	border-bottom: 1px solid #963;
	background: #c63;
	color: #fff;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
}
table.list thead td {
	padding: 2px 10px 2px 10px;
	border-bottom: 1px solid #963;
	background: #fc9;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
}
table.list tbody th {
	color: #630;
	background: #fc9;
}
table.list tbody td {
	padding: 5px 10px 5px 10px;
	border-bottom: 1px dotted #963;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	font-size: smaller;
}
table.list tbody td span {
	color: #ccc;
}
/*
table.list td a {
	border-radius: 10px;
}
table.list td a:hover {
	background: #ffc;
}
*/
table.list tbody td a {
	text-decoration: underline dashed;
	text-decoration-thickness: from-font;
}

table.list td.wrap { white-space: normal; }
table.list td.nowrap { white-space: nowrap; }
table.list td.narrow { white-space: nowrap; width: 20px; }

table.list th.links { white-space: nowrap; }
table.list td.links { white-space: nowrap; }
table.list th.links a,
table.list td.links a {
	padding: 0 5px 0 5px;
	white-space: nowrap;
	border: 1px solid #630;
	color: #630;
	background: #fff;
	font-size: smaller;
}
table.list th.links span,
table.list td.links span {
	padding: 0 5px 0 5px;
	white-space: nowrap;
	border: 1px solid #ccc;
	color: #ccc;
	background: #fff;
	font-size: smaller;
}
table.list td.n {
	text-align: right;
}

table.list th.i0, table.list td.i0 { padding-left: 10px; }
table.list th.i1, table.list td.i1 { padding-left: 30px; }
table.list th.i2, table.list td.i2 { padding-left: 50px; }
table.list th.i3, table.list td.i3 { padding-left: 70px; }
table.list th.i4, table.list td.i4 { padding-left: 90px; }
table.list th.i5, table.list td.i5 { padding-left: 110px; }
table.list th.i6, table.list td.i6 { padding-left: 130px; }
table.list th.i7, table.list td.i7 { padding-left: 150px; }
table.list th.i8, table.list td.i8 { padding-left: 170px; }
table.list th.i9, table.list td.i9 { padding-left: 190px; }

/*-----------------------------------**
**  Contents (Tab)                   **
**-----------------------------------*/
ul.tab {
	margin-top: 20px;
}
ul.tab li {
	display: inline-block;
}
ul.tab li a {
	display: block;
	margin: 4px 0 0 0;
	padding: 2px 10px 2px 10px;
	border-radius: 14px;
	font-size: smaller;
}
ul.tab li.current a { color: #fff; background: #c63; }


/*-----------------------------------**
**  Contents (Message)               **
**-----------------------------------*/
.message {
/*
	background: #fc9;
	border: 1px solid #963;
	border: 1px solid #963;
	font-size: smaller;
	padding: 2px 10px 2px 10px;
*/
	font-size: smaller;
}
p.conditions {
	font-size: smaller;
}

/*-----------------------------------**
**  Contents (Properties)            **
**-----------------------------------*/
dl.properties {
	background: #c63;
	border-left: 1px solid #c63;
	border-right: 1px solid #c63;
	border-bottom: 1px solid #c63;
}
dl.properties > dt {
	color: #fff;
	padding: 2px 10px 2px 10px;
	border-top: 1px solid #c63;
	font-size: smaller;
}
dl.properties .required {
	color: #f33;
	margin-left: 10px;
}
dl.properties .o::before { content: "\00274d"; margin-right: 5px; }
dl.properties .so::before { content: "\00303c"; margin-right: 5px; }
dl.properties .ss::before { content: "\0025ec"; margin-right: 5px; }
dl.properties .mo::before { content: "\0025ea"; margin-right: 5px; }
dl.properties .ms::before { content: "\0025ee"; margin-right: 5px; }

dl.properties > dd {
	padding: 20px 10px 20px 10px;
	background: #fc9;
	border-top: 1px solid #c63;
	min-height: 25px;
}
dl.properties > dd span.key {
	display: inline-block;
	padding: 0 10px 0 10px;
	margin: 0 0 5px 0;
	font-size: smaller;
	color: #fff;
	background: #c63;
/*	border: 1px solid #c63;*/
}
dl.properties > dd span.tag {
	padding: 0 10px 0 10px;
	font-size: smaller;
	color: #fff;
	background: #c63;
/*	border: 1px solid #c63;*/
}
/*
dl.properties > dd span.i18n {
	padding: 0;
	font-size: smaller;
	font-weight: bold;
	text-decoration: underline dotted;
	text-decoration-thickness: from-font;
}
*/
ul.i18n li {
	padding: 0 0 0 20px;
}
ul.i18n li.lang {
	padding: 10px 0 0 0;
	font-size: smaller;
	font-weight: bold;
/*
	text-decoration: underline dotted;
	text-decoration-thickness: from-font;
*/
}
ul.i18n li.lang:first-child {
	padding: 0;
}
ul.i18n li.lang span {
	font-size: medium;
}
ul.i18n li.lang::before { content: "\01f4dd"; }


dl.properties > dd span.unitp {
	margin-right: 5px;
}
dl.properties > dd span.unit {
	margin-left: 5px;
}
dl.properties dd::after { content: ""; display: block; clear: both; }
dl.properties dd { display: inline-block; }
dl.properties dd { display: block; }

dl.properties > dd a.next { border-radius: 10px; }
/*
dl.properties dd a.next::before { content: "\0022c6"; margin-right: 5px; }
*/
dl.properties dd.help {
	font-size: smaller;
}
dl.properties dd.help dl {
	margin-top: 10px;
}

dl.properties div.value {
	padding: 0 0 20px 0;
}
dl.properties .disabled {
	color: #c96;
}

dl.properties dd.group {
	padding: 0;
	border: 0;
	margin: 0 0 0 10px;
}
/*
dl.properties dl {
	background: #f96;
	border-left: 1px solid #c63;
}
*/
dl.properties dl.values { margin: 10px 0 20px 0; background: transparent; border: 0; }
dl.properties dl.values > dt { color: #630; padding: 0; border: 0; font-size: smaller; font-weight: bold; }
dl.properties dl.values > dt::before { content: "\0025a8"; margin-right: 5px; }
dl.properties dl.values > dt.outset { color:#fff; background: #c63; font-weight:normal; margin: 20px 0 20px 0; padding: 0 10px 0 10px; }
dl.properties dl.values > dt.outset:first-child { margin-top: 0; }
dl.properties dl.values > dt.outset::before { content: ""; margin: 0; }

dl.properties dl.values dl.values { /*margin-bottom: 0;*/ border-left: 1px dashed #963; padding-left: 5px; }
dl.properties dl.values dl.values dt::before { content: "\002022"; margin-right: 5px; }

dl.properties dl.values dl.values dl.values dt::before { content: "\0025e6"; margin-right: 5px; }
/*
dl.properties dl.values dl.values dt::before { content: "\0025aa"; margin-right: 5px; }
dl.properties dl.values dl.values dl.values dt::before { content: "\0025e6"; margin-right: 5px; }
*/
dl.properties dl.values dd { padding: 0 0 20px 14px; border: 0; }
dl.properties dl.values dd:last-child { padding-bottom: 0; }
dl.properties dl.values dd.right { text-align: right; }

dl.properties dl.values.inner { margin-bottom: 0; }

dl.properties ul.items {
	clear: both;
}
dl.properties ul.items:after { content: ""; display: block; clear: both; }
dl.properties ul.items { display: inline-block; }
dl.properties ul.items { display: block; }

dl.properties ul.items > li {
	margin-top: 10px;
	padding: 20px 0 0 0;
	border-top: 1px dotted #963;
	vertical-align: top;
}
dl.properties ul.items > li:first-child {
	margin-top: 0;
	padding-top: 10px;
	border: none;
}
dl.properties ul.items > li:after { content: ""; display: block; clear: both; }
dl.properties ul.items > li { display: inline-block; }
dl.properties ul.items > li { display: block; }

dl.properties ul.items a.append {
	font-size: smaller;
	text-decoration: underline;
	text-decoration-thickness: from-font;
}

dl.properties dd > a.detail,
dl.properties ul.items > li > a.detail {
	display: block;
	float:left;
	width: 1em;
	padding-right: 10px;
}
dl.properties dd > a.detail::before,
dl.properties ul.items > li > a.detail::before { content: "\002261"; }

dl.properties ul.items > li > .mitem {
	float:left;
	width:80%;
}
dl.properties ul.items > li > .mitem:first-child {
	width:100%;
}

dl.properties ul.file {
}
dl.properties ul.file li {
	margin-top: 10px;
	border-top: 1px dashed #963;
	padding-top: 10px;
}
dl.properties ul.file li:first-child {
	margin: 0;
	border: none;
	padding: 0;
}

dl.properties details {
	margin: 10px 0 0 10px;
	padding: 0;
}
dl.properties details div {
	padding: 0 0 0 10px;
}
dl.properties summary {
	margin: 0 0 0 0;
	padding: 0;
	font-size: 100%;
/*	font-weight: normal;*/
/*	cursor: pointer;*/
}
dl.properties details p {
	margin: 0 0 0 50px;
	font-size: smaller;
}


/*-----------------------------------**
**  Contents (Element List)          **
**-----------------------------------*/
ul.elements {
	border-top: 1px solid #c96;
	border-bottom: 1px solid #c96;
	margin: 10px 0 10px 0;
	padding: 5px 0 5px 0;
}
ul.elements.single {
	border-left: 1px solid #963;
}
ul.elements.multiple {
	border-left: 5px double #963;
}
ul.elements:after { content: ""; display: block; clear: both; }
ul.elements { display: inline-block; }
ul.elements { display: block; }

ul.elements li {
	padding-left: 5px;
	overflow: hidden;
	border-top: 1px dotted #c96;
}

ul.elements li:first-child {
	border: 0;
}

ul.elements li span.disabled { color: #c96; }
ul.elements li.condition { font-size: smaller; text-align: right; }
ul.elements li.options { font-size: smaller; }
ul.elements li p { float: left; white-space: pre-wrap; font-family: monospace; }

ul.elements li.i0 { padding-left: 0px; }
ul.elements li.i1 { padding-left: 20px; }
ul.elements li.i2 { padding-left: 40px; }
ul.elements li.i3 { padding-left: 60px; }
ul.elements li.i4 { padding-left: 80px; }
ul.elements li.i5 { padding-left: 100px; }
ul.elements li.i6 { padding-left: 120px; }
ul.elements li.i7 { padding-left: 140px; }
ul.elements li.i8 { padding-left: 160px; }
ul.elements li.i9 { padding-left: 180px; }

/*-----------------------------------**
**  Contents (Calendar)              **
**-----------------------------------*/
table.calendar {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #963;
}
table.calendar td, table.calendar th {
	width: 14.28%;
	border: 1px dotted #963;
	vertical-align: top;
}
table.calendar thead th {
	border-bottom: 1px solid #963;
	font-size: smaller;
	padding: 0 5px 0 5px;
}
table.calendar thead th.holiday { background: #fcc; }
table.calendar thead th.sun { color: #f00; }
table.calendar thead th.sat { color: #00f; }
table.calendar tbody td.today { border: 1px solid #963; }
table.calendar tbody td.holiday { background: #fcc; }
table.calendar tbody td a {
	display: block;
	padding: 5px;
	height: 4.5em;
	font-size: smaller;
	overflow: hidden;
}
table.calendar tbody td.today a span {
	font-weight: bold;
	text-decoration: underline;
	text-decoration-thickness: from-font;
}
table.calendar tbody td a span.sun { color: #f00; }
table.calendar tbody td a span.sat { color: #00f; }
table.calendar tbody td a span.out { color: #ccc; }
table.calendar tbody td a:hover {
	background: #ffc;
}

/*-----------------------------------**
**  Contents (Archive)               **
**-----------------------------------*/
table.archive {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #963;
}
table.archive td, table.archive th {
	width: 7.9%;
	border: 1px dotted #963;
	padding: 2px 1px 2px 1px;
	vertical-align: center;
	font-size: smaller;
	text-align: right;
}
table.archive td:nth-child(1), table.archive th:nth-child(1) {
	width: auto;
}
table.archive thead th { border-bottom: 1px solid #963; text-align: center; }
table.archive thead th:nth-child(1) { border-right: 1px solid #963; }
table.archive tbody th { border-right: 1px solid #963; }
table.archive a {
	display: block;
	overflow: hidden;
}
table.archive a:hover {
	background: #ffc;
}
table.archive .disabled { color: #ccc; }

/*-----------------------------------**
**  Markdown                         **
**-----------------------------------*/
.markdown {
	display: block;
	max-height: 50lvh;
	overflow: auto;
	background: #fff;
	padding: 10px;
	border: 1px solid #630;
}
.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;
	background: transparent;
	font-weight: bold;
	color: #630;
	text-decoration: none;
}
.markdown h1 {
	margin-top: 40px;
	border-bottom: 2px solid #c63;
	font-size: 100%;
}
.markdown h2 {
	margin-top: 30px;
	border-bottom: 1px dashed #c63;
	margin-left: 10px;
	font-size: 100%;
}
.markdown h3 {
	margin-left: 10px;
	font-size: 100%;
}
.markdown h4 {
	margin-left: 20px;
	font-size: 100%;
}
.markdown h5 {
	margin-left: 20px;
	font-size: 85%;
	text-decoration: underline;
}
.markdown h6 {
	margin-left: 20px;
	font-size: 85%;
}
.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 #963;
	border-radius: 4px;
	background: #fff;
}
.markdown blockquote {
	margin: 20px 0 0 0;
	padding: 0 0 0 10px;
	border-left: 2px solid #963;
}
.markdown hr {
	margin: 20px 0 20px 0;
	padding: 0 0 20px 0;
	border: none;
	border-top: 1px dotted #963;
}
.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 table {
	padding: 0;
	margin: 20px 0 0 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 #630;
	font-size: smaller;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
}
.markdown table td {
	padding: 0px 10px;
	background: #fff;
	border: 0.5px solid #630;
	font-size: smaller;
	white-space: nowrap;
}
.markdown table th {
	color: #fff;
	background: #c63;
}
.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 20px; }
.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; }

.markdown strong {
	font-weight: bold;
	color: #f00;
	text-decoration: underline 3px #ff0;
}
.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%;
}
.markdown a {
	text-decoration: underline;
	text-decoration-thickness: from-font;
}

/*-----------------------------------**
**  Table Format                     **
**-----------------------------------*/
/*
.table {
	display: block;
}
.table table {
	border-collapse: collapse;
	border: 0.5px solid #333;
	background: #fff;
}
.table table th {
	padding: 2px 5px;
	border: 0.5px solid #333;
	font-size: smaller;
	white-space: nowrap;
}
.table table td {
	padding: 0px 10px;
	border: 0.5px solid #333;
	font-size: smaller;
	white-space: nowrap;
}
.table table thead th {
	color: #fff;
	background: #c63;
}
.table table tbody th {
	background: #fcc;
}
.table table tfoot td, .table table tfoot th {
	color: #fff;
	background: #666;
}
.table table tr.subtotal, .table table col.subtotal, .table table tbody td.subtotal {
	color: #333;
	background: #ccc;
}
.table table col.total, .table table tbody td.total {
	color: #fff;
	background: #999;
}
.table table .left { text-align: left; }
.table table .center { text-align: center; }
.table table .right { text-align: right; }
.table table strong { font-weight: bold; }
.table table em { font-style: italic; }
*/

/*-----------------------------------**
**  Contents (Form Box)              **
**-----------------------------------*/
form.box {
	width: 250px;
	margin: 20px auto 20px auto;
	padding: 20px;
	border: 1px solid #963;
	background: #fc9;
}

form.box dl dt {
	font-size: smaller;
}
form.box dl dt.underline {
	text-decoration: underline;
	text-decoration-thickness: from-font;
}
form.box dl dd {
	margin: 0 0 10px 0;
}
form.box dl dd.button {
	margin: 20px 0 10px 0;
	text-align: center;
}

form.box input[type="text"],
form.box input[type="password"] {
	ime-mode: disabled;
}

form.box select {
	width: 100%;
}

/*-----------------------------------**
**  Contents (Search)                **
**-----------------------------------*/
div.search {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 16px;
}
div.search::before {
	display: block;
	position: absolute;
	margin: 2px 0 0 5px;
	content: "\01f50d";
}
div.search input {
	margin: 0 0 0 30px;
	padding: 2px 2px 2px 2px;
	width: calc(100% - 46px);
	border: 0;
	outline: 0;
}

/*-----------------------------------**
**  Contents (Help)                  **
**-----------------------------------*/
a.help {
	display: block;
	float: right;
	margin: 0;
	width: 30px;
	text-align: right;
}
a.help::before {
	content:"\002139\00fe0f";
}

/*-----------------------------------**
**  Contents (Form)                  **
**-----------------------------------*/
input[type="text"],
input[type="password"],
textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 2px 2px 2px 2px;
	tab-size: 4;
}

a.help ~ input[type="text"], a.qr ~ input[type="text"],
a.help ~ textarea, a.qr ~ textarea {
	width: calc(100% - 30px);
}

input.middle { width: 20em; }
input.short { width: 10em; }
input.number { width: 4em; }
input[type="number"] { width: 10em; }
input[type="number"].short { width: 4em; }
input.real { width: 10em; }
input.sreal { width: 4em; }

textarea {
/*
	resize: none;
	white-space: pre;
	min-width: 95%;
	max-width: 95%;
*/
	min-height: 2em;
	max-height: 160pt;
}
/*
textarea.auto {
	width: auto;
}
*/
select {
	box-sizing: border-box;
	max-width: 100%;
}

label {
	cursor: pointer;
}

label.item {
	display: block;
	float: left;
	position: relative;
	white-space: nowrap;
	margin: 0 20px 0 20px;
}
label.item.clear {
	margin-top: 10px;
}
label.item:first-child {
	margin-top: 0;
}

label.item input[type="radio"],
label.item input[type="checkbox"] {
	position: absolute;
	left: -20px;
	margin: 6px 5px 0 0;
	cursor: pointer;
}

input[type="file"] {
	display: none;
}

label.image, a.image {
	display: block;
	float: left;
	white-space: nowrap;
	margin: 0 20px 10px 0;
	padding: 2px 10px 2px 10px;
	border: 1px solid #630;
	border-radius: 4px;
	background: #c63;
	box-shadow: 1px 1px 1px 1px #c96;
	color: #fff;
	font-size: smaller;
	cursor: pointer;
}

#contents button,
#contents input[type="submit"],
#contents input[type="reset"],
#contents input[type="button"],
#pane input[type="submit"] {
	margin: 0;
	padding: 2px 10px 2px 10px;
	border: 1px solid #630;
	border-radius: 4px;
	background: #c63;
	box-shadow: 1px 1px 1px 1px #c96;
	color: #fff;
	font-size: smaller;
	cursor: pointer;
}

/*-----------------------------------**
**  Contents (Form Options)          **
**-----------------------------------*/
.color {
	display: block;
	float: left;
	margin: 0 10px 10px 0;
	width: 58px;
	height: 25px;
	border: 1px solid #fff;
}

/*-----------------------------------**
**  Layer (Picture)                  **
**-----------------------------------*/
.section.picture {
	position: fixed;
	top: 34px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	overflow: auto;
	background:#000;
}

.section.picture img {
	position: absolute;
	max-width: calc(100vw - 42px);
	max-height: calc(100vh - 56px);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #fff;
	background: #fff;
}

/*-----------------------------------**
**  Layer (QR)                       **
**-----------------------------------*/
a.qr {
	display: block;
	float: right;
/*	padding: 4px 0 0 4px;*/
	margin: 0;
	width: 30px;
	text-align: right;
}
a.qr img {
	margin: 0;
}

#camera {
	text-align: center;
}
#camera video {
/*	width: 400px;*/
	width: calc(100vh - 56px);
	max-width: 100%;
}
#camera canvas {
	display: none;
}


/*-----------------------------------**
**  Layer (Color)                    **
**-----------------------------------*/
.w216 {
}
.w216:after { content: ""; display: block; clear: both; }
.w216 { display: inline-block; }
.w216 { display: block; }
.w216 .col {
	float:left;
	width:121px;
	margin-right:5px;
	padding:1px 0 0 1px;
}
.w216 ul:after { content: ""; display: block; clear: both; }
.w216 ul { display: inline-block; }
.w216 ul { display: block; }
.w216 ul { margin-bottom:5px; border-top:1px solid #fff; border-left:1px solid #fff; }
.w216 ul.blank { margin-top: 20px; }
.w216 ul.space { margin-top: 45px; }
.w216 ul.skip { margin-top: 104px; }
.w216 ul li { float:left; width:19px; height:19px; border-right:1px solid #fff; border-bottom:1px solid #fff; cursor:pointer; }
.w216 .col3 {}
.w216 ul.row { display:none; }

.w216 .selected { width:119px; height:99px; margin-bottom:5px; border:1px solid #fff; }

@media screen and (max-width:450px) {
	.w216 .col3 { display:none; }
	.w216 ul.row { display:block; }
}


/*-----------------------------------**
**  Print                            **
**-----------------------------------*/
@media print {
	#header, #sheader, #contents, #footer {
		position: static;
	}
	#sheader {
		height: 35px;
	}
	#header .account,
	#sheader .navi, #sheader .menu,
	div.links {
		display: none;
	}
	#contents {
		overflow: visible;
	}
}