@charset "UTF-8";
.onmouse {
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.onmouse:hover {
  opacity: 0.6;
}

img {
  width: 100%;
}

.line_animation {
  width: 0%;
  position: relative;
  height: 1px;
  background-color: #ababab;
  -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.line_animation__on {
  width: 100%;
}

.line_animation_no {
  width: 100%;
  position: relative;
  height: 1px;
  background-color: #ababab;
  -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.back_animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-color: #F8FAFC;
  -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.back_animation__on {
  left: 0%;
}

/****TOPアニメーション*****/
.fadein_nomal {
  opacity: 0;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.fadein_nomal__on {
  opacity: 1;
}