@import url(reset.css);

html {
  font-family: 'Amiri', 'Sawarabi Mincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', Meiryo, 'メイリオ', serif;
  font-size: 62.5%;
  color: #888;
}
body {
  font-size: 1.6rem;
  line-height: 2.2;
  padding: 0 40px;
  letter-spacing: 1px;
  color: #444;

}
h1 {
  width: 300px;
  height: 250px;
  font-size: 3.0rem;
  line-height: 1.6;
  margin: 0  auto 20px;
  background: url(./img/botan03.png) no-repeat 20% 50%;
  background-size: 200px auto;
}
h1 span {
  color: #333;
  display: inline-block;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
          text-align: right;
}
h2 {
  font-size: 1.8rem;
  margin: 0 0 30px;
  text-align: justify;
}
h3 {
  margin: 30px 0 0;
  color: #e35453;
}
main {
  max-width: 800px;
  height: auto;
  min-height: 100vh;
  margin: 0 auto;
  padding: 80px 30px;
  text-align: center;
  outline: solid 5px #fff;
  background: #fff;
}
main.top { max-width: 650px; }
main a { color: #e35453; }
nav {
  margin: 50px 0;
  text-align: justify;
}
nav li {
  display: block;
  margin: 10px 0 10px 1em;
}
nav li a:hover { color: #e35453; }
nav li a {
  padding: 10px 0;
  color: #333;
}
article {
  text-align: justify;
  background-size: 40px 40px;
}
p {
  font-size: 1.4rem;
  line-height: 1.8;
  margin: 50px 0;
  text-align: justify;
  color: #aaa;
}
.right { text-align: right; }

@media (max-width:800px) {
  body { font-size: 1.6rem; }
  main { padding: 80px 60px; }
}

@media (max-width:550px) {
  body { font-size: 1.5rem; }
  main { width: 100%; padding: 80px 10px; }
  main.top { max-width: 100%; }
  nav li { margin: 10px 0 10px; }
}