@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600');

* html {
	font: 62.5% 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
html,
body {
	width: 100%;
	height: 100%;
	min-width: 1200px;
}
body {
	display: none;
	overflow-x: hidden;
	font-size: 1em;
	background-color: #eeeeee;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cccccc' fill-opacity='0.28'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
input,
select {
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
th,
td {
	border: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
h3 {
	padding: 10px;
	margin-bottom: 10px;
	background: #999;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
h4 {
	padding: 5px;
	margin: 10px 0;
	background: #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
div.error {
	padding: 10px;
	background: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.r3 {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.r4 {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.r5 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.r8 {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.r10 {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/* ================================
login
================================ */
div#logo {
	width: 309px;
	margin: 20px auto;
	background: #fff;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
div#logo img {
	width: 289px;
	height: auto;
}
div#login {
	width: 220px;
	margin: 0 auto;
	background: #fff;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
}
div#login fieldset {
	border: none;
	font-size: 10px;
	margin-bottom: 5px;
}
div#login fieldset input {
	width: 196px;
	padding: 3px;
	background: #ffffef;
	font-size: 14px;
	border: 1px solid #ccc;
}
div#login input.submit {
	width: 150px;
	margin-top: 5px;
	padding: 2px 0;
	text-align: center;
	font-size: 14px;
	border: 1px solid #ccc;
	letter-spacing: 2em;
	text-indent: 2em;
}

/* ================================
main
================================ */
div#main {
	position: relative;
	margin: 20px 20px 32px 120px;
	z-index: 0;
	overflow: auto;
	padding-bottom: 4em;
}
div#menu-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100px;
	background: #ccc;
	height: 100%;
	z-index: 10000;
}
div#menu {
}
div#menu img {
	width: 100px;
	height: auto;
}
div#menu ul li {
	width: 80px;
	height: 80px;
	margin: 10px auto;
	background: #efefef;
	text-align: center;
	vertical-align: middle;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	display: table;
}
div#menu ul > li > p {
	display: table-cell;
	vertical-align: middle;
}
div#menu ul li:hover {
	background: #fff;
}

/* ================================
footer
================================ */
footer {
	position: fixed;
	bottom: 0;
	background: #000;
	width: 100%;
}
footer p {
	text-align: center;
	font: 600 12px 'Titillium Web', Verdana, Geneva, sans-serif;
	color: #999;
}

/* ================================
トップページ
================================ */
div#top {
	width: 100%;
	text-align: center;
	padding-top: 10em;
}
div#top p {
	width: 100%;
	text-align: center;
}
div#browser {
	width: 100%;
	text-align: center;
	margin-top: 5em;
}
div#browser h6 {
	color: #000;
	font-size: 11px;
}
div#browser p {
	text-align: center;
	font-size: 10px;
}
/* ================================
リストページ
================================ */
table.list {
	background: #ccc;
	border-spacing: 5px;
	border-collapse: separate;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
table.list th,
table.list td {
	padding: 2px 5px;
}
table.list th {
	background: #999;
	text-align: center;
	color: #fff;
}
table.list td {
	background: #ccc;
}
table.list td input.operation {
	width: 3.5em;
	letter-spacing: 0.5em;
	text-indent: -1.5em;
	border: none;
	background: #999;
	padding: 3px 0.5em;
	cursor: pointer;
}
div.client_select {
	margin-bottom: 10px;
}
div.client_select select {
	font-size: 16px;
	padding: 3px 3px 8px 3px;
	border: 3px solid #ccc;
}

/* ================================
データインポート
================================ */
div.import table {
	min-width: 600px;
	background: #ccc;
	border-spacing: 5px;
	border-collapse: separate;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
div.import th,
div.import td {
	padding: 2px 5px;
}
div.import th {
	background: #999;
	text-align: center;
	color: #fff;
}
div.import td {
	background: #ccc;
}
div.import input.check {
	width: 150px;
	border: none;
	background: #999;
	color: #fff;
	padding: 3px 0.5em;
	text-align: center;
	cursor: pointer;
}
div.import input.submit {
	width: 100%;
	letter-spacing: 0.5em;
	text-indent: -0.5em;
	border: none;
	background: #999;
	color: #fff;
	padding: 3px 0.5em;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}

/* ================================
ユーザー管理
================================ */
.useredit {
	background: #ccc;
	border-spacing: 5px;
	border-collapse: separate;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.useredit th,
.useredit td {
	padding: 2px 5px;
}
.useredit th {
	background: #999;
	text-align: center;
	color: #fff;
}
.useredit td {
	background: #ccc;
}
.useredit input {
	padding: 3px;
}
.useredit input.submit {
	width: 50%;
	margin-left: 25%;
	letter-spacing: 2em;
	text-indent: 2em;
	background: #999;
	padding: 3px 0;
	cursor: pointer;
	font-weight: bold;
	color: white;
}
.useredit input.operation {
	width: 3.5em;
	letter-spacing: 0.5em;
	text-indent: -1.5em;
	background: #999;
	padding: 3px 0.5em;
	cursor: pointer;
}
.useredit select {
	padding: 1px 3px 3px 3px;
}