@charset "UTF-8";
/* CSS Document */

/****************************************************/
/**   トップページ    **/
/****************************************************/

/**   ログイン    **/
#login_area{
	background:rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 9999;
	-moz-box-shadow:0px 0px 4px rgba(255,255,255,.3);
	-webkit-box-shadow:0px 0px 4px rgba(255,255,255,.3);
	box-shadow:0px 0px 4px rgba(255,255,255,.3);

}

#login_area .login_main_box{
	position: absolute;
	background:rgba(255,255,255,1.0);
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom:0;
	border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	max-width: 500px;
	height: 60%;
	width: 90%;	
	min-height: 500px;
	padding: 30px;
	box-sizing: border-box;	
}

#login_area h2{
	text-align:center;
	border-bottom: rgb(54,125,162) solid 4px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	font-size:150%;
}


#login_area div.input_area{
	letter-spacing: -0.40em;
}
#login_area div.input_area > *{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: middle;
}

#login_area div.input_area i{
	width:10%;
	text-align: center;
	font-size:150%;
	
}

#login_area input[type="text"],
#login_area input[type="password"]{
	border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: rgba(0,0,0,0.2) solid 1px;
	width: 90%;
	box-sizing:border-box;
	ime-mode: disabled;
}

#login_area .btn_area{
	border-top:rgba(0,0,0,0.4) solid 1px;
	margin-top: 30px;
	padding-top:30px;
	
}

#login_area .btn_area > *{
	vertical-align: middle;
}



#login_area div.caution_area{
	width:100%;
	background: rgba(0,0,0,0.1);
	padding: 30px;
	border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: rgba(155,0,0,1.00);
	font-weight: bold;
	box-sizing: border-box;
	margin-top: 30px;
	text-align: center;
	display: none;
}

#login_area div.caution_area i{
	margin-right: 10px;
	display: inline-block;
}

#login_area div.caution_area p{
	display: inline-block;
}


#login_area p.copyright{
	position: absolute;
	bottom:30px;
	left: 0;
	width: 100%;
}

#login_area label.check {
	width:150px;
}



#login_area label.check input[type=checkbox] {
	width: 148px;
	left:-150px;
}

#login_area label.check input[type=checkbox]:focus{
	box-shadow: 150px -1px 1px 5px rgb(255,255,255);
}
#login_area label.check.unchecked input[type=checkbox]:focus{
	box-shadow : 150px -1px 1px 5px rgb(54,125,162);
}

/****************************************************/
/**   入力ページ    **/
/****************************************************/

/*ヘッダ入力エリア*/
dl.input_table dt{
	width:150px;
}

dl.input_table.right_table dt{
	width:auto;
}





/*合計・明細共通*/
div.percent_bar{
	width:100%;
	border:rgb(193,193,193) solid 1px;
	height: 22px;
}

div.percent_bar > div.percent_bar_inner{
	display: block;
	height: 100%;
	width: 0%;
	background-color:rgb(54,125,162);
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	position: relative;
}

div.percent_bar > div.percent_bar_inner.overs{
	background-color:rgb(230,50,50);
}


/*合計表示エリア*/
#totals{
	background-color:rgb(248,248,248);
	width: 100%;
	display: table;
	box-sizing: border-box;
	padding: 20px 0;
}

#totals > div{
	display: table-cell;
	width:33.3%;
	min-width:200px;

	padding: 10px 20px;
}

#totals > div.amount{
	border-right: rgb(193,193,193) solid 1px;
}

#totals h3{
	font-size:90%;
	color:rgb(0,0,0);
}

#totals > div > div{
	display: block;
	width:100%;
}

#totals > div > div.totals_text{
	min-height: 60px;
}

#totals input.total_amount,
#totals p.main_text{
	font-size:200%;
	color: rgb(54,125,162);
	font-weight:bold;
	display: inline-block;
	line-height: 28px;
	height: 28px;
}

#totals input.total_amount{
	border:none;
	background-color:rgb(248,248,248);
}

#totals input.total_amount:focus{
	min-width: 180px;
}

#totals p.main_text{
	margin-right:10px;
		
}


input.total_amount_detail{
	border:none !important;
	background-color: transparent !important;
	color:rgb(0,0,0);
	padding-right: 0;
	font-weight: bold;
	width: 110px !important;
}


#input dl.input_table > dd input[name=anken_name]{
	width:700px;
}

#input dl.input_table > dd textarea{
	width:700px;
	height: 50px;
}

/*明細テーブル*/
#input table.detail_table,
#input table.detail_table thead,
#input table.detail_table tbody,
#input table.detail_table tfoot{
	width:1920px;
}

#input table.detail_table tbody{
	max-height: 257px;
	user-select: none;
	-ms-user-select:none;
	-webkit-user-select:none;
	-moz-user-select: -moz-none;
}

#input table.detail_table td.td_no{width:40px;text-align: center;cursor: pointer;}
#input table.detail_table.disabled td.td_no{cursor: default;}
#input table.detail_table td.td_detail{width:200px;}
#input table.detail_table td.td_detail textarea{height:100%; vertical-align: middle;width:100%;}
#input table.detail_table td.td_total{width:140px; text-align: right;}
#input table.detail_table td.td_btns{width:120px; text-align: center;}
#input table.detail_table td.td_percent{width:100px;text-align: center;}
#input table.detail_table td.td_month{width:110px;}

#input table.detail_table tr.selected td{cursor: pointer;}


#input table.detail_table tbody tr.budgets td{
	 border-top:rgb(255,255,255) solid 1px;
 }

#input table.detail_table tbody tr.reals td,
#input table.detail_table tbody tr.budgets td[rowspan='2']{
	border-bottom: rgb(255,255,255) solid 1px;
}

#input table.detail_table tbody tr.budgets td:first-child{
	border-left:rgb(255,255,255) solid 1px;
}

#input table.detail_table tbody tr td:last-child{
	border-right:rgb(255,255,255) solid 1px;
}


#input table.detail_table tbody tr.budgets.selected td{
	border-top:rgb(54,125,162) solid 1px !important;
}

#input table.detail_table tbody tr.reals.selected td,
#input table.detail_table tbody tr.budgets.selected td[rowspan='2'] {
	border-bottom: rgb(54, 125, 162) solid 1px !important;
}

#input table.detail_table tbody tr.budgets.selected td:first-child{
	border-left:rgb(54,125,162) solid 1px !important;
}

#input table.detail_table tbody tr.selected td:last-child{
	border-right:rgb(54,125,162) solid 1px !important;
}



#input table.detail_table tbody tr.selected td{
	background-color:rgba(54,125,162,0.1) !important;
}


#input table.detail_table tbody td.td_month input,
#input table.detail_table tfoot td.td_month{
	text-align: right;
}

#input table.detail_table tfoot td.td_percent{
	text-align: right !important;
	padding-right: 30px;
	position: relative;
}

#input #detail_input p.total_amount,
#input #detail_input p.percent_text{
	font-weight: bold;
}

#input input.total_amount{
	text-align: left !important;
}

#input #detail_input div.percent_wrap{
	width: 100%;
	text-align: center;
	line-height: 140%;
	padding: 10px 0;
}

#input #detail_input div.percent_wrap > *{
	display: inline-block;
}

#input #detail_input p.percent_text{
	margin-right: 5px;
}
#input #detail_input div.percent_bar{
	margin-top: -10px;
	height: 10px;
}

#input #detail_input tbody span.budget_mark,
#input #detail_input tbody span.real_mark{
	position:absolute;
	left: 5px;

}

#input #detail_input tbody span.budget_mark{
	top:50%;
	margin-top: -9px;
}
#input #detail_input tbody span.real_mark{
	bottom:50%;
	margin-bottom: -7px;
}


#input #detail_input tfoot span.budget_mark,
#input #detail_input tfoot span.real_mark{
	position:absolute;
	right: 5px;
}

#input #detail_input tfoot span.budget_mark{top:6px;}
#input #detail_input tfoot span.real_mark{bottom:6px;}


/****************************************************/
/**   一覧ページ    **/
/****************************************************/

#list .title_area{
	margin-bottom: 5px;
}

#list .title_area > *{
	display:  inline-block;
}

#list .title_area h3{
	font-size:120%;
	font-weight: bold;
	margin-right: 15px;
}

#list .title_area h3 i{
	margin-right: 5px;
}

#list .input_area_inner{
	background-color: rgba(0,0,0,0.03);
	padding: 20px;
}

#list tr.detail_row{
	display: none;
}
#list tr.detail_row.shown{
	display: table-row;
}

#list tr.total_real + tr.detail_row.shown{
	border-top:rgba(0,0,0,0.1) solid 1px;
}

#list tr.detail_budget.shown td{
	border-top:rgba(0,0,0,0.2) dotted 1px;
}

#list tr.detail_budget.shown td:first-child{
	border-top:none;
}


#list #detail_list div.percent_wrap > *{
	display: inline-block;
}

#list #detail_list p.percent_text{
	font-weight: bold;
}
#list #detail_list div.percent_bar{
	height:10px;
	display: block;
}

#list #detail_list tr.total_budget{
	border-top:rgb(255,255,255) solid 1px;
}

#list #detail_list tr:not(.total_real) > *:first-child{
	border-left:rgb(255,255,255) solid 1px;
}

#list #detail_list tr.selected:not(.total_real) > *:first-child{
	border-left:rgb(54,125,162) solid 1px;
}

#list #detail_list tr > *:last-child{
	border-right:rgb(255,255,255) solid 1px;
}

#list #detail_list tr.selected > *:last-child{
	border-right:rgb(54,125,162) solid 1px;
}

#list #detail_list tr.total_budget.selected,
#list #detail_list tr.selected + tr.total_budget{
	border-top:rgb(54,125,162) solid 1px;
}
#list #detail_list tr.last-tr{
	border-top:rgb(255,255,255) solid 1px;
}

#list #detail_list tr.selected + tr.last-tr{
	border-top:rgb(54,125,162) solid 1px;
}

#list #detail_list tr.last-tr > *{
	padding:0;
}


#list span.yosan_shutoku,
#list span.kougaku_hiyou,
#list span.kotei_shisan{
	border-radius: 3px;
	color:rgb(255,255,255);
	padding: 2px 3px;
	margin-bottom: 2px;
	display: inline-block;
}

#list #detail_list td > span:last-of-type{
	margin-bottom: 0 !important;
}

#list span.yosan_shutoku{
	background-color:rgb(54,125,162);
}

#list span.kougaku_hiyou{
	background-color:rgb(54,125,162);
}

#list span.kotei_shisan{
	background-color:rgb(54,125,162);
}

#list article{
	height:100%;
	position: relative;
}

#totals_wrap{
	position: absolute;
	bottom:0;
	left: 0;
	padding: 0 30px 0 220px;
	width: 100%;
	box-sizing: border-box;
}
/****************************************************/
/**   masterページ    **/
/****************************************************/
#master article{
	padding-right: 100px;
}



#master article h2 {
	border-bottom: rgb(200,200,200) solid 3px;
	margin-bottom: 15px;
	font-size:150%;
	font-weight:bold;
}

#master p.btn_add{
	margin-top: 10px;
	font-size:300%;
	text-align: center;
	color:rgba(0,0,0,0.5);
}

#master p.btn_add > i{
	cursor: pointer;
}