/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/

/******************************************************************************************/
/**　フェードアップ　**/
/******************************************************************************************/

.fade-up {
/* 最初は非表示 */
opacity: 0%;
/*
visibility: hidden;
*/
transform: translateY(30px);
transition: opacity 1s, visibility 1s, transform 1s;
}

.fade-up100 {
/* 最初は非表示 */
opacity: 0;
visibility: hidden;
transform: translateY(100px);
transition: opacity 1s, visibility 1s, transform 1s;
}

/* fadeInTop */
.fadeInTop {
    animation: fadeInTop 2s ease 0s 1 normal;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}

.fadein-left {
/* 最初は非表示 */
opacity: 0;
visibility: hidden;
transform: translateX(-30px);
transition: opacity 1s, visibility 1s, transform 1s;
}

.fadein-right {
/* 最初は非表示 */
opacity: 0;
visibility: hidden;
transform: translateX(30px);
transition: opacity 1s, visibility 1s, transform 1s;
}

/* フェードイン時に入るクラス */
.is-fadein {
opacity: 1;
visibility: visible;
transform: translateX(0);
}


/******************************************************************************************/
/**　フェードイン　**/
/******************************************************************************************/

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element-1 {
    animation: fadeIn 2s ease-in infinite;
}

.element-1-2 {
    animation: fadeIn 2s ease-in;
}

.fadein_slow {
    animation: fadeIn 3s ease-in;
}


/******************************************************************************************/
/**　くるくる回って表示　**/
/******************************************************************************************/

.flip {
    animation: flip 1.4s ease 0s 1 normal;
}
/* flip */
@keyframes flip {
    0% {
        transform: perspective(500px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(500px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(500px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(500px) scale3d(0.95, .95, 0.95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
    100% {
        transform: perspective(500px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in
    }
}


/*834px以下*/
/*
@media screen and (max-width: 834px){
	@keyframes flip {
		0% {
			transform: perspective(3000px) scaleX(1) translateZ(-3000px) rotateY(-1turn);
			animation-timing-function: ease-out
		}
		40% {
			transform: perspective(3000px) scaleX(1) translateZ(150px) rotateY(-190deg);
			animation-timing-function: ease-out
		}
		50% {
			transform: perspective(3000px) scaleX(1) translateZ(150px) rotateY(-170deg);
			animation-timing-function: ease-in
		}
		80% {
			transform: perspective(3000px) scale3d(0.95, .95, 0.95) translateZ(0) rotateY(0deg);
			animation-timing-function: ease-in
		}
		100% {
			transform: perspective(3000px) scaleX(1) translateZ(0) rotateY(0deg);
			animation-timing-function: ease-in
		}
	}
}
*/


/******************************************************************************************/
/**　脈打ち　**/
/******************************************************************************************/

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  4% {
    transform: scale(1.02);
  }
  7% {
    transform: scale(1);
  }
  11% {
    transform: scale(1.05);
  }
  18% {
    transform: scale(1);
  }
}
.myakuchi {
  animation: heartbeat 4s infinite ease-in-out;
}


@keyframes heartbeat02 {
  0% {
    transform: scale(1);
  }
  4% {
    transform: scale(1.01);
  }
  7% {
    transform: scale(1);
  }
  11% {
    transform: scale(1.01);
  }
  18% {
    transform: scale(1);
  }
}
.myakuchi02 {
  animation: heartbeat02 3s infinite ease-in-out;
}


/******************************************************************************************/
/**　ふわふわ　**/
/******************************************************************************************/

@keyframes fuwafuwa {
  from {
    translateY(0) scale(1)
  }
  to {
    transform: translateY(1px) scale(.95);
  }
}
.anime-fuwafuwa {
  animation: fuwafuwa 1s ease-in-out infinite alternate;
}




.fuwafuwa2 {
  display: block;

}

/* Animation */
.fuwafuwa2 {
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-10%);
  }
}


.fuwafuwa_little {
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-5%);
  }
}


/******************************************************************************************/
/**　震え　**/
/******************************************************************************************/

@keyframes shivering_top {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-5deg);
  }
  20% {
    transform: rotateZ(1deg);
  }
  25% {
    transform: rotateZ(-1deg);
  }
  30% {
    transform: rotateZ(0.5deg);
  }
  35% {
    transform: rotateZ(-0.5deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}


.shivering_top {
  animation: shivering_top 2s linear infinite;
}

@keyframes shivering_btm {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-1deg);
  }
  20% {
    transform: rotateZ(0.25deg);
  }
  25% {
    transform: rotateZ(-0.25deg);
  }
  30% {
    transform: rotateZ(0.1deg);
  }
  35% {
    transform: rotateZ(-0.1deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.shivering_btm {
  animation: shivering_btm 2s linear infinite;
}


@keyframes shivering {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(5deg);
  }
  25% {
    transform: rotateZ(-5deg);
  }
  30% {
    transform: rotateZ(3deg);
  }
  35% {
    transform: rotateZ(-2deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.shivering {
  animation: shivering 2s linear infinite;
}


/******************************************************************************************/
/**　ブラブラ揺れ　**/
/******************************************************************************************/

.swing {
animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
    10% {
        transform: rotate(3deg)
    }
    20% {
        transform: rotate(-3deg)
    }
    30% {
        transform: rotate(1deg)
    }
    40% {
        transform: rotate(-1deg)
    }
	50% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(0deg)
    }
}


/******************************************************************************************/
/**　バウンド　**/
/******************************************************************************************/

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.element-2 {
  animation: bounce 2s infinite;
}


@keyframes bounce_small {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-2px);
  }
}

.element-2_small {
  animation: bounce_small 2s infinite;
}


@keyframes bounce_scl {
  0%, 60%, 85%, 100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-8px);
  }
  95% {
    transform: translateY(-4px);
  }
}

.element-2_scl {
  animation: bounce_scl 2s infinite;
}


/******************************************************************************************/
/**　ぷるーん　**/
/******************************************************************************************/

.pulun {
	text-align: center;
	animation: pulun_anime 2s infinite;
}

@keyframes pulun_anime {
	0% {
        transform: scale(1, 1);
    }
    20% {
        transform: scale(0.9, 1.1);
    }
	30% {
        transform: scale(1, 1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.9);
    }
}


/******************************************************************************************/
/**　横揺れ　**/
/******************************************************************************************/

.yokoyure {
	margin-bottom: 20px;
	animation: yokoyure_anime 2s infinite;
}

@keyframes yokoyure_anime {
	0% {
		transform: translate(4px, 0px);
    }
    5% {
        transform: translate(-4px, 0px);
    }
    10% {
        transform: translate(4px, 0px);
    }
    15% {
        transform: translate(-4px, 0px);
    }
    20% {
        transform: translate(4px, 0px);
    }
    25% {
        transform: translate(-4px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


/******************************************************************************************/
/**　縦揺れ　**/
/******************************************************************************************/

.tateyure {
	animation: tateyure_anime 2s infinite;
}

@keyframes tateyure_anime {
	0% {
		transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


.tateyure_little {
	animation: tateyure_anime_little 2s infinite;
}

@keyframes tateyure_anime_little {
	0% {
		transform: translate(0px, 1px);
    }
    5% {
        transform: translate(0px, -1px);
    }
    10% {
        transform: translate(0px, 1px);
    }
    15% {
        transform: translate(0px, -1px);
    }
    20% {
        transform: translate(0px, 1px);
    }
    25% {
        transform: translate(0px, -1px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


/******************************************************************************************/
/**　文字をスライドして表示　**/
/******************************************************************************************/

/*　1文字ずつフェードイン　繰り返しなし　*/

.text1fadein {
	display: flex;
	overflow: hidden;
}

.text1fadein span {
	opacity: 0;
	animation: textanimation 2s forwards;
}

.text1fadein span:nth-child(1) {
	animation-delay: 0.1s
}
.text1fadein span:nth-child(2) {
	animation-delay: 0.2s
}
.text1fadein span:nth-child(3) {
	animation-delay: 0.3s
}
.text1fadein span:nth-child(4) {
	animation-delay: 0.4s
}
.text1fadein span:nth-child(5) {
	animation-delay: 0.5s
}
.text1fadein span:nth-child(6) {
	animation-delay: 0.6s
}
.text1fadein span:nth-child(7) {
	animation-delay: 0.7s
}
.text1fadein span:nth-child(8) {
	animation-delay: 0.8s
}
.text1fadein span:nth-child(9) {
	animation-delay: 0.9s
}
.text1fadein span:nth-child(10) {
	animation-delay: 1.0s
}
.text1fadein span:nth-child(11) {
	animation-delay: 1.1s
}
.text1fadein span:nth-child(12) {
	animation-delay: 1.2s
}
.text1fadein span:nth-child(13) {
	animation-delay: 1.3s
}
.text1fadein span:nth-child(14) {
	animation-delay: 1.4s
}
.text1fadein span:nth-child(15) {
	animation-delay: 1.5s
}
.text1fadein span:nth-child(16) {
	animation-delay: 1.6s
}
.text1fadein span:nth-child(17) {
	animation-delay: 1.7s
}
.text1fadein span:nth-child(18) {
	animation-delay: 1.8s
}
.text1fadein span:nth-child(19) {
	animation-delay: 1.9s
}
.text1fadein span:nth-child(20) {
	animation-delay: 2.0s
}

@keyframes textanimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/*　1文字ずつフェードイン　繰り返しあり　*/

.textjojo {
	white-space:nowrap;
	overflow:hidden;
	animation:jojo 6s linear infinite;
}

@keyframes jojo {
	from {
		width:0%;
		opacity: 0.25;
	}
	to {
		width:100%;
		opacity: 1;
	}
}


/*　下からフェードイン　繰り返しあり　*/

.textjojobottom {
	width: 100%;
	transform-origin: bottom;
	animation: textjojobottom-animation 4s infinite alternate;
}

@keyframes textjojobottom-animation {
	0% {
		transform: scaleY(0);
	}
	50% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0);
	}
}


/*　下からフェードイン　繰り返しなし　*/

.textjojobottom_np {
	width: 100%;
	transform-origin: bottom;
	animation: textjojobottom_np-animation 3s;
}

@keyframes textjojobottom_np-animation {
	0% {
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(1);
	}
}


/******************************************************************************************/
/**　回転　**/
/******************************************************************************************/

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.element-4 {
  animation: rotate 6s linear infinite;
}


/******************************************************************************************/
/**　点滅　**/
/******************************************************************************************/

@keyframes blink {
  50%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.element-7 {
  animation: blink 1.5s step-start infinite;
}


@keyframes blink_0 {
  50%, 100% {
    opacity: 1;
  }
  10% {
    opacity: 0.7;
  }
}

.element-7_0 {
  animation: blink_0 1.5s step-start infinite;
}


/******************************************************************************************/
/**　テキスト縦揺れ(笑)　**/
/******************************************************************************************/

.wave_v_w span {
	position: relative;
	animation: wave_v_w-anim 0.5s linear infinite;
}

@keyframes wave_v_w-anim {
	0% {
		top: 0;
	}
	30% {
		top: 2px;
	}
	70% {
		top: -2px;
	}
	100% {
		top: 0;
	}
}

.wave_v_w span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_v_w span:nth-child(5n + 2) {
	animation-delay: 0.1s;
}

.wave_v_w span:nth-child(5n + 3) {
	animation-delay: 0.7s;
}

.wave_v_w span:nth-child(5n + 4) {
	animation-delay: 0.5s;
}

.wave_v_w span:nth-child(5n + 5) {
	animation-delay: 0.2s;
}


/******************************************************************************************/
/**　テキスト縦揺れ　**/
/******************************************************************************************/

.wave_v span {
	position: relative;
	animation: wave_v-anim 1s linear infinite;
}

@keyframes wave_v-anim {
	0% {
		top: 0;
	}
	30% {
		top: 2px;
	}
	70% {
		top: -2px;
	}
	100% {
		top: 0;
	}
}

.wave_v span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_v span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.wave_v span:nth-child(5n + 3) {
	animation-delay: 1.5s;
}

.wave_v span:nth-child(5n + 4) {
	animation-delay: 2s;
}


/******************************************************************************************/
/**　テキスト上移動　**/
/******************************************************************************************/

.wave_up span {
	position: relative;
	animation: wave_up-anim 1s linear infinite;
}

@keyframes wave_up-anim {
	0% {
		top: 0px;
	}
	33% {
		top: 1px;
	}
	66% {
		top: 0px;
	}
	100% {
		top: 1px;
	}
}

.wave_up span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_up span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.wave_up span:nth-child(5n + 3) {
	animation-delay: 0.4s;
}

.wave_up span:nth-child(5n + 4) {
	animation-delay: 0.6s;
}


/******************************************************************************************/
/**　テキスト下移動　**/
/******************************************************************************************/

.wave_dn span {
	position: relative;
	animation: wave_dn-anim 1s linear infinite;
}

@keyframes wave_dn-anim {
	0% {
		top: 0px;
	}
	33% {
		top: -1px;
	}
	66% {
		top: 0px;
	}
	100% {
		top: -1px;
	}
}

.wave_dn span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_dn span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.wave_dn span:nth-child(5n + 3) {
	animation-delay: 0.4s;
}

.wave_dn span:nth-child(5n + 4) {
	animation-delay: 0.6s;
}


/******************************************************************************************/
/**　テキスト横揺れ　**/
/******************************************************************************************/

.wave_h span {
	position: relative;
	animation: wave_h-anim 1s linear infinite;
}

@keyframes wave_h-anim {
	0% {
		right: 0px;
	}
	30% {
		right: 1px;
	}
	70% {
		right: -1px;
	}
	100% {
		right: 0px;
	}
}

.wave_h span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_h span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.wave_h span:nth-child(5n + 3) {
	animation-delay: 1.5s;
}

.wave_h span:nth-child(5n + 4) {
	animation-delay: 2s;
}





/******************************************************************************************/
/**　テキストがたがた揺れ　**/
/******************************************************************************************/

.wave_vh span {
	position: relative;
	animation: wave_vh-anim 1s linear infinite;
}

@keyframes wave_vh-anim {
	0% {
		left: 0;
	}
	30% {
		left: 2px;
		top: 1px;
	}
	70% {
		right: -2px;
	}
	100% {
		left: 0;
	}
}

.wave_vh span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_vh span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.wave_vh span:nth-child(5n + 3) {
	animation-delay: 1.0s;
}

.wave_vh span:nth-child(5n + 4) {
	animation-delay: 0.5s;
}


/******************************************************************************************/
/**　テキストくるくる揺れ　**/
/******************************************************************************************/

.wave_vhvh span {
	position: relative;
	animation: wave_vhvh-anim 1s linear infinite;
}

@keyframes wave_vhvh-anim {
	0% {
		left: 0;
	}
	25% {
		left: -1px;
		top: 1px;
	}
	50% {
		left: 1px;
		top: 2px;
	}
	75% {
		left: 2px;
		top: 1px;
	}
	100% {
		left: 0;
	}
}

.wave_vhvh span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.wave_vhvh span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.wave_vhvh span:nth-child(5n + 3) {
	animation-delay: 1.0s;
}

.wave_vhvh span:nth-child(5n + 4) {
	animation-delay: 0.5s;
}


/******************************************************************************************/
/**　テキストぴかぴか　**/
/******************************************************************************************/

.text_pikapika span {
	position: relative;
	animation: text_pikapika-anim 4s linear infinite;
}

@keyframes text_pikapika-anim {
	0% {
		opacity: 0.6;
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

.text_pikapika span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.text_pikapika span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.text_pikapika span:nth-child(5n + 3) {
	animation-delay: 1.0s;
}

.text_pikapika span:nth-child(5n + 4) {
	animation-delay: 0.5s;
}


/******************************************************************************************/
/**　テキスト伸縮　**/
/******************************************************************************************/

.text_nobichijimi span {
	position: relative;
	animation: text_nobichijimi-anim 2s linear infinite;
}

@keyframes text_nobichijimi-anim {
	0% {
		right: 0px;
	}
	30% {
		right 6px;
		margin-right:5px;
	}
	70% {
		right: -6px;
		margin-right:5px;
	}
	100% {
		right: 0px;
	}
}

.text_nobichijimi span:nth-child(5n + 1) {
	animation-delay: 0s;
}

.text_nobichijimi span:nth-child(5n + 2) {
	animation-delay: 0.2s;
}

.text_nobichijimi span:nth-child(5n + 3) {
	animation-delay: 1.0s;
}

.text_nobichijimi span:nth-child(5n + 4) {
	animation-delay: 0.5s;
}


/******************************************************************************************/
/**　テキスト　アンダーライン　黄色　**/
/******************************************************************************************/

.text_underline_ylw {
    position: relative;
	text-shadow: #ffffff 1px 0, #ffffff -1px 0, #ffffff 0 -1px, #ffffff 0 1px, #ffffff 1px 1px, #ffffff -1px 1px, #ffffff 1px -1px, #ffffff -1px -1px, #ffffff 1px 1px, #ffffff -1px 1px, #ffffff 1px -1px, #ffffff -1px -1px, #ffffff 1px 1px, #ffffff -1px 1px, #ffffff 1px -1px, #ffffff -1px -1px, rgba(255, 255, 255, .1) 0px 0px 0px;
}

.text_underline_ylw::before {
    content: "";
    width: 0;
    height: 30px;
    display: block;
    background: linear-gradient(transparent 60%,#ffff99 60%);
    position: absolute;
    top: -7px;
    left: 0;
    z-index: -2;
    animation: underAnime 4s forwards ease-out infinite;
}

@keyframes underAnime {
    0% {
        width: 0;
    }
	40% {
        width: 0;
    }
    70% {
        width: 100%;
    }
	100% {
        width: 100%;
    }
}




/******************************************************************************************/
/**　ズーム　**/
/******************************************************************************************/

.zoom {
animation: zoom 4s ease-in-out normal;
}
/* zoom */
  @keyframes zoom {
  0% {
    width: 80px;
    height: 80px;
    background: #f0f0f0;
    box-shadow: 0 0 0 #cccccc, 0 0 0 #ffffff, 10px 10px 10px #cccccc inset, 0 0 0 #ffffff inset;
  }
  25% {
    width: 80px;
    height: 80px;
    background: #f8f8f8;
    box-shadow: 10px 10px 10px #cccccc, 10px 10px 10px #ffffff, 0 0 0 #cccccc inset, 0 0 0 #ffffff inset;
  }
  50% {
    width: 80px;
    height: 200px;
    background: #f8f8f8;
    box-shadow: 10px 10px 10px #cccccc, 10px 10px 10px #ffffff, 0 0 0 #cccccc inset, 0 0 0 #ffffff inset;
  }
  75% {
    width: 100%;
    height: 200px;
    background: #6b7784;
    box-shadow: 20px 20px 20px #cccccc, 0 0 0 #ffffff, 0 0 0 #cccccc inset, 2px 2px 2px #ffffff inset;
  }
  100% {
    box-shadow: none
  }
}


/******************************************************************************************/
/**　紙吹雪　**/
/******************************************************************************************/

.container_confetti {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* for text  */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container_confetti img {
  width: 100%;
  filter: brightness(1);
}

.confetti {
  position: absolute;
  width: 100%;
  height: 100%;
}

.confetti span {
  position: absolute;
  top: -10%;
  left: 0;
  width: 1.5vw;
  height: 1vw;
  background: #FFF;
}

/* add animation */
.confetti span:nth-child(2n+1) {
  animation: confetti-anim-1 10s 0s linear infinite;
}

.confetti span:nth-child(2n+2) {
  animation: confetti-anim-2 10s 0s linear infinite;
}

/* side position */
.confetti span:nth-child(1) {
  left: 0%;
}

.confetti span:nth-child(2) {
  left: 2%;
}

.confetti span:nth-child(3) {
  left: 4%;
}

.confetti span:nth-child(4) {
  left: 6%;
}

.confetti span:nth-child(5) {
  left: 8%;
}

.confetti span:nth-child(6) {
  left: 10%;
}

.confetti span:nth-child(7) {
  left: 12%;
}

.confetti span:nth-child(8) {
  left: 14%;
}

.confetti span:nth-child(9) {
  left: 16%;
}

.confetti span:nth-child(10) {
  left: 18%;
}

.confetti span:nth-child(11) {
  left: 20%;
}

.confetti span:nth-child(12) {
  left: 22%;
}

.confetti span:nth-child(13) {
  left: 24%;
}

.confetti span:nth-child(14) {
  left: 26%;
}

.confetti span:nth-child(15) {
  left: 28%;
}

.confetti span:nth-child(16) {
  left: 30%;
}

.confetti span:nth-child(17) {
  left: 32%;
}

.confetti span:nth-child(18) {
  left: 34%;
}

.confetti span:nth-child(19) {
  left: 36%;
}

.confetti span:nth-child(20) {
  left: 38%;
}

.confetti span:nth-child(21) {
  left: 40%;
}

.confetti span:nth-child(22) {
  left: 42%;
}

.confetti span:nth-child(23) {
  left: 44%;
}

.confetti span:nth-child(24) {
  left: 46%;
}

.confetti span:nth-child(25) {
  left: 48%;
}

.confetti span:nth-child(26) {
  left: 50%;
}

.confetti span:nth-child(27) {
  left: 52%;
}

.confetti span:nth-child(28) {
  left: 54%;
}

.confetti span:nth-child(29) {
  left: 56%;
}

.confetti span:nth-child(30) {
  left: 58%;
}

.confetti span:nth-child(31) {
  left: 60%;
}

.confetti span:nth-child(32) {
  left: 62%;
}

.confetti span:nth-child(33) {
  left: 64%;
}

.confetti span:nth-child(34) {
  left: 66%;
}

.confetti span:nth-child(35) {
  left: 68%;
}

.confetti span:nth-child(36) {
  left: 70%;
}

.confetti span:nth-child(37) {
  left: 72%;
}

.confetti span:nth-child(38) {
  left: 74%;
}

.confetti span:nth-child(39) {
  left: 76%;
}

.confetti span:nth-child(40) {
  left: 78%;
}

.confetti span:nth-child(41) {
  left: 80%;
}

.confetti span:nth-child(42) {
  left: 82%;
}

.confetti span:nth-child(43) {
  left: 84%;
}

.confetti span:nth-child(44) {
  left: 86%;
}

.confetti span:nth-child(45) {
  left: 88%;
}

.confetti span:nth-child(46) {
  left: 90%;
}

.confetti span:nth-child(47) {
  left: 92%;
}

.confetti span:nth-child(48) {
  left: 94%;
}

.confetti span:nth-child(49) {
  left: 96%;
}

.confetti span:nth-child(50) {
  left: 98%;
}

/* size */
.confetti span:nth-child(3n+1) {
  width: 0.5vw;
  height: 0.3vw;
}

.confetti span:nth-child(3n+2) {
  width: 0.6vw;
  height: 0.4vw;
}

.confetti span:nth-child(3n+3) {
  width: 0.7vw;
  height: 0.5vw;
}

/*834px以下*/
@media screen and (max-width: 834px){
	.confetti span:nth-child(3n+1) {
		width: 1vw;
		height: 0.6vw;
	}

	.confetti span:nth-child(3n+2) {
		width: 1.25vw;
		height: 0.8vw;
	}

	.confetti span:nth-child(3n+3) {
		width: 1.5vw;
		height: 1vw;
	}
}

/* colors */
.confetti span:nth-child(5n+1) {
  background: #ff879f;
}

.confetti span:nth-child(5n+2) {
  background: #a6ff83;
}

.confetti span:nth-child(5n+3) {
  background: #5dd9ff;
}

.confetti span:nth-child(5n+4) {
  background: #ff69ff;
}

.confetti span:nth-child(5n+5) {
  background: #fdff7e;
}


/* animation-duration */
.confetti span:nth-child(4n+1) {
  animation-duration: 2.5s;
}

.confetti span:nth-child(4n+2) {
  animation-duration: 6s;
}

.confetti span:nth-child(4n+3) {
  animation-duration: 4s;
}

.confetti span:nth-child(4n+4) {
  animation-duration: 3s;
}


/* animation-delay */
.confetti span:nth-child(11n+1) {
  animation-delay: 0s;
}

.confetti span:nth-child(11n+2) {
  animation-delay: 4.5s;
}

.confetti span:nth-child(11n+3) {
  animation-delay: 1s;
}

.confetti span:nth-child(11n+4) {
  animation-delay: 2.5s;
}

.confetti span:nth-child(11n+5) {
  animation-delay: 3s;
}

.confetti span:nth-child(11n+6) {
  animation-delay: 3.5s;
}

.confetti span:nth-child(11n+7) {
  animation-delay: 1.5s;
}

.confetti span:nth-child(11n+8) {
  animation-delay: 0.5s;
}

.confetti span:nth-child(11n+9) {
  animation-delay: 1s;
}

.confetti span:nth-child(11n+10) {
  animation-delay: 5.5s;
}

.confetti span:nth-child(11n+11) {
  animation-delay: 5s;
}

/* animation */
@keyframes confetti-anim-1 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(20vw) rotateX(180deg) rotateY(360deg);
  }
}

@keyframes confetti-anim-2 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(-20vw) rotateX(180deg) rotateY(360deg);
  }
}




/******************************************************************************************/
/**　キラキラ　**/
/******************************************************************************************/

.container_stars{
  position:relative;
}

.container_stars img{
  width: 100%;
  height:100%;
}

.stars{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height:100%;
}

.stars span{
  position:relative;
}

.stars span:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  
  /*星のサイズ調節*/
  transform:scale(0.40);
}

.stars span.s:before{
  
   /*20px 20pxが中央*/
  box-shadow: 20px 20px #FFFFFF;
}

.stars span.m:before{
  box-shadow: 
    /*1段目*/
    20px 10px #FFF176,
    /*2段目*/
    10px 20px #FFF176,
    20px 20px #FFFFFF,
    30px 20px #FFF176,
    /*3段目*/
    20px 30px #FFF176
}

.stars span.l:before{
  box-shadow: 
    /*0段目*/
    20px  0px #FDD835,
    /*1段目*/
    20px 10px #FFF176,
    /*2段目*/
     0px 20px #FDD835,
    10px 20px #FFF176,
    20px 20px #FFFFFF,
    30px 20px #FFF176,
    40px 20px #FDD835,
    /*3段目*/
    20px 30px #FFF176,
    /*4段目*/
    20px 40px #FDD835;
}


 /*
星の位置とアニメーション指定
最初の秒はアニメーション時間、2つ目は開始までの時間
*/
.stars span:nth-child(1){left:10%; top:10%; animation: star-anim 8s 0s infinite;}
.stars span:nth-child(2){left:80%; top:20%; animation: star-anim 6s 1s infinite;}
.stars span:nth-child(3){left:60%; top:40%; animation: star-anim 5s 2s infinite;}
.stars span:nth-child(4){left:20%; top:70%; animation: star-anim 7s 3s infinite;}
.stars span:nth-child(5){left:80%; top:80%; animation: star-anim 7s 4s infinite;}

.stars span:nth-child(6){left:40%; top:10%; animation: star-anim 4s 0s infinite;}
.stars span:nth-child(7){left:10%; top:50%; animation: star-anim 7s 1s infinite;}
.stars span:nth-child(8){left:50%; top:50%; animation: star-anim 8s 2s infinite;}
.stars span:nth-child(9){left:90%; top:90%; animation: star-anim 5s 3s infinite;}
.stars span:nth-child(10){left:80%; top:50%; animation: star-anim 7s 4s infinite;}

.stars span:nth-child(11){left:90%; top:10%; animation: star-anim 5s 0s infinite;}
.stars span:nth-child(12){left:10%; top:80%; animation: star-anim 6s 1s infinite;}
.stars span:nth-child(13){left:30%; top:20%; animation: star-anim 7s 2s infinite;}
.stars span:nth-child(14){left:60%; top:90%; animation: star-anim 8s 3s infinite;}
.stars span:nth-child(15){left:80%; top:50%; animation: star-anim 7s 4s infinite;}

/*アニメーションキーフレーム*/
@keyframes star-anim {
  0% {opacity:0;}
  5% {opacity:1;}
  10% {opacity:0;}
  55% {opacity:0;}
  60% {opacity:1;}
  95% {opacity:0;}
  100% {opacity:1;}
}




/******************************************************************************************/
/**　画像スライド　**/
/******************************************************************************************/


.slide img {
	width: inherit;
	height: inherit;
	margin: 0;
	padding: 0;
	border: none;
}

.slide {
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
}

.slide > :first-child {
	animation-name: slide;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes slide {
	0% {
		margin-left: 0;
	}
	12% {
		margin-left: -100%;
	}
	24% {
		margin-left: -200%;
	}
	36% {
		margin-left: -300%;
	}
	48% {
		margin-left: -400%;
	}
	60% {
		margin-left: -500%;
	}
	72% {
		margin-left: -600%;
	}
	84% {
		margin-left: -700%;
	}
	100% {
		margin-left: -800%;
	}
}

.slide_center {
	margin: auto;
}




/******************************************************************************************/
/**　回転テキスト　**/
/******************************************************************************************/

.container_circleText {
  padding: 10px;
  margin: 0;
}
.block_circleText {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
.circleText {
  overflow: visible;
  animation: rotation 9s linear infinite;
  &__circle {
    fill: none;
  }
  &__text {
    fill:#ff0000;
    font-size: 18px;
    letter-spacing: 0.05em;
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
	.block_circleText {
		width: 40px;
		height: 40px;
	}
}




/******************************************************************************************/
/**　回転画像　**/
/******************************************************************************************/

.rotateImage {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    animation-name: rotateY; /* アニメーションの名前を指定 */
    animation-duration: 4s; /* アニメーションの再生時間を指定 */
    animation-timing-function: linear; /* アニメーションの再生速度を指定 */
    animation-iteration-count: infinite; /* アニメーションの再生回数を指定 */
}

.rotateImage_slow {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    animation-name: rotateY; /* アニメーションの名前を指定 */
    animation-duration: 6s; /* アニメーションの再生時間を指定 */
    animation-timing-function: linear; /* アニメーションの再生速度を指定 */
    animation-iteration-count: infinite; /* アニメーションの再生回数を指定 */
}

@keyframes rotateY {
    0% {
        transform: rotateY(0); /* Y軸を中心に0°回転 */
    }
    25% {
        transform: rotateY(90deg); /* Y軸を中心に45°回転 */
    }
    50% {
        transform: rotateY(180deg); /* Y軸を中心に90°回転 */
    }
    75% {
        transform: rotateY(270deg); /* Y軸を中心に135°回転（裏） */
    }
    100% {
        transform: rotateY(360deg); /* Y軸を中心に180°回転（裏） */
    }
}


.rotateImageX {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    animation-name: rotateX; /* アニメーションの名前を指定 */
    animation-duration: 4s; /* アニメーションの再生時間を指定 */
    animation-timing-function: linear; /* アニメーションの再生速度を指定 */
    animation-iteration-count: infinite; /* アニメーションの再生回数を指定 */
}

@keyframes rotateX {
    60% {
        transform: rotateX(0); /* Y軸を中心に0°回転 */
    }
    70% {
        transform: rotateX(90deg); /* Y軸を中心に45°回転 */
    }
    80% {
        transform: rotateX(180deg); /* Y軸を中心に90°回転 */
    }
    90% {
        transform: rotateX(270deg); /* Y軸を中心に135°回転（裏） */
    }
    100% {
        transform: rotateX(360deg); /* Y軸を中心に180°回転（裏） */
    }
}






.circleImage_container {
	margin: 20px 0 -50px 0;
}

.circleImage {
	width: 100px;
}

.circleImage--circle {
	width: 100%;
	animation: rotate 15s linear infinite;
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

.circleImage--shuttle {
	width: 50px;
	top: 58%;
	left: 50%;
	animation: floating-shuttle 1s ease-in-out infinite alternate-reverse;
}

@keyframes floating-shuttle {
  0% {
    transform: translate(8%, -157%);
  }
  100% {
    transform: translate(8%, -162%);
  }
}




/******************************************************************************************/
/**　吹き出し　**/
/******************************************************************************************/

/*吹き出しを動かす　震え*/

.custom-speech-move .speech-icon img{
    animation: shivering 2s linear infinite;
}
@keyframes shivering {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(5deg);
  }
  25% {
    transform: rotateZ(-5deg);
  }
  30% {
    transform: rotateZ(3deg);
  }
  35% {
    transform: rotateZ(-2deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}


/*吹き出しを動かす　ふわふわ*/

.custom-speech-fuwafuwa .speech-icon img{
    display: block;
	animation: floating-y-speech 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y-speech {
  0% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0%);
  }
}


.custom-speech-fuwafuwaS .speech-icon img{
    display: block;
	animation: floating-yS-speech 0.5s ease-in-out infinite alternate-reverse;
}
@keyframes floating-yS-speech {
  0% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(0%);
  }
}


/*吹き出しを動かす　横揺れ*/

.custom-speech-yokoyure .speech-icon img{
    display: block;
	animation: yokoyure_anime_speech 2s infinite;
}

@keyframes yokoyure_anime_speech {
	0% {
		transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


/*吹き出しを動かす　脈打ち*/

.custom-speech-myakuchi .speech-icon img{
    display: block;
	animation: heartbeat 3s infinite ease-in-out;
}

.custom-speech-myakuchi02 .speech-icon img{
    display: block;
	animation: heartbeat02 3s infinite ease-in-out;
}


/*吹き出しを動かす　回転*/

.custom-speech-rotate .speech-icon img{
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: rotateY_speech; /* アニメーションの名前を指定 */
    animation-duration: 3s; /* アニメーションの再生時間を指定 */
    animation-timing-function: linear; /* アニメーションの再生速度を指定 */
    animation-iteration-count: infinite; /* アニメーションの再生回数を指定 */
}
@keyframes rotateY_speech {
    0% {
        transform: rotateY(0); /* Y軸を中心に0°回転 */
    }
    25% {
        transform: rotateY(90deg); /* Y軸を中心に45°回転 */
    }
    50% {
        transform: rotateY(180deg); /* Y軸を中心に90°回転 */
    }
    75% {
        transform: rotateY(270deg); /* Y軸を中心に135°回転（裏） */
    }
    100% {
        transform: rotateY(360deg); /* Y軸を中心に180°回転（裏） */
    }
}




/******************************************************************************************/
/**　画像フェードインフェードアウト　**/
/******************************************************************************************/

/* スライダー全体のスタイル */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* 各スライド画像のスタイル */
.slideimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: fadeInOut 6s infinite;
    transition: opacity 1.5s ease-in-out;
}
/* 最初の画像だけ親要素の高さを確保させる */
.slideimg:nth-child(1) {
    position: relative;
    animation-delay: 0s;
}
/* 2枚目の画像のアニメーション遅延 */
.slideimg:nth-child(2) {
    animation-delay: 3s;
}
/* フェードイン・アウトのアニメーション */
@keyframes fadeInOut {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}
/* 画像の表示調整 */
.slideimg img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* 各スライド画像のスタイル */
.slideimg2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: fadeInOut 12s infinite;
    transition: opacity 1.5s ease-in-out;
}
/* 最初の画像だけ親要素の高さを確保させる */
.slideimg2:nth-child(1) {
    position: relative;
    animation-delay: 0s;
}
/* 2枚目の画像のアニメーション遅延 */
.slideimg2:nth-child(2) {
    animation-delay: 3s;
}
/* 画像の表示調整 */
.slideimg2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}




/******************************************************************************************/
/**　波紋　**/
/******************************************************************************************/

.hamon_ylw {
	position: relative;
	transition: 1s;
}

.hamon_ylw:before, .hamon_ylw:after {
	content: "";
	position: absolute;
	z-index: 0;
	width: 42%;
	height: 110%;
	top: -5px;
	left: 0;
	background-color: transparent;
	border: 4px double #ffff99;
	box-shadow: 0px 0px 8px #ffffc8;
	border-radius: 100px;
	transform: translate3d(0,0,0);
}

.hamon_ylw:before {
	animation: anime 1s ease-out infinite;
}

.hamon_ylw:after {
	animation: anime 1s ease-out 1s infinite;
}

@keyframes anime{
	0%{transform:scale(.95); opacity:1}
	90%{opacity:.1}to{transform:scale(1.2,1.4); opacity:0}
}

@media screen and (max-width: 834px){
	.hamon_ylw:before, .hamon_ylw:after {
		width: 60%;
	}
}


/******************************************************************************************/
/**　画像キラーン　**/
/******************************************************************************************/

.kiran-img {
	position :relative;
	overflow :hidden;
}

.kiran {
	height:100%;
	width:50px;
	position:absolute;
	top:-180px;
	left:0;
	background-color: #fff;
	opacity:0;
	transform: rotate(15deg);
	animation: reflection 0.5s ease-in-out infinite;
	-webkit-transform: rotate(15deg);
	-webkit-animation: reflection 3s ease-in-out infinite;
	-moz-transform: rotate(15deg);
	-moz-animation: reflection 2s ease-in-out infinite;
	-ms-transform: rotate(15deg);
	-ms-animation: reflection 2s ease-in-out infinite;
	-o-transform: rotate(15deg);
	-o-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
	0% { transform: scale(0) rotate(15deg); opacity: 0; }
	80% { transform: scale(0) rotate(15deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(15deg); opacity: 1; }
	100% { transform: scale(50) rotate(15deg); opacity: 0; }
}

@-webkit-keyframes reflection {
	0% { -webkit-transform: scale(0) rotate(15deg); opacity: 0; }
	70% { -webkit-transform: scale(0) rotate(15deg); opacity: 0.5; }
	71% { -webkit-transform: scale(4) rotate(15deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(15deg); opacity: 0; }
}

@-moz-keyframes reflection {
	0% { -moz-transform: scale(0) rotate(15deg); opacity: 0; }
	70% { -moz-transform: scale(0) rotate(15deg); opacity: 0.5; }
	71% { -moz-transform: scale(4) rotate(15deg); opacity: 1; }
	100% { -moz-transform: scale(50) rotate(15deg); opacity: 0; }
}

@media screen and (max-width: 834px){
	.kiran {
		-webkit-animation: reflection 4s ease-in-out infinite;
}
}