/* application.css */

* {
  font-family:"Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight:normal;
  box-sizing:border-box;
}
code { font-family:monospace,sans-serif; }

body {
  line-height:1.4;
  margin:0;
  width:100%;
  height:100%;
}

ul, ol { padding-inline-start:1rem; }
ul p, ol p { text-indent:0; margin:0; }
h1, h2, h3, h4, h5, h6 { font-weight:bold; display:block; }
h5, h6 { font-size:1rem; }

/* header */
header {
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  align-items:baseline;
  padding:0.5rem;
  height:auto;
  background-color:#fdfdfd;
  border-bottom:1px solid #c0c0c0;
}
header h1 { font-size:2rem; margin:0; }
header h1 a { font-weight:bold; }
header h1 a:hover { background-color:inherit; }
header a {
  text-decoration:none;
  white-space:pre;
  color:#000;
}
header a:hover { background-color:#ffffaa; }
header nav ul {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}
header nav ul li { display:block; padding:8px; }
header nav ul li:first-child { padding-left:0; }

/* main */
main {
  max-width:980px;
  margin:auto;
}

main section {
  display:block;
  padding:0.5rem;
  margin-bottom:2rem;
}

main a { text-decoration:none; color:#1050c0; }
main a:hover { text-decoration:underline; }
main a:visited { color:#4a148c; }
main h1,
main h2,
main h3,
main h4,
main h5,
main h6
main p,
main pre,
main img,
main iframe {
  margin-bottom:1rem;
}
main p { text-indent:1rem; }
main th { border-bottom:2px solid #c0c0c0; margin-bottom:2px; }
main dt {
  padding:0.4em 0;
  font-weight:bold;
  margin-top:0.5rem;
  border-bottom:2px solid #c0c0c0;
}
main dd {
  margin-left:2rem;
  padding:0.5rem;
  border-left:2px solid #c0c0c0;
}
main li {
  margin-left:2rem;
  padding:0.25rem;
}
main div.col2 {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* footer */
footer {
  height:3rem;
  padding:1em 0;
  border-top:2px solid #c0c0c0;
  text-align:center;
}
footer p {
  padding:0;
  margin:0;
}

@media screen and (min-width:768px) {
  body { min-height:100vh; }
  header { flex-direction:row; }
  main div.col2 { flex-direction:row; }
  main div.col2 > * {
    width:100%;
    padding-left:2rem;
    padding-right:2rem;
  }
}