@charset "UTF-8";
/* ======================================================

  element

====================================================== */
body {
    color: #521505;
}
a {
    color: #521505;
}
a:link {
    color: #521505;
}
a:visited {
    color: #521505;
}
.btn:hover, a:hover {
    color: #521505;
}
a:active {
    color: #521505;
}

/* ======================================================

  header

====================================================== */
.login-header {
    z-index: 99;
    position: sticky;
    top: 0;
}

/* ======================================================

  side-nav

====================================================== */
.side-column .logo {
    background-color: #b50080;
}
.side-column .side-nav > ul > li > a {
    border-left: 4px solid #521505;
}
.side-column .side-nav li > span {
    border-left: 4px solid #55a75d;
    border-bottom: 10px solid #f9f9f9;
    background-color: #ffffff;
    font-weight: bold;
}
.side-column .side-nav .switch-title.is-active span {
    border-left: 4px solid #b50080;
    color: #b50080;
}
.side-column .side-nav > ul > li > a:hover {
    border-left: 4px solid #b50080;
    color: #b50080;
}
.side-column .side-nav .switch-list li > a:before {
    border-left: 4px solid #b50080;
}
.side-column .side-nav .switch-list li > a:hover {
    border-left: 4px solid #b50080;
    color: #b50080;
}

/* ======================================================

  button

====================================================== */
.btn.btn-back:before {
    background-color: #521505;
}
.btn.btn-success {
    background-color: #b50080;
    border-color: #ba0080;
}
.btn.btn-important {
    background-color: #737373;
    border-color: #B7B7B7;
}
div.btn-bottom-area {
    display: flex;
    justify-content: space-between;
}
div.btn-bottom-area {
    margin-top: 10px;
}
.btn.btn-hidden {
    visibility: hidden;
}
.btn.btn-success:disabled, .btn.btn-notice:disabled {
    background-color: #737373;
    border-color: #B7B7B7;
}
.btn.btn-notice {
    background-color: #55a75d;
    border-color: #55a75d;
    color: #fff;
}

/* ======================================================

  form

====================================================== */
.form-inline input.txt-sm {
    width: 80px;
}
.form-inline input.txt-md {
    width: 150px;
}
.form-inline input.txt-lg {
    width: 500px;
}
.form-inline input.txt-vt {
    width: 900px;
}

/* ======================================================

  login

====================================================== */
.panel.panel-login {
    width: 480px;
}
div.panel-login .alert {
    margin-top: 20px;
}

/* ======================================================

  modal

====================================================== */
.modal-frame .modal-body .well .table td {
    text-align: left;
    background-color: #ffffff;
}
.modal-frame .modal-body .modal-title {
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #521505;
}

/* ======================================================

  table th

====================================================== */
.table th.col-per-5 {
    width: 5%; }

.table th.col-per-10 {
    width: 10% !important; }

.table th.col-per-20 {
    width: 20% !important; }

.table th.col-per-30 {
    width: 30% !important; }

.table th.col-per-40 {
    width: 40% !important; }

.table th.col-per-50 {
    width: 50% !important; }

.table th.col-per-60 {
    width: 60% !important; }

.table th.col-per-70 {
    width: 70% !important; }

.table th.col-per-80 {
    width: 80% !important; }

.table th.col-per-90 {
    width: 90% !important; }

.table th.col-per-100 {
    width: 100% !important; }

/* ======================================================

  table-scroll

====================================================== */
.table-scroll {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
table {
    width: 100%;
    table-layout: auto;
}

/* ======================================================

  footer

====================================================== */
.footer .btn-pagetop {
    background-color: #b50080;
}

/* ======================================================

  footerを一番下に固定

====================================================== */
html {
    display: flex;
    flex-direction: column;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.contents {
    flex: 1 1 auto;
}

/* ======================================================

  検索一覧

====================================================== */
div.search .alert {
    margin-top: 10px;
    margin-bottom: 10px;
}
div.search table {
    margin-bottom: 10px;
}
div.search button {
    display: block;
    margin: 0 0 0 auto;
}
div.search .text-error {
    margin-top: 5px;
}
div.search .text-error span {
    display: block;
}

/* ======================================================

  検索結果一覧

====================================================== */
div.search-result .table th {
  white-space: nowrap !important;
  vertical-align: middle;
  text-align: center;
  width: 0;
}

/* ======================================================

表示件数

====================================================== */
div.dataTables_length select {
    padding: 5px;
    font-size: 12px;
    border: 1px solid #dbdbdb;
    margin-bottom: 5px;
}

/* ======================================================

  アップロード

====================================================== */
div.upload .text-error {
    margin-top: 5px;
}
div.upload .text-error span {
    display: block;
}
div.upload table {
    margin-bottom: 10px;
}
div.upload button {
    display: block;
    margin: 0 0 0 auto;
}

/* ======================================================

  カレンダー

====================================================== */

td.ui-datepicker-week-end:first-child a.ui-state-default{
    background: #ffecec;   /* 背景色を設定 */
    color: #f00!important;       /* 文字色を設定 */
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
    background: #eaeaff;   /* 背景色を設定 */
    color: #00f!important;       /* 文字色を設定 */
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
    opacity: 0.7;
}