@charset "UTF-8";
/*
====================
_VARIABLES.SCSS
====================
*/
/* ---------------------------
transition
--------------------------- */
/* ---------------------------
transform
--------------------------- */
/* ---------------------------
flexまとめ
--------------------------- */
/* ---------------------------
クリアフィックス
--------------------------- */
/* ---------------------------
透明度
--------------------------- */
/* ---------------------------
グラデーション
--------------------------- */
/* ---------------------------
グラデーション
--------------------------- */
/* ---------------------------
フォームリセット
--------------------------- */
/*========================================================
    トンボKIDS アニメーション用　css
========================================================*/
/*スクロールキャラクター*/
.img_chara.chara01, .img_chara.chara02, .img_chara.chara03 {
  /*position:fixed;*/
}

.img_chara.chara01 {
  top: 20vh;
}

.img_chara.chara02 {
  top: 50vh;
}

.img_chara.chara03 {
  top: 80vh;
}

/*下層「トップへ」ボタン用*/
.img_chara.chara02 .fukidasho-box {
  opacity: 0;
  transition: all .4s ease;
  transform: translateY(30px);
}

.img_chara.chara02.item-show-fukidashi .fukidasho-box {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.img_chara.chara02.item-show-fukidashi {
  cursor: pointer;
}

/*スクロールフェードイン*/
.scroll-fader {
  transition-duration: .9s;
  transition-property: transform, opacity;
  transform: translateY(15px);
  opacity: 0;
}

.scroll-fader.is-show {
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------
for TAB SP
----------------------------*/
@media screen and (max-width: 767px) {
  .img_chara.chara01 {
    width: 10.8359133%;
    left: 1%;
  }
  .img_chara.chara01 p {
    display: none;
  }
  .img_chara.chara02 {
    width: 13.90712074%;
    left: 86%;
  }
  .img_chara.chara03 {
    width: 9.90712% !important;
    left: 1%;
  }
  .img_chara.chara03 p {
    display: none;
  }
}

.animete-float01 {
  animation: float_01 5s ease infinite;
  transform-origin: 50% 50%;
}

.animete-rotate01 {
  animation: rotate_01 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.animete-float02 {
  animation: float_02 5.5s ease infinite;
  transform-origin: 50% 50%;
}

.animete-rotate02 {
  animation: rotate_02 3.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.animete-float03 {
  animation: float_03 4.5s ease infinite;
  transform-origin: 50% 50%;
}

.animete-rotate03 {
  animation: rotate_03 5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes float_01 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes rotate_01 {
  0% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

@keyframes float_02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes rotate_02 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes float_03 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-35px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes rotate_03 {
  0% {
    transform: rotate(24deg);
  }
  50% {
    transform: rotate(-24deg);
  }
  100% {
    transform: rotate(24deg);
  }
}

/*factory 下にスクロールアイコン*/
.factory .scroll-icn {
  -webkit-animation: animation 1100ms linear infinite both;
  animation: animation 1100ms linear infinite both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/9JC71b */
@-webkit-keyframes animation {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  8.99% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.09% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  11% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.451, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.451, 0, 1);
  }
  12.82% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.221, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.221, 0, 1);
  }
  16.55% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 9.197, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 9.197, 0, 1);
  }
  19.46% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 8.323, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 8.323, 0, 1);
  }
  22.29% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.425, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.425, 0, 1);
  }
  27.93% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.121, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.121, 0, 1);
  }
  33.66% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.646, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.646, 0, 1);
  }
  39.3% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.375, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.375, 0, 1);
  }
  50.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.315, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.315, 0, 1);
  }
  62.05% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1);
  }
  84.8% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.031, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.031, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes animation {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  8.99% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.09% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  11% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.451, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.451, 0, 1);
  }
  12.82% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.221, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.221, 0, 1);
  }
  16.55% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 9.197, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 9.197, 0, 1);
  }
  19.46% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 8.323, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 8.323, 0, 1);
  }
  22.29% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.425, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.425, 0, 1);
  }
  27.93% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.121, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.121, 0, 1);
  }
  33.66% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.646, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.646, 0, 1);
  }
  39.3% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.375, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.375, 0, 1);
  }
  50.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.315, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.315, 0, 1);
  }
  62.05% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.206, 0, 1);
  }
  84.8% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.031, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.031, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}