@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

.header_h1 {
  font-size: 2rem;
  font-weight: 900;
}
.header_h1 span {
  font-size: 1rem;
  font-weight: 900;
}

.logo img { height: 50px; }
@media (max-width: 991px) {
  .logo img { height: auto; max-height: 30px; width: auto; max-width: 230px; }
}

/*table*/
.table {
  table-layout: auto !important;
  width: 100%;
  white-space: normal;
}
@media (max-width: 991px) {  
  .table { white-space: nowrap; }
  .table td {
    white-space: normal;
  }
}

/*table SP*/
@media (max-width: 991px) {
  .table_sp thead,
  .table_sp tr:first-child {
    display: none;
  }

  .table_sp,
  .table_sp tbody,
  .table_sp tr,
  .table_sp td {
    display: block;
    width: 100%;
  }

  .table_sp tr + tr td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
  }
}

/*table SP 転籍用*/
@media (max-width: 991px) {
  .table_tran_sp thead,
  .table_tran_sp tr:first-child {
    display: none;
  }


  .table_tran_sp,
  .table_tran_sp tbody,
  .table_tran_sp tr,
  .table_tran_sp td {
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    white-space: normal;
  }


  .table_tran_sp tr + tr td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
  }

  .table_tran_sp tr {
    border: 1px solid #EEE;
    padding: 0.5em;
    position: relative;
  }
  
  .table_tran_sp td:last-child {
    bottom: 0.5em;
    right: 0.5em;
    position: absolute;
    width: auto;
  }

}

/*table SP 休職用*/
@media (max-width: 991px) {
  .table_leave_sp thead,
  .table_leave_sp tr:first-child {
    display: none;
  }


  .table_leave_sp,
  .table_leave_sp tbody,
  .table_leave_sp tr,
  .table_leave_sp td {
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    white-space: normal;
  }


  .table_leave_sp tr + tr td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
  }

  .table_leave_sp tr {
    border: 1px solid #EEE;
    padding: 0.5em;
    position: relative;
  }
  
  .table_leave_sp td:nth-last-child(2) {
    bottom: 0.5em;
    right: 3.5em;
    position: absolute;
    width: auto;
  }
  .table_leave_sp td:last-child {
    bottom: 0.5em;
    right: 0.5em;
    position: absolute;
    width: auto;
  }

}


.table-responsive {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
}

.th01 { width: 10em;}
@media (max-width: 991px) { .th01 { width: auto;} }

/* スクロールインジケーター */
.scroll-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 40px; /* th の高さに固定（調整可能） */
  line-height: 40px; /* 縦中央揃え */
  background: rgba(0, 0, 0, 0.5); /* 透明度50% */
  color: white;
  padding: 0 15px;
  border-radius: 5px;
  font-size: 14px;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
  white-space: nowrap;
}
@media (min-width: 992px) { .scroll-indicator { display: none !important; } }

/* 非表示クラス */
.hidden {
  opacity: 0;
}


/*
 クリック時要素コピー
*/
.toast {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

/* トースト表示 */
.toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* フェードイン・フェードアウトのアニメーション */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/*
 スケジュール　テーブル装飾
*/
.table-calendar th { width: 14.285%;}
.table.table-bordered .sat {
  background-color: #e0f7fa; /* 青系の背景色 */
}

.table.table-bordered .sun {
    background-color: #ffebee; /* 赤系の背景色 */
}

/*
 アイコン ポップアップ
*/
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-container .tooltip-text {
  visibility: hidden;
  max-width: 300px; /* 最大幅を設定 */
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 5px; /* パディングを調整 */
  position: absolute;
  z-index: 1;
  top: 100%; /* ツールチップを上に表示 */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* テキストを折り返さず、横に表示 */
  overflow: hidden; /* はみ出たテキストを非表示に */
  text-overflow: ellipsis; /* はみ出たテキストに省略記号を表示 */
  transition: visibility 0s, opacity 0.5s linear; /* フェードイン/アウト効果 */
  opacity: 0; /* 初期状態を隠す */
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1; /* フェードイン */
}



/*
 lightbox
*/
.lightbox {
  position: fixed; /* 画面に固定 */
  top: 0; left: 0; right: 0; bottom: 0; /* 全画面をカバー */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
  display: flex; /* 中央に配置するためのフレックスボックス */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 他の要素より前面に表示 */
}

.lightbox-content {
  width: 80%; /* ここで全体の幅を70%に設定 */
  margin: 0 10%; /* 左右15%のマージン */
  max-height: 95vh; /* ウィンドウの80% */
  overflow-y: auto; /* 縦方向のスクロールバー */
  padding: 20px; /* パディングを追加して内容が見やすく */
  background-color: white; /* 背景色を白に設定 */
  border-radius: 5px; /* 角を丸くする */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 影を追加 */
  position: relative; /* 閉じるボタンを相対的に配置するため */
}

.lightbox-content::-webkit-scrollbar {
  width: 8px; /* スクロールバーの幅 */
}

.lightbox-content::-webkit-scrollbar-thumb {
  background: #ccc; /* スクロールバーの色 */
  border-radius: 4px; /* スクロールバーの角を丸くする */
}

.lightbox-content::-webkit-scrollbar-track {
  background: transparent; /* スクロールバーの背景 */
}
.close-lightbox {
  position: absolute;
  top: 10px;
  right: 10px;
}


/* ----------------------------
  提案
---------------------------- */
/* #suggestionTable {} */

/*会社部分*/
#suggestionTable .suggestionTdCompany {
  width: 3em;
  min-width: 3em;
}
/*氏名部分*/
#suggestionTable .suggestionTdName {
  width: 10em;
  min-width: 10em;
}
/*営業部分*/
#suggestionTable .suggestionTdSalse {
  width: 20%;
  min-width: 20%;
}
@media (max-width: 991px) {
  #suggestionTable .suggestionTdSalse > div { 
    display: block;
    width: 15em;
    max-width: 15em;
  }
}
/*面談部分*/
#suggestionTable .suggestionTdScheduled {
  width: 20%;
  min-width: 20%;
}
@media (max-width: 991px) {
  #suggestionTable .suggestionTdScheduled > div { 
    display: block;
    width: 20em;
    max-width: 20em;
  }
}
/*その他*/
#suggestionTable .suggestionTdOther {
  width: 25%;
  min-width: 25%;
}
@media (max-width: 991px) {
  #suggestionTable .suggestionTdOther { 
    width: 30em;
    max-width: 30em;
  }
  #suggestionTable .suggestionTdOther div small { 
    display: block;
    white-space: normal;
    width: 25em;
    max-width: 25em;
  }
}


/* ----------------------------
  社員検索
---------------------------- */
/* #employeeTable {} */

#employeeTable > tbody > tr > th:nth-child(1) { width: 6em; min-width: 6em; }
#employeeTable > tbody > tr > th:nth-child(2) { width: 6em; min-width: 6em; }
/* #employeeTable > tbody > tr > th:nth-child(3) { } */
#employeeTable > tbody > tr > th:nth-child(4) { width: 6em; min-width: 6em; }
#employeeTable > tbody > tr > th:nth-child(5) { width: 6em; min-width: 6em; }
#employeeTable > tbody > tr > th:nth-child(6) { width: 10em; min-width: 10em; }
#employeeTable > tbody > tr > th:nth-child(7) { width: 6em; min-width: 6em; }
#employeeTable > tbody > tr > th:nth-child(8) { width: 6em; min-width: 6em; }
#employeeTable > tbody > tr > th:nth-child(9) { width: 6em; min-width: 6em; }
@media (max-width: 991px) {
  #employeeTable > tbody > tr > th:nth-child(3) {   
    width: 15em;
    min-width: 15em;
  }
  #employeeTable > tbody > tr > th:nth-child(8) { 
    width: 8em; 
    min-width: 8em; 
  }
}



/* ----------------------------
  社員検索
---------------------------- */
/* #employeeTable {} */

#userTable > thead > tr > th:nth-child(1) { width: 6em; min-width: 6em; }
/* #userTable > thead > tr > th:nth-child(2) { }*/
/* #userTable > thead > tr > th:nth-child(3) { } */
#userTable > thead > tr > th:nth-child(4) { width: 10em; min-width: 10em; }
#userTable > thead > tr > th:nth-child(5) { width: 10em; min-width: 10em; }
#userTable > thead > tr > th:nth-child(6) { width: 6em; min-width: 6em; }
#userTable > thead > tr > th:nth-child(7) { width: 3em; min-width: 3em; }
@media (max-width: 991px) {
  #userTable > thead > tr > th:nth-child(2) {   
    width: 15em;
    min-width: 15em;
  }
  #userTable > thead > tr > th:nth-child(3) { 
    width: 15em; 
    min-width: 15em; 
  }
}