@charset "utf-8";

/*----------------------------*/
/*main-img*/

.mv_bg{
    /*position: relative;*/
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-2;
    width:100%;
    min-height:100vh;
  }

.bg01{
    background:url("../img/mv_bg.jpg") bottom no-repeat;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#main_copy_bg{
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  z-index:2;
  }
  
/*矢印を作成する*/

.scroll a{
  position: absolute;
  bottom: 12%;
  left: 49%;
  z-index:5;
}

.scroll a:link { color: #FFF; text-decoration:none; }
.scroll a:visited { color: #FFF; text-decoration:none; }
.scroll a:hover { color: #FFF;  text-decoration:none; }
.scroll a:active { color: #FFF;  text-decoration:none; }


.scroll a{
  color:#FFF;
  letter-spacing: 0.1em;
  font-size:1.2rem;
  text-decoration: none;
  padding-top: 45px;
}

.scroll a span {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 28px;
  height: 40px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.scroll a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 4px;
  height: 4px;
  margin-left: -2px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 15px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



/*1240px以上の場合はMVの高さを固定する*/
@media screen and (min-width: 1240px) {

.mv_bg{
    /*position: relative;*/
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-2;
    width:100%;
    min-height:860px;
  }

.bg01{
    background:url("../img/mv_bg.jpg") center no-repeat;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#main_copy_bg{
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;/**/
  min-height:850px;
  z-index:2;
  }

 .scroll a{
  position: absolute;  
  bottom: 15%;
  left: 49%;
  z-index:5;
}

 
}

@media screen and (max-width: 480px) {
/*矢印を作成する*/

.scroll a{
  position: absolute;
  bottom: 12%;
  left: 46.5%;
  z-index:5;
}

}