/* 共通ヘッダー */
header {
  background-color: #5d86ff;
}

/* 共通フッター */
footer {
  background-color: #5d86ff;
  color: #ffffff;
  height: 40px;
  font-size: 10px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/* ページ全体 */
html,
body {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; /* 游明朝系のフォントを指定 */
}

/* 共通ヘッダー内 「ログアウト」リンク */
a.logout:link {
  text-decoration: underline;
  color: #ffffff;
}
a.logout:visited {
  text-decoration: underline;
  color: #d3d3d3;
}
a.logout:active {
  text-decoration: underline;
  color: #a9a9a9;
}
a.logout:hover {
  text-decoration: underline;
  color: #a9a9a9;
}

/* メインコンテンツ */
main {
  margin-bottom: 3rem; /* フッターによってコンテンツが隠れるので底上げ */
}

/* コンテンツ用画面上部帯 */
.title_band {
  background-color: #78b9ff;
  color: #ffffff;
  font-size: 20px;
}

/* 角丸テーブル */
.table_border_radius {
  border: 1px solid gray;
  border-radius: 5px;
  border-spacing: 0;
  border-collapse: separate;
}

.table_border_radius tr td {
  border: none;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.table_border_radius tr td:first-child {
  border-left: none;
}

.table_border_radius tr td:last-child {
  border-right: none;
}

.table_border_radius tr:first-child td {
  border-top: none;
}

.table_border_radius tr:last-child td {
  border-bottom: none;
}

/* テーブル */
.table_head {
  font-size: 18px; /* テーブルヘッダーのフォントサイズ */
}

.table_body {
  font-size: 16px; /* テーブルボディのフォントサイズ */
}

/* 青のテーブルヘッダー */
.table_head_blue {
  font-size: 18px; /* テーブルヘッダーのフォントサイズ */
  background-color: #78b9ff;
  color: #ffffff;
}

/* 灰のテーブルヘッダー */
.table_head_gray {
  font-size: 18px; /* テーブルヘッダーのフォントサイズ */
  background-color: #e7e7e7;
  color: #000000;
}

/* オレンジのテーブルヘッダー */
.table_head_orange {
  font-size: 18px; /* テーブルヘッダーのフォントサイズ */
  background-color: #fffacd;
  color: #000000;
}

/* 見出しの左線 */
.heading_line {
  padding: 0.25em 0.5em;
  color: #000000;
  background: transparent;
  border-left: solid 5px #7db4e6;
}

/* 時間選択ボタン用フォント */
.btn_font_middle {
  font-size: 20px;
}

/* ボタンの横幅サイズ */
.btn_w_middle {
  width: 100px;
}

/* 強制折り返し */
.break_word {
  word-break: break-all;
}

/* 入力チェック エラーメッセージ表示エリア */
.error_message_area {
  color: #ff0000;
  background: #ffe4e1;
  border: solid 1px #ff0000;
  padding: 0.5em;
  border-radius: 0.5em;
}

/* floatのまわりにある要素の回り込みを解除 */
.cancel_wrap {
  content: "";
  clear: both;
}

/* bootstratのカスタマイズ */
/* btn-primaryクラスのカスタマイズ */
.btn-primary {
  background: #5d86ff; /* ボタンの背景色 */
  border-color: #5d86ff; /* ボタンの枠線色 */
  color: #ffffff; /* ボタンのテキスト色 */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:active.focus,
.btn-primary.active,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background: #fcaa00; /* ホバー時のボタンの背景色 */
  border-color: #fcaa00; /* ホバー時のボタンの枠線色 */
  color: #ffffff; /* ホバー時のボタンのテキスト色 */
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #da9100; /* ボタン押下時の背景色 */
  border-color: #da9100; /* ボタン押下時の枠線色 */
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #ffd278; /* ボタン押下時のボタン周りの枠線色 */
}

.btn-primary.outline {
  border: 3px solid #5d86ff; /* アウトライン無しボタンの背景色 */
  color: #ffffff; /* アウトライン無しボタンのテキスト色 */
}

/* btn-primaryクラス（非活性時）のカスタマイズ */
.btn-primary:disabled {
  background: #a9a9a9; /* ボタンの背景色 */
  border-color: #a9a9a9; /* ボタンの枠線色 */
  color: #ffffff; /* ボタンのテキスト色 */
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background: #a9a9a9; /* ホバー時のボタンの背景色 */
  border-color: #a9a9a9; /* ホバー時のボタンの枠線色 */
  color: #ffffff; /* ホバー時のボタンのテキスト色 */
}

/* 文字種用のテキスト色 */
.text-warning-darker {
  color: #ff8c00 !important;
}

/* ヘッダ右リンク */
.header-right {
  position: absolute;
  bottom: 2px;
  right: 2px;
}

/* スマホ用テーブル(スクロール有り)設定 */
.table-responsive > .table {
  width: 100%;
  word-wrap: break-word;
}
/* 横スクロール時にヘッダーを固定する */
.sticky_table th:first-child {
  position: -webkit-sticky; /* Safariに対応するためプレフィックスを加える */
  position: sticky; /* 固定 */
  left: 0; /* 固定する位置 */
  z-index: 1; /* 重なり順 */
}
/* ヘッダー行内の他のセルより手前に表示する */
.sticky_table thead th:first-child {
  z-index: 1; /* 重なり順 */
}
/* スクロールすると枠線が消えるのでアウトラインを追加 */
table tr th {
  outline: 1px solid #dee2e6;
  border: none;
  outline-offset: -1px;
}

/* テーブル背景色 */
.table_bg_white {
  background-color: #ffffff;
}
.table_bg_gray {
  background-color: #f5f5f5;
}
.table_bg_yellow {
  background-color: #ffebcd;
}
.table_bg_green {
  background-color: #dbffd2;
}

/* 結果照会画面 結果テーブル用設定 */

/* 開閉時に親要素のWidthの影響で子要素の幅が変わってしまうための対策 */
.accordion {
  width: fit-content;
}

/* 1列目用 */
.result-header {
  text-align: center;
  font-weight: bold;
  white-space: normal;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}
/* 子要素の1列目用 */
.result-header-right {
  text-align: right;
  font-weight: bold;
  white-space: normal;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

/* 2列目以降用 */
.result-body {
  min-width: 250px;
  max-width: 250px;
  word-break: break-all;
}
.result-body-center {
  text-align: center;
  min-width: 250px;
  max-width: 250px;
  word-break: break-all;
}

.top-left-rounded {
  border-top-left-radius: 0.375rem;
}
.top-right-rounded {
  border-top-right-radius: 0.375rem;
}
.bottom-left-rounded {
  border-bottom-left-radius: 0.375rem;
}
.bottom-right-rounded {
  border-bottom-right-radius: 0.375rem;
}

#ws-loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.5;
  z-index: 1;
}
#ws-loading-f {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 1;
}
#ws-spinner {
  position: relative;
  display: none;
  color: #fff;
  z-index: 2;
}
.maint-caution {
  font-size: 10px;
}

.message-primary {
  background: #bbdefb;
  border-color: #bbdefb;
}

.message-secondary {
  background: #fff9c4;
  border-color: #fff9c4;
}

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

.circle-active {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  background-color: #5d86ff;
  color: white;
}

.circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  background-color: #a9a9a9;
  color: white;
}

.circle-complete {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  background-color: #9ccc65;
  color: white;
}

.can-yoyaku:hover {
  background-color: lightyellow !important;
  cursor: pointer;
}

.cannot-yoyaku:hover {
  background-color: lightgray !important;
  cursor: not-allowed;
}

/* パスワード入力欄にブラウザの機能で表示される目アイコンを消す */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* パスワード入力欄と目アイコンのスタイル */
.password-wrapper {
    position: relative;
}

.password-input {
    padding-right: 40px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}