@charset "UTF-8";

:root {
    --color-blue: #3490dc;
    --color-indigo: #6574cd;
    --color-purple: #9561e2;
    --color-pink: #f66d9b;
    --color-red: #e3342f;
    --color-orange: #f6993f;
    --color-yellow: #ffed4a;
    --color-green: #38c172;
    --color-teal: #4dc0b5;
    --color-cyan: #6cb2eb;
    --color-white: #fff;
    --color-gray: #6c757d;
    --color-gray-dark: #343a40;
    --color-primary: #3490dc;
    --color-secondary: #6c757d;
    --color-success: #38c172;
    --color-info: #6cb2eb;
    --color-warning: #ffed4a;
    --color-danger: #e3342f;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-main: #333;
    --color-sub: #a6b1c0;
    --color-border: #D5E1F2;
    --color-content: #F2F4F7;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Nunito", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
  color:var(--color-main);
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

#menu{
  background-color:var(--color-main);
  width:280px;
}


#footer{
  background-color:#AAAAAA;
}

#contents{
  background-color:whitesmoke;
}

.explanatory-text {
  background-color: white;
  border: 1px solid lightgrey;
}

.display-date,.display-datetime {
  display:none;
}

.sidebar {
  width: 14rem!important;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.content{
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.bg-menu {
  background-color: #333
}

.bg-error {
  background-color: #d18390
}

.bg-body {
  background-color:#f8fafc;
}

.bg-whitesmoke {
  background-color:whitesmoke;
}

.btn-primary {
  color: #fff;
  background-color: #3490dc;
  border-color: #3490dc;
}


.bg-opacity-90 {
  --bs-bg-opacity: .90
}

.main-font-color {
  color: var(--color-b);
}

.min-vw-25 {
  min-width: 25vw;
}

.min-vw-50 {
  min-width: 50vw;
}

.flush_success {
  background-color: #5982ab;
}

.login-container{
  max-width:60em;
  border:1px solid lightgrey;
}

.border-login{
  border:solid 1px lightgrey;
}

.login-logo{
  max-width:200px;
}

/* bootstrap上書き */
.table-dark{
  --bs-table-bg: var(--color-main)
}

.nav-pills .nav-link.active{
  background-color: #4c5057;
}

/* モバイル向けのスタイル */
/* 768px 未満 */
@media not screen and (min-width: 768px) {
  #menu{
    width:auto;
  }

  .offcanvas-md{
    --bs-offcanvas-width: 280px;
  }

  .content{
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .flex-item-border{
    margin-bottom: -1px;
  }
}

/* デスクトップ向けのスタイル */
/* 768px 以上 */
@media screen and (min-width: 768px) {
  .navbar-toggler{
    display:none;
  }
  .flex-item-border{
    margin-right: -1px;
  }
}