/*+顧客ランク更新CSS*/
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%;
}

/*注意点 div_h1*/
.div_h1{
    background: #fff5f5;
    border-color: red;
    padding: 0.5em 1em;
}

.div_h1 h2{
    color: black;
    margin: 0;
}

/*__POS側で顧客ランクを変更できないようにする設定 customer_rank_locked toggle_1*/
.customer_rank_locked{
    background-color: white;
}

/*div_toggleがテーブルじゃない場合に不要な余白とborderを消す*/
.div_h1 .com_border{
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.5em ;
}

/*main.css labelのpadding消す*/
input[type="checkbox"]+label, input[type="radio"]+label{
    padding: 0;
    display: block;
}

/*開いた時に共通CSSのチェックマーク・フォーカス線が出てしまうのを打ち消す*/
.customer_rank_locked .toggle_1:checked + .label_h4::before,
.customer_rank_locked .toggle_1:focus + .label_h4::before {
    content: "";
    background: none;
    border-color: transparent;
    box-shadow: none;
}

/*線 幅 位置*/
.customer_rank_locked{
    width: 100%;
    padding-bottom: 0;
    margin: 0 auto;
    margin-top: 0.5em;
}

/*クリックする見出し*/
.customer_rank_locked .com_h5{
    height: 35px;
    line-height: 35px;
    font-weight: 900;
    padding-left: 1em;
    margin-bottom: 0;
}

/*不足分border　テーブルの場合いらない*/
.customer_rank_locked .label_h4{
    position: relative;
}

.customer_rank_locked .label_h4::before{
    content: "";
    display: none;
    width: 100.05%;
    height: 0;
    position: absolute;
    bottom: -1px;
    left: -0.05%;
}

/* チェックが入ったら（クリックしたら）開く*/
.toggle_1:checked ~ .div_toggle {
    max-height: 1100px; /* 全体の高さ pxじゃないと滑らかに動かない*/
    border-bottom-width: 1px;
    padding-bottom: 1em;
}

/*メニュー上下の速さ*/
.div_toggle{
    max-height: 0;
    overflow: hidden;
    border-bottom: 0px solid #D8DCDE;/*トグルを開い時に線が太くなる*/
    transition: max-height 0.7s ease-in-out, border-bottom-width 0.7s ease-in-out;
}

/* h4をクリック可能にする*/
.label_h4 {
    cursor: pointer;
    display: block;
    width: auto;
}

/* ▼ ▲ の切り替え */
.toggle_1 + .label_h4::after {
    content: " ▼";
    font-size: 25px;
}

.toggle_1:checked + .label_h4::after {
    content: " ▲";
    font-size: 25px;
}

/*__トグルの中身 div_toggle*/
.div_toggle .div_flex{
    width: 98%;
    justify-content: space-between;
}

.div_toggle .div_flex figure{
    flex: 0.325;
}

.div_toggle figcaption{
    font-size: 14px;
    color: black;
}

.div_toggle figcaption .number{
    font-size: 1.3em;
}

/*== 設定方法１～３*/
.div_toggle .div_flex:first-of-type{
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}
.fig_1 img{
    width: 90%;
}

/*==設定方法４～６*/



/*+顧客ランク更新画面*/
#img_update_customer_rank_screen{
    max-width: 595px;
}

/**表示項目 display_items*/
/*登録 閉じるボタン*/
.display_items th .button{
    display: inline-block;
    width: 6em;
    text-align: center;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    background-color: #EFEFEF;
    border: 1px solid #959595;
    border-radius: 3px;
    padding: 0.3em 0;
    margin: 0.2em auto;
}

/**操作手順 operation_steps*/
.operation_steps .number{
    display: inline-block;
    width: 2em;
    color: black;
    font-weight: 900;
}

/*右向き矢印 arrow*/
.operation_steps .arrow{
    display: inline-block;
    flex: 0.7;
    text-align: center;
    margin: auto 0;
}

.operation_steps .arrow::before{
    content: "→";
    display: inline-block;
    font-size: 45px;
    font-weight: 900;
    color: #4F4F4F;
}

.operation_steps img{
    min-width: 0;
}

/*//１．変更後のランクを入力 enter_new_rank*/
.enter_new_rank{
    justify-content: space-between;
}

.enter_new_rank .div_1{
    display: flex;
    flex: 0.7;
}

.enter_new_rank img{
    display: inline-block;
    max-width: 105px;
}

/*//２．顧客ランク更新完了 rank_update_done*/
.rank_update_done .div_flex{
    margin-bottom: 0.5em;
}

.rank_update_done .img_flex{
    width: 95%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

#img_rank_update_done_1{
    max-width: 297px;
    margin: 0;
}

#img_rank_update_done_2{
    max-width: 718px;
    margin: 0;
}

/*//３．変更後のランクを反映 apply_new_rank*/
.apply_new_rank .div_flex{
    margin-bottom: 0.5em;
}

.apply_new_rank .img_flex{
    width: 95%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.apply_new_rank .img_flex img{
    max-width: 275px;
    margin: 0;
}

.apply_new_rank .arrow{
    flex: 0.3;
}

/*//一括更新後の変更 bulk_update_change*/
.bulk_update_change p{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.bulk_update_change p span{
    color: red;
}

.bulk_update_change div{
    width: 50em;
    width: 65%;
    background-color: #F9F9FF;
    border: 1px solid #D8DCDE;
    padding: 0.5em 2em;
    margin: 0 auto;
}

.bulk_update_change div ul{
    width: 95%;
    list-style: disc;
    list-style-position: inside;
    margin: 0 auto; 
}

.bulk_update_change ul li{
    line-height: 2em;
    overflow-wrap: break-word;
}