body{
  font-family: initial !important;

}

.text-primary-dashbord {
  color: #007bff ;
  border-bottom: 1px solid #007bff ;
}
/* 日別予約icon */
img.fit-picture {
  width: 16px; /* 必要に応じてサイズを調整 */
  height: 16px; /* 必要に応じてサイズを調整 */
  /* アイコン独自の上下中央ぞろえになってしまうので
  文字列とそろわないため */
  /* vertical-align: baseline;  */
  vertical-align: middle;
}
/* contentsの大枠　ナビゲーションに被るので余白を空ける */
.content-wrapper {
  padding-top: 80px;
}

/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
  .content-wrapper {
    padding-top: 100px;
  }
}

/* 画面幅が480px以下の場合 */
@media (max-width: 480px) {
  .content-wrapper {
    padding-top: 100px;
  }
}
.content-wrapper.enduser {
  background-color: #F2F2F2;
  /* ↓設定しないと不要な縦スクロールが出る */
  padding-top: 61px;
}

/* contentsの大枠　ナビゲーション3本ver. */
/* .content-wrapper.plsnav {
  padding-top: 100px;
} */

/* カスタムmodalサイズ　bootstrapのmodalよりさらに少し大きく */
@media (min-width: 1200px) {
  .modal-xl.modal-xl-custom {
      max-width: 1550px;
  }
}

/* PC版 (大きい画面サイズ) */
@media (min-width: 1200px) {
  .content-wrapper.plsnav {
    padding-top: 100px;
  }
}

/* 中間の画面サイズ (タブレットなど) */
@media (min-width: 768px) and (max-width: 1199px) {
  .content-wrapper.plsnav {
    padding-top: 130px;
  }
}

/* スマホ版 (小さい画面サイズ) */
@media (max-width: 767px) {
  .content-wrapper.plsnav {
    padding-top: 130px;
  }
}

/* PC版 (大きい画面サイズ) */
@media (min-width: 1200px) {
  .navbar {
    padding: 0.5rem 0.5rem;
  }
}

/* 中間の画面サイズ (タブレットなど) */
@media (min-width: 768px) and (max-width: 1199px) {
  .navbar {
    /* padding: 0rem 0rem; */
  }
}

/* スマホ版 (小さい画面サイズ) */
@media (max-width: 767px) {

  .navbar {
    justify-content: flex-start;
  }
  .navbar.member {
    padding: 0rem 0rem;
  }
}

@media (min-width: 1200px) {
  .navbar.member {
    padding: 0rem 0rem;
  }
}

/* 中間の画面サイズ (タブレットなど) */
@media (min-width: 768px) and (max-width: 1199px) {
  .navbar.member {
    padding: 0rem 0rem;
  }
}

/* スマホ版 (小さい画面サイズ) */
@media (max-width: 767px) {
  .navbar.member {
    padding: 0rem 0rem;
  }
}


/* ヘッダー */
header {
  width:100%;
}

/* 共通バッジ　角を取って余白を広めにする */
.badge {
  padding: 0.5em 0.4em;
  font-size: 75%;
  border-radius: 0rem;
}

/* クリック可能なカーソルスタイル */
.clickable-row {
  cursor: pointer;
}

/* ボタンリンクだけど文字色はそのまま */
.btn-link-inh {
  color: initial;
}


.border-right-none {
  border-right: 0 !important;
}
.border-left-none {
  border-left: 0 !important;
}

.border-top-none {
  border-top: 0 !important;
}
.border-bottom-none {
  border-bottom: 0 !important;
}

/* 一覧　table固定用----------------------------------------------------------- */
/* tableのmaxの高さを決めて溢れたらスクロールを出す
380px:検索エリアをデフォルト3行として計算
*/
.table-max-h {
  max-height: calc(100vh - 380px) !important;
}
.table-max-h-enduser {
  max-height: calc(100vh - 545px) !important;
}
.table-max-h-dashbord {
  /* max-height: calc(100vh - 600px) !important; */
   max-height: calc(100vh - 250px);
   overflow-y: auto;
}

/* 一覧用table header制御 list-tableクラスをつけて使用する*/
.list-table.table.table-head-fixed thead tr:nth-child(1) th {
  background-color: #0078A2;
  font-weight: normal;
}
.list-table.table.table-head-fixed.enduser thead tr:nth-child(1) th {
  background-color: #626262;
  font-weight: normal;
}

/* 画面が大きいときはスクロールを表示しない */
table.list-table {
  /* テーブルレイアウトを固定　行の内容によって変わらない */
  table-layout: fixed;
  width: 100%;
}

td.list-table-td {
  /* 長い単語を折り返し */
  word-wrap: break-word;
  /* 必要に応じて改行 */
  white-space: normal;
}

/* table td用ボタン */
.btn-td {
  min-width: 45px; /* 固定幅を設定 */
  padding: 5px 10px; /* パディングを設定 */
  text-align: center; /* テキストの中央揃え */
}

/* 画面サイズが768px未満の場合のスタイル */
@media (max-width: 768px) {
  .btn-td {
    width: 45px; /* 幅を調整 */
    padding: 5px 10px; /* パディングを設定 */
  }

  /* テーブルセルのスタイルを調整 */
  .list-table-td {
    padding: 2px; /* セルのパディングを調整 */
  }
}
/* 日別予約状況　table tdクラスに使用　文字列が溢れたら...を付ける */
.overtext20 {
  /* あふれたら...を表示 */
  text-overflow: ellipsis;
  /* テキストを改行せず1行にする */
  white-space: nowrap;
  /* 要素からあふれたテキストを非表示にする */
  overflow: hidden;
  /* セルの幅を設定 */
  /* max-width: 85px; */
  /* #44727 文字列があふれてもセルを大きくしたくないので、th/td（10：00～10：30）の枠より
  小さめに設定する*/
  max-width: 20px;
}
.overtext55 {
  /* あふれたら...を表示 */
  text-overflow: ellipsis;
  /* テキストを改行せず1行にする */
  white-space: nowrap;
  /* 要素からあふれたテキストを非表示にする */
  overflow: hidden;
  /* セルの幅を設定 */
  max-width: 55px;
}
/* ドラッグでチェックボックスをチェック用------------------------- */
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #9DC3E6; }
#selectable .ui-selected { background: white; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
/* ------------------------- */
/* ナビゲーション----------------------------------------------------------- */
.dropdown-menu {
  z-index: 1500;
}
/* bootstrap(https://getbootstrap.jp/docs/4.1/getting-started/introduction/) のヘッダーを参考にした*/
/* ナビゲーション1（ホーム　ユーザー） */
.nav-info {
  /* position: -webkit-sticky; */
  position: fixed;
  top: 0;
  /* z-index: 1070; */
  /* 1000以上はmodalの動きに影響するので注意 */
  z-index: 500;

}
/* ナビゲーション2（メニュー） */
.bd-navbar {
    /* position: -webkit-sticky; */
    position: fixed;
    top: 30px;
    /* z-index: 1072; */
    z-index: 502;
}

.bd-member-navbar {
  /* position: -webkit-sticky; */
  position: fixed;
  /* top: 43px; */
  top: 37px;
  /* z-index: 1072; */
  z-index: 498;
}

/* ナビゲーション3（ステップ表示） */
.nav-yoyaku {
    position: fixed;
    top: 78px;
    z-index: 501;

}


/* ナビゲーション：メニュー */
.nav-link {
  display: block;
  padding: 0.2rem 1rem;
}
.nav-link.member {
  display: block;
  padding: 1rem 1rem;
}


.bd-navbar .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
  color: #fff;
}

/* ハンバーガー */
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* メニューnavを固定する */
.nav-menu {
  left: 0;
  position: fixed;
  right: 0;
  top: 40px;
  z-index: 1038;
}
/* navメニューの下に変な白い余白が出来るのでクリアする
  恐らくヘッダーを固定する関係 */
.layout-navbar-fixed .wrapper .content-wrapper {
  margin-top: 0px;
}

/* 上のヘッダー（ログイン者） */
.navbar.nav-info {
  padding: 0rem 0rem;
}
/* ヘッダーが2段になった時白線が出ておかしいので無しとする */
.main-header {
  border-bottom: 0px;
}
/* メニューバーの色設定 */
.navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: #767171;
}

/* ログイン者情報をメニューバーより上に表示する */
nav.nav-info .dropdown-menu {
  z-index: 1040;
}

/* ログイン者情報が上に来るようにメニューバーのz-indexを調整 */
.nav-menu {
  position: relative;
  z-index: 1030;
}

/* メニューバーアクティブ（白反転出来ないのでひとまず下線） */
.navlink-active {
  border-bottom: 2px solid #fff;
}


/* 全体のチェックボックス制御 ------------------------------------------------*/
/* チェックボックスを小さめにする */
/* チェックボックス 日別予約状況画面用に小さくする */
[class*=icheck-]>input:first-child+input[type=hidden]+label::before, [class*=icheck-]>input:first-child+label::before {
  width: 20px;
  height: 20px;
}
/* チェックボックスの✔位置調整 */
[class*=icheck-]>input:first-child:checked+input[type=hidden]+label::after, [class*=icheck-]>input:first-child:checked+label::after {
  left: -2px;
  /* ラジオボタンの位置がずれているので微調整 */
  top: -1px;
}
[class*=icheck-] {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

[class*=icheck-]>label {
  padding-left: 29px !important;
  vertical-align: bottom;
}
.icheck-peterriver>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before, .icheck-peterriver>input:first-child:not(:checked):not(:disabled):hover+label::before {
  background-color: #fff;
}

/* 全体のチェックボックス制御 ------------------------------------------------*/
/* 〇を小さくする */
[class*=icheck-]>input:first-child+input[type=hidden]+label::before, [class*=icheck-]>input:first-child+label::before {
  width: 18px;
  height: 18px;
  background-color: #fff;
  /* ラジオボタンの位置がずれているので微調整 */
  margin-top: 1.5px;
}


/* --------------------------- */

/* ナビゲーション3　ステップ表示 --------------------------------------------*/

    .nav-step {
      background-color: #f4f6f9;;
      color: #262626;
      padding: 0px 20px;
      font-size: .8rem;
      position: relative; /* 相対位置を設定して::afterの位置を制御 */
    }
    .nav-step.active {
      background-color: #f4f6f9;;
      color: #0078A2;
      border-bottom: 3px solid #0078A2 !important;
    }
    /* 抹消画面 */
    .nav-step.active.destroy {
      background-color: #f4f6f9;;
      color: #FF4500;
      border-bottom: 3px solid #FF4500 !important;
    }

    .nav-step::after {
      content: '>>';
      margin-left: 35px;
      color: #262626;
      position: absolute;
      bottom: 0;
      background: #f4f6f9;; /* 背景を無色に設定 */
      border: none; /* ボーダーを削除 */
    }
    .nav-step:last-child::after {
      content: '';
      margin: 0;
    }

    /* スマホ画面用のメディアクエリ */
    @media (max-width: 768px) {
      .nav-step::after {
        margin-left: 0px;
      }
    }

    .nav-yoyaku  {
      background: #f4f6f9; /* 背景を無色に設定 */
      padding-left: 300px;
      padding-right: 300px;
      border-bottom: 1px solid #A6A6A6 !important;
    }
    /* スマホ画面用のメディアクエリ */
    @media (max-width: 768px) {
      .nav-yoyaku {
        top: 80px;
        padding-left: 0;
        padding-right: 0;
      }
    }
    /* タブレット用のメディアクエリ (幅768px～1024px) */
    @media (min-width: 769px) and (max-width: 1024px) {
      .nav-yoyaku {
        padding-left: 50px;
        padding-right: 50px;
      }
    }
    /* デスクトップ用のメディアクエリ (幅1025px以上) */
    @media (min-width: 1025px) {
      .nav-yoyaku {
        padding-left: 200px;
        padding-right: 200px;
        /* top: 0;  */
      }
    }

    /* 非常に小さい画面用のメディアクエリ (幅480px以下) */
    @media (max-width: 480px) {
      .nav-yoyaku {
        /* top: 60px; */
        padding-left: 0px;
        padding-right: 0px;
      }
    }
/* -----------------------------------------------------------------------*/
/* カレンダー用チェックボックス */
.cl-check [class*=icheck-] > input:first-child + input[type=hidden] + label::before,
.cl-check [class*=icheck-] > input:first-child + label::before {
    width: 15px;
    height: 15px;
}
/* .cl-check {
  width: 15px;
  height: 15px;
} */
/* タイトル用カード */
.card.title-card-destroy  {
  /* border-radius: 0rem; */
  background-color:#FF4500
}

/* タイトル用カード */
.card.title-card  {
  /* border-radius: 0rem; */
  background-color:#0078A2
}

.card.title-card-enduser  {
  border-radius: 0rem;
  background-color:#464646;
}


/* コミットカラー */
.bg-color-cmt {
  color: #fff;
  background-color:#0078A2
}

/* ラベル */
.label-container {
  display: flex;
  align-items: center;
}
.rectangle {
  width: 10px; /* 長方形の幅 */
  height: 30px; /* 長方形の高さ */
  background-color: #7f7f7f; /* 長方形の色 */
  margin-right: 10px; /* テキストとの間隔 */
}
.label-text {
  display: flex;
  align-items: center;
}

.btn-white {
  color: #1f2d3d;
  background-color: white;
  border-color: #cacaca;
  box-shadow: none;
}

.btn-white:hover {
  color: #fff;
  background-color: #9e9c9c;
  border-color: #cacaca;
}

.btn-cream {
  color: #1f2d3d;
  background-color: #ffe17e;
  border-color: #ffe17e;
  box-shadow: none;
}

.btn-cream:hover {
  color: #fff;
  background-color: #f3ba01;
  border-color: #f3ba01;
}
/* なぜか✔が左に寄るので上書き */
/* [class*=icheck-]>input:first-child:checked+input[type=hidden]+label::after, [class*=icheck-]>input:first-child:checked+label::after {
  left: 2px;
} */

/* 日別予約カレンダー-------------------------------------------------- */

.calendar-header {
  background-color: #9DC3E6;
  color: #262626;
  text-align: center;
  padding: 2px;
}

.calendar-body {
  text-align: center;
}

.calendar-footer {
  text-align: center;
  padding: 10px;
}

.calendar-table {
  margin-bottom: 0rem;
}

.calendar-table th,
.calendar-table td {
  width: 11%;
  padding: 1px;
  text-align: center;
  border-top: 0px;
  /* font-size: smaller; */
}

.btn-custom {
  width: 100%;
  margin: 5px 0;
}
.calendar-table th {
  font-weight: normal; /* デフォルトのフォントウェイトに戻す */
}
.calendar-table td {
  font-weight: bold;
}

.btn-fullsize {
  width: 100%;
  height: 100%;
  margin: 5px 0;
}
/* ボタンリンク　リンクの見た目にしない */
.btn-link.no-link {
  font-weight: normal;
  color: #1f2d3d;
  text-decoration: none;
}

/* カレンダーリンク */
.btn-link-cl {
  font-size: 0.875rem ;
  font-weight: bold;
  color: #262626;
  text-decoration: none;
  padding: 0rem 0rem;
}
/* カレンダーリンク赤 */
.btn-link-cl-red {
  font-size: 0.875rem ;
  font-weight: bold;
  color: red;
  text-decoration: none;
  padding: 0rem 0rem;

}

.cl-col:hover {
  background-color: #DEEBF7;
  /* border-bottom: 2px solid greenyellow;  */
}


/* 検索ボックス用カスタムcss
    col-1拡張　四角ディスプレイと横長ディスプレイでcol-1のサイズを変える
 */
@media (min-width: 1300px) {
  .col-1-custom {
    /* 横長ディスプレイ */
      flex: 0 0 5.5%;
      max-width: 5.5%;
  }
}

@media (min-width: 780px) and (max-width: 1299.98px) {
  .col-1-custom {
    /* 四角ディスプレイ */
      flex: 0 0 7.5%;
      max-width: 7.5%;
  }
}

@media (max-width: 779.98px) {
  .col-1-custom {
    /* スマホ */
      flex: 0 0 90%;
      max-width: 90%;
  }
}

/* col-xl拡張　四角ディスプレイの時はcol-2 長方形ディスプレイの時はcol-1で表示する
 */

@media (min-width: 1300px) {
  .col-xl-1-custom {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
  }
}
@media (min-width: 1000px) and (max-width: 1299.98px) {
  .col-xl-1-custom {
      flex: 0 0 12%;
      max-width: 12%;
  }
}

@media (max-width: 999.98px) {
  .col-xl-1-custom {
      flex: 0 0 100%;
      max-width: 100%;
  }
}

/* offset */
@media (min-width: 1300px) {
  .offset-col-xl-1-custom {
      margin-left: 8.333333%;
  }
}

@media (min-width: 768px) and (max-width: 1299.98px) {
  .offset-col-xl-1-custom {
      margin-left: 16.666667%;
  }
}

@media (max-width: 767.98px) {
  .offset-col-xl-1-custom {
      margin-left: 0; /* このサイズではオフセット不要 */
  }
}

/* col-x2拡張　長方形ディスプレイの時はcol-2を狭める*/

 @media (min-width: 1300px) {
  .col-xl-2-custom {
    -ms-flex: 0 0 13%;
    flex: 0 0 13%;
  }
}
@media (min-width: 780px) and (max-width: 1300.98px) {
  .col-xl-2-custom {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16%;
  }
}

@media (max-width: 999.98px) {
  .col-xl-2-custom {
      flex: 0 0 100%;
      max-width: 100%;
  }
}
/* ユーザーカラー基本 */
.content-wrapper.member{
  background-color:#F2F2F2;
  /* padding-top: 0px; */
  /* min-height: 833px; */

}
/* エンドユーザーnavメニュー　------------------------------------------------------- */
/* ゴミ箱ボタン */
.btn-link.dust {
  color: #626262;
}
/* ボタン */
.btn.member {
  border-radius: 0rem;
}
.contact-container {
  line-height: 1; /* 縦の余白をなくす */
}


.nav-step.enduser {
  background-color: #F2F2F2;
}

.nav-step.enduser-active {
  background-color: #F2F2F2;
  color: #212121;
  border-bottom: 3px solid #212121 !important;
}
.nav-yoyaku.enduser {
  top: 70px;
  z-index: 400;
  background-color: #F2F2F2;
}

/* ハンバーガーメニューで1行のメニューは single-selectを適用する*/
@media (max-width: 575.98px) {
  .single-select {
    padding-top: 13px;
    padding-bottom: 13px;
    background-color:#626262;
    color:#F2F2F2;
  }
  .nav-member-link {
    padding-top: 13px;
    padding-bottom: 13px;
    background-color:#626262;
  }
  .nav-member-link.selectlink {
    /* padding-top: 2px;
    padding-bottom: 2px; */
    padding-top: 13px;
    padding-bottom: 13px;

  }
  .nav-member-link span {
    background-color: #626262;
    color:#F2F2F2;
  }
  .nav-member-item{
    border: 1px solid #dee2e6 !important;
  }

  .dropdown-toggle.nav-member-link::after {
    /* border-top: 0.1em solid white;
    width: 80%;
    display: inline-block; */
    border-top: 0px;
  }

}
/* スマホ (最大幅 575.98px) */
@media (max-width: 575.98px) {
  .single-select {
    padding-top: 13px;
    padding-bottom: 13px;
    background-color: #626262;
    color:#F2F2F2;
  }
  .nav-member-link span {
    background-color: #626262;
    color:#F2F2F2;
  }
  .nav-member-item{
    border: 1px solid #dee2e6 !important;
  }
  .nav-yoyaku.enduser {
    /* top: 100px; */
    top: 70px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-yoyaku {
    top: 80px;
    padding-left: 0;
    padding-right: 0;
  }
  .dropdown-toggle.nav-member-link::after {
    /* border-top: 0.1em solid white;
    width: 80%;
    display: inline-block; */
    border-top: 0px;
  }


}

/* タブレット (576px 以上、768px 未満) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .single-select {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #626262;
  }
  .single-select span {
    /* spanタグに対するスタイルを指定 */
    /* font-size: 14px; */
    color: #F2F2F2;
  }
  .nav-member-link span {
    background-color: #626262;
    color:#F2F2F2;
  }
  .nav-member-item{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #626262;
    border: 1px solid #dee2e6 !important;
  }

  .dropdown-toggle.nav-member-link::after {
    /* border-top: 0.1em solid white;
    width: 80%;
    display: inline-block; */
    border-top: 0px;
  }

}

/* スモールデスクトップ (768px 以上、992px 未満) */
/* 全体のhovsr設定 */
.transparent-element {
  opacity: 1.0;
  transition: opacity 0.3s; /* スムーズなアニメーションを追加 */
}

.transparent-element:hover {
  opacity: 0.7; /* ホバー時に透明度を高める */
}

/* エンドユーザーログイン後ナビゲーション　ぶら下がりメニュー */
/* .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: #767171;
} */
/* .member-toggle span:focus {
  color: #767171;
} */


@media (min-width: 768px) and (max-width: 991.98px){
  .single-select {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #626262;
    color:#F2F2F2;
  }

  .single-select span {
    /* spanタグに対するスタイルを指定 */
    /* font-size: 14px; */
    background-color: #626262;
    color:#F2F2F2;
  }
  .single-select span {
    /* spanタグに対するスタイルを指定 */
    /* font-size: 14px; */
    background-color: #626262;
    color:#F2F2F2;
  }
  .nav-member-link span {
    background-color: #626262;
    color:#F2F2F2;
  }
  .nav-member-item{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #626262;
    border: 1px solid #dee2e6 !important;
  }
  .dropdown-toggle.nav-member-link::after {
    /* border-top: 0.1em solid white;
    width: 80%;
    display: inline-block; */
    border-top: 0px;
  }

  span.member-toggle{
    color:#F2F2F2;
  }


}

/* ラージデスクトップ (992px 以上、1200px 未満) */
@media (min-width: 992px) {
  .single-select {
    /* padding-top: 19px;
    padding-bottom: 19px; */
    background-color: #212121;
    color:#F2F2F2;
  }
  .nav-member-contact{
    background-color: white;
  }
  .nav-member-contact span {
    /* spanタグに対するスタイルを指定 */
    /* font-size: 14px; */
    color:#212121;

  }

  .dropdown-toggle.nav-member-link::after {
    /* border-top: 0.1em solid white;
    width: 80%;
    display: inline-block; */
    border-top: 0px;
  }


}

/* エンドユーザー部品　------------------------------------------------------- */
.card.enduser {
  border-radius: 0px;
}
.btn-pp {
 padding-top: 0.7rem !important;
 padding-bottom: 0.7rem !important;
}
.p-01 {
    padding: 0.1rem !important;
}
.card-header.enduser {
  color: white;
  background-color: #464646;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
/* カードの角を四角くする */
.card.member-card {
  border-radius: 0; /* 角丸をなくす */
}
.card-header.member-card {
  /* 角を無くす */
  border-top-left-radius: 0.0rem;
  border-top-right-radius: 0.0rem;
  background-color: #464646; /* ヘッダーの背景色 */
  color: #ffffff; /* ヘッダーのフォント色 */
  font-weight: bold; /* 太字にする場合 */

}
/* バッジ */
.badge-enduser {
  color: #464646;
  background-color: #fff;
  border: 1px solid #464646;
}
/* フォームカスタム text*/
.form-control.end_search {
  background-color: #F0F0F0;
  border-radius: 0rem;
  border-radius: none;
}
/* フォームカスタム selectbox*/
.custom-select.end_search {
  background-color: #F0F0F0;
  border-radius: 0rem;
  border-radius: none;
}
/* タイトル用カード */
.card.member-title-card {
  box-shadow: 0 0 0 0;
  background-color: #F2F2F2;
  border-bottom: 1px solid #464646;
  margin-bottom: 20px;
  padding-bottom: 10px;
  /* margin-bottom: 1rem; */
}
/* エンドユーザーページタイトル文字 */
.member-page-title {
  font-size: 4.5vw;
  line-height: 1.0;
  font-weight: bold;
}

/* 黒線四角カード */
.card.memberinfo {
  box-shadow: 0 0 0 0;
  border: 2px solid #212121;
  border-radius: 0rem;
}

.card.memberinfo-sub {
  box-shadow: 0 0 0 0;
  /* 下線のみ */
  border: none;
  border-bottom: 1px solid #212121;
  border-radius: 0rem;
  background-color: #F2F2F2;
}

.card.memberinfo-bordernone {
  box-shadow: 0 0 0 0;
  border: 0px;
  background-color: #F2F2F2;
}

.card.memberinfo-bordernone-white {
  box-shadow: 0 0 0 0;
  border: 0px;
  background-color: white;
}

/* ボタン */
.btn.btn-member-white {
  background-color: white;
  color: #212121;
  border: 2.0px solid #212121;
  border-radius: 0rem;
}
.btn.btn-member-white:hover {
  opacity: 0.5;
  transition: opacity 0.3s; /* スムーズなアニメーションを追加 */
}

.btn.btn-member-black {
  background-color: #212121;
  color: white;
  border: 2.0px solid #212121;
  border-radius: 0rem;
}
.btn.btn-member-black:hover {
  opacity: 0.5;
  transition: opacity 0.3s; /* スムーズなアニメーションを追加 */
}

.btn.btn-member-gray {
  background-color: #626262;
  color: white;
  border: 2.0px solid #626262;
  border-radius: 0rem;
}
.btn.btn-member-gray:hover {
  opacity: 0.5;
  transition: opacity 0.3s; /* スムーズなアニメーションを追加 */
}

/* カスタムチェックボックス */
.additional-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.member-chk-content {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #B7B7B7;
  cursor: pointer;
  border-radius: 0rem;
  transition: background-color 0.3s, color 0.3s;
}

/* チェックボックスを非表示 */
.member-chk-option input[type="checkbox"] {
  display: none;
}

/* チェックされたときに .member-chk-option 全体の背景色と文字色を変更 */
.member-chk-option input[type="checkbox"]:checked + .member-chk-content {
  background-color: #212121;
  color: #fff;
}
/* フッターカスタム */
.main-footer.member {
  background-color: #212121;
  color: #fff;
}

/* スタジオ空室検索　カード設定 */
.card.rsvsearch {
  border: 1px solid #dcdcdc;
  border-radius: 0px;
  cursor: pointer;
}
/* クローズはカーソルを通常に戻す */
.card.rsvsearch.close_rsv {
  cursor: default;
}

.card.rsvsearch:hover {
  opacity: 0.65;
  transition: opacity 0.3s; /* スムーズなアニメーションを追加 */
}
/* クローズはhoverしない */
.card.rsvsearch.close_rsv:hover {
  opacity: 1; /* 元の不透明度に戻す */
  transition: none; /* アニメーションも無効に */
}

.card-header.rsvsearch h3 {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

.card-header.rsvsearch h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.card-header {
  border: 0px ;

}

.price {
  /* font-size: 1.2rem; */
}

.card-body.rsvsearch ul li {
  font-size: 0.9rem;
  color: #666;
}

.text-member-danger {
  color: #AD4040 !important;
}

/* カスタムチェックボックス */
  /* オーバーレイのスタイル */
  .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
  }

   /* チェックボックスが選択された際のスタイル */
   .card.active .card-overlay {
    opacity: 1;
  }
  .card.rsvsearch.active {
    /* 選択したら少しだけcardを大きくする */
    transform: scale(1.01);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  }
  /* カスタムチェックボックスのスタイル */
  .custom-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .custom-checkbox input[type="checkbox"] {
    display: none;
  }

  .custom-checkbox span {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    border-radius: 0px;

  }

  .custom-checkbox input[type="checkbox"]:checked + span {
    background-color: #626262;

  }
  /* チェックマークの表示 */
  .custom-checkbox input[type="checkbox"]:checked + span::before {
    content: "✔"; /* チェックマークを表示 */
    font-size: 14px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ダッシュボードで使用　カードのわきに色を付ける */
  .card-border-007b8f {
    border-left: 7px solid #007b8f;
  }
  .card-border-C9A4E4 {
    border-left: 7px solid #C9A4E4;
  }
  .card-border-FFEAA7 {
    border-left: 7px solid #FFEAA7;
  }


/* -------------------------------------------------------------------- */
/* .meisai.table.table-head-fixed thead tr:nth-child(1) th {
  background-color: #0078A2;
} */

/* color -------------------------------------------------- */

/* システム背景色 */
/* エンドユーザーカラー基本 */
.bg-212121 {
  background-color:#212121;
}
.bg-464646 {
  background-color:#464646;
}
.bg-626262 {
  background-color:#626262;
}
.bg-c7c7c7 {
  background-color:#c7c7c7;
}
.bg-F2F2F2 {
  background-color:#F2F2F2;
}
.bg-f4f6f9 {
  background-color:#f4f6f9;;
}

.bg-FFBDBD {
  background-color:#FFBDBD;
}

.bg-FFE5E5 {
  background-color:#FFE5E5;
}

.bg-DDEBF7 {
  background-color:#DDEBF7;
}

.bg-D9D9D9 {
  background-color:#D9D9D9;
}

.bg-dee2e6 {
  background-color:#dee2e6;
}


/* constで呼び出しているので変更注意↓ ------------*/
.cl-long-term {
  background-color: #FF9B9B; /* 長期 */
}

.cl-one-time {
  background-color: #A3E7FF; /* 単発 */
}

.cl-regular {
  background-color: #FFEAA7; /* レギュラー */
}

.cl-other {
  background-color: #C6E0B4; /* その他 */
}

.cl-vip {
  background-color: #C9A4E4; /* VIP */
}

.cl-attention {
  background-color: #FF0000; /* 注意 */
  color: white;
}

.cl-temporary-reservation {
  background-color: #2E7D32; /* 仮予約 */
  color: white;
}

.cl-closed {
  background-color: #808080; /* 閉鎖 */
  color: white;
  /* ↑---------------------------------------------- */
}

.bg-cl-yellow {
  background-color: yellow;
}
.bg-sbmcolor  {
  /* border-radius: 0rem; */
  background-color:#0078A2;
}
.bg-767171 {
  background-color:#767171;
}
.bg-D9D9D9 {
  background-color:#D9D9D9;
}
.bg-9DC3E6 {
  background-color:#9DC3E6;
}
.bg-EDEDED {
  background-color:#EDEDED;
}
.bg-FFBDBD5 {
  background-color:#FFBDBD;
}
.bg-inherit{
  background-color: inherit;
}
.bg-orangered{
  background-color:#FF4500;
}
.bg-pailorangered{
  background-color:#eb6332;
}


/* -------------------------------------------------------------------- */
/* table -------------------------------*/
/* textareaをPCの時だけ大きく表示 */
@media (min-width: 768px) {
  .text-area-td-500 {
    min-width: 500px;
  }
  .max-width-500{
    max-width: 500px;
  }
  .max-width-200{
    max-width: 200px;
  }
  /* .min-width-200{
    min-width: 200px;
  } */
}
/* PCサイズ未満のとき（横幅いっぱいに表示） */
@media (max-width: 767px) {
  .text-area-td-500,
  .max-width-500,
  .max-width-200 {
    width: 100%; /* 横幅いっぱいに表示 */
    max-width: none; /* max-width の制約を解除 */
  }
}

/*  --------------------------------------*/
/* パンくず */
.breadcrumb {
  /* 元々のデザインに色がついていたので無しにする */
  background-color: inherit;
  padding-left: 0rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;

}
.breadcrumb .breadcrumb-item.active {
  color: inherit;
  text-decoration: underline; /* 下線を引く */
  text-decoration-thickness: 3px; /* 下線の太さ */
  text-decoration-color: #00B0F0; /* 下線の色 */
  text-underline-offset: 6px; /* 下線と文字の間のスペース */
}
.breadcrumb-item + .breadcrumb-item::before {
  color: inherit;
}
/* パンくず試作　*/
.breadcrumb {
  margin-bottom: 0rem;
}
/* ページネーション */
.pagination{
  margin-bottom: 0rem;
}

/* 更新ボタン固定----------------------------- */
.fixed-button {
  position: fixed;
  /* bottom: 23px; */
  bottom: 0px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 背景色を透けた白にする */
  text-align: center;
  padding: 10px 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index:150;
}
.fixed-button.enduser {
  background-color: rgba(242, 242, 242, 0.5); /* #F2F2F2 を50%透過 */
}
/* ------------------------------------------- */
/*  検索ボックス */
.serch_riyo_input {
  max-width: 700px;
}
.modal-footer {
  display: block;
}
/* 選択中タブカスタマイズ */
.card-primary.card-outline-tabs > .card-header a.active, .card-primary.card-outline-tabs > .card-header a.active:hover {
  border-top: 8px solid #00B0F0;
}

/* 検索付きフォーム用ボタン（formcontrolがsmになっているので合わせる） */
.input-group-text-sm {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.card-border-none{
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.125), 0 0px 0px rgba(0, 0, 0, 0.2);
}

.custom-select-sm {
  font-size: .875rem!important;
}

.font-size-smaller{
  font-size: smaller;
}

.font-size-x-small{
  font-size: x-small;
}

.p0_1 {
  padding-top: 0.1rem!important;
  padding-bottom: 0.1rem!important;
  padding-left: 0.1rem!important;
  padding-right: 0.1rem!important;
}

.btn-orange {
  color: #fff;
  background-color: #fd7e14;
  border-color: #fd7e14;
  box-shadow: none;
}

.btn-orange:hover {
  color: #fff;
  background-color: #b1570e;
  border-color: #b1570e;
}

.btn-orange:focus, .btn-orange.focus {
  color: #fff;
  background-color: #fd7e14;
  border-color: #fd7e14;
  box-shadow: 0 0 0 0 fd7e14(58, 176, 195, 0.5);
}

.btn-orange.disabled, .btn-orange:disabled {
  color: #fff;
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.btn-orange:not(:disabled):not(.disabled):active, .btn-orange:not(:disabled):not(.disabled).active,
.show > .btn-orange.dropdown-toggle {
  color: #fff;
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.btn-orange:not(:disabled):not(.disabled):active:focus, .btn-orange:not(:disabled):not(.disabled).active:focus,
.show > .btn-orange.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(195, 108, 58, 0.5);
}

.btn-outline-orange{
  color: #fd7e14;
  border-color: #fd7e14;
}
.btn-outline-orange:hover{
  color: #FFFFFF;
  border-color: #fd7e14;
  background-color: #fd7e14;
}

.btn-outline-success-bg-light{
  color: #28a745;
  border-color: #28a745;
  background-color: #FFFFFF;
}
.btn-outline-success-bg-light[disabled]{
  color: #28a745;
  border-color: #28a745;
  background-color: #FFFFFF;
}
.btn-outline-success-bg-light:hover{
  color: #FFFFFF;
  border-color: #28a745;
  background-color: #28a745;
}
.btn-outline-success-bg-light[disabled]:hover{
  cursor: not-allowed;
  color: #28a745;
  border-color: #28a745;
  background-color: #FFFFFF;
}


.alert-warning-light{
  background-color:#ffeeba;
  border-color:#ffeeba;
  color: #856404;
}

.alert-secondary-light{
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-primary-light{
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}

.alert-info-light{
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.alert-success-light{
  color: #055160;
  background-color: #cffceb;
  border-color: #b6fbe4;
}

.alert-danger-light {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.bg-usupink{
  background-color:#F5C9C6;
}

/* バッジ */
.bg-bage-pink{
  background-color:#FF0066;
  color:white;
}
.bg-bage-blue{
  background-color:#002966;
  color:white;
}
.bg-bage-purple{
  background-color:#660029;
  color:white;
}
.bg-bage-green{
  background-color:#005307;
  color:white;
}
.bg-bage-gray{
  background-color:#6c757d;
  color:white;
}
.bg-bage-primary{
  background-color:#007bff;
  color:white;
}
.bg-bage-black{
  background-color:#000000;
  color:white;
}

.text-maincolor{
  color: #00B0F0!important;
}

.bg-maincolor{
  background-color: #00B0F0!important;
}

.bg-warning-halflight{
  background-color : #ffe17e;
}

.btn-maincolor{
    color: #fff!important;
    background-color: #00B0F0!important;
}
.btn-destroycolor{
  color: #fff!important;
  background-color: #FF4500!important;
}
.btn-maincolor:hover{background-color: #0E92EC!important;}
.btn-maincolor.active{background-color: #00B0F0!important;}

.btn-cmtcolor{
  color: #fff!important;
  /* #43986 コミットボタン変更 */
  /* background-color: #0078A2!important; */
  background-color: #0d6efd!important;

}
/* #43986 コミットボタン変更 */
/* .btn-cmtcolor:hover{background-color: #006082!important;} */
.btn-cmtcolor:hover{background-color: #0a58ca!important;}
.btn-cmtcolor.active{background-color: #0078A2!important;}

.btn-main-sub-color{
  color: #262626!important;
  background-color: #fff!important;
  border-color: #00B0F0!important;
}
.btn-main-sub-color:hover{background-color: #0E92EC!important;}
.btn-main-sub-color.active{background-color: #00B0F0!important;}


.not-authcolor{
  background-color: #FA6964!important;
}

.btn-maincolor-light{
  color: #6c757d;
  background-color: #f8f9fa;
  border-color: #6c757d;
}
.btn-maincolor-light:hover{
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-maincolor-light.active{
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-maincolor{
  color: #00B0F0!important;
  border-color: #00B0F0!important;
}
.btn-group .btn-check:checked +label{
  color: #ffffff!important;
  background-color: #20c997!important;
}
.btn-group-vertical .btn-check:checked +label{
    color: #ffffff!important;
    background-color: #20c997!important;
}
.btn-outline-maincolor:hover{
  color: #fff!important;
  background-color: #00B0F0!important;
}
.btn-outline-maincolor.btn-lock:hover{
  color: #00B0F0!important;
  background-color: transparent!important;
  cursor:default!important;
}

.notAuthority-maincolor{
  background-color: #FA6964;
}

/* 報告書有無の色 */
.rpt-exist-color{
  color: #00a960!important;
}
.rpt-notexist-color{
  color: #000000!important;
}

.lg-checkbox{transform: scale(1.3);}
/* ページネーション */
.page-link{
  color: #0078A2!important;
  padding: 0.2rem 0.5rem;
}
.page-item.active .page-link{
    border-color: #0078A2!important;
    background-color: #0078A2!important;
    color: #fff!important;
}
/* エンドユーザー用ページネーション */
.page-link.member{
  color: #626262!important;
  padding: 0.2rem 0.5rem;
}
.page-item.active .page-link.member{
    border-color: #626262!important;
    background-color: #626262!important;
    color: #fff!important;
}


.badge-maincolor{
  color: #fff!important;
  background-color: #20c997!important;
  text-align: center;
}

/* 細いalert  */
.al-warning {
  background-color: #ffeeba;
  border-color: #ffeeba;
  color: #856404;
}

/* アンダーライン */
.underline {
  text-decoration: underline;
}

/* カレンダーの黄色 */
tr.bg-calenderyelow{
  background-color:rgba(255,220,40,.15);
}


/*余白無しチェックボックス（ラベル無しなどに使用）*/
.form-check-input.custumm0 {
  /* form-check-inputクラス　初期化 */
  position: static;
  margin-top: 0rem;
  margin-left: 0rem;
}

/*tbodyの背景色を白に指定*/
tbody.bgwh {
  background-color: rgb(255,255,255);
}

/* tr color */
tr.bgcream {
  background-color: #FFFFCC;
}
tr.bgpink {
  background-color: #FFE7FF;
}
tr.bgorange {
  background-color: #FDE9D9;
}
tr.bgperple {
  background-color: #E4DFEC;
}

/*th color */
th.bgiceblue {
  background-color: #DDEBF7 !important;
}
th.bggreen {
  background-color: #E2EFDA !important;
}
th.bggray {
  background-color: #F2F2F2 !important;
}
th.bgcream2 {
  background-color: #FFF2CC !important;
}
th.bgyellow {
  background-color: yellow !important;
}
th.bgblue {
  background-color: #BDD7EE !important;
}
th.bgorange {
  background-color: #FCE4D6 !important;
}
th.bgsunpink {
  background-color:#FFE5E5 !important;
}
/*tableの一番外の枠線を非表示にする　table-borderedクラスを上書き*/
.table-bordered {
  border: none;
}

/* 結合セルの右側の枠線を非表示 */
table .borderless {
  border-right: solid 1px #FFFFFFFF;
}

.table-custom th:first-child,
.table-custom td:first-child {
    position: sticky; /* 要素を固定位置に設定します */
    left: 0; /* 左端に固定します */
    z-index: 100; /* 他の要素より上に表示します */
    /* background-color: #fff; */
}

.table-custom th:first-child {
    position: sticky; /* 要素を固定位置に設定します */
    left: 0; /* 左端に固定します */
    z-index: 101; /* 他の要素より上に表示します */
    /* background-color: #fff;  */
}

/* 1列目1行目のセルを固定 */
.table-custom th:first-child {
  top: 0; /* 上端に固定 */
  z-index: 100; /* 他のセルより上に表示 */
}

table.table-head-fixed.table-max-h input{
  position: fixed!important;
}
table.table-head-fixed.table-max-h-enduser input{
  position: fixed!important;
}

/* 〇数字デザイン */
span.circle_number {
  display:inline-block;
  background: #fd7e14;
  color: white;
  font-size: .8rem;
  border-radius: 50%;
  left: 0;
  width: 18px;
  height: 16px;
  line-height: 18px;
  text-align: center;
}

/* 〇数字デザイン　ダッシュボード */
span.dash_circle_number {
  display:inline-block;
  background: #fd7e14;
  color: white;
  font-size: .875rem;
  font-weight:bold;
  border-radius: 50%;
  left: 0;
  width: 19px;
  height: 19px;
  line-height: 20px;
  text-align: center;
}

/* 〇数字デザインで使用:進捗チェックボックス中央ぞろえ */
.v-middle{
  vertical-align: middle;
}

/* サブタイトル */
.sub-title {
  /* border-color: #17a2b8; */
  border-bottom: 1px solid #70AD47;
  border-left: 5px solid #70AD47;
}
.sub-title-bg-maincolor {
  background-color:  #70AD47;
  border-bottom: 1px solid #70AD47;
  border-left: 5px solid #70AD47;
}
.sub-title-bg-gray {
  background-color:  #808080;
  border-bottom: 1px solid #808080;
  border-left: 5px solid #808080;
}
.font-size-md {
  font-size: 1.5em;
}

/* 黒細線 */
.sub-line {
  border-bottom: 1px solid #6c757d;
}

/* entry/home　ステップ表示 */
.home-rectangle {
  width: 100%;
  height: 42px;
  background-color: #70AD47;
  position: relative;
  /* 文字列中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ダッシュボードの部署切り替えボタン */
.btn-home-change {
  color: #6c757d;
  border-color: #6c757d;
}
.btn-home-change.active {
  box-shadow: none;
  background-color: #20c997!important;
  border-color: #20c997!important;
  color: white!important;
}
.btn-home-change:hover {
  color: #fff;
  background-color: #20c997;
  border-color: #20c997;
}

.home-rectangle::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid #70AD47;
  position: absolute;
  top: 0;
  right: -20px;

}

.home-rectangle::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid white;
  position: absolute;
  top: 0;
  left: 0%;
}

/* entry/home　ステップ表示 */
.home-rectangle-danger {
  width: 100%;
  height: 42px;
  background-color: #dc3545;
  position: relative;
  /* 文字列中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-rectangle-danger::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid #dc3545;
  position: absolute;
  top: 0;
  right: -20px;

}

.home-rectangle-danger::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid white;
  position: absolute;
  top: 0;
  left: 0%;
}


/* entry/home　ステップ表示 */
.home-rectangle-warning {
  width: 100%;
  height: 42px;
  background-color: #ebac25;
  position: relative;
  /* 文字列中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-rectangle-warning::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid #ebac25;
  position: absolute;
  top: 0;
  right: -20px;

}

.home-rectangle-warning::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid white;
  position: absolute;
  top: 0;
  left: 0%;
}

/* entry/home　ステップ表示 */
.home-rectangle-primary {
  width: 100%;
  height: 42px;
  background-color: #2f61cc;
  position: relative;
  /* 文字列中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-rectangle-primary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid #2f61cc;
  position: absolute;
  top: 0;
  right: -20px;

}

.home-rectangle-primary::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 20px solid white;
  position: absolute;
  top: 0;
  left: 0%;
}


/*カードに触れたら指マークにカーソルを変更(cardclassに追加） */
.card-pointer{
  cursor: pointer;
}

.btngrp-maincolor.active,
.btngrp-maincolor:active {
    box-shadow: none;
    background-color: #20c997!important;
    color: white!important;
}

.border-bottom-maincolor {
  border-bottom:solid;
  border-color:#20c997!important;
  /* background-color: #20c997!important; */
}

.bg-midnightblue {
  color:white;
  background-color:#191970;
}

.hide{
  display: none !important;
}

/* TOPへ戻るボタン */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #00B0F0;
  opacity: 0.6;
  z-index: 999;
}
#page_top.member {
  background: #626262;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 40px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* マウスポインタを指マークにする */
.mousepointer-hand {
  cursor: pointer;
}

/* マウスポインタを矢印にする */
.mousepointer-arrow {
  cursor: default;
}

/* card-body 720px以下の場合 padding調整 */
@media screen and (max-width:720px) {
  .card-body {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .card-body.user {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* card-body 720px以下の場合 padding調整 */
@media screen and (max-width:720px) {
  .login-card-body {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.is-hide{
  display: none;
}

.imgborder{
  position: relative;
  width: 300px;
  height: 265px;
  /* border: 1px solid #ced4da; */
  margin: 0 auto;
}

.imgborders{
  position: relative;
  width: 300px;
  height: 265px;
  border: 1px solid #ced4da;
  margin: 0 auto;
}

.imgborders_h{
  position: relative;
  width: 300px;
  height: 465px;
  border: 1px solid #ced4da;
  margin: 0 auto;
}


.imgborder_sm{
  position: relative;
  width: 300px;
  height: 215px;
  /* border: 1px solid #ced4da; */
  margin: 0 auto;
}


img.imgfit{
  object-fit: contain;
  position: absolute;
  width: 100%;
  height: 100%;
}

/* 薄目のalert */
.alert-custum-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* card-body 768px以下の場合 padding調整 */
@media screen and (max-width:768px) {
  .form-group {
    margin-bottom: 0px !important;
  }

  .maxw768orless-mt-18 {
    margin-top: 18px !important;
  }

}

/* border太さ css */
.border-2{
  border-width:2px !important;
}

.border-3{
  border-width:3px !important;
}

.border-4{
  border-width:4px !important;
}

.border-5{
  border-width:5px !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff !important;
  background-color: #20c997 !important;
}

.fs-1{
  font-size: calc(1.375rem + 1.5vw)!important;
}

.fs-2{
  font-size: calc(1.325rem + 0.9vw)!important;
}
.fs-3{
  font-size: calc(1.3rem + 0.9vw)!important;
}
.fs-4{
  font-size: calc(1.275rem + 0.3vw)!important;
}
.fs-5{
  font-size: 1.25rem!important;
}
.fs-6{
  font-size: 1rem!important;
}
.fs-7{
  font-size: 0.8rem!important;
}
.fs-8{
  font-size: 0.7rem!important;
}
.fs-9{
  font-size: 0.6rem!important;
}

.input-group .btn-grp{
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* width指定 */
.w-10 {
  width: 10% !important;
}
.w-20 {
  width: 20% !important;
}
.w-25 {
  width: 25% !important;
}
.w-50 {
  width: 50% !important;
}
.w-70 {
  width: 70% !important;
}
.w100 {
  width: 100px !important;
}
.w150 {
  width: 150px !important;
}

.form-high {
  height: 600px !important;
}

@media screen and (max-width:768px) {
  /* スマホ非表示 */
  .smp-md-hide {
    display: none !important;
  }
}
@media screen and (min-width:768px) {
  /* PC非表示 */
  .pc-md-hide {
    display: none !important;
  }
}

.badge-primary-light {
  color: #004085;
  background-color: #cce5ff;
}

.badge-success-light {
  color: #155724;
  background-color: #d4edda;
}

.badge-light-light {
  color: #818182;
  background-color: #fefefe;
}

.badge-secondary-light {
  color: #1b1e21;
  background-color: #e2e3e5;
}

.badge-danger-light {
  color: #721c24;
  background-color: #f8d7da;
}

.badge-info-light {
  color: #0c5460;
  background-color: #bee5eb;
}

/* 施工スケジュール左帯　画面TOP固定 */
.left-fix-100 {
  position:fixed !important;
  top:130px !important;
  left:270px !important;
  overflow-y: auto !important;
  z-index:999 !important;
}

/* 施工スケジュール左帯　画面TOP固定　左余白なし */
.left-fix-100-ml0 {
  position:fixed !important;
  top:130px !important;
  left:10px !important;
  overflow-y: auto !important;
  z-index:999 !important;
}


/* 施工スケジュール左帯　画面初期位置固定 */
.left-fix-top {
  position:fixed !important;
  top:60px !important;
  left:270px !important;
  overflow-y: auto !important;
  z-index:999 !important;
}

.left-fix-top-ml0 {
  position:fixed !important;
  top:60px !important;
  left:10px !important;
  overflow-y: auto !important;
  z-index:999 !important;
}

/* card-body 768px以下の場合 padding調整 */
@media screen and (max-width:768px) {
  .row-gap-5 {
    row-gap:5px !important;
  }
}

.is-gps-invalid{
  border-color: #dc3545;
}

[class*=is-gps-icheck-invalid]>input:first-child+label::before {
  border-color: #dc3545;
}

[class*=is-gps-icheck-on]>input:first-child:checked+label::before {
  background-color: #d3d3d3;
  border-color: #d3d3d3;
}


.customicheck-peterriver label:has(input:not(:checked):not(:disabled)):hover::before {
  border-color: #3498db;
}

.customicheck-peterriver label:has(input:checked)::before {
  background-color: #3498db;
  border-color: #3498db;
}

.customicheck-peterriver label:has(input:checked:disabled)::before {
  background-color: #acdeff;
  border-color: #acdeff;
}

[class*=customicheck-] label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid #D3CFC8;
  border-radius: 0; /* ここを50%にすると○にできる。 */
  margin-left: -29px;
}

[class*=customicheck-] label.rounded50::before {
  border-radius: 50%;
}

[class*=customicheck-] label:has(input:checked)::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 10px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  transform: translate(7.75px, 4.5px) rotate(45deg);
  -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
}

[class*=customicheck-] input {
  position: absolute !important;
  top:0px;
  left:0px;
  opacity: 0;
  margin: 0;
}

[class*=customicheck-]>label {
  padding-left: 29px !important;
  min-height: 22px;
  line-height: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.chgnmclrno-1{ background-color:#404040; }
.chgnmclrno-2{ background-color:#FF0000; }
.chgnmclrno-3{ background-color:#FF6A00; }
.chgnmclrno-4{ background-color:#FFD800; }
.chgnmclrno-5{ background-color:#B6FF00; }
.chgnmclrno-6{ background-color:#4CFF00; }
.chgnmclrno-7{ background-color:#00FF21; }
.chgnmclrno-8{ background-color:#00FF90; }
.chgnmclrno-9{ background-color:#00FFFF; }
.chgnmclrno-10{ background-color:#0094FF; }
.chgnmclrno-11{ background-color:#0026FF; }
.chgnmclrno-12{ background-color:#4800FF; }
.chgnmclrno-13{ background-color:#B200FF; }
.chgnmclrno-14{ background-color:#FF00DC; }
.chgnmclrno-15{ background-color:#FF006E; }

.chgnmclrno-16{ background-color:#808080; }
.chgnmclrno-17{ background-color:#FF7F7F; }
.chgnmclrno-18{ background-color:#FFB27F; }
.chgnmclrno-19{ background-color:#FFE97F; }
.chgnmclrno-20{ background-color:#DAFF7F; }
.chgnmclrno-21{ background-color:#A5FF7F; }
.chgnmclrno-22{ background-color:#7FFF8E; }
.chgnmclrno-23{ background-color:#7FFFC5; }
.chgnmclrno-24{ background-color:#7FFFFF; }
.chgnmclrno-25{ background-color:#7FC9FF; }
.chgnmclrno-26{ background-color:#7F92FF; }
.chgnmclrno-27{ background-color:#A17FFF; }
.chgnmclrno-28{ background-color:#D67FFF; }
.chgnmclrno-29{ background-color:#FF7FED; }
.chgnmclrno-30{ background-color:#FF7FB6; }


/* 時間をコマ表示したとき、現在時刻を目立たせるスタイル */
.koma-current {
  background-color: #9DC3E6 !important;
}