@charset "utf-8";

/*----------------------------------------------------
 elements
----------------------------------------------------*/
body {
    background: white;
    color: steelblue;
    color: dimgray;  /* 変更点（↑と入れ替え） */
    font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 11px;
    line-height: 1.5;

    -webkit-text-size-adjust: 100%; /* フォントサイズ自動調整 */

}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a.a-default {
    color: coral;
    -webkit-tap-highlight-color:transparent;
    -webkit-transition: 1s ease-in-out;
}
a.a-default:hover {
    color: cyan;
}
img{
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
.align-center {
    text-align: center;
}
.box-shadow {
    /*CSS3*/
    box-shadow: 2px 2px 5px black;
    /* Firefox用*/
    -moz-box-shadow: 2px 2px 5px black;
    /* Google Chrome, Safari用*/
    -webkit-box-shadow: 2px 2px 5px black;
}
.submit-default {
    cursor: pointer;
    border-style: none;
    outline: 0;
    width: 85px;
    height: 30px;
    padding-top: 5px;
    margin: 5px;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    color: steelblue;
    border: 1px solid gray;
    background: white;
    letter-spacing: 2px;
}
.submit-default:hover{
    background: azure;
}
.submit-default:active{
    position:relative;
    top:1px
}
h2 {
    font-size: 17px;
    font-weight: bolder;
}
hr {
    margin: 20px 0px;
}
.error {
    color: coral;
}
.info {
    font-weight: bolder;
}
.left-margin {
    margin-left: 2%;
}
span.biko {
    color: black;
    font-size: 9px;
}
.clear {
    clear: both;
}
.a-insert {
    display: block;
    height: 15px;
    width: 20px;
    padding: 5px;
    margin: 5px;
    font-size: 9px;
    text-align: center;
    color: dimgray;
    background: gainsboro;
    border-radius: 5px;
}
.a-insert:hover {
    background-color: tomato;
    color: white;
}
a.a-footer {
    display: block;
    width: 100px;
    height: 20px;
    padding-top: 5px;
    margin-top: 5px;
    font-size: 9px;
    text-align: center;
    border-radius: 5px;
    background-color: dimgray;
    color: white;

}
a.a-footer:hover {
    background-color: tomato;
}
table.tbl-def {
    border-collapse: collapse;
    border: 1px solid gray;
    margin-top: 20px;
}
table.tbl-def th,
table.tbl-def td {
    padding: 5px;
}
table.tbl-def thead {
    background-color: orange;
}
table.tbl-def tbody {
    height: 300px;
}
table.tbl-def tbody tr {
    height: 30px
}
table.tbl-def tbody tr:nth-child(even) {
    background-color: papayawhip;
}
label {
    cursor: pointer;
}
select {
    -webkit-appearance: button;
    appearance: button;
    height: 30px;
    padding: 5px 10px;
    padding-right: 20px;
    color: gray;
    background-color: white;
    border-radius: 3px;
    border: 1px solid dimgray;
    font-size: 12px;
}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"] {
    height: 20px;
    font-size: 12px;
}
input[type="password"] {
    width: 100px;
}

.user-add-button {
    height: 30px;
    width: 30px;
    text-align: center;
    border: 2px solid gray;
    color: gray;
    backgraound-color: white;
    border-radius: 3px;
}
.cancel-button {
    height: 30px;
    width: 30px;
    margin-top: 0;
    float: right;
    border: 2px solid white;
    color: white;
    backgraound-color: gray;
    border-radius: 3px;
}

.scroll-area {
    height: 500px;
    width: auto;
    overflow: auto;
}
.cl-sp {
    display: none;
}

.cl-new {
    background: goldenrod url(../img/new.gif) no-repeat top right !important;
    border-radius: 3px;
}
.cl-new:hover{
    background: tomato !important;
}
.cl-padding-bottom {
    padding-bottom: 20px;
}
.cl-margin-bottom {
    margin-bottom: 20px;
}
.print-off {
    padding-bottom: 20px;
}

.no-action {
    pointer-events : none;
}

.display-none {
    display: none;
}

/* しましま表示 */
tr.tr-even {
    background-color: papayawhip;
}
/* ヘッダー固定スクロール */
thead.scroll-head, tbody.scroll-body {
    display: block;
}
tbody.scroll-body {
    overflow-y: scroll;
/*     height: 210px; */
}
th,td {
    table-layout: fixed;
}

/* 入力モーダルウィンドウ */
.modal-div {
    position: fixed;
    z-index: 10;
    margin: 0 auto;
    border-radius: 3px;
}
#modal-overlay {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
}

/* 合計テーブル */
.tbl-total {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    width: 420px;
}
.tbl-total thead th {
    height: 30px;
    font-size: 11px;
    color: white;
    background-color: orange;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-total tbody {
    text-align: right;
}
.tbl-total tbody tr {
    height: 30px;
}
.tbl-total tbody td {
    padding-right: 5px;
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-total .th-lesson {
    width: 40px;
}
.tbl-total .th-point {
    width: 40px;
}
.tbl-total col-count {
    min-width: 40px;
    width: 40px;
    max-width: 40px;
}


/*----------------------------------------------------
 brawser
----------------------------------------------------*/
@media screen and (max-width: 2000px) {
    header span {
        font-size: 15px;
    }
    #liquid-max {
        margin: auto;
        max-width: 960px;
    }
    #container{
        margin: auto;
        width: 95%
    }
    /* li要素を 3列づつ表示する */
    #nav li {
        color: white;
        background: goldenrod;
        border-radius: 3px;
        float: left;
        line-height: 3em;
        margin: 5px 2%;
        padding: 0;
        text-indent: 5%;
        width: 240px;
    }
    #nav li:before {
        content: none;
    }
    #nav li:hover{
        background: tomato;
    }
}

/*----------------------------------------------------
 #header
----------------------------------------------------*/
header {
    height: 30px;
    background: url("../img/top.jpg") repeat-x left top;
    background: goldenrod; /* 変更点（↑と入れ替え） */
    padding: 30px 10%;
    border-bottom: 2px ridge white;
}
header span {
    color: white;
    font-weight: bolder;
    letter-spacing: 3px;
}


/*----------------------------------------------------
 #footer
----------------------------------------------------*/
footer {
    height: 50px;
    background: url("../img/top.jpg") no-repeat left bottom;
    background: white; /* 変更点（↑と入れ替え） */
    border-top: 2px ridge white;
    padding: 10px 0 40px;
    color: white;
}
p.copyright {
    margin: 30px 0 0 0;
    text-align: center;
    color: goldenrod; /* 変更点（消す） */
}


/*----------------------------------------------------
 #nav メニュー画面
----------------------------------------------------*/
/* リンクを広範囲にする */
#nav li a {
    display: block;
}
#nav:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.menu-title {

}
.menu-a {
    display: block;
}


/*----------------------------------------------------
 #lesson レッスン入力画面
----------------------------------------------------*/
#lesson-input {
    position: fixed;
    top: 20%;
    z-index: 10;
    width: 500px;
    height: 240px;
    margin: 0 auto;
    border-radius: 3px;
    color: white;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
.lesson-input-area {
    clear: both;
    margin: 20px 15px;
}
.lesson-input-area #id-items {
    height: 80px;
    padding-left: 20px;
}

.delete-button {
    margin: 0 5px 0 0;
    float: left;
}
.tbl-lesson {
    padding-bottom: 15px;
    margin: 10px;
    border-spacing: 0px;
    width: 95%;
}
.tbl-lesson th {
    height: 50px;
    border-bottom: 1px ridge gray;
}
.tbl-lesson tr {
    height: 45px;
}
.tbl-lesson tr.tr-hide {
    display: none;
}
.tbl-lesson .th-name {
    width: 140px;
}
.tbl-lesson .th-timezone {
    width: 121px;
}
.tbl-lesson .th-rental {
    width: 50px;
}
.tbl-lesson .th-total {
    padding-left: 10px;
    width: 140px;
}
.tbl-lesson .line-right {
    border-right: 1px ridge gray;
}
.tbl-lesson tbody {
    height: 280px;
}
.tbl-lesson .td-name {
    padding-left: 10px;
    width: 131px;
    max-width: 131px;
    border-right: 1px ridge gray;
}
.tbl-lesson .span-name {
    display: block;
    float: left;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-lesson .div-remarks {
    width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-lesson .td-timezone {
    align: center;
    border-right: 1px dotted gray;
    width: 120px
}
.tbl-lesson .td-rental {
    width: 50px;
}
.tbl-lesson .td-total {
    font-size: 10px;
    padding-left: 10px;
    width: 140px;
}
.tbl-lesson tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-lesson tbody tr.tr-total {
    height: 50px;
    border-top: double 1px gray;
    background-color: lightyellow;
}
.a-lesson {
    height: 28px;
    width: 80%;
    display: block;
    margin: 0 auto;
    font-size: 9px;
    text-align: center;
    border-radius: 3px;
    padding: 0 5px;
}
.a-lesson:hover {
    background-color: tomato;
    color: white;
}
.a-status-0 {

}
.a-status-1 {
    background-color: skyblue;
}
.a-status-2 {
    background-color: gold;
}
.a-status-3 {
    width: 70%;
    background-color: skyblue;
}
.a-status-4 {
    width: 70%;
    background-color: gold;
}
.a-kids {
    background-color: gold;
}
.a-training {
    background-color: mediumseagreen;
}

#personnel-expenses-charts {
    min-width: 400px;
    max-width: 400px;
    height: 130px;
    margin: 0;
}


/*----------------------------------------------------
 #reserve 予約管理画面
----------------------------------------------------*/
.tbl-reserve {
    margin-top: 10px;
    border-spacing: 0px;
}
.tbl-reserve tr {
    height: 40px;
}
.tbl-reserve th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: mediumaquamarine;
    border-bottom: 1px ridge gray;
    border-radius: 3px 3px 0 0;
}
.tbl-reserve td {
    padding-left: 5px;
    border-bottom: 1px ridge gray;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbl-reserve tbody {
    height: 250px;
}

.tbl-reserve .col-header {
    width: 60px;
    text-align: center;
}
.tbl-reserve .col-lesson,
.tbl-reserve .col-rental {
    min-width: 200px;
    width: 200px;
}
.tbl-reserve .col-name {
    min-width: 200px;
    width: 200px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-reserve .col-time,
.tbl-reserve .col-stature,
.tbl-reserve .col-foot {
    min-width: 100px;
    width: 100px;
}
.tbl-reserve .col-button {
    min-width: 50px;
    width: 50px;
    max-width: 55px;
}


#reserve-input {
    top: 10%;
    height: 460px;
    width: 500px;
    color: white;
    padding: 0 15px;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
#reserve-input .input-window {
    overflow-y: scroll;
    width: 100%;
    height: 300px;
    background-color: chocolate;
    border: 1px lightgray solid;
    border-radius: 3px;
    margin: 30px 0;
}
#reserve-input ul { list-style: none; }
#reserve-input ul li {
    margin: 20px 0;
    clear: left;
}
#reserve-input ul li .reserve-item {
    display: block;
    float: left;
    width: 90px;
}
#reserve-input ul li #id-name {
    width: 180px;
}
#reserve-input ul li #id-tel {
    width: 100px;
}
#reserve-input ul li #id-mail {
    width: 250px;
}
#reserve-input ul li #id-remarks {
    height: 60px;
    width: 250px;
}
#reserve-input ul li #id-number {
    width: 30px;
    text-align: right;
}
#reserve-input ul li .div-time {
    margin-left: 90px;
}

#reserve-input ul li .stature {
    width: 40px;
    text-align: right;
}


/*----------------------------------------------------
 #reserve 予約チェック画面
----------------------------------------------------*/
.tbl-reserve-check {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
/*     width: 640px; */
}
.tbl-reserve-check thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: orange;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-reserve-check tbody {
    height: 350px;
}
.tbl-reserve-check tbody tr {
    height: 40px;
}
.tbl-reserve-check tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-reserve-check tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

.tbl-reserve-check .col-no,
.tbl-reserve-check .col-time {
    text-align: center;
    width: 40px;
}
.tbl-reserve-check .col-name {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-reserve-check .col-tel {
    width: 100px;
    padding-left: 5px;
}
.tbl-reserve-check .col-pay {
    width: 60px;
    text-align: center;
}
.tbl-reserve-check .col-price {
    text-align: right;
    padding-right: 5px;
    width: 70px;
}

.tbl-reserve-check .col-remarks {
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
    text-overflow: clip;
    /* overflow: hidden; */
    overflow: scroll;
}
.tbl-reserve-check .col-button {
    width: 60px;
    text-align: center;
}

#reserve-check {
    position: fixed;
    top: 10%;
    z-index: 10;
    width: 460px;
    height: 530px;
    margin: 0 auto;
    border-radius: 3px;
    color: white;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}

.reserve-detail {
    clear: both;
    margin: 20px 15px;
}
.reserve-detail p {
    padding-left: 30px;
}
.reserve-detail p .spn-name,
.reserve-detail p .spn-tel,
.reserve-detail p .spn-price,
.reserve-detail p .spn-date {
    margin-left: 10px;
}
.reserve-detail p .lbl-item {
    display: block;
    float: left;
    width: 80px;
}

.reserve-detail .item-window {
    overflow-y: scroll;
    width: 380px;
    height: 200px;
    color: saddlebrown;
    background-color: white;
    border: 1px lightgray solid;
    border-radius: 3px;
    padding-top: 20px;
    margin: 20px auto;
}

/*----------------------------------------------------
 #shift シフト管理画面
----------------------------------------------------*/
#shift-input {
    position: fixed;
    z-index: 2;
    width: 350px;
    height: 520px;
    border-radius: 3px;
    color: white;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
    top: 15px;
    left: 35%;
}
.shift-input-area {
    clear: both;
    margin: 20px 25px;
}
.txt-remarks {
    height: 80px;
    width: 250px;
    margin-bottom: 20px;
}

.tbl-shift {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    width: 800px;
}
.tbl-shift thead th {
    height: 30px;
    font-size: 10px;
}
.tbl-shift .th-no {
    width: 20px;
    text-align: center;
    padding: 0 5px;
}
.tbl-shift .th-name {
    width: 125px;
}
.tbl-shift .th-before {
    width: 63px;
}
.tbl-shift .th-today {
    width: 93px;
    background-color: orange;
    border-radius: 3px 3px 0 0;
}
.tbl-shift .th-days {
    width: 93px;
    color: white;
    background-color: orange;
    border-radius: 3px 3px 0 0;
    border-color: white;
    border-width: 0 0 0 0.5px;
    border-style: solid;
}

.tbl-shift .span-saturday {
    color: skyblue;
}
.tbl-shift .span-sunday {
    color: tomato;
}

.tbl-shift tbody {
    border: 1px dimgray solid;
    height: 420px;
}
.tbl-shift tbody tr {
    height: 30px;
}
.tbl-shift tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-shift tbody td {
    border-color: darkgray;
    border-width: 0 0.5px 0.5px 0;
    border-right-style: solid;
    border-bottom-style: dotted;
}
.tbl-shift .td-no {
    width: 24px;
    text-align: right;
    padding-right: 5px;
}
.tbl-shift .td-name {
    width: 120px;
    padding-left: 5px;
}
.tbl-shift .td-before {
    width: 63px;
    text-align: center;
}
.tbl-shift .td-days {
    padding: 0;
    width: 95px;
    text-align: center;
}

.p-shift {
    margin: 0;
    display: block;
    height: 28px;
    width: 100%;
    color: limegreen;
    border-radius: 3px;
}
.p-shift:hover {
    background-color: tomato;
    color: white;
}
.button-margin-top {
    margin-top: 60px;
}


/*----------------------------------------------------
 domitory 宿泊数、食数 画面
----------------------------------------------------*/
.tbl-dormitory {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    width: 420px;
}
.tbl-dormitory thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    text-align: center;
    background-color: orange;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-dormitory .th-no {
    width: 22px;
}
.tbl-dormitory .th-name {
    width: 80px;
}
.tbl-dormitory .th-school,
.tbl-dormitory .th-stay,
.tbl-dormitory .th-fast,
.tbl-dormitory .th-lunch,
.tbl-dormitory .th-dinner {
    width: 40px;
}
.tbl-dormitory .th-room {
    width: 90px;
}

.tbl-dormitory tbody {
    border: 1px dimgray solid;
    height: 350px;
}
.tbl-dormitory tbody tr {
    height: 30px;
}
.tbl-dormitory tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-dormitory tbody td {
    border-color: darkgray;
    border-width: 0 0.5px 0.5px 0;
    border-right-style: solid;
    border-bottom-style: dotted;
}
.tbl-dormitory .td-no {
    width: 18px;
    text-align: right;
    padding-right: 5px;
}
.tbl-dormitory .td-name {
    width: 81px;
}
.tbl-dormitory .td-school,
.tbl-dormitory .td-stay,
.tbl-dormitory .td-fast,
.tbl-dormitory .td-lunch,
.tbl-dormitory .td-dinner {
    width: 41px;
}
.tbl-dormitory .td-room {
    width: 90px;
}


/*----------------------------------------------------
 履歴画面
----------------------------------------------------*/
.tbl-history-list {
    margin-top: 10px;
    margin-bottom: 10px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    width: 360px;
}
.tbl-history-list thead {
    background-color: goldenrod;
}
.tbl-history-list thead th {
    height: 20px;
    color: white;
    text-align: left;
    padding-left: 5px;
}
.tbl-history-list tbody {
    height: 350px;
}

.col-day {
    padding-left: 5px;
    width: 30px;
}
.col-status {
    width: 50px;
}
.col-school {
    padding-left: 5px;
    width: 160px;
}
.col-stay {
    width: 60px;
}
.col-meal {
    width: 40px;
}
.tbl-history-list .col-lesson,
.col-remarks {
    width: 350px;
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 5px;
}


/*----------------------------------------------------
 #base ベース入力画面
----------------------------------------------------*/
.tbl-base {
    margin-top: 20px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
.tbl-base th,
.tbl-base td {
    padding: 2px;
}
.tbl-base thead {
    background-color: orange;
}
.tbl-base thead th.th-id {
    width: 50px;
}
.tbl-base thead th.th-name {
    width: 100px;
}
.tbl-base thead th.th-point {
    width: 30px;
}
.tbl-base thead th.th-amount {
    width: 70px;
}

.tbl-base tbody {
    height: 350px;
}
.tbl-base tbody td.td-day {
    text-align: center;
    width: 30px;
}
.tbl-base tbody td.td-id {
    text-align: center;
    width: 50px;
}
.tbl-base tbody td.td-name {
    text-align: left;
    width: 100px;
}
.tbl-base tbody td.td-point {
    text-align: right;
    width: 30px;
}
.tbl-base tbody td.td-amount {
    text-align: right;
    width: 70px;
}
.tbl-base tbody td.td-remarks {
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-base tbody td.td-total {
    font-weight: bold;
    text-align: right;
    width: 60px;
}
.tbl-base tbody td.td-error {
    background-color: coral;
}
#base input[type="text"] {
    width: 70%;
    text-align: right;
}
#base input[type="text"].biko {
    width: 90%;
    text-align: left;
}


/*----------------------------------------------------
 #payroll 給料計算画面
----------------------------------------------------*/
.tbl-payroll-check .col-name {
    width: 100px;
    max-width: 200px;
}

/*----------------------------------------------------
 #payslip 給料明細画面
----------------------------------------------------*/
#tbl-payslip {
    margin-top: 20px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
#tbl-payslip th,
#tbl-payslip td {
    padding: 2px;
}
#tbl-payslip thead {
    background-color: orange;
}
#tbl-payslip thead th.th-id {
    width: 50px;
}
#tbl-payslip thead th.th-name {
    width: 100px;
}
#tbl-payslip thead th.th-flg {
    width: 25px;
}
#tbl-payslip thead th.th-point {
    width: 30px;
}
#tbl-payslip thead th.th-amount {
    width: 70px;
}
#tbl-payslip thead th.th-total {
    width: 75px;
}

#tbl-payslip tbody {
    height: 350px;
}
#tbl-payslip tbody:hover td.td-id:hover {
    opacity: 1;
    color: white;
    background: goldenrod;
}

#tbl-payslip tbody td.td-id {
    text-align: center;
    width: 50px;
    min-width: 50px;
    cursor: pointer;
}
#tbl-payslip tbody td.td-name {
    text-align: left;
    width: 100px;
    min-width: 100px;
}
#tbl-payslip tbody td.td-flg {
    text-align: center;
    width: 25px;
    min-width: 25px;
}
#tbl-payslip tbody td.td-point {
    text-align: right;
    width: 30px;
    min-width: 30px;
}
#tbl-payslip tbody td.td-amount {
    text-align: right;
    width: 70px;
    min-width: 70px;
}
#tbl-payslip tbody td.td-total {
    font-weight: bold;
    text-align: right;
    width: 75px;
    min-width: 75px;
}
#tbl-payslip tbody td.td-deduction {
    color: coral;
}
#tbl-payslip tbody td.td-kind {
    text-align: center;
}
#tbl-payslip tbody td.td-nowrap {
    padding: 0;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

#payslip-input {
    top: 10%;
    height: 480px;
    width: 500px;
    color: white;
    padding: 0 15px;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
#payslip-input .img-face {
	margin: 10px;
    max-width: 100px;
    max-height: 100px;
    float: left;
}

#payslip-input .input-window {
    overflow-y: scroll;
    width: 100%;
    height: 240px;
    background-color: chocolate;
    border: 1px lightgray solid;
    border-radius: 3px;
    margin: 30px 0;
}
#payslip-input ul { list-style: none; }
#payslip-input ul li {
    margin: 20px 0;
    clear: left;
}
#payslip-input ul li .user-item {
    display: block;
    float: left;
    width: 120px;
}

#payslip-input input[type="number"] {
    width: 50px;
	maxlength: 6;
    text-align: right;
}
#payslip-input input[type="text"] {
    width: 66%;
    text-align: left;
    overflow: scroll;
}


/*----------------------------------------------------
 #user 社員名簿画面（イントラ名鑑）
----------------------------------------------------*/
#user-input {
    top: 10%;
    height: 440px;
    width: 500px;
    color: white;
    padding: 0 15px;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
#user-input .input-window {
    overflow-y: scroll;
    width: 100%;
    height: 280px;
    background-color: chocolate;
    border: 1px lightgray solid;
    border-radius: 3px;
    margin: 30px 0;
}
#user-input ul { list-style: none; }
#user-input ul li {
    margin: 20px 0;
    clear: left;
}
#user-input ul li .user-item {
    display: block;
    float: left;
    width: 120px;
}

#user-input ul li #id-face {
    width: 160px;
    height: auto;
}
#user-input ul li #id-name {
    width: 180px;
}
#user-input ul li #id-kana {
    width: 180px;
}
#user-input ul li #id-en {
    width: 200px;
}
#user-input ul li #id-nickname {
    width: 180px;
}
#user-input ul li #id-birth {
    width: 100px;
}
#user-input ul li #id-tel {
    width: 100px;
}
#user-input ul li #id-mail {
    width: 250px;
}
#user-input ul li #id-lesson-wage {
    width: 80px;
    text-align: right;
}
#user-input ul li #id-lv {
    width: 30px;
    text-align: right;
}
#user-input ul li #id-post {
    width: 60px;
}
#user-input ul li #id-address {
    width: 300px;
    overflow: scroll;
}
#user-input ul li #id-wage {
    width: 50px;
    text-align: right;
}
#user-input ul li #id-wage-high {
    width: 50px;
    text-align: right;
}
#user-input ul li #id-dormitory {
    width: 80px;
    text-align: right;
}
#user-input ul li #id-car {
    width: 300px;
    overflow: scroll;
}
#user-input ul li #id-bank-cd {
    width: 45px;
}
#user-input ul li #id-bank {
    width: 150px;
}
#user-input ul li #id-branch-cd {
    width: 40px;
}
#user-input ul li #id-branch {
    width: 250px;
}
#user-input ul li #id-account {
    width: 100px;
}
#user-input ul li #id-holder {
    width: 250px;
}
#user-input ul li #id-jsba {
    width: 200px;
}
#user-input ul li #id-instructor {
    width: 200px;
}
#user-input ul li #id-examiner {
    width: 200px;
}
#user-input ul li #id-img-mynumber {
    width: 300px;
    height: auto;
}

.user-table-window {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    height: auto;
    border: 1px dimgray solid;
    margin-bottom: 30px;
}
#tbl-user {
    width: 2900px;
    margin: 0;
    border-spacing: 0px;
}
#tbl-user thead {
    background-color: lightslategray;
}
#tbl-user thead tr {
    height: 35px;
}
#tbl-user thead th {
    padding: 0;
    height: 30px;
    color: white;
    text-align: left;
}
#tbl-user tbody {
    height: 300px;
}
#tbl-user tbody tr {
    height: 40px;
}
#tbl-user tbody tr:nth-child(even) {
    background-color: papayawhip;
}
#tbl-user tbody td {
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

#tbl-user tbody tr:hover td {
    color: gray;
    background: lightcyan;
}
#tbl-user tbody:hover td:hover {
    opacity: 1;
    color: white;
    background: cornflowerblue;
}

#tbl-user .th-id,
#tbl-user .td-id {
    width: 50px;
    cursor: pointer;
}
#tbl-user .th-name,
#tbl-user .td-name {
    width: 100px;
    max-width: 100px;
}
#tbl-user .th-kana,
#tbl-user .td-kana {
    width: 130px;
    max-width: 130px;
    cursor: pointer;
}
#tbl-user .th-en,
#tbl-user .td-en {
    width: 150px;
    max-width: 150px;
}
#tbl-user .th-gender,
#tbl-user .td-gender {
    width: 30px;
}
#tbl-user .th-lv,
#tbl-user .td-lv {
    width: 20px;
}
#tbl-user .td-lv {
    text-align: right;
}
#tbl-user .th-birth,
#tbl-user .td-birth {
    width: 100px;
    cursor: pointer;
}
#tbl-user .th-tel,
#tbl-user .td-tel {
    width: 120px;
}
#tbl-user .th-mail,
#tbl-user .td-mail {
    width: 150px;
    max-width: 150px;
}
#tbl-user .th-post,
#tbl-user .td-post {
    width: 80px;
}
#tbl-user .th-address,
#tbl-user .td-address {
    width: 250px;
    max-width: 250px;
}
#tbl-user .th-kind,
#tbl-user .td-kind {
    width: 80px;
}
#tbl-user .th-school,
#tbl-user .td-school,
#tbl-user .th-year,
#tbl-user .td-year {
    width: 45px;
}
#tbl-user .th-base,
#tbl-user .th-dormitory,
#tbl-user .th-wage {
    width: 50px;
}
#tbl-user .th-meal,
#tbl-user .td-meal {
    width: 80px;
}
#tbl-user .th-car,
#tbl-user .td-car {
    width: 100px;
    max-width: 100px;
}
#tbl-user .th-bank-cd,
#tbl-user .td-bank-cd {
    width: 45px;
}
#tbl-user .th-bank,
#tbl-user .td-bank {
    width: 100px;
    max-width: 100px;
}
#tbl-user .th-branch-cd,
#tbl-user .td-branch-cd {
    width: 45px;
}
#tbl-user .th-branch,
#tbl-user .td-branch {
    width: 100px;
    max-width: 100px;
}
#tbl-user .th-account,
#tbl-user .td-account {
    width: 70px;
}
#tbl-user .th-holder,
#tbl-user .td-holder {
    width: 100px;
}
#tbl-user .th-jsba,
#tbl-user .td-jsba {
    width: 150px;
    max-width: 150px;
}

#tbl-user .th-my-number,
#tbl-user .td-my-number {
    width: 100px;
    max-width: 100px;
}

#tbl-user .td-base,
#tbl-user .td-dormitory,
#tbl-user .td-wage {
    text-align: right;
    width: 45px;
    padding-right: 5px;
}


/*----------------------------------------------------
 打刻確認画面
----------------------------------------------------*/
.tbl-check {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
/*     width: 640px; */
}
.tbl-check thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: orange;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-check tbody {
    height: 350px;
}
.tbl-check tbody tr {
    height: 40px;
}
.tbl-check tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-check tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

.tbl-check .col-name {
    width: 80px;
}
.tbl-check .col-status {
    width: 60px;
}
.tbl-check .col-lesson {
    width: 85px;
}
.tbl-check .col-hours {
    width: 80px;
}
.tbl-check .col-remarks {
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-check .col-check {
    width: 41px;
    text-align: center;
}
.tbl-check .col-day {
    width: 40px;
}
.tbl-check .col-job {
    width: 100px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-check .col-time {
    width: 60px;
    text-align: center;
}
.tbl-check .col-point {
    width: 40px;
    padding-right: 5px;
    text-align: right;
}
.tbl-check .col-button {
    width: 60px;
    text-align: center;
}


/*----------------------------------------------------
 スタッフオーダー画面
----------------------------------------------------*/
#order-mode:after {
    content: "";
    display: block;
    clear: both;
}
#order-mode ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#order-mode ul li{
    float: left;
    width: 100px;
    margin: 10px;
    padding: 0;
}
#order-mode ul li a {
    text-align: center;
    display: block;
    padding: 5px 0;
    width: 100%;
    font-size: 10px;
    background: gainsboro;
    color: dimgray;
    border-radius: 5px;
}
#order-mode ul li a:hover {
    background-color: tomato;
    color: white;
}
#order-mode .select-mode {
    background-color: limegreen;
    color: white;
}

#tbl-order {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    table-layout: fixed;
}
#tbl-order thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: lightgray;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
#tbl-order tbody {
    height: 350px;
}
#tbl-order tbody tr {
    height: 30px;
}
#tbl-order tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

#tbl-order .col-no {
    width: 25px;
    min-width: 25px;
    text-align: right;
}
#tbl-order .col-check {
    width: 40px;
}
#tbl-order .col-ymd {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}
#tbl-order .col-cd {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
}
#tbl-order .col-name {
    width: 85px;
    min-width: 85px;
    max-width: 85px;
}
#tbl-order .col-maker {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
}
#tbl-order .col-maker div {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tbl-order .col-item-cd {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}
#tbl-order .col-item-cd div {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tbl-order .col-item-name {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}
#tbl-order .col-item-name div {
    width: 160px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tbl-order .col-color {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}
#tbl-order .col-color div {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tbl-order .col-size {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
#tbl-order .col-size div {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tbl-order .col-price {
    width: 65px;
    min-width: 65px;
    max-width: 65px;
}
#tbl-order .col-qty {
    width: 40px;
}
#tbl-order .col-remarks {
/*     width: 430px; */
}
#tbl-order .col-remarks div {
/*     width: 430px; */
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tbl-order .col-button {
    text-align: center;
    width: 50px;
}

#tbl-order .txt-name {
    width: 130px;
}
#tbl-order .txt-color {
    width: 95px;
}
#tbl-order .txt-size {
    width: 45px;
}
#tbl-order .txt-price {
    width: 50px;
    text-align: right;
}
#tbl-order .txt-qty {
    width: 30px;
    text-align: right;
}
#tbl-order .txt-remarks {
    margin: 0;
    width: 430px;
}


/*----------------------------------------------------
 オーダー入力画面
----------------------------------------------------*/
.tbl-order-history {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
.tbl-order-history thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: orange;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-order-history tbody {
    height: 250px;
}
.tbl-order-history tbody tr {
    height: 40px;
}
.tbl-order-history tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-order-history tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

.tbl-order-history .col-date {
    width: 40px;
}
.tbl-order-history .col-maker,
                   .col-code,
                   .col-name,
                   .col-color,
                   .col-size {
    width: 100px;
    max-width: 100px;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-order-history .col-price {
    width: 60px;
    padding-right: 5px;
    text-align: right;
}
.tbl-order-history .col-qty {
    width: 40px;
    padding-right: 5px;
    text-align: right;
}
.tbl-order-history .col-remarks {
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#order-input p .order-item {
    display: block;
    float: left;
    width: 120px;
}

#order-input p .cls-price {
    width: 60px;
    text-align: right;
}
#order-input p .cls-qty {
    width: 30px;
    text-align: right;
}
#order-input p .cls-remarks {
    height: 60px;
    width: 300px;
}


/*----------------------------------------------------
 メーカー管理画面
----------------------------------------------------*/
.tbl-maker {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
.tbl-maker thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: goldenrod;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-maker tbody {
    height: 350px;
}
.tbl-maker tbody tr {
    height: 40px;
}
.tbl-maker tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-maker tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-maker tbody td input[type="number"] {
    width: 35px;
    text-align: right;
}

.tbl-maker .th-check,
.tbl-maker .td-check {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-maker .th-no,
.tbl-maker .td-no {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.tbl-maker .th-name,
.tbl-maker .td-name {
    width: 150px;
    max-width: 150px;
}
.tbl-maker .th-rate,
.tbl-maker .td-rate {
    width: 80px;
    max-width: 80px;
    text-align: center;
}


/*----------------------------------------------------
 勤務先管理画面
----------------------------------------------------*/
#tbl-job {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
#tbl-job thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: goldenrod;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
#tbl-job tbody {
    height: 350px;
}
#tbl-job tbody tr {
    height: 40px;
}
#tbl-job tbody tr:nth-child(even) {
    background-color: papayawhip;
}
#tbl-job tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
    cursor: pointer;
}

#tbl-job .th-no,
#tbl-job .td-no {
    width: 30px;
    max-width: 30px;
    text-align: center;
}
#tbl-job .th-group,
#tbl-job .td-group,
#tbl-job .th-time,
#tbl-job .td-time,
#tbl-job .th-onoff,
#tbl-job .td-onoff {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
#tbl-job .th-name,
#tbl-job .td-name {
    width: 150px;
    max-width: 150px;
}


/*----------------------------------------------------
 メッセージ画面
----------------------------------------------------*/
.tbl-message {
    width: 680px;
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    table-layout: fixed;
}
.tbl-message thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: lightgray;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-message tbody {
    height: 260px;
}
.tbl-message tbody tr {
    height: 30px;
}
.tbl-message tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

.tbl-message .col-limit {
    width: 120px;
}
.tbl-message .col-message {
    width: 500px;
}
.tbl-message .col-button {
    text-align: center;
    width: 55px;
}

#message-input .txt-limit {
    width: 80px;
}
#message-input .txt-message {
    width: 500px;
}


/*----------------------------------------------------
 #point ポイント表示画面
----------------------------------------------------*/
.tbl-point-list {
    margin-top: 10px;
    margin-bottom: 10px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    width: 320px;
}
.tbl-point-list thead {
    background-color: goldenrod;
}
.tbl-point-list thead th {
    height: 30px;
    color: white;
}
.tbl-point-list tbody {
    height: 280px;
}

.col-rank {
    padding-left: 5px;
    text-align: right;
    width: 30px;
}
.col-rank-name {
    padding-left: 5px;
    width: 130px;
}
.col-type {
    width: 100px;
}
.col-count {
    padding-right: 10px;
    text-align: right;
    width: 40px;
}
.tbl-point-list td.td-top {
    background-image: url("../img/star.gif");
    background-repeat: no-repeat;
    background-position: 10px center;
}


/*----------------------------------------------------
 #duty 勤務報告画面
----------------------------------------------------*/
.tbl-duty {
    margin-top: 10px;
    margin-bottom: 10px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    width: 520px;
}
.tbl-duty tr {
    height: 30px;
}
.tbl-duty thead {
    background-color: goldenrod;
}

.tbl-duty .td-name {
    padding-left: 10px;
}
.tbl-duty .td-point {
    text-align: right;
    padding-right: 10px;
}
.tbl-duty .td-remarks {
    padding-left: 5px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#duty-input {
    position: fixed;
    top: 10%;
    z-index: 10;
    width: 460px;
    height: 520px;
    margin: 0 auto;
    border-radius: 3px;
    color: white;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
.duty-input-area {
    clear: both;
    margin: 20px 15px;
}
.duty-input-area p {
    padding-left: 30px;
}
.duty-input-area p .spn-ymd,
.duty-input-area p .spn-name,
.duty-input-area p .spn-job {
    margin-left: 10px;
}
.duty-input-area p .txt-name {
    margin-left: 10px;
    width: 150px;
}
.duty-input-area p .txt-tel {
    margin-left: 10px;
    width: 150px;
}
.duty-input-area p .txt-mail {
    width: 250px;
}
.duty-input-area p .txt-number {
    width: 50px;
    text-align: right;
}
.duty-input-area p .txt-remarks {
    width: 350px;
    margin-bottom: 10px;
}
.duty-input-area p .txt-reason {
    width: 350px;
    margin-bottom: 10px;
}


/*----------------------------------------------------
 #school スクール情報更新画面
----------------------------------------------------*/
#school-input {
    padding: 0, 20px;
    margin-bottom: 30px;
}
#school-input .input-window {
    overflow-y: scroll;
    width: 680px;
    height: 360px;
    color: white;
    background-color: goldenrod;
    border: 1px lightgray solid;
    border-radius: 3px;
    padding-top: 20px;
    margin: 10px;
}
#school-input ul { list-style: none; }
#school-input ul li {
    margin: 20px 0;
    clear: left;
}
#school-input ul li .lbl-item {
    display: block;
    float: left;
    width: 120px;
}

#school-input ul li #id-address {
    width: 300px;
    overflow: scroll;
}
#school-input ul li #id-tel {
    width: 100px;
}
#school-input ul li #id-mail {
    width: 250px;
}
#school-input ul li #id-url {
    width: 250px;
}
#school-input ul li #id-start {
    width: 80px;
}
#school-input ul li #id-end {
    width: 80px;
}
#school-input ul li #id-lesson-1,
#school-input ul li #id-lesson-2,
#school-input ul li #id-lesson-3,
#school-input ul li #id-lesson-4,
#school-input ul li #id-lesson-5,
#school-input ul li #id-time-1,
#school-input ul li #id-time-2,
#school-input ul li #id-time-3,
#school-input ul li #id-time-4,
#school-input ul li #id-time-5 {
    width: 100px;
}
#school-input ul li #id-footer {
    width: 420px;
    height: 20em;
    line-height: 1.5em;
}


/*----------------------------------------------------
 #invoice 請求書発行画面
----------------------------------------------------*/
#invoice-conditions:after {
    content: "";
    display: block;
    clear: both;
}
#invoice-conditions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#invoice-conditions ul li {
    float: left;
    margin: 10px;
    padding: 0;
}

.invoice-check input[type="checkbox"] {
    display: none;
}
.invoice-check input[type="checkbox"]:checked + label {
    color: white;
    background-color: limegreen;
}
.invoice-check label.condition {
    display: block;
    width: 50px;
    margin: 3px;
    padding: 8px;
    background: gainsboro;
    color: dimgray;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 3px;
}
.invoice-check label.input {
    width: 50px;
    margin: 3px;
    padding: 8px;
    background: dimgray;
    color: snow;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 3px;
}

#invoice-input {
    top: 10%;
    height: 440px;
    width: 500px;
    color: white;
    padding-left: 15px;
    background-color: saddlebrown;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
#invoice-input .input-window {
    overflow-y: scroll;
    width: 95%;
    height: 280px;
    background-color: chocolate;
    border: 1px lightgray solid;
    border-radius: 3px;
    margin: 50px 0 20px;
}
#invoice-input ul { list-style: none; }
#invoice-input ul li {
    margin: 20px 0;
    clear: left;
}
#invoice-input ul li .invoice-item {
    display: block;
    float: left;
    width: 120px;
}

#invoice-input ul li #id-ymd {
    width: 100px;
}
#invoice-input ul li #id-title {
    width: 250px;
}
#invoice-input ul li #id-name {
    width: 160px;
}
#invoice-input ul li #id-prefix {
    width: 60px;
}
#invoice-input ul li #id-deadline {
    width: 100px;
}
#invoice-input ul li #id-paymentday {
    width: 100px;
}

#invoice-input ul li .txt-item {
    width: 250px;
}
#invoice-input ul li .txt-qty {
    width: 30px;
    text-align: right;
}
#invoice-input ul li .txt-price {
    width: 80px;
    text-align: right;
}
#invoice-input ul li #id-rate {
    width: 30px;
    text-align: right;
}

#invoice-input .lbl-price {
    display: inline-block;
    width: 80px;
    text-align: right;
}

.tbl-invoice {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
/*     width: 640px; */
}
.tbl-invoice thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: steelblue;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-invoice tbody {
    height: 350px;
}
.tbl-invoice tbody tr {
    height: 40px;
}
.tbl-invoice tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-invoice tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
/*     text-align: right; */
}

.tbl-invoice .th-check,
.tbl-invoice .td-check {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-invoice .th-ymd,
.tbl-invoice .td-ymd {
    width: 80px;
    max-width: 80px;
    text-align: center;
}
.tbl-invoice .th-id,
.tbl-invoice .td-id {
    width: 120px;
    max-width: 120px;
    text-align: center;
}
.tbl-invoice .th-status,
.tbl-invoice .td-status {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.tbl-invoice .th-title,
.tbl-invoice .td-title {
    width: 200px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tbl-invoice .th-name,
.tbl-invoice .td-name {
    width: 100px;
    max-width: 100px;
}
.tbl-invoice .th-total,
.tbl-invoice .td-total {
    width: 80px;
    max-width: 80px;
}
.tbl-invoice .td-total {
    text-align: right;
}
.tbl-invoice .th-button,
.tbl-invoice .td-button {
    width: 60px;
    max-width: 60px;
    text-align: center;
}


/*----------------------------------------------------
 #wage 時給管理画面
----------------------------------------------------*/
.tbl-wage {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
/*     width: 640px; */
}
.tbl-wage thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: goldenrod;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-wage tbody {
    height: 350px;
}
.tbl-wage tbody tr {
    height: 40px;
}
.tbl-wage tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-wage tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-wage tbody td input[type="text"] {
    width: 60px;
    text-align: right;
}

.tbl-wage .th-radio,
.tbl-wage .td-radio {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-wage .th-grp,
.tbl-wage .td-grp {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.tbl-wage .th-name,
.tbl-wage .td-name {
    width: 150px;
    max-width: 150px;
}
.tbl-wage .th-amount,
.tbl-wage .td-amount {
    width: 80px;
    max-width: 80px;
    text-align: center;
}
.tbl-wage .th-button,
.tbl-wage .td-button {
    width: 60px;
    max-width: 60px;
    text-align: center;
}


/*----------------------------------------------------
 #select スクール別レッスン設定画面
----------------------------------------------------*/
.tbl-select {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
/*     width: 640px; */
}
.tbl-select thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: goldenrod;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-select tbody {
    height: 350px;
}
.tbl-select tbody tr {
    height: 40px;
}
.tbl-select tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-select tbody td input[type="text"] {
    width: 60px;
    text-align: right;
}

.tbl-select .th-no,
.tbl-select .td-no {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.tbl-select .th-name,
.tbl-select .td-name {
    width: 200px;
    max-width: 200px;
}
.tbl-select .th-amount,
.tbl-select .td-amount {
    width: 80px;
    max-width: 80px;
    text-align: center;
}
.tbl-select .th-button,
.tbl-select .td-button {
    width: 60px;
    max-width: 60px;
    text-align: center;
}


/*----------------------------------------------------
 #deduction 源泉区分・控除 設定画面
----------------------------------------------------*/
.tbl-deduction {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
/*     width: 640px; */
}
.tbl-deduction thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: goldenrod;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-deduction tbody {
    height: 350px;
}
.tbl-deduction tbody tr {
    height: 40px;
}
.tbl-deduction tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-deduction tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}
.tbl-deduction tbody td input[type="number"] {
    width: 20px;
    text-align: right;
}
.tbl-deduction tbody td input[type="text"] {
    width: 60px;
}


.tbl-deduction .th-name,
.tbl-deduction .td-name {
    width: 150px;
    max-width: 150px;
}
.tbl-deduction .th-grp,
.tbl-deduction .td-grp {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.tbl-deduction .th-division,
.tbl-deduction .td-division {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-deduction .th-person,
.tbl-deduction .td-person {
    width: 60px;
    max-width: 60px;
    text-align: center;
}
.tbl-deduction .th-area,
.tbl-deduction .td-area {
    width: 80px;
    max-width: 80px;
    text-align: center;
}
.tbl-deduction .th-check,
.tbl-deduction .td-check {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-deduction .th-button,
.tbl-deduction .td-button {
    width: 60px;
    max-width: 60px;
    text-align: center;
}


/*----------------------------------------------------
 #apply 打刻申請画面
----------------------------------------------------*/
.tbl-apply {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
.tbl-apply thead th {
    height: 30px;
    font-size: 10px;
    border-width: 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-apply tbody tr {
    height: 40px;
}
.tbl-apply tbody tr:nth-child(odd) {
    background-color: papayawhip;
}
.tbl-apply tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

.tbl-apply thead th.th-kind,
.tbl-apply tbody td.td-kind,
.tbl-apply thead th.th-day,
.tbl-apply tbody td.td-day {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-apply thead th.th-hour,
.tbl-apply tbody td.td-hour,
.tbl-apply thead th.th-id,
.tbl-apply tbody td.td-id,
.tbl-apply thead th.th-time,
.tbl-apply tbody td.td-time,
.tbl-apply thead th.th-pay,
.tbl-apply tbody td.td-pay {
    width: 60px;
    max-width: 60px;
}
.tbl-apply thead th.th-name,
.tbl-apply tbody td.td-name,
.tbl-apply thead th.th-job,
.tbl-apply tbody td.td-job {
    width: 100px;
    max-width: 100px;
}
.tbl-apply thead th.th-remarks,
.tbl-apply tbody td.td-remarks {
    width: 150px;
    max-width: 150px;
}

.tbl-apply tbody td.td-hour,
.tbl-apply tbody td.td-id {
    text-align: center;
}
.tbl-apply tbody td.td-time,
.tbl-apply tbody td.td-pay {
	padding-right: 5px;
    text-align: right;
}
.tbl-apply tbody td.td-remarks {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}


/*----------------------------------------------------
 #approval 打刻申請承認画面
----------------------------------------------------*/
#approval-conditions:after {
    content: "";
    display: block;
    clear: both;
}
#approval-conditions ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#approval-conditions ul li {
    float: left;
    margin: 10px;
    padding: 0;
}

.approval-check input[type="checkbox"] {
    display: none;
}
.approval-check input[type="checkbox"]:checked + label {
    color: white;
    background-color: limegreen;
}
.approval-check label.condition {
    display: block;
    width: 50px;
    margin: 3px;
    padding: 8px;
    background: gainsboro;
    color: dimgray;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 3px;
}
.approval-check label.input {
    width: 50px;
    margin: 3px;
    padding: 8px;
    background: dimgray;
    color: snow;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 3px;
}

.tbl-approval {
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
}
.tbl-approval thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: steelblue;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
.tbl-approval tbody {
    height: 350px;
}
.tbl-approval tbody tr {
    height: 40px;
}
.tbl-approval tbody tr:nth-child(even) {
    background-color: papayawhip;
}
.tbl-approval tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

.tbl-approval thead th.th-check,
.tbl-approval tbody td.td-check,
.tbl-approval thead th.th-kind,
.tbl-approval tbody td.td-kind,
.tbl-approval thead th.th-day,
.tbl-approval tbody td.td-day {
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.tbl-approval thead th.th-job,
.tbl-approval tbody td.td-job,
.tbl-approval thead th.th-hour,
.tbl-approval tbody td.td-hour,
.tbl-approval thead th.th-id,
.tbl-approval tbody td.td-id,
.tbl-approval thead th.th-time,
.tbl-approval thead th.th-pay,
.tbl-approval thead th.th-button,
.tbl-approval tbody td.td-button {
    width: 60px;
    max-width: 60px;
}
.tbl-approval thead th.th-name,
.tbl-approval tbody td.td-name,
.tbl-approval thead th.th-remarks,
.tbl-approval tbody td.td-remarks {
    width: 100px;
    max-width: 100px;
}

.tbl-approval tbody td.td-hour,
.tbl-approval tbody td.td-id,
.tbl-approval tbody td.td-button {
    text-align: center;
}
.tbl-approval tbody td.td-time,
.tbl-approval tbody td.td-pay {
    width: 56px;
    max-width: 56px;
	padding-right: 5px;
    text-align: right;
}
.tbl-approval tbody td.td-job,
.tbl-approval tbody td.td-remarks {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}


/*----------------------------------------------------
 .tab-switch
----------------------------------------------------*/
#tab-switch {
    height: 420px;
}
.tabs {
    position: relative;
    padding: 0;
}
.tabs li {
    list-style: none;
    display: inline-block;
}
.tabs input[type=radio] {
    display: none;
}
.tabs label {
    display: block;
    cursor: pointer;
    padding: 5px;
    line-height: 20px;
    background-color: darkgray;
    color: white;
    border: 1px dimgray solid;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}
.tabs input[type="radio"]:checked + label {
    color: limegreen;
    background-color: white;
}
.tabs .contents {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    padding: 10px;
    width: 320px;
    background: white;
    border: 1px dimgray solid;
}
.tabs input[type="radio"]:checked + label + .contents{
    display: block;
}

/*----------------------------------------------------
 .onoff-switch
----------------------------------------------------*/
.onoff-switch input {
    display: none;
}
.onoff-switch label{
    display: block;
    float: left;
    height: 20px;
    width: 40px;
    margin: 5px;
    padding: 10px 5px;
    background: gainsboro;
    color: dimgray;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 10px;
}
.onoff-switch input[type="radio"]:checked + label.switch-on {
    color: white;
    background-color: limegreen;
}
.onoff-switch input[type="radio"]:checked + label.switch-off {
    color: white;
    background-color: tomato;
}

/*----------------------------------------------------
 .select-switch
----------------------------------------------------*/
.select-switch input[type="checkbox"] {
    display: none;
}
.select-switch input[type="radio"] {
    display: none;
}
.select-switch label{
    display: block;
    float: left;
    height: 20px;
    width: 40px;
    margin: 5px;
    padding: 10px 5px;
    background: gainsboro;
    color: dimgray;
    font-size: 9px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 10px;
}
.select-switch label:last-of-type:after {
    content: "";
    display: block;
    clear: both;
}
.select-switch input[type="checkbox"]:checked + label {
    color: white;
    background-color: limegreen;
}
.select-switch input[type="radio"]:checked + label {
    color: white;
    background-color: limegreen;
}
.select-switch button[type="submit"] {
    clear: both;
/*     margin: 60px 0 0 0; */
}

.max-two label:nth-child(odd) {
    clear: both;
}

/*----------------------------------------------------
 .check-switch
----------------------------------------------------*/
.check-switch input[type="checkbox"] {
    display: none;
}
.check-switch input[type="radio"] {
    display: none;
}
.check-switch label{
    display: block;
    width: 15px;
    margin: 3px;
    padding: 8px;
    background: gainsboro;
    color: dimgray;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    transition: .2s;
    border-radius: 3px;
}
.check-switch input[type="checkbox"]:checked + label {
    color: white;
    background-color: limegreen;
}
.check-switch input[type="checkbox"]:checked + label.check-off {
    color: white;
    background-color: tomato;
}

.check-switch input[type="radio"]:checked + label {
    color: white;
    background-color: limegreen;
}

/*----------------------------------------------------
 #datepicker
----------------------------------------------------*/
#datepicker {
    font-size: 15px;
}
.date-sunday .ui-state-default {
    color: tomato;
}
.date-saturday .ui-state-default {
    color: skyblue;
}
.date-holiday .ui-state-default {
    /* color: crimson; */
    color: salmon;
}

/*----------------------------------------------------
 #printarea
----------------------------------------------------*/
.print-container {
    width: 750px;
    overflow: hidden;
    page-break-inside: avoid;
}
/* clearfix */
.print-container:before,
.print-container:after {
    content: "";
    display: table;
}
.print-container:after {
    clear: both;
}

#printarea {
    margin: 10px;
    float: left;
}
#printarea table {
    font-size: 13px;
    border-collapse: separate;
    border-spacing: 5px 10px;
    border: 1px ridge gray;
    margin: 5px;
    vartical-align: middle;
    width: 220px;
}
#printarea th {
    text-align: right;
}
#printarea td {
    border: 1px ridge gray;
    height: 20px;
}

/*----------------------------------------------------
 #id_manual
----------------------------------------------------*/
#id_manual li {
    color: white;
    background: goldenrod;
    line-height: 3em;
    margin: 5px 2%;
    padding: 10;
    text-indent: 5%;
    width: 85%;
}
#id_manual li:before {
    content: none;
}
#id_manual li:hover{
    background: gray;
}
#id_manual li a {
    display: block;
}


/*----------------------------------------------------
 非常勤スタッフ前回レッスン表示画面
.tbl-previous-list {
    margin-top: 10px;
    margin-bottom: 10px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    width: 580px;
}
.tbl-previous-list thead {
    background-color: goldenrod;
}
.tbl-previous-list thead th {
    height: 25px;
    color: white;
    text-align: left;
    padding-left: 5px;
}
.tbl-previous-list tbody {
    height: 300px;
}

.tbl-previous-list .col-name {
    padding-left: 5px;
    width: 160px;
}
.tbl-previous-list .col-day {
    padding-left: 5px;
    width: 80px;
}
.tbl-previous-list .col-lesson {
    padding-left: 5px;
    width: 160px;
}
.tbl-previous-list .col-duty {
    padding-left: 5px;
    width: 180px;
}
.tbl-previous-list .col-empty {
    padding-left: 5px;
    width: 420px;
}
----------------------------------------------------*/

/*----------------------------------------------------
 #zipline
#zipline {
    font-size: 13px;
}
#zipline .lbl2 {
    font-weight: bold;
    color: red;
}
#zipline .lbl3 {
    font-weight: bold;
    color: silver;
}
#zipline .lbl1 {
    font-weight: bold;
    color: limegreen;
}

#zipline h3 {
    font-size: 12px;
}
#zipline input[type="text"] {
    font-size: 12px;
    width: 30px;
}
#zipline textarea {
    font-size: 12px;
    width: 250px;
}

#zipline-input {
    position: fixed;
    top: 10%;
    z-index: 10;
    width: 500px;
    height: 520px;
    margin: 0 auto;
    border-radius: 3px;
    color: white;
    background-color: green;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
}
.zipline-input-area {
    clear: both;
    margin: 20px 15px;
}
.zipline-input-area p {
    padding-left: 30px;
}
.zipline-input-area p .txt-name {
    margin-left: 10px;
    width: 150px;
}
.zipline-input-area p .txt-tel {
    margin-left: 10px;
    width: 150px;
}
.zipline-input-area p .txt-mail {
    width: 250px;
}
.zipline-input-area p .txt-number {
    width: 50px;
}
.zipline-input-area p .txt-remarks {
    width: 350px;
    margin-bottom: 10px;
}
----------------------------------------------------*/

/*----------------------------------------------------
 #zipline table
#zipline table.tbl-calendar {
    font-size: 15px;
    border-collapse: separate;
    border-spacing: 5px 10px;
    border: 1px ridge gray;
}
#zipline #tbl-check {
    border-spacing: 0px 0px 10px 0px;
}
#zipline #tbl-check tr {
    height: 30px;
}
#zipline #tbl-check th {
    text-align: left;
}
#zipline #tbl-check #on label {
    background-color: limegreen;
    padding: 5px 20px;
}
#zipline #tbl-check #on label:hover {
    background-color: greenyellow;
    cursor: default;
}
#zipline #tbl-check #on input[type="radio"] {
    display: none;
}
#zipline #tbl-check #on input[type="radio"]:checked + label {
    color: white;
    background-color: greenyellow;
}
#zipline #tbl-check #off {
    padding: 5px;
    height: 20px;
    color: white;
    background-color: gray;
}

#zipline #tbl-all {
    border-spacing: 0px 10px;
}
#zipline #tbl-all thead {
    background-color: orange;
}
#zipline #tbl-all thead .th-day {
    width: 55px;
}
#zipline #tbl-all thead .th-time {
    width: 80px;
}
#zipline #tbl-all thead .th-name {
    width: 260px;
}
#zipline #tbl-all tbody {
    overflow: auto;
    overflow-x: hidden;
    height: 200px;
}
#zipline #tbl-all td {
    padding-left: 10px;
}
#zipline #tbl-all tbody tr:nth-child(even) {
    background-color: honeydew;
}

#zipline .td-font12 {
    font-size: 12px;
}
#zipline .td-small {
    font-size: 11px;
}
#zipline .td-name {
    width: 260px;
    font-size: 11px;
}
#zipline .td-remarks {
    height: 40px;
    width: 200px;
    vertical-align: top;
    font-size: 11px;
}

#zipline .tbl-point {
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border-spacing: 0px;
    border: 1px dimgray solid;
    width: 560px;
}
#zipline .tbl-point thead th {
    height: 30px;
    font-size: 10px;
    color: white;
    background-color: orange;
    border-color: white;
    border-width: 0 0.5px;
    border-style: solid;
    text-align: center;
}
#zipline .tbl-point tbody {
    height: 350px;
}
#zipline .tbl-point tbody tr {
    height: 40px;
}
#zipline .tbl-point tbody td {
    border-color: darkgray;
    border-width: 0 0.5px;
    border-style: solid;
}

#zipline .tbl-point .col-name {
    width: 140px;
}
#zipline .tbl-point .col-remarks {
    width: 200px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#zipline .tbl-point .col-time {
    width: 70px;
    text-align: center;
}
#zipline .tbl-point .col-point {
    width: 65px;
}
#zipline .tbl-point .col-button {
    width: 50px;
    text-align: center;
}

----------------------------------------------------*/

/*----------------------------------------------------
 #zipline link
#zipline a.widelink {
    font-weight: bold;
    display: block;
    width: 100%;
    text-decoration: none;
}
#zipline a.widelink:hover {
    background-color: orangered;
}

----------------------------------------------------*/

/*----------------------------------------------------
 #zipline mail
#zipline .mail_area select {
    height: 150px;
}
#zipline .mail_area textarea {
    width: 460px;
    rows: "30";
}
#zipline .mail_area input[type="text"] {
    width: 250px;
}
----------------------------------------------------*/