/*+売掛未収金：売掛未収金額データ配信（未収金額配信）CSS*/
table,ul,ul li{
    color: black;
    padding: 0;
    margin: 0;
}

button,
button:hover{
    all: unset;
    color: black;
}

figcaption{
    color: black;
}

img{
    height: fit-content;
}

/*+h1:売掛未収金額データ配信*/
.div_h1 > .div_flex:first-of-type{
    width: 90%;
    justify-content: space-around;
    margin-top: 0.5em;
}

.div_h1 figure{
    width: 45%;
    justify-content: center;
}

.div_h1 figure{
    display: flex;
}

.div_h1 figcaption{
    width: 15em;
    white-space: nowrap;
    text-align: right;
}

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

.div_h1 figure img{
    max-width: 224px;
    margin: 0;
}

/*+ 表示条件*/
/**顧客コード customer_code*/
.customer_code .div_flex > div{
    width: 50%;
}

.customer_code p{
    margin-bottom: 0.5em;
}

.customer_code table{
    width: 100%;
}

.customer_code table th{
    width: 9em;
}

/*虫眼鏡*/
.customer_code th .fa-search{
    display: inline-block;
    width: 1.5em;
    line-height: 1.5;
    font-size: 23px;
    color: #363640;
    background: #b1cfff;
    border-radius: 3px;
    box-shadow: 2px 2px #696969;
    margin: 0.2em auto;
}

#img_customer_code{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/**更新日 update_date*/
.update_date .div_flex > div{
    width: 50%;
}

.update_date p{
    margin-bottom: 0.5em;
}

.update_date table{
    width: 100%;
    height: fit-content;
}

.update_date table th{
    width: 9em;
    padding: 0.3em 0;
}

.update_date table th .icon{
    display: inline-block;
    line-height: 1;
    font-size: 45px;
    color: #585A67;
}
/*再検索*/

/*３本バー*/

#img_update_date{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/**顧客名・コード customer_name_code*/
.customer_name_code .div_flex > div{
    width: 50%;
}

.customer_name_code p{
    margin-bottom: 0.5em;
}

.customer_name_code table{
    width: 100%;
    height: fit-content;
}

.customer_name_code table th{
    width: 9em;
    padding: 0.3em 0;
}

/*検索ボタン*/
.customer_name_code table th .fa-search{
    display: inline-block;
    width: 1.5em;
    line-height: 1.5;
    font-size: 23px;
    color: #363640;
    background: #b1cfff;
    border-radius: 3px;
    box-shadow: 2px 2px #696969;
}

#img_customer_name_code{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*+未収金額配信*/
#img_receivable_amount_distribution{
    max-width: 1458px;
    width: 100%;
}

/**表示項目 display_item*/
.display_item th{
    width: 10em;
}

.display_item th .div_flex{
    justify-content: center;
    align-items: center;
}

/*==全選択解除 select_all_clear*/
.select_all_clear th .div_flex{
    margin-top: 0.2em;
}

.select_all_clear th .div_flex .fa-check-square-o,
.select_all_clear th .div_flex .fa-square-o{
    display: inline-block;
    line-height: 1;
    font-size: 25px;
    font-weight: 400;
    color: #363640;
    margin-right: 0.1em;
}

/*白背景*/
.select_all_clear th .div_flex .icon{
    display: inline-block;
    position: relative;
    z-index: 1;
}

.select_all_clear th .div_flex .icon::after{
    content: "";
    display: inline-block;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    z-index: -1;
}

/*チェック有り_o*/
.select_all_clear th .div_flex .fa-check-square-o::after{
    width: 0.7em;
    height: 0.7em;
    top: 10%;
    left: 40%;
}

/*チェックボックス*/
.select_all_clear th .div_flex .fa-square-o::after{
    width: 0.7em;
    height: 0.7em;
    top: 10%;
    left: 42%;
}

.select_all_clear th .div_flex .spa_1{
    display: inline-block;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-weight: 900;
    color: #363640;
}

/*==未収金配信ボタン receivable_distribution*/
.receivable_distribution th .div_flex{
    width: 85%;
    font: normal normal normal 14px FontAwesome;
    font-size: inherit;
    color: white;
    background-color: #564E9E;
    border-radius: 10px;
    gap: 1em;
    padding: 0.5em 0;
    margin: 0.3em auto;
}

.receivable_distribution th .div_flex .fa-database{
    display: inline-block;
    line-height: 1;
    font-size: 18px;

}

/*/////////////////////////////////////////////
スマホ幅(736px以下) レイアウト調整
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .nowrap{
        font-size: 18px;
        white-space: nowrap;
    }

    /*==h1見出し下 売掛未収金管理「使用する」「使用しない」
      figcaptionがwhite-space:nowrap+固定幅(15em)のため、横並びのままだとはみ出す。
      2つの画像を縦並びにし、figcaptionも折返し可能にする*/
    .div_h1 figure{
        width: 100%;
        flex-direction: column;
    }

    .div_h1 figcaption{
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .div_h1 figure img{
        max-width: 100%;
        width: 60%;
        margin: 0.3em auto 0;
    }

    /*「使用しない」側の画像の上に余白*/
    .div_h1 figure:nth-of-type(2){
        margin-top: 1em;
    }

    /*==顧客コード customer_code 画像を本文(p)の上に配置*/
    .customer_code .div_flex{
        flex-direction: column;
    }

    .customer_code .div_flex > div{
        order: 2;
        width: 100%;
    }

    .customer_code .div_flex > img{
        order: 1;
        width: 70%;
        margin-bottom: 1em;
    }

    /*クリアボタンをサイト内の同種のボタンと同じ70pxに揃える*/
    .customer_code table:not(.table_left):not(.table_right) th img{
        max-width: 70px;
    }

    /*虫眼鏡アイコンをやや小さく*/
    .customer_code th .fa-search{
        font-size: 18px;
        text-align: center;
    }

    /*==更新日 update_date 画像を本文(p)の上に配置*/
    .update_date .div_flex{
        flex-direction: column;
    }

    .update_date .div_flex > div{
        order: 2;
        width: 100%;
    }

    .update_date .div_flex table th span{
        font-size: 27px;
    }

    #img_clear{
        max-width: 70px;
    }
    
    #img_calendar{
        width: 50%;
    }

    #img_update_date{
        order: 1;
        width: 70%;
        margin-bottom: 1em;
    }


    /*==顧客名・コード customer_name_code 画像を本文(p)の上に配置*/
    .customer_code table tr:first-of-type th img{
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }

    .customer_name_code .div_flex{
        flex-direction: column;
    }

    .customer_name_code .div_flex > div{
        order: 2;
        width: 100%;
    }

    #img_customer_name_code{
        order: 1;
        width: 70%;
        margin-bottom: 1em;
    }

    /*クリアボタンをサイト内の同種のボタンと同じ70pxに揃える*/
    .customer_name_code table:not(.table_left):not(.table_right) th img{
        max-width: 70px;
    }

    /*虫眼鏡アイコンをやや小さく*/
    .customer_name_code table th .fa-search{
        font-size: 18px;
        text-align: center;
    }

    /*==全選択解除 select_all_clear 「全選択」「全解除」を1em間隔で横並びに
      (共通ルールtable:not(.table_left):not(.table_right) thのdisplay:blockより詳細度を上げて上書き)*/
    table:not(.table_left):not(.table_right) .select_all_clear th{
        display: flex;
        align-items: center;
    }

    .select_all_clear th div{
        width: 6.5em;
    }

    /*==未収金配信ボタン receivable_distribution*/
    .display_item tr:nth-of-type(3) th{
        padding: 0.2em 0;
        padding-left: 0.5em;
    }    
    
    .receivable_distribution th .div_flex:not(table:not(.table_left):not(.table_right) th .div_fle){
        width: 35%;
        justify-content: center;
        padding: 0.5em 0.2em;
    }
}