/*+顧客情報：顧客リストCSS*/table,
ul li{
    color: black;
    padding: 0;
    margin: 0;
}

ul{
    padding: 0;
    margin: 0;
}

table{
    height: fit-content;
}

table .div_flex{
    width: 100%;
}

button,
.button{
    all: unset;
}

img{
    width: 100%;
}

/*+表示条件*/
/**顧客リスト検索 search_customer_list*/
.search_customer_list > .div_flex:first-of-type{
    justify-content: space-between;
}

/*table_1、table_2共通*/
/*table_1、table_2共通*/
.search_customer_list .div_flex div{
    flex: 0.95;
}

.search_customer_list .div_flex div table{
    width: 100%;
    table-layout: fixed;
}

/*//clearボタン~電子・携帯メール table_1*/
.search_customer_list .table_1 th{
    width: 20%;
}

.search_customer_list .table_1 td,
.search_customer_list .table_1 td p{
    font-size: 15px;
}

/*==clearボタン clear*/
.search_customer_list .table_1 .clear th span{
    display: inline-block;
    width: 4.5em;
    text-align: center;
    letter-spacing: 0.2em;
    font-family: "ＭＳ Ｐゴシック", sans-serif; 
    color: #1A5EFF;
    background-color: #CCCCCC;
}

/*==検索 search*/
/*検索ボタン*/
.search_customer_list .table_1 .search th .div_flex{
    justify-content: center;
    gap: 1em;
    overflow: visible;/*↓のbox-shadowの表示用*/
    margin: 0.3em auto;
}

.fa-search{
    line-height: 1.5;
    font-size: 23px;
    background: #b1cfff;
    border-radius: 3px;
    box-shadow: 2px 2px #696969;
}

.search_1{
    width: 1.5em;
    color: #363640;
}

.search_2{
    width: 4em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #6C7489;
    padding: 0 0.2em;
    margin-bottom: 2px;
}

.search_3{
    font-size: 20px;
    font-family: FontAwesome;
}

/*==生年月日 date_of_birth*/
.search_customer_list .table_1 .date_of_birth td p{
    flex: 0.95;
}

.search_customer_list .table_1 .date_of_birth td img{
    max-width: 262px;
    width: 29%;
}

/*//出力順、更新日 table_2*/
.search_customer_list .table_2 tr:first-of-type th{
    width: 20%;
}

/*不要なborder*/
.search_customer_list .table_2 tr:first-of-type th,
.search_customer_list .table_2 tr:nth-of-type(2) th,
.search_customer_list .table_2 tr:nth-of-type(2) td{
    border-top: none;
}

/*==出力順 output_order*/
.search_customer_list .table_2 .output_order th .spa_block{
    width: 90%;
    font-size: 14px;
    text-align: left;
    word-break: break-word;    
    margin: 0 auto;
}

/*カナ読み順～更新日時順*/
.search_customer_list .table_2 .row_tr th{
    /*width: 7em; HTMLのcolgroupでサイズ指定*/
    width: 13.36%;
    font-size: 15px;
    background-color: #FAFAFA;
}

.search_customer_list .table_2 .row_tr td,
.search_customer_list .table_2 .row_tr td p{
    font-size: 14px;
}

/*==更新日 update_date*/
.search_customer_list .table_2 .update_date .div_flex{
    justify-content: space-between;
}

.search_customer_list .table_2 .update_date p{
    flex: 0.95;
    font-size: 15px
}

.search_customer_list .table_2 .update_date img{
    max-width: 408px;
    width: 45%;
    margin: 0;
}

/*img顧客リスト検索*/
#img_search_customer_list{
    max-width: 345px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 0;
}

/**キーワード検索 search_keyword*/
.search_keyword p{
    flex: 1;
    margin-bottom: 0.5em;
}

/*clearボタン*/
.search_keyword table .clear th span{
    display: inline-block;
    width: 4.5em;
    text-align: center;
    letter-spacing: 0.2em;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
    color: #1A5EFF;
    background-color: #CCCCCC;
}

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

.search_keyword img{
    max-width: 348px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*+顧客リスト　一覧*/
.nav_list_flex{
    display: flex;
    justify-content: left;
    gap: 4em;
}

.spa_h2{
    display: inline-block;
    font-size: 17px;
    font-weight: 400;
    color: black;
    text-decoration: underline;
    text-decoration-color: red;
}

/*img顧客リスト表示項目*/
#img_details_list{
    max-width: 1783px;
}

/*//上部リンク nav_list*/
.nav_list ul li{
    padding: 0.2em 0.4em;
}
.nav_list ul li,
.nav_list ul li a{
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.nav_list ul li span{
    font-size: 20px;
}

/**顧客リスト　表示項目 details_list*/
.details_list table th{
    width: 15%;
}

/*//見出し、印刷・CSVアイコン table_1*/
.details_list .table_1 th span{
    line-height: 1.2;
    font-size: 40px;
}

/*印刷*/
.details_list .table_1 .fa-print{
    position: relative;
    z-index: 0
}

.details_list .table_1 .fa-print::before{
    display: inline-block;
    line-height: 0.9;/* 行の高さを詰める */
    margin-top: 0.15em;
}

/*アイコンに白背景色*/
.details_list .table_1 .fa-print::after{
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.8em;
    background: #fff;
    border-top-right-radius: 5px;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%);
    z-index: -1;
}

/*CSVアイコンに白背景色*/
.details_list .table_1 .fa-file-text-o::before{
    display: inline-block;
    line-height: 0.85;/* 行の高さを詰める */
    background: #fff;
    border-top-right-radius: 10px;
    margin-top: 0.2em;
}

.details_list .table_1 .details_list .table_1 td{
    width: 35%;
}

/*// s/n～住所 table_2*/
/*不要なborder*/
.details_list .table_2 tr:first-of-type th,
.details_list .table_2 tr:first-of-type td{
    border-top: none;
}

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

/*丸↓アイコン*/
.details_list .table_2 th .fa-arrow-circle-down{
    font-size: 20px;
    color: #585A67;
    margin-right: 1px;
    margin-top: 3px;
}

.details_list .table_2 th span:last-of-type{
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-weight: 900;
    color: #585A67;
    text-decoration: underline;
    text-decoration-color: #585A67;
}

.details_list .table_2 tr:first-of-type th{
    color: black;
    text-decoration: none;
}

/*==顧客名 customer_name*/
.details_list .table_2 .customer_name th img{
    max-width: 240px;
    width: 12%;
    margin: 0;
    margin-left: 5px;
}

/*==売上明細表示 show_sales_details*/
.details_list .table_2 .show_sales_details th img{
    max-width: 80px;
    width: 35px;
    margin: 0.3em auto;
}