/*+商品情報：商品登録CSS*/
/*//設定リセット*/
/*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だと見出しの幅が短くなる*/
}

/*//com_border線 幅 位置*/
/* 1. 一番外側の .com_border (商品登録の手順) */
.add_new_item > .com_border,
.add_new_item_detail > .com_border {
    width: 100%;
    margin: 0 auto;
}

/* 2. その中に入っている .com_border (各ステップの枠) */
.add_new_item .com_border .com_border,
.add_new_item_detail .com_border .com_border {
    width: 95%;
    padding-bottom: 0;
    margin: 0 auto;
}

/*//トグルメニュー*/
.add_new_item h4{
    border-bottom: none;
    margin: 0;
}
/*不足分border*/
.div_1 h4,
.div_2 h4,
.div_3 h4,
.div_4 h4{
    position: relative;
}

.div_1 h4::before,
.div_2 h4::before,
.div_3 h4::before,
.div_4 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,
.toggle_2:checked ~ .div_toggle,
.toggle_3:checked ~ .div_toggle,
.toggle_4:checked ~ .div_toggle {
    max-height: 1100px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

/*メニュー上下の速さ*/
.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 h4::after,
.toggle_2 + .label_h4 h4::after,
.toggle_3 + .label_h4 h4::after,
.toggle_4 + .label_h4 h4::after{
    content: " ▼";
    font-size: 25px;
}

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

/*//項目前の　●　*/
.style_disc{
    width: auto;
    display: block;
    font-weight: bold;
    border-bottom: #3D4449 1px solid;
    margin-bottom: 10px;
}
.style_disc::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

/*//背景　紫色*/
.back_color_purple{
    width: 80%;
    background-color: #e5eaf8;
    padding: 10px;
    margin: 5px;
}

/*横並び（左）にある紫背景のサイズ　中央寄せ*/
.div_flex_left .back_color_purple{
    width: 95%;
    margin: 10px auto;
}

/* //文章中のボタン画像を中央に揃える設定 */
.div_3 .div_flex_left p img{
    width: auto;        /* ここでサイズを固定 */
    height: 1.5em;
    vertical-align: -0.3em;
    object-fit: contain;
    /* 画像をクッキリさせる設定 */
    image-rendering: -webkit-optimize-contrast; /* Chrome / Safari向け */
    image-rendering: crisp-edges;               /* Firefox向け */
    margin: 0 5px;
}
.add_new_item_detail table td img{
    width: auto;        /* ここでサイズを固定 */
    height: 1.5em;
    vertical-align: -0.3em;
    object-fit: contain;
    /* 画像をクッキリさせる設定 */
    image-rendering: -webkit-optimize-contrast; /* Chrome / Safari向け */
    image-rendering: crisp-edges;               /* Firefox向け */
    margin: 0 5px 0 0;
}
.div_flex_right p img{
    display: inline-block;
    width: auto;        /* ここでサイズを固定 */
    height: 1.5em;
    background-color: inherit;
    border: none;
    vertical-align: -0.3em;
    object-fit: contain;
    /* 画像をクッキリさせる設定 */
    image-rendering: -webkit-optimize-contrast; /* Chrome / Safari向け */
    image-rendering: crisp-edges;               /* Firefox向け */
    margin: 0 5px 0 0;
}
.code_check img{
    display: inline-block;
    width: auto;        /* ここでサイズを固定 */
    height: 1.5em;
    background-color: inherit;
    border: none;
    vertical-align: -0.3em;
    object-fit: contain;
    /* 画像をクッキリさせる設定 */
    image-rendering: -webkit-optimize-contrast; /* Chrome / Safari向け */
    image-rendering: crisp-edges;               /* Firefox向け */
    margin: 0 5px 0 0;
}

/*//pの余白調整*/
/*各項目設定＞条件設定*/
.div_display_conditions p{
    margin: 20px;
}
/*各項目設定＞各項目の登録*/
.div_item_setting p{
    margin: 20px;
}
/*各項目設定＞商品カテゴリーの選択*/
.div_item_category p{
    margin: 30px 0 50px;
}

/*//imgの幅調整など*/
/*各項目設定＞条件設定（右の画像）*/
.div_display_conditions .div_flex img{
    width: 50%;
}
/*各項目設定＞条件設定（JAN項目の画像）*/
.div_display_conditions .div_flex table img{
    width: 90%;
}
/*横並び画像の真ん中の余白*/
.div_display_conditions .div_flex,/*各項目設定*/
.add_new_item .div_flex{/*商品登録手順*/
    gap: 30px;
}
/*横並びの画像　大きくなりすぎないよう調整*/
.div_flex a{
    width: 60%;       /* ここで最大幅をコントロール */
    max-width: 600px;  /* 必要に応じて、大きくなりすぎないよう最大ピクセルも指定可 */
    text-align: center;
    margin: 20px auto;
}
.div_flex a img{
    width: 100%;
}
.add_new_item .div_1 .div_flex a{/*①商品登録画面を開く　画像小さめに表示*/
     max-width: 300px;
}

/*//その他*/
/*画像のサイズ制限*/
.div_details img,/*各項目の登録セクションtableの画像*/
.div_item_category img{/*商品カテゴリーの選択セクションの画像*/
    max-width: 100%;
    height: auto;
    margin: 10px;
}
/*文字の大きさ小さめに*/
.font_size0_8em{
    font-size: 0.8em;
}
/*文字　中央寄せ*/
.text_center{
    text-align: center;
}
/*com_border内のP余白*/
.com_border p{
    padding-left: 20px;
    margin: 20px 0;
}
/*下線マーカー*/
.line_marker{
    background: linear-gradient(transparent 60%, #d6d6d6 60%)
}
/*囲み枠グレー*/
.border_around{
    border: 1px solid #d2d7d9bf;
}
/*横並び　真ん中　余白*/
.div_flex:not(.div_toggle){
    gap: 20px;
    margin: 20px auto;
}


/*+商品登録 add_new_item=============================================================== */
/*商品登録の手順①②③④/商品情報の登録 (詳細/の左側サイズ*/
.div_flex_left{
    width: 50%;
}
/*__商品登録の手順 ②各項目の登録 div_2--*/
/*設定の流れ　ol*/
ol.border_around{
    width: 80%;
    list-style-position: inside;
    color: #3D4449;
    padding: 20px;
}
/*__商品登録の手順 ③登録 div_3--*/
/*商品登録の手順③登録 部分　CSS打消し*/
.div_3 .border_around p{
    padding: 0;
    margin: 0;
}
/*__商品登録の手順 ④登録後の操作（続けて登録・編集） div_4--*/
/*紫背景サイズ*/
.div_4 .back_color_purple{
    width: 90%;
    padding: 20px;
    margin: 0 auto;
}
/*紫背景内のp　css打消し*/
.div_4 .back_color_purple p{
    margin: 0;
    padding: 0;
}
/*+商品情報の登録 (詳細) add_new_item_detail========================================================= */
/**商品画像設定*/
/*ドラッグ＆ドロップでの登録　背景紫部分　余白*/
.add_new_item_detail .com_border p{
    padding: 20px;
    margin: 0;
}
/*商品情報の登録部分　紫背景　css打消し*/
.add_new_item_detail .back_color_purple{
    margin: 10px;
}
/*商品情報の登録部分　tableの項目　幅*/
.add_new_item_detail table tr th{
    width:200px;
}

/**各項目設定 */
/*__条件設定 display_conditions*/

/*条件設定の表示例部分　破線囲みなどの設定*/
.div_display_conditions .div_flex:nth-of-type(2) {
    border: #D9D9D9 2px dotted;
    padding: 20px;
    margin-top: 50px;
}
/*__各項目の登録 div_item_setting */
.div_item_setting_info .border_around{
    width: auto;
}
/*各項目の登録　「項目名」に下線がある場合　の文字色など*/
.manual_list{
    color: #3D4449;
    margin: 20px auto;
}
.manual_list li{
    margin: 20px auto;
}
/*[項目名]に下線がある場合　部分*/
.com_title,
.add_new_item_detail .com_border p.com_title{
    display: block;
    width: 90%;
    font-weight: bold;
    background-color: #ffffff;
    border: #3D4449 1px solid;
    padding: 5px 10px;
    margin: 20px auto;
}
/*[項目名]に下線がある場合/入力制限の数値について 紫背景*/
.div_item_setting_info .back_color_purple {
    width: 90%;
    padding: 20px;
    margin: 0 auto;
}
.div_item_setting_info .back_color_purple p{
    padding: 0;
    margin-bottom: 20px;
}
/*紫背景内　囲み*/
.div_item_setting_info .border_around{
    border:none;
    background-color: #f7f8f9;
}
.div_item_setting_info table .border_around{
    border: #3D4449 1px solid;
    background-color: #fff;
    padding: 10px;
    margin: 10px auto;
}
/*コードの重複・チェックデジット　横並び（右）*/
.div_flex_right{
    width: 60%;
}
.div_flex_right table{
    vertical-align: middle;
    background-color: #fff;
}
.div_flex_right table tr th{
    width: 50%;
}
.div_flex_right table img{
   width: 100%;
   max-width: 90%;  /* 親要素の幅を超えない */
   height: auto;
   margin: 12px 10px 10px;
}
/*//疑似テーブル表示*/
/*---親コンテナの設定 table_container---*/
.table_container {
    width: 100%;
}
/*---各行（セット）の設定---*/
.div_flex_set_item {
    display: flex;
    width:auto;
    height: auto;
    box-sizing: border-box;
    margin: 0 20px;
}
/* 一番上にだけ上線を引く */
.div_flex_set_item:nth-child(1){
    border-top: 2px solid #d2d7d9;
}
/* 各セル共通：下線とパディング、box-sizingを一括適用 */
.div_koumoku,
.div_input_type,
.div_details {
    border-bottom: 2px solid #d2d7d9;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center; /* 中の文字を上下中央に */
}
/*---各セルの詳細設定---------------------------*/
/* 項目名*/
.div_koumoku {
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #edecec;
    color: #3D4449;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* 150pxを維持 */
    border-left: 1px solid #d2d7d9;
    border-right: 1px solid #d2d7d9;
}
/* 入力規則（全角20文字など） */
.div_input_type {
    width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f9f9f9;
    color: #3D4449;
    flex-shrink: 0; /* 120pxを維持 */
    border-right: 1px solid #d2d7d9;
    font-size: 0.85em;
}
/* 内容詳細 */
.div_details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せにする */
    justify-content: center; /* 上下の中央に置く */
    flex-grow: 1; /* 残りの幅をすべて使う */
    color: #3D4449;
    background: #fff;
    border-right: 1px solid #d2d7d9; /* セットの右端を閉じる */
}
/* 内容詳細内の水平線 */
.div_details hr {
    width: 100%;
    margin: 10px 0;
}
/*改行しないように調整*/
.word_keep{
    word-break: keep-all;
}
/*-----------------------------------------*/

/*---内部パーツ（BCPOS要件など）の微調整------*/
.div_bcpos_only {
    width: 80%;
    display: block;
    font-size: 0.9em;
    background-color: #ffffff;
    border: #aebbe0 1px solid;
    border-radius: 5px 5px 0 0;
    margin-top: 10px;
}
/*BCPOS要件の上部*/
.div_bcpos_only_top {
    display: block; /* inline-blockより安定します */
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    font-weight: bolder;
    font-size: 0.95em;
    background-color: #aebbe0;
    padding: 5px 15px;
}
/*BCPOS要件の下部*/
.div_bcpos_only_btm {
    display: block;
    padding: 10px 15px;
}

/*BCPOSの要件部分　文字色*/
.font_color_bcpos{
    color:#3cb271;
}
/*-----------------------------------*/

/*部門noの項目部分のback_color_purpleの幅調整*/
.w_250{
    width: 250px;
}

/*+ ---商品カテゴリーの選択　部分---*/
/*img サイズ　真ん中寄せ*/
.div_item_category img{
    width: 95%;
    text-align: center;
}

/*+---レスポンシブ対応--------------------*/
/* 1024px以下で1列にする*/
@media screen and (max-width: 1024px) {
    .div_flex_set_item {
        width: 100%; /* 横幅いっぱい */
    }
    .table_container {
        gap: 0; /* 左右の隙間をなくす */
    }
    /* 1列になった時は、全てのセットに上線を出す（重なり防止のため調整が必要なら） */
    .div_flex_set_item:not(:first-child) {
        border-top: none; /* すでに下線があるので基本不要 */
    }
}