/* Reset */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article, header, footer, aside, figure, figcaption, nav, section {
  display:block;
}

body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}


/* Common */
html {
  font-size: 62.5%;
}

body {
  font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  background: #000;
  line-height: 1.4;
  font-weight: normal;
  background: url('../img/bg01.jpg') no-repeat center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

a {
  text-decoration: none;
}

#container {
  width: 96%;
  margin: 0 auto;
  position: relative;
}

#top {
  padding: 30px 0;
}

h1 {
  text-align: left;
  font-size: 3.4rem;
  color: #555;
  font-weight: bold;
}

h1 + p {
  text-align: left;
  font-size: 1.3rem;
  color: #555;
}

#main {
  width: 45%;
  margin-bottom: 20px;
}

h2 {
  font-size: 2.2rem;
  font-weight: bold;
  color: #555;
  padding: 0 0 10px;
  border-bottom: 1px solid #555;
}

#text {
  padding: 10px 0;
  margin: 0 auto;
  min-height: 50vh;
}

#text p {
  font-size: 1.5rem;
  color: #000;
  line-height: 1.7;
}

#text p:first-of-type {
  min-height: 40vh;
}

#text p.link {
  border-top: 1px solid #000;
  font-size: 1.3rem;
  padding: 10px 0 0;
  margin: 10px 0 0;
}

#text p.link a {
  color: #ad314c;
}

#text p a:hover {
  opacity: .5;
}

#nav {
  width: 45%;
  font-size: 1.5rem;
}

#nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 10px 0;
}

#nav ul li {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 20%;
  flex: 1 0 20%;
  font-size: 1.1rem;
  margin: 0;
  padding: 10px 10px;
}

#nav ul li:last-of-type {
  border: none;
}

#nav ul li a {
  color: #555;
  font-weight: bold;
}

#nav ul li a:hover {
  opacity: .5;
}

#footer {
  width: 45%;
  padding: 20px 0;
  font-size: 1.2rem;
  color: #000;
  text-align: center;
}