/*+発注・仕入・分荷：発注リストCSS*/
table,ul{
    margin-bottom: 0;
}

ul{
    color: black;
}

img{
    height: fit-content;
}

h4,h5{
    font-weight: normal;
    color: black;
    margin-bottom: 0;
}

/*main.css labelのチェックボックスを見えなくす*/
input[type="checkbox"]+label:before{
    display: none;
}

/*main.css labelのpadding消す*/
input[type="checkbox"]+label, input[type="radio"]+label{
    padding: 0;
    display: block;/*inline-blockだと見出しの幅が短くなる*/
}

/*+発注リスト order_list*/
/*+発注リスト検索画面*/
/*//上部リンク nav_list*/
.nav_list ul{
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

.nav_list ul li{
    width: fit-content;
    height: 30px;
    line-height: 30px;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #564E9E;
    border: 1px solid #564E9E;
    border-radius: 3px;
    padding: 0 0.8em;
    position: relative;
    z-index: 1;
    overflow: hidden;/*はみ出し防止*/
}

.nav_list ul li::before{
    content: "";
    display: inline-block;
    inset: 0;/*親とぴったりのサイズ */
    background-color: #DCDCDC;
    border-radius: inherit; /* 親と同じ角丸*/
    position: absolute;
    z-index: -2;
}

.nav_list ul li::after{
    content: "";
    display: inline-block;
    inset: 0;/*親とぴったりのサイズ*/
    background-color: #F5F5F5;
    border-radius: inherit; /* 親と同じ角丸*/
    position: absolute;
    top: 1px;
    left: 5px;
    z-index: -1;
}

.nav_list p{
    width: 100%;
    padding-left: 1em;
    margin-top: 1em;
}

/**伝票種別 order_list div_1*/
.order_list .div_1 .d_1{
    margin-bottom: 2em;
}

.order_list .div_1 .d_1 p{
    width: 40%;
}

.order_list .div_1 .d_1 img{
    width: 37%;
    margin-left: 5%;
}

.order_list .div_1 h4{
    width: 100%;
    padding-left: 1em;
}

/*h4左丸*/
.order_list .div_1 h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.order_list .div_1 .d_2{
    justify-content: space-between;
}

.order_list .div_1 .d_2 div{
    width: 48%;
}

/**納入先 order_list div_2*/
.order_list .div_2 .div_flex .d_1{
    width: 67%;
}

.order_list .div_2 .div_flex .d_1 ul{
    width: 100%;
    margin-top: 1em;
    margin-bottom: 4em;
}

.order_list .div_2 .div_flex .d_1 ul li{
    width: 75%;
    line-height: 2em;
    display: flex;
    justify-content: space-between;
}

.order_list .div_2 .div_flex .d_1 ul li .spa_1{
    text-decoration: underline;
}

.order_list .div_2 .div_flex .d_1 ul li .spa_2{
    width: 83%;
}

/*権限レベル「９」*/
.order_list .div_2 .div_flex .d_1 p span{
    color: red;
}

.order_list .div_2 .div_flex .d_2{
    width: 25%;
    margin-left: 3%;
}

.order_list .div_2 .div_flex .d_2 h4{
    width: 100%;
    margin-bottom: 0.3em;
}

/*h4左丸*/
.order_list .div_2 .div_flex .d_2 h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.order_list .div_2 .div_flex .d_2 img{
    width: 100%;
    margin-right: 0;
}

.order_list .div_2 .div_flex .d_2 img:first-of-type{
    margin-bottom: 1em;
}

/**仕入先コード order_list div_3*/
.order_list .div_3 img{
    width: 65%;
}

.order_list .div_3 p{
    width: 100%;
    padding-left: 1em;
}

/**帳票表示項目 指定期間*/
/*//帳票表示項目 order_list div_4*/
.order_list .div_4 img{
    width: 65%;
    margin-bottom: 1em;
}

.order_list .div_4 p{
    width: 95%;
    margin: 0 auto;
}

/*//指定期間 order_list div_5*/
.order_list .div_5 img{
    width: 85%;
    margin-bottom: 1em;
}

.order_list .div_5 p{
    width: 95%;
    margin: 0 auto;
}

/**ソート順 order_list div_6*/
.order_list .div_6 .div_flex p{
    width: 43%;
}
.order_list .div_6 .div_flex img{
    width: 35%;
    margin-left: 8%;
}

/**発注番号 order_list div_7*/
.order_list .div_7 .div_flex p{
    width: 43%;
}
.order_list .div_7 .div_flex img{
    width: 45%;
    margin-left: 8%;
}

/**検索キー order_list div_8*/
.order_list .div_8{
    position: relative;
}

.order_list .div_8 .div_flex{
    justify-content: space-between;
}

.order_list .div_8 .div_flex img{
    width: 40%;
    padding-bottom: 4em;/*table分余白*/
    margin: 0;
}

.order_list .div_8 table{
    width: 62%;
    font-size: 14px;
    margin-left: 2em;
    position: absolute;
    top: 30%;
}

.order_list .div_8 table th{
    width: 7.5em;
}

.order_list .div_8 table td{
    padding: 0.5em 0.23em;
}

.order_list .div_8 > p:last-of-type{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

/**商品表示 order_list div_9*/
.order_list .div_9 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.order_list .div_9 .div_flex p{
    width: 42%;
}

.order_list .div_9 .div_flex img{
    width: 35%;
    margin-left: 9%;
}

.order_list .div_9 div:last-of-type{
    width: 95%;
    margin: 0 auto;
}

/*h4左丸*/
.order_list .div_9 h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

/*画像サイズ：商品表示「する」*/
img[data-original="../../4-inventory/4-3-002/img/item_view_2.png"]{
    width: 97%;
    margin-bottom: 1.5em;
}

/*画像サイズ：商品表示「しない」*/
img[data-original="../../4-inventory/4-3-002/img/item_view_3.png"]{
    width: 80%;
    margin-left: 1.5%;
}

/**画像表示 order_list div_10*/
.order_list .div_10 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.order_list .div_10 .div_flex{
    width: 70%;
    align-items: center;
    position: relative/*右向き矢印の親*/;
}

/*画像サイズ：商品表示「する」、画像表示「する」*/
img[data-original="../../4-inventory/4-3-002/img/image_view_1.png"]{
    width: 35%;
    margin-left: 0;
}

/*右向き矢印*/
.order_list .div_10 .div_flex .arrow::before{
    content: "→";
    display: inline-block;
    font-size: 45px;
    font-weight: bold;
    color: black;
    position: absolute;
    top: 25%;
    left: 50%;
}

/*画像サイズ：商品表示「する」、画像表示「する」*/
img[data-original="../../4-inventory/4-3-002/img/image_view_1.png"]{
    width: 45%;
}

/*画像サイズ：一覧に画像を表示*/
img[data-original="../../4-inventory/4-3-002/img/image_view_2.png"]{
    width: 30%;
}

/*+詳細検索　データダウンロード advanced_search*/
/**表示項目 advanced_search table_1 table_2*/
.advanced_search table th{
    width: 10%;
}

.advanced_search table td{
    width: calc(50% - 10%);
}

.advanced_search .table_1 .tr_2 td span{
    display: inline-block;
    font-size: 15px;
    color: #3d4449;
}

/*//以下は伝票種別「発注済伝票」、商品表示「する」を選択したときのみ表示されます。tr_6*/
.advanced_search .table_2 .tr_1 th{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 18px;
    
    color: #3D4449;
    background-color: #ECECFF;
    padding-left: 1em;
}

/**カテゴリ advanced_search div_1*/
.advanced_search .div_1 p{
    width: 100%;
    padding-left: 1em;
}

/**データダウンロード advanced_search table_3*/
.advanced_search .table_3 th{
    width: 10%;
}

.advanced_search .table_3 td{
    width: calc(50% - 10%);
}

.advanced_search .table_3 td img{
    margin-top: 0.3em;
    margin-right: 5%;
}

/*画像サイズ：形式*/
img[data-original="../../4-inventory/4-3-002/img/download_1.png"]{
    width: 25%;
}

/*画像サイズ：ヘッダー*/
img[data-original="../../4-inventory/4-3-002/img/download_2.png"]{
    width: 20%;
}

/*+未発注伝票 pending_orders*/
/**未発注伝票の検索 pending_orders div_1*/
.pending_orders .div_1 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 2em;
}

.pending_orders .div_1 div{
    width: 90%;
    margin: 0 auto;
}

.pending_orders .div_1 div:not(div:last-of-type){
    margin-bottom: 3%;
}

.pending_orders .div_1 div h4{
    width: 100%;
    margin-bottom: 0.5em;
}

/*h4左丸*/
.pending_orders .div_1 div h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.pending_orders .div_1 div img{
    width: 70%;
}

/*発注処理ボタン*/
.pending_orders .div_1 >p:last-of-type span{
    display: inline-block;
    width: 6.5em;
    height: 38px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.3em;
    font-family: "ＭＳ Ｐゴシック", sans-serif;    
    color: white;
    background-color: #564E9E;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*//納入先の選択について pending_orders div_2*/
.pending_orders .div_2 > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.pending_orders .div_2 div{
    width: 95%;
    margin: 0 auto;
}

.pending_orders .div_2 div:first-of-type{
    margin-bottom: 1.5em;
}

/*h4左丸*/
.pending_orders .div_2 div h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.pending_orders .div_2 div p{
    width: 100%;
    padding-left: 1em;
}


/*+発注処理 order*/
/**未発注画面　発注確認画面 order div_1*/
.order .div_1 .d_1 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.order .div_1 .d_1 .img_flex{
    width: 98%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;/*右向き矢印の親*/
}

.order .div_1 .d_1 .img_flex img{
    margin: 0;
}

/* 画像サイズ：発注処理をクリック*/
img[data-original="../../4-inventory/4-3-002/img/order_1.png"]{
    width: 37%;
    padding-top: 3.8%;
}

/*右向き矢印*/
.order .div_1 .d_1 .img_flex .arrow::before{
    content: "→";
    display: inline-block;
    font-size: 35px;
    font-weight: bold;
    color: black;
    position: absolute;
    top: 50%;
    transform: translateY(-50px);
    left: 40%;

}

/* 画像サイズ：商品ごとの発注内容詳細*/
img[data-original="../../4-inventory/4-3-002/img/order_2.png"]{
    width: 55%;
}

/*//商品ごとの発注内容詳細 .order .div_1 .d_2*/
/*線 幅 位置*/
.order .div_1 .d_2{
    width: 98%;
    padding-bottom: 0;
    margin: 0 auto;
    margin-bottom: 2em;
}

/*いらない余白*/
.order .div_1 .d_2 .com_border{
    padding-bottom: 0;
}

/*__トグルメニュー toggle_1*/
/* チェックが入ったら（クリックしたら）開く*/
.toggle_1:checked ~ .div_toggle {
    max-height: 1100px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

/*閉じてる時の下線*/
.order .div_1 .d_2 .com_h5{
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

/*開いた時の下線*/
.toggle_1:checked + .label_h4 .com_h5{
    border-bottom: 1px solid #D8DCDE;
}

/*メニュー上下の速さ*/
.div_toggle{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out;
}

/* h4をクリック可能にする*/
.label_h4 {
    cursor: pointer;
    display: block;
    width: auto;
}

.label_h4 h4{
    font-weight: bold;
}

/* ▼ ▲ の切り替え */
.toggle_1 + .label_h4 h4::after {
    content: " ▼";
    font-size: 25px;
}

.toggle_1:checked + .label_h4 h4::after {
    content: " ▲";
    font-size: 25px;
}

/*トグル内装飾*/
.order .div_1 .d_2 p{
    width: 100%;
    padding-left: 1em;
    margin-top: 1em;
}

.order .div_1 .d_2 p:nth-of-type(2){
    margin: 1em 0;
}

.order .div_1 .d_2 img{
    width: 55%;
}

.order .div_1 .d_2 p:last-of-type{
    margin: 1em;
}

/*//発注データ作成 order div_1 d_3*/
.order .div_1 .d_3 .div_flex p{
    width: 44%;
}

/*発注データ作成*/
.order .div_1 .d_3 .spa_1{
    display: inline-block;
    width: 12em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.2em;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: white;
    background-color: #564E9E;
    border-radius: 5px;
    margin: 0 0.2em;
}

/*発注データ作成を受付けました。*/
.order .div_1 .d_3 .spa_2{
    display: inline-block;
    width: fit-content;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 21px;
    letter-spacing: -0.05em;
    color: #0000FF;
}

/*印刷画面*/
.order .div_1 .d_3 .spa_3{
    display: inline-block;
    width: fit-content;
    font-weight: bold;
    color: #585A67;
    text-decoration: underline;
    margin: 0 0.2em;
}

.order .div_1 .d_3 .div_flex img{
    width: 40%;
}

/*+発注書印刷画面 order_print*/
.order_print .div_flex{
    width: 98%;
    justify-content: space-between;
}

.order_print .div_flex > div:first-of-type{
    width: 49.5%;
}

.order_print img{
    width: 49%;
}

/**発注書 各項目  order_print table_1 table_2*/
.order_print table,
.order_print table p{
    font-size: 14.5px;
}

.order_print .table_1{
    width: 100%;
    margin-bottom: 1em;
}

.order_print .table_1 th,
.order_print .table_2 th{
    width: 11em;
}

/*thの下線*/
.order_print .table_1 th span,
.order_print .table_1 .tr_4 td span{
    display: inline-block;
    width: fit-content;
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

.order_print .table_1 .tr_1 span,
.order_print .table_1 .tr_2 span{
    text-decoration-color: #FF0000;

}

.order_print .table_1 .tr_3  th span{   
    text-decoration-color: #0084FF;
}

.order_print .table_1 .tr_4 span{
    text-decoration-color: #6FD63F;
}

.order_print .table_1 .tr_4 td span{
    text-decoration-color: #ff6d01;
}

/*本部情報 tr_4*/
.order_print .table_1 .tr_4 td div:first-of-type{
    margin-bottom: 1em;
}

.order_print .table_1 .tr_4 img{
    width: 70%;
    margin-bottom: 0.5em;
}

/*備考・納期登録*/
.order_print > div:first-of-type > p:last-child{
    width: 100%;
    padding-left: 1em;
    margin-top: 1em;
}

.order_print > div:first-of-type > p:last-child span{
    display: inline-block;
    width: 9em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.2em;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: white;
    background-color: #564E9E;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*//PDF出力 order_print pdf*/
.order_print .pdf .div_flex{
    width: 98%;
    justify-content: space-between;
}

.order_print .pdf .div_flex div{
    width: 49%;
}

/*PDF出力*/
.order_print .pdf p span{
    display: inline-block;
    width: 6.5em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.2em;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: white;
    background-color: #564E9E;
    border-radius: 3px;
    margin: 0 0.2em;
}

.order_print .pdf .div_flex div ul{
    width: 95%;
    margin-top: 1em;
}

.order_print .pdf .div_flex div ul li:first-of-type{
    margin-bottom: 1em;
}


.order_print .pdf img{
    width: 49%;
}

/*+発注済伝票 order_slip*/
.order_slip > p:first-of-type{
    width: 100%;
    padding-left: 1em;
}

/**リスト上部のボタンのついて order_slip div_1*/
.order_slip .div_1 div{
    width: 95%;
    margin: 0 auto;
}

.order_slip .div_1 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.order_slip .div_1 .d_1{
    margin-bottom: 2em;
}

/*商蔵奉行用CSVボタン*/
.order_slip .div_1 .d_1 span{
    display: inline-block;
    width: 10em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.18em;
    font-weight: normal;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: white;
    background-color: #564E9E;
    border-radius: 3px;
}

.order_slip .div_1 .d_1 img{
    width: 65%;
}

/*発注明細一括CSVダウンロードボタン*/
.order_slip .div_1 .d_2 span{
    display: inline-block;
    width: 18em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.18em;
    font-weight: normal;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: white;
    background-color: #564E9E;
    border-radius: 3px;
    margin-bottom: 0.5em;
}

/**発注済伝票表示項目 order_slip div_2*/
.order_slip .div_2{
    font-size: 15px;
}

/*p左丸*/
.order_slip .div_2 p::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.order_slip .div_2 table th{
    width: 9%;
}

.order_slip .div_2 table td{
    width: calc(50% - 9%);
}

.order_slip .div_2 .table_1{
    margin-bottom: 1.5em;
}

.order_slip .div_2 .table_1 ul{
    padding: 0;
    margin: 0;
}

.order_slip .div_2 .table_1 li{
    padding: 0;
}

.order_slip .div_2 .table_1 li span{
    text-decoration: underline;
}

.order_slip .div_2 .table_1 li span::before{
    content: "・";
    display: inline-block;
}

.order_slip .div_2 .table_1 .tr_7 td > span:last-child{
    display: inline-block;
    width: 100%;
    font-size: 17px;
    text-align: right;
    padding-right: 10%;
}

.order_slip .div_2 .table_2{
    margin-bottom: 1.5em;
}

/**発注済伝票リストの操作について order_slip div_3*/
.order_slip .div_3 table th{
    width: 9%;
}

/*ボタン装飾*/
.order_slip .div_3 table .tr_3 th span,
.order_slip .div_3 table .tr_4 th span,
.order_slip .div_3 table .tr_5 th span,
.order_slip .div_3 table .tr_6 th span{
    display: inline-block;
    width: fit-content;
    height: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.18em;
    font-weight: normal;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    color: white;
    background-color: #564E9E;
    border-radius: 3px;
    padding: 0 0.8em;
}

/*※*/
.order_slip .div_3 table .tr_5 td span{
    color: red;
}

/*編集画面*/
.order_slip .div_3 table .tr_6 td .spa_1{
    display: inline-block;
    color: #585A67;
    text-decoration: underline;
    margin-right: 0.2em;
}