:root {
  /* --bs-body-color: #212529; */
  /* --bs-body-color-rgb: 33,37,41; */
  /* --bs-body-bg: #eee; */
  /* --bs-body-bg-rgb: 238,238,238; */

  --main--bg-opacity: 0.5;
}
[data-bs-theme=dark] {
  /* --bs-body-color: #adb5bd; */
  /* --bs-body-color-rgb: 173,181,189; */
  /* --bs-body-bg: #212529; */
  /* --bs-body-bg-rgb: 33,37,41; */

  --main--bg-opacity: 0.1;
}

body {
  background-color: #eee;
}
[data-bs-theme=dark] body {
  background-color: var(--bs-body-bg);
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
// Vue
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

[v-cloak] {
  display: none;
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
// Bootstrap 既定スタイルの上書き
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

.table {
  --bs-table-border-color: var(--bs-border-color-translucent);
}
[data-bs-theme=dark] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
}

.table th {
  background-color: rgb(0, 0, 0, .1);
  text-align: center;
}
[data-bs-theme=dark] .table th {
  background-color: rgb(255, 255, 255, .1);
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
// レイアウト
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

.layout {
  min-height: 100vh;
  /* max-width: 1320px; */
  margin: 0 auto;
  display: grid;
  grid-template:
    "header" min-content
    "main  "
    / 1fr;
}
.layout--header {
  grid-area: header;
}
.layout--main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
// ヘッダー
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

.header {
  padding: 4px 16px;
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
// メイン
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/

.main {
  /* max-width: 1080px; */
  height: 100%;
  padding: 16px;
  background-color: rgb(255, 255, 255, var(--main--bg-opacity));
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
@media (min-width: 992px) {
  .main {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    /* border-radius: 8px 0 0 0; */
  }
}

.main h1 {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.main h2 {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}