@charset "utf-8";

.kasaneru{
  position: relative;/*親要素にrelative*/
}




.kasaneru .badge_maru{
  position: absolute;/*重ねたい子要素にabsolute*/
  display: inline-block;
  top: -1.2rem;
  left: 1.5rem;
}

.kasaneru .kadomaru_bg{
  position: absolute;/*重ねたい子要素にabsolute*/
  display: inline-block;
  bottom:-2.5rem;
  left: 50%;
  transform: translateX(-50%);

  border:solid 3px #fff;
}

.badge_maru{
  display: inline-block;
  width: 40px;
  height:40px;
  border-radius: 50%;
  background: #f5a014;
  text-align:center;
  line-height: 40px;

  color:#fff;
  font-size: 1.5rem !important;
  font-weight: bold;
}



.kadomaru_bg{
  padding:4px 8px;
  min-width: 86%;
  background: #f5a014;
  text-align:center;
  border-radius: 20px;
  color:#fff;

  font-size: 1.1rem !important;
  font-weight: bold;

  display: inline-block;

  margin-bottom: 20px;
}


/*雲*/
.cloud01{
  position: absolute;
  z-index: 1000;
}

.cloud02{
  position: absolute;
  z-index: 1001;
}

.cloud03{
  position: absolute;
  z-index: 1002;
}

.poyopoyo_01{
  animation: poyopoyo_01 2s ease-out infinite;
  opacity: 1;
}

.poyopoyo_02{
  animation: poyopoyo_02 3s ease-out infinite;
  opacity: 1;
}

.poyopoyo_03{
  animation: poyopoyo_03 4.5s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo_01 {
  0%, 40%, 60%, 80% {transform: scale(1.0);}
  50%, 70% {transform: scale(0.96);}
}

@keyframes poyopoyo_02 {
  0%, 40%, 60%, 80% {transform: scale(1.0);}
  50%, 70% {transform: scale(0.94);}
}

@keyframes poyopoyo_03 {
  0%, 40%, 60%, 80% {transform: scale(1.0);}
  50%, 70% {transform: scale(0.94);}
}

@media(max-width: 959px) { 
  /* スマートフォン向けのスタイル */
  .cloud01{
  top:130px;
  right:-100px;
  width: 50%;
  height: auto;
}
  .cloud02{
  top:690px;
  left:-10px;
  width: 50%;
  height: auto;
}
  .cloud03{
  top:-50px;
  left:-80px;
  width: 50%;
  height: auto;
}
}

@media (min-width: 768px) and (max-width: 960px) {
  /* タブレット向けのスタイル */
  .cloud01{
  top:220px;
  right:-250px;
}
  .cloud02{
  top:1350px;
  left:-90px;
}
  .cloud03{
  top:-120px;
  left:-190px;
}
}

@media (min-width: 1280px) {
  /* PC向けのスタイル */
  .cloud01{;
  top:540px;
  right:-100px;
}

  .cloud02{
  top:2150px;
  left:230px;
}
  .cloud03{
  top:-60px;
  left:0px;
}
}





@media screen and （max-width: 768px） {
.cloud01　{


  }
}




/*1280px以下で文字色が黄色に*/

@media screen and （max-width: 1280px） {

.tablet {

/* 1280px以下で適用させたいcssを記述する部分 */

  color: #F9D342;}

}

/*768px以下で文字色が青色に*/

@media screen and （max-width: 768px） {
  .sp {
  /*768 px未満で表示させたいcssを記述する部分 */

  }

}




.kasaneru .button{
  position: absolute;/*重ねたい子要素にabsolute*/
  display: inline-block;
  bottom:1.0rem;
  right: 1.0rem;
}