/*----------------------------------------------------------
animation scroll
----------------------------------------------------------*/
.fadeinUp {
  opacity: 0;
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinUp.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinDown {
  opacity: 0;
  -webkit-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  @media screen and (max-width: 750px) {
    .fadeinDown {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0); } }

.fadeinDown.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinLeft {
  opacity: 0;
  -webkit-transform: translate(-40px, 0);
  -ms-transform: translate(-40px, 0);
  transform: translate(-40px, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinLeft.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinRight {
  opacity: 0;
  -webkit-transform: translate(40px, 0);
  -ms-transform: translate(40px, 0);
  transform: translate(40px, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinRight.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

/*----------------------------------------------------------
about
----------------------------------------------------------*/
.floating {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }

.floating.almond {
  -webkit-animation-name: floating_almond;
  animation-name: floating_almond;
  -webkit-animation-delay: .6s;
  animation-delay: .6s; }

.floating.banana {
  -webkit-animation-name: floating_banana;
  animation-name: floating_banana;
  -webkit-animation-delay: .3s;
  animation-delay: .3s; }

.floating.cocoa {
  -webkit-animation-name: floating_cocoa;
  animation-name: floating_cocoa; }

.floating.goldenberry {
  -webkit-animation-name: floating_goldenberry;
  animation-name: floating_goldenberry;
  -webkit-animation-delay: .3s;
  animation-delay: .3s; }

.floating.pineapple {
  -webkit-animation-name: floating_pineapple;
  animation-name: floating_pineapple;
  -webkit-animation-delay: .6s;
  animation-delay: .6s; }

@-webkit-keyframes floating_almond {
  0% {
    -webkit-transform: translate(0, 0) rotate(-20deg);
    transform: translate(0, 0) rotate(-20deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(-20deg);
    transform: translate(0, 20px) rotate(-20deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(-20deg);
    transform: translate(0, 0) rotate(-20deg); } }

@keyframes floating_almond {
  0% {
    -webkit-transform: translate(0, 0) rotate(-20deg);
    transform: translate(0, 0) rotate(-20deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(-20deg);
    transform: translate(0, 20px) rotate(-20deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(-20deg);
    transform: translate(0, 0) rotate(-20deg); } }

@-webkit-keyframes floating_banana {
  0% {
    -webkit-transform: translate(0, 0) rotate(-10deg);
    transform: translate(0, 0) rotate(-10deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(-10deg);
    transform: translate(0, 20px) rotate(-10deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(-10deg);
    transform: translate(0, 0) rotate(-10deg); } }

@keyframes floating_banana {
  0% {
    -webkit-transform: translate(0, 0) rotate(-10deg);
    transform: translate(0, 0) rotate(-10deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(-10deg);
    transform: translate(0, 20px) rotate(-10deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(-10deg);
    transform: translate(0, 0) rotate(-10deg); } }

@-webkit-keyframes floating_cocoa {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  65% {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes floating_cocoa {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  65% {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-webkit-keyframes floating_goldenberry {
  0% {
    -webkit-transform: translate(0, 0) rotate(10deg);
    transform: translate(0, 0) rotate(10deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(10deg);
    transform: translate(0, 20px) rotate(10deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(10deg);
    transform: translate(0, 0) rotate(10deg); } }

@keyframes floating_goldenberry {
  0% {
    -webkit-transform: translate(0, 0) rotate(10deg);
    transform: translate(0, 0) rotate(10deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(10deg);
    transform: translate(0, 20px) rotate(10deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(10deg);
    transform: translate(0, 0) rotate(10deg); } }

@-webkit-keyframes floating_pineapple {
  0% {
    -webkit-transform: translate(0, 0) rotate(20deg);
    transform: translate(0, 0) rotate(20deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(20deg);
    transform: translate(0, 20px) rotate(20deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(20deg);
    transform: translate(0, 0) rotate(20deg); } }

@keyframes floating_pineapple {
  0% {
    -webkit-transform: translate(0, 0) rotate(20deg);
    transform: translate(0, 0) rotate(20deg); }
  65% {
    -webkit-transform: translate(0, 20px) rotate(20deg);
    transform: translate(0, 20px) rotate(20deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(20deg);
    transform: translate(0, 0) rotate(20deg); } }

.about_material_list > li.is_active .material_img {
  -webkit-animation: shake .6s linear 0s forwards normal;
  animation: shake .6s linear 0s forwards normal; }

@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  20% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); }
  50% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg); }
  75% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes shake {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  20% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); }
  50% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg); }
  75% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

.about_material_list .material_img .open {
  opacity: 1;
  -webkit-animation: eye_open 8s infinite ease-in-out;
  animation: eye_open 8s infinite ease-in-out; }

@-webkit-keyframes eye_open {
  0% {
    opacity: 1; }
  70% {
    opacity: 1; }
  71% {
    opacity: 0; }
  72% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes eye_open {
  0% {
    opacity: 1; }
  70% {
    opacity: 1; }
  71% {
    opacity: 0; }
  72% {
    opacity: 1; }
  100% {
    opacity: 1; } }

.about_material_list .material_img .close {
  opacity: 0;
  -webkit-animation: eye_close 8s infinite ease-in-out;
  animation: eye_close 8s infinite ease-in-out; }

@-webkit-keyframes eye_close {
  0% {
    opacity: 0; }
  70% {
    opacity: 0; }
  71% {
    opacity: 1; }
  72% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes eye_close {
  0% {
    opacity: 0; }
  70% {
    opacity: 0; }
  71% {
    opacity: 1; }
  72% {
    opacity: 0; }
  100% {
    opacity: 0; } }

.about_soramame .fukidashi {
  -webkit-animation: soramame_fukidashi 1.2s infinite ease-in-out;
  animation: soramame_fukidashi 1.2s infinite ease-in-out; }

@-webkit-keyframes soramame_fukidashi {
  0% {
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg); }
  49% {
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg); }
  50% {
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg); }
  99% {
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg); }
  100% {
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg); } }

@keyframes soramame_fukidashi {
  0% {
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg); }
  49% {
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg); }
  50% {
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg); }
  99% {
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg); }
  100% {
    -webkit-transform: rotate(1.5deg);
    transform: rotate(1.5deg); } }

/*----------------------------------------------------------
contact
----------------------------------------------------------*/
.contact .soramame::before, .contact .soramame::after {
  -webkit-animation: kirakira 1.2s infinite ease-in-out;
  animation: kirakira 1.2s infinite ease-in-out; }

.contact .soramame::after {
  -webkit-animation-delay: .6s;
  animation-delay: .6s; }

@-webkit-keyframes kirakira {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  49% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  99% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes kirakira {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  49% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  99% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }