@charset "UTF-8";

html{
  height : 100%;
}
body{
  font-size : 16px;
  font-family : "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  line-height : 1.5;
  margin : 0;
  padding : 100px 0 50px;
  -webkit-text-size-adjust : 100%;
  overflow-y : scroll;
}
img{
  border : 0;
  max-width : 100%;
  height : auto;
}
div#nav{
  text-align : center;
  position : fixed;
  top : 0;
  z-index : 3;
  width : 100%;
}
ul{
  background-color : white;
  text-align : center;
  margin : 20px 0 30px;
  padding : 0;
  border-top : 1px dotted gray;
  border-bottom : 1px dotted gray;
  filter:alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  opacity: 0.8;
}
li{
  display : inline-block;
  margin : 10px;
  padding-left : 10px;
  position : relative;
}
li::before{
  content : "";
  display : inline-block;
  position : absolute;
  top : 45%;
  left : 0;
  width : 0;
  height : 0;
  margin-top : -5px;
  border : 5px solid transparent;
  border-left-color : #000000;
}
div.white{
  background-color : white;
  filter:alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  opacity: 0.8;
  animation : anima 1s ease 0s 1 normal;
}
@keyframes anima {
  0% {
  padding-top: 50px}
100% {
  padding-top: 0}
}
span#title{
  font-size : 18px;
}
span.mini{
  font-size : 13px;
}
div.note{
  font-size : 13px;
  line-height : 1.7;
  letter-spacing : 1px;
  margin : 0 10px;
}
h2{
  font-weight : normal;
  border-bottom : 1px solid black;
  max-width : 630px;
  margin : 20px auto;
}
h3{
  font-weight : normal;
  border-top : 1px dotted black;
  max-width : 630px;
  margin : 20px auto;
}
p.note2{
  max-width : 630px;
  margin : 16px auto;
}
p.center{
  text-align : center;
}
a{
  position: relative;
  color : black;
  text-decoration : none;
}
a::after{
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000000;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}
a:hover::after{
  transform: scale(1, 1);
}
a.gray{
  color : gray;
}

@media screen and (max-width: 640px) {
    body{  
    padding : 150px 0 50px;
    }
}