.navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}
body { padding-top: 60px; }
td.image img {
    width: 250px;  /* 横幅を200pxに */
}
td.b{
  color:#000000;
}
th.b{
  color:#000000;
}
div.b{
  color:#000000;
}
button {
    background:none;
    border:0;
}
details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: none;
}
/* default mode -> light */
body {
  color: #000;
  background-color: #fff;
  transition-duration: 1s;
  transition-property: color, background-color;
}
.msg {
  font-size: 1px;
  font-weight: bold;
}
.light {
  display: blcok;
}
.dark {
  display: none;
}

/* for light mode */
.js-mode-dark {
  color: #E8E8E8;
  background-color: #414039;
}
.js-mode-dark .dark {
  display: block;
}
.js-mode-dark .light {
  display: none;
}

/* for checkbox */
input[type="checkbox"] {
  /* display: none; */
}
.switch {
  position: fixed;
  top: -4.6em;
  right: -4.6em;
  font-size: 30px;
}
.switch-label {
  cursor: pointer;
}
.switch-mode {
  position: absolute;
  top: -10px;
  right: -10px;
  display: block;
  width: 200px;
  height: 200px;
  transform: rotate(0);
  transition: transform 1s;
}
.switch-mode::before {
  content: "🌞";
  position: absolute;
  left: 0;
  bottom: 0;
}
.switch-mode::after {
  content: "🌙";
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(-1,-1);
}