@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.kakoi{
border:solid 5px #90ce9c;
  width:350px;
  margin:25px auto;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding:10px;
}

.effect{
	
	font-size:22px;
	color: #8bd3dd;
    text-shadow: 2px 2px 4px rgba(20, 17, 195, 0.6);
}

.effect_large{
	font-size:22px;
}
.jump {
  animation: jump 3s infinite;
  -webkit-animation: jump 3s infinite;
  -moz-animation: jump 3s infinite;
}
.jump img {
  display: block;
  width: 60px;
}
@keyframes jump {
  0% {
    transform: translate(0, 0px);
  }
  3% {
    transform: translate(0, -20px);
  }
  5% {
    transform: translate(0, 0px);
  }
  6% {
    transform: translate(0, -5px);
  }
  7% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 0px);
  }
}
@-webkit-keyframes jump {
  0% {
    -webkit-transform: translate(0, 0px);
  }
  3% {
    -webkit-transform: translate(0, -20px);
  }
  5% {
    -webkit-transform: translate(0, 0px);
  }
  6% {
    -webkit-transform: translate(0, -5px);
  }
  7% {
    -webkit-transform: translate(0, 0px);
  }
  100% {
    -webkit-transform: translate(0, 0px);
  }
}
@-moz-keyframes jump {
  0% {
    -moz-transform: translate(0, 0px);
  }
  3% {
    -moz-transform: translate(0, -20px);
  }
  5% {
    -moz-transform: translate(0, 0px);
  }
  6% {
    -moz-transform: translate(0, -5px);
  }
  7% {
    -moz-transform: translate(0, 0px);
  }
  100% {
    -moz-transform: translate(0, 0px);
  }
}
.cloud {
  animation: cloud ease-in-out 4s infinite alternate;
  -webkit-animation: cloud ease-in-out 4s infinite alternate;
  -moz-animation: cloud ease-in-out 4s infinite alternate;
}
@keyframes cloud {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-30px, 0%);
    opacity: 0;
  }
}
@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-30px, 0%);
    opacity: 0;
  }
}
@-moz-keyframes cloud {
  0% {
    -moz-transform: translate(0%, 0%);
    opacity: 1;
  }
  100% {
    -moz-transform: translate(-30px, 0%);
    opacity: 0;
  }
}


.ball {
  animation: ball 0.6s alternate infinite;
  -webkit-animation: ball 0.6s alternate infinite;
  -moz-animation: ball 0.6s alternate infinite;
}
.ball img {
  display: block;
  width: 100px;
}
@keyframes ball {
  0% {
    transform: translate(0%, 0%) rotateX(25deg);
  }
  100% {
    transform: translate(0%, -60px);
  }
}
@-webkit-keyframes ball {
  0% {
    -webkit-transform: translate(0%, 0%) rotateX(25deg);
  }
  100% {
    -webkit-transform: translate(0%, -60px);
  }
}

@-moz-keyframes ball {
  0% {
    -moz-transform: translate(0%, 0%) rotateX(25deg);
  }
  100% {
    -moz-transform: translate(0%, -60px);
  }
}

.engine {
display:block;
	width:380px;
  animation: engine 0.2s infinite;
  -webkit-animation: engine 0.2s infinite;
  -moz-animation: engine 0.2s infinite;
}
@keyframes engine {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    transform: scale(1, 0.98) translate(0%, 1.5%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@-webkit-keyframes engine {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    -webkit-transform: scale(1, 0.98) translate(0%, 1.5%);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%);
  }
}
@-moz-keyframes engine {
  0% {
    -moz-transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    -moz-transform: scale(1, 0.98) translate(0%, 1.5%);
  }
  100% {
    -moz-transform: scale(1, 1) translate(0%, 0%);
  }
}
.pendulum {
  transform-origin: top;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  animation: pendulum ease-in-out 3s infinite alternate;
  -webkit-animation: pendulum ease-in-out 3s infinite alternate;
  -moz-animation: pendulum ease-in-out 3s infinite alternate;
}
.pendulum img {
  display: block;
  width: 80px;
}
@keyframes pendulum {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes pendulum {
  0% {
    -webkit-transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
  }
}
@-moz-keyframes pendulum {
  0% {
    -moz-transform: rotate(10deg);
  }
  100% {
    -moz-transform: rotate(-10deg);
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}