/* common css */
.g-effect-random,
.g-effect-kamitape .g-effect__obj1,
.g-effect-kamitape .g-effect__obj2,
.g-effect-cake,
.g-effect-hanabi_lv1,
.g-effect-fever .g-effect__bg1,
.g-effect-fever .g-effect__bg2,
.g-effect-birthday_box .g-effect__bg1,
.g-effect-birthday_box .g-effect__bg2,
.g-effect-birthday_box .g-effect__bg3,
.g-effect-birthday_box .g-effect__bg4,
.g-effect-random_new,
.g-effect-center {
	display: block;
	height: 0;
	left: 0;
	margin: 0 0;
	position: absolute;
	top: 0;
	width: 0;
	z-index: 1000;
}
.g-effect-random:before,
.g-effect-kamitape .g-effect__obj1:before,
.g-effect-kamitape .g-effect__obj2:before,
.g-effect-cake:before,
.g-effect-hanabi_lv1:before,
.g-effect-fever .g-effect__bg1:before,
.g-effect-fever .g-effect__bg2:before,
.g-effect-birthday_box .g-effect__bg1:before,
.g-effect-birthday_box .g-effect__bg2:before,
.g-effect-birthday_box .g-effect__bg3:before,
.g-effect-birthday_box .g-effect__bg4:before,
.g-effect-random_new:before,
.g-effect-center:before {
	background-position: 0 0;
	background-repeat: no-repeat;
	content: "";
	display: block;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	-webkit-transform: translate(-50%, -50%);
	-webkit-transform-origin: center center;
	-ms-transform: translate(-50%, -50%);
	-ms-transform-origin: center center;
}
.g-lottie {
	z-index: 10000;
	position: absolute;
	pointer-events: none;
}
.g-lottie-center {
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* distinct_name =  "random" START */
.g-effect-random {
	animation: keyframes-action-insert-random 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	-webkit-animation: keyframes-action-insert-random 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.g-effect-random:before {
	animation: keyframes-effect-random 1s steps(2) infinite;
	-webkit-animation: keyframes-effect-random 1s steps(2) infinite;
	height: 200px;
	width: 200px;
}

@-webkit-keyframes keyframes-effect-random {
	100% {
		background-position: -400px 0;
	}
}

@keyframes keyframes-effect-random {
	100% {
		background-position: -400px 0;
	}
}

@-webkit-keyframes keyframes-action-insert-random {
	0% {
		opacity: 0;
		transform: scale(4);
		-webkit-transform: scale(4);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@keyframes keyframes-action-insert-random {
	0% {
		opacity: 0;
		transform: scale(4);
		-webkit-transform: scale(4);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

.g-effect-random.is-remove {
	opacity: 0;
	animation: keyframes-remove-random 1s ease-in 1;
	-webkit-animation: keyframes-remove-random 1s ease-in 1;
}

@-webkit-keyframes keyframes-remove-random {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-remove-random {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* distinct_name =  "random" END */


/* distinct_name =  "kamitape" START */
.g-effect-kamitape {
	position: absolute;
	top: 250px;
	left: 50%;
}

.g-effect-kamitape .g-effect__obj1 {
	animation: keyframes-action-insert-kamitape__obj1 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
	-webkit-animation: keyframes-action-insert-kamitape__obj1 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

.g-effect-kamitape .g-effect__obj1:before {
	animation: keyframes-effect-kamitape__obj1 3s steps(4) infinite;
	-webkit-animation: keyframes-effect-kamitape__obj1 3s steps(4) infinite;
	background-image: url("/images/gifting/effect/23_kamitape_left.png");
	height: 750px;
	left: -340px;
	position: relative;
	width: 750px;
}

@-webkit-keyframes keyframes-effect-kamitape__obj1 {
	100% {
		background-position: -3000px 0;
	}
}

@keyframes keyframes-effect-kamitape__obj1 {
	100% {
		background-position: -3000px 0;
	}
}

@-webkit-keyframes keyframes-action-insert-kamitape__obj1 {
	0% {
		opacity: 0;
		transform: scale(0.1) rotate(50deg);
		-webkit-transform: scale(0.1) rotate(50deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
	}
}

@keyframes keyframes-action-insert-kamitape__obj1 {
	0% {
		opacity: 0;
		transform: scale(0.1) rotate(50deg);
		-webkit-transform: scale(0.1) rotate(50deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
	}
}

.g-effect-kamitape .g-effect__obj2 {
	animation: keyframes-action-insert-kamitape__obj2 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
	-webkit-animation: keyframes-action-insert-kamitape__obj2 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

.g-effect-kamitape .g-effect__obj2:before {
	animation: keyframes-effect-kamitape__obj2 3s steps(4) infinite;
	-webkit-animation: keyframes-effect-kamitape__obj2 3s steps(4) infinite;
	background-image: url("/images/gifting/effect/23_kamitape_right.png");
	height: 750px;
	position: relative;
	right: -340px;      
	width: 750px;
}

@-webkit-keyframes keyframes-effect-kamitape__obj2 {
	100% {
		background-position: -3000px 0;
	}
}

@keyframes keyframes-effect-kamitape__obj2 {
	100% {
		background-position: -3000px 0;
	}
}

@-webkit-keyframes keyframes-action-insert-kamitape__obj2 {
	0% {
		opacity: 0;
		transform: scale(0.1) rotate(-50deg);
		-webkit-transform: scale(0.1) rotate(-50deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
	}
}

@keyframes keyframes-action-insert-kamitape__obj2 {
	0% {
		opacity: 0;
		transform: scale(0.1) rotate(-50deg);
		-webkit-transform: scale(0.1) rotate(-50deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
	}
}

.g-effect-kamitape.is-remove {
	animation: keyframes-remove-kamitape 1s ease-in 1;
	-webkit-animation: keyframes-remove-kamitape 1s ease-in 1;
	opacity: 0;
}

@-webkit-keyframes keyframes-remove-kamitape {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-remove-kamitape {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* distinct_name =  "kamitape" END */


/* distinct_name =  "danmaku" START */
.g-effect-danmaku {
	animation: keyframes-action-insert-danmaku 8s linear;
	-webkit-animation: keyframes-action-insert-danmaku 8s linear;
	color: #fff;
	display: block;
	font-size: 50px;
	font-weight: bold;
	left: 0px;
	line-height: 1;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0px;
	text-align: left;
	text-shadow: 1px 1px 3px rgba(51, 51, 51, 0.5);
	transform-origin: center center;
	-ms-transform-origin: center center;
	-webkit-transform-origin: center center;
	white-space: nowrap;
	z-index: 1;
}

.g-effect-danmaku .g-effect__text {
	line-height: 1.5;
	position: relative;
}

.g-effect-danmaku.is-color-0-0 {
	color: #ffffff;
}

.g-effect-danmaku.is-color-0-1 {
	color: white;
}

.g-effect-danmaku.is-color-0-2 {
	color: white;
}

.g-effect-danmaku.is-color-1-0 {
	color: #0072FF;
}

.g-effect-danmaku.is-color-1-1 {
	color: #147dff;
}

.g-effect-danmaku.is-color-1-2 {
	color: #2989ff;
}

.g-effect-danmaku.is-color-2-0 {
	color: #480CE8;
}

.g-effect-danmaku.is-color-2-1 {
	color: #5215f3;
}

.g-effect-danmaku.is-color-2-2 {
	color: #6029f4;
}

.g-effect-danmaku.is-color-3-0 {
	color: #FF0DF9;
}

.g-effect-danmaku.is-color-3-1 {
	color: #ff21fa;
}

.g-effect-danmaku.is-color-3-2 {
	color: #ff36fa;
}

.g-effect-danmaku.is-color-4-0 {
	color: #FF9700;
}

.g-effect-danmaku.is-color-4-1 {
	color: #ff9f14;
}

.g-effect-danmaku.is-color-4-2 {
	color: #ffa829;
}

.g-effect-danmaku.is-color-5-0 {
	color: #E8CB0C;
}

.g-effect-danmaku.is-color-5-1 {
	color: #f3d615;
}

.g-effect-danmaku.is-color-5-2 {
	color: #f4d929;
}

.g-effect-danmaku.is-color-6-0 {
	color: #8AFF0D;
}

.g-effect-danmaku.is-color-6-1 {
	color: #94ff21;
}

.g-effect-danmaku.is-color-6-2 {
	color: #9eff36;
}

.g-effect-danmaku.is-color-7-0 {
	color: #E8380C;
}

.g-effect-danmaku.is-color-7-1 {
	color: #f34215;
}

.g-effect-danmaku.is-color-7-2 {
	color: #f45129;
}

.g-effect-danmaku.is-color-8-0 {
	color: #FF00A7;
}

.g-effect-danmaku.is-color-8-1 {
	color: #ff14ae;
}

.g-effect-danmaku.is-color-8-2 {
	color: #ff29b5;
}

.g-effect-danmaku.is-color-9-0 {
	color: #00FF0F;
}

.g-effect-danmaku.is-color-9-1 {
	color: #14ff22;
}

.g-effect-danmaku.is-color-9-2 {
	color: #29ff35;
}

.g-effect-danmaku.is-color-10-0 {
	color: #0CE8C2;
}

.g-effect-danmaku.is-color-10-1 {
	color: #15f3cd;
}

.g-effect-danmaku.is-color-10-2 {
	color: #29f4d1;
}

.g-effect-danmaku.is-speed-0 {
	animation: keyframes-action-insert-danmaku 7s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7s linear both;
}

.g-effect-danmaku.is-speed-1 {
	animation: keyframes-action-insert-danmaku 7.1s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.1s linear both;
}

.g-effect-danmaku.is-speed-2 {
	animation: keyframes-action-insert-danmaku 7.2s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.2s linear both;
}

.g-effect-danmaku.is-speed-3 {
	animation: keyframes-action-insert-danmaku 7.3s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.3s linear both;
}

.g-effect-danmaku.is-speed-4 {
	animation: keyframes-action-insert-danmaku 7.4s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.4s linear both;
}

.g-effect-danmaku.is-speed-5 {
	animation: keyframes-action-insert-danmaku 7.5s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.5s linear both;
}

.g-effect-danmaku.is-speed-6 {
	animation: keyframes-action-insert-danmaku 7.6s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.6s linear both;
}

.g-effect-danmaku.is-speed-7 {
	animation: keyframes-action-insert-danmaku 7.7s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.7s linear both;
}

.g-effect-danmaku.is-speed-8 {
	animation: keyframes-action-insert-danmaku 7.8s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.8s linear both;
}

.g-effect-danmaku.is-speed-9 {
	animation: keyframes-action-insert-danmaku 7.9s linear both;
	-webkit-animation: keyframes-action-insert-danmaku 7.9s linear both;
}

@-webkit-keyframes keyframes-action-insert-danmaku {
	0% {
		opacity: 0;
		text-indent: 100%;
	}
	5% {
		opacity: 1;
	}
	100% {
		text-indent: -30em;
	}
}

@keyframes keyframes-action-insert-danmaku {
	0% {
		opacity: 0;
		text-indent: 100%;
	}
	5% {
		opacity: 1;
	}
	100% {
		text-indent: -30em;
	}
}
/* distinct_name =  "danmaku" END */


/* distinct_name =  "cake" START */
.g-effect-cake {
	animation: keyframes-action-insert-cake 5s ease-in-out;
	-webkit-animation: keyframes-action-insert-cake 5s ease-in-out;
}

.g-effect-cake:before {
	animation: keyframes-effect-cake 1s steps(2) infinite;
	-webkit-animation: keyframes-effect-cake 1s steps(2) infinite;
	height: 200px;
	width: 280px;
}

@-webkit-keyframes keyframes-effect-cake {
	100% {
		background-position: -560px 0;
	}
}

@keyframes keyframes-effect-cake {
	100% {
		background-position: -560px 0;
	}
}

.g-effect-cake .g-effect__text {
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	left: -117px;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top: -23px;
	width: 240px;
	white-space: nowrap;
}

@-webkit-keyframes keyframes-action-insert-cake {
	0% {
		opacity: 0;
		transform: translate(0px, 30px);
		-webkit-transform: translate(0px, 30px);
		transform: scale(2);
		-webkit-transform: scale(2);
	}
	30% {
		opacity: 1;
		transform: scale(2);
		-webkit-transform: scale(2);
	}
	100% {
		opacity: 1;
		transform: translate(0px, 0px);
		-webkit-transform: translate(0px, 0px);
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@keyframes keyframes-action-insert-cake {
	0% {
		opacity: 0;
		transform: translate(0px, 30px);
		-webkit-transform: translate(0px, 30px);
		transform: scale(2);
		-webkit-transform: scale(2);
	}
	30% {
		opacity: 1;
		transform: scale(2);
		-webkit-transform: scale(2);
	}
	100% {
		opacity: 1;
		transform: translate(0px, 0px);
		-webkit-transform: translate(0px, 0px);
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

.g-effect-cake.is-remove {
	animation: keyframes-remove-cake 1s ease-in 1;
	-webkit-animation: keyframes-remove-cake 1s ease-in 1;
	opacity: 0;
}

@-webkit-keyframes keyframes-remove-cake {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-remove-cake {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* distinct_name =  "cake" END */


/* distinct_name =  "hanabi" START */
.g-effect-hanabi_lv1 {
	animation: keyframes-action-insert-hanabi_lv1 1s ease-in;
	-webkit-animation: keyframes-action-insert-hanabi_lv1 1s ease-in;
}

.g-effect-hanabi_lv1:before {
	animation: keyframes-effect-hanabi_lv1 1s steps(2) infinite;
	-webkit-animation: keyframes-effect-hanabi_lv1 1s steps(2) infinite;
	background-image: url("/images/gifting/effect/10_hanabi_lv1.png");
	height: 200px;      
	width: 200px;
}

@-webkit-keyframes keyframes-effect-hanabi_lv1 {
	100% {
		background-position: -400px 0;
	}
}

@keyframes keyframes-effect-hanabi_lv1 {
	100% {
		background-position: -400px 0;
	}
}

@-webkit-keyframes keyframes-action-insert-hanabi_lv1 {
	0% {
		opacity: 0;
		transform: scale(0.1);
		-webkit-transform: scale(0.1);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@keyframes keyframes-action-insert-hanabi_lv1 {
	0% {
		opacity: 0;
		transform: scale(0.1);
		-webkit-transform: scale(0.1);
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

.g-effect-hanabi_lv1.is-remove {
	animation: keyframes-remove-hanabi_lv1 1s ease-in 1;
	-webkit-animation: keyframes-remove-hanabi_lv1 1s ease-in 1;
	opacity: 0;
}

@-webkit-keyframes keyframes-remove-hanabi_lv1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-remove-hanabi_lv1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* distinct_name =  "hanabi" END */


/* distinct_name =  "fever" START */
.g-effect-fever {
	display: block;
	height: 0;
	left: 50%;
	margin: 0 0;
	position: absolute;
	top: 300px;
	width: 0;
	z-index: 1;
}

.g-effect-fever .g-effect__bg1 {
	animation: keyframes-action-insert-fever__bg1 4s ease-in;
	-webkit-animation: keyframes-action-insert-fever__bg1 4s ease-in;
	z-index: 3;      
}

.g-effect-fever .g-effect__bg1:before {
	animation: keyframes-effect-fever__bg1 1s steps(3) infinite;
	-webkit-animation: keyframes-effect-fever__bg1 1s steps(3) infinite;
	height: 940px;
	width: 1608px;      
}

@-webkit-keyframes keyframes-effect-fever__bg1 {
	100% {
		background-position: -4824px 0;
	}
}

@keyframes keyframes-effect-fever__bg1 {
	100% {
		background-position: -4824px 0;
	}
}

@-webkit-keyframes keyframes-action-insert-fever__bg1 {
	0% {
		opacity: 0;
		top: -450px;
	}
	100% {
		opacity: 1;
		top: 0px;
	}
}

@keyframes keyframes-action-insert-fever__bg1 {
	0% {
		opacity: 0;
		top: -450px;
	}
	100% {
		opacity: 1;
		top: 0px;
	}
}

.g-effect-fever .g-effect__bg2 {
	animation: keyframes-action-insert-fever__bg2 1s ease-in, keyframes-action-loop-fever__bg2 1s infinite 1.1s;
	-webkit-animation: keyframes-action-insert-fever__bg2 1s ease-in, keyframes-action-loop-fever__bg2 1s infinite 1.1s;
	z-index: 2;
}

.g-effect-fever .g-effect__bg2:before {
	animation: keyframes-effect-fever__bg2 1s steps(2) infinite;
	-webkit-animation: keyframes-effect-fever__bg2 1s steps(2) infinite;
	height: 940px;
	width: 1608px;
}

@-webkit-keyframes keyframes-effect-fever__bg2 {
	100% {
		background-position: -3216px 0;
	}
}

@keyframes keyframes-effect-fever__bg2 {
	100% {
		background-position: -3216px 0;
	}
}

@-webkit-keyframes keyframes-action-insert-fever__bg2 {
	0% {
		opacity: 0;
		top: 250px;
	}
	100% {
		opacity: 1;
		top: 0px;
	}
}

@keyframes keyframes-action-insert-fever__bg2 {
	0% {
		opacity: 0;
		top: 250px;
	}
	100% {
		opacity: 1;
		top: 0px;
	}
}

.g-effect-fever .g-effect__bg3 {
	animation: keyframes-action-insert-fever__bg3 2s ease-in;
	-webkit-animation: keyframes-action-insert-fever__bg3 2s ease-in;
	background-color: rgba(25, 45, 81, 0.5);
	height: 940px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform-origin: center center;
	-ms-transform-origin: center center;
	-webkit-transform-origin: center center;
	width: 1608px;
	z-index: 1;
}

@-webkit-keyframes keyframes-action-insert-fever__bg3 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes keyframes-action-insert-fever__bg3 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.g-effect-fever.is-remove {
	animation: keyframes-remove-fever 1s ease-in 1;
	-webkit-animation: keyframes-remove-fever 1s ease-in 1;
	opacity: 0;
}

@-webkit-keyframes keyframes-remove-fever {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-remove-fever {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* distinct_name =  "fever" END */


/* distinct_name =  "birthdayBox" START */
.g-effect-birthday_box .g-effect__bg1:before {
	background-size: cover;
	background-image: inherit;
	height: 720px;
	left: 50%;
	position: fixed;
	top: 50%;
	width: 1280px;
}
.g-effect-birthday_box.is-remove {
	animation: keyframes-remove-birthday_box 1s ease-in 1;
	-webkit-animation: keyframes-remove-birthday_box 1s ease-in 1;
	opacity: 0;
}

@-webkit-keyframes keyframes-remove-birthday_box {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes keyframes-remove-birthday_box {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* distinct_name =  "birthdayBox" END */


/* staged gifts START */
.g-stand-birthdayBox {
	background: url("/images/gifting/effect/stand_birthday_box.png") top center;
	bottom: 0;
	height: 120px;
	position: absolute;
	width: 100px;
	z-index: 1;
}

.g-stand-birthdayBox .g-stand__name {
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: bold;
	left: -100px;
	margin: 0 auto;
	position: absolute;
	right: -100px;
	text-align: center;
	top: 80px;
	white-space: nowrap;
	text-shadow: 0px 1px 0px black;
}

.g-stand-hanawa {
	background: url("/images/gifting/effect/18_hanawa.png") top center;
	bottom: 0;
	height: 125px;
	position: absolute;
	width: 75px;
	z-index: 1;
}

.g-stand-hanawa .g-stand__name {
	color: #21282a;
	display: block;
	font-size: 12px;
	font-weight: bold;
	left: -100px;
	margin: 0 auto;
	position: absolute;
	right: -100px;
	text-align: center;
	top: 80px;
	white-space: nowrap;
	text-shadow: 0px 1px 0px white;
}

.g-stand-bear {
	background: url("/images/gifting/effect/19_bear.png") top center;
	bottom: 0;
	height: 124px;
	position: absolute;
	width: 99px;
	z-index: 1;
}

.g-stand-bear .g-stand__name {
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: bold;
	left: -100px;
	margin: 0 auto;
	position: absolute;
	right: -100px;
	text-align: center;
	top: 80px;
	white-space: nowrap;
	text-shadow: 0px 1px 0px black;
}
/* staged gifts END */