@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400&display=swap');

body,
.content-wrapper,
.main-header,
.main-sidebar {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: 24px;
}

.fs-26 {
  font-size: 26px;
}

.fs-28 {
  font-size: 28px;
}

.fs-30 {
  font-size: 30px;
}

/* Sidebar */
.sidebar-dark-primary {
  background-color: #f5f5f5 !important;
}

/* 第一階層のアクティブ状態 */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: #ffa500 !important;
}

/* 第二階層のアクティブ状態 */
.sidebar-dark-primary .nav-treeview .nav-item .nav-link.active,
.sidebar-light-primary .nav-treeview .nav-item .nav-link.active {
  background-color: #ffcb7d !important;
}

/* 第一階層のホバー効果 */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link:hover {
  background-color: #ffe2c6 !important;
  color: #404040;
}

/* 第二階層のホバー効果 */
.sidebar-dark-primary .nav-treeview .nav-item .nav-link:hover {
  background-color: #ffe2c6 !important;
  color: #404040;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link {
  color: #404040 !important;
}

/* アコーディオン（サブメニュー）内のテキスト色変更 */
.nav-sidebar .nav-treeview>.nav-item>.nav-link {
  color: #404040;
}

/* Navbar */
.brand-link .brand-text {
  color: #606060 !important;
}

.dark-mode .brand-link .brand-text {
  color: #e3f2fd !important;
}

.brand-link:hover .brand-text {
  color: #404040 !important;
}

/* nav-header の色を調整 */
.nav-sidebar .nav-header {
  color: #606060 !important;
  font-weight: bold;
}

/* logo調整 */
.brand-link {
  padding: 10px 15px;
  text-align: center;
}

.brand-link .brand-image {
  float: none;
  max-height: 40px;
  width: auto;
  margin: 0;
}

/* ホバー時のエフェクト */
.brand-link:hover {
  opacity: 0.8;
}

/*  ロゴを非表示にする */
.sidebar-mini.sidebar-collapse .brand-link {
  visibility: hidden;
  height: 0;
  padding: 0;
}

.btn-blue {
  background-color: #7fbfff !important;
  border-color: #7fbfff !important;
  color: #404040 !important;
}

.btn-blue:hover {
  background-color: #1e90ff !important;
  border-color: #1e90ff !important;
  color: #ffffff !important;
}

/* ボタンのサイズや余白を調整する場合 */
.auth-btn {
  padding: 10px 20px;
  font-size: 16px;
  /* その他のスタイル */
}

/* ボタンカラー */
.btn-pastel-blue {
  background-color: #7fbfff;
  color: #ffffff;
}

.btn-pastel-red {
  background-color: #ff7f7f;
  color: #ffffff;
}

.btn-pastel-gray {
  background-color: #a0a0a0;
  color: #ffffff;
}

.btn-size-100 {
  width: 100px;
}

.btn-size-120 {
  width: 120px;
}

.btn-size-150 {
  width: 150px;
}

/* モーダル　横幅設定 */
.modal.modal-custom-size-400 .modal-dialog {
  max-width: 400px;
  font-size: 18px;
}

.modal.modal-custom-size-500 .modal-dialog {
  max-width: 500px;
  font-size: 18px;
}

.modal.modal-custom-size-600 .modal-dialog {
  max-width: 600px;
  font-size: 18px;
}

.modal.modal-custom-size-700 .modal-dialog {
  max-width: 700px;
  font-size: 18px;
}

.modal.modal-custom-size-860 .modal-dialog {
  max-width: 860px;
  font-size: 18px;
}

.modal.modal-custom-size-1000 .modal-dialog {
  max-width: 1000px;
  font-size: 18px;
}

.modal-custom-size-1200 .modal-dialog {
  max-width: 1200px;
  font-size: 18px;
}

.modal-custom-size-1400 .modal-dialog {
  max-width: 1400px;
  font-size: 18px;
}

.modal-custom-size-1600 .modal-dialog {
  max-width: 1600px;
  font-size: 18px;
}

/* テーブル 縦スクロール固定 */
.sticky_table thead tr th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.sticky_table_wrapper {
  overflow: scroll;
  height: 80vh;
}

/* ページネーション　*/
.pagination a {
  color: #7fbfff;
}

/* アクティブなページネーションリンクのスタイル */
.pagination .active .page-link {
  background-color: #7fbfff;
  color: #ffffff;
}

/* ページネーションリンクのホバー時のスタイル */
.pagination a:hover {
  background-color: #e0e0e0;
}

/* エラーテキスト　メッセージ */
.error-text {
  color: red;
}

/* ログイン画面の余白調整 */
.login-box {
  margin-bottom: 30vh;
}

/* ローディングアニメーション */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ログイン画面の調整 */
.login-box {
  margin-bottom: 200px;
}

@media (max-height: 600px) {
  .login-box {
    margin-bottom: 50px;
  }
}

.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.bg-pastel-orange-1 {
  background-color: #ffd8b2 !important;
}

.bg-pastel-orange-2 {
  background-color: #ffe5cc !important;
}

.bg-pastel-orange-3 {
  background-color: #ffefe0 !important;
}

.bg-pastel-green-1 {
  background-color: #b2ffd8 !important;
}

.bg-pastel-green-2 {
  background-color: #ccffe5 !important;
}

.bg-pastel-green-3 {
  background-color: #e0ffef !important;
}

.bg-pastel-parple-1 {
  background-color: #d8b2ff !important;
}

.bg-pastel-parple-2 {
  background-color: #e5ccff !important;
}

.bg-pastel-parple-3 {
  background-color: #efe0ff !important;
}

.bg-pastel-blue-1 {
  background-color: #b2d8ff !important;
}

.bg-pastel-blue-2 {
  background-color: #cce5ff !important;
}

.bg-pastel-blue-3 {
  background-color: #e0efff !important;
}

.bg-pastel-bluepurple-1 {
  background-color: #b2b2ff !important;
}

.bg-pastel-bluepurple-2 {
  background-color: #ccccff !important;
}

.bg-pastel-bluepurple-3 {
  background-color: #e0e0ff !important;
}

.bg-pastel-pink-1 {
  background-color: #ffb2d8 !important;
}

.bg-pastel-pink-2 {
  background-color: #ffcce5 !important;
}

.bg-pastel-pink-3 {
  background-color: #ffe0ef !important;
}

.bg-gray {
  background-color: #D9D9D9 !important;
  color: black !important;
}

.bg-gray-1 {
  background-color: #d3d3d3 !important;
}

.bg-gray-2 {
  background-color: #d9d9d9 !important;
}

.bg-gray-3 {
  background-color: #dfdfdf !important;
}

.bg-pastel-yellow-1 {
  background-color: #ffffb2 !important;
}

.bg-pastel-yellow-2 {
  background-color: #ffffcc !important;
}

.bg-pastel-yellow-3 {
  background-color: #ffffe0 !important;
}

.bg-lemon-yellow {
  background-color: #ffff00;
}

.bg-lemonchiffon {
  background-color: #fffacd;
}

.bg-red {
  background-color: #ff0000 !important;
}

.bg-au,
.bg-uq {
  background-color: #FFF6EB !important;
}

.bg-sb,
.bg-ym {
  background-color: #BDD7EE !important;
}

/* 有効・無効スライドボタン表示*/
/* スライドボタン全体のスタイル */

.switch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 70px;
  /* スイッチ全体の幅 */
  height: 30px;
  /* スイッチ全体の高さ */
}

/* スライダー部分のデザイン */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  /* 初期の背景色（無効時） */
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

/* チェック状態の背景色 */
.form-check-input:checked+.slider {
  background-color: #4caf50;
  /* 有効時の背景色 */
}

/* 丸部分（スライダー） */
.slider::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease-in-out;
}

/* チェック時のスライダー丸移動 */
.form-check-input:checked+.slider::before {
  transform: translateX(40px);
}

/* テキスト部分 */
.slider span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  /* 初期状態は非表示 */
  width: 100%;
  text-align: center;
}

/* 無効時のテキスト（右側） */
s .slider .text-right {
  right: 10px;
  opacity: 1;
  /* 初期状態で表示 */
}

/* 有効時のテキスト（左側） */
.form-check-input:checked+.slider .text-left {
  left: 10px;
  opacity: 1;
  /* チェック時に表示 */
}

/* 無効時のテキストを非表示 */
.form-check-input:checked+.slider .text-right {
  opacity: 0;
}

.scrollable-menu::-webkit-scrollbar {
  width: 6px;
}

.scrollable-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.scrollable-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

th,
td {
  white-space: normal;
  /* 折り返しを有効にする */
  overflow-wrap: break-word;
  /* 長い単語を折り返す */
  word-wrap: break-word;
  /* レガシーサポート用 */
}

.table-responsive {
  overflow-x: auto;
  min-width: 100%;
  /* スクロールバーのスタイリング（オプション） */
  scrollbar-width: thin;
  /* Firefox用 */
}

.sticky_table {
  margin-bottom: 0;
  min-width: max-content;
  /* コンテンツに応じて幅を設定 */
}

/* スクロールバーのスタイリング（Webkit系ブラウザ用、オプション） */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.table-orange {
  background-color: #ffe2c6;
}

.table-blue {
  background-color: #d1e8ff;
}

.table-bordered> :not(caption)>*>* {
  border-color: #c0c0c0 !important;
}

/* チェックボックスのスタイルをリセット */

label.check {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  /* デフォルトの余白をリセット */
  cursor: pointer;
  /* チェックボックス用のポインタを設定 */
}

.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid gray;
  border-radius: 2px;
  background-color: white;
  cursor: pointer;
}

/* チェックマークを作成 */
.checkbox:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 6px;
  width: 10px;
  height: 15px;
  border: solid gray;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0;
  /* 非表示にする */
  transition: opacity 0.2s;
}

/* チェックが入った状態のスタイル */
input[type="checkbox"]:checked+.checkbox:after {
  opacity: 1;
  /* 表示 */
}

/* 実際のチェックボックスを非表示 */
input[type="checkbox"] {
  display: none;
}

#qualityRateRow input {
  border: none;
  /* 枠線を消す */
  outline: none;
  /* フォーカス時の枠線を消す */
  background-color: transparent;
  /* 背景を透明に */
  text-align: center;
  /* テキストを中央揃え */
  width: 100%;
  /* セル全体にフィット */
}

#qualityRateRow input:focus {
  border-bottom: 1px solid #030100;
  /* フォーカス時の下線を追加（任意） */
}

.trainerDropdown-menu {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.trainerDropdown-item {
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.trainerDropdown-item:hover {
  background: #f0f0f0;
}

.nav-sidebar .nav-item>.nav-link .right {
  display: none !important;
}

/* 第一階層のコンテナスタイル */
.nav-sidebar>.nav-item {
  padding: 0;
  /* 左右の余白 */
  margin-bottom: 8px;
  /* 項目間のスペース */
}

/* 第一階層のボタンスタイル */
.nav-sidebar .nav-item>.nav-link {
  border-radius: 12px;
  /* ボタンの丸み */
  padding: 5px 3px;
  /* ボタン内の余白 */
  width: 100%;
  /* 幅を親要素に合わせる */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  /* 通常の陰影 */
  transition: box-shadow 0.3s ease;
  /* 陰影の変化をスムーズに */
}

/* 第二階層のコンテナスタイル */
.nav-sidebar .nav-treeview {
  padding-left: 65px;
  /* 左側のインデントのみ */
  padding-right: 0;
  /* 右側のパディングを削除 */
  margin-top: 8px;
  /* 上部のスペース */
}

/* 第二階層のボタンスタイル */
.nav-sidebar .nav-treeview .nav-item>.nav-link {
  border-radius: 12px;
  /* サブメニューボタンの丸み */
  padding: 5px 3px;
  /* ボタン内の余白 */
  margin-bottom: 8px;
  /* ボタン間のスペース */
  width: 100%;
  /* 幅を親要素に合わせる */
}

/* ボタンのホバー効果 */
.nav-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* アクティブなボタンのスタイル */
.nav-sidebar .nav-link.active {
  background-color: #007bff;
  color: #fff;
}

.custom-text-size {
    font-size: 12px;
    height: 35px !important; /* ボタンの高さを固定 */
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 垂直方向の中央揃え */
}