html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* body も html も高さ固定＋ページ全体はスクロールさせない */
html,
body {
  height: 100%;
  margin: 0;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: "Noto Sans JP", Arial, sans-serif;
  background-color: var(--thema-color-background-ivory);
  color: var(--thema-color-text);
}

/* 中身(main)だけ縦スクロールOKにする */
main {
  flex: 1 1 auto;
  overflow: hidden;
  background-color: var(--thema-color-background-ivory);
}

header,
footer {
  flex-shrink: 0;
}

.container {
  flex: 1;
  max-width: 90vw;
}

.required::after {
  color: red;
}

/* デフォルトがmin-height:100vh 中身でかすぎてこまるのでグローバルに設定します */
.v-application__wrap {
  min-height: auto !important;
  height: 100%;
}

.navbar {
  background-color: var(--thema-color);
  height: 100%;
}

.navbar a.navbar-brand,
.navbar .navbar-nav a.nav-link,
.navbar a.nav-link {
  color: #ffffff;
}

.commit-btn,
.submit-btn,
.v-btn.commit-btn,
.v-btn.submit-btn {
  background-color: var(--thema-color);
  color: #ffffff;
  box-shadow: 4px 2px 4px rgb(0 0 0 / 10%);
}

.delete-btn,
.v-btn.delete-btn {
  background-color: var(--thema-color-warning-light);
  color: var(--thema-color-warning);
  border: solid 1px var(--thema-color-warning);
  box-shadow: 4px 2px 4px rgb(0 0 0 / 10%);
}


button.logout-btn,
.cancel-btn,
.v-btn.cancel-btn {
  color: var(--thema-color);
  border: none;
  box-shadow: none;
}

.v-btn.add-btn {
  border: 1px solid var(--thema-color);
  color: var(--thema-color);
  border-radius: 20px;
  background-color: var(--thema-color-light-yellowgreen);
  box-shadow: 4px 2px 4px rgb(0 0 0 / 10%);
}


.button.logout-btn {
  font-weight: bold;
}