@charset "UTF-8";
/**  お問い合わせバナー
****************************************************************************/
@-webkit-keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/**  TOP　アイコン
****************************************************************************/
@-webkit-keyframes moveIcon1 {
  0% {
    left: -20%;
    opacity: 0;
  }
  100% {
    left: 0%;
    opacity: 1;
  }
}
@keyframes moveIcon1 {
  0% {
    left: -20%;
    opacity: 0;
  }
  100% {
    left: 0%;
    opacity: 1;
  }
}
@-webkit-keyframes moveIcon2 {
  0% {
    right: -20%;
    opacity: 0;
  }
  100% {
    right: 0%;
    opacity: 1;
  }
}
@keyframes moveIcon2 {
  0% {
    right: -20%;
    opacity: 0;
  }
  100% {
    right: 0%;
    opacity: 1;
  }
}
/**  TOP 泡
****************************************************************************/
@-webkit-keyframes bubble1 {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 20%;
    opacity: 1;
  }
  60% {
    bottom: 60%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes bubble1 {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 20%;
    opacity: 1;
  }
  60% {
    bottom: 60%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes bubble2 {
  0% {
    bottom: 0;
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes bubble2 {
  0% {
    bottom: 0;
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes bubble3 {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 40%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes bubble3 {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 40%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes bubble4 {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 30%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes bubble4 {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 30%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes bubble5 {
  0% {
    bottom: 0;
  }
  10% {
    bottom: 10%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes bubble5 {
  0% {
    bottom: 0;
  }
  10% {
    bottom: 10%;
    opacity: 1;
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes bubble6 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  10% {
    bottom: 10%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@keyframes bubble6 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  10% {
    bottom: 10%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  90% {
    bottom: 100%;
    opacity: 0;
  }
}
@-webkit-keyframes bubble7 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  10% {
    bottom: 10%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@keyframes bubble7 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  10% {
    bottom: 10%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@-webkit-keyframes bubble8 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  20% {
    bottom: 20%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@keyframes bubble8 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  20% {
    bottom: 20%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@-webkit-keyframes bubble9 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@keyframes bubble9 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@-webkit-keyframes bubble10 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  40% {
    bottom: 50%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@keyframes bubble10 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  40% {
    bottom: 50%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@-webkit-keyframes bubble11 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
@keyframes bubble11 {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: rotate(360deg);
  }
  100% {
    bottom: 100%;
  }
}
/**  フッター
****************************************************************************/
@-webkit-keyframes fish1 {
  0% {
    right: -20%;
  }
  30% {
    right: 70%;
  }
  60% {
    right: 90%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish1 {
  0% {
    right: -20%;
  }
  30% {
    right: 70%;
  }
  60% {
    right: 90%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes fish2 {
  0% {
    right: -20%;
  }
  30% {
    right: 40%;
  }
  60% {
    right: 60%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish2 {
  0% {
    right: -20%;
  }
  30% {
    right: 40%;
  }
  60% {
    right: 60%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes fish3 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 60%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish3 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 60%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes fish4 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 30%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish4 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 30%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes fish5 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 80%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish5 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 80%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes fish6 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 60%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish6 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 60%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes fish7 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 90%;
  }
  100% {
    right: 110%;
  }
}
@keyframes fish7 {
  0% {
    right: -20%;
  }
  10% {
    right: 0;
  }
  60% {
    right: 90%;
  }
  100% {
    right: 110%;
  }
}
@-webkit-keyframes charaMove {
  0% {
    opacity: 0;
    transform: translate(-50%, 90px);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
}
@keyframes charaMove {
  0% {
    opacity: 0;
    transform: translate(-50%, 90px);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
}