@charset "UTF-8";
.ft_btn{
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}
/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}
.head_bar{
  cursor: pointer;
  transition: .3s;
}
/*このクラスが付与されると表示する*/
.headactive{
  opacity: 1;
  visibility: visible;
    background: #fff;
}

.scrollView {
  transition: all 1.2s 0s ease;
  opacity: 0;
  -webkit-transform: scale(1, 1) translate(0, 100px);
  transform: scale(1, 1) translate(0, 100px);
  transition-delay: 0s;
}
.scrollView.view {
  opacity: 1;
  -webkit-transform: scale(1, 1) translate(0%, 0%);
  transform: scale(1, 1) translate(0%, 0%);
}

@media(min-width:769px){
.line-motion{
    position: absolute;
    height: 88%;
    animation-timing-function:ease;
    animation-fill-mode: forwards!important;
    animation-delay: 1s!important;
    -webkit-animation:line_m02 3.5s;
    -moz-animation:line_m02 3.5s;
    animation:line_m02 3.5s;
}
@-webkit-keyframes line_m02{
    0% {height:0;}
    100% {height:88%;}
}
@-moz-keyframes line_m02{
    0% {height:0;}
    100% {height:88%;}
}
@keyframes line_m02{
    0% {height:0;}
    100% {height:88%;}
}
}

@media(max-width:769px){
.line-motion{
    position: absolute;
    height: 88%;
    animation-timing-function: ease;
    animation-fill-mode: forwards!important;
    animation-delay: 1s!important;
    -webkit-animation: line_m02 3.5s;
    -moz-animation: line_m02 3.5s;
    animation: line_m02 3.5s;
}
@-webkit-keyframes line_m02{
    0% {height:0;}
    100% {height:88%;}
}
@-moz-keyframes line_m02{
    0% {height:0;}
    100% {height:88%;}
}
@keyframes line_m02{
    0% {height:0;}
    100% {height:88%;}
}
}