@charset "UTF-8";

#wrapper{
  /* width:600px; */
  margin:30px auto 0;
  /* height:400px; */
  position:relative;
  color:#fff;
  text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;
}

#slider-wrap{
  width: 100%;
  height:100%;
  position:relative;
  overflow:hidden;
}

#slider-wrap ul#slider{
  width:100%;
  height:100%;

  position:absolute;
  top:0;
  left:0;
}

#slider-wrap ul#slider li{
  float:left;
  position:relative;
  /* width:600px; */
  /* height:400px; */
  height: 100%;
}

#slider-wrap ul#slider li > div{
  position:absolute;
  top:20px;
  left:35px;
}

#slider-wrap ul#slider li > div h3{
  font-size:36px;
  text-transform:uppercase;
}

#slider-wrap ul#slider li > div span{
  font-family: Neucha, Arial, sans serif;
  font-size:21px;
}


#slider-wrap ul#slider .slider_sns{
  background: url(../img/sns_icon.png) no-repeat center;
  background-size: cover;
  color: rgb(0,0,0);
}

#slider-wrap ul#slider .slider_edit-mv{
  background: url(../img/douga_icon.png) no-repeat center;
  background-size: cover;
}

#slider-wrap ul#slider .slider_web{
  background: url(../img/web_icon.png) no-repeat center;
  background-size: cover;
}

/*btns*/
.btns{
  position:absolute;
  width:50px;
  height:60px;
  top:50%;
  margin-top:-25px;
  line-height:57px;
  text-align:center;
  cursor:pointer;
  background:rgba(0,0,0,0.1);
  z-index:100;


  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;

  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.btns:hover{
  background:rgba(0,0,0,0.3);
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
  top: 30px;
  right:35px;
  width:auto;
  position:absolute;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}


/*bar*/
#pagination-wrap{
  min-width:20px;
  margin-left: auto;
  margin-right: auto;
  height:15px;
  position:relative;
  text-align:center;
}

#pagination-wrap ul {
  width:100%;
}

#pagination-wrap ul li{
  margin: 0 4px;
  display: inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background: rgb(0,0,200);
  opacity:0.5;
  position:relative;
  top:0;


}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
  opacity:1;
  box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;
}

@media screen and (max-width: 600px){
  #slider-wrap ul#slider li > div h3{
    font-size:24px;
    text-transform:uppercase;
  }
}