/* #region共通 */

th, td {
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}
.form-btn{

    width: 300px;
    height: 60px;
    font-size: 15px;
    color: black;
    font-weight: bold;
    border-radius: 10px;
    background-color: aliceblue;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto;

    a{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;

        &:visited{
            color: black;
        }
    }

    &.online{
        
        border: solid 1px;
    }

    &.gray{
        
        background-color: gray;
    }

    &.orange{
        
        background-color: lightpink;
    }

    &:hover{
        opacity: 0.5;
        cursor: pointer;
    }
}
.yn-btn{
    width: 200px;
    height: 30px;
    line-height: 30px;
    display: block;
    border: none;
    font-size:16px;
    border-radius: 5px;
    background-color: red;
    color:white;
    text-align: center;
    margin: 30px auto;


    &.gray{
        
        background-color: gray;
    }
    &:hover{

        cursor: pointer;
    }
}

/* データテーブル関連 */
.admin-user-table-area .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    color:black !important;
}

.user-disp-table th.thbtn{
    padding: 0;
}
.tbbtn{
    background: unset;
    border: none;

    a{
        color:black;
        display: block;
        margin: 6px;
    }
}


.squeeze-btn{
    width: 200px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    margin-left: 10px;
    display: block;
    border: none;
    font-size:16px;
    border-radius: 5px;
    background-color: red;
    color:white;
    text-align: center;

    &.gray{
        
        background-color: gray;
    }
    &:hover{

        cursor: pointer;
    }

    &.release{
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.member-list-btn{
    width: 950px;
}
.btn-flex{
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    &.flex-st{
        justify-content: flex-start;
    }
}
.btn-flex-right{
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    margin-bottom: 30px;
}
.btn-flex-left{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30px;
}
@media screen and (max-width: 640px) {
    .squeeze-btn{
        width: 300px;
        margin: 10px 0;
    }
    .btn-flex-right,.btn-flex-left{
        display: block;
    }
}

.al-mes{
    width: 80%;
    background-color: pink;
}
.edit-mark{
    width: 100px;
    height: 30px;
    line-height: 30px;
    display: block;
    border: none;
    font-size:12px;
    border-radius: 5px;
    background-color: red;
    color:white;
    text-align: center;
    margin: 5px auto;

    & a,
    & a:visited{
        color: white;
    }

    &.gray{
        background-color: gray;
    }
    &:hover{
        opacity: 0.5;
        cursor: pointer;
    }
}

.over-area{
    width: 1400px;
    margin-left: -200px;
    overflow-y: auto;

}

a{
    text-decoration:none;

    &:hover{
        color:unset !important;
        text-decoration: none !important;
    }
}

/* ヘッダー */
/* デスクトップ版のスタイル */
.header-menu-flex {
    display: flex;
}

/* ハンバーガーボタン */
.hamburger-menu {
    display: none;
    width: 30px;
    /* display: flex; */
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 4px;
    
    margin-bottom: 5px;
    background-color: #333;
    transition: 0.3s;
}

/* メニューが開いたときのアニメーション */
.hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.open span:nth-child(2) {
    opacity: 0; /* 真ん中のバーを非表示に */
}

.hamburger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* スマホ表示用のスタイル */
@media screen and (max-width: 640px) {
    .header-area{display: none;}
    .header-menu-flex {
        display: none; /* 初期状態では非表示 */
        flex-direction: column;
    }

    .hamburger-menu {
        display: block;
        position: absolute;
        right: 10px;
        top: 50px;
    }

    .header-menu-flex.open {
        display: flex; /* メニューが開いている場合は表示 */
    }

    .header-menu-box{
        max-width: unset;
    }
}

.table-annotation{
    margin: 30px;
}
.split-sheet{
    background-color: antiquewhite;
}

.flex-area{
    display: flex;
}

.result-font{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: bold;
}

.admin-main-area{
    
    padding: 60px;
}
.admin-menu-area{
    height: 600px;
    .form-btn{
        margin-top: 30px;
    }
}

.admin-title{
    font-size:32px;
    border-bottom: 1px solid;
    margin-bottom: 30px;

}

.admin-btn-area{
    margin-top: 30px;
    margin-bottom: 30px;
}

/* #region モーダル */

.modal {
    display: none;
    height: 100vh;
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.8);
    opacity: 0.5;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

.modal__content {
    background: #fff;
    left: 50%;
    /* position: absolute; */
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px #00000029;
    color: black;
    text-align: center;
    z-index: 10;
}

.modal-text-area {
    width: 560px;
    height: 180px;
    margin: auto;
    
    display: flex;
    align-items: center;
    justify-content: center;
}



.modal__content .title {
    margin: 0;
}

.modal__content .sub {
    height: calc(100% - 120px);
    overflow: scroll;
    overflow-x: hidden;
    margin-top: -10px;
}
/* 表示設定 */
.modal-save-btn{
    height: 30px;
    line-height: 30px;
    margin: 20px auto 50px;
    display: block;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    background-color: red;
    color: white;
    text-align: center;
}
.modal-group-tr{
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}

.modal-group-label{
    width: 100px;
}


.ast-font{
    margin-left: 10px;
    font-size: 11px;
}
.check-btn{
    
    width: 150px;
    height: 30px;
    line-height: 30px;
    border: none;
    font-size: 12px;
    border-radius: 5px;
    background-color: gray;
    color: white;
    text-align: center;

    &.red{
        
        background-color: red;
    }
}

.js-btn-flex{
    display: flex;
    justify-content: flex-start;
    margin: 15px 40px;
    gap: 10px;
}
#setting-modal,#search-modal{
    & .modal__content{
        width: 1000px;
        height: auto;
    }
    & .modal-text-area{
        height: 80px;
        font-weight: bold;
        font-size: 20px;
    }
}
.check-flex{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: 920px;
    margin: auto;
}
.check-area{
    height: 300px;
    overflow-y: auto;
}
.check-box{
    width: 220px;
    text-align: start;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;

    & label{
        max-width: 90%;
        font-size: 14px;
        margin-right: 10px;
    }
}

#btn-close,#search-btn-close{
    
    width: 50px;
    height: 50px;
    font-size: 35px;
    position: absolute;
    border: solid 1px;
    right: -10px;
    top: -10px;
    border-radius: 30px;
    background: white;
    cursor: pointer;
}

/* #endregion */

/* #region顧客登録 */


.admin-user-table-area{
    padding: 60px;
}
.user-disp-table{

    /* overflow: scroll; */
    th{
        min-width: 40px;
        text-align: center;
    }
}
.admin-user-table-area .col-sm-12{
    /* ユーザーテーブル用 */
    overflow-x: auto;
}
.input_address{
    width: 600px;
}
.save-log-area{
    width: 850px;
    margin: auto;
    margin-top: 50px;
}
.sex-M{
    color:blue;
}
.sex-W{
    color:red;
}

.user-table-data{

    width: 60%;
}
.data-check{
    border:none;
    background-color: unset;
    width: 60%;
}
.data-check-double{
    
    border:none;
    background-color: unset;
}
.user-table-flex{
   /* display: flex;*/
    align-items: center;
    margin-bottom: 10px;
    /* gap: 10px; */
    min-height: 50px;

    &:nth-child(even) {
        background-color: #f7f7f7;
    }
    
}
.user-table-item {
    flex: 0 0 200px;
    min-width: 120px;
    max-width: 250px;
}
.user-tel-input{
    width: 50px;
    text-align: center;
}
.user-born-input{
    width: 50px;
    text-align: right;
}
.user-input-area{
    max-width: 850px;
    margin: auto;
}
.user-input-remarks{
    width: 600px;
    height: 200px;
}
.user-input-mail{
    width: 400px;
}

.no_introduction{margin-left: 20px;}

.user-table-data {
    flex: 1 1 0%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 8px;
}
.copy-btn {
    flex-shrink: 0;
    min-width: 60px;
    font-size: 14px;
    padding: 4px 10px;
}





@media (min-width: 601px) {
    .user-table-flex {
        display: flex;
    }
    
}



@media (max-width: 600px) {
    .user-table-flex {
        flex-direction: column;
        align-items: stretch;
    }
    .user-table-data {
        justify-content: flex-start;
    }
}

/* #endregion */

/* 顧客編集 */
.admin-profile-edit-area {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 50px;
    margin-bottom: 100px;
}
.admin-profile-edit-title-box {
    border-bottom: 3px solid #B0B0B0;
}

/* 関連設定 */
.admin-connect-area{
    width: 1200px;
    margin: auto;
}
.connection_name_text{
    width: 80%;
    margin-right: 30px;
}


/* グループ設定 */
.user-group-area{
    width: 1000px;
    margin: 30px auto;
}
.user-group-flex{
    display: flex;
    align-items: center;
}
.user-group-tr-flex{
    display: flex;
    align-items: center;
    min-height: 70px;

    &:nth-child(odd) {
        background-color: #f7f7f7;
    }
}
.group-head{
    width: 100px;
}
.group-center{
    width: 640px;
    margin-left: 30px;
    margin-right: 30px;
}
.input-group-setting{
    /* width: 400px; */
    width: 100%;
}
.user-group-text{
    /* width: 398px;
    margin-left: 30px;
    margin-right: 30px; */
}
.user-group-no{
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background-color: #808080;
    color:white;
    text-align: center;
    margin-left: 20px;
}
.up-down-flex{
    margin-left: 20px;
    line-height: 30px;
    flex-wrap: wrap;
    display: flex;
    gap: 10px;
}
.move-btn {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #e0e0e0;
    cursor: pointer;
    text-align: center;
}
.user-group-name{
    width: 640px;
    margin-left: 50px;
}
.tin-submit-btn{
    background-color: #b2b2b2;
    border: 0;
    border-radius: 5px;
    width: 200px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    
}
.input-group{
    width: 150px;
}
.res-text{
    font-size: 16px;
    text-align: center;
    margin: 10px;
}
.connect-sub-title{
    font-size: 16px;
    margin-bottom: 10px;
}



/* 浄霊シート */
.table-squeeze{
    width: 300px;
    height: 30px;
    margin-right: 20px;
}
.spirit-detail-img{
    display: block;
    
    height: 400px;
    width: 100%;
    object-fit: contain;
    border: solid 1px;
    padding: 10px;
}

.img-upload-text{
    width: 300px;
}
.img-delete-mark{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: none;
    font-size:12px;
    border-radius: 5px;
    background-color: gray;
    color:white;
    text-align: center;
    margin: 5px auto;

    & a,
    & a:visited{
        color: white;
    }

    &:hover{
        opacity: 0.5;
        cursor: pointer;
    }
}

.answer-area{
    min-height: 50px;
    margin-bottom: 30px;
}

.sprit-input-text{
    &.readonly{
        border: none;
    }
}
.sprit-textarea{
    width: 90%;
    border: 1px solid #000;
    margin-bottom: 20px;
    margin-top: 20px;

    &.readonly{
        border: none;
    }
}

/* 施術提出画像 */
.flex-img-area{
    display: flex;
    flex-wrap: wrap; /* 折り返しを有効にする */
}
.img-box{
    flex: 0 0 calc(50% - 10px); /* 幅を50%に設定し、間隔を考慮 */
    margin: 5px; /* 隙間を確保 */
    box-sizing: border-box; /* パディングやボーダーを含むサイズ計算 */

    & img{
        height: 400px;
        width: 100%;
        object-fit: contain;
        border: solid 1px;
        padding: 10px;
    }
}

.admin-spirit-area{
    
    max-width: 1030px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 50px;
    margin-bottom: 100px;
}
.admin-spirit-title-box{
    border-bottom: 3px solid #B0B0B0;
    margin-bottom: 20px;
}
.admin-spirit-menu-title{
    
    color: black;
    font-size: 36px;
}

.admin-spirit-subtitle-box{
    width: 600px;
    border-bottom: 1px solid #B0B0B0;
    margin-bottom: 30px;
    margin-top: 80px;

    & .admin-spirit-menu-title{
    
        font-size: 40px;
    }
}