@charset "utf-8";

body{
  overflow: hidden;
  background: url(../img/loading.gif) no-repeat center center fixed #000;
}
a{
  color: #fff;
  text-decoration: none;
}

#slider{
  position: relative;
  visibility: hidden;
  overflow: hidden;
}
#slider ul{
  position: absolute;
  top: 0;
  left: 0;
}
#slider li{
  float: left;
}
#slider .layer{
  background: #111;
  opacity: .8;
}

#slider #prev,
#slider #next{
  position: absolute;
  top: 50%;
  margin-top: -21px;
  width: 36px;
  height: 42px;
}
#slider #prev{
  left: 20px;
  background: url(../images/prev.png) no-repeat 0 0;
}
#slider #next{
  right: 20px;
  background: url(../images/next.png) no-repeat 0 0;
}

h1{
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 10;
}
h1 img{
  width: 100%;
}

#social{
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 10;
}
#profile{
	padding-top:10px;
	font-size:116%;
	font-family: "HelveticaNeue","Helvetica Neue","Helvetica Neue Light",Helvetica,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
	color:#444;
	text-align:right;
}
#social li{
  float: left;
  margin-right: 10px;
}
#social li:last-child{
  margin-right: 0;
}
#controller{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10;
}
#controller p,
#controller ul{
  float: left;
}
#controller p{
  background: #48e22a;
  border-radius: 1px;
  padding: 0 10px;
  margin-right: 10px;
}
#controller li{
  float: left;
}
#controller a.active{
  color: #48e22a;
}

@media screen and (max-width: 568px){

  h1{
    width: 190px;
  }

  #controller{
    right: 10px;
    top: 10px;
  }
  #controller p,
  #controller ul{
    float: none;
  }
  #controller p{
    margin-right: 0;
    margin-bottom: 5px;
  }

  #slider #prev{
    background-size: 50% 50%;
    background-position: left center;
  }
  #slider #next{
    background-size: 50% 50%;
    background-position: right center;
  }

}