@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: #02699c;
    --color-secondary: #6c757d;
    --color-success: #38c172;
    --color-info: #6cb2eb;
    --color-warning: #ffed4a;
    --color-danger: #e3342f;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-main: #163c52;
    --color-sub: #a6b1c0;
    --color-border: #D5E1F2;
    --color-content: #F2F4F7;
    --color-label: #d4d5d7;
    --color-btn:#f16363;
    --color-btn-cancel:#8a9191;
    --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;
}

.form-control::-webkit-input-placeholder{
    color: #cfcfcf;
    font-size: 0.9em;
}

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

#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 {
  background-color:var(--color-primary);
}

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

.navbar-brand {
  color:white;
}

.navbar-brand:hover {
  color:white;
}

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

.bg-menu {
  background-color:var(--color-main);
}

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

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

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

.btn-primary {
  color: #fff;
  background-color: var(--color-btn);
  border-color: var(--color-btn);
}

.btn-primary:hover {
  color: #fff;
  background-color: #eb4646;
}

.btn-primary:active {
  color: #fff;
  background-color: #eb4646 !important;
}

.btn-login {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-login:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-login:active {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary {
  color: #fff;
  background-color: var(--color-btn-cancel);
  border-color: var(--color-btn-cancel);
}

.btn-secondary:hover {
  color: #fff;
  background-color: var(#5e6363);
}


.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;
}

.transform-lotate-0 {
  transform: rotate(0);
}

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

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

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

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

.col-form-label {
  padding-right: 7px;
  padding-left: 7px;
  background-color: var(--color-label);
}

.form-control {
  border-radius: 0;
}

.form-select {
  border-radius: 0;
}

.input-group-text {
  background-color: var(--color-label);
}

.fs-7 {
  font-size: 14px;
}

.caution-area {
  position: relative;
  padding-left: 1.5em;           /* ※ の幅分だけ余白を作る */
}

.caution-area::before {
  content: "※ ";
  position: absolute;
  left: 0;
}

.message-area {
  max-width: 800px;
}

/* bootstrap上書き */
.table-dark{
  --bs-table-bg: var(--color-primary);
  --bs-table-border-color: #FFF;
}

/* モバイル向けのスタイル */
/* 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;
  }
}

/* スマホ向けのスタイル */
/* 576以下 */
@media (max-width: 576px) {
  .input-group-responsive {
    flex-direction: column;
    align-items: stretch;
  }
  .input-group-responsive .form-control {
      width: 100%;
      flex: 1 0 auto;
  }
  .input-group-responsive .input-group-text {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}