body { color: black; font-size: 14px; line-height: 22px; background-color: white; letter-spacing: 1px; margin: 0; }
.top { background-image: url(images/top.jpg); background-repeat: no-repeat; background-position: center top; }
.taidan { background-image: url(images/base.jpg); background-repeat: repeat-y; background-attachment: scroll; background-position: center top; }
.date { font-size: 10px; line-height: 16px; background-image: url(images/date_back.jpg); background-repeat: no-repeat; background-position: center; }
.small { font-size: 12px; line-height: 20px; }
a:link { color: #ff7a00; text-decoration: none; }
a:hover { color: #ffd100; text-decoration: none; }
a:visited { color: #ca4c00; text-decoration: none; }
.copy { font-size: 10px; line-height: 16px; }
.ruby { color: #ff2965; font-size: 18px; font-weight: bold; }
.sapphire { color: #2b3bfd; font-size: 18px; font-weight: bold; }
.turquoise { color: #20a29d; font-size: 18px; font-weight: bold; }
.emerald { color: #0caf38; font-size: 18px; font-weight: bold; }
.lapis { color: #005eff; font-size: 18px; font-weight: bold; }
.opal { color: #533eff; font-size: 18px; font-weight: bold; }
.amethyst { color: #cd396a; font-size: 18px; font-weight: bold; }
.topaz { color: #af6342; font-size: 18px; font-weight: bold; }
.amber { color: #db7700; font-size: 18px; font-weight: bold; }
.garnet { color: #bd0000; font-size: 18px; font-weight: bold; }
.diamond { color: #9f8e81; font-size: 18px; font-weight: bold; }
@media screen and (max-width: 640px) {
  img {
    max-width: 100%;
    height: auto;
  }
  hr {
    width: 300px;
  }
  .taidan td {
    display: block;
    width: 100%;
  }
  tr.prof {
    display: flex;
  }
  tr {
    height: auto;
  }
  .top {
    background-size: contain;
    width: 100vw;
    height: calc(493 / 809 * 100vw);
  }
  table.navi td {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  table.main td:first-of-type {
    font-weight: bold;
  }
}