@charset "UTF-8";

/*************Layout*************/
body#system {
	display:table;
	width:100%;
	height:100%;
	background:#fffced;
	/*font-family:'Meiryo UI','メイリオ','Meiryo','Hiragino Kaku Gothic Pro',sans-serif;*/
	font-family:'Meiryo UI','Meiryo','Yu Gothic UI Medium','Hiragino Kaku Gothic Pro',sans-serif;
}
#system #container {
	display:table-cell;
	margin:0 auto;
	background:none;
	text-align:center;
	vertical-align:middle;
}
#system main {
	display:block;
	margin:0 auto;
	width:576px;
	height:auto;
	background:#FFF;
	border-radius:8px;
	border:solid 1px #f1f1f1;
}
#system footer {
	position:relative;
	margin:0 auto;
	padding:32px 0;
	width:100%;
	text-align:center;
	white-space:nowrap;
	font-size:1rem;
	border:none;
}
#system #content {padding:32px 0 24px;}
#system #content img.logo {margin-bottom:24px;}
#system #content h1 {
	display:inline-block;
	margin-bottom:24px;
	padding:0 32px;
	width:auto;
	height:32px;
	color:#8c6e2b;
	font-size:1.4rem;
	line-height:32px;
	background:#ffe539;
	border-radius:16px;
}
#system #content p {margin-bottom:24px;text-align:center;}
#system #content p.note {text-align : left; padding:0 60px 0;}
#system #content div.settings {
	margin-bottom:24px;
	padding:24px;
	background-color:#fff4b5;
}
#system #content a{color:#3399CC;}

/************* input *************/
#system input[type="text"],
#system input[type="password"] {
	padding:0 8px;
	width:100%;
	height:36px;
	font-size:1.3rem;
	line-height:36px;
	border: solid 1px #bebeb9;
	border-radius:4px;
}

/************* textarea *************/
#system textarea{
	width:100%; 
	height:72px; 
	border: solid 1px #bbb;
	border-radius:4px;
}

/************* button *************/
#system button.submit {
	width:152px;
	height:40px;
	color:#fff;
	font-size:1.3rem;
	font-weight:bold;
	line-height:38px;
	text-align:center;
	background:#444; /* Old browsers */
	background:-moz-linear-gradient(top,  #666666 0%, #444444 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#444444)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #666666 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #666666 0%,#444444 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #666666 0%,#444444 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #666666 0%,#444444 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
	border:solid 1px #444;
	border-radius:4px;
	cursor:pointer;
}
#system button.submit:hover {
	background:-moz-linear-gradient(top,  #444444 0%, #666666 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #444444 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #444444 0%,#666666 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #444444 0%,#666666 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #444444 0%,#666666 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}
#system button.submit:active {position:relative; top:1px;}


/* Input/Radio
****************************************/
@media (min-width:1px) {
	#system input[type=checkbox] + label {
		padding:0 0 0 20px;
	}
}

/* Table
****************************************/
#system table{width:100%;}
#system table th {
	width:100px; 
	font-weight:normal; 
	font-size:1.2rem; 
	text-align:right;
}
#system table th.baitai {vertical-align:top;}
#system table th, table td  {padding:5px;}
#system table th.req:before{content: "*"; color: #c00;}
#system table th.req:after{content: "";}
#system table li {float:left; margin-right:16px;}
#system table li.blockItem {float:none; display:block;}
#system table div.d-line{margin: 4px 0; line-height: 32px;}
#system input.baitai{float:left; margin:2px 0;width : 80%;}
#system table .fluc {
	margin:4px 0;
	float: left;
    height: 32px;
}
#system table .fluc .btn {
    float: left;
    margin: 2px 0 2px 8px;
    width: 28px;
    height: 28px;
    border: solid 1px #bbb;
    border-radius: 14px;
}
#system table .fluc .btn img {
    position: relative;
    top: 2px;
    border: none;
    background: transparent;
    vertical-align: middle;
}

/* for Mobile
**************************************************/
@media screen  and (max-width:800px) {
	#system #container {padding: 32px 0; background:#fff;}
	#system main {
		width:auto;
		background:none;
		border:none;
	}
	#system footer {padding:24px 0 0; background:none;}
	#system #content div.settings {text-align:left; border-radius:4px;}
	#system #content h1,
	#system #content p {margin:0 auto 24px; width:70%;}
	#system #content p.note {margin:0 auto; padding:0; width:70%;}
	#system input.baitai{width : 70%;}
	
	#system table {width:100%;}
	#system table th {
	    display: inline-block;
	    position: relative;
	    padding: 16px 0 8px;
	    width: auto;
	    color: #666;
	    font-size: 1.2rem;
	    font-weight: bold;
	    line-height: 1em;
	    text-align: left;
	}
	#system table tr:first-of-type th {padding-top:0;}
	#system table td {
		display: block;
	    position: relative;
	    padding:0;
	}
}