/* レイアウト */
.app {
    overflow-x: hidden;
    margin-bottom: auto;
}
.content{
  width:100%;
  padding-top: 60px;
  padding-left: 220px;
  padding-right: 20px;
  margin-bottom: 80px;
  transition:.2s;
}
@media screen and (min-width: 577px) {
    .nav-close .content{
        padding-left: 80px;
    }
}
@media screen and (max-width: 576px) {
  .content{
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 1400px) {
    .select-mode .desc {
      display: none;
    }
  }  

/* 見出し */
.head-icon .info{ background: transparent  url("../img_LT/icon_info.svg") no-repeat center /contain;}
.head-icon .service{ background: transparent  url("../img_LT/icon_service.svg") no-repeat center /contain; }
.head-icon .setting{ background: transparent  url("../img_LT/icon_setting.svg") no-repeat center /contain; }
.head-icon .adviser{ background: transparent  url("../img_LT/icon_adviser.svg") no-repeat center /contain; }
.head-icon .group{ background: transparent  url("../img_LT/icon_group.svg") no-repeat center /contain; }
.head-icon .category{ background: transparent  url("../img_LT/icon_category.svg") no-repeat center /contain; }
.head-icon .log{ background: transparent  url("../img_LT/icon_log.svg") no-repeat center /contain; }
.head-icon .account{ background: transparent  url("../img_LT/icon_account.svg") no-repeat center /contain; }
.head-icon .guest{ background: transparent  url("../img_LT/icon_guest.svg") no-repeat center /contain; }
.head-icon .customer_service{ background: transparent  url("../img_LT/icon_customer_service.svg") no-repeat center /contain; }
.head-icon .history{ background: transparent  url("../img_LT/icon_history.svg") no-repeat center /contain; }
.head-icon .share_screen{ background: transparent  url("../img_LT/icon_share_screen.svg") no-repeat center /contain; }
.head-icon .contact{ background: transparent  url("../img_LT/icon_contact.svg") no-repeat center /contain; }
.head-icon .request{ background: transparent  url("../img_LT/icon_request.svg") no-repeat center /contain; }
.head-icon .dashboard{ background: transparent  url("../img_LT/icon_dashboard.svg") no-repeat center /contain; }
.head-icon .user{ background: transparent  url("../img_LT/icon_user.svg") no-repeat center /contain; }
.head-icon .tenant{ background: transparent  url("../img_LT/icon_tenant.svg") no-repeat center /contain; }
.head-icon .statistics{ background: transparent  url("../img_LT/icon_statistics.svg") no-repeat center /contain; }
.head-icon .security{ background: transparent  url("../img_LT/icon_security.svg") no-repeat center /contain; }
.head-icon span{
    filter: brightness(0) saturate(100%) invert(24%) sepia(30%) saturate(0%) hue-rotate(180deg) brightness(95%) contrast(100%);
}
.content-head.head-btn-wrap,
.content-sub-head.head-btn-wrap {
    display: flex;
    align-items: center;
}
.head-btn-wrap{
  display: flex;
}
.content-head,.content-sub-head {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.content-head button{
    margin-right: 5px;
    margin-bottom: 10px;
}
.content-sub-head button{
    margin-bottom: 10px;
}


.content-head h1{
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}
.content-head h1 .head-icon{
    height: 25px;
    width: 25px;
    margin-right: 10px;
    display: inline-flex;
    align-content: center;
    justify-content: center;
}
.head-icon > span{
    width: 20px;
    height: 20px;
}
.content-sub-head h2 {
    margin-right: 20px;
}


/* ************************************** */
/* アドバイザー一覧 */
/* ************************************** */
#account-list .account-count {
    margin-left: auto;
    font-weight: bold;
}
#account-list .account-count .num {
    margin-left: 6px;
    font-size: 18px;
}
@media screen and (max-width: 767px) {
    #account-list .account-count {
        margin-left:0;
        margin-bottom: 12px;
    }
}

/* ************************************** */
/* リクエスト一覧 */
/* ************************************** */
#request-list .form-table-wrap table select[name="status"]{
    min-width: 100px;
}
#request-list table tr td{
    cursor: pointer;
}
#request-list .search-condition-list:first-of-type,
#request-list .search-condition-list:first-of-type label{
    margin-bottom: 0;
}
#request-list .search-condition-list:first-of-type {
    grid-template-columns: repeat(1,1fr);
}
#request-list #table-request-list .unread{
    position: relative;
}
#request-list #table-request-list .unread:after {
    content: '';
    background-image: url("../img_LT/icon_unread_message.svg");
    width: 25px;
    height: 25px;
    position: absolute;
    top: -12px;
    right: -5px;
}
.request-datetime select{
    width: 240px;
}
@media screen and (max-width: 1200px){
    .request-datetime select{
        min-width: 100px;
    }
}


/* ************************************** */
/* ログ管理 */
/* ************************************** */
.csv-output {
    margin-top: 2em;
  }
  .csv-output h2{
    padding: 0.25em 0.5em;
    color: var(--font-color);
    background: transparent;
    border-left: solid 5px var(--main-color);
  }
  .csv-output ul{
    margin-left: 1em;
  }
  .csv-output ul li{
    padding: 0.2em;
}

/* ************************************** */
/* 環境設定　画面設定 */
/* ************************************** */
/* タブ */
#setting-sms-invite .tab-wrap .tab-label,
#setting-security .tab-wrap .tab-label,
#setting-display-operation .tab-wrap .tab-label,
#datasetting-portal .tab-wrap .tab-label,
#setting-request-message .tab-wrap .tab-label,
#setting-function .tab-wrap .tab-label,
#setting-request-message .tab-wrap .tab-label,
#setting-request-message-regist .tab-wrap .tab-label,
#setting-authority .tab-wrap .tab-label{
    max-width: 250px;
}

/* サムネイル */
.uploded-thumbnail {
    margin-bottom: 10px;
}
.uploded-thumbnail img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* ベースカラー */
.base-color{
    display: flex;
}
.base-color > label{
    max-width: 150px;
    width: calc((100% - 20px) / 3);
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
}
.base-color > label:first-of-type {
    background: var(--portal-base-color1);
    color: var(--white);
}
.base-color > label:nth-of-type(2) {
    background: var(--portal-base-color2);
    color: var(--white);
}
.base-color > label:nth-of-type(3) {
    background: var(--portal-base-color3);
    color: var(--white);
    margin-right: 0;
}

/* ポータルURL */
.portal-url {
    width: 100%;
}
.portal-url input {
    width: 100%;
}

/* レイアウトタイプ */
.layout-type{
    width: 150px;
    list-style: none;
}
.layout-type:not(:last-child) {
    margin-right: 15px;
}
.layout-type label{
    width: 150px;
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    margin-bottom: 10px;
}
.layout-type label + div {
    text-align: center;
}
@media screen and (max-width: 992px) {
    .layout-type {
        width: calc(100% / 2 - 15px);
        margin-bottom: 10px;
    }
    .layout-type label {
        width: 100%;
    }
}

/* プレビュー */
.prevew {
    height: 250px;
    overflow-y: scroll;
    margin-top: 12px;
    margin-bottom: 12px;
}
.prevew img{
    width: 100%;
}

/* フッター */
@media screen and (max-width: 992px) {
    #setting-display-service .footer-link{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 6px;
    }
}

/* ************************************** */
/* 環境設定　リクエストメッセージ設定 */
/* ************************************** */
.tips-between{
    display: flex;
    justify-content: space-between;
}
.tips-right{
    text-align: right;
}
/* ************************************** */
/* 環境設定　セキュリティ */
/* ************************************** */
.using-ip {
    font-size: 16px;
}
.api-password input{
    width: 100%;
}

/* プロフィール画像*/
.profile-img {
    width: 80px;
    height: 80px;
}
.profile-img img {
    width: 100%;
    height: 100%;
}

/* acocount info */
.account-info {
    margin-bottom: 3em;
}


/* ************************************** */
/* 応対管理、統計 */
/* ************************************** */
/* 当日集計 */
#daily-report .summary{
    margin-bottom: 30px;
    margin-top: 20px;
    gap: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
#daily-report .simple-search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width: 992px) {
  #daily-report .summary{
    gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(calc(100% / 3),1fr));
  }
}
@media screen and (max-width: 767px) {
    #daily-report .simple-search-form .select-wrap,
    #daily-report .simple-search-form select{
        width: 100%;
    }
}

#table-today-report .profile-img img {
    border-radius: 30px;
}
#table-today-report .profile-img {
    width: 60px;
    height: 60px;
    margin: auto;
}

/* 統計 */
#statistics-summary .summary{
    margin-bottom: 30px;
    margin-top: 30px;
    gap: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
#statistics-summary .summary .card-wrap {
    margin-top: 1em;
}

/* レポート */
#total-report .report-radio{
    margin-bottom: 30px;
    margin-top: 30px;
    gap: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
#total-report .report-radio .card-wrap.on {
    background: var(--aliceblue);
}
.report-radio > .card-wrap {
    padding: 30px!important;
}
.term-radio .card-wrap {
    display: inline-flex;
    min-width: 45px;
    text-align: center;
    justify-content: center;
    line-height: 20px;
    margin-bottom: 10px;
}
.term-radio .card-wrap:not(:last-child){
    margin-right: 10px;
}
#total-report .term-radio .card-wrap.on {
    background: var(--aliceblue);
}
.chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
@media screen and (max-width: 992px) {
    #total-report .report-radio{
      gap: 20px;
      grid-template-columns: repeat(auto-fit,minmax(calc(100% / 2),1fr));
    }
    #statistics-summary .summary{
        gap: 20px;
      grid-template-columns: repeat(auto-fit,minmax(calc(100% / 2),1fr));
    }
}


/* ************************************** */
/* 通話開始設定 */
/* ************************************** */
#call-setting .select-mode{
  margin-bottom: 30px;
  margin-top: 30px;
  gap: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#call-setting .lead{
    font-size: 12px;
}
@media screen and (max-width: 992px) {
  #call-setting .select-mode{
    gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(calc(100% / 3),1fr));
  }
}

/* ************************************** */
/* カテゴリ管理 */
/* ************************************** */
.counter-category:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    background-image: url(../img_LT/icon_counter_category.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.sort-icon {
    position: relative;
    width: 20px;
    height: 15px;
}
.sort-icon{
  position: relative;
  width: 20px;
  height: 15px;
}
.sort-icon span{
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 3px;
  background: var(--font-color2);
}
.sort-icon span:nth-of-type(1){ top:0; }
.sort-icon span:nth-of-type(2){ top:5px; }
.sort-icon span:nth-of-type(3){ top:10px; }
.sort-icon span:nth-of-type(4){ top:15px; }

#category-list .sort-icon-wrap,
#category-list .sort-btn-wrap .sort-ch-btn{
  display: none;
}
#category-list .sort-btn-wrap.sorting .sort-ch-btn{
  display: block;
}#category-list .sorting .sort-btn{
  display: none;
}
#category-list .sorting .act-btn-wrap{
  display: none;
}
#category-list .sorting .sort-icon-wrap{
  display: block;
}
#category-list .sorting .list-row-item{
  cursor: move;
}



/* ************************************** */
/* 通話履歴 */
/* ************************************** */
.save-icon{
    width: 30px;
    height: 16px;
}
a.save-icon-wrap {
    width: 30px;
    height: 30px;
    background: var(--main-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
a.save-icon-wrap.disable {
    background: var(--main-color-disable);
    cursor: default;
}

  .border-tertiary{
    background-color: var(--white)!important;
    border: 1px solid var(--main-color);
    color: var(--main-color);
  }
  .save-icon.video{ background: transparent  url("../img_LT/save-log-video.svg") no-repeat center /contain;}
  .save-icon.memo{ background: transparent  url("../img_LT/save-log-memo.svg") no-repeat center /contain;}
  .save-icon.capture{ background: transparent  url("../img_LT/save-log-capture.svg") no-repeat center /contain;}
  .save-icon.chat{ background: transparent  url("../img_LT/save-log-chat.svg") no-repeat center /contain;}
  .save-icon.attached{ background: transparent  url("../img_LT/save-log-attached.svg") no-repeat center /contain;}
  .save-icon.download{ background: transparent  url("../img_LT/save-log-download.svg") no-repeat center /contain;}

#call-history table tr td{
  cursor: pointer;
}
#call-history .pagenation-wrap .disp-cnt-wrap {
    width: 100px;
    margin-bottom: 0;
}
#call-history .pagenation-wrap #disp-cnt {
    min-width: auto;
    width: 100%;
}
#call-history .pagenation-wrap .disp-cnt {
    min-width: auto;
    width: 100%;
}
@media screen and (max-width: 768px) {
    #call-history .pagenation-wrap .disp-cnt-wrap {
        margin-top: 10px;
    }
}


/* ************************************** */
/* サービス概要 */
/* ************************************** */
#service-overview .summary{
  margin-top: 30px;
  margin-bottom: 30px;
  gap: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
#service-overview .usage-status {
  margin-top: 30px;
  margin-bottom: 30px;
  gap: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: 3fr minmax(200px,1fr);
}
#service-overview .summary .card-body span{
    font-size: 14px;
}
#service-overview .form-table-wrap table{
  min-width: 600px;
}

@media screen and (max-width: 1200px) {
  #service-overview .usage-status {
      gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2),1fr));
  }
}

@media screen and (max-width: 992px) {
  #service-overview .summary{
    gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(calc(100% / 3),1fr));
  }
}

.usage-status .card-body,
.usage-strage .card-body{
    font-size: 14px;
  }
  .sms-cnt-over {
    color: var(--status-red);
  }
  .strage-cnt-over {
    color: var(--status-red);
  }
  .sms-cnt .default {
    color: var(--status-green);
  }
  .strage-cnt .default {
    color: var(--status-green);
  }
  .usage-status tr.active .sms-cnt-over strong,
  .usage-status tr.active .sms-cnt strong,
  .usage-status tr.active .strage-cnt strong,
  .usage-status tr.active  .strage-cnt-over strong {
    font-size: 20px;
  }
  .sms-rate{
    background-color: var(--status-green);
    font-size: 9px;
    line-height: 18px;
    color: var(--white);
    padding: 0 12px;
    margin: 0 8px;
    border-radius: 3px;
  }
  .sms-rate.over{
    background-color: var(--status-red);
  }
  .strage-rate{
    background-color: var(--status-green);
    font-size: 9px;
    line-height: 18px;
    color: var(--white);
    padding: 0 12px;
    margin: 0 8px;
    border-radius: 3px;
  }
  .strage-rate.over{
    background-color: var(--status-red);
  }
.usage-year-wrap {
    text-align: right;
}
  .chart-box {
    max-width: 300px;
    margin: 0 auto;
    position: relative
  }
  .chart-text {
    position: absolute;
    width: 100px;
    top: calc( 50% - 50px);
    left: calc( 50% - 50px );
  }
  .chart-text .remain {
    font-size: 2em;
    font-weight: bold;
  }

/* ************************************** */
/* ダッシュボード */
/* ************************************** */
.item-wrap {
    display: flex;
    flex-direction: row;
}
.item-list li:hover{
    background:var(--aliceblue);
}
.item-wrap .item-left {
    width: 30%;
    margin-right: 20px;
}
.item-wrap .item-right {
    width: 70%;
}
.item-left .card-wrap {
    margin-bottom: 20px;
}
.item-right .card-wrap {
    margin-bottom: 20px;
}
.item-contact .invite-footer button {
    width: 100%;
}
#dashboard-tenant .item-contact .tab-label:after{
    transition: none;
}
#dashboard-tenant .tab-label label:after {
    background: var(--main-color);
  }


/* ステータス */
.item-status {
    text-align: center;
}
.item-status .user-name {
    font-size: 20px;
    font-weight: bold;
}
.status-img-wrap {
    width: 63px;
    margin: auto;
    border-radius: 50%;
}
.select-stasus {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
  }
  .select-stasus a.select {
    display: inline-block;
    width: 170px;
    text-decoration: none;
    cursor: default;
    border-radius: 30px;
    height: 40px;
    background: var(--status-green);
  }
  .select-stasus a.select span {
    line-height: 40px;
    cursor: pointer;
    display: block;
    font-weight: bold;
    color: var(--white);
  }
  .select-stasus .pulldown {
    border: 1px solid var(--border-color);
    border-radius: 3px;
    width: 170px;
    max-height: 150px;
    position: absolute;
    left: 0;
    top: 43px;
    background: var(--white);
    overflow: auto;
  }
  .select-stasus .pulldown a {
    padding: 5px 30px;
    display: block;
    text-align: left;
  }
  .select-stasus .pulldown a:hover{
    text-decoration: none;
  }
  .select-stasus .pulldown a.last-child {
    border: none;
  }
  .select-stasus a .status-icon{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .select-stasus a .status-available {
    display: inline-flex;
    background: var(--status-green);
  }
  .select-stasus a .status-dnd {
    display: inline-flex;
    background: var(--status-yellow);
  }
  .select-stasus a .status-busy {
    display: inline-flex;
    background: var(--status-red);
  }

/* 同時接続数 */
.item-connection .card-head {
    text-align: left;
}
.item-connection .card-footer {
    text-align: right;
}
.item-connection .card-footer button img {
    width: 14px;
    margin-right: 0.5em;
}
.item-connection .card-wrap {
    padding: 20px;
}
/* リクエスト、お知らせリスト */
.item-list {
    display: flex;
    flex-direction: row;
}
.item-request-list {
    width: calc(50% - 10px);
    margin-right: 20px;
}
.item-info-list {
    width: calc(50% - 10px);
}
.item-list .card-head {
    text-align: left;
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color);
}
.item-list .card-body ul li {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 30px;
    font-size: 12px;
    cursor: pointer;
}
.item-list .card-body ul li:last-child {
    border-bottom: none;
}

.item-list .card-wrap.p0 {
    padding: 0;
}
.item-list .card-body {
    text-align: left;
    padding: 0;
    max-height: 500px;
    overflow-y: scroll;
}
.item-list .card-body .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-list .card-body ul {
    margin-bottom: 0;
}
.item-list .card-footer {
    border-top: 1px solid var(--border-color);
    text-align: center;
    padding: 20px 30px;
}
/* 連絡 */
.item-contact .desc {
    display: none;
}
.item-contact .tab-content {
    padding: 20px;
}
.item-contact .tab-label {
    height: 50px;
    line-height: 25px;
    width: 50%;
    text-align: center;
}
.item-contact .tab-label.on {
    background: var(--main-color);
    color: var(--white);
}
.item-contact .tab-menu:after {
    background: var(--main-color);
}
.item-contact .tab-label:first-of-type {
    border-top-left-radius: 5px;
}
.item-contact .tab-label:nth-of-type(2) {
    border-top-right-radius: 5px;
}
.item-contact .card-wrap.p0{
  padding: 0;
}
.item-contact .card-wrap .card-body{
  padding: 20px;
}
.item-contact .card-wrap .card-footer{
  padding: 20px;
}
.item-contact .select-mode{
  margin-bottom: 20px;
  gap: 20px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(calc(100% / 3),1fr));
}
@media screen and (max-width: 992px) {
    .item-wrap {
        flex-direction: column;
    }
    .item-wrap .item-left {
        width: 100%;
        margin-right: 0;
    }
    .item-wrap .item-right {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .item-list {
        flex-direction: column;
    }
    .item-request-list {
        width: 100%;
        margin-right: 0;
    }
    .item-info-list {
        width: 100%;
    }
}

/* ************************************** */
/* テナント管理 */
/* ************************************** */

/* ************************************** */
/* テーブルカラム */
/* ************************************** */
#table-request-list th.col-id { width: 130px; }
#table-request-list th.col-receipt-datetime { width: 140px; }
#table-request-list th.col-datetime { width: 140px; }
#table-request-list th.col-status { width: 140px; }
#table-request-list th.col-category { width: 140px; }
#table-request-list th.col-name { width: 100px; }
#table-request-list th.col-contact { width: 100px; }
#table-request-list th.col-act { width: 320px; }

#table-proccess-history th.col-datetime { width: 130px; }
#table-proccess-history th.col-receipt-datetime { width: 130px; }
#table-proccess-history th.col-id { width: 140px; }
#table-proccess-history th.col-status { width: 140px; }
#table-proccess-history th.col-account { width: 140px; }

#table-history-list th.col-chk { width: 50px; }
#table-history-list th.col-no { width: 80px; }
#table-history-list th.col-id { width: 140px; }
#table-history-list th.col-name { width: 140px; }
#table-history-list th.col-tel { width: 140px; }
#table-history-list th.col-start { width: 170px; }
#table-history-list th.col-call-time { width: 100px; }
#table-history-list th.col-log { width: 200px; }
#table-history-list th.col-call-id { width: 100px; }
#table-history-list th.col-category { width: 140px; }
#table-history-list th.col-req-id { width: 140px; }
#table-history-list th.col-act { width: 120px; }

#table-guest-list th.col-chk { width: 50px; }
#table-guest-list th.col-act { width: 200px; }

#table-account-list th.col-no { width: 80px; }
#table-account-list th.col-act { width: 200px; }

#table-select-account-list th.col-chk { width: 80px; }
#table-select-account-list th.col-id { width: 200px; }
#table-select-account-list th.col-name { width: 240px; }
#table-select-account-list th.col-mail { width: 340px; }

#table-group-member th.col-id { width: 140px; }

#table-info-list th.col-no { width: 80px; }
#table-info-list th.col-date { width: 140px; }

#table-today-report th.col-id { width: 140px; }
#table-today-report th.col-profile { width: 120px; }
#table-today-report th.col-name { width: 140px; }

#table-request-template-list th.col-act { width: 200px; }
#table-request-template-list th.col-label { width: 200px; }

#table-user-list th.col-id { width: 140px; }
#table-user-list th.col-user-name { width: 140px; }
#table-user-list th.col-act { width: 200px; }

#table-info-regist-list th.col-no { width: 80px; }
#table-info-regist-list th.col-date { width: 140px; }
#table-info-regist-list th.col-title { width: 300px; }
#table-info-regist-list th.col-content { width: 300px; }
#table-info-regist-list th.col-act { width: 200px; }

#table-tenant-list th.col-id { width: 80px; }
#table-tenant-list th.col-company-id { width: 140px; }
#table-tenant-list th.col-company { width: 200px; }
#table-tenant-list th.col-type { width: 90px; }
#table-tenant-list th.col-status { width: 80px; }
#table-tenant-list th.col-service-start-date { width: 120px; }
#table-tenant-list th.col-service-type { width: 160px; }
#table-tenant-list th.col-connection { width: 100px; }
#table-tenant-list th.col-account-cnt { width: 100px; }
#table-tenant-list th.col-storage-cnt { width: 100px; }
#table-tenant-list th.col-sms-cnt { width: 100px; }
#table-tenant-list th.col-storage-trans-cnt { width: 150px; }
#table-tenant-list th.col-sms-trans-cnt { width: 120px; }
#table-tenant-list th.col-act { width: 200px; }

#table-account-info th.row-id{ width: 150px; }

#table-tenant-info th{ width: 180px; }
#table-tenant-info table{ min-width: 500px; }

#table-tenant-option-info th{ width: 180px; }

#table-address-list th.col-chk{ width: 40px; }
#table-address-list th.col-name{ width: 140px; }
#table-address-list th.col-tel{ width: 140px; }
#table-address-list th.col-memo{ width: 140px; }
#table-address-list th.col-act{ width: 200px; }

#table-info-list td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#table-request-list td:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#table-guest-list td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#table-request-template-list td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#table-address-list td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#table-info-regist-list td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#table-address-list td:hover{
    cursor: pointer;
}
#table-info-regist-list td:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#table-info-list .unread{
    font-weight: bold;
}
#table-info-list .unread td {
    background: var(--aliceblue);
}

/* ************************************** */
/* お問い合わせ（visuall talk） */
/* ************************************** */
#contact-vt .wrap {
    background: var(--white);
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 42px;
}
#contact-vt button.btn-vt {
    background: #7FC500;
    border: none;
    border-radius: 4px;
    color: var(--white);
    padding: 10px 34px;
    cursor: pointer;
}
#contact-vt button.outline-btn-vt {
    background: var(--white);
    border: 1px solid #7FC500;
    border-radius: 4px;
    color: #7FC500;
    padding: 10px 34px;
    cursor: pointer;
}
#section-site .wrap {
    display: flex;
}
#section-site .site-l {
    width: 200px;
}
#section-site .site-r {
    width: calc(100% - 200px);
}
#section-site .site-l img {
    width: 160px;
    height: auto;
}
#section-site .site-r .title {
    font-size: 20px;
    font-weight: bold;
    color: #3F9CE8;
    margin-bottom: 10px;
}
#section-site .site-r .lead {
    font-size: 14px;
}
#section-contact h3 {
    font-size: 20px;
    font-weight: bold;
}
#section-contact .contact-number {
    text-align: center;
}
#section-contact .contact-number p {
    font-size: 10px;
}
#section-contact .contact-number .number {
    font-size: 40px;
    font-weight: bold;
    color: #3C97DE;
    margin-bottom: 0.5em;
}
#section-contact .counter {
    padding: 30px;
    background: #F5F6FA;
}


.counter-head-l {
    width: 170px;
}
.counter-head-r {
    width: calc(100% - 170px);
}

.counter-head-l .img-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--white);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.counter-head-l img {
    width: 80px!important;
}
.counter-head {
    display: flex;
    flex-wrap: wrap;
}
.bussiness-hour {
    font-weight: bold;
}
.side {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.counter-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.counter-body .contact-box:first-of-type {
    margin-right: 30px;
}
.contact-box {
    background: var(--white);
    padding: 20px 30px;
    margin-top: 20px;
    width: calc(( 100% - 30px )/2);
}
.contact-box.contact-error{
    background-color: transparent;
}
.contact-box-body {
    text-align: center;
}
.bussiness-hour-note {
    font-size: 8px;
    text-align: right;
}
.contact-tell-note {
    font-size: 8px;
    margin-bottom: 0;
}
.contact-box .contact-box-head {
    font-weight: bold;
    margin-bottom: 1em;
}
.contact-box .number {
    font-size: 28px;
    color: #3C97DE;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 14px;
}
#section-contact .terms{
    padding: 30px 0;
    text-align: right;
}

@media screen and (max-width: 1200px) {
    .counter-body{
      flex-direction: column;
    }
    .counter-body .contact-box:first-of-type {
      margin-right: 0;
    }
    .counter-body .contact-box{
      width:100%;
    }
}
@media screen and (max-width: 992px) {
    .side {
      flex-direction: column;
    }
    #section-site .wrap{
      flex-direction: column;
    }
    #section-site .site-l,
    #section-site .site-r{
      width:100%;
    }
    #section-site .site-l{
      text-align:center;
      margin-bottom: 20px;
    }
    .counter-head{
      flex-direction: column;
    }
    .counter-head-l,
    .counter-head-r{
      width:100%;
    }
    .counter-head-l{
      text-align:center;
      margin-bottom: 20px;
    }
}
@media screen and (max-width: 576px) {
    #section-contact .contact-number .number {
        font-size: 28px;
    }
    #contact-vt .wrap {
        padding: 30px 20px;
    }
    #section-contact .counter {
        padding: 30px 20px;
    }
    .contact-box {
        padding: 20px;
    }
    .contact-box .number{
        font-size: 24px;
    }
}