/* ページ印刷の変更を許可する */
@page {
  size: auto !important;
}

/* 画面上のデフォルトフォントを指定 */
body {
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体",
    "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
}

/* 表示調整 */
.bs-component + .bs-component {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .bs-docs-section {
    margin-top: 8em;
  }

  .bs-component {
    position: relative;
  }

  .bs-component .modal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block;
  }

  .bs-component .modal-dialog {
    width: 90%;
  }

  .bs-component .popover {
    position: relative;
    display: inline-block;
    margin: 20px;
    width: 220px;
  }

  .nav-tabs {
    margin-bottom: 15px;
  }

  .progress {
    margin-bottom: 10px;
  }
}

header {
  margin-bottom: 20px;
}

body {
  display: flex;
  flex-direction: column;
}

/* フッタ読み込み位置 */
.footer {
  bottom: 0;
  margin-top: auto;
  width: 100%;
  height: 60px;
}

/* 大型コンテナ 基礎サイズ */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px;
}

/* 大型コンテナ 年間スケジュール用 */
.container-fluid.from-sch {
  margin-right: auto;
  margin-left: auto;
  max-width: 1700px !important;
}

/* 大型コンテナ 予約者一覧用 */
.container-fluid.from-member {
  margin-right: auto;
  margin-left: auto;
  max-width: 1800px !important;
}

/* 半透明文字 */
.container .text-muted {
  margin: 20px 0;
}

/* numberのボタンを削除 */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  margin: 0 !important;

  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

/* 管理者画面用背景色 */
.bg-admmenu {
  background-color: #1c264d !important;
}

/* 管理者画面用ボタン */
.btn-admmenu {
  border-color: #1c264d;
  background-color: #1c264d;
  color: #fff;
}

/* 管理者画面用ボタン - マウスホバー時 */
.btn-admmenu:hover {
  border-color: #1c264d;
  background-color: #121933;
  color: #fff;
}

/* 申込ボタン(満員) */
.btn-maxcap {
  border-color: #ff5c5c;
  background-color: #ff6666;
  color: #fff !important;
}

/* 申込ボタン(満員) - マウスホバー時 */
.btn-maxcap:hover {
  border-color: #ff5c5c;
  background-color: #ff3333;
  color: #fff !important;
}

/* 申込ボタン(準備中/受付終了) */
.btn-preorend {
  border-color: #cdd1d6;
  background-color: #6c757d;
  color: #fff !important;
}

/* 申込ボタン(準備中/受付終了) - マウスホバー時 */
.btn-preorend:hover {
  border-color: #cdd1d6;
  background-color: #484e54;
  color: #fff !important;
}

/* ボタン用Img */
.btn-image {
  width: 30px;
  height: 30px;
}

/* ボタン用Img - マウスホバー時 */
.btn-image:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

/* Img表示TD */
.td-image {
  text-align: center;
}

/* 改行用TD */
.td-break {
  white-space: normal !important;
}

/* 小文字表記用TD */
.td-small {
  font-size: 13px;
}

.td-p-small {
  font-size: 13px;
}


.login-data {
  padding-bottom: 5px;
  width: auto;
  color: #ffffff;
}

.dataTables_scrollHead,
.dataTables_scrollHeadInner {
  margin-right: auto !important;
  margin-left: auto !important;
}

.th-kousyu {
  width: 7em;
}

.paragraph-title {
  padding: 0.5em 0;
  border-top: 2px solid #337ab7;
  border-bottom: 1px solid rgb(0 0 0 / 6%);
}

.form-control-sm {
  font-size: 0.8125rem;
}

.guidebook-like {
  border: 0.5px solid;
  border-color: #1c264d;
}

.guidebook-like-cell,
.guidebook-like-hd {
  border-color: #1c264d;
}

.guidebook-like-hd {
  background-color: #8ed1fc;
}

#input-user,
#input-enterprise,
#input-other,
#input-upload {
  position: relative;
  margin: 32px;
  margin: 2rem;
}

#input-user:before,
#input-enterprise:before,
#input-other:before,
#input-upload:before {
  position: absolute;
  top: -24px;
  left: 0;
  padding: 0 1em;
  height: 24px;
  border: 0.5px solid;
  border-color: #1c264d;
  background: #8ed1fc;
  font-size: 14px;
  font-size: 0.875rem;
}

/*行の無駄な余白削除*/
.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/*ページ上部のナビテーブル*/
.step-table {
  margin-top: 1rem;
}

.step-table tr {
  text-align: center;
}

.step-table th {
  border: 1px solid #cc3300;
  background: #fff;
  color: #cc3300;
  text-align: center;
}

.step-table td {
  border: none;
  background: #fff;
  color: #cc3300;
  text-align: center;
}

.step-table th.active {
  border: 1px solid #cc3300;
  background: #cc3300;
  color: #fff;
  text-align: center;
}

/*申込前準備テーブル*/
.list-table {
  margin-top: 1rem;
}

.list-table tr {
  text-align: left;
}

.list-table th {
  border-top: 2px solid #fde1b0;
  border-bottom: 2px solid #fde1b0;
  border-left: 2px solid #fde1b0;
  background: #fffbdf;
  color: #000;
}

.list-table th:first-child {
  border-top: 2px solid #fde1b0;
}

.list-table td {
  border-top: 2px solid #d6d6d6;
  border-right: 2px solid #d6d6d6;
  border-bottom: 2px solid #d6d6d6;
  background: #fff;
}

/*黄色枠のメッセージ　.alertと併用*/
.notice {
  max-width:100% !important;
  width:100% !important;
  height: auto !important;
  border: 2px solid #e67f23 !important;
  background: #fff !important;
  color: #e67f23 !important;
  word-break: break-all;
  font-weight: bold;
}

/*.alertの無駄な株余白を削除*/
.alert h4,
.alert label {
  margin-bottom: 0 !important;
}

/*.requiredで必須を追加*/
.required::after {
  position: absolute;
  top: 35%;
  right: 20px;
  display: inline-block;
  padding: 3px 7px;
  min-width: 10px;
  border-radius: 10px;
  background-color: #f3b400;
  color: #fff;
  content: "必須";
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

.eitherRequired::after {
  position: absolute;
  top: 35%;
  right: 20px;
  display: inline-block;
  padding: 3px 7px;
  min-width: 10px;
  border-radius: 10px;
  background-color: #f3b400;
  color: #fff;
  content: "いずれか必須";
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

/*管理者ページ必須を追加*/
.admin_required::after {
  display: inline-block;
  margin-left: 3px;
  padding: 3px 7px;
  min-width: 10px;
  border-radius: 10px;
  background-color: #f3b400;
  color: #fff;
  content: "必須";
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
}

th.th-200 {
  width: 200px;
}

table.table label {
  margin-bottom: 0 !important;
}

/*申込書入力ページ上書き*/
::placeholder {
  color: #bbb !important;
  font-style: italic;
}

.guidebook-like {
  margin-top: 3em !important;
  border: none;
}

.guidebook-like-cell,
.guidebook-like-hd {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}

.guidebook-like-cell {
  border-top: 2px solid #d6d6d6;
  border-right: 2px solid #d6d6d6;
}

.guidebook-like-hd {
  border-top: 2px solid #fde1b0;
  border-left: 2px solid #fde1b0;
  background-color: #fffbdf;
  font-weight: bold;
}

.guidebook-like > div:last-child {
  border-bottom: 2px solid #d6d6d6;
}

.guidebook-like > div:nth-last-child(2) {
  border-bottom: 2px solid #fde1b0;
}

#input-status,
#input-user,
#input-enterprise,
#input-other,
#input-upload,
#input-upload-01,
#input-upload-02,
#input-upload-03 {
  position: relative;
  margin: 32px;
  margin: 2rem;
}

#input-status:before,
#input-user:before,
#input-enterprise:before,
#input-other:before,
#input-upload-01:before,
#input-upload-02:before,
#input-upload-03:before {
  position: absolute;
  top: -2.5em;
  left: 0;
  padding: 0.5em 1em;
  height: 2.5em;
  border: none;
  border-color: none;
  background: #fde1b0;
  font-weight: bold;
  font-size: 1em;
}

#input-status:before {
  content: "\予約情報";
}

#input-user:before {
  content: attr(data-nowstatus);
}

#input-enterprise:before {
  content: "\事業所";
}

#input-enterprise.alter:before {
  content: "\事業場";
}

#input-other:before {
  content: "\その他";
}

#input-other.alter:before {
  content: "\会員区分";
}

#input-upload:before {
  content: "\添付書類";
}

#input-upload-01:before {
  content: "\顔写真";
}

#input-upload-02:before {
  content: "\受講資格";
}

#input-upload-03:before {
  content: "\再試験";
}

.form-control-sm {
  color: #000;
  font-size: 1rem !important;
}

.input-result-multi {
  font-weight: bold;
  font-size: 1.5rem !important;
}

.web-important-text-red {
  color: #dc143c;
}

.web-important-text-blue {
  color: #6666ff;
}

.web-important-text-orange {
  color: #ff9000;
}

.web-important-text-purple {
  color: #660099;
}	

.status-color-fullhouse {
  padding: 0.1em 0.5em 0.1em 0.5em;
  background: #ff6666;
  color: #ffffff;
}

.status-color-waningminutes {
  padding: 0.1em 0.5em 0.1em 0.5em;
  background: #ffc107;
}

.status-color-reception {
  padding: 0.1em 0.5em 0.1em 0.5em;
  background: #28a745;
  color: #ffffff;
}

.status-color-preparation-or-end {
  padding: 0.1em 0.5em 0.1em 0.5em;
  background: #6c757d;
  color: #ffffff;
}

.downloadable-icon {
  cursor: pointer;
}

.downloadable-icon:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.fit-on-top {
  margin-left: -15px !important;
}

.confirm-window-header {
  outline: none !important;
  text-align: right !important;
}

.confirm-window-body,
.confirm-window-title{
  outline: none !important;
  text-align: left !important;
}

@media screen and (max-width: 991px) {
  .confirm-window-title {
    text-align: center !important;
  }

  .confirm-window-header {
    text-align: left !important;
    font-weight: bold;
  }

  .confirm-window-body {
    padding-left: 2em !important;
    text-align: left !important;
  }
}

@media screen and (max-width: 768px) {
  .step-table {
    display: block;
    width: 100%;
  }

  .step-table tbody {
    display: block;
    width: 100%;
  }

  .step-table tr {
    display: block;
    width: 100%;
  }

  .step-table th {
    display: block;
    width: 100%;
  }

  .step-table td {
    display: block;
    width: 100%;
  }

  .list-table {
    display: block;
    width: 100%;
  }

  .list-table tbody {
    display: block;
    width: 100%;
  }

  .list-table tr {
    display: block;
    width: 100%;
  }

  .list-table th {
    display: block;
    width: 100%;
  }

  .list-table td {
    display: block;
    width: 100%;
  }

  .responsive .list-table th {
    border-top: 2px solid #fde1b0;
    border-right: 2px solid #fde1b0;
    border-bottom: none;
    border-left: 2px solid #fde1b0;
  }

  .responsive .list-table td {
    display: block;
    width: 100%;
    border-top: none;
    border-right: 2px solid #d6d6d6;
    border-bottom: 2px solid #d6d6d6;
    border-left: 2px solid #d6d6d6;
  }

  .responsive .step-table td {
    display: none;
    width: 100%;
  }

  .guidebook-like-cell {
    border-top: none;
    border-right: 2px solid #d6d6d6;
    border-bottom: 2px solid #d6d6d6;
    border-left: 2px solid #d6d6d6;
  }

  .guidebook-like-hd {
    border-top: 2px solid #fde1b0;
    border-right: 2px solid #fde1b0;
    border-bottom: none;
    border-left: 2px solid #fde1b0;
    background-color: #fffbdf;
    font-weight: bold;
  }
  .guidebook-like-cell,
  .guidebook-like-hd {
    padding-top: 0.25em !important;
    padding-bottom: 0.25em !important;
  }
  .guidebook-like-hd label {
    margin-bottom: 0;
  }
  .required::after {
    top: 20%;
  }
}

/* 画面ロードアニメ(枠) */
.loading-animation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* 画面ロードアニメ(アニメーション部分) */
.ani-child1, .ani-child2 {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: blue;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

/* 画面ロードアニメ(メッセージ部分) */
#ani-text {
  position: absolute;
  top: 60%;
}

/* 画面ロードアニメ */
.ani-child2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

/* 画面ロードアニメ */
@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
  }
  100% {
    -webkit-transform: rotate(-360deg)
  }
}

/* 画面ロードアニメ */
@keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}