@charset "UTF-8";
@media screen and (min-width: 568px) {
body{
  width : 100%;
  height : inherit;
  background-image : url(pic/background2.jpg);
  background-repeat : no-repeat;
  background-size : cover;
}
#header{
  width : 50%;
  height : auto;
  float : left;
}
#header img{
  width : 80%;
  height : auto;
}
#nav{
  width : 30%;
  height : auto;
  float : right;
  text-align : right;
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 2%;
  margin-bottom : 0px;
}
#nav img{
  width : 45%;
  height : auto;
}
#nav a{
  margin-top : 0;
  margin-bottom : 0;
}
h1{
  text-indent : -9999px;
  width : 50%;
}
#footer{
  width : 100%;
  height : autot;
  margin-top : 2%;
  padding-top : 1%;
  padding-bottom : 2%;
  background-color : black;
  margin-left : 0%;
  left : 0px;
  bottom : 0px;
  float : left;
  text-align : center;
}
#footer p{
  color : white;
  margin-bottom : 1%;
}
.sp{
  display : none;
}
}
@media screen and (max-width: 567px) {
body{
  background-color:#000000;
  background-image : url(sp/abg.png);
  background-repeat : no-repeat;
  background-size : cover;
  background-attachment: fixed;
  background-position: center -35px;
}
h1{
  text-indent : -9999px;
  width : 50%;
}
#nav{
  width : 44%;
  height : auto;
  float : right;
  text-align : right;
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 5%;
  margin-bottom : 0px;
}
#nav img{
  width : 100%;
  height : auto;
}
#nav a{
  margin-top : 0;
  margin-bottom : 0;
}
h1{
  text-indent : -9999px;
}
#footer{
  width : 100%;
  height : auto;
  margin-top : 2%;
  padding-top : 1%;
  padding-bottom : 2%;
  background-color : black;
  margin-left : 0%;
  left : 0px;
  bottom : 0px;
  float : left;
  text-align : center;
}
#footer p{
  color : white;
  margin-bottom : 2%;
}
.pc{
  display : none;
}
}