/*+売掛未収金：売掛未収金一覧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;
}

/**期間 filter div_1*/

/**店舗・グループ選択 .filter .div_2*/

/**顧客名・コード customer_name_code*/
.customer_name_code table th{
    width: 18%;
    padding: 0.5em 0;
}

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


/*検索ボタン*/
.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;
}

/**患者区分 patient_type*/
.patient_type p{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 0.5em;
}
.patient_type table{
    flex: 0.84;
}

.patient_type table th{
    width: 11em;
}

.patient_type img{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/**残金額 remaining_amount*/
.remaining_amount p{
    flex: 0.84;
}

.remaining_amount img{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*+売掛未収金一覧 receivable_list*/
#img_receivable_list{
    max-width: 1568px;
    width: 100%;
}

/*//パネルに検索条件を表示 .on_panel*/
.on_panel figure img{
    max-width: 780px;
    width: 90%;

}

/**一覧　表示項目 list_display_item*/
.list_display_item th{
    width: 10em;
}

/*印刷～移動*/
.list_display_item .icon th span{
    display: inline-block;
    font-size: 45px;
    line-height: 1;
    position: relative;
    z-index: 1;
}

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

/*印刷*/
.list_display_item .fa-print::after{
    width: 0.55em;
    height: 0.75em;
    top: 15%;
    left: 45%;
}

/*？*/
.list_display_item .fa-question-circle::after{
    width: 0.45em;
    height: 0.65em;
    top: 15%;
    left: 50%;
}

/*CSV*/
.list_display_item .fa-file-text-o{
    margin-top: 0.1em;
}

.list_display_item .fa-file-text-o::after{
    width: 0.75em;
    height: 0.9em;
    border-top-right-radius: 10px;
    top: 5%;
    left: 50%;    
}

/*PDF*/
.list_display_item .fa-file-pdf-o{
    margin-top: 0.1em;
}

.list_display_item .fa-file-pdf-o::after{
    width: 0.75em;
    height: 0.9em;
    border-top-right-radius: 10px;
    top: 5%;
    left: 50%;    
}

/*移動*/
.list_display_item th .fa-window-restore{
    color: #585A67;
    margin-top: 0.05em;
}

.list_display_item th .fa-window-restore::after{
    width: 0.5em;
    height: 0.5em;
    box-shadow: -0.4em 0.35em 0 white;/*下背景*/
    top: 15%;
    right: -10%;
}

/*上下の範囲内*/
.list_display_item .icon td span{
    display: inline-block;
    width: 6.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #809ED0;
    border: 2px dotted #809ED0;
    border-radius: 5px;
    margin: 0 0.3em;
}

/*鉛筆*/
.list_display_item th .fa-pencil::after{
    width: 0.2em;
    height: 0.3em;
    background-color: white;
    bottom: 13%;
    right: 55%;
}

/*売掛残金額 未収残金額*/
.list_display_item td ul{
    width: 95%;
    margin: 0 auto;
    margin-top: 0.5em;
}

.list_display_item td ul li{
    display: flex;
    align-items: center;
    line-height: 2em;
}

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

.list_display_item td ul li .spa_1{
    font-size: 25px;
    line-height: 1;
}

.list_display_item td ul li .fa-check-square{
    color: #0075FF;
}

.list_display_item td ul li .fa-square-o{
    color: #767676;
}

.list_display_item td ul li .spa_2{
    width: 4em;
    text-align: center;
}

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


#img_icon_chart_analysis{
    max-width: 80px;
    width: 25%;
    margin: 0.2em auto;
}

/*/////////////////////////////////////////////
スマホ幅(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;
    }

    /*==期間 filter div_1 画像(filter_2.png)のサイズを店舗・グループ選択の画像と同じ80%に
      (共通シートのresponsive.cssでは50%指定のため、このページのみ上書き)*/
    .filter .div_1 .div_flex > img{
        width: 70%;
    }

    /*==顧客名・コード customer_name_code 画像を本文(p)の上に配置*/
    .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;
    }

    /*クリアボタンが共通シートの汎用サイズ(max-width:128px)でPCより大きく表示されるため、
      サイト内の同種のボタン(.filter .div_2等)と同じ70pxに揃える
      (詳細度を共通ルールtable:not(.table_left):not(.table_right) th imgより上げるため:not()を追加)*/
    .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;
    }

    /*==患者区分 patient_type 画像を本文(p)の上に配置
      画像はtableと同じ.div_flexの中、pはその外側の兄弟のため、
      .div_flexをdisplay:contentsで解除しorderで並び替える*/
    .patient_type{
        display: flex;
        flex-direction: column;
    }

    .patient_type .div_flex{
        display: contents;
    }

    .patient_type h3{
        order: 1;
    }

    .patient_type img{
        order: 2;
        width: 70%;
        margin: 0 auto 1em;
    }

    .patient_type > p{
        order: 3;
    }

    .patient_type table{
        order: 4;
        width: 100%;
    }

    /*==残金額 remaining_amount 縦並びにし、画像を上に配置*/
    .remaining_amount .div_flex{
        flex-direction: column;
    }

    .remaining_amount .div_flex p{
        order: 2;
        flex: none;
        width: 100%;
    }

    .remaining_amount .div_flex img{
        order: 1;
        width: 70%;
        margin: 0 auto 1em;
    }

    /*==パネルに検索条件を表示 on_panel 「グループを表示」側の上に余白*/
    .on_panel .div_flex figure:nth-of-type(2){
        margin-top: 1em;
    }

    /*==売掛残金額・未収残金額 spa_1を単独行にして折り返し、spa_2+spa_3をセットでその下に配置*/
    .list_display_item td ul li{
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .list_display_item td ul li .spa_1{
        width: 100%;
    }

    /*スマホ幅ではthが100%幅になり25%指定が拡大されすぎるため、PCと同程度のサイズに固定*/
    #img_icon_chart_analysis{
        width: 40px;
        padding-top: 0.2em;
        margin: 0 0 0.2em;
    }
}

/**/