@charset "UTF-8";


div.animation_box {
  overflow:hidden;
  animation: fadeIn 2s ease 0.5s 1 normal backwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



div.animation_box_a {
  overflow:hidden;
  animation: fadeIn_a 2s ease 0.5s 1 normal backwards;
}

@keyframes fadeIn_a {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



div.animation_box_b {
  overflow:hidden;
  animation: fadeIn_b 2s ease 0.5s 1 normal backwards;
}
 
@keyframes fadeIn_b {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



div.animation_box_c {
  overflow:hidden;
  animation: fadeIn_c 1s ease 1.5s 1 normal backwards;
}
 
@keyframes fadeIn_c {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


div.animation_box_d {
  aborder:1px solid green;
  aoverflow:hidden;
  position: relative; 
  animation: fadeIn_c 1s ease 2s 1 normal backwards;
/*  animation-delay: 3.5s; */
}
 
@keyframes fadeIn_c {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


div.animation_box_e {
  overflow:hidden;
  animation: fadeIn_c 1s ease 2.5s 1 normal backwards;
/*  animation-delay: 4.5s; */
}
 
@keyframes fadeIn_e {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


div.animation_box_f {
  overflow:hidden;
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  transform-origin:left;
  opacity:0;
  animation-delay: 1.5s;/*4.5s*/

}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 30%, 0) skewY(9deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}



.yagou_a {
 position:absolute;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 top:-20px;
 }

.yagou_b {
 position:absolute;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 bottom:0px;
 }


/* メニューバーのリンク */
.type1 a{
  position: relative;
  color:gray;
  transition: .3s;
  text-decoration: none;
}

.type1 a:hover{
 color:tomato;
 /*filter:alpha(opacity=80);*/
 /*opacity:0.8;*/
}

.type1 a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: tomato;/*#31aae2;*/
  transition: .3s;
  transform: translateX(-50%);

}

.type1 a:hover::after{
  width: 100%;
}

.type1 a:active {
  position: relative;
  top: 2px;
  left: 2px;
}



.kuhaku_a {
 height:25px;
}