/* 最小化できませんでした。最小化されていないコンテンツを返します。
(367,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(368,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(370,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(374,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(383,17): run-time error CSS1039: Token not allowed after unary operator: '-main-font-color'
(392,17): run-time error CSS1039: Token not allowed after unary operator: '-main-font-color'
(397,21): run-time error CSS1039: Token not allowed after unary operator: '-main-dark-color'
(493,27): run-time error CSS1039: Token not allowed after unary operator: '-main-light-color'
(511,14): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(524,28): run-time error CSS1039: Token not allowed after unary operator: '-stripe-color'
(548,21): run-time error CSS1039: Token not allowed after unary operator: '-main-dark-color'
(549,35): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(625,24): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(627,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(636,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(637,24): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(642,32): run-time error CSS1039: Token not allowed after unary operator: '-accent-light-color'
(643,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-light-color'
(644,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(675,21): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(676,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(677,36): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(726,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(732,28): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(754,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(755,32): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(777,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(778,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1024,32): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1028,32): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1070,25): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1084,25): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1102,25): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1155,32): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1173,32): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1197,32): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1234,33): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(2543,32): run-time error CSS1039: Token not allowed after unary operator: '-picking-color'
(2544,28): run-time error CSS1039: Token not allowed after unary operator: '-picking-color'
(2549,36): run-time error CSS1039: Token not allowed after unary operator: '-piking-light-color'
(2550,32): run-time error CSS1039: Token not allowed after unary operator: '-piking-light-color'
(2551,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2810,22): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(2817,28): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
 */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, ul {
  margin: 0;
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.nav_wrapper {
    width: 100%;
    margin: 0 auto;
}
.nav_lists {
    display: flex;
    outline: 2px solid transparent; /* �������ɕύX */
}
.nav_list {
    width: 180px;
    height: 50px;
    position: relative;
    transition: all .3s;
    border-radius: 20px;
}
.nav_list:hover {
    background-color: #ccc;
}
.nav_list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.nav_list:hover::before {
    /*background-color: #0071BB;*/
}
    .nav_list a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.05em;
        font-weight: normal;
        transition: all .3s;
        outline: 2px solid transparent; /* �������ɕύX */
    }
.nav_list:hover a {
    color: #fff;
}

.fas, .fa, .far{
	margin-left:3px;
}

.dropdown_lists {
    display: none;
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
}
.nav_list:hover .dropdown_lists {
    display: block;
}
.dropdown_list {
    background-color: #999;
    height: 50px;
    transition: all .3s;
    border-radius: 20px;
    border:1px solid #fff;
    position: relative;
    z-index:500;
}
.dropdown_list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown_list:hover {
    background-color: #ccc;
}
.dropdown_list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown_list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    /*border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);*/
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}

/*.color_1{
	background-color:#e11919;
}
.color_2{
	background-color:#00bd72;
}
.color_3{
	background-color:#2e4482;
}

.color_4{
	background-color:#1ebbd7;
}

.color_5{
	background-color:#ff7400;
}

.color_6{
	background-color:#ff48a5;
}

.color_7{
	background-color:#dab600;
}

.color_8{
	background-color:#a98600;
}

.color_9{
	background-color:#a94c4c;
}*/

/* �� */
.color_1 {
    background-color: #e8383d;
}

/* �I�����W */
.color_2 {
    background-color: #ed6d35;
}

/* ���邢�I�����W */
.color_3 {
    background-color: #ff9933;
}

/* ���F */
.color_4 {
    background-color: #ffbf00;
}

/* ���� */
.color_5 {
    background-color: #99cc00;
}

/* �� */
.color_6 {
    background-color: #009944;
}

/* ���F*/
.color_7 {
    background-color: #00cccc;
}

/* �� */
.color_8 {
    background-color: #0044cc;
}

/* �� */
.color_9 {
    background-color: #8800cc;
}

.ddl_color{
	background-color:#eee;
}

/* �^�u���b�g */
@media only screen and (max-width: 1024px) { 
.nav_list,
.dropdown_list {
    position: relative;
    border-radius: 10px;
    padding:5px;
    text-align:center;
}

.nav_list a,
.dropdown_list a {
	font-size:0.9em;
    font-weight: normal;
}

}

/* ES�Ǘ���ʗp */
.nav_list_es {
    width: 180px;
    height: 40px;
    position: relative;
    transition: all .3s;
}

    .nav_list_es:hover {
        background-color: #ccc;
    }

    .nav_list_es:not(:first-child)::before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s;
    }

    .nav_list_es:hover::before {
        /*background-color: #0071BB;*/
    }

    .nav_list_es a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.05em;
        font-weight: normal;
        transition: all .3s;
        outline: 2px solid transparent; /* �������ɕύX */
    }

    .nav_list_es:hover a {
        color: #fff;
    }

.fas, .fa, .far {
    margin-left: 3px;
}


.nav_list_es:hover .dropdown_lists_es {
    display: block;
}
.dropdown_lists_es {
    display: none;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
}

/* Thomas�A�g�̐eli�� position: relative; ��t�^ */
.dropdown_list_es.thomas-dropdown {
    position: relative;
}

/* �T�u���j���[��E���ɐ�Δz�u */
.thomas-submenu {
    display: none;
    position: absolute;
    top: -1px;
    left: 100%; /* �eli�̉E�[�ɔz�u */
    width: 100%;
/*    min-width: 160px;
    background: #fff;
    z-index: 2000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 0;*/
}

/* Thomas�A�g�̃T�u���j���[�͏�����ԂŔ�\�� */
.dropdown_list_es .thomas-submenu {
    display: none !important;
}

/* Thomas�A�g��li�Ƀz�o�[�����������T�u���j���[��\�� */
.dropdown_list_es.thomas-dropdown:hover > .thomas-submenu {
    display: block !important;
}

.dropdown_list_es {
    background-color: #999;
    height: 45px;
    transition: all .3s;
    border: 1px solid #fff;
    position: relative;
    z-index: 500;
}

    .dropdown_list_es:not(:first-child)::before {
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .dropdown_list_es:hover {
        background-color: #ccc;
    }

    .dropdown_list_es a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-decoration: none;
        position: relative;
    }

        .dropdown_list_es a::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            /*border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);*/
            position: absolute;
            right: 15px;
            top: calc(50% - 5px);
        }

@charset "UTF-8";
/*

Primary Style

*/

/* https://m2.material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=26C6DA&secondary.color=FFC107 */
:root {
    --main-color: #ffedc9;
    --header-bg-color: #fff6e3;
    --main-dark-color: #0095a8;
    --main-light-color: #FFE497;
    --main-font-color: #28364c;
    --stripe-color: #f4f4f4;
    --accent-color: #de0000;
    --accent-dark-color: #c79100;
    --accent-light-color: #f5b2b2;
    --picking-color: #0F9ED5;
    --piking-light-color: #6FCBF0;
}


body {
    font-size: 14px;
    color: var(--main-font-color);
    background-color: #fff;
    /* Prevent horizontal Scrolling */
    height: 100vh;
    margin: 0;
	font-family: 'BIZ UDPGothic', sans-serif;
}

a {
    color: var(--main-font-color);
    text-decoration: none;
}

    a:hover {
        color: var(--main-dark-color);
    }

ul {
    list-style: none;
    padding-left: 0;
}

label {
    font-weight: normal;
}

.whiteline{
    margin-top: 3px;
    margin-bottom: 3px;
    border: 0;
    border-top: 1px solid #fff;
}

.table th, .table td > label {
    font-weight: normal;
}

/* -----------------
  メニュー作成画面　テーブル
  -------------------*/
/*列の固定化*/
.table-column-fixed1 {
    position: sticky;
    left: 0;
    z-index: 1;
    border: 1px solid #ccc !important;
}
.table-column-fixed2 {
    position: sticky;
    left: 30px;
    z-index: 1;
    border: 1px solid #ccc !important;
}
.table-column-fixed3 {
    position: sticky;
    left: 60px;
    z-index: 1;
    border: 1px solid #ccc !important;
}

button .fas, 
label .fas, 
table .fas,
table .far {
    font-size: 1.2em;
}

.user > .fas {
    font-size: 1em;
}

table .fa-file-pdf {
    font-size: 1.5em;
}

i .calendar-move {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2em;
}

.notnull_mark{
    color: crimson;
    margin:2px;
}
.notnull_mark::before{
    content:'*';
}
.attention_mark {
    color: crimson;
    margin: 2px;
}

    .attention_mark::before {
        content: '※';
    }
.error, .caution {
    display: block;
    color: crimson;
    font-size: 0.9em;
    /*font-weight: bold;*/
}

.noshow {
    background-color: #fbe7eb;
}

h1 {
    font-size: 1em;
    padding: 1em;
    background-color:var(--main-light-color);
    width:1024px;
    margin:0 auto;
}

h2 {
    font-size: 1em;
    /*margin: 0 auto;*/
    /*width: 1024px;*/
    padding: 5px 10px;
    text-align: left !important;
}
h2::before  {
	font-size: 1em;
	top: .25em;
	left: .5em;
	margin-right: 5px;
	content:'■';
	color: var(--accent-color);
}
h3 {
    font-size: 20px;
    line-height: 1.5em;
    margin: 0;
}

.with-underline {
    text-decoration: underline;
}

.table_b {
    background-color: var(--stripe-color) !important;
}

.select-label {
    line-height: 1.5em;
    margin: 5px
}
/* 注釈 */
.comment {
    font-size: 0.8em;
    font-weight: bold;
    color: rgba(0,0,0,.4);
    /*display: block;*/
}
.new_password{
    font-size:2em;
    line-height:1.5em;
    height:1.5em;
}
/* 売上一覧　カレンダー移動ボタン */
i .calendar-move {
    cursor: pointer;
}
    i .calendar-move:hover {
        color: var(--main-dark-color);
        text-shadow: 0 0 3px var(--main-color);
    }

/*
テーブルの高さを狭くする
.table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 6px 8px;
    line-height: 1.1;
}*/

/* コンテナ上書き */
.container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 30px;
}

/* -----------------
  jqgrid 上書き
  -------------------*/

.ui-jqgrid>.ui-jqgrid-view {
    font-size: inherit;
}

.ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-htable {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

    .ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-htable .jqgh_rn {
        border-left: 1px solid #ccc;
    }

/*jqgrid tbody一番左側罫線*/
.ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-btable td.jqgrid-rownum {
    border-left: 1px solid #ccc;
}

.ui-jqgrid-jquery-ui.ui-jqgrid .ui-jqgrid-bdiv tr.ui-row-ltr > td {
    border-color: #ccc;
}

.ui-jqgrid .ui-jqgrid-htable th,
.ui-jqgrid tr.jqgrow > td, .ui-jqgrid tr.jqgroup > td, .ui-jqgrid tr.jqfoot > td {
    padding: 10px 5px;
}

.ui-jqgrid > .ui-jqgrid-pager {
    font-size: inherit !important;
}

/* -----------------
  bootstrap 上書き
  -------------------*/
.form-control {
    height: 35px;
/*    padding: 3px 12px;*/
    padding: 3px 7px;
    font-size: 14px;
    line-height: 1.1;
}

    .form-control::placeholder {
        color:#ccc;
    }

select.form-control {
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;
}

.form-control:focus {
    /*color: var(--accent-color);*/
    background-color: #fff;
    border-color: var(--main-color);
    outline: none !important;
    box-shadow: 0 0 5px 0 var(--main-color);
}

.btn.active:focus, .btn:active:focus {
    box-shadow: none; /* クリックしたときに出る青い枠を消す */
}

.btn-primary {
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:checked, .btn-primary:focus, .btn-primary:active:focus {
        color: #fff;
        background-color: var(--accent-light-color);
        border-color: var(--accent-light-color);
        box-shadow: 0 0 5px 0 var(--main-color);
        outline: none !important;
    }

    .btn-primary:disabled {
        color: #fff;
        background-color: #f3c9c9;
        border-color: #e6e6e6;
        outline: none !important;
        pointer-events: none;
    }
.btn-default {
    color: #fff;
    background-color: #999;
    border-color: #999;
}

    .btn-default:hover, .btn-default:active, .btn-default:checked, .btn-default:focus, .btn-default:active:focus {
        color: #333;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

.btn-delete {
    color: crimson;
    background-color: #fff;
    border-color: crimson;
}

    .btn-delete:hover, .btn-delete:active, .btn-delete:checked, .btn-delete:focus, .btn-delete:active:focus {
        color: var(--accent-color);
        border-color: var(--accent-color);
        box-shadow: 0 0 5px 0 var(--accent-color);
        outline: none !important;
    }
.btn-color {
    color: white;
}
    .btn-color:hover, .btn-color:active, .btn-color:checked, .btn-color:focus, .btn-color:active:focus {
        color: white;
        opacity: .5;
        outline: none !important;
    }

.div-dlDriver-deliveryImg {
    line-height: 1.5;
    margin-bottom: 5px;
}

.visited {
    color: inherit;
    border-color: inherit;
    background-color: inherit;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: none;
    color: inherit;
}

/* datepicker 年カレンダー、10年カレンダー、100年カレンダー */
.datepicker-years, .datepicker-decades, .datepicker-centuries {
    font-size: 0.8em;
}

/* -----------------
  FullCalendar
  -------------------*/
.fc-toolbar-title {
    font-size: 1em;
    margin: 10px 0 0 0;
    padding: 5px 10px;
    text-align: left !important;
}
.fc-toolbar-title::before  {
    content: none;
}

.fc .fc-button-primary {
    background-color: var(--accent-color);
}

.fc th{
    height: 40px;
    vertical-align: middle;
    background-color: var(--header-bg-color)
}
td.fc-day-sat .fc-daygrid-day-number {
    padding: 4px 15px 4px 4px;
    color: blue;
}
  td.fc-day-sun .fc-daygrid-day-number {
    color: red;
  }


/* -----------------
  ログイン画面 
  -------------------*/
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .login .login-box {
        border: 3px solid var(--main-color);
        background-color: var(--header-bg-color);
        height: 330px;
        padding: 30px;
        border-radius: 10px;
    }

        .login .login-box .title {
            display: flex;
            justify-content: space-between;
        }

        .login .login-box .forget {
            display: flex;
            justify-content: flex-end;
        }
        .login .login-box .body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .login .login-box .line {
            background-color: var(--main-color);
            color: var(--main-color);
            height: 3px;
            border: none;
            margin: 0 0 20px 0
        }

/* -----------------------------
    表示データ属性
 -------------------------------*/
.text {
    text-align: left;
}

label.num {
    width: 100%;
    padding: 2px;
}

td.num, label.num, .number_text {
    text-align: right !important;
}

td.fixed {
    background-color: #fde5ef;
}
/* -----------------------------
    コンテナ
 -------------------------------*/
.header-container {
	width:1024px;
    margin: 0 auto;
   /* height:130px;*/
}

.header_info {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

    .header_info .user_info{
        color: #a94c4c;
        margin: 10px;
        padding-right: 10px;
        text-align:right;
        width:600px;
    }
        
        .header_info .user_info a {
            color: #a94c4c;
        }
        .header_info .user_info .logout {
            cursor: pointer; /* カーソルをポインター（指）に変更 */
        }


.content-container {
    width: 1024px;
    height: auto;
    margin: 0 auto;
}

.container-row {
    display: flex;
    flex-direction: row; /*左から右*/
    flex-wrap: wrap;
    align-items: flex-start;
}

.container-row-space {
    display: flex;
    flex-direction: row; /*左から右*/
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}

.container-row-space-between {
    display: flex;
    flex-direction: row; /*左から右*/
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse; /*右から左*/
    flex-wrap: wrap;
    align-items: flex-end;
}

.container-col {
    display: flex;
    flex-direction: column; /*上から下*/
    flex-wrap: wrap;
    align-items: flex-start;
}

.container-align-bottom {
    align-items: flex-end;
}

/* -----------------------------
    ボタンコンテナ
 -------------------------------*/
 .button-container-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 10px;
}

    .button-container-center input {
        min-width: 100px;
        width: 180px;
        margin: 1px 5px;
    }
    
.button-container-right {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 0 10px;
}

    .button-container-right input {
        min-width: 100px;
        width: 180px;
        margin: 1px 5px;
    }

.button-container-left {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 10px;
}

    .button-container-left input {
        min-width: 100px;
        width: 180px;
        margin: 1px 5px;
    }
/* -----------------------------
    お知らせ表示
 -------------------------------*/
.information{
    /*background-color: var(--header-bg-color);*/
    padding-top:5px;
    min-height:50px;
}
.information .toggle {
	display: none;
}
.information .Label {		/*タイトル*/
	display: block;
	cursor:pointer;
	margin:10px;
	text-decoration:underline;
}
.information .Label,
.information .content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.information .content {		/*本文*/
	height: 0;
    background-color: #fff;
	padding:0 20px;
	overflow: hidden;
	border: 1px solid #fff;
}
.information .toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:10px ;
	transition: all .2s;
}

.infoTitle {
    cursor: pointer;
}
/* -----------------------------
    検索条件ボックス
 -------------------------------*/
div .condition {
    border: 1px solid #ccc;
    padding: 20px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
    div .condition .item {
        display: inline-flex;
        margin: 5px 0;
        align-items: center;
    }

div .condition .title{
	margin:0 5px 0 20px;
	line-height:3em;
	white-space: nowrap;
}

/* -----------------
    検索条件　ラジオボタン
  -------------------*/
.radio_button input{
	display: none;
}
.radio_button{
	float: left;	
	width: 100%;	
}
.radio_button label{
	display: block;
	float: left;
	cursor: pointer;
	width: 55px;
	height: 45px;
	margin: 0 3px;
	padding: .8em 0;
	border: 3px double #ccc;
	background: #fff;
	color: #555e64;
	text-align: center;
	line-height: 1;
}
.radio_button label:first-of-type{
	margin-left:10px;
}
    /* 
        お問い合わせ一括画面
        会社区分ラジオボタン「委託配送」のみ2行になってしまうのでpaddingを別途設定 
    */
    .radio_button .radio_corp_3 {
        padding-top: 5px;
    }
    /* 
        お問い合わせ一括画面
        会社区分ラジオボタン「委託配送」のみ2行になってしまうのでpaddingを別途設定 
    */
    .radio_button input[type="radio"]:checked + label {
        padding: .6em 0; /*デフォルト設定*/
        border: 3px solid var(--accent-color);
    }
    .radio_button input[type="radio"]:checked + label:not(.radio_corp_3) {
        padding: .9em 0; /*委託配送ボタンの設定*/
        border: 3px solid var(--accent-color);
    }

/* -----------------
    ON/OFFスイッチ
  -------------------*/
 /* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height    : 36px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  position       : relative;            /* 親要素が基点       */
  width          : 100px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
}

 /* === ボタンを表示するエリア(width指定なし) ============================== */
 .switchArea2 {
    line-height    : 36px;                /* 1行の高さ          */
    letter-spacing : 0;                   /* 文字間             */
    text-align     : center;              /* 文字位置は中央     */
    position       : relative;            /* 親要素が基点       */
    width          : 50px;               /* ボタンの横幅       */
    background     : #fff;                /* デフォルト背景色   */
  }

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 40px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : var(--accent-color);             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
  content        : "非公開";               /* 表示する文字       */
  padding        : 0 0 0 30px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "公開";                /* 表示する文字       */
  padding        : 0 34px 0 0;          /* 表示する位置       */
  color          : var(--accent-color); 
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 28px;                /* 丸の横幅           */
  height         : 28px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 6px;                 /* 親要素からの位置   */
  left           : 6px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(60px);    /* 丸も右へ移動       */
  background     : var(--accent-color);         /* カーソルタブの背景 */
}

 /* === 状況表示ラベルの装飾 ==================== */
.view-label {
    color: black; /* テキストの色 */
    font-size: 14px; /* フォントサイズ */
    background-color: #f7f7f7; /* 背景色 */
    padding: 10px; /* 内側の余白 */
    border-radius: 30px; /* 角丸               */
    margin-left: 50px;
    margin-bottom: 5px;
    width: 120px;
    text-align: center;
    white-space: nowrap;
}

/* === 削除済み商品表示ラベルの装飾 ==================== */
.item-delete-label {
    color: white; /* テキストの色 */
    font-size: 14px; /* フォントサイズ */
    background-color: red; /* 背景色 */
    border-radius: 10px; 
    margin-left: 50px;
    margin-bottom: 5px;
    width: 200px;
    text-align:center;
}
/* === 仮登録ラベルの装飾 ==================== */
.temp-customer-label {
    /*color: white;*/ /* テキストの色 */
    font-size: 14px; /* フォントサイズ */
    background-color: khaki; /* 背景色 */
    border-radius: 10px;
    margin-left: 50px;
    margin-bottom: 5px;
    width: 100px;
    text-align: center;
}

/* -----------------------------
    表示テーブル
 -------------------------------*/
.view-table{
	width:100%;
}
    .view-table tr 
    , .ui-jqgrid-htable tr {
        border: none;
    }
    .view-table th,
    .view-table thead th,
    .ui-jqgrid-htable th {
        background-color: var(--header-bg-color);
        border: 1px solid #ccc;
        white-space: nowrap;
        padding: 10px 5px;
        font-weight: normal;
    }
    .view-table td, 
    .view-table tbody td, 
	.ui-jqgrid-htable td {
        border: 1px solid #ccc;
        padding:10px 5px;
    }

    .ui-jqgrid-ftable {
        min-height: 40px;
    }

    .footrow td {
        background-color: var(--header-bg-color);
        border-top: 0 none !important;
        border-bottom: 0 none !important;
        border-left: 0 none !important;
        border-right: 0 none !important;
        border: 1px solid #fff !important;
        white-space: nowrap;
        padding: 10px 5px;
        font-weight: normal !important;
    }

/* -----------------------------
    納品予定日テーブル
 -------------------------------*/
.delivery-schedule-table {
    width: 100%;
}

    .delivery-schedule-table tr, .ui-jqgrid-htable tr {
        border: none;
    }

    .delivery-schedule-table th,
    .delivery-schedule-table thead th {
        background-color: var(--header-bg-color);
        border: 1px solid #ccc;
        white-space: nowrap;
        padding: 10px 5px;
        font-weight: normal;
    }

    .delivery-schedule-table td,
    .delivery-schedule-table tbody td {
        border: 1px solid #ccc;
        padding: 5px 5px;
    }

.toggleContentLine {
    text-decoration: underline;
    text-align: right;
    cursor: default;
    margin-top: 5px;
    margin-right: 10px;
}


/* -----------------------------
    入力テーブル
 -------------------------------*/
.table > :not(:last-child) > :last-child > * {
    border-bottom: none;
}

.input-table {
    width: auto;
}
.common-td {
    line-height: 1.5em;
}

    .input-table th {
	        background-color: var(--header-bg-color);
	        border-top: 1px solid #ccc !important;
	        border: 1px solid #ccc;
	        white-space: nowrap;
	        min-width: 50px;
	        padding: 5px;
	        text-align:left;
	        font-weight:normal;
    }

    .input-table td {
        border: 1px solid #ccc;
        padding: 3px 5px;
        text-align:left;
		line-height:2.5em;
    }
    .input-table textarea {
        height: calc( 1.3em * 5 );
        line-height: 1.3;
    }
.input-table label {
    margin: 0 5px;
    /*white-space: nowrap;*/
}

	.input-table .inline{
		display:inline-flex;
		margin:5px 0;
	}
.responsive-label {
    display: none;
}

/* 発注明細だけ最小幅を狭くする */
#popupPurchaseDetailListParts .orderCountTable th,
#popupPurchaseDetailEditParts .orderCountTable th {
    min-width: 25px;
}

/* -----------------------------
    ダイアログ
 -------------------------------*/
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.3);
    z-index: 1000;
}
/* -----------------------------
    メインとなるモーダル
 -------------------------------*/
      /*モーダル本体の指定 + モーダル外側の背景の指定*/
      .modal-container {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          text-align: center;
          background: rgba(0,0,0,50%);
          overflow: auto;
          opacity: 0;
          visibility: hidden;
          transition: .3s;
          box-sizing: border-box;
          z-index: 200;
      }

          /*モーダル本体の擬似要素の指定*/
          .modal-container:before {
              content: "";
              display: inline-block;
              vertical-align: middle;
              height: 100%;
          }

          /*モーダル本体に「active」クラス付与した時のスタイル*/
          .modal-container.active {
              opacity: 1;
              visibility: visible;
          }

      /*モーダル枠の指定*/
      .modal-body {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          /*background-color: #ccc;*/
      }
      .modal-content{
	      padding:20px;
      	/*display*/
      }
.modal-container .scroll {
    overflow-y: scroll;
    overflow-x: hidden;
}
.modal-container .x-scroll {
    overflow-x: auto;
}      

/* -----------------------------
    表示中くるくる
 -------------------------------*/
.wait-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0,0,0,0.1);
    z-index: 99999999998;
}

.spinner-box {
    display: inline-block;
    margin: 0 5px;
}

.circle-border {
    width: 20px;
    height: 20px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    background: linear-gradient(0deg, rgba(0,0,0,.1) 33%, rgba(0,0,0,1) 100%);
    animation: spin .8s linear 0s infinite;
}

.circle-core {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
}

.circle-border-fullscreen {
    position: fixed;
    top: 30%;
    left: 50%;
    width: 100px;
    height: 100px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 3px solid #666;
    border-top: 3px solid #eee;
    background: transparent;
    animation: spin .8s linear 0s infinite;
    z-index: 9000;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------
    保存しましたラベル
 -------------------------------*/
#msg_save_complete {
    display: none;
    position: fixed;
    top: 10px;
    left: 50%;
}
#msg_save_complete_label {
/*    line-height: 1.5em;
    position: absolute;
    margin: 0 auto;*/
}
/* -----------------------------
    font-size
 -------------------------------*/
.fontsize_large {
    font-size: 2em;
}

.fontsize_large_emphasis {
    font-size: 2em;
    font-weight: bold;
}

.fontsize_semi_large {
    font-size: 1.2em;
}

.font_semi_large_emphasis {
    font-size: 1.2em;
    font-weight: bold;
}

.fontsize_semi_small {
    font-size: 0.9em;
}

/* -----------------------------
    color
 -------------------------------*/
.c-red {
    color:red;
}
.c-red:hover{
    color:rgb(255, 91, 91);
  }

/* -----------------------------
    - margin -
 -------------------------------*/
.m0{
    margin: 0;
}
.mt0 {
    margin-top: 0 !important;
}

.mt3 {
    margin-top: 3px !important;
}

.mt4 {
    margin-top: 4px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt45 {
    margin-top: 45px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.mt210 {
    margin-top: 210px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb25 {
    margin-bottom: 25px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mb200 {
    margin-bottom: 200px !important;
}

.mb8em {
    margin-bottom: 8em !important;
}

.mb10em {
    margin-bottom: 10em !important;
}

.mb20em {
    margin-bottom: 20em !important;
}

.mb30em {
    margin-bottom: 30em !important;
}

.mb40em {
    margin-bottom: 40em !important;
}

.mb80em {
    margin-bottom: 80em !important;
}

.ml3 {
    margin-left: 3px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.ml49 {
    margin-left: 49px;
}

.ml50 {
    margin-left: 50px;
}

.ml80 {
    margin-left: 80px;
}

.ml330 {
    margin-left: 330px !important;
}

.ml360 {
    margin-left: 360px !important;
}

.ml530 {
    margin-left: 530px !important;
}

.ml1em{
    margin-left: 1em;
}

.mlPer5{
    margin-left: 5%;
}

.mr0 {
    margin-right: 0px !important;
}

.mr3 {
    margin-right: 3px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px !important;
}

.pd10{
    padding: 10px;
}

.pt10 {
    padding-top: 10px;
}

.pt20 {
    padding-top: 20px;
}

.pt30 {
    padding-top: 30px;
}

.pb0 {
    padding-bottom: 0px;
}

.pb3 {
    padding-bottom: 3px;
}

.pt3 {
    padding-top: 3px;
}

.pb5 {
    padding-bottom: 5px;
}
.pt5 {
    padding-top: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb40 {
    padding-bottom: 40px;
}

.pl10 {
    padding-left: 10px;
}

.pl20 {
    padding-left: 20px;
}

.pr20{
    padding-right: 20px !important;
}

/* -----------------------------
    align
 -------------------------------*/
.fL {
    float: left;
}

.fR {
    float: right;
}

.tL {
    text-align: left !important;
}

.tR {
    text-align: right !important;
}

.tC {
    text-align: center !important;
    text-indent: 0em !important;
}

.vaM {
    vertical-align: middle;
}

.vaB {
    vertical-align: bottom;
}



/* -----------------------------
   - width -
 -------------------------------*/
.wFull {
    width: 100%;
    height: auto;
}

.wHalf {
    width: 50%;
}

.wThird {
    width: 30%;
}

.wQuad {
    width: 25%;
    height: auto
}

.wQuint {
    width: 18%;
    height: auto
}

.WPer10 {
    width: 10%;
}

.WPer14{
    width: 14%;
}

.WPer15{
    width: 15%;
}

.WPer20{
    width: 20%;
}

.WPer25{
    width: 25%;
}

.wPer30 {
    width: 30%;
}

.wPer35 {
    width: 35%;
}

.wPer40 {
    width: 40%;
}

.wPer45 {
    width: 45%;
}

.wPer60 {
    width: 60%;
}

.wPer70 {
    width: 70%;
}

.wPer75 {
    width: 75%;
}

.wPer80 {
    width: 80%;
}

.WPer85 {
    width: 85%;
}

.wPer90 {
    width: 90% !important;
}

.wPer100 {
    width: 100% !important;
}

.w300px {
    width: 300px !important;
}

.w340px {
    width: 340px;
}

.w500px {
    width: 500px;
}

.w720px {
    min-width: 720px;
    width: 720px;
}

.w240px {
    width: 240px;
}

.w10px {
    min-width: 10px;
    width: 10px;
    max-width: 10px;
}

.w30px {
    min-width: 30px;
    max-width: 30px;
    width: 30px;
}

.w50px {
    width: 50px;
}

.w60px {
    width: 60px;
}
.w70px {
    width: 70px;
}
.w80px {
    width: 80px;
}

.w100px {
    min-width: 100px;
    width: 100px !important;
}
.w130px {
    min-width: 130px;
    width: 130px !important;
    max-width: 130px;
}

.w150px {
    min-width: 150px;
    width: 150px !important;
    max-width: 150px;
}

.w110px {
    min-width: 110px;
    width: 110px !important;
    max-width: 110px;
}

.w200px {
    min-width: 200px;
    width: 200px !important;
    max-width: 200px;
}

.w187px {
    min-width: 187px;
    width: 187px !important;
    max-width: 187px;
}

.w250px {
    min-width: 250px;
    width: 250px !important;
    max-width: 250px;
}

.w255px {
    min-width: 255px;
    width: 255px !important;
    max-width: 255px;
}

.w120px {
    min-width: 120px;
    width: .120px;
    max-width: .120px;
}

.w140px {
    min-width: 140px;
    width: 140px;
    max-width: 140px;
}

.w150px {
    min-width: 150px;
    width: 150px;
    max-width: 150px;
}

.w160px {
    min-width: 160px;
    width: 160px;
    max-width: 160px;
}

.w170px {
    min-width: 170px;
    width: 170px;
    max-width: 170px;
}

.w190px {
    min-width: 190px;
    width: 190px;
    max-width: 190px;
}

.w75px {
    min-width: 75px;
    width: 75px !important;
    max-width: 75px;
}

.w80px {
    min-width: 80px;
    width: 80px !important;
    max-width: 80px;
}

.w100px {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
}

.w350px {
    width: 350px;
}

.w400px {
    width: 400px;
}

.w600px {
    width: 600px;
}

.wMin80 {
    min-width: 80px;
    width: 120px;
}

.wMin100 {
    min-width: 100px;
    width: 140px;
}

.wMin200 {
    min-width: 200px;
    width: 40%;
}

.wMin255 {
    min-width: 255px;
}

.wMin350 {
    min-width: 350px;
}

.wMin450 {
    min-width: 450px;
    width: 40%;
}

.wMax300 {
    max-width: 300px;
    min-width: 100px;
}

.wAuto {
    width: auto !important;
}

.hMin400 {
    min-height: 400px;
}
.w750px {
    min-width: 750px;
    width: 750px;
    max-width: 750px;
}

.w800px {
    min-width: 800px;
    width: 800px;
    max-width: 800px;
}

.w1000px {
    min-width: 1000px;
    width: 1000px;
    max-width: 1000px;
}

.w1030px {
    min-width: 1030px;
    width: 1030px;
    max-width: 1030px;
}
.w1080px {
    min-width: 1080px;
    width: 1080px;
    max-width: 1080px;
}

.w-min15px {
    min-width: 15px;
   
}

/* -----------------------------
   - height -
 -------------------------------*/
.hFull{
    height: 100%;
}

.mh180{
    min-height: 180px;
 }

.h40px {
    min-height: 40px;
    height: 40px;
    max-height: 40px;
}

.h90px {
    min-height: 90px;
    height: 90px;
    max-height: 90px;
}

.h500px{
    min-height: 500px;
    height: 500px;
    max-height: 500px;
}

.h600px{
    min-height: 600px;
    height: 600px;
    max-height: 600px;
}

.h650px {
    min-height: 650px;
    height: 650px;
    max-height: 650px;
}

.h750px{
    min-height: 750px;
    height: 750px;
    max-height: 750px;
}

.h800px{
    min-height: 800px;
    height: 800px;
    max-height: 800px;
}

.hAuto {
    height: auto !important;
}

.ymd {
    min-width: 120px;
    width: 120px;
    max-width: 120px;
}

.time {
    min-width: 140px;
    width: 140px;
    max-width: 140px;
}

.wButton {
    min-width: 140px;
    width: 140px;
    max-width: 140px;
    height:34px;
}


.w165px {
    min-width: 165px;
    width: 165px;
    max-width: 165px;
}


/* -----------------------------
   - display -
 -------------------------------*/
.d-inline-block{
    display:inset-block; 
}

.d-flex{
    display: flex;
}

.d-flex-between {
    display: flex;
    justify-content: space-between;
}

.d-flex-end {
    display: flex;
    justify-content: flex-end;
}

.d-flex-center {
    display: flex;
    align-items: center;
}

.d-grid{
    display: grid;
}

.d-none{
    display: none;
}


/* -----------------------------
   - border -
 -------------------------------*/
.b-none{
    border: none;
}

 .b-bottom-g{
    border-bottom: 1px solid #ccc;
}

.b-all-g{
    border: 1px solid #ccc;
}


/* -----------------------------
   - clear -
 -------------------------------*/
 .c-both{
    clear: both;
 }


 /* -----------------------------
   - clear -
 -------------------------------*/
.p-relative{
    position: relative;
}


/* -----------------------------
   - 矢印 -
 -------------------------------*/
 .triangle-up{
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid black;
  }

 .triangle-right{
    width: 0;
    height: 0;
    border-left: 13px solid black;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
  }

 .triangle-left{
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 13px solid black;
    border-bottom: 13px solid transparent;
  }
  
 .triangle-down{
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid black;
  }

/* -----------------------------
   - 在庫管理詳細画面 -
 -------------------------------*/

 .centerBlock img {
    width: 400px;
    height: 300px;
    object-fit: contain;
    display:block;
    margin:0 auto;
}

.textBlock{
    width: 300px;
    height: 100px;
    margin:0 auto;
    font-size: 70px;
    text-align: center;
}

/* -----------------------------
   - メニュー画面 -
 -------------------------------*/
 .menu_wrapper {
    width: 100%;
    margin: 0 auto;
}

 .menu_lists{
    display: flex;
    width: 100%;
    height: 40px;
    position: relative;
    transition: all .3s;
    border-radius: 20px 20px 0 0;
 }

 .menu_list {
    width: 140px;
    height: 40px;
    position: relative;
    transition: all .3s;
    border-radius: 20px 20px 0 0;
}

.menu_list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: normal;
    transition: all .3s;
}

    .menu_list p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.05em;
        font-weight: normal;
        transition: all .3s;
        cursor: pointer; 
    }
        .menu_list p:hover { 
            border-radius: 20px 20px 0 0;
            background: #ffc966;
        }
.background-coler {
    border-radius: 20px 20px 0 0;
    background: #ffc966;
}

#menuCurrentArea {
    width: 90%;
    height: auto;
    min-height: 1px;
    text-align: center;
    margin: 0 auto 24px auto;
    display: flex;
    flex-wrap: wrap;
}

#menuNextArea {
    width: 90%;
    height: auto;
    min-height: 1px;
    text-align: center;
    margin: 0 auto 24px auto;
    display: flex;
    flex-wrap: wrap;
}

#content {
    width: 1024px;
    height: auto;
    margin: 16px auto;
}

.menuItem {
    width: 170px;
    background: #fff;
    margin: 0 4px 8px 4px;
    padding: 6px;
    position: relative;
    float: left;
    border: 1px solid #d5d5d5;
}
    .menuItem:hover {
        cursor: pointer;
        background: #fff7de;
    }

.menuItem p {
    text-align: left;
    font-size: 85.71%;
    margin: 4px 0;
}

.menuItem a {
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    border: 1px solid #d5d5d5;
    top: 0;
    left: 0;
    display: block;
    box-sizing: border-box;
    position: absolute;
}

.kcal {
    font-size: 83%;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #999;
    /* border-radius: 3px; */
    margin: 0 0 0 4px;
    padding: 2px 3px;
    float: right;
}

.clearfix {
    min-height: 1px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}


/* -----------------------------
   - メニュー詳細画面 -
 -------------------------------*/
 #mainUnit {
    width: 900px;
    height: auto;
    /*margin: 0 auto;*/
    text-align: center;
    padding: 14px 0 0 0;
    overflow: hidden;
    float: right;
}


.leftBlock {
    width: 400px;
    text-align: center;
    border: 1px solid #dfdfdf;
    margin: 0 0 24px 0;
    padding: 0;
    float: left;
}

.leftBlock img {
    width: 400px;
    height: 300px;
    object-fit: contain;
}

.rightBlock {
    width: 480px;
    height: 300px;
    text-align: left;
    /* margin: 0 0 0 15px; */
    padding: 0;
    /* vertical-align: bottom; */
    float: right;
}

.rightBlock p {
    font-size: 166%;
    margin: 0px 0 0 0;
}

.rightBlock p.coment {
    font-size: 100%;
    margin: 24px 0 0 0;
}

.bold {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
}


/* -----------------------------
   - メニュー詳細画面 -
 -------------------------------*/
.AnnotationArea{
    display: inline-block;
    background-color:#fbf6f0;
    border-radius: 7px;
}

#jqGrid_MenuList tr th{
    white-space:normal;
  }


/* -----------------------------
   - 委託配送状況詳細画面 -
 -------------------------------*/
.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.deliveryDetailPartsTable label {
    white-space: pre-line;
}

/* -----------------------------
   - ピッキング -
 -------------------------------*/
 #external-events{
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
 }

 #schedulerArea{
    height: 540px;
    position: absolute;
    right: 0;
    bottom: 0;
 }

 .fc-event{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: white;
    background-color:skyblue;
    cursor: pointer;
    border-radius: 0.3em;
 }

 .fc-picking-event {
    padding: .375rem .75rem;
    font-size: 1rem;
    margin-top: 5px !important;
 }

    .fc-picking-event.picking-any {
        background-color: var(--picking-color);
        border-color: var(--picking-color);
    }

        .fc-picking-event.picking-any:hover, .fc-picking-event.picking-any:focus, .fc-picking-event.picking-any.fc-disabled {
            color: #fff !important;
            background-color: var(--piking-light-color) !important;
            border-color: var(--piking-light-color) !important;
            box-shadow: 0 0 5px 0 var(--main-color) !important;
            outline: none !important;
        }

    .fc-picking-event.picking-none {
        background-color: #999;
        border-color: #999;
    }

        .fc-picking-event.picking-none:hover, .fc-picking-event.picking-none:focus, .fc-picking-event.picking-none.fc-disabled {
            color: #333 !important;
            border-color: #ddd !important;
            background-color: #ddd !important;
            outline: none !important;
        }

    .fc-picking-event.fc-disabled {
        cursor: default !important
    }

 .fc-picking-week {
    padding: .15rem .75rem;
    font-size: 1rem;
    cursor: default !important;
    background-color: #CAEEFB !important;
    border-color: #CAEEFB !important;
 }
 
    .fc-picking-week.picking-week-none {
        background-color: #E8E8E8 !important;
        border-color: #E8E8E8 !important;
    }

/* -----------------------------
   - マイページ -
 -------------------------------*/
#btn-output {
    color: #fff;
    background-color: #99cc00;
    border-color: #99cc00;
}

    #btn-output:hover {
        color: #fff;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

#btn-contract {
    color: #fff;
    background-color: #3333ff;
    border-color: #3333ff;
}
    #btn-contract:hover {
        color: #fff;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

#btn-info {
    color: #fff;
    background-color: #e666ff;
    border-color: #e666ff;
}
    #btn-info:hover {
        color: #fff;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

#btn-password {
    color: #fff;
    background-color: #ff66b3;
    border-color: #ff66b3;
}

    #btn-password a {
        color: #fff;
    }

    #btn-password:hover {
        color: #fff;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

#btn-plan {
    color: #fff;
    background-color: #e8383d;
    border-color: #e8383d;
}

    #btn-plan:hover {
        color: #fff;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

/* -----------------------------
   - Thomas連携　出荷指示・実績 -
 -------------------------------*/


.table-responsive-thomasDelivery {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: visible !important;
    position: relative;
}

#gbox_jqGrid_thomasDeliveryList {
    min-width: 1395px;
    position: relative;
}
.thomasDelivery-label {
    text-align: right;
    margin-right: 10px;
}
.instruction-status-2 {
    background-color: #FFD1D1 !important; /* 要再出力 */
}
.instruction-status-3 {
    background-color: #D2EFFE !important; /* 出荷キャンセル */
}

.thomasDelivery-hide-checkbox td input[type="checkbox"] {
    display: none !important;
}

/* -----------------------------
   - Thomas連携　入荷指示・実績 -
 -------------------------------*/


.table-responsive-thomasArrival {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: visible !important;
    position: relative;
}

#gbox_jqGrid_thomasArrivalList {
    position: relative;
    min-width: 1425px;
}

.thomasArrival-label {
    text-align: right;
    margin-right: 10px;
}

.instruction-status-2 {
    background-color: #FFD1D1 !important; /* 要再出力 */
}

.cancel-flg-1 {
    background-color: #D2EFFE !important; /* 要再出力 */
}

    .cancel-flg-1 td input[type="checkbox"] {
        display: none !important;
    }

/*------------------------
 Media Queries Mobile Devices
 --------------------------*/
/* スマートフォン */
@media only screen and (max-width: 599px) { /* (max-width: 785px){*/
    /*今回は考慮しない*/
}

/* タブレット */
@media only screen and (max-width: 1024px) { /*(min-width: 786px){*/
	.content-container,
	.header-container,
	h1 {
		width:95%;
	}

    /* bootstrap上書き */
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1024px;
    }

    /* -----------------
        ログイン画面 
    -------------------*/
    .login {
        margin: 50px 5px 0 5px;
        justify-content: flex-start;
    }

    div.header-container {
        /*padding: 0 10px;
        padding-left:60px;*/
    }
        div.header-container #system_logo {
            /*display: none;*/
        }

        div.header-container #system_logo_mini {
            /*display: block;*/
        }
    .responsive-div {
        width: 100%;
    }
        .responsive-div div.scroll {
            overflow-x: scroll;
        }
    .w1000px {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 1025px) {
    .content-container,
    .header-container,
    h1 {
        width: 1024px;
    }

    /* bootstrap上書き */
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1024px;
    }

    /* 保存ボタン位置 */
    .button-container-right {
        /* margin: 0 300px;*/
    }
}

/* -----------------------------
   - チャット画面 -
 -------------------------------*/

 .chat-content{
    margin-top: 30px;
    height: 600px;
    display: flex;
    position:relative;
 }

 .chat-left-content{
    width: 25%;
    height: 520px;
    overflow-y:scroll;
}

.user-list input[type="radio"]:checked + label {
    background: var(--header-bg-color);
}


.chat-right-content {
    width: 75%;
    height: 520px;
    background-color: var(--header-bg-color);
    margin-right: 0%;
}

/*    .chat-right-content .btn {
        width: 45px;
        height: 30px;
        border-radius: 15px;
        font-size: 13px;
        padding:0;
    }*/


.user-list input{
	display: none;
}
.user-list{	
	width: 100%;	
}

.user-list label{
	display: block;
	cursor: pointer;
	height: auto;
	margin: 0 3px;
	padding: 20px 15px;
    /*padding-top: 20px;*/
	border: 1px double #ccc;
	background: #fff;
	color: #555e64;
	text-align: left;
    font-size: 17px;
	line-height: 1;
}

.receive-message{
    max-width: 350px;
    margin-left: 20px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top:10px;
}

.send-message {
    max-width: 350px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: auto;
}

#message-container .read {
    font-size: 0.8em;
    margin-right: 5px;
}

.message {
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    width: 340px;
    overflow-wrap: break-word;
}

.message-attachment {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 3px;
    padding: 5px 20px;
    max-width: 300px;
}
.send-container{
    height: 100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.send-container textarea{
    width:80%;
    resize:none;
    /*height:inherit;*/
    line-height:1.2em;
}

    .send-container .btn {
        font-size: 0.9em;
        height: 40px;
    }

.send-attachment-container {
    height: auto;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.message-container{
    width: 100%;
    height: 380px;
    overflow: auto;
}

/*.chat-btn {
    width: 45px;
    height: 30px;
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}*/

.message-reload {
    margin: 5px auto;
    padding: 5px;
    width: 50px;
}
    .message-reload label {
        cursor: pointer;
        text-decoration: underline;
    }

.newPoint {
    width: 8px;
    height: 8px;
    background-color: #fcbc2c;
    border-radius: 50%;
    /*display: inline-block;*/
    margin-left: 5px;
}


.lH15em {
    line-height:1.5em !important;
}

.errMsg {
    color: red;
    margin: 5px;
    text-align: left;
}

.icon {
    font-size: 24px;
    color: #333; /* 初期のアイコンの色 */
    transition: color 0.3s ease; /* アニメーションの時間とイージングを設定 */
}

    .icon:hover {
        color: #ff0000; /* ホバー時のアイコンの色 */
        cursor:pointer;
    }
    .icon[disabled]{
        color:#cccccc;
        pointer-events:none;
    }
    .icon.no-hover:hover {
        color: #333 !important; /* 色を継承 */
        cursor: default !important; /* カーソルを通常に戻す */
    }

.hidden {
    display: none;
}

/* メニュー作成画面のマウスホバー */
#tbl_menu_body tr:hover td:nth-child(1),
#tbl_menu_body tr:hover td:nth-child(3),
#tbl_menu_body tr:hover td:nth-child(4),
#tbl_menu_body tr:hover td:nth-child(5) {
    cursor: pointer; /* カーソルをポインター（指）に変更 */
}

.nav_lists li:focus {
    outline: none; /* フォーカス時のアウトラインを非表示にする */
}


/* Top画面お知らせアイコン */
.arrow_animation_button {
    display: inline-block;
    position: relative;
    padding: 10px 20px 10px 50px;
    background: #ffa500;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
}

    .arrow_animation_button:hover { /* マウスオーバー時のスタイル */
        /*        background: #ffc966;*/
        opacity: 0.5;
    }

    .arrow_animation_button::before { /* 矢印の表示設定 */
        content: "";
        position: absolute;
        top: 50%; /* 要素の中心に配置 */
        left: 15px;
        transform: translate(-50%, -50%) rotate(45deg); /* 中心からのオフセットと回転 */
        width: 10px; /* 矢印の幅 */
        height: 10px; /* 矢印の高さ */
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        animation: slideBlink 1s linear infinite;
    }

@keyframes slideBlink { 
    from { 
        opacity: 0;
        left: 8px;
    }

    to {
        opacity: 1;
        left: 25px;
    }
}

.info-content {
    margin: 0 0 12px 155px;
    margin-top: 5px;
}

.pdf-link {
    margin-right: 30px;
    margin-left: 5px;
    text-decoration: none; 
    display: inline-block; 
    
    transition: color 0.3s ease; 
}

    .pdf-link:hover {
        text-decoration: underline; 
    }

.info-container {
    max-height: 600px;
    overflow: auto;
}

.delivery-schedule-container {
    height: 300px;
    max-height: 300px;
    overflow: auto;
}

.red {
    background-color: #ef0017;
}


.blue {
    background-color: #008cef;
}


/* ボタンの基本スタイル */ .remove-button {
    display: inline-block;
    height: 30px;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
    /* ボタンのデフォルトスタイル */

    .remove-button.default {
        background-color: #fff;
        color: #555e64;
        border: 2px solid #fff;
    }
        /* ボタンにホバーエフェクトを追加 */

        .remove-button.default:hover {
            color: #fff; /* 白色の文字（ホバー時） */
            transform: scale(1.1); /* 少し拡大する */
        }


.esNotice1 {
    color: #fff;
    line-height: 2.5;
    background: #fb0000;
    border-radius: 4px;
    margin: 24px auto;
    padding: 6px 8px;
}

.doneMsg {
    width: 70%;
    text-align: center;
    background: #ffedcb;
    border-radius: 5px;
    margin: 24px auto;
    padding: 10px 0;
}

/* メニュー紹介Specialアイコン */
.specialIcon {
    font-size: 83.33%;
    color: #fff;
    white-space: nowrap;
    border-radius: 3px;
    margin: 0 0 0 4px;
    padding: 2px 4px;
}

/* メニュー紹介200円商品アイコン */
.lIcon200 {
    font-size: 83.33%;
    color: #fff;
    white-space: nowrap;
    border-radius: 3px;
    padding: 3px 4px;
}

.upDownIcon {
    margin: 0px 0px 2px 8px;
    display: inline-block;
    animation: upDownAndMoveGradient 3s infinite linear;
    height: 15.33px;
    line-height: 10.5px;
    vertical-align: middle;
    background: linear-gradient(90deg, #37d369, #43af3e, #43af3e, #43af3e, #37d369, #43af3e, #289528, #43af3e, #37d369, #43af3e);
    background-size: 600% 600%;
}

.gradientIcon {
    margin: 0 0 1px 4px;
    display: inline-block;
    animation: moveGradient 3s infinite linear;
    height: 13.9px;
    line-height: 8.5px;
    vertical-align: middle;
    background: linear-gradient(90deg, #37d369, #43af3e, #43af3e, #43af3e, #37d369, #43af3e, #289528, #43af3e, #37d369, #43af3e);
    background-size: 600% 600%;
}
/*縦とグラデーション*/
@keyframes upDownAndMoveGradient {
    0% {
        transform: translateY(0);
        background-position: 0% 50%;
    }

    10% {
        transform: translateY(-10px);
    }

    20% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }

    40% {
        transform: translateY(0);
    }

    100% {
        background-position: 54% 50%;
    }
}

/*グラデーション*/
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 54% 50%;
    }
}

.image-a {
    display: inline-block;
    width: 50px;
    height: 100%;
    /*overflow: hidden;*/
}
.image-deliver {
    width: 100%;
    height: 100%;
}

.file-upload-btn {
    border: none;
    background-color: #f1b3b9;
    color: #333;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    transition: background-color 0.3s ease; 
}
    .file-upload-btn:hover {
        background-color: #ffcccc;
    }

label[for="fileName"] {
    color: #333;
    transition: color 0.3s ease;
}

    label[for="fileName"]:hover {
        color: #ff0000; 
    }

.vaM th {
    text-align: center;
}


.fc-event-main div {
    overflow: hidden;
}

/*ラベル点滅(赤)*/
@keyframes highlight {
    0%, 100% {
        background-color: rgb(248, 8, 8);
    }
    50% {
        background-color: rgb(248, 108, 108);
    }
}

.blink {
    animation: highlight 1s linear infinite;
}

.aiParameterList > label, .aiParameterList > input {
    vertical-align: middle;
    padding-top:5px;
    padding-bottom:5px;
    line-height:1.5em;
}

/*スケジュール月移動ボタン*/
.fc .scheduler-btn-default,
.fc .fc-dayGridMonth-button,
.fc .fc-dayGridWeek-button {
    color: #fff;
    background-color: #999;
    -webkit-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #999;
    padding: 0.4em 0.65em;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 0.25em;
    margin-left: -1px;
    overflow: visible;
    text-transform: none;
    margin: 0;
    font-family: inherit;
}

.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    color: #333;
    border-color: #ddd;
    background-color: #ddd;
    outline: none !important;
}

    .fc .scheduler-btn-default:hover,
    .scheduler-scheduler-btn-default:focus,
    .scheduler-scheduler-btn-default:active:focus,
    .fc .fc-dayGridMonth-button:hover,
    .fc .fc-dayGridMonth-button:focus,
    .fc .fc-dayGridMonth-button:active:focus,
    .fc .fc-dayGridWeek-button:hover,
    .fc .fc-dayGridWeek-button:focus,
    .fc .fc-dayGridWeek-button:active:focus {
        color: #333;
        border-color: #ddd;
        background-color: #ddd;
        outline: none !important;
    }

#messageBox {
    width: 640px;
    height: auto;
    text-align: center;
    background: #fff;
    border: 4px solid #e8383d;
    border-radius: 12px;
    margin: 6px auto 24px auto;
    padding: 16px 0;
}

    #messageBox p {
        font-size: 117%;
        margin: 30px auto;
    }


/* 利用規約 */
#kiyakuUnit p {
    margin: 0 0 6px 0;
}

.kiyakuBox {
   
    height: 200px;
    border: 1px solid #dfdfdf;
    margin: 0 auto 12px auto;
    padding: 12px;
    overflow-y: auto;
    outline: none;
}

    .kiyakuBox p.headline {
        font-size: 100%;
    }

    .kiyakuBox p {
        font-size: 85.71%;
    }

.download-link {
    color: red;
    padding: 5px;
    text-decoration: none; 
    transition: background-color 0.3s ease-in-out; 
}

    .download-link:hover {
        background-color: #f2f2f2;
        color: red; 
        padding: 5px; 
        text-decoration: none; 
    }

/* -----------------------------
            　　備考欄
    -------------------------------*/
.memo {
    /*枠をはみ出ても自動で改行する*/
    overflow-wrap: break-word;
    max-width: 572px;
}
.memoLarge {
    /*枠をはみ出ても自動で改行する*/
    overflow-wrap: break-word;
    max-width: 770px;
}


.deliveryImgP {
    line-height: 1.5;
    text-align: center;
}