/*+商品情報：商品一覧編集CSS*/
table,ul, ul li{
    color: black;
    padding: 0;
    margin: 0;
}

.button{
    all: unset;
}

.button:hover{
    background-color: unset;
}

/*+表示条件 filter*/
/**期間 filter div_1*/
.filter .div_1 .div_flex div{
    width: 50%;
}

.filter .div_1 .div_flex div table,
.filter .div_1 .div_flex div .d_1{
    width: 100%;
}


/*//発売日～日付指定を無視 filter div_1 d_1*/
.filter .div_1 .div_flex div .d_1{
    margin-top: 2em;
}

.filter .div_1 .div_flex div .d_1 p{
    width: 100%;
    margin-bottom: 0.5em;
}

/**商品区分大・中・小 item_category*/
/*アイコン*/
.item_category table th span{
    display: inline-block;
    font-size: 45px;
    line-height: 1;
    color: #585A67;
}

/**部門選択 dept_selection*/
.dept_selection > p:first-of-type{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.dept_selection p > span:first-of-type{
    display: inline-flex;
    justify-content: space-between;
    width: 4.3em;
    text-align: center;
    align-items: center;
}

/*()*/
.dept_selection p > span:first-of-type::before{
    content: "（";
    font-size: 1.2em;
    color: #585A67;
}

.dept_selection p > span:first-of-type::after{
    content: "）";
    font-size: 1.2em;
    color: #585A67;
}

/*＋*/
.dept_selection p .fa-plus{
    font-size: 1.8em;
    color: #585A67;
    line-height: 1;
    margin-right: 0.2em;
}

.dept_selection .div_flex{
    justify-content: space-between;
    margin: 0 auto;
}

.dept_selection table{
    width: 50%;
    height: fit-content;
}

.dept_selection table th{
    width: 25%;
}

/*アイコン*/
.dept_selection table th span{
    display: inline-block;
    font-size: 45px;
    line-height: 1;
    color: #585A67;
}

/*clearボタン*/
.dept_selection table tr:first-of-type th img{
    padding: 0.3em 0;
    margin: 0 auto;
}

/*ALL*/
.dept_selection table tr:last-of-type th{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.3em;
}

/*img 部門選択*/
#img_dept_selection{
    height: fit-content;
}

/**キーワード keyword*/
.keyword p{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.keyword table{
    width: 50%;
    height: fit-content;
}

.keyword table th{
    width: 25%;
    padding: 0.5em 0;
}

/**項目選択 item_selection*/
.item_selection p{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
} 

.item_selection .div_flex > div:first-of-type{
    width: 50%;
}

.item_selection .table_1{
    width: 100%;
    margin-bottom: 2em;
}

.item_selection table th{
    width: 25%;
}

/*非表示アイコン*/
.fa-close{
    font-size: 55px;
    color: #585A67;
    line-height: 1;
}

/*==全選択 check_all*/
/*チェックありアイコン*/
.check_all .fa-check-square-o{
    font-size: 1.5em;
    color: #363640;
    margin-right: 0.4em;
}

/*==全解除 uncheck_all*/
/*チェックなしアイコン*/
.uncheck_all .fa-square-o{
    font-size: 1.55em;
    color: #363640;
    margin-right: 0.5em;
}

/*==適用ボタン table_1 apply*/
.table_1 .apply th{
    padding: 0.5em 0;
}

.table_1 .apply th img{
    margin-left: 3%;
}

/*__トグルメニュー items_list toggle_1*/
/*//設定リセット*/
/*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だと見出しの幅が短くなる*/
}

/*線 幅 位置*/
.items_list{
    width: 100%;
    padding-bottom: 0;
    margin: 0 auto;
    margin-top: 0.5em;
}

.items_list .com_h5{
    height: 35px;
    line-height: 35px;
    font-weight: 900;
    padding-left: 1em;
    margin-bottom: 0;
}

/* チェックが入ったら（クリックしたら）開く*/
.toggle_1:checked ~ .div_toggle {
    max-height: 2000px; /* table全体表示 pxじゃないと滑らかに動かない*/
    padding-bottom: 1em;
}

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

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

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

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

/*トグルの中身装飾*/
.items_list table tr:first-of-type th,
.items_list table tr:first-of-type td{
    border-top: none;
}

.items_list table th{
    width: 25%;
    font-size: 15px;
}

.items_list table td{
    font-size: 14px;
}

/**表示条件設定 disp_cond_setting*/
.disp_cond_setting p{
    width: 56%;
}

/*閉じるボタン*/
.disp_cond_setting .fa-close{
    font-size: 1.6em;
    line-height: 1;
    color: #585A67;

}

/*img 表示条件設定*/
#img_disp_cond_setting{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-left: 4%;
}

/*+商品一覧画面*/
/*//上部リンク nav_list*/
.nav_list ul{
    width: 98%;
    display: flex;
    justify-content: space-around;
    color: black;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 1.5em;
}

.nav_list ul li{
    width: 7.4em;
    height: 30px;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.2em;
}

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

/**各操作ボタン each_operation_button*/
.each_operation_button th{
    width: 23%;
}

/*編集内容の登録~チェックした行の削除*/
.button{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    letter-spacing: 0.2em;
    font-family: 'FontAwesome';
    font-size: medium;
    color: white;
    border-radius: 9px;
    margin: 0.3em auto;
}

/*すべての商品を選択、すべての商品を解除*/
.button_2{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    color: #808080;
}

/*簡易表示（商品名＋各種売価）、部門選択*/
.button_3{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #363640;
}

/*==編集内容の登録 each_operation_button save*/
.each_operation_button .fa-database{
    width: 11em;
    background-color: #3F5DA5;
}

.each_operation_button .save td a{
    display: inline-block;
    width: fit-content;
    margin-left: 7%;
}

/*==CSV出力 each_operation_button csv*/
.each_operation_button .fa-file-excel-o{
    width: 7em;
    background-color: #2F4F4F;
}

/*==チェックした行の削除 each_operation_button delete_row*/
.each_operation_button .fa-close{
    width: 14.5em;
    background-color: #800000;
}

.each_operation_button .delete_row td a{
    display: inline-block;
    width: fit-content;
    margin-left: 7%;
}

/*==すべての商品を選択 each_operation_button select_all_products*/
.each_operation_button .select_all_products th{
    font-family: YuGothicM, YuGothic, Meiryo, sans-serif;
}

.each_operation_button .fa-check-square-o{
    font-size: 20px;
    vertical-align: text-top;
    position: relative;
    top: -4px;
}

/*==すべての商品を解除 each_operation_button deselect_all_products*/
.each_operation_button .deselect_all_products th{
    font-family: 'FontAwesome';
}

.each_operation_button .fa-square-o{
    font-size: 20px;
}

/*==簡易表示（商品名＋各種売価） each_operation_button simple_display*/
.each_operation_button .simple_display .div_flex{
    width: 93%;
    justify-content: space-between;
    margin: 0.5em auto;
}

.each_operation_button .simple_display .div_flex ul{
    list-style-type: disc;
}

.each_operation_button .simple_display .div_flex .ul_1{
    width: 10em;
}

.each_operation_button .simple_display .div_flex .ul_2{
    flex: 1;
}

/*適用ボタン*/
.each_operation_button .simple_display p span{
    display: inline-block;
    width: 15em;
    height: 25px;
    line-height: 25px;
    font-size: 15px ;
    text-align: center;
    border-left: 2px solid #545454;
    border-top: 2px solid#545454;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-radius: 6px;
    background-color: #F5F5F5;
    margin-right: 0.3em;
}

/*==部門選択 each_operation_button dept_selection*/
.dept_selection .fa-plus{
    font-size: 21px;
    margin-right: 0;
}

/**検索結果一覧 search_results*/
.search_results .div_img{
    width: 99%;
    margin: 0 auto;
}

.search_results h4{
    color: black;
    font-size: 20px;
    margin-bottom: 0;
}

.search_results h5{
    font-weight: 400;
    color: black;
}

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

.search_results .div_img img{
    width: 85%;
    margin-bottom: 0.7em;
}

#img_search_results_1{
    margin-left: 0;
}
#img_search_results_2{
    margin-left: 3.75%;
}
#img_search_results_3{
    margin-right: 3.75%;
}
#img_search_results_4{
    margin: 0 0 0 auto;
}

/*//一覧の見方 viewing_guide*/
.viewing_guide{
    width: 95%;
    margin: 0 auto;
}

.viewing_guide p{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.viewing_guide p span{
    text-decoration: underline;
    text-decoration-color: red;
}

.viewing_guide .div_1,
.viewing_guide .div_2{
    width: 70%;
    margin-left: 2.5%;
}

.viewing_guide .div_1{
    justify-content: space-between;
    margin-bottom: 1em;
}

/*商品コード 横幅*/
.viewing_guide .div_1 .d_1{
    flex: 0.95;
}

/*税抜金額 横幅*/
.viewing_guide .div_1 .d_2{
    width: 35%;
}

/*登録日 横幅*/
.viewing_guide .div_2 .d_1{
    flex: 1;
}

/*税種別 横幅*/
.viewing_guide .div_2 .d_2{
    width: 35%;
}

/*商品コード画像サイズ*/
.viewing_guide .div_1 .d_1 img{
    width: 45%;
}

/*税抜金額画像サイズ*/
.viewing_guide .div_1 .d_2 img{
    width: 40%;
}

/*登録日サイズ*/
.viewing_guide .div_2 .d_1 img{
    width: 20%;
    margin: 0 2%;

}

/*税種別サイズ*/
.viewing_guide .div_2 .d_2 img{
    width: 41%;
}

/*//一覧の編集と登録 edit_list*/
.edit_list{
    width: 95%;
    margin: 0 auto;
}

.edit_list p{
    width: 100%;
    margin-bottom: 1em;
}

.edit_list p span{
    display: inline-block;
    width: 3em;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

/*黄色*/
.edit_list .yellow{
    background-color: #FFFACD;
    margin-left: 0.2em;
}

/*赤*/
.edit_list .red{
    color: black;
    background-color: #FF4C42;
    margin: 0 0.2em;
}

/*編集内容の登録ボタン*/
.edit_list p .button{
    width: 11em;
    background-color: #3F5DA5;
    margin-right: 0.2em;
}

/*登録必須項目 セルの色について幅*/
.edit_list .div_1,
.edit_list .div_2{
    width: 95%;
    margin: 0 auto;
}

.edit_list .div_1{
    margin-bottom: 1em;
}

.edit_list .div_1 ul{
    width: 50%;
    display: flex;
    justify-content: space-around;
}

.edit_list .div_1 ul li{
    width: 7em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-family: 'FontAwesome';
    color: #222222;
    border: 1px solid #CCCCCC;
    background-color: #F0F0F0;
}

/*セルの色について*/
.edit_list .div_2 table{
    width: 70%;
    margin-left: 1.5%;
}

.edit_list .div_2 table th{
    width: 22%;
}

.edit_list .div_2 table td{
    width: 28%;
    text-align: center;
}

.edit_list .div_2 table td span{
    display: inline-block;
    width: 80%;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border: 1px solid #CCCCCC;
}

/*初期表示*/
.edit_list .div_2 table td .spa_1{
    background-color: #EEFAFF;
}

/*選択中のセル*/
.edit_list .div_2 table td .spa_2{
    border: 3px solid #4B89FF;
    background-color: #EEFAFF;
}

/*セルの内容を変更（正常）*/
.edit_list .div_2 table td .spa_3{
    color: #BA5B50;
    background-color: #FFFACD;
}

/*セルの内容を変更（エラー）*/
.edit_list .div_2 table td .spa_4{
    color: #A52A2A;
    background-color: #FF4C42;
}

/*//商品情報の削除 delete_product_info*/
.delete_product_info{
    width: 95%;
    margin: 0 auto;
}

.delete_product_info p{
    width: 100%;
    margin-bottom: 1em;
}

/*チェックした行の削除ボタン*/
.delete_product_info .fa-close{
    width: 14.5em;
    text-align: center;
    background-color: #800000;
    margin: 0 0.2em;
}

.delete_product_info p span:last-of-type{
    text-decoration: underline;
    text-decoration-color: red;
}

.delete_product_info .div_flex{
    width: 66.5%;
    margin-left: 4%;
}

/*img 商品情報を削除するには、「選択」欄で削除対象の商品にチェックを付けます。*/
#img_delete_product_info_1{
    width: 40%;
    margin-left: 0;
}

/*img 確認メッセージで「OK」をクリックすると削除が実行されます。*/
#img_delete_product_info_2{
    width: 55%;
    border: 3px solid #F4DED3;
    border-radius: 20px;
    margin: 0 0 0 auto;
}