/*+商品画像登録画面CSS*/
table,ul{
    color: black;
    margin: 0;
}

ul li{
    padding: 0;
}

/*+商品画像登録画面・ドラッグ＆ドロップ機能*/
/*img: 商品画像登録画面*/
img[data-original="../../8-settings/8-1-001/is_img/image_setup_1.png"]{
    width: 55%;
}

/*+画面項目説明 image_setup table*/
.image_setup table th{
    width: 13%;
}

/*登録・プレビュー・閉じる .image_setup table th .button*/
.image_setup table th .button{
    all: unset;/*main.cssリセット*/
    display: inline-block;
    width: 6em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    letter-spacing: -0.05em;
    background-color: #EFEFEF;
    border: 1px solid #767676;
    border-radius: 3px;
    margin: 0.3em auto;
}

/*==本画面での操作は、一覧に画像が登録されていない商品のみ行えます。image_setup table tr_2*/
.image_setup table .tr_2 td p{
    width: 95%;
    margin: 0 auto;
}

.image_setup table .tr_2 td p span{
    color: red;
}

/*登録・プレビュー・閉じる .image_setup table td .button*/
.image_setup table td .button{
    all: unset;/*main.cssリセット*/
    display: inline-block;
    width: 5.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 15px;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    letter-spacing: -0.05em;
    background-color: #EFEFEF;
    border: 1px solid #767676;
    border-radius: 3px;
    margin: 0 0.2em;
}

/*+ドラッグ＆ドロップ機能による画像URL、商品ページURLの登録 d_and_d*/
.d_and_d > p:first-of-type span{
    color: red;
}

/**ドラッグ＆ドロップ機能の対応画面 d_and_d div_1*/
.d_and_d .div_1 > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 2em;
}

.d_and_d .div_1 .div_flex{
    width: 99%;
    justify-content: space-between;
}

.d_and_d .div_1 .div_flex div{
    width: 24%;
}

.d_and_d .div_1 .div_flex div h4{
    all: unset;
    color: black;
    margin-bottom: 0.5em;
}

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

.d_and_d .div_1 .d_2{
    margin-top: 1.5em;
}

.d_and_d .div_1 .img_zoom{
    width: 95%;
}

/**操作手順 d_and_d div_2*/
.d_and_d .div_2 p{
    width: 100%;
    line-height: 2.3em;
    padding-left: 1em;
}

/*//別ウィンドウでの開き方一例 d_and_d d_1*/
.d_and_d .div_2 .d_1{
    width: 70%;
    font-size: 14px;
    background-color: #F9F9FF;
    padding: 1em;
    margin: 0.5em auto;
}

.d_and_d .d_1 h4{
    color: #4F4F4F;
    margin-bottom: 0.3em;
}

.d_and_d .d_1 ul{
    width: 97%;
    list-style: disc;
    padding-left: 1.5em;
    margin: 0 auto;
}

/*クリック出来そうな見た目*/
.d_and_d .d_1 ul .li_1 span,
.d_and_d .div_2 p span{
    display: inline-block;
    color: #4056A2;
    cursor: pointer;
    text-decoration: underline;
    transition: 0.2s;
}

.d_and_d .d_1 ul .li_1 span:hover,
.d_and_d .div_2 p span:hover{
    color: #5E77D1;
    text-decoration-thickness: 2px;
}

.d_and_d .d_1 ul .li_2 div{
    width: 10%;
    display: inline-flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-bottom: 0.5em;
    position: relative;/*.d_and_d .d_1 ul .li_2 div::beforeの親*/
}

/*キーボードっぽい装飾*/
.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;
}

.key:last-of-type{
    margin-right: 0.2em;
}

/*＋*/
.d_and_d .d_1 ul .li_2 div::before{
    content: "＋";
    display: block;
    font-size: 15px;
    position: absolute;
    left: 49%;
}

/*ページのURL部分画像*/
#modalImg .open_modal img{
    border-top-left-radius: 5px;
}