body {
    margin: 20px 30px 40px 30px;
    font-size: 14px;
    overflow-x: hidden;
}

.panel-header,
.panel-navigator,
.panel-main,
.panel-body,
.panel-foot,
.ui-datepicker {
    font-size: 14px;
}

.panel-header,
.panel-foot {
    width: 100%;
    height: 100px;
    color: #aaa;
    border: 1px solid #ddd;
    text-align: center;
    margin: 20px 0;
    padding: 1rem 2rem;
}

.ui-datepicker {
    z-index: 9999;
}

table {
    table-layout: fixed;
}

.dataTables_info {
    margin-top: 20px;
}

colgroup > col {
    width: auto;
}


th, td {
    font-weight: normal;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: middle !important;
    word-break: break-all;
}

    th:first-child, td:first-child {
        border-left: 1px solid #ddd;
    }

    th:last-child, td:last-child {
        border-right: 1px solid #ddd;
    }

    td > div {
        margin-top: 7px;
        margin-bottom: 7px;
    }

label {
    font-weight: normal;
    margin-right: 5px;
}

span.narrow-space {
    padding: 0 4px;
    display: inline;
}

span.wide-space {
    padding: 0 20px;
    display: inline;
}

span.require:before {
    color: #ff0000;
    content: "\00a0*";
}

span.color-red {
    color: #ff0000;
}

.glyphicon-lock:before {
    content: "\1f512";
}

.sort-icon {
    display: inline-block;
    cursor: pointer;
}

.sort-icon-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #333;
    margin-bottom: 2px;
}

.sort-icon-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #333;
    margin-top: 2px;
}

img.img-icon {
    height: 1.4em;
    margin-right: 10px;
}

.panel-navigator > #btn_hamburger_check {
    display: none;
}

.nav > li > a {
    color: #333;
}

.page-head {
    border-left: 5px solid #ffc000;
    padding-left: 8px;
    line-height: 1.7;
}

.page-head.goods-head {
    border-left: 5px solid #e6fdc5;
}

.page-head.truck-head {
    border-left: 5px solid #ffcc99;
}

.page-head.admin-head {
    border-left: 5px solid #c2d8ff;
}

.content-head {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.2em;
}

    .content-head::before {
        position: absolute;
        top: 0.3em;
        left: 0;
        display: block;
        width: 0.8em;
        height: 0.8em;
        background: #333;
        content: "";
    }

.ml-10px {
    margin-left: 10px;
}

.height-150 {
    height: 150px;
}

.width-60 {
    width: 60px;
}

.width-70 {
    width: 70px;
}

.width-80 {
    width: 80px;
}

.width-100 {
    width: 100px;
}

.width-110 {
    width: 110px !important;
}

.width-130 {
    width: 100%;
    max-width: 130px;
}

.width-150 {
    width: 150px;
}

.width-180 {
    width: 100%;
    max-width: 180px;
}

.width-200 {
    width: 200px;
}

.width-250 {
    width: 250px;
}

.width-300 {
    width: 300px;
}

.width-350 {
    width: 350px;
}

.width-400 {
    width: 100%;
    max-width: 400px;
}

.width-600 {
    width: 600px;
}

.width-datetime {
    width: 100%;
    max-width: 347px;
}

.width-inline {
    max-width: calc(100% - 50px);
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-right-50 {
    margin-right: 50px;
}


.ver-top {
    vertical-align: top !important;
}

.container {
    text-align: center;
}

.container-login > div {
    text-align: center;
    margin-top: 40px;
}

.container-menu > div {
    margin-top: 5px;
}

.container-button {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .container-button > div {
        margin-bottom: 10px;
    }

    .container-button > .flex-box {
        display: flex;
    }

.flex-box.flex-center {
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.flex-box.flex-end {
    -webkit-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
}

.info-message {
    margin-bottom: 10px;
}

.input-table,
.output-table {
    margin-top: 5px;
}

.empty-truck-table td > div.other > span {
    margin-right: 10px;
}

.input-table > table th,
.output-table > table th,
.dataTables_scrollHeadInner > table th {
    text-align: center;
}

.input-table > .luggage-table th,
.input-table > .empty-truck-sub-table th,
.output-table > .luggage-table th {
    background-color: #e6fdc5;
}

.input-table > .luggage-sub-table th,
.input-table > .empty-truck-table th,
.output-table > .empty-truck-table th {
    background-color: #ffcc99;
}

.input-table > .group-table th,
.output-table > .group-table th,
.input-table > .user-table th,
.output-table > .user-table th,
.input-table > .vendor-table th,
.output-table > .vendor-table th {
    background-color: #c2d8ff;
}

.result-table {
    position: relative;
    min-height: 60px;
}

.result-modal-table {
    position: relative;
    min-height: 60px;
}

/* jquery datatable body start */
.dataTables_scrollBody {
    background: #f1f1f1;
}

    .dataTables_scrollBody .table {
        margin-bottom: 1px;
    }

.dataTables_wrapper {
    position: absolute;
    width: 100%;
}

.dataTables_scrollHeadInner > table,
.dataTables_scrollHeadInner > table {
    margin-bottom: 0;
}

    .dataTables_scrollHeadInner > table th,
    .dataTables_scrollBody > table td {
        border: 1px solid #ddd;
    }

    .dataTables_scrollHeadInner > table th {
        background-color: #f2f2f2;
    }

    .dataTables_scrollHeadInner > table td a {
        text-decoration: underline;
    }

.dataTables_scrollBody > .luggage-table tr:nth-child(odd) td {
    background-color: #e6fdc5;
}

.dataTables_scrollBody > .luggage-table tr:nth-child(even) td {
    background-color: #faffe3;
}

.dataTables_scrollBody > .empty-truck-table tr:nth-child(odd) td {
    background-color: #ffcc99;
}

.dataTables_scrollBody > .empty-truck-table tr:nth-child(even) td {
    background-color: #fdeada;
}

.dataTables_scrollBody > .group-table tr:nth-child(odd) td,
.dataTables_scrollBody > .user-table tr:nth-child(odd) td,
.dataTables_scrollBody > .vendor-table tr:nth-child(odd) td {
    background-color: #c2d8ff;
}

.dataTables_scrollBody > .group-table tr:nth-child(even) td,
.dataTables_scrollBody > .user-table tr:nth-child(even) td,
.dataTables_scrollBody > .vendor-table tr:nth-child(even) td {
    background-color: #daeaff;
}

.dataTables_scrollBody th.number,
.dataTables_scrollBody th.origin,
.dataTables_scrollBody th.destination,
.dataTables_scrollBody > .group-table th.group-type {
    width: 100px !important;
}

.dataTables_scrollBody th.status {
    width: 60px !important;
}
.dataTables_scrollBody th.weight {
    width: 160px !important;
}

.dataTables_scrollBody th.vendor-name,
.dataTables_scrollBody > .group-table th.group-number {
    width: 180px !important;
}
.dataTables_scrollBody th.license {
    width: 80px !important;
}

.dataTables_scrollBody th.origin-datetime,
.dataTables_scrollBody th.destination-datetime {
    width: 130px !important;
}

.dataTables_scrollBody th.goods-name,
.dataTables_scrollBody > .vendor-table th.vendor-name {
    width: 200px !important;
}

.dataTables_scrollBody th.handling,
.dataTables_scrollBody > .vendor-table th.vendor-tel,
.dataTables_scrollBody > .vendor-table th.vendor-fax {
    width: 120px !important;
}

.dataTables_scrollBody th.urgent,
.dataTables_scrollBody th.bulk {
    width: 50px !important;
}

.dataTables_scrollBody th.fare,
.dataTables_scrollBody th.expressway,
.dataTables_scrollBody > .vendor-table th.vendor-type {
    width: 90px !important;
}

.dataTables_scrollBody th.vehicle-type,
.dataTables_scrollBody th.content-button {
    width: 80px !important;
}

.dataTables_scrollBody > .group-table th.group-name,
.dataTables_scrollBody > .user-table th.user-name,
.dataTables_scrollBody > .user-table th.user-name-kana,
.dataTables_scrollBody > .user-table th.vendor-name,
.dataTables_scrollBody > .user-table th.vendor-code {
    width: 250px !important;
}

.dataTables_scrollBody > .group-table th.explain,
.dataTables_scrollBody > .vendor-table th.vendor-address {
    width: 400px !important;
}

.dataTables_scrollBody > .user-table th.user-id,
.dataTables_scrollBody > .vendor-table th.group-number,
.dataTables_scrollBody > .vendor-table th.vendor-code,
.dataTables_scrollBody > .vendor-table th.vendor-manager {
    width: 150px !important;
}
/* jquery datatable body end */

/* jquery datatable header start */

.dataTables_scrollHeadInner th.number,
.dataTables_scrollHeadInner th.origin,
.dataTables_scrollHeadInner th.destination,
.dataTables_scrollHeadInner > .group-table th.group-type {
    width: 100px !important;
}

.dataTables_scrollHeadInner th.status {
    width: 60px !important;
}

.dataTables_scrollHeadInner th.weight {
    width: 160px !important;
}

.dataTables_scrollHeadInner th.vendor-name,
.dataTables_scrollHeadInner > .group-table th.group-number {
    width: 180px !important;
}
.dataTables_scrollHeadInner th.license {
    width: 80px !important;
}

.dataTables_scrollHeadInner th.origin-datetime,
.dataTables_scrollHeadInner th.destination-datetime {
    width: 130px !important;
}

.dataTables_scrollHeadInner th.goods-name,
.dataTables_scrollHeadInner > .vendor-table th.vendor-name {
    width: 200px !important;
}

.dataTables_scrollHeadInner th.handling,
.dataTables_scrollHeadInner > .vendor-table th.vendor-tel,
.dataTables_scrollHeadInner > .vendor-table th.vendor-fax {
    width: 120px !important;
}

.dataTables_scrollHeadInner th.urgent,
.dataTables_scrollHeadInner th.bulk {
    width: 50px !important;
}

.dataTables_scrollHeadInner th.fare,
.dataTables_scrollHeadInner th.expressway,
.dataTables_scrollHeadInner > .vendor-table th.vendor-type {
    width: 90px !important;
}

.dataTables_scrollHeadInner th.vehicle-type,
.dataTables_scrollHeadInner th.content-button {
    width: 80px !important;
}

.dataTables_scrollHeadInner > .group-table th.group-name,
.dataTables_scrollHeadInner > .user-table th.user-name,
.dataTables_scrollHeadInner > .user-table th.user-name-kana,
.dataTables_scrollHeadInner > .user-table th.vendor-name,
.dataTables_scrollHeadInner > .user-table th.vendor-code {
    width: 250px !important;
}

.dataTables_scrollHeadInner > .group-table th.explain,
.dataTables_scrollHeadInner > .vendor-table th.vendor-address {
    width: 400px !important;
}

.dataTables_scrollHeadInner > .user-table th.user-id,
.dataTables_scrollHeadInner > .vendor-table th.group-number,
.dataTables_scrollHeadInner > .vendor-table th.vendor-code,
.dataTables_scrollHeadInner > .vendor-table th.vendor-manager {
    width: 150px !important;
}
/* jquery datatable header end */

.delete-right-line {
    border-right: none !important;
}

ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.calendar {
    width: 100%;
    max-width: 150px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-calendar {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-top: -2px;
}

.btn-choice-map-small {
    height: 34px;
    vertical-align: bottom;
}

.btn-choice-map-large {
    width: 80px;
    vertical-align: bottom;
}

.meridiem {
    width: 100%;
    max-width: 105px;
    margin-left: 10px;
}

.display-inline,
.display-var-inline {
    display: inline-block;
    vertical-align: bottom;
}

.select-prefectures {
    width: 100px;
}

.form-address,
.display-var-inline {
    vertical-align: bottom;
}

.alert-message-01,
.alert-message-02 {
    font-weight: bold;
    color: #ff0000;
}

.alert-message-02 {
    background-color: #ffff00;
}

textarea.textarea-remarks,
textarea.textarea-explain {
    height: 100px;
}

.caution-message {
    font-weight: bold;
    margin: 20px;
}

    .caution-message > div {
        vertical-align: top;
    }

.btn-submit {
    width: 300px;
}

.radio-value,
.check-value {
    padding-left: 15px;
}

.completed {
    margin-top: 50px;
}

.view-page {
    display: block;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .view-page div.search-result {
        text-align: left;
    }

    .view-page div.pagination {
        display: block;
        text-align: right;
        margin: 0;
    }

        .view-page div.pagination ul {
            list-style: none;
        }

            .view-page div.pagination ul > li {
                text-align: center;
                display: inline-block;
                background-color: #e6fdc5;
                border: 2px solid #92d050;
                border-radius: 4px;
                margin: 0 2px;
                padding: 5px 2px;
            }

                .view-page div.pagination ul > li.current {
                    background-color: #339966;
                }

                .view-page div.pagination ul > li.omit {
                    background-color: transparent;
                    border: none;
                    margin: 0;
                }

                .view-page div.pagination ul > li:not(.omit):hover {
                    background-color: #339966;
                }

                    .view-page div.pagination ul > li:not(.omit):hover > a {
                        color: #fff;
                    }

                .view-page div.pagination ul > li > a,
                .view-page div.pagination ul > li > span {
                    text-decoration: none;
                    color: #333;
                    padding: 8px;
                }

                .view-page div.pagination ul > li.current > span {
                    color: #fff;
                }

                .view-page div.pagination ul > li.prev > a,
                .view-page div.pagination ul > li.next > a {
                    padding: 8px 12px;
                }

.icon-box {
    position: relative;
}

    .icon-box .glyphicon.inside-icon {
        position: absolute;
        top: 8px;
        left: 12px;
        color: #999;
    }

    .icon-box input[type="text"],
    .icon-box input[type="password"] {
        padding-left: 2.5em;
    }

.dataTables_paginate {
    text-align: right;
}

@media screen and (max-width: 767px) {
    .container-login {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media screen and (min-width: 769px) {
    /* PC */
    .view-only-pc {
        display: block;
    }

    .view-only-smartphone {
        display: none !important;
    }

    .panel-navigator {
        display: inline-block;
        width: 200px;
        height: 100%;
        vertical-align: top;
    }

        .panel-navigator > .hamburger > label {
            display: none;
        }

    .panel-main {
        min-height: calc(100vh - 70px);
        border: 1px solid #ddd;
    }

    .nav > li {
        border: 1px solid #ddd;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .panel-main {
        display: inline-block;
        width: calc(100% - 200px);
    }

    input[type="text"].form-02 {
        width: 100%;
    }

    input[type="text"].form-03 {
        width: 300px;
    }

    .container-login {
        margin: 30px auto;
        border: 1px solid #777;
        width: 600px;
        height: 350px;
        padding-top: 60px;
        padding-left: 100px;
        padding-right: 100px;
    }

    .container-button > div {
        margin-left: 10px;
        margin-right: 10px;
    }

    .container-button > .flex-box > :nth-of-type(n+2) {
        margin-left: 10px;
    }

    .input-table {
        margin-bottom: 50px;
    }

        .input-table > table th,
        .output-table > table th {
            width: 200px;
        }

            .input-table > table th > div,
            .output-table > table th > div {
                display: inline;
            }

            .input-table > table th br,
            .output-table > table th br {
                display: none;
            }

                .input-table > table th br.return,
                .output-table > table th br.return {
                    display: block;
                }

    .form-address {
        display: inline-block;
        width: 25%;
    }

    .form-prefectures {
        width: 20%;
        min-width: 150px;
        max-width: 150px;
    }

    td.td-swap {
        width: 33px;
        padding: 1px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    td.td-swap-recombination {
        padding: 0 !important;
    }

    col.col-swap-recombination {
        width: 60px;
    }

    .form-margin {
        margin-left: 10px;
    }

    table.luggage-table .textarea-remarks,
    table.empty-truck-table .textarea-remarks {
        width: calc(100% - 50px);
    }

    .view-page div.search-result,
    .view-page div.pagination {
        float: left;
        width: 50%;
    }

    .group-table div.group-type > div:nth-of-type(n+2) {
        margin-left: 25px;
    }

    .btn-save,
    .btn-request,
    .btn-contract,
    .btn-modify,
    .btn-delete,
    .btn-cancel,
    .btn-copy {
        width: 120px;
    }

    .btn-search,
    .btn-create {
        width: 100%;
        max-width: 180px;
    }

    th > span.brackets:before, th > div > span.brackets:before {
        content: "\ff08";
    }

    th > span.brackets:after, th > div > span.brackets:after {
        content: "\ff09";
    }

    th > span.under-score:before {
        content: "_";
    }
}

@media only screen and (max-width: 768px) {
    /* スマートフォン */
    .input-table > table.luggage-table th,
    .input-table > table.luggage-sub-table th,
    .input-table > table.empty-truck-table th,
    .input-table > table.empty-truck-sub-table th,
    .output-table > table.luggage-table th,
    .output-table > table.empty-truck-table th {
        width: 80px;
    }

    .input-table > table.group-table th,
    .input-table > table.user-table th,
    .input-table > table.vendor-table th,
    .output-table > table.group-table th,
    .output-table > table.user-table th,
    .output-table > table.vendor-table th {
        width: 100px;
    }

    .input-table > table th > div,
    .output-table > table th > div {
        display: inline-block;
        vertical-align: top;
    }

    .view-only-pc {
        display: none !important;
    }

    .view-only-smartphone {
        display: block;
    }

    .panel-navigator {
        position: absolute;
        width: calc(100% - 60px);
        z-index: 100;
        top: 125px;
    }

        .panel-navigator > .hamburger {
            text-align: right;
            padding-top: 35px;
        }

        .panel-navigator > #btn_hamburger_check:checked + .hamburger {
            position: fixed;
            top: 0;
            height: 100vh;
            width: calc(100% - 60px);
            background-color: #fff;
        }

        .panel-navigator > .hamburger > label {
            margin-bottom: 10px;
        }

        .panel-navigator > #btn_hamburger_check + .hamburger > label > .btn-hamburger:before {
            content: "\e056";
        }

        .panel-navigator > #btn_hamburger_check:checked + .hamburger > label > .btn-hamburger:before {
            content: "\e014";
        }

        .panel-navigator > .hamburger > nav {
            height: 100%;
            text-align: left;
            background-color: #fff;
            display: none;
        }

    .nav > li > a,
    .nav .open > a,
    .nav .open > a:hover,
    .nav .open > a:focus {
        border: none;
        border-bottom: 1px solid #aaa;
    }

    .panel-navigator > #btn_hamburger_check:checked + .hamburger > nav {
        display: block;
    }

    .container-button > .flex-box {
        flex-flow: column;
    }

        .container-button > .flex-box > input {
            margin-bottom: 10px;
        }

        .container-button > .flex-box > .child-0 {
            order: 0;
        }

        .container-button > .flex-box > .child-1 {
            order: 1;
        }

        .container-button > .flex-box > .child-2 {
            order: 2;
        }

    .left-space {
        margin-left: 24px;
    }

    td.td-swap {
        width: 0;
        padding: 0 !important;
    }

    td.td-swap-recombination {
        padding: 1px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    col.col-swap-recombination {
        width: 33px;
    }

    .width-60 {
        width: 100%;
        max-width: 60px;
    }

    .width-70 {
        width: 100%;
        max-width: 70px;
    }

    .width-80 {
        width: 100%;
        max-width: 80px;
    }

    .width-100 {
        width: 100%;
        max-width: 100px;
    }

    .width-130 {
        width: 100%;
        max-width: 130px;
    }

    .width-150 {
        width: 100%;
        max-width: 150px;
    }

    .width-180 {
        width: 100%;
        max-width: 180px;
    }

    .width-200 {
        width: 100%;
        max-width: 200px;
    }

    .width-250 {
        width: 100%;
        max-width: 250px;
    }

    .width-300 {
        width: 100%;
        max-width: 300px;
    }

    .width-350 {
        width: 100%;
        max-width: 350px;
    }

    .width-400 {
        width: 100%;
        max-width: 400px;
    }

    .width-600 {
        width: 100%;
        max-width: 600px;
    }

    .calendar {
        max-width: 100px;
    }

    .width-datetime {
        width: 100%;
        max-width: 300px;
    }

    .display-var-inline {
        display: block;
    }

    .hope-vehicle-type {
        width: 70px;
        height: 70px;
        float: left;
    }

    .float-vehicle-type {
        width: calc(100% - 75px);
        float: left;
        margin-bottom: 5px;
        overflow: hidden;
    }

    .btn-submit,
    .btn-back,
    .btn-save,
    .btn-request,
    .btn-copy,
    .btn-contract,
    .btn-modify,
    .btn-delete,
    .btn-cancel,
    .btn-print-page,
    .btn-close,
    .btn-confirm,
    .btn-regist {
        width: 100%;
    }

    span.view-omit {
        display: none;
    }

    .view-page {
        display: block;
    }

        .view-page div.search-result,
        .view-page div.pagination {
            width: 100%;
        }

            .view-page div.pagination ul {
                font-size: 0;
            }

                .view-page div.pagination ul > li {
                    font-size: 14px;
                    background-color: #e6fdc5;
                    border-left: 1px solid #92d050;
                    border-right: 1px solid #92d050;
                    border-radius: 0;
                    margin: 0;
                }

                    .view-page div.pagination ul > li.omit {
                        background-color: transparent;
                        border-top: none;
                        border-left: 1px solid #92d050;
                        border-right: 1px solid #92d050;
                        border-bottom: none;
                        margin: 0;
                    }

                    .view-page div.pagination ul > li:first-child {
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                        border-left: 2px solid #92d050;
                        border-right: 1px solid #92d050;
                    }

                    .view-page div.pagination ul > li:last-child {
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                        border-left: 1px solid #92d050;
                        border-right: 2px solid #92d050;
                    }
}

footer {
    display: block;
    position: sticky;
    top: 100vh;
    width: 100%;
    height: 130px;
    background: #fff;
    text-align: center;
    padding: 1.5rem 1rem;
}

@media screen and (max-width: 767px) {
    footer {
        height: auto;
        padding: 1.25rem 1rem;
    }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
    footer {
        height: 110px;
        padding: 1rem;
    }
}

@media screen and (max-width: 767px) {
    footer img {
        width: 135px;
        height: auto;
    }
}

footer .copy {
    font-size: 14px;
    color: #828282;
    margin: 10px auto 0 auto;
}

@media screen and (max-width: 767px) {
    footer .copy {
        font-size: 11px;
        margin: 15px auto 0 auto;
    }
}