@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
#slider {
    width: 100%;
    height: calc(100vh - 60px) !important;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    position:absolute;
}


.wrapper{
  position: relative;
}


.first-view{
  height: calc(100vh - 60px);
  background-image: url(../images/main_design2.png);
  background-position: center;
  background-attachment: fixed;
  position: relative;
  opacity: .7;
}


.first-view-text h1{
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 280px;
  text-align:right;
  line-height: 0.5em;

}


 .catch{
  margin-top: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.link-button-area{
  position: absolute;
  width: 100px;
   right: 30%;
    top: 70%;

    

}
.link-button{
  background-color: #EAEAEA;
  display:inline-block;
  min-width: 40px;
  line-height: 38px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  position:fixed;
  right:20%;
  bottom:30%;
}
.link-button:hover{
  background-color:#7692AD;
}






/*背景に植物が流れる*/
/*
body {
  background-image: url(../images/green.jpg); /* image url*/　　
/*  background-size: 100px 100px; /* image size */
/*  background-repeat: repeat;
  -webkit-animation: bg 5s linear infinite;       
  animation: bg 10s infinite linear;
}

@keyframes bg {
  0% {
    background-position: 0 0;
  }
  
  100% {
    background-position: 100px -100px;
  }
}
*/

















/*
body.isActive{
  background: linear-gradient(25deg,#FFCCFF,#99FFCC);
}

*/








@media (max-width:800px){
  .wrapper{
  position: relative;
}  
  
  #slider {
    width: 100%;
    height: calc(100vh - 60px) !important;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    position:absolute;
}
  
  
  .first-view{
    height: calc (100vh-50px);
    background-size: 60%;
    position:relative;
  
  }
  .first-view-text h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%,-60%);
    width: 250px;
    text-align:right;
    font-size: 24px;
    line-height: 20px;
 
   }
 

 .catch{
    text-align:center; 
    padding-top: 0;
    font-size: 0.7em;

  }
    
 .link-button-area{
    position: absolute;
    right: 25%;
    top: 80%;
  }
.link-button{
  background-color: #EAEAEA;
  display:inline-block;
  min-width: 40px;
  line-height: 38px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  position:fixed;
  right:30%;
  bottom:22%;
}
.link-button:hover{
  background-color:#7692AD;
}
body.isActive{
  background: linear-gradient(25deg,#FFCCFF,#99FFCC);
}


}