/*+カテゴリー情報：カテゴリ商品マスタCSS*/
table,ul li{
    color: black;
    padding: 0;
    margin: 0;
}

ul{
    padding: 0;
    margin: 0;
}

table{
    height: fit-content;
}

table .div_flex{
    width: 100%;
}

.button{
    all: unset;
}

/*「カテゴリ表示」を「使用する」に設定している場合のみ利用できます。 div_h1*/
.div_h1 > .div_flex:first-of-type{
    width: 90%;
    justify-content: space-around;
    margin-top: 0.5em;
}

.div_h1 > .div_flex:first-of-type .div_flex{
    width: 45%;
    justify-content: center;
}

.div_h1 > .div_flex:first-of-type .div_flex p{
    width: 15em;
    white-space: nowrap;
}

/*p左丸*/
.div_h1 > .div_flex:first-of-type .div_flex p::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.div_h1 img{
    max-width: 219px;
    width: 100%;
    min-width: 0;
    margin: 0;
}


/*+登録画面の概要*/
/**画面上部の操作 screen_top*/
.screen_top tr:nth-of-type(2) td{
    padding: 1em 0;
}

/*imgカテゴリ商品マスタの画面上部*/
#img_screen_top{
    max-width: 1186px;
    width: 100%;
}

.screen_top th{
    width: 17%;
}

.screen_top th:not(.com_h4_th){
    padding: 0.3em 0
}

/*==商品画像プレビューエリア product_image_preview*/
.product_image_preview th:not{
    padding: 0.4em 0;
}

/*img商品画像プレビューエリア*/
#img_product_image_preview{
    max-width: 195px;
    width: 100%;
}

/*設定、登録、クリア、プレビューボタン*/
.button_1{
    display: inline-block;
    width: 6em;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    text-align: center;
    background-color: #EFEFEF;
    border: 2px solid #AAAAAA;
    border-radius: 5px;
    padding: 0.2em 0;
    margin: 0 0.2em;
}

/**商品情報の入力 product_info_input*/
.product_info_input th{
    width: 10%;
}

/*必須項目*/
.product_info_input th .kome{
    color: #CC3333;
}

.product_info_input td img{
    width: 100%;/*個別にmax-width*/
}

/*img商品情報の入力エリア*/
#img_product_info_input{
    max-width: 1169px;
    margin: 0.5em auto;
}

/*確認ボタン button_2*/
.button_2{
    display: inline-block;
    width: 3.3em;
    line-height: 1.4;
    text-align: center;
    font-family: "ＭＳ Ｐゴシック", sans-serif;    
    background-color: #EFEFEF;
    border: 2px solid #AAAAAA;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*選択・登録ボタン button_3*/
.button_3{
    display: inline-block;
    width: 4.5em;
    line-height: 2;
    text-align: center;
    font-family: "ＭＳ Ｐゴシック", sans-serif;    
    background-color: #EFEFEF;
    border: 2px solid #AAAAAA;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*確定ボタン（小）button_4*/
.button_4{
    display: inline-block;
    width: 7em;
    line-height: 1.4;
    text-align: center;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    background-color: #EFEFEF;
    border: 1px solid #767676;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*確定ボタン（大）button_5*/
.button_5{
    display: inline-block;
    width: 8em;
    line-height: 2;
    text-align: center;
    font-size: 15px;
    font-family: "ＭＳ Ｐゴシック", sans-serif;    
    background-color: #EFEFEF;
    border: 1px solid #767676;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*==部門コード dept_code*/
.dept_code td p{
    flex: 0.5;
}

.dept_code td img{
    max-width: 218px;
    margin: 0;
}

/*==連番 sequential_code*/

/*==枝番 branch_code*/

/*==JAN jan_code*/
.jan_code td .div_flex{
    align-items: center;
}

.jan_code td p{
    flex: 0.8;
}

.jan_code td img{
    max-width: 279px;
}

/*==ｲﾝｽﾄｱｺｰﾄﾞ instore_code*/
.instore_code td .div_flex{
    align-items: center;
}

.instore_code td p{
    flex: 0.8;
}

.instore_code td img{
    max-width: 280px;
}

/*==バーコード barcode*/
.barcode td .div_flex{
    align-items: center;
}

.barcode td p{
    flex: 0.8;
}

.barcode td img{
    max-width: 280px;
}

/*==商品名カナ item_name_kana*/

/*==商品名 item_name*/

/*==商品名サブカナ item_name_sub_kana*/

/*==商品名サブ item_sub_name*/

/*==型番１、型番２ model_number*/
.model_number img{
    max-width: 562px;
    margin: 0.5em auto;
}
/*==メーカー maker*/
.maker .div_flex{
    justify-content: center;
    align-items: center;
    gap: 3em;
    overflow: hidden;
    margin: 0.5em auto;
}

/*imgメーカー登録／リスト表示画面でメーカーを選択します。*/
#img_maker_1{
    max-width: 465px;
    margin: 0;
}

/*右向き矢印*/
.maker .div_flex .arrow::before{
    content: "→";
    display: inline-block;
    font-size: 45px;
    font-weight: 900;
    color: #4F4F4F;
}

/*img選択したメーカーコードメーカー欄に設定示されます。*/
#img_maker_2{
    max-width: 267px;
    margin: 0;
}

/*==主仕入先 supplier*/
.supplier .div_flex{
    justify-content: center;
    align-items: center;
    gap: 3em;
    overflow: hidden;
    margin: 0.5em auto;
}

/*img仕入先登録／リスト表示画面で仕入先を選択します。*/
#img_supplier_1{
    max-width: 465px;
    margin: 0;
}

/*右向き矢印*/
.supplier .div_flex .arrow::before{
    content: "→";
    display: inline-block;
    font-size: 45px;
    font-weight: 900;
    color: #4F4F4F;
}

/*img選択した仕入先コードが仕入先欄に設定されます。*/
#img_supplier_2{
    max-width: 272px;
    margin: 0;
}

/*==発売日 release_date*/
.release_date p{
    flex: 1
}

.release_date .div_flex div{
    width: 49%;
    overflow: hidden;
}

.release_date .div_flex div img{
    max-width: 320px;
}

/*img半角数字8桁（YYYYMMDD形式）で直接入力*/
#img_release_date_1{
    margin-bottom: 1em;
}

/*==登録日*/

/*==定価 list_price*/

/*==仕入値 purchase_price*/

/*==税抜金額　税込(10％) price_including_tax_10*/
.price_including_tax_10 td p{
    flex-direction: 0.9;
}

.price_including_tax_10 td .div_flex img{
    max-width: 522px;
}

/*==複数単価 multiple_prices*/

/*==特価１　特価２ sale_price*/
.sale_price td img{
    max-width: 564px;
    margin: 0.5em auto;
}

/*==仕入１　仕入２ sale_purchase_price*/
.sale_purchase_price td img{
    max-width: 563px;
    margin: 0.5em auto;
}

/*==税区分 tax_type*/
.tax_type td .div_flex{
    align-items: center;
}

.tax_type td p{
    flex-direction: 0.9;
}

.tax_type td img{
    max-width: 271px;
}

/*==棚番 shelf_number*/

/*==サブジャンル sub_genre*/
.sub_genre .div_flex{
    justify-content: center;
    align-items: center;
    gap: 3em;
    margin: 0.5em auto;
}

/*imgサブジャンル登録画面で仕入先を選択します。*/
#img_sub_genre_1{
    max-width: 464px;
    margin: 0;
}

/*右向き矢印*/
.sub_genre .div_flex .arrow::before{
    content: "→";
    display: inline-block;
    font-size: 45px;
    font-weight: 900;
    color: #4F4F4F;
}

/*img選択したサブジャンルコードがサブジャンル欄に設定されます。*/
#img_sub_genre_2{
    max-width: 267px;
    margin: 0;
}

/*==容量*/

/*==複数 multiple_products*/

/*==ランク rank*/

/*==品状態*/

/*==条件*/

/*==固有ポイント unique_points*/

/*==バーコード枚数 barcode_count*/

/*==発注点 reorder_point*/

/*==用途 usage*/
.usage td ul{
    width: 95%;
    margin: 0 auto;
    margin-top: 1em;
}

.usage td ul li{
    display: flex;
    margin-bottom: 0.3em;
}

.usage td ul li .spa_1{
    display: inline-block;
    width: 10em;
    text-align: right;
    text-decoration: underline;
    white-space: nowrap;
}

/*・・・*/
.usage td ul li .spa_1::after{
    content: "・・・";
    display: inline-block;
    margin: 0 1em;/*幅を決めずに余白で調整*/
}

.usage td ul li .spa_2{
    flex: 1;
}

/**登録するカテゴリの選択 select_reg_category*/
/*img登録するカテゴリの選択画面*/
#img_select_reg_category{
    max-width: 1187px;
    min-width: 0;
    width: 100%;
}

.select_reg_category > div:first-of-type p{
    width: 95%;
    margin: 0 auto;
    margin-top: 1em;
}

.select_reg_category > div:first-of-type p:first-of-type{
    margin-bottom: 1em;
}

.select_reg_category h4{
    width: 95%;
    font-weight: 400;
    color: black;
    margin: 0 auto;
    margin-bottom: 0.5em;
}

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

.select_reg_category > div:nth-of-type(n+2) p{
    width: 90%;
    margin: 0 auto;
}

/*削除 選択ボタン*/
.select_reg_category .button{
    display: inline-block;
    width: 3.8em;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    text-align: right;
    white-space: nowrap;
    background-color: #EFEFEF;
    border: 1px solid #8E8E8E;
    border-radius: 3px;
    padding: 0.2em 0;
    padding-right: 0.2em;
    margin: 0 0.2em;
}

/*右向き矢印*/
.select_reg_category .arrow::before{
    content: "→";
    font-size: 55px;
    font-weight: 900;
    color: #4F4F4F;
}

.select_reg_category img{
    width: 100%;
}

/*//カテゴリ選択方法 category_selection*/
.category_selection .div_flex{
    margin-top: 0.5em;
    align-items: center;
}

/*Ctrl Shift*/
.category_selection p .key{
display:inline-block;
width: fit-content;
height: 25px;
line-height: 25px;
background:#F5F5F5;
border:1px solid #CFCFCF;
border-radius:4px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 1px 2px rgba(0,0,0,0.12);
color:#333333;
font-size:0.9em;
padding: 0 0.5em;
}

.category_selection img{
    max-width: 521px;
}

/*//選択完了したカテゴリの削除 category_deletion*/
.category_deletion .div_flex{
    margin-top: 0.5em;
    align-items: center;
}

.category_deletion img{
    max-width: 521px;
}

/*//カテゴリを2種類使用する場合 use_two_categories*/
.use_two_categories img{
    max-width: 1200px;
    margin: 0.5em auto;
}

/*//登録後、確認画面 post_reg_cfm_scr*/
.post_reg_cfm_scr img{
    max-width: 935px;
    margin-top: 0.5em;
}

/*//カテゴリリストの追加 add_category_list*/
.add_category_list p{
    flex: 0.95;
}

.add_category_list img{
    max-width: 699px;
}

/**商品画像設定、その他 product_image_setting*/
.product_image_setting th{
    width: 10%;
}

.product_image_setting td img{
    width: 100%;
}

/*==※商品画像機能を使用するには～ tr_2*/
.product_image_setting .tr_2 td img{
    max-width: 1186px;
    margin: 0.5em auto;
}

/*==画像ＵＲＬ image_url*/
.image_url td > p:first-child{
    margin-bottom: 0.5em;
}

/* __画像URL取得方法 image_url_toggle toggle_1*/
.image_url .com_border{
    padding-bottom: 0;
    border-bottom: none;
}

/*設定リセット*/
/*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だと見出しの幅が短くなる*/
}

/*線 幅 位置*/
.image_url_toggle{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

/*クリックする見出し*/
.image_url_toggle .com_h5{
    height: 35px;
    line-height: 35px;
    color: black;
    font-weight: 400;
    padding-left: 1em;
}

/*不足分border*/
.image_url_toggle .label_h4{
    position: relative;
}

.toggle_1 .label_h4::before{
    content: "";
    display: inline-block;
    width: 100.05%;
    height: 0;
    border-top: 1px solid #D8DCDE;
    position: absolute;
    bottom: -1px;
    left: -0.05%;
}

/* チェックが入ったら（クリックしたら）開く*/
.toggle_1:checked ~ .div_toggle {
    max-height: 1100px; /* 全体表示 pxじゃないと滑らかに動かない*/
    border-bottom: 1px solid #D8DCDE;
    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: 25px;
}

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

/*トグルの中身装飾 div_toggle*/
.image_url_toggle .div_toggle .div_flex{
    width: 95%;
    padding: 0.5em;
}
.image_url_toggle .div_toggle .d_1 p{
    flex: 1;
}

.image_url_toggle .div_toggle .d_1{
    margin-bottom: 1em;
}

.image_url_toggle .div_toggle .d_1 img{
    max-width: 60%;
}

.image_url_toggle .div_toggle .d_2 p{
    flex: 0.9;

}

.image_url_toggle .div_toggle .d_2 img{
        max-width: 50%;
        margin: 0 0 0 auto;
}

/*設定 登録 クリアボタン*/
.product_image_setting th .button_1{
    margin: 0.5em auto;
}