@charset "utf-8";
.ft_btn{
  cursor: pointer;
  transition: .3s;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}
/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}
.link_btn {
  transition: .3s;		
}
.link_btn:hover {
  transform: scale(1.1);
}

@keyframes return {
  0% {
    left: 0px;
  }	
  20% {
    left: 200px;
  }
  40% {
    left: 0px;
  }
  60% {
    left: 200px;
  }
  80% {
    left: 200px;
  }  
  100% {
    left: 0px;
  }
}

.return {
  background-color: Lavender;
  position: relative;

  animation-name: return;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

.fst_up{
  animation-name: fadeup;
  animation-duration: 1s;
}
@keyframes fadeup{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@media (max-width: 768px) {
@keyframes open-keyanime2{ /* アニメーションの動き */ 
  0% { max-height:0; /* 完全に透明 */ } 
  100% { max-height:1000px; /* 透明度無し、通常表示 */ } } 
}
@media (min-width: 768px) {
@keyframes open-keyanime2{ /* アニメーションの動き */ 
  0% { max-height:0; /* 完全に透明 */ } 
  100% { max-height:2500px; /* 透明度無し、通常表示 */ } } 
}
.animation2{ 
  overflow-y: hidden;
  animation-name: open-keyanime2 ; 
  animation-duration: 5s; /* 5秒間で表示 */ 
  animation-fill-mode: both;
  transition-delay: 1s;
}
.scrollleft {
  transition: all 1.2s 0s ease;
  opacity: 0;
  -webkit-transform: scale(1, 1) translate(100px, 0);
  transform: scale(1, 1) translate(100px, 0);
  transition-delay: 0s;
}
.scrollleft.left {
  opacity: 1;
  -webkit-transform: scale(1, 1) translate(0%, 0%);
  transform: scale(1, 1) translate(0%, 0%);
}
.scrollright {
  transition: all 1.2s 0s ease;
  opacity: 0;
  -webkit-transform: scale(1, 1) translate(-100px, 0);
  transform: scale(1, 1) translate(-100px, 0);
  transition-delay: 0s;
}
.scrollright.right {
  opacity: 1;
  -webkit-transform: scale(1, 1) translate(0%, 0%);
  transform: scale(1, 1) translate(0%, 0%);
}
.blink{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}

@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/*== 波紋がふわっと広がる */

.btnripple3{
    /*波紋の基点とするためrelativeを指定*/
  position: relative;
    /*リンクの形状*/
  display:inline-block;
  margin:0 10px 20px 10px;
    text-decoration: none;
    color: #fff;
    outline: none;
}

/*波形の設定*/
.btnripple3:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:35%;
    top:30%;
    /*波形の形状*/
    border: 1px solid #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /*はじめは不透明*/
  opacity:1;
    /*アニメーションの設定*/
    animation:1s circleanime2 forwards;
}

/*波形が広がるアニメーション*/
@keyframes circleanime2{
  0%{
    transform: scale(0);
  }
  100%{
    transform:scale(2);
    opacity: 0;
  }
}

/*矢印の設定*/
.btnripple3::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 30%;
    right: -20px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

.wap1{
  opacity: 0;	
}
.wap1.img-wrap {
  animation: img-wrap 1s cubic-bezier(.4, 0, .2, 1);
  transition-delay: 0s; 
  opacity: 1;  
}
@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}
.scrollView {
  transition: all 1.1s 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%);
}
.scale-motion01 {
    position: absolute;
    opacity: 0;
    animation-fill-mode: forwards !important;
    animation: scale_motion01 .8s;
}
@keyframes scale_motion01 {
    0% {
      opacity: 0;
      transform: scale(0); }
    100% {
      opacity: 1;
      transform: scale(1);
}
}
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
transition-delay: 0.5s;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.blink{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}

@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}