@charset "utf-8";

/* 

	基本的デザイン。
	共通部分（ヘッダとかその辺）のことがかいてあります

 */

* { 
	box-sizing:border-box;
	margin:0;
	padding:0;
}


html, body {
	color:#404040;
	font-size:12pt;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-align: center;

	background-color:#d0f4eb;
	height:100%;
	position:relative;
}


a {	color:#4FC1E9;}
a:visited {	color:#967ADC;}
a:hover,a:active {	color:#4A89DC;
}


div.inner {
	width:1200px;
	margin:auto;
	position:relative;
}


/* input汎用 */
input[type="text"],input[type="email"],input[type="password"],select,textarea,input[type="number"]{
	height: 32px;
	line-height: 32px;
	padding:0 5px;

	text-decoration: none;

	text-align: left;
	color: #454545;

	border-radius:5px;
	border: 1px solid #cbcbcb;

	background: #ffffff;

	box-shadow: 0px 2px 2px 0 #E6E9ED inset;

	cursor:pointer;
}

textarea {
	padding:5px;
	line-height:1.2em;
}


/* button汎用 */

input[type="button"],input[type="submit"],button,a.button { 

	display: inline-block;
	height: 32px;
	line-height: 32px;
	padding:0 10px;

	text-decoration: none;
	font-weight: bold;

	text-align: center;
	font: 12px/normal sans-serif;
	color: #333;
	white-space: nowrap;
	outline: none;

	border-radius:4px;
	border: 1px solid #cbcbcb;
	border-bottom: 1px solid #b2b1b1;
	text-shadow: 0px 1px 0px #fafafa;
	box-shadow: 0 1px 0 #f5f5f5 ;
	cursor:pointer;

/* カラーの設定ここから。 */
	background: #F5F7FA;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #F5F7FA), color-stop(0.5, #E6E9ED));
	background: -moz-linear-gradient(top, #F5F7FA 50%, #E6E9ED 50%);
	background: linear-gradient(top, #F5F7FA 50%, #E6E9ED 50%);

}

a.button {
	padding-top: 6px;
}

input[type="button"]:hover,input[type="submit"]:hover,button:hover,a.button:hover {
	background: #E6E9ED;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #E6E9ED), color-stop(0.5, #CCD1D9));
	background: -moz-linear-gradient(top, #E6E9ED 50%, #CCD1D9 50%);
	background: linear-gradient(top, #E6E9ED 50%, #CCD1D9 50%);
}

input[type="button"]:active,input[type="submit"]:active,button:active,a.button:active {
	-ms-transform: translate(1px,1px);
	-webkit-transform: translate(1px,1px);
	transform: translate(1px,1px);
	box-shadow: none;
}

/* 青いボタン */
input.btn01,button.btn01,a.btn01 {
	background: #4FC1E9;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #4FC1E9), color-stop(0.5, #3BAFDA));
	background: -moz-linear-gradient(top, #4FC1E9 50%, #3BAFDA 50%);
	background: linear-gradient(top, #4FC1E9 50%, #3BAFDA 50%);

	color:#ffffff;

	border: 1px solid #2496c1;
	border-bottom: 1px solid #187da3;
	text-shadow: 0px 1px 0px #666;

}

input.btn01:hover,button.btn01:hover,a.btn01:hover {
	background: #3BAFDA;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #3BAFDA), color-stop(0.5, #2496c1));
	background: -moz-linear-gradient(top, #3BAFDA 50%, #2496c1 50%);
	background: linear-gradient(top, #3BAFDA 50%, #2496c1 50%);
}

/* 赤いボタン */

input.btn02,button.btn02,a.btn02 {
	background: #ED5565;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #ED5565), color-stop(0.5, #DA4453));
	background: -moz-linear-gradient(top, #ED5565 50%, #DA4453 50%);
	background: linear-gradient(top, #ED5565 50%, #DA4453 50%);

	color:#ffffff;

	border: 1px solid #ba323f;
	border-bottom: 1px solid #99202b;
	text-shadow: 0px 1px 0px #666;

}

input.btn02:hover,button.btn02:hover,a.btn02:hover {
	background: #DA4453;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #DA4453), color-stop(0.5, #c4313f));
	background: -moz-linear-gradient(top, #DA4453 50%, #c4313f 50%);
	background: linear-gradient(top, #DA4453 50%, #c4313f 50%);
}

/* 入力不可 */

input:disabled,select:disabled,textarea:disabled {
	background-color:#f2f2f2;
}

input[type="button"]:disabled,input[type="submit"]:disabled,button:disabled,a:disabled,
input[type="button"]:disabled:hover,input[type="submit"]:disabled:hover,button:disabled:hover,a:disabled:hover {
	background: #f2f2f2;
	color:#666;
}


/* チェックボックスとラジオボタン
書式はそれぞれ

<label class="check"><input type="checkbox"><span>チェックボックス</span></label>
<label class="radio"><input type="radio"><span>ラジオボタン</span></label>

の形式でおねがいします。

 */

label.check > input,
label.radio>input {
	display: none;
}


label.check > span,
label.radio > span{
	padding-left: 20px;
	position:relative;
	margin-right: 20px;
	cursor:pointer;
}


label.check > span:before,
label.radio > span:before {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #cbcbcb;
	border-radius: 4px;
}

label.radio > span:before{
	border-radius:15px;
}


label.check>input:checked + span:after{
	color: #4FC1E9;
	content: "";
	display: block;
	position: absolute;
	top: -3px;
	left: 5px;
	width: 7px;
	height: 14px;
	transform: rotate(40deg);
	border-bottom: 3px solid #4FC1E9;
	border-right: 3px solid #4FC1E9;
}

label.radio>input:checked + span:after{
	color: #4FC1E9;
	background-color: #4FC1E9;
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 3px;
	width: 11px;
	height: 11px;
	border-radius:50%;
}




/* head */

div.head {
	width:100%;
	background-color:#ffffff;
	height:70px;

	box-shadow:0px 1px 10px 1px #ccc;
}

div.head h1 {
	margin:0;
	text-align:left;
	font-size:20pt;
	height:100%;
	display:inline-block;
	position:absolute;
	left:0;
	top:5px;
	cursor: pointer;
}

div.head div.inner {
	margin:0px auto;
	background-color:#fff;
	box-shadow:none;
	padding:0px;
}

div.head p.description {
	display:inline-block;
	position:absolute;
	left:10px;
	top:40px;
	font-weight:bold;
}

div.logout {
	display:inline-block;
	text-align:right;
	position:absolute;
	right:0;
	height:100%;
}

div.logout a {
	display:inline-block;
	margin-top: 35px;
	text-decoration:none;
}


/* menu */

div.menu {
	display:none; 
	position:fixed;
	width:100%;
	height:50px;
	line-height:50px;
	background-color:#434a54;
	z-index:5;
}

div.menu div.inner {
	text-align: left;
	margin:0px auto;
	background-color:transparent;
	box-shadow:none;
	padding:0px;
}

div.menu h2 {
	width:auto;
	height:100%;
	color:#aab2bd;
	font-weight:bold;
	position:relative;
	cursor:pointer;
	display:inline-block;
	vertical-align: top;
	background-color:transparent;
	border:none;
	margin:auto;
}


div.menu ul {
	display:inline-block;
	list-style:none;
	font-size:11pt;
}
div.menu ul li {
	display:inline-block;
	height:100%;
}

div.menu ul li a,
div.menu h2 a {
	color:#fff;
	text-decoration:none;
	display:inline-block;
	width:100%;
	height:100%;
	padding:0 1em;
}

div.menu ul li a:hover,
div.menu h2 a:hover  {
	background-color:#656D78;
}

/* main */

div.inner {
	margin:10px auto;
	background-color:#fff;
	box-shadow:0px 1px 10px 1px #ccc;
	padding:10px;
}

h2 {
	margin:10px auto;
	text-align:left;
	border-bottom:solid 2px #E9573F;
}


/* table関係 */

/* floatthead使うページのbodyにはClass降っておいてほしい。class名はファイル名でいいです */
body.inspection div.head,
body.annual div.head,
body.client div.head,
body.monthly div.head,
body.invoice div.head,
body.report div.head, 
body.analyzer div.head,
body.annual div.head,
body.client div.head {
    position: fixed;
    z-index: 10;
    top: 0;
}

body.inspection div.menu,
body.monthly div.menu,
body.invoice div.menu,
body.report div.menu, 
body.analyzer div.menu,
body.annual div.menu,
body.client div.menu {
    z-index: 11;
    top: 70px;
}

div.floatthead { /* floatthead使う時は上のdivにでもいれておいてほしい。 */
	width: 100%;
	position:fixed;
	z-index:9;
	background-color:#d0f4eb;
}


div.tableArea  {

}

table.List {
	width:100%;
	box-sizing:border-box;
	border-collapse: separate;
	border-spacing: 0;
/*	border-right:solid 1px #d8d8d8;*/
}

table.List th {
	background-color:#FFCE54;
	border-bottom:solid 1px #E9573F;
	border-top:solid 1px #F6BB42;
	border-left:solid 1px #F6BB42;
	padding:5px;
}

table.List th:last-child {
	border-right:#F6BB42;
}

table.List td {
	background-color:#ffffff;
	font-size:10pt;
	border-left:solid 1px #d8d8d8;
	border-bottom:solid 1px #d8d8d8;
	min-height:50px;
	padding:5px;
	cursor:pointer;
}

table.List td:last-child {
	border-right:solid 1px #d8d8d8;
}

table tr.checked td {
	background-color:#f4cac3; /*#ffe0db;*/
}

table.List tr.ui-selecting td { background-color: #E9573F; } /**/
/*table.List tr.ui-selected td {background:red !important;} */


table.List td.left {
	text-align:left;
}
table.List td.center {
	text-align:center;
}
table.List td.right {
	text-align:right;
}

table.List td p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* dl */


dl.formList dt {
	font-size:12pt;
	-moz-text-align-last: justify;
	text-align-last: justify;

	width:180px;
	min-height:44px;
	line-height:28px;

	padding:8px;
	padding-left:1em;
	padding-right:1em;

	float:left;
	clear:left;
	display:block;

}

dl.formList dd{
	border-bottom:solid 1px #d8d8d8;
	display:block;
	padding:5px 10px;
	position:relative;
	min-height:44px;
	line-height:34px;

	text-align:left;
}

dl.formList dd:last-child {
	border:none;
}


/* modal */
#modal-overlay{
	background-color:rgba(0,0,0,0.25);

	width:100%;
	height:120%;

	position:fixed;
	top:0px;
	left:0;

	display:none;
	z-index:9;

}

div.modal {
	background-color:#ffffff;
	margin:auto;

	top:50%;
	left:50%;
	transform:translate(-50%,-50%);

	display:none; 

	z-index:10;
	position:fixed;

}

/* logoutは全ページ共通だからここで */
div#modal-logout {
	padding:20px;
}

div#modal-logout table.List {
	width:750px;
}

div#modal-logout table td {	text-align:left;}

div#modal-logout table td:nth-child(1) {	width:120px;	text-align:right;}
div#modal-logout table td:nth-child(2) {}
div#modal-logout table td:nth-child(3) {	width:160px;}
div#modal-logout table td:nth-child(4) {	width:160px;}
div#modal-logout table td:nth-child(5) {	width:140px;}

div#modal-logout p {
	margin:10px;
}

div#modal-logout div.buttonArea button {
	margin:0 5px;
}



/* ui-datepicker */
.ui-datepicker {
	z-index:1500 !important;
}

/* ui-autocomplete */

li.ui-menu-item {
	text-align:left;
	padding-left:1px;
}

li.ui-menu-item a {
	padding:5px;
}

td.instructive {
    background-color: #a3d4a3 !important;
}