@charset "UTF-8";

html{
  margin : 0;
  padding : 0;
  width : 100%;
  height : 100%;
}
body{
  font-size : 13px;
  font-family : "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  line-height : 1.7;
  letter-spacing : 1px;
  margin : 0;
  padding : 15px 15px 80px;
  -webkit-text-size-adjust : 100%;
}
div.center{
  max-width : 700px;
  margin : 0 auto;
}
div.title{
  position : fixed;
  right : 0;
  margin : auto;
  padding : 0 15px;
  z-index : 3;
  background-color : white;
  width : 200px;
  height : 20px;
  border-bottom : 1px dotted gray;
}
div.page{
  margin : 80px auto 0;
  max-width : 700px;
  text-align : center;
}
h1{
  font-size : 48px;
  font-family : "游明朝",serif;
  font-weight : normal;
  margin-top : 20px;
  margin-bottom : 30px;
  border-bottom : 2px solid black;
}
h2{
  font-size : 16px;
  font-weight : normal;
  color : gray;
  margin-top : 50px;
  margin-bottom : 30px;
  border-top : 1px dotted gray;
}
h1.sub{
  color : silver;
  border-bottom : 2px solid silver;
}
br{
  letter-spacing : normal;
}
a{
  color : gray;
}
a:hover{
  top : 1px;
  left : 1px;
  position : relative;
}
img{
  margin-bottom : 30px;
}
a.select{
  color : teal;
  font-size : 32px;
  text-decoration : none;
  -webkit-transition: 1.0s;
  -moz-transition: 1.0s;
  -o-transition: 1.0s;
  transition : 1.0s;
}
a:hover.select{
  color : red;
  font-size : 48px;
}
ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li ul{
  margin-top: .5em;
  margin-bottom: .75em;
  margin-left: 48px;
}
ul li ul li{
  margin-bottom: .25em;
  position: relative;
}
ul li ul li::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: -16px;
  width: 10px;
  height: calc(100% + .75em);
  border-left: 1px solid black;
}
ul li ul li:last-child::before {
  height: calc(1em + .25em);
}
ul li ul li::after {
  content: "";
  position: absolute;
  top: .75em;
  left: -16px;
  width: 10px;
  border-bottom: 1px solid black;
}

@media screen and (max-width: 640px) {
    h1{
      font-size : 32px;
    }
}
@media screen and (max-width: 750px) {
    img{
      max-width : 100%;
      height : auto;
    }
}
@media screen and (max-width: 1024px) {
    a:hover{
      position : static;
    }
}