@charset "utf-8";

html {
  height: 100%;
  width: 100%;
}

body {
  display: inline-block;
  min-width:initial;
  background: #ffffff;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; */
  /* font-family: 'HG丸ｺﾞｼｯｸM-PRO','ヒラギノ丸ゴ Pro W4','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif; */
  /* font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
  width: 100%;
  height: 100%;
  /* height: auto; */
  margin: 0;
  padding: 0;
  /* margin: 0 0 40px 0px; */
  /* overflow: auto; */
  font-size: 16px;
}
@media only screen and
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

h1 {
  font-size: 1.7em;
  margin: 0;
}
h2 {
  font-size: 1.3em;
  margin: 0;
  display: inline-block;
  height: 30px;
}
h3 {
  font-size: 1.0em;
  margin: 0;
}

/* ヘッダー */
#header {
  display: inline-block;
  position: fixed;
  background: #3084e4;
	/* background: -webkit-linear-gradient(top, #B2FFFF 20%, #dbffff 35%, #ffffff 100%); */
  /* background: linear-gradient(to bottom, #B2FFFF 20%, #dbffff 35%, #ffffff 100%); */
  width:100%;
  /* height: 100px; */
  top:0px;
  z-index: 10;
  padding: 10px 10px;
  border-bottom: 10px solid #3084e4;
  line-height: 40px;
  height: 40px;
  word-wrap: break-word;
}
#header #title img {
  /* float: left; */
  vertical-align: middle;
}
#header #title span {
  margin-left: 30px;
}
#header #title {
  display: inline-block;
  /* position: absolute; */
  /* float:left; */
  color: #ffffff;
  font-weight: bold;
  /* font-size:1.8em; */
  text-align: left;
  vertical-align: middle;
  /* margin-left: 20px; */
  /* line-height: 45px; */
  /* top: 45px; */
  letter-spacing: 2px;
}

#header #user_info {
  display: block;
  float: right;
  color: #ffffff;
  margin-right: 30px;
  margin-top: 4px;
  text-align: right;
  line-height: 30px;
}
/* #header #user_info span {
  border-bottom: 1px solid #ffffff;
} */

#settings_menu,
#log_menu {
  display: none;
  position: absolute;
  background: #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #949494;
  box-shadow: 0 0 10px rgb(139, 139, 139);
  overflow: hidden;
  padding: 10px;
  z-index: 500;
}
#settings_menu button,
#log_menu button {
  display: block;
  margin: 10px;
  width: 180px;
}
#sub_title {
  display: inline-block;
  /* background: #ff0000; */
  border-left: 15px solid #838383;
  border-bottom: 3px solid #838383;
  font-size: 1.5em;
  width: calc(100% - 80px);
  margin-top: 80px;
  margin-left: 30px;
  padding-left: 20px;
  padding-top: 5px;
}
/* ヘッダーここまで */

/* フッター */
#footer {
  /* display: inline-block; */
  background: #3084e4;
  position: fixed;
  /* position: fixed; */
  width:100%;
  height: 30px;
  bottom:0;
  z-index: 10;
  border-top: 1px solid #9c9c9c;
}
#footerinner {
  color: #ffffff;
  font-size: 1.0em;
  /* text-align: left; */
  /* margin-left: 20px; */
  text-align: center;
  /* margin-right: 20px; */
  line-height: 30px;
}
/* フッターここまで */

/* ボタン */
.btn {
  width: 160px;
  height: 35px;
  line-height: 26px;
  color:#ffffff;
  font-size:1.0em;
  font-weight: bold;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: background 0.3s ease-in-out;
  -webkit-transition:background 0.3s;
	/* background: #c5c5c5; */
	background: -webkit-linear-gradient(top, #bdbdbd 0%, #979797 100%);
  background: linear-gradient(to bottom, #bdbdbd 0%, #979797 100%);
  border: 1px solid #646464;
  box-shadow: 0px 2px 2px #646464;
  /* padding: 2px; */
  /* margin-top: 10px; */
  white-space: nowrap;
}
.btn.ctl {
  width: 100px !important;
  height: 30px !important;
  line-height: 25px !important;
  font-size: 0.9em !important;
  font-weight: normal;
}
.btn.red {
	background: -webkit-linear-gradient(top, #ff5858 0%, #ff5858 100%);
  background: linear-gradient(to bottom, #ff5858 0%, #ff5858 100%);
  border: 1px solid #646464;
}
.btn.green {
	background: -webkit-linear-gradient(top, #36e94b 0%, #36e94b 100%);
  background: linear-gradient(to bottom, #36e94b 0%, #36e94b 100%);
  border: 1px solid #646464;
}
.btn.blue {
	background: -webkit-linear-gradient(top, #4685dd 0%, #4685dd 100%);
  background: linear-gradient(to bottom, #4685dd 0%, #4685dd 100%);
  border: 1px solid #646464;
}
.btn.yellow {
	background: -webkit-linear-gradient(top, #eaf82a 0%, #eaf82a 100%);
  background: linear-gradient(to bottom, #eaf82a 0%, #eaf82a 100%);
  border: 1px solid #646464;
  color:#777777;
}
.btn:hover.btn:not([disabled]) {
	/* background: #faca93; */
	/* background: -webkit-linear-gradient(top, #4580ee 0%, #4580ee 100%); */
	/* background: linear-gradient(to bottom, #4580ee 0%, #4580ee 100%); */
	/* border: 1px solid #6fd2fd; */
  /* background: #a8e4ff; */
  opacity: 0.7;
}
.btn:active {
	/* background: #beebff; */
	/* background: -webkit-linear-gradient(top, #fdcc94 0%, #ffbd71 100%); */
	/* background: linear-gradient(to bottom, #fdcc94 0%, #ffbd71 100%); */
	/* border: 1px solid #6fd2fd; */
  /* background: #a8e4ff; */
  box-shadow: 0px 2px 2px #646464 inset;
  /* padding-top: 5px;
  padding-bottom: -5px; */
  font-size: 1.0em;
  opacity: 0.9;
}
.btn:disabled {
	background: -webkit-linear-gradient(top, #e6e6e6 0%, #e6e6e6 100%);
	background: linear-gradient(to bottom, #e6e6e6 0%, #e6e6e6 100%);
	border: 1px solid #c5c5c5;
  color:#969696;
  /* box-shadow: 0px 2px 2px #919191; */
  box-shadow: none;
  cursor: default !important;
}
.btn.selected {
  background: -webkit-linear-gradient(top, #f0b240 0%, #f0b240 100%);
  background: linear-gradient(to bottom, #f0b240 0%, #f0b240 100%);
  border: 1px solid #646464;
  box-shadow: 0px 2px 2px #646464 inset;
  color: #646464;
  /* padding-top: 5px; */
}
.btn-menu {
  font-size: 1.3em;
  width: 300px;
  height: 45px;
  margin-bottom: 10px;
}

#wrapper {
  display: table;
  width: calc(100% - 6px);
  height: calc(100% - 107px);
  margin: 3px;
  margin-top: 73px;
  /* margin-bottom: 31px; */
}

/* メニュー */
#menu_frame {
  display: table-cell;
  width: 300px;
  height: 100%;
  border: 1px solid #8f8f8f;
  vertical-align: top;
}
#menu_frame .search_ctl {
  margin: 2px;
}
#menu_frame .search_ctl input {
  width: 150px;
  height: 30px;
  vertical-align: middle;
  margin:2px;
}
#menu_frame .search_ctl button {
  width: 60px !important;
  height: 30px !important;
  vertical-align: middle;
  margin:2px;
}
#menu_frame .su_ctl {
  margin: 2px;
}
#menu_frame .su_ctl button {
  vertical-align: middle;
  margin: 2px;
}
.vakata-context li > a,
.vakata-context li > a > i:empty {
  line-height: 25px !important;
}
.vakata-context li > a > i,
.vakata-context li > a .vakata-contextmenu-sep {
  height: 25px !important;
}
/* スプリッター */
#splitter {
  display: table-cell;
  width: 6px;
  height: 100%;
  background: #ffffff;
  /* border: 1px solid #ffffff; */
  cursor: col-resize;
}

/* ツリー */
#jstree {
  font-size:0.85em;
}

/* メイン */
#main_frame {
  display: table-cell;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  /* border: 1px solid #8f8f8f; */
}

#main_frame iframe {
  display: inline-block;
  width: calc(100% - 0px);
  height: 100%;
  margin: 0;
  padding: 0;
}

/* コンテンツ */
#contents {
  display: inline-block;
  position: relative;
  background: #ffffff;
  width: calc(100% - 20px);
  height: calc(100% - 120px);
  /* border: 1px solid #9c9c9c; */
  margin-top: 90px;
  padding: 10px;
  text-align: center;
  z-index: 5;
  overflow: auto;
}

#contents .item_panel {
  display: inline-block;
  background: #ffffff;
  /* width: 400px; */
  /* border-top: 1px solid #9c9c9c;
  border-left: 1px solid #9c9c9c;
  border-right: 1px solid #9c9c9c;
  border-bottom: 1px solid #9c9c9c;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; */
  /* box-shadow: 0 0 5px rgb(139, 139, 139); */
  margin: 20px 10px;
  overflow: hidden;
}

#contents .item_panel .title {
  position: relative;
  background: #ffffff;
  /* border-left: 30px solid #931D23; */
  border-bottom: 4px solid #3084e4;
  font-size: 1.5em;
  height: 45px;
  text-align: left;
  line-height: 50px;
  padding-left: 30px;
  color: #3084e4;
  font-weight: bold;
}
#contents .item_panel .title::before {
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 7px;
  height: 110%;
  background: #3084e4;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  transform: rotate(0deg);
}

#contents .item_panel .control {
  /* display: inline-block; */
  /* background: #ffffff; */
  text-align: left;
  line-height: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}
#contents .item_panel table {
  margin: 0 auto;
  width: 100%;
}
#contents .item_panel .title button {
  width: 120px;
  height: 35px;
  line-height: 35px;
  font-size: initial;
  float: right;
  margin-top: 5px;
}

/* イメージビュー */
#img_view_containar_back {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 200, 0.3);
  top: 0;
  left: 0;
  z-index: 1000;
}
#img_view_containar {
  display: inline-block;
  position: absolute;
  background: #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #949494;
  box-shadow: 0 0 10px rgb(139, 139, 139);
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: calc(100% - 40px);
  height: calc(100% - 100px);
}
#img_view_containar #title {
  position: relative;
  background: #ffffff;
  border-bottom: 4px solid #3084e4;
  color: #2e2e2e;
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
}
#img_view_containar #img_close {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}
#img_view_containar #img_contents {
  display: inline-block;
  text-align: center;
  width: 100%;
  height: calc(100% - 92px);
}
#img_view_containar .item {
  /* display: table-cell; */
  position: relative;
  display: inline-block;
  text-align: center;
  background: #ffffff;
  width: 100%;
  height: 100%;
}
#img_view_containar .item img {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  width: auto;
  height: auto;
  max-width: calc(100% - 10px);
  max-height: calc(100% - 10px);
  border: 1px solid #5c5c5c;
}
#img_view_containar #ctl {
  display: flex;
  position: absolute;
  background: #dbdbdb;
  /* border-top: 4px solid #3084e4; */
  color: #2e2e2e;
  width: 100%;
  height: 50px;
  line-height: 50px;
  bottom: 0;
  left: 0;
  /* padding: 0px 10px; */
}
#img_view_containar #ctl button {
  margin: 0px;
  font-size: 1.2em;
}

/* マスタ関係 */
/* ログインユーザ管理 */
#login_list_table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  /* width: 650px; */
  /* table-layout: fixed; */
  text-align: center;
}
#login_list_table tr {
  background-color: #fff;
  border: 1px solid #bbb;
  padding: 10px;
}
#login_list_table th,
#login_list_table td {
  padding: 5px;
  border-right: 1px solid #bbb;
  line-height: 20px;
}
#login_list_table th {
  font-size: 1.0em;
}
#login_list_table td {
  font-size: 0.9em;
}
#login_list_table td.check {
  background-image: url("../../common/images/check.png");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
}
#login_list_table .highlight {
  background-color: #e1f1ff;
}

/* ユーザ情報・所属マスタ・役職マスタ */
.list_ctrl_panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: left;
  padding: 20px;
}
.list_ctrl_panel .list_panel .search_panel {
  margin: 10px;
}
.list_ctrl_panel .list_panel .search_panel>* {
  vertical-align: middle;
}
.list_ctrl_panel .list_panel .search_panel #btn_search {
  width: 80px;
  height: 30px;
  line-height: 30px;
  font-size: 0.95em;
}
#user_list_table,
#syozoku_list_table,
#yakusyoku_list_table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
}
#user_list_table thead,
#syozoku_list_table thead,
#yakusyoku_list_table thead {
  display: block;
  cursor: pointer;
}
#user_list_table thead th,
#syozoku_list_table thead th,
#yakusyoku_list_table thead th {
  position: relative;
}
#user_list_table thead th.order_asc::before,
#syozoku_list_table thead th.order_asc::before,
#yakusyoku_list_table thead th.order_asc::before {
  content: '';
  position: absolute;
  background-image: url("../../common/images/order_asc.png");
  background-size: contain;
  position: absolute;
  left: 5px;
  top: 8px;
  width: 14px;
  height: 14px;
}
#user_list_table thead th.order_desc::before,
#syozoku_list_table thead th.order_desc::before,
#yakusyoku_list_table thead th.order_desc::before {
  content: '';
  position: absolute;
  background-image: url("../../common/images/order_desc.png");
  background-size: contain;
  position: absolute;
  left: 5px;
  top: 8px;
  width: 14px;
  height: 14px;
}
#user_list_table tbody,
#syozoku_list_table tbody,
#yakusyoku_list_table tbody {
  display: block;
}
#user_list_table tbody,
#syozoku_list_table tbody,
#yakusyoku_list_table tbody {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 500px;
}
#user_list_table tr,
#syozoku_list_table tr,
#yakusyoku_list_table tr {
  background-color: #fff;
  padding: 10px;
}
#user_list_table tr.head,
#syozoku_list_table tr.head,
#yakusyoku_list_table tr.head {
  background-color: rgb(240, 240, 240);
}
#user_list_table tr.select,
#syozoku_list_table tr.select,
#yakusyoku_list_table tr.select {
  background-color: #d4e7ff;
}
#user_list_table tr:not(.head):hover,
#syozoku_list_table tr:not(.head):hover,
#yakusyoku_list_table tr:not(.head):hover {
  background-color: #e8f2ff;
  cursor: pointer;
}
#user_list_table th,
#user_list_table td,
#syozoku_list_table th,
#syozoku_list_table td,
#yakusyoku_list_table th,
#yakusyoku_list_table td {
  padding: 5px;
  line-height: 20px;
}
#user_list_table th,
#user_list_table td,
#syozoku_list_table th,
#syozoku_list_table td,
#yakusyoku_list_table th,
#yakusyoku_list_table td {
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}
#user_list_table th:last-child,
#user_list_table td:last-child,
#syozoku_list_table th:last-child,
#syozoku_list_table td:last-child,
#yakusyoku_list_table th:last-child,
#yakusyoku_list_table td:last-child {
  border-right: 1px solid #bbb;
}
#user_list_table th,
#syozoku_list_table th,
#yakusyoku_list_table th {
  font-size: 1.0em;
}
#user_list_table td,
#syozoku_list_table td,
#yakusyoku_list_table td {
  font-size: 0.9em;
}
.list_ctrl_panel .control_panel {
  padding: 0px 10px;
}
.list_ctrl_panel .list_panel,
.list_ctrl_panel .control_panel .item {
  background: #ffffff;
  /* width: 500px; */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #949494;
  padding: 10px;
}
.list_ctrl_panel .control_panel .item .edit_title {
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  border-bottom: 2px solid #3084e4;
  margin-bottom: 10px;
}
.list_ctrl_panel .control_panel .item .btn_ctrl button {
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-size: 1.0em;
  position: relative;
}
.list_ctrl_panel .control_panel .item .btn_ctrl button#btn_up,
.list_ctrl_panel .control_panel .item .btn_ctrl button#btn_down {
  padding-left: 25px;
}
.list_ctrl_panel .control_panel .item .btn_ctrl button#btn_up::before,
.list_ctrl_panel .control_panel .item .btn_ctrl button#btn_down::before {
  content: '';
  background-size: contain;
  position: absolute;
  left: 23px;
  top: 6px;
  width: 16px;
  height: 16px;
}
.list_ctrl_panel .control_panel .item .btn_ctrl button#btn_up::before {
  background-image: url("../../common/images/up_arrow.png");
}
.list_ctrl_panel .control_panel .item .btn_ctrl button#btn_down::before {
  background-image: url("../../common/images/down_arrow.png");
}
.list_ctrl_panel .control_panel .item .ctrl {
  text-align: center;
  padding-top: 10px;
}
.list_ctrl_panel .control_panel .item .ctrl button {
  width: 120px;
}

/* ログ */
#log_panel {
  text-align: left;
  width: calc(100% - 20px);
  height: 100%;
  background: #ffffff;
  /* width: 500px; */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #949494;
  padding: 10px;
}
#log_panel #ctrl {
  border-bottom: 2px solid #3084e4;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#log_panel #list {
  /* display: inline-block; */
  background: #ffffff;
  height: 400px;
  line-height: 20px;
  font-size:14px;
  overflow-x: scroll;
  overflow-y: scroll;
}
#log_panel #list pre {
  white-space: pre;
}

/* 戻るボタン */
#contents.top_min {
  margin-top: 80px;
}
#contents.top_min .item_panel {
  margin-top: 30px;
}
.back_btn {
  position: absolute;
  width: 100px;
  left: 20px;
  top: 0px;
}

/* 必須マーク */
.required {
  position: relative;
}
.required::after {
  content: '必須';
  position: absolute;
  right: 3px;
  top: 3px;
  background: #ff0000;
  color: #ffffff;
  font-size: calc(1.0em - 0.2em);
  font-weight: bold;
  padding: 1px 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #b1b1b1;
}

/* wait */
#wait {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(200, 200, 200, 0.3);
  z-index:999;
}
#wait .window {
  display: block;
  position: absolute;
  width:210px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: 95px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background:#ffffff;
  border:1px solid #a1a1a1;
  padding: 10px;
  padding-left:110px;
  box-shadow: 0 0 10px rgb(139, 139, 139);
  overflow: hidden;
}
#wait .loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #4c87e6;
  background: -moz-linear-gradient(left, #4c87e6 10%, rgba(76,135,230, 0) 42%);
  background: -webkit-linear-gradient(left, #4c87e6 10%, rgba(76,135,230, 0) 42%);
  background: -o-linear-gradient(left, #4c87e6 10%, rgba(76,135,230, 0) 42%);
  background: -ms-linear-gradient(left, #4c87e6 10%, rgba(76,135,230, 0) 42%);
  background: linear-gradient(to right, #4c87e6 10%, rgba(76,135,230, 0) 42%);
  position: absolute;
  top: 30px;
  left: 30px;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #4c87e6;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #ffffff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}