@charset "UTF-8";
/* CSS Document */

/* == ジャンプ ========================================== */
.jump {
  -webkit-animation: jump 3s linear 0s infinite;
          animation: jump 3s linear 0s infinite;
}
@-webkit-keyframes jump {
    0% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%);
    }
    3% {
      -webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
              transform: scale(1.1, 0.9) translate(0%, 5%);
    }
    13% {
      -webkit-transform: scale(1.2, 0.8) translate(0%, 15%);
              transform: scale(1.2, 0.8) translate(0%, 15%);
    }
    17% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%);
    }
    20% {
      -webkit-transform: scale(0.9, 1.2) translate(0%, -50%);
              transform: scale(0.9, 1.2) translate(0%, -50%);
    }
    25% {
      -webkit-transform: scale(0.9, 1.2) translate(0%, -20%);
              transform: scale(0.9, 1.2) translate(0%, -20%);
    }
    28% {
      -webkit-transform: scale(1.2, 0.8) translate(0%, 15%);
              transform: scale(1.2, 0.8) translate(0%, 15%);
    }
    33% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%); 
    }
    40% {
      -webkit-transform: scale(1.1, 0.95) translate(0%, 3%);
              transform: scale(1.1, 0.95) translate(0%, 3%);
    }
    45% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%); 
    }
}
@keyframes jump {
    0% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%);
    }
    3% {
      -webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
              transform: scale(1.1, 0.9) translate(0%, 5%);
    }
    13% {
      -webkit-transform: scale(1.2, 0.8) translate(0%, 15%);
              transform: scale(1.2, 0.8) translate(0%, 15%);
    }
    17% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%);
    }
    20% {
      -webkit-transform: scale(0.9, 1.2) translate(0%, -50%);
              transform: scale(0.9, 1.2) translate(0%, -50%);
    }
    25% {
      -webkit-transform: scale(0.9, 1.2) translate(0%, -20%);
              transform: scale(0.9, 1.2) translate(0%, -20%);
    }
    28% {
      -webkit-transform: scale(1.2, 0.8) translate(0%, 15%);
              transform: scale(1.2, 0.8) translate(0%, 15%);
    }
    33% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%); 
    }
    40% {
      -webkit-transform: scale(1.1, 0.95) translate(0%, 3%);
              transform: scale(1.1, 0.95) translate(0%, 3%);
    }
    45% {
      -webkit-transform: scale(1, 1) translate(0%, 0%);
              transform: scale(1, 1) translate(0%, 0%); 
    }
}



/* == 横揺れ ========================================== */
.sway {
  -webkit-transform-origin: 40% 120%;
      -ms-transform-origin: 40% 120%;
          transform-origin: 40% 120%;
  -webkit-animation: sway 2s ease 1s infinite normal none;
          animation: sway 2s ease 1s infinite normal none;
}
@-webkit-keyframes sway {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}
@keyframes sway {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
}



/* == 手を振るめざましくん ========================================== */
.wave_hands {
  -webkit-animation: wave_hands 1.0s steps(2) infinite;
          animation: wave_hands 1.0s steps(2) infinite;
}
@-webkit-keyframes wave_hands {
	to {
		background-position: -230px 0;
	}
}
@keyframes wave_hands {
	to {
		background-position: -230px 0;
	}
}



/* == 太陽の回転 ========================================== */
.rotation {
	-webkit-animation: rotation 40s linear infinite;
			animation: rotation 40s linear infinite;
}
@-webkit-keyframes rotation {
  0% {
	-webkit-transform: rotate(0);
			transform: rotate(0);
}
  100% {
	-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
	}
}
@keyframes rotation {
  0% {
	-webkit-transform: rotate(0);
			transform: rotate(0);
}
  100% {
	-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
	}
}



/* == 左右に動く雲 ========================================== */
.slidein {
	-webkit-animation: slidein 1.5s ease-in-out infinite alternate;
			animation: slidein 1.5s ease-in-out infinite alternate;	
}
@-webkit-keyframes slidein {
	0% {
		-webkit-transform: translate(0px, 0);
				transform: translate(0px, 0);
	}
	100% {
		-webkit-transform: translate(60px, 0);
				transform: translate(60px, 0);
	}
}
@keyframes slidein {
	0% {
		-webkit-transform: translate(0px, 0);
				transform: translate(0px, 0);
	}
	100% {
		-webkit-transform: translate(60px, 0);
				transform: translate(60px, 0);
	}
}



/* == KVのアニメーション ========================================== */
/* 写真フェードイン */
.mainV_photo {
	-webkit-animation: fadeIn 1s cubic-bezier(0.64, 0.1, 0.98, 0.62) 0.5s 1 normal forwards;
			animation: fadeIn 1s cubic-bezier(0.64, 0.1, 0.98, 0.62) 0.5s 1 normal forwards;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	} 
	to {
		opacity: 1;
		visibility: visible;
	} 
}

/* めざまし番組情報右からフェードイン */
.meza_info {
	-webkit-animation: fadeInRight 0.75s ease 1s 1 normal forwards;
			animation: fadeInRight 0.75s ease 1s 1 normal forwards;
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(20px);
			transform: translateX(20px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
				transform: translateX(0);
	}
}

/* めざましどようび番組情報左からフェードイン */
.mezado_info {
	-webkit-animation: fadeInLeft 0.75s ease 1.5s 1 normal forwards;
  			animation: fadeInLeft 0.75s ease 1.5s 1 normal forwards;
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-20px);
				transform: translateX(-20px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
				transform: translateX(0);
	}
}

/* ロゴ（スタンプ風の動き） */
.stamp {
	-webkit-animation: stamp 1.5s cubic-bezier(0.86, 0, 0.07, 1) 2s 1 normal both;
			animation: stamp 1.5s cubic-bezier(0.86, 0, 0.07, 1) 2s 1 normal both;
}
@keyframes stamp {
	from {
	 	opacity: 0;
		-webkit-transform: rotate(-10deg) translate(10%, -10%) scale(1.05);
	 			transform: rotate(-10deg) translate(10%, -10%) scale(1.05);
	}
	40% {
	  	opacity: 1;
	  	-webkit-transform: rotate(0deg) translate(10%, -10%) scale(1.15);
			  	transform: rotate(0deg) translate(10%, -10%) scale(1.15);
	}
	to {
	 	-webkit-transform: none;
			  	transform: none;
	  	opacity: 1;
	}
}