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


body { color: #1b1b1b; }
p { line-height: 160%; }

#main-content  .wrapper { padding-bottom: 0; }

#container { z-index: 998;}

.clear { clear: both; }
.not-input { color:#ea68a2; }

.red { color:#cc0033; } 
.dark-gray { color: #535353; }

.bold { font-weight: bold; } 
.red-bold { color:#cc0033;font-weight: bold; } 


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* tooltip */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.tooltip-inner { background: #001a43;opacity: 0.9;text-align: left;z-index: 980; }
.tooltip.top .tooltip-arrow { border-top: 5px solid #001a43;  }
.tooltip.right .tooltip-arrow { border-right: 5px solid #001a43;  }
.tooltip.left .tooltip-arrow { border-left: 5px solid #001a43;  }
.tooltip.bottom .tooltip-arrow { border-bottom: 5px solid #001a43;  }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* system-message */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.system-message { width:100%;margin: 14px 0 0;padding: 12px 20px 4px;border:1px solid #d18e97;background: #ffe0e4;overflow: auto; }/*高さは各メニューのcssで設定*/
.system-message-unit P,
.system-message p { color: #cc0033;font-weight: bold; }
.system-message-unit P a,
.system-message p a { margin-right: 10px;padding-right: 10px;border-right: 1px solid #aaaaaa;color: #313131;font-weight: normal; }
.system-message-unit P a:hover,
.system-message p a:hover { color: #0099dd; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* header */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.header { min-height: 50px;padding: 0 10px;z-index: 999; }

/*.lite { color: #feba5f !important; }*/

a.logo { margin-top: 5px;color: #7dcdf4; }
a.logo img { width: auto;height: 15px; }
.toggle-nav { margin-top: 13px; }
.dark-bg { background: #001a43; }
.top-nav { margin-top: 1px; }

div.pagettl { height:50px;background: #e0e0e0; }
h3.page-header { margin-bottom:18px;margin-left: 10px;opacity: 1; }

span.mode {
	dsplay: block;
	float: left;
	max-width: 8em;
	margin:13px 14px 0 0;
	padding: 4px 12px 6px;
	border-radius: 4px; 
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
	background: #004986;
	color: #ffffff;
	vertical-align: middle;
	line-height: 100%;
}

span.page-header-select { float: left;margin: 8px 0 0 0; }

span.before-next { float: left;margin-top: 10px;font-size: 24px; }
span.before-next a > i { color:#00479d!important; }
span.before-next a > i:hover { color:#0e71db!important; }
span.before-next i { color:#aaaaaa; }

/* ■■■ 1280以下の対応 ---------- */
@media(max-width:1279px){
	.header { position:absolute;width:100%;min-width:1279px; }
	.sidebar-closed .header { width: 100%;min-width: 1100px; }
}



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* main-content */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.wrapper { margin-top: 50px; }

.main-content-header-unit { position: fixed;width:calc(100% - 180px);margin-top: -18px;padding-top: 18px;background: #eeeeee;z-index: 996; }

.dropdown-menu { z-index: 997; }
.sidebar-closed .main-content-header-unit { width:100%; } /* sidebarがクローズされたときのmain-contentのheaderの横幅 */
.main-content-header { margin-bottom: 0;padding-bottom: 14px;border-bottom: 1px solid #aaaaaa;min-width:1160px;  }

.home-service-unit,
.main-content-body { margin-left: 0;margin-right: 0;padding-top: 12px;padding-bottom: 12px;border: 1px solid #aaaaaa;border-top:0;background:#ffffff;overflow: auto; }
.sidebar-closed .main-content-body { width: 100%; }
.panel { margin-top:20px;margin-bottom:20px;background-color: transparent;}

/* ■■■ 1280以下の対応 ---------- */
@media(max-width: 1279px){
	.main-content-header-unit { position: absolute;width: calc(100% - 180px);min-width: 1100px; }
	.main-content-body,
  .home-service-unit { width: 100%;min-width: 1070px; }
}



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 検索 */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.search-unit { margin: 14px 0 0;padding: 10px 14px;background: #f9f9fa; }
.search-unit label { margin-right: 0; }

div.detail-search-btn {
	display: inline-block;
  position: absolute;
	width: 140px;
	height: 31px;
	margin: 2px 0 0 12px;
	border-radius: 24px; 
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
	background: #dcdcdc;
	text-align: center;
  line-height: 230%;
  cursor: pointer;
}

div.detail-search-btn span.unit1 { margin-right:16px; }
div.detail-search-btn:hover { background: #e5e5e5; }


/* ■■■ アイコン（Open / Close）------------------------------------ */
div.detail-search-close:before { display: inline-block;width: 20px;content: '\f054';color: #005baa;font-family: 'FontAwesome';padding-right: 8px; }
div.detail-search-open:before { display: inline-block;width: 20px;content: '\f078';color: #005baa;font-family: 'FontAwesome';padding-right: 8px; }

.detail-search { clear: both;display: none; }

/* ■■■ クリックで中身表示 ------------------------- */
.detail-search { display: none;margin: 8px 0 0;padding-top: 14px;border-top: 1px dotted #aaaaaa;border-bottom: 1px dotted #aaaaaa; }


/* ■■■ 詳細検索項目 ------------------------- */
.detail-search-input-group { display: inline-block;width:370px;min-height: 36px;margin-right:24px;margin-bottom: 10px;padding: 0;vertical-align: middle; }
.search-retirement { width:530px; }

span.employee-select-icon { position: absolute;padding: 2px 0 0;font-size: 24px; }
span.employee-select-icon a > i { color:#00479d!important; }
span.employee-select-icon a > i:hover { color:#0e71db!important; }
span.employee-select-icon i { color:#aaaaaa; }



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* operationbar(一覧表示・一覧編集エリア共通) */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.operationbar { /*display:inline-block;*/width: 100%;height:31px;margin: 0 0 6px; }
.operationbar:last-child { margin: 0; }

span.check-confirm { 
	display: inline-block;
	padding: 0 6px 0 18px;
	border-radius: 4px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	background: #bbe7f0;
}

span.check-confirm label { font-weight: bold; } 

.operationbar-system-message {
  float: right;
  display: inline-block;
  margin: 0;
  padding: 3px 12px 3px;
  border:1px solid #d18e97;
  background: #ffe0e4;
  color: #cc0033;
  font-weight: bold;
}

/* ボタンの配置は btn.css で設定 */



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 行のhover */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.hv,
.hv td { background: #f4f4f2!important; }

/* 登録フォームの行のhover */
.form-group:hover { background:#f4f4f2; }
.bank-accounts-group:hover { background:#f4f4f2; }

/* 従業員（一覧表の行のhover） */
.employee-data-list table > tbody > tr:hover > td { background: #f4f4f2; }

/* 従業員（給与、賞与の支給額、控除額の登録） */
.details-input-list ul li:hover { background: #f4f4f2; }

/* 従業員（扶養） */
.form-group-tbl table>tbody>tr.main-row:hover>td { background: #f4f4f2; }

/* 事業所の振込口座欄のhover */
.bank-accounts-form-group:hover { background:#f4f4f2; }

/* 明細項目 */
.details-item-list ul li:hover { background: #f4f4f2; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 付箋 */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.label-paper { float: none;margin: 0;padding:0;color:#a0a0a0;font-size:13px;cursor: pointer; }
.label-paper span { border-bottom: 1px dashed #a0a0a0; }
.label-paper:hover { color:#0e71db; }
.label-paper span:hover { border-color: #0e71db; }
.label-paper input[type="checkbox"] { display: none;margin-right: 0; }

.label-paper-switch { float: none;margin: 0;padding:0;cursor: pointer; }
.label-paper-switch input[type="checkbox"] { display: none; }

.label-paper-red span,
.label-paper-blue span { display:inline-block; }

.label-paper-red span:first-child { background:#e4007f;opacity: 0.4; }
.label-paper-red span:last-child { background:#e4007f;opacity: 1;box-shadow: 4px 1px 4px #aaaaaa; }

.label-paper-blue span:first-child { background:#0e71db;opacity: 0.4; }
.label-paper-blue span:last-child { background:#0e71db;opacity: 1;box-shadow: 4px 1px 4px #aaaaaa; }


/* 一覧表の付箋のサイズ */
.label-paper-red span,
.label-paper-blue span { height:15px;padding:0;margin-top:4px; }

.label-paper-red span:first-child { width:22px; }
.label-paper-red span:last-child { width:14px; }

.label-paper-blue span:first-child { width:22px; }
.label-paper-blue span:last-child { width:14px; }

/* 明細の付箋のサイズ */
.label-paper-red span.large,
.label-paper-blue span.large { height:18px;padding:0;margin-top:4px; }

.label-paper-red span.large:first-child { width:38px; }
.label-paper-red span.large:last-child { width:20px; }

.label-paper-blue span.large:first-child { width:38px; }
.label-paper-blue span.large:last-child { width:20px; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* 自動計算ボタン */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* 計算手段の切替（編集） */
.calc-method-switch {
  /*position: absolute;*/
  float: left;
  display: inline-block;
  margin: 0 6px 0 10px;
  padding: 4px 5px 4px 10px;
  border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.calc-method-switch label.calc-method-name { width:60px;margin:0 6px 0 0;padding:0;}
.calc-method-switch label.calc-method-btn { display: inline-block;width: 40px;margin: 0;padding: 0;text-align: center; }
.calc-method-switch label.on { 
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
  font-weight: bold;
}
.calc-method-switch label.off {
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
  font-weight: bold;
}
.calc-method-btn input[type="radio"] { display: none;margin-right: 0; }

/* 直接入力（過去） */
.direct-input {
  float: left;
  display: inline-block;
  margin: 0 6px 0 10px;
  padding: 4px 5px 4px 10px;
  border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
  background: #e0e0e0;
  font-weight: bold;
}
.direct-input span.q { float:right;margin:-1px 0 0 4px;color: #aaaaaa;font-size: 16px; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* モーダル */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.modal-content { border: none;border-radius: 3px;background: #ffffff; }
.modal-header { padding:8px 16px 12px;color: #313131;border-color: #dcdcdc;background: #e0e0e0;text-shadow: none; }
.modal-header .close { margin-top: 0;font-size: 24px;font-weight: bold; }
/*.close { opacity: 0.4; }*/
.modal-body { padding: 20px 16px 32px;background: #ffffff; }
.modal-footer { margin-top: 1px;border-top:1px solid #dcdcdc;background: #ffffff; }

/*移動確認のモーダルのサイズ*/
#modal-page-movement-confirm .modal-s { width: 460px; }


/* エラーリスト */
.error-list { height: 160px;margin-top: 16px;padding: 0;overflow-y: auto; }
.error-list ul { margin: 0 0 0 14px;padding: 0; }
.error-list ul li { margin-bottom: 10px;padding-left: 60px;text-indent: -60px; }
.error-list ul li span { display: inline-block;width: 46px;margin-right: 14px;text-align: right; }

/* 確認リスト */
.confirm-list { height: 160px;margin-top: 16px;padding: 0;overflow-y: auto; }
.confirm-list ul { margin: 0 0 0 14px;padding: 0; }
.confirm-list ul li { margin-bottom: 10px;padding-left: 60px;text-indent: -60px; }
.confirm-list ul li span { display: inline-block;width: 46px;margin-right: 14px;text-align: right; }

/* URL配信リスト */
.url-employee-list { height: 160px;margin-top: 16px;padding: 0;overflow-y: auto; }
.url-employee-list ul { margin: 0 0 0 14px;padding: 0; }
.url-employee-list ul li { margin-bottom: 10px;padding-left: 60px;text-indent: -60px; }
.url-employee-list ul li span { display: inline-block;width: 86px;margin-right: 14px;text-align: right; }


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* pagination */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.pagination { margin: 0; }
.operationbar .pagination { float:left; }

.rows-setting label { margin:0 8px 0 20px; }
.rows-setting select { width:80px;height:29px;margin:0;padding:0; }



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* sort */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

th.sort { cursor: pointer; }



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* footer */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#footer { padding:0 0 4px;text-align: right; }

/* ■■■ 1280以下の対応 ---------- */
@media(max-width:1279px){
	#footer { width: 100%; }
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* page-top */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

#page-top { position: fixed;bottom: 36px;right: 36px; }

#page-top a { display: block;width: 40px;height: 40px;color: #ffb21a;opacity: 0.8;font-size: 36px;text-decoration: none; }
#page-top a:hover { opacity: 0.6; text-decoration: none; }

.ml20{margin-left:20px!important;}
.ml40{margin-left:40px!important;}
.ml60{margin-left:60px!important;}
.ml80{margin-left:80px!important;}
.ml100{margin-left:100px!important;}
.mr20{margin-right:20px!important;}
.mr40{margin-right:40px!important;}
.mr60{margin-right:60px!important;}
.mr80{margin-right:80px!important;}
.mr100{margin-right:100px!important;}