/*+カテゴリ商品マスタ - 基本設定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;
}

img{
    width: 100%;
    height: auto;
}

/*+設定画面　各項目*/
/**登録カテゴリの設定 reg_category_setting*/
.reg_category_setting .div_flex{
    justify-content: space-between;
}

.reg_category_setting .div_flex p{
    flex: 0.97;
}

.reg_category_setting .div_1{
    width: 69%;
    background-color: #F9F9FF;
    border: 1px solid #D8DCDE;
    overflow: hidden;
    padding: 0.5em;
    margin-top: 1.5em;
    margin-left: 2.5%;
}

.reg_category_setting .div_1 div:first-of-type{
    margin-bottom: 1em;
}

.reg_category_setting .div_1 div:last-of-type p{
    text-decoration: underline;
    text-decoration-color: red;
    margin-top: 0.5em;
}

.reg_category_setting .div_1 h4{
    font-weight: 400;
    color: black;
    margin: 0;
}

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

.reg_category_setting .div_1 img{
    max-width: 769px;
    min-width: 0;
}

/*img登録カテゴリの設定*/
#img_reg_category_setting_1{
    max-width: 769px;
    width: 52%;
    margin: 0;
}

/**商品コードの構成と設定 code_structure_setting_1、2*/
/*img商品コードの構成と設定*/
#img_code_structure_setting{
    max-width: 769px;
    margin: 0.5em auto;
}

.code_structure_setting_1 th,
.code_structure_setting_2 th{
    width: 11%;
}

.code_structure_setting_2 tr:nth-of-type(n+2) th,
.code_structure_setting_2 tr:nth-of-type(n+2) td,
.code_structure_setting_2 tr:nth-of-type(n+2) td p{
    font-size: 15px;
}

.code_structure_setting_2 tr:nth-of-type(n+2) th{
    background-color: #FAFAFA;
}

/*不要なborder*/
.code_structure_setting_2 tr:first-of-type th,
.code_structure_setting_2 tr:nth-of-type(2) th,
.code_structure_setting_2 tr:nth-of-type(2) td{
    border-top: none;
}

/*//画像 商品コード code_structure_setting_1*/


/**カテゴリ付加設定 category_addition_setting*/
.category_addition_setting th{
    width: 15%;
}
/*imgカテゴリ付加設定*/
#img_category_addition_setting{
    max-width: 769px;
    margin: 0.5em auto;
}

/*==商品名に名称付加 product_name_addition*/
.product_name_addition td .div_1 > p:first-of-type{
    flex: 1;
    padding-right: 0.5em;
}

.product_name_addition td .div_1 .div_img{
    width: 57.5%;
}

.product_name_addition td .div_1 .div_img p{
    width: 100%;
    text-align: center;
    margin: 0.5em auto;
}

/*下向き矢印*/
.product_name_addition td .div_1 .div_img p::after{
    content: "↓";
    display: block;
    font-size: 25px;
    font-weight: 900;
    color: #4F4F4F;
}

/*※設定したカテゴリリスト名にカンマ（,）または～ div_2*/
.product_name_addition td .div_2 .d_1{
    flex: 1;
    padding-right: 0.5em;
}

.product_name_addition td .div_2 .d_1 p:last-of-type{
    font-size: 14px;
    background-color: #F9F9FF;
    border: 1px solid #D8DCDE;
    padding: 0.2em 0.4em;
    margin-top: 1em;
}

.product_name_addition td .div_2 .div_img{
    width: 57.5%;
    text-align: center;
}

/*下向き矢印*/
.product_name_addition td .div_2 .div_img .arrow::before{
    content: "↓";
    display: inline-block;
    font-size: 25px;
    font-weight: 900;
    color: #4F4F4F;
    margin: 0.3em auto;
}

/*==商品名サブに名称付加 add_sub_prod_name*/
.add_sub_prod_name td > p:first-of-type{
    margin-bottom: 1.5em;
}

/*例）カテゴリ１で～ div_1*/
.add_sub_prod_name .div_1{
    margin-bottom: 1.5em;
}

.add_sub_prod_name .div_1 img{
    max-width: 935px;
}

.add_sub_prod_name .div_1 .arrow{
    display: block;
    width: 100%;
    text-align: center;
}

/*下向き矢印 arrow*/
.add_sub_prod_name .div_1 .arrow::before{
    content: "↓";
    display: inline-block;
    font-size: 35px;
    font-weight: 900;
    color: #4F4F4F;
}

/*登録後は、商品名サブに～ div_2*/
.add_sub_prod_name .div_2 p:first-of-type{
    margin-bottom: 0.5em;
}

.add_sub_prod_name .div_2 .div_flex{
    justify-content: center;
    gap: 5em;
    margin-bottom: 1em
}

.add_sub_prod_name .div_2 .div_flex img{
    max-width: 346px;
    margin: 0;
}

/*==仕入先にコード追加 add_supplier_code*/
.add_supplier_code td > p:first-of-type{
    margin-bottom: 1.5em;
}

.add_supplier_code td > p:first-of-type span:last-of-type{
    text-decoration: underline;
    text-decoration-color: red;
}

/*例）カテゴリ６「1234：カテゴリリスト名」で～ div_1 */
.add_supplier_code .div_1 .d_1 p,
.add_supplier_code .div_1 .d_2 p{
    margin-bottom: 0.3em;
}

.add_supplier_code .div_1{
    justify-content: center;
    gap: 2em;
}

.add_supplier_code .div_1 .d_1{
    width: 50%;
}
/*img仕入先コードとして使用するカテゴリを1つ選択します。*/
#img_add_supplier_code_2{
    max-width: 638px;
}

/*imgカテゴリ内から選択したカテゴリリストNoが仕入先コードに設定されます。*/
#img_add_supplier_code_3{
    max-width: 533px;
}

/*右向き矢印 arrow*/
.add_supplier_code .div_1 .arrow{
    display: inline-flex;
    align-items: center;
}

.add_supplier_code .div_1 .arrow:before{
    content: "→";
    font-size: 40px;
    font-weight: 900;
    color: #4F4F4F;
}

.add_supplier_code .div_1 .d_2{
    flex: 1;
    margin: auto 0;
}

.add_supplier_code .div_1 .d_2 img{
    max-width: 362px;
    margin: 0 auto;
}

/*設定された仕入先コードが～ div_2*/
.add_supplier_code .div_2{
    justify-content: center;
    gap: 2em;
}

.add_supplier_code .div_2 > p:first-of-type{
    margin-bottom: 1.5em;
}

.add_supplier_code .div_2 .d_1{
    margin-bottom: 1em;
}

.add_supplier_code .div_2 .d_1 p{
    flex: 0.95;
}

/*img仕入先マスタに仕入先コード1～4が登録されている状態*/
#img_add_supplier_code_5{
    max-width: 380px;
}

.add_supplier_code .div_2 .d_2{
    align-items: center;
    margin-bottom: 0.5em;
}

/*imgカテゴリ１のカテゴリリストNo「3（赤）」を選択して商品マスタを作成*/
#img_add_supplier_code_6{
    max-width: 521px;
}

/*右向き矢印 arrow*/
.add_supplier_code .div_2 .arrow{
    flex: 0.3;
    text-align: center;
}

.add_supplier_code .div_2 .arrow::before{
    content: "→";
    font-size: 40px;
    font-weight: 900;
    color: #4F4F4F;
}

/*img主仕入先には仕入先コード「3」に対応する仕入先名（仕入先3）が表示されます。*/
#img_add_supplier_code_7{
    max-width: 394px;
}

/*==メーカーにコード追加 add_maker_code*/
.add_maker_code td > p:first-of-type{
    margin-bottom: 1.5em;
}

.add_maker_code td > p:first-of-type span:last-of-type{
    text-decoration: underline;
    text-decoration-color: red;
}

/*例）カテゴリ６「1234：カテゴリリスト名」で～ div_1 */
.add_maker_code .div_1 .d_1 p,
.add_maker_code .div_1 .d_2 p{
    margin-bottom: 0.3em;
}

.add_maker_code .div_1{
    justify-content: center;
    gap: 2em;
}

.add_maker_code .div_1 .d_1{
    width: 50%;
}
/*imgメーカーコードとして使用するカテゴリを1つ選択します。*/
#img_add_maker_code_1{
    max-width: 638px;
}

/*imgカテゴリ内から選択したカテゴリリストNoがメーカーコードに設定されます。*/
#img_add_maker_code_2{
    max-width: 533px;
}

/*右向き矢印 arrow*/
.add_maker_code .div_1 .arrow{
    display: inline-flex;
    align-items: center;
}

.add_maker_code .div_1 .arrow:before{
    content: "→";
    font-size: 40px;
    font-weight: 900;
    color: #4F4F4F;
}

.add_maker_code .div_1 .d_2{
    flex: 1;
    margin: auto 0;
}

.add_maker_code .div_1 .d_2 img{
    max-width: 362px;
    margin: 0 auto;
}

/*設定された仕入先コードが～ div_2*/
.add_maker_code .div_2{
    justify-content: center;
    gap: 2em;
}

.add_maker_code .div_2 > p:first-of-type{
    margin-bottom: 1.5em;
}

.add_maker_code .div_2 .d_1{
    margin-bottom: 1em;
}

.add_maker_code .div_2 .d_1 p{
    flex: 0.95;
}

/*img仕入先マスタに仕入先コード1～4が登録されている状態*/
#img_add_maker_code_4{
    max-width: 380px;
}

.add_maker_code .div_2 .d_2{
    align-items: center;
    margin-bottom: 0.5em;
}

/*imgカテゴリ１のカテゴリリストNo「4（青）」を選択して商品マスタを作成*/
#img_add_maker_code_5{
    max-width: 533px;
}

/*右向き矢印 arrow*/
.add_maker_code .div_2 .arrow{
    flex: 0.3;
    text-align: center;
}

.add_maker_code .div_2 .arrow::before{
    content: "→";
    font-size: 40px;
    font-weight: 900;
    color: #4F4F4F;
}

/*imgメーカーの項目にはメーカーコード「4」に対応するメーカー名（□□株式会社）が表示されます。*/
#img_add_maker_code_6{
    max-width: 431px;
}

/*==サブジャンルにコード追加 add_subgenre_code*/
.add_subgenre_code td > p:first-of-type{
    margin-bottom: 1.5em;
}

.add_subgenre_code td > p:first-of-type span:last-of-type{
    text-decoration: underline;
    text-decoration-color: red;
}

/*例）カテゴリ６「1234：カテゴリリスト名」で～ div_1 */
.add_subgenre_code .div_1 .d_1 p,
.add_subgenre_code .div_1 .d_2 p{
    margin-bottom: 0.3em;
}

.add_subgenre_code .div_1{
    justify-content: center;
    gap: 2em;
}

.add_subgenre_code .div_1 .d_1{
    width: 50%;
}
/*imgメーカーコードとして使用するカテゴリを1つ選択します。*/
#img_add_subgenre_code_1{
    max-width: 638px;
}

/*imgカテゴリ内から選択したカテゴリリストNoがメーカーコードに設定されます。*/
#img_add_subgenre_code_2{
    max-width: 533px;
}

/*右向き矢印 arrow*/
.add_subgenre_code .div_1 .arrow{
    display: inline-flex;
    align-items: center;
}

.add_subgenre_code .div_1 .arrow:before{
    content: "→";
    font-size: 40px;
    font-weight: 900;
    color: #4F4F4F;
}

.add_subgenre_code .div_1 .d_2{
    flex: 1;
    margin: auto 0;
}

.add_subgenre_code .div_1 .d_2 img{
    max-width: 362px;
    margin: 0 auto;
}

/*設定されたサブジャンルコードが～ div_2*/
.add_subgenre_code .div_2{
    justify-content: center;
}

.add_subgenre_code .div_2 .div_flex > div:first-of-type{
    flex: 0.95;
}

.add_subgenre_code .div_2 .d_1 p{
    width: 93%;
}

.add_subgenre_code .div_2 .d_1 p:first-of-type{
    margin-bottom: 1.5em;
}

.add_subgenre_code .div_2 .d_1{
    margin-bottom: 1em;
}

.add_subgenre_code .div_2 .d_1 p{
    flex: 0.95;
}

/*imgサブジャンル登録画面にサブジャンルコード1～3が登録されている状態*/
#img_add_subgenre_code_4{
    max-width: 438px;
    height: fit-content;
}

.add_subgenre_code .div_2 .d_2{
    align-items: center;
    margin-bottom: 0.5em;
}

/*imgカテゴリ１のカテゴリリストNo「4（青）」を選択して商品マスタを作成*/
#img_add_subgenre_code_5{
    max-width: 532px;
}

/*右向き矢印 arrow*/
.add_subgenre_code .div_2 .arrow{
    display: flex;
    justify-content: center; 
    align-items: center;
    margin: 1em auto;
}

.add_subgenre_code .div_2 .arrow::before{
    content: "↓";
    line-height: 1;
    font-size: 40px;
    font-weight: 900;
    color: #4F4F4F;
}

/*imgメーカーの項目にはメーカーコード「4」に対応するメーカー名（□□株式会社）が表示されます。*/
#img_add_subgenre_code_6{
    max-width: 385px;
}