/* Bootstrapアイコン表示用クラス */
.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/*
 * Offcanvas
 * メニューの表示領域の設定
 */
.offcanvas {
  --bs-offcanvas-width:300px;
}

/* フォントサイズ(12px) */
.fs-12px {
  font-size: 12px;
}

/*
 * メニュー内のリンクの通常時の設定
 */
.sidebar .nav-link {
  font-size: .875rem;
  font-weight: 500;
  color: #212529; /* text-darkの色 */
}

/*
 * メニュー内のリンクのアクティブ時の設定
 */
.sidebar .nav-link.active {
  background-color: #cfe2ff;
}

/*
 * メニュー内のリンク全体の設定
 * メニュー内のリンクのアニメーションはOFFにする
 */
.nav-menu-link {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  border: 4px solid transparent;
  transition: none;
}

/*
 * リンクのホバー時の設定
 */
.nav-menu-link:hover,
.nav-menu-link:focus,
.nav-menu-link:focus-visible {
  text-decoration: underline  !important;
  border: 4px solid  rgba(13,110,253,.25) !important;
  outline: none  !important;
  box-shadow: none  !important;
}


.nav-link.active {
  text-decoration:underline;
}

.sidebar-heading {
  /*font-size: .75rem;*/
  font-size: 1.0rem;
}



/*
 * ページ内のフォントの設定
 */
@font-face{
  font-family: "Noto Sans JP", sans-serif;
  src: url(../fonts/NotoSansJP-VariableFont_wght.ttf) format("truetype")
}

/*
 * ページBody部の設定
 */
body{
  font-family: "Noto Sans JP", sans-serif;
}

/* 色設定 */
/* 通常時：BootStrapのデフォルト色から輝度5%アップ */
/* hover：通常時から明度10%ダウン、輝度10%ダウン */
/* active：hover時から明度5%ダウン、輝度5％ダウン */
/* disabled：通常時から輝度5％アップ */

/* 一般処理 */
.btn-info-pale{
  --bs-btn-color: hsl(228, 100%, 34%);
  --bs-btn-bg: hsl(216, 100%, 100%);
  --bs-btn-border-color: hsl(216, 90%, 50%);
  --bs-btn-hover-color: hsl(216, 25%, 25%);
  --bs-btn-hover-bg: hsl(216, 100%, 90%);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-focus-shadow-rgb: #ff0000;
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(216, 100%, 75%);
  --bs-btn-active-border-color: var(--bs-btn-active-color);
  --bs-btn-disabled-color: hsl(216, 50%, 70%);
  --bs-btn-disabled-bg: hsl(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-color);
}
/* 一般処理ボタンのfocus属性の設定 */
.btn-info-pale:hover,
.btn-info-pale:focus,
.btn-info-pale:focus-visible {
  color: hsl(216, 25%, 25%);
  background-color: hsl(216, 100%, 90%);
}

/* 検索処理 */
.btn-primary-pale{
  --bs-btn-color: #ffffff;
  --bs-btn-bg: hsl(216, 98%, 62%);
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: hsl(216, 88%, 52%);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-focus-shadow-rgb: #ff0000;
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: var(--bs-btn-hover-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}
/* 検索処理ボタンのfocus属性の設定 */
.btn-primary-pale:focus {
  background-color: hsl(216, 88%, 52%);
}

/* リセット */
.btn-secondary-pale{
  --bs-btn-color: #ffffff;
  --bs-btn-bg: hsl(207, 7%, 56%);
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: hsl(207, 0%, 46%);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(207, 0%, 41%);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: hsl(207, 7%, 61%);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}
/* リセットボタンのfocus属性の設定 */
.btn-secondary-pale:focus {
  background-color: hsl(207, 0%, 46%);
}

/* 続けて登録、お気に入り登録 */
.btn-after{
  --bs-btn-color: #ffffff;
  --bs-btn-bg: hsl(120, 40%, 55%);
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: hsl(120, 40%, 45%);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(120, 40%, 40%);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: hsl(120, 40%, 60%);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}
/* 続けて登録、お気に入り登録ボタンのfocus属性の設定 */
.btn-after:focus {
  background-color: hsl(120, 40%, 45%);
}

/* 行追加 */
.btn-add-pale{
  --bs-btn-color: hsl(216, 25%, 25%);
  --bs-btn-bg: hsl(216, 100%, 90%);
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-color: hsl(216, 25%, 25%);
  --bs-btn-hover-bg: hsl(216, 100%, 80%);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-focus-shadow-rgb: #ff0000;
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(216, 100%, 70%);
  --bs-btn-active-border-color: var(--bs-btn-active-color);
  --bs-btn-disabled-color: hsl(0, 0%, 45%);
  --bs-btn-disabled-bg: hsl(216, 100%, 95%);
  --bs-btn-disabled-border-color: var(--bs-btn-color);
}
/* 登録､更新処理ボタンのfocus属性の設定 */
.btn-add-pale:focus {
  background-color: hsl(216, 100%, 80%);
}


/* 登録､更新処理 */
.btn-success-pale{
  --bs-btn-color: #000000;
  --bs-btn-bg: hsl(44, 100%, 75%);
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: hsl(44, 100%, 50%);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(44, 100%, 45%);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: hsl(44, 100%, 80%);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}
/* 登録､更新処理ボタンのfocus属性の設定 */
.btn-success-pale:focus {
  background-color: hsl(44, 100%, 50%);
}


/* 戻る */
.btn-return{
  --bs-btn-color: #000000;
  --bs-btn-bg: hsl(204, 6%, 85%);
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: hsl(204, 0%, 75%);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(204, 0%, 70%);
  --bs-btn-active-border-color: var(--bs-btn-active-bg);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: hsl(204, 6%, 90%);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}
/* 戻るボタンのfocus属性の設定 */
.btn-return:focus {
  background-color: hsl(204, 0%, 75%);
}


/* メニュー､ログアウト */
.btn-line{
  --bs-btn-color: #000000;
  --bs-btn-bg: hsl(0, 0%, 100%);
  --bs-btn-border-color: white;
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: hsl(0, 0%, 90%);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(0, 0%, 85%);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
  --bs-btn-disabled-color: hsl(0, 0%, 45%);
  --bs-btn-disabled-bg: hsl(0, 0%, 100%);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
}
/* メニュー､ログアウトボタンのfocus属性の設定 */
.btn-line:focus {
  background-color: hsl(0, 0%, 90%);
}

/* 注文削除処理 */
.btn-delete {
  --bs-btn-color: #6c757d;
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: #FFFFFF;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}
/* 注文削除処理ボタンのfocus属性の設定 */
.btn-delete:focus {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, .5);
}

/* ポップアップ表示 */
.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: #FFFFFF;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

/* ポップアップ表示ボタンのfocus属性の設定 */
.btn-outline-secondary:focus {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
  box-shadow: none;
}

/* ボタンサイズを固定化する設定 */
.btn-custom-size {
  width: 5.75rem;
  justify-content: center;
  align-items: center
}

/* メニューボタン */
.btn-menu{
  --bs-btn-color: hsl(216, 25%, 25%);
  --bs-btn-bg: hsl(216, 100%, 90%);
  --bs-btn-border-color: var(--bs-btn-color);
  --bs-btn-hover-color: hsl(216, 25%, 25%);
  --bs-btn-hover-bg: hsl(216, 100%, 85%);
  --bs-btn-hover-border-color: var(--bs-btn-color);
  --bs-btn-focus-shadow-rgb: #ff0000;
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: hsl(216, 100%, 75%);
  --bs-btn-active-border-color: var(--bs-btn-active-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg:  var(--bs-btn-hover-color);
  --bs-btn-disabled-border-color: var(--bs-btn-disabled-bg);
}
/* メニューボタンのfocus属性の設定 */
.btn-menu:focus {
  background-color: hsl(216, 100%, 85%);
}


/*メニューサイドバーの✕ボタンの設定*/
.btn-close {
  --bs-btn-close-focus-shadow: none;
}

/* ポップアップ画面にある☆ボタンの設定 */
.btn-bookmark:hover,
.btn-bookmark:focus,
.btn-bookmark:focus-visible,
.btn-bookmark:active {
  border: 2px solid rgba(13, 110, 253, .25) !important;
}

/* 偶数行の背景を黄色にするテーブルの設定 */
.table-striped-yellow > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #ffffe0;
}

/* 偶数行の背景を灰色にするテーブルの設定 */
.table-striped-gray > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f7f7f7;
}

/* テーブルの見出し行の設定 */
.table-header {
  font-size: .925rem;
}

/* テーブルの項目の設定 */
.table-body {
  font-size: .925rem;
}

/* バッジアイコンの設定 */
.budge-box-01 {
  color: #0d6efd;
  background-color: #ffffff;
  margin: 0px 0px 2px 0px;
  border: 2px solid #0d6efd;
  border-radius: 5px;
  --padding: 5px;
}

/* 白い文字、青い背景の設定 */
.text-bg-primary{
  color: #fff !important;
  background-color: RGBA(13,110,253,var(--bs-bg-opacity,1)) !important
}

/* 赤い文字の設定 */
.text-danger{
  --bs-text-opacity:1;
  color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important
}

/* 入力項目にフォーカスが当たったときのプレースホルダーの設定 */
input:focus::placeholder {
  color: transparent;
}

/* テキストボックスのプレースホルダーの設定 */
.form-control::placeholder {
  opacity: 50%;
}

/* テキストボックスの非活性時の設定 */
.form-control:disabled {
  background-color:#f4f4f4;
}

/* チェックボックス、ラジオボタンの設定 */
.form-check-input:checked {
  background-color:#0023ab;
  border-color:#0023ab;
}

/* メニューアイコンの設定 */
.menu-icon {
  display: flex;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.375em !important;
  text-decoration: none;
  height: 100px;
  width: 100px;
  color: unset;
  text-align: center;
  vertical-align: middle;
}

/* メニューアイコンのホバー時の設定 */
.menu-icon:hover,
.menu-icon:focus,
.menu-icon:focus-visible {
  border: 4px solid  rgba(13,110,253,.25) !important;
  outline: none;
}


/* テーブルの高さを設定し､スクロールバーを追加 */
.table-responsive {  
  max-height: 530px; /* テーブルの最大高さ */  
  overflow-y: auto; /* 縦のスクロールバーを表示 */  
}

/* 合計欄のテキストボックスを濃いグレーに設定 */
.text-disabled {  
  background-color: #d6d6d6; /* 濃いグレーの色 */  
}  

/* テーブルヘッダ固定用：テーブルの設定 */
.table-sticky {
  border-collapse: separate;
  border-spacing: unset;  
}

/* テーブルヘッダ固定用：見出し行の設定 */
.table-sticky th {
  white-space: nowrap;
  font-weight: normal;
  top: 0;
  position: sticky;
}

/* ブラウザが保有するテーブルのバウンドアニメーションをOFFにする設定 */
.table-overscroll-behavior-none {
  overscroll-behavior: none;
}

/* 非活性と同じ背景色の設定 */
/* readonly属性のテキストボックスに使用 */
.bg-disabled {
  background-color:#f4f4f4;
}
/* readonly属性のテキストボックスのホバー時の設定 */
.bg-disabled:focus {
  background-color:#f4f4f4;
  border-bottom-color: var(--bs-border-color);
  border-top-color: var(--bs-border-color);
  border-left-color: var(--bs-border-color);
  border-right-color: #6c757d;
  outline: none;
  box-shadow: none;
}

/* MicosoftEdge用 */
/* パスワード入力：ブラウザ固有の目のマークを非表示に切り替える */
::-ms-reveal {
  display: none;
}

/* エラー時に入力項目の枠を赤くするためのクラス */
.has-error-focus-lost,
.has-error {
  border: 2px solid var(--bs-form-invalid-border-color);
}

/* エラー時に赤くした入力項目の枠をフォーカス時にも維持するためのクラス */
.has-error-focus-lost:focus,
.has-error:focus {
  border: 2px solid var(--bs-form-invalid-border-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

/* 検索項目の枠の設定 */
.search-border{
  border-style: solid;
  border-color: #dee2e6;
  border-width: 1px;
  border-radius: 0.375rem;
}

/* 検索結果ヘッダー内のリンクの設定 */
.table-header-link {
  color: #000000;
  text-decoration: none;
}

/* 検索結果ヘッダー内のリンクのホバー時の設定 */
.table-header-link:hover {
  color: #0a58ca;
  text-decoration: underline;
}

/*メニューの裏の背景色を無くす*/
.sidebar > .offcanvas-backdrop {
  background-color: transparent;
}

/* ポップアップ用2重押下制御 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1056;
}

/* ポップアップ一覧改行 */
.break-all {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* ポップアップ用左右の距離 */
.popup-padding {
  padding-left: 0px;
  padding-right: 0px;
}

/* ポップアップ内リンクフォーカス時の設定 */
.popup-link:hover,
.popup-link:focus,
.popup-link:focus-visible {
  outline: 2px auto  rgba(13,110,253,.25) !important;
}

/* 利用規約のリンクフォーカス時の設定 */
.link-underline-primary:hover,
.link-underline-primary:focus,
.link-underline-primary:focus-visible {
  outline: 2px auto  rgba(13,110,253,.25) !important;
}

/* PCの場合、ページ番号を表示 */
@media (min-width: 768px) {
  .pagenation-pageno {
    display: block !important;
  }
}

/* スマホの場合、ページ番号を非表示 */
@media (max-width: 767.98px) {
  .pagenation-pageno {
    display: none !important;
  }
}