/*+顧客情報：顧客登録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%;
}

/*+顧客登録画面の機能*/
/*img顧客登録画面*/
#img_customer_reg_view{
    max-width: 794px;
}

/*//上部リンク nav_list*/
.nav_list .div_flex{
    width: 80%;
    align-items: center;
    justify-content: left;
}

.nav_list .div_flex p{
    flex: 0.7;
    margin: 0;
}

.nav_list .div_flex a{
    width: 7.8em;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: white;
    border: 2px solid transparent;/*hover用*/
    background-color: #585A67;
    border-radius: 5px;
    padding: 0 3px;
}

/*リストアイコン fa-list-alt*/
.nav_list .div_flex a .fa-list-alt{
    font-size: 19px;
    line-height: 1;
}

/*顧客リストボタンhover*/
.nav_list .div_flex a:hover{
    color: #564E9E;
    border: 2px solid #CCCCCC;
    background: linear-gradient(to bottom, #EDEFF0, #FDFBFB);
}

/**顧客登録　入力項目一覧 client_reg_input_list*/
.client_reg_input_list th{
    width: 13%;
}

/*必須項目*/
.client_reg_input_list .kome{
    display: block;
    color: #FF6347;
}

.client_reg_input_list td .kome:first-of-type{
    display: inline-block;
}

/*==新規 new_customer_registration*/
.new_customer_registration th .div_flex{
    width: 6em;
    justify-content: center;
    align-items: center;
    gap: 1em;
    color: white;
    background-color: #3F5DA5;
    border-radius: 10px;
    overflow: hidden;
    padding: 0.1em 0.5em;
    margin: 0.3em auto;
}

/*枠内鉛筆*/
.new_customer_registration th .div_flex .fa-pencil-square{
    font-size: 19px;
}

/*==郵便番号 postal_code*/
/*住所取得*/
.postal_code .spa_1{
    display: inline-block;
    width: 5.7em;
    text-align: center;
    color: white;
    background-color: #3F5DA5;
    border-radius: 5px;
    padding: 0.1em 0;
}

.postal_code th .spa_1{
    display: block;
    margin: 0 auto;
}

.postal_code td .spa_1{
    margin: 0 0.2em;
}

/*==誕生日 birthday*/
.birthday td .div_flex{
    justify-content: space-between;
}

.birthday td p{
    width: 55%;
    display: flex;
    vertical-align: middle;
}

/*▽*/
.birthday td .spa_1{
    display: inline-flex;
    align-items: center;
    width: 2em;
    height: 1.8em;
    background-color: #89A6BD;
    margin-right: 0.2em;
}

.birthday td .spa_1::before{
    content: "▼";
    color: #EEEEEE;
    margin: 0 auto;
}

.birthday td img{
    max-width: 570px;
    flex: 0.97;
    margin: 0;
}

/*==地区 district_code*/
/*地区コードについて*/
.district_code td div{
    width: 98%;
    background-color: #F9F9FF;
    border: 1px solid #D8DCDE;
    padding: 0.5em;
    margin: 0 auto;
    margin-top: 0.5em;
}

.district_code td div h4{
    font-weight: 400;
    margin: 0;
}

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

/*==メール送信 send_email*/
.send_email td .div_flex{
    justify-content: space-between;
    margin-top: 0.5em;
}

.send_email td table{
    width: 55%;
    font-size: 15px;
}

.send_email td table th,
.send_email td table td{
    border: none;
}

.send_email td table th{
    width: 6em;
    text-align: right;
    text-decoration: underline;
    vertical-align: text-top;
    background-color: unset;
    padding: 0
}

.send_email td table th span{
    display: inline-block;
    text-decoration: none;
}

.send_email td table td{
    vertical-align: text-top;
    padding-left: 0;
    padding-right: 0;
}

.send_email td img{
    display: inline-block;
    max-width: 550px;
    flex: 0.97;
    margin: 0;
}

/*==登録日 registration_date*/
.registration_date .div_flex{
    justify-content: space-between;
}

.registration_date .div_flex p{
    width: 55%;
}

.registration_date .div_flex img{
    max-width: 610px;
    flex: 0.97;
    margin: 0;
}
/*==会員期限 membership_expiration*/
.membership_expiration .div_flex{
    justify-content: space-between;
}

.membership_expiration .div_flex p{
    width: 55%;
}

.membership_expiration .div_flex img{
    max-width: 610px;
    flex: 0.97;
    margin: 0;
}

/*==ブラック blacklisted_customer*/
.blacklisted_customer td div{
    width: 70%;
    min-width: 0;
    background-color: #E6E6FF;
    padding: 0.3em 3em;
    margin: 0.5em auto;
}

.blacklisted_customer td div ul{
    display: flex;
    justify-content: space-around;
    overflow: hidden;
}

.blacklisted_customer td div ul li{
    width: 5.5em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    white-space: nowrap;
    margin: 0.3em 0;
}

.blacklisted_customer td div ul .li_0{
    color: #000000;
}

.blacklisted_customer td div ul .li_1{  
    color: #0000FF;
}

.blacklisted_customer td div ul .li_2{
    color: #00FF00;
}

.blacklisted_customer td div ul .li_3{
    color: #FFFF00
}

.blacklisted_customer td div ul .li_4{
    color: #FF00FF
}

.blacklisted_customer td div ul .li_5{  
    color: #FF0000
}

/*点滅*/
.blacklisted_customer td div ul li span{
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/*==ランク customer_rank*/
.customer_rank td table{
    margin: 0.5em auto;
}

.customer_rank td table th{
    width: 4em;
    background-color: #FAFAFA;
}

/*==客状態 customer_status*/
.customer_status td span{
    text-decoration: underline;
    text-decoration-color: red;
}

/*==登録ボタン register_button*/
.register_button th .div_flex{
    width: 5.5em;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    color: white;
    background-color: #3F5DA5;
    border-radius: 10px;
    padding: 0.2em 0;
    margin: 0.3em auto;
}

/*==クリアボタン clear_button*/
.clear_button th .div_flex{
    width: 6.5em;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    letter-spacing: 0.2em;
    color: white;
    background-color: #2F4F4F;
    border-radius: 10px;
    padding: 0.2em 0;
    margin: 0.3em auto;
}

/*+顧客情報の編集*/
/*img*/
#img_edit_customer_info{
    max-width: 672px;
    margin-top: 0.5em;
}

.spa_flex{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6em;
    border-radius: 10px;
    padding: 0.2em 0;
    margin-right: 0.2em;
}

/**登録内容の変更 change_registration*/
.change_registration p{
    width: 95%;
    margin: 0 auto;
}

/*登録ボタン*/
.change_registration .spa_flex{
    width: 5.5em;
    color: white;
    background-color: #3F5DA5;
}

/**登録内容をコピー copy_registration*/
.copy_registration .div_flex{
    justify-content: space-between;
    overflow: visible;/*拡大画像のbox-shadowを表示させるため*/    
}

.copy_registration p{
    flex: 0.8;
}

/*コピーボタン*/
.copy_registration .spa_1{
    width: 6em;
    color: white;
    background-color: #3F5DA5;
}

/*登録ボタン*/
.copy_registration .spa_2{
    width: 5.5em;
    color: white;
    background-color: #3F5DA5;
}

.copy_registration .img_zoom{
    max-width: 672px;
    width: 30%;
}

/**登録内容の削除 delete_registration*/
.delete_registration .div_flex{
    justify-content: space-between;
}

.delete_registration .div_flex div{
    flex: 0.98;
}

/*削除ボタン*/
.delete_registration .spa_flex{
    width: 5em;
    color: white;
    background-color: #800000;
    gap: 0.25em;
}

.delete_registration .div_flex div .d_1{
    width: 95%;
    background-color: #F9F9FF;
    border: 1px solid #D8DCDE;
    padding: 0.5em 1em;
    margin: 0 auto;
    margin-top: 1em;
}

.delete_registration .div_flex div .d_1 h4{
    color: black;
    font-weight: 400;
    margin: 0;
}

.delete_registration img{
    max-width: 448px;
    border: 2px solid #F4DED3;
    border-radius: 10px;
    margin: 0;
}