@charset "UTF-8";

html{
  height : 100%;
}
body{
  margin : 0;
  -webkit-text-size-adjust : 100%;
  -webkit-animation : fadeIn 2s ease 0s 1 normal;
  -moz-animation : fadeIn 2s ease 0s 1 normal;
  -o-animation : fadeIn 2s ease 0s 1 normal;
  animation : fadeIn 2s ease 0s 1 normal;
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-moz-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-o-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
body.topf{
  font-size : 16px;
  font-family : Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  line-height : 1.5;
  color : white;
  height : 100%;
  overflow : hidden;
}
div.top{
  position : fixed;
  left : 0;
  right : 0;
  margin : auto;
  z-index : 3;
  background-image : url(back.gif);
  background-repeat : no-repeat;
  background-position : center center;
  background-color : black;
  width : 97%;
  height : 80px;
  filter:alpha(opacity=70);
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  -o-opacity: 0.7;
  opacity: 0.7;
}
div.title{
  position : absolute;
  top : 0;
  left : 40px;
  bottom : 0;
  margin : auto;
  z-index : 4;
  height : 24px;
}
div.frame{
  width : 100%;
  height : 100%;
  overflow : auto;
  -webkit-overflow-scrolling : touch;
}
iframe{
  width : 100%;
  height : 100%;
  border : 0;
  display : block;
}
span.original{
  display : inline-block;
  padding-left : 3px;
  margin-right : 30px;
  border-left : 5px solid gray;
  font-weight : bold;
}
span.space{
  display : inline-block;
  margin : 0 4px;
}
a{
  text-decoration : none;
  border-bottom : 1px dotted;
  -webkit-transition: 1.0s;
  -moz-transition: 1.0s;
  -o-transition: 1.0s;
  transition : 1.0s;
}
.topf a{
  display : inline-block;
  padding : 0 4px;
  margin : 0 4px;
  color : #e0e0e0;
}
/*iframe内のページ*/
body.topt{
  font-size : 13px;
  font-family : "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  line-height : 1.5;
  letter-spacing : 1px;
  padding : 110px 15px 15px 80px;
  background-size : 700px auto;
  background-repeat : no-repeat;
  background-attachment : fixed;
  background-position : right center;
}
span.mini{
  font-size : 11px;
}
.topt a{
  color : gray;
}
a:hover{
  color : black;
  background-color : #e0e0e0;
  -webkit-border-radius : 5px;
  -moz-border-radius : 5px;
  -o-border-radius : 5px;
  border-radius : 5px;
}

@media screen and (max-width: 640px) {
    img {
      max-width: 100%;
      height: auto;
    }
    div.top{
    width : 100%;
    }
    div.title{
      left : 0;
      right : 0;
      padding : 0 5px;
      width : 310px;
      height : 48px;
    }
    span.original{
      margin-right : 0;
    }
    span.short{
      display : none;
    }
    body.topt{
      background-size : 100% auto;
    }
}