@charset "utf-8";

:root {
  --font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  --theme-primary: #2173b2;
  --theme-primary-lighten: #fff8eb;
  --theme-accent: #ff508a;
  --text-primary: #242424;
  --text-secondary: #434343;
  --text-tertiary: #5a5a5a;
  --text-dark: #242424;
  --text-light: #f5f5f5;
  --text-link: #2a70c7;
  --text-link-hover: #4184d6;
  --text-link-active: #1257ac;
  --color-red: #f8392f;
  --color-red-lighten: #ff483e;
  --color-red-darken: #eb372e;
  --color-blue: #1c8aff;
  --color-blue-lighten: #2990ff;
  --color-blue-darken: #1e82ec;
  --color-navy: #103f61;
  --color-navy-lighten: #1a6399;
  --color-navy-darken: #0b283e;
  --color-green: #629411;
  --color-green-lighten: #6b9921;
  --color-green-darken: #406900;
  --color-orange: #ff9900;
  --color-orange-lighten: #ffa41c;
  --color-orange-darken: #e48900;
  --color-gray: #d9d9d9;
  --color-gray-lighten: #e0e0e0;
  --color-gray-darken: #d1d1d1;
  --color-white: #fff;
  --color-dencho-digital-light: #e7f1ff;
  --color-dencho-digital-dark: #a7ccff;
  --color-dencho-scanning-light: #ffefe7;
  --color-dencho-scanning-dark: #ffbdab;
  --background-primary: #fff;
  --background-secondary: #fafafa;
  --background-tertiary: #ececec;
  --background-disabled: #e6e6e6;
  --background-active: #e7f1ff;
  --background-error: #ffe7e7;
  --background-success: #d8edd4;
  --background-warning: #fcff64;
  --background-light-yellow: #ffe8be;
  --background-light-green: #b1f9ae;
  --background-light-blue: #beebff;
  --background-light-purple: #e6d9ff;
  --border-dark: #333;
  --border-gray: #dee2e6;
  --border-disabled: #c3c3c3;
  --hover: #fff8eb;
  --hover-row: #FDD1B0;
  --selected: #ffebcc;
  --selected-row: #F7ADC3;
  --deleted: #a0a0a0;
  --deleted-hover: #8d8d8d;
  --shadow: rgba(0, 0, 0, 0.4);
  --anim-speed: .2s;

  --zindex-ultra-high: 9999;
  --zindex-high: 999;
  --zindex-mid: 499;
  --zindex-low: 100;
  --zindex-dialog-form: 10;
  --zindex-dialog-overlay: 9;

  --icon-maximize: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707z'/></svg>");
  --icon-minimize: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707zM15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707z'/></svg>");
  --icon-hide: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z'/></svg>");
  --icon-show: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z'/></svg>");
  --icon-information: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/></svg>");
}

/** カードヘッダーデザイン */
div.card-header {
  /* 黒文字・白背景 */
  color: var(--text-dark);
  font-weight: bold;
  background-color: var(--background-primary);
  border-bottom: 2px solid var(--border-dark);
}

/** カードヘッダーアイコン */
div.card-header .header-icon {
  vertical-align: text-bottom;
}

/** カードフッターデザイン */
div.card-footer {
  /* 黒文字・白背景 */
  color: var(--text-dark);
  font-weight: bold;
  background-color: var(--background-primary);
}

/** リンクにネストしたカードの場合、文字色をリンク色にする（v5.3対応） */
a .card {
  color: inherit;
}

/** テーブル背景色 **/
table.table-striped {
  --bs-table-striped-bg: var(--background-active);
  /** 奇数行背景色 */
}

table.table-hover {
  --bs-table-hover-bg: var(--hover-row);
  /** hover行背景色 */
}

/* ヘッダー固定テーブル */
table.table-sticky {
  border-collapse: separate;
  border-spacing: 0;
}

table.table-sticky thead {
  top: 0px;
  position: sticky;
  background: var(--background-primary);
  box-shadow: 0px -4px 6px #333;
  z-index: 1;
}

table.table-sticky th,
table.table-sticky td {
  border-bottom: 1px solid var(--border-gray);
  border-left: 1px solid var(--border-gray);
}

table.table-sticky th:last-child,
table.table-sticky td:last-child {
  border-right: 1px solid var(--border-gray);
}

/* ヘッダー固定テーブル（box-shadow無し） */
table.table-sticky-noshadow {
  border-collapse: separate;
  border-spacing: 0;
}

table.table-sticky-noshadow thead {
  top: 0px;
  /*position: sticky;*/
  /*見出しが固定されるけど、位置がダメなのでコメント*/
  background: var(--background-primary);
  /*box-shadow: 0px -4px 6px #333;*/
  /*影を無くすためコメント*/
  z-index: 1;
}

table.table-sticky-noshadow th,
table.table-sticky-noshadow td {
  border-bottom: 1px solid var(--border-gray);
  border-left: 1px solid var(--border-gray);
}

table.table-sticky-noshadow th:last-child,
table.table-sticky-noshadow td:last-child {
  border-right: 1px solid var(--border-gray);
}

/* 選択行 背景色変更 */
table.table-selectable tr.selected td {
  --bs-table-bg: var(--selected-row) !important;
  --bs-table-bg-type: var(--selected-row) !important;
  --bs-table-accent-bg: var(--selected-row) !important;
  background-color: var(--selected-row);
}

/* 削除レコード行 背景色変更 */
table tr.deleted td {
  --bs-table-bg: var(--deleted) !important;
  --bs-table-bg-type: var(--deleted) !important;
  --bs-table-accent-bg: var(--deleted) !important;
  background-color: var(--deleted);
}

/** -- 削除レコードホバー時も、ホバー時背景色を適用するためコメントアウト(10/25) -- **/
/* table tr.deleted:hover td {
  --bs-table-bg: var(--deleted-hover) !important;
  --bs-table-bg-type: var(--deleted-hover) !important;
  --bs-table-accent-bg: var(--deleted-hover) !important;
  --bs-table-hover-bg: var(--deleted-hover) !important;
  background-color: var(--deleted-hover);
} */

/* モーダルダイアログ背景（2重にダイアログを表示した際の調整） */
div.modal-backdrop.fade.show {
  z-index: 1052;
}

/* ボタン：白背景・黒文字 */
.btn-simple {
  --bs-btn-color: var(--bs-body-color) !important;
  --bs-btn-bg: var(--bs-white) !important;
  --bs-btn-border-color: var(--bs-border-color) !important;
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-gray-200);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-gray-200);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
}

/** 入力フォーム */
input:not(.no-style, [type=range], [type=checkbox]),
select:not(.no-style),
textarea:not(.no-style) {
  color: var(--text-primary);
  font-family: var(--font-family) !important;
  font-size: 100%;
  border: 1px solid var(--border-gray);
  background-color: var(--background-primary);
}

select:not([multiple]):not(.no-style) option {
  color: var(--text-primary);
}

input:not(.no-style, [type=range], [type=checkbox], [readonly]):focus,
select:not(.no-style, [readonly]):focus,
textarea:not(.no-style, [readonly]):focus,
input:not(.no-style, [type=range], [type=checkbox]).indicate-focus:not([readonly]):focus {
  border: 1px solid var(--color-blue);
  background-color: var(--hover) !important;
  box-shadow: 0 0 8px -4px var(--color-blue);
  outline: none;
}

input:not(.no-style, [type=range], [type=checkbox])[readonly],
textarea:not(.no-style)[readonly],
select:not(.no-style)[disabled] {
  border-color: var(--border-disabled);
  background-color: var(--background-disabled);
  box-shadow: none;
}

/** チェックボックス、ラジオボタンホバー時にマウスカーソル変更 */
input[type=radio]:hover,
input[type=checkbox]:hover,
input[type=radio]+label:hover,
input[type=checkbox]+label:hover {
  cursor: pointer;
}

/** チェックボックスがdisabledの場合に色をグレーに変更する */
input[type=checkbox].form-check-input:disabled {
  border-color: #bdbdbd;
  background-color: #e0e0e0;

  &:checked {
    border-color: #747474;
    background-color: #747474;
  }
}

/** 数値入力欄にスピン（数値上下ボタン）を表示しない */
input[type=number].no-spin::-webkit-outer-spin-button,
input[type=number].no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number].no-spin {
  -moz-appearance: textfield;
}

/** ドロップダウンメニュー幅調整 */
ul.dropdown-menu {
  min-width: 6rem;
}

/** カーソルをポインターに変更する */
.cursor-pointer:hover {
  cursor: pointer;
}

/** カーソルを変更しない */
.cursor-none:hover {
  cursor: none;
}

/** 45度回転させる */
.rotate45 {
  transform: rotate(45deg);
}

/** バッジにカーソルあてたときにテキスト選択可能にしない */
span.badge {
  cursor: default;
}

/** ドットインジケーター */
div.dot-indicator {
  margin: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-red);
  display: inline-flex;
}

div.dot-indicator::after {
  content: '';
  width: inherit;
  border: 1px solid var(--color-red);
  border-radius: 50%;
  background-color: transparent;
  animation: ripples 2s ease infinite;
}

@keyframes ripples {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(2);
    opacity: 0;
  }

  45% {
    transform: scale(2);
    opacity: 0;
  }

  50% {
    transform: scale(2);
    opacity: 0;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/** LightBoxの閉じるボタンを強調する */
svg.vel-icon {
  color: var(--color-gray);
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .8));
}

/** ラベル付き境界線 */
div.divider-dashed {
  margin-left: 2em;
  position: relative;

  &::before {
    content: '';
    width: calc(2em * .9);
    border-top: 1px dashed black;
    position: absolute;
    top: calc(1ch / .8);
    left: -2em;
  }

  &::after {
    content: '';
    width: 80%;
    border-top: 1px dashed black;
    position: absolute;
    top: calc(1ch / .8);
  }
}

/** 文字列をアンカーリンクのデザインにする */
.link-style-text {
  color: var(--text-link);
  text-decoration: underline;

  &:hover {
    color: var(--text-link-hover);
    cursor: pointer;
  }

  &:active {
    color: var(--text-link-active);
  }
}