.w-full { width: 100%; }

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-no-wrap { flex-direction: column; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.justify-start { justify-content: start; }
.justify-center { justify-content: center; }

.content-start {
    align-content: start;
    align-items: start;
    -webkit-align-content: start;
    -ms-flex-line-pack: start;
    align-content: start;
}

.content-center {
    align-content: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-16 { margin: 4rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-10 { margin-left: 2.5rem; }
.ml-12 { margin-left: 3rem; }
.ml-16 { margin-left: 4rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2.5rem; }
.mr-12 { margin-right: 3rem; }
.mr-16 { margin-right: 4rem; }

.font-100 { font-weight: 100; } /* hairline */
.font-200 { font-weight: 200; } /* thin */
.font-300 { font-weight: 300; } /* light */
.font-400 { font-weight: 400; } /* normal */
.font-500 { font-weight: 500; } /* medium */
.font-600 { font-weight: 600; } /* semibold */
.font-700 { font-weight: 700; } /* bold */
.font-800 { font-weight: 800; } /* extrabold */
.font-900 { font-weight: 900; } /* black */

.size-1 { font-size: 1.1em; }
.size-2 { font-size: 1.2em; }
.size-3 { font-size: 1.3em; }
.size-4 { font-size: 1.4em; }
.size-5 { font-size: 1.5em; }
.size-6 { font-size: 1.6em; }
.size-7 { font-size: 1.7em; }
.size-8 { font-size: 1.8em; }
.size-9 { font-size: 1.9em; }
.size-x { font-size: 2.0em; }

.bold { font-weight: bold; }
.bold-0 { font-weight: bold; }
.bold-1 { font-weight: bold; font-size: 1.1em; }
.bold-2 { font-weight: bold; font-size: 1.2em; }
.bold-3 { font-weight: bold; font-size: 1.3em; }
.bold-4 { font-weight: bold; font-size: 1.4em; }
.bold-5 { font-weight: bold; font-size: 1.5em; }
.bold-6 { font-weight: bold; font-size: 1.6em; }
.bold-7 { font-weight: bold; font-size: 1.7em; }
.bold-8 { font-weight: bold; font-size: 1.8em; }
.bold-9 { font-weight: bold; font-size: 1.9em; }
.bold-x { font-weight: bold; font-size: 2.0em; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.underline-black {
  border-bottom: 2px solid #272727;
  padding-bottom: 0.1em;
}

.underline-red {
  border-bottom: 2px solid #ed1b1b;
  padding-bottom: 0.1em;
}

body {
  font-family: -apple-system, Helvetica, "Segoe UI", "YuGothic", "Yu Gothic Medium", Meiryo, "MS PGothic", sans-serif;
  line-height: 1.46;
  color: #4e4e4e;
}

li {
  margin-bottom: 0.4em;
}

a, a:link, a:visited {
  color: #0030ff;
  text-decoration: none;
}

a:hover, a:active {
  color: #ff0022;
  text-decoration: underline;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 0.95em;
  margin: 0 0.1rem;
  padding: 0.1rem 0.2rem;
  background-color: #ededed;
}

#container { width: 100%; }

main, header, footer {
    margin: 0 auto;
    width: 84%;
    min-width: 480px;
    max-width: 720px;
}