* {
  box-sizing: border-box;
}

html, body, header, main, footer, nav, article, div, h1, h2, h3, img, p,
pre, table, td, th, tr {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0.25em 0;
  color: navy;
}

li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

p {
  margin: 1em 0;
  line-height: 1.25em;
}

h1 {
  margin-bottom: 0.5em;
}

main {
  flex-grow: 1;
  margin: 1em 0.5em;
}

nav {
  color: navy;
  font-size: 1em;
  text-align: center;
  font-family: Verdana, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: underline;
}

q {
  color: navy;
}

h1 {
  font-family: Verdana, sans-serif;
}

.div_container {
  display: flex;
  flex-direction: column;
  font-family: Georgia, serif;
  font-size: 1em;
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
}

.div_image {
  text-align: center;
}

.span_title {
  font-family: Verdana, sans-serif;
  color: navy;
}

.span_menu_not_link {
  text-decoration: underline;
}

.p_float {
  margin: 1em 2em;
}

.p_mtime {
  text-align: right;
  color: #404040;
}

.p_article_list {
  margin-bottom: 1em;
  color: #404040;
}

.p_last {
  margin-bottom: 2.5em;
}

.li_link{
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.li_last {
  margin-bottom: 2.5em;
}

.a_dotted{
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.pre_highlight {
  margin: 1em 0;
  overflow-x: auto;
  background-color: #dddddd;
  padding: 1em 1em;
  border-radius: 10px;
  color: #000030;
}

.pre_last {
  margin-bottom: 2.5em;
}

.code_button {
  background-color: #e0e0e0;
  padding: 0.1em 0.5em;
  border-radius: 5px;
  color: navy;
}

.code_button_reversed {
  background-color: navy;
  color: #e0e0e0;
  padding: 0.1em 0.5em;
  border-radius: 5px;
}

.code_datetime {
  color: #404040;
}

#header_title {
  font-family: Verdana, sans-serif;
  text-align: center;
  color: navy;
  font-size: 2em;
}

#footer_footer {
  color: navy;
  font-size: 1em;
  text-align: center;
  font-family: Verdana, sans-serif;
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .div_container {
    width: 100%;
    font-size: 1.25em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .div_container {
    width: 100%;
    font-size: 1.5em;
  }
}

@media screen and (min-width: 1024px) {
  .div_container {
    width: 1024px;
    font-size: 1.75em;
  }
}