/*+売掛未収金：売掛未収金CSV取込（未収金CSV取込）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:売掛未収金CSV取込*/
.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;
}

/*+未収金情報*/
/*//【事前準備】未収金情報CSVの作成 preparation*/
.preparation p{
    width: 95%;
    margin: 0 auto;
}

/**未収金CSV取込設定 outstanding_csv_config*/
.outstanding_csv_config th{
    width: 9.5em;
}

#img_receivable_info{
    max-width: 1490px;
    width: 100%;
    margin: 0.5em auto;
    margin-bottom: 1em;
}

/*==対象ファイル target_file*/
/*ファイルを選択*/
.target_file td .button_1{
    display: inline-block;
    width: 8.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: FontAwesome;
    background-color: #EFEFEF;
    border: 1px solid #767676;
    border-radius: 3px;
    margin-right: 0.2em;
}

/*開く*/
.target_file td .button_2{
    display: inline-block;
    width: 7em;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: center;
    border: 1px solid #006BBE;
    border-radius: 5px;
    margin:0 0.3em
}

/*==CSVヘッダ csv_header*/
.csv_header td .div_flex{
    width: 95%;
    justify-content: space-between;
    margin: 1em auto;
}

.csv_header td .div_flex figure{
    width: 48%;
}

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

.csv_header td .div_flex figure img{
    max-width: 751px;
    width: 100%;
}

/*==顧客マスタ無し no_customer_master*/
.no_customer_master td p{
    margin-bottom: 0.5em;
}

.no_customer_master td ul{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.no_customer_master td ul li{
    display: flex;
}

.no_customer_master td ul li:first-of-type{
    margin-bottom: 1em;
}

.no_customer_master td ul li span{
    display: inline-block;
}

.no_customer_master td ul li .spa_1{
    width: 8em;
    text-align: right;
    text-decoration: underline;
}

.no_customer_master td ul li .spa_2{
    width: 3.5em;
    text-align: center;
}

.no_customer_master td ul li .spa_3{
    flex: 1;
}

/*+未収金額CSVフォーマット csv_format*/
/*No*/
.csv_format .th_1{
    width: 5%;
}

/*フィールド名*/
.csv_format .th_2{
    width: 16%;
}

/*桁数*/
.csv_format .th_3{
    width: 8%;
}


/*備考以外中央寄せ*/
.csv_format td:not(.csv_format td:last-of-type){
    text-align: center;
}

/*/////////////////////////////////////////////
スマホ幅(736px以下) レイアウト調整
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    /*==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;
    }

    /*==CSVヘッダ csv_header 縦並びに*/
    .csv_header td .div_flex{
        flex-direction: column;
    }

    .csv_header td .div_flex figure{
        width: 100%;
    }

    .csv_header td .div_flex figure:nth-of-type(2){
        margin-top: 1em;
    }

    /*==顧客マスタ無し no_customer_master spa_1を単独行にして折り返し、spa_2+spa_3をセットでその下に配置*/
    .no_customer_master td ul li{
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .no_customer_master td ul li .spa_1{
        width: 100%;
        text-align: left;
    }

    /*==未収金額CSVフォーマット csv_format
      No./フィールド名/桁数/備考の4列データ表のため、他のtableと違い共通シートの縦積み対象から外し
      元の表形式のまま維持する。.table_scrollでtable単体を横スクロールさせ、ページ全体の横スクロールは防ぐ
      (tableの列幅指定を本来通り機能させるため、table自体はdisplay:tableのまま幅を制限しない)*/
    .table_scroll{
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.csv_format:not(.table_left):not(.table_right){
        display: table;
        width: auto;
    }

    table.csv_format:not(.table_left):not(.table_right) tr{
        display: table-row;
    }

    table.csv_format:not(.table_left):not(.table_right) th,
    table.csv_format:not(.table_left):not(.table_right) td{
        display: table-cell;
        width: auto;
        font-size: 13px;
    }

    .csv_format th,
    .csv_format td:nth-of-type(2),
    .csv_format td:nth-of-type(3){
        white-space: nowrap;
    }

    .csv_format tr:first-of-type .th_3,
    .csv_format tr:first-of-type .th_4{
        text-align: center;
    }

    /*==未収金額CSVフォーマット 見出し
      com_h2はoverflow:hiddenで1行固定のため、長いタイトルは幅320pxでもはみ出さないサイズに縮小
      (com_h2は他の短い見出しにも使う共通クラスのため、id指定でこの見出しだけに限定)*/
    #csv_format{
        font-size: 23px;
    }
}