:root {
  --basic-margin: 20px;
  --small-margin: 10px;
  --large-margin: 30px;
  --work-margin: 20px;
  --header-height: 50px;
  --footer-height: 40px;
  --content-max-width: 700px;
  --white: #FFF;
  --gray: #666;
  --dark-gray: #333;
  --blue: #036;
  --headline-fsize: 1.2em;
  --subheadline-fsize: 1.1em;
  --text-fsize: 1.0em;
  --captipn-fsize: 0.8em;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: Avenir, 'Helvetica neue', Helvetica, sans-serif;
  color: var(--dark-gray);
  padding-top: var(--header-height);
  margin-bottom: calc(var(--footer-height) + var(--basic-margin));
}

h1 {
  font-size: var(--headline-fsize);
  font-weight: lighter;
  color: var(--blue);
  margin-top: var(--basic-margin);
}

h2 {
  font-size: var(--subheadline-fsize);
  font-weight: lighter;
  color: var(--blue);
  margin-top: var(--basic-margin);
}

h3 {
  font-size: var(--text-fsize);
  font-weight: lighter;
  color: var(--blue);
  margin-top: var(--small-margin);
}

img {
  width: 100%;
}

.container {
  max-width: var(--content-max-width);
}

.table {
  word-break: break-all;
  word-wrap: break-word;
}

.basic-contents {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
  /* padding-bottom: var(--large-margin); */
}

.basic-table {
  width: 100%;
}

.basic-work {
  padding-top: var(--work-margin);
  padding-bottom: var(--work-margin);
}

.basic-text {
  font-size: var(--text-fsize);
  color: var(--dark-gray);
}

.bold-text {
  font-weight: bolder;
}

.light-text {
  font-weight: lighter;
}

.blue-text {
  color: var(--blue);
}

.table-key-text {
  word-break: keep-all;
  word-wrap: normal;
}

.caption {
  font-size: var(--captipn-fsize);
  color: var(--gray);
}

.footer {
  text-align: center;
  font-size: var(--text-fsize);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
  line-height: var(--footer-height);
  background-color: var(--white);
}