@charset "UTF-8";


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
span,
em,
strong,
ul,
ol,
li,
dl,
dt,
dd,
a {
	background-repeat: no-repeat;
	background-size: 100% auto;
}

a {
	outline: none;
}

.sp {
	display: none;
}

/*CF*/
.cf:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.cf {
	display: inline-block;
}

/* Hides from IE Mac \*/
* html .cf {
	height: 1%;
}

.cf {
	display: block;
}

/* End Hack */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
body {
	font-family: Noto Sans HK, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
}

html,
body {
	width: 100%;
	height: 100%;
}

#grandwrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#contents_wrapper h1,
#contents_wrapper h2,
#contents_wrapper h3,
#contents_wrapper p,
#contents_wrapper li,
#contents_wrapper small {
	text-indent: -9999px;
}


#contents_wrapper #rules ul,
#contents_wrapper .box,
#contents_wrapper #app {
	background-color: rgba(26, 10, 127, 0.3);
	box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3), 0px 0px 7px 0px rgba(255, 255, 255, 0.3) inset;
	border: 1px solid #ffffff;
}

#contents_wrapper {
	padding: 0 0 100px 0;
}




/*bg_parallax*/
.bg_scroll {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background-image: url(../images/bg.png);
	background-repeat: repeat;
	background-position: 0px 0px;
	background-size: 850px auto;
}








/*vote_uncommon*/
#contents_wrapper .btn {
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

#contents_wrapper .btn:hover {
	transform: scale(1.1, 1.1);
}


/*decoration chara*/
#contents_wrapper .deco_chara {
	z-index: 8;
	position: absolute;
	left: 50%;
}

/*decoration ball*/
#contents_wrapper .deco_ball {
	z-index: 8;
	position: absolute;
	left: 50%;
	width: 144px;
	height: 144px;
}


/*decoration shine*/
#contents_wrapper .deco_shine {
	z-index: 7;
}

#contents_wrapper .a.deco_shine {
	position: absolute;
	left: 50%;
	width: 78px;
	height: 58px;
	background-image: url(../images/shine_a.png);
}

#contents_wrapper .b.deco_shine {
	position: absolute;
	left: 50%;
	width: 55px;
	height: 72px;
	background-image: url(../images/shine_b.png);
}

#contents_wrapper .c.deco_shine {
	position: absolute;
	left: 50%;
	width: 78px;
	height: 103px;
	background-image: url(../images/shine_c.png);
}

#contents_wrapper .d.deco_shine {
	position: absolute;
	left: 50%;
	width: 189px;
	height: 98px;
	background-image: url(../images/shine_d.png);
}

#contents_wrapper .x.deco_shine {
	position: absolute;
	left: 50%;
	width: 132px;
	height: 70px;
	background-image: url(../images/shine_x.png);
	background-size: 132px auto;
}

#contents_wrapper .y.deco_shine {
	position: absolute;
	left: 50%;
	width: 78px;
	height: 103px;
	background-image: url(../images/shine_y.png);
	background-size: 78px auto;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　COMMON_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/








/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
kv_start z-index:0-10
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #kv {
	/*	opacity: 0.5;*/
	position: relative;
	height: 700px;
}



/*monst_logo*/
#contents_wrapper #kv .monst {
	z-index: 10;
	position: absolute;
	top: 10px;
	left: 50%;
	width: 126px;
	height: 106px;
	margin: 0 0 0 378px;
	text-indent: -9999px;
	background-image: url(../images/monst_tw_logo.png);
}


/*main_logo*/
#contents_wrapper #kv h1 {
	z-index: 10;
	position: absolute;
	top: 30px;
	left: 50%;
	width: 324px;
	height: 174px;
	margin: 0 0 0 -162px;
	background-image: url(../images/kv_logo.png);
	background-size: 324px auto;
}

/*result_logo*/
#contents_wrapper #kv h2 {
	z-index: 10;
	position: absolute;
	top: 300px;
	left: 50%;
	width: 429px;
	height: 126px;
	margin: 0 0 0 -215px;
	background-image: url(../images/result_kv_h2.png);
}

#contents_wrapper #kv p {
	z-index: 10;
	position: absolute;
	top: 220px;
	left: 50%;
	width: 218px;
	height: 55px;
	margin: 0 0 0 -109px;
	background-image: url(../images/result_kv_text.png);
}



/*kv_result_ball*/
#contents_wrapper #kv .result {
	display: flex;
	width: 820px;
	height: 640px;
	justify-content: space-between;
	margin: 0 auto;
}

#contents_wrapper #kv .result li {
	position: relative;
	width: 160px;
	height: 100%;

}

/*spotlight*/
#contents_wrapper #kv .result .spotlight {
	z-index: 8;
	width: 200px;
	height: 512px;
	margin: 0 auto;
	background-image: url(../images/result_spotlight.png);
}

/*spotlight*/
#contents_wrapper #kv .result .base {
	position: absolute;
	z-index: 9;
	bottom: 0px;
	width: 162px;
	height: 48px;
	background-image: url(../images/result_base_img.png);
}

/*chara_ball*/
#contents_wrapper #kv .result .chara_ball {
	position: absolute;
	z-index: 10;
	bottom: 30px;
	width: 166px;
	height: 166px;
	background-size: 165px auto;
}

#contents_wrapper #kv .result .no1 .chara_ball {
	background-image: url(../images/result_no1_ball.png);
}

#contents_wrapper #kv .result .no2 .chara_ball {
	background-image: url(../images/result_no2_ball.png);
	background-size: 166px auto;
}

#contents_wrapper #kv .result .no3 .chara_ball {
	background-image: url(../images/result_no3_ball.png);
	background-size: 161px auto;
}

#contents_wrapper #kv .result .no4 .chara_ball {
	background-image: url(../images/result_no4_ball.png);
}

#contents_wrapper #kv .result .no5 .chara_ball {
	background-image: url(../images/result_no5_ball.png);
	background-size: 166px auto;
}




/*deco_shine*/
/*shine_x*/
#contents_wrapper #kv .x.deco_shine {
	z-index: 2;
	top: 331px;
	margin: 0 0 0 -350px;
}

/*shine_y*/
#contents_wrapper #kv .y.deco_shine {
	z-index: 2;
	top: 318px;
	margin: 0 0 0 222px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   kv_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
result_top5_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #result {
	position: relative;
	padding: 25px 0 100px 0px;
}


/*No1-No5_area*/
#contents_wrapper #result .top5 ul {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	left: 50%;
	width: 1000px;
	margin: 0 0 0 -500px;
	padding: 10px;
}

#contents_wrapper #result .top5 li {
	position: relative;
	box-sizing: border-box;
	width: 320px;
	height: 520px;
	margin: 5px;
	padding: 5px;
}

#contents_wrapper #result .top5 li:nth-of-type(1) {
	width: 900px;
	margin: 0 0 50px 0;
}

#contents_wrapper #result .top5 li:nth-of-type(2),
#contents_wrapper #result .top5 li:nth-of-type(3) {
	position: absolute;
}

#contents_wrapper #result .top5 li:nth-of-type(2) {
	left: 0px;
}

#contents_wrapper #result .top5 li:nth-of-type(3) {
	right: 0px;
}

#contents_wrapper #result .top5 li:nth-of-type(4),
#contents_wrapper #result .top5 li:nth-of-type(5) {

	height: 430px;

}


#contents_wrapper #result .top5 ul li .chara {
	position: absolute;
	left: 50%;
}

#contents_wrapper #result .top5 ul li p {
	position: absolute;
	bottom: 52px;
	left: 50%;
	width: 310px;
	height: 100px;
	margin: 0 0 0 -155px;
	background-size: auto;
	background-position: center center;
}

#contents_wrapper #result .top5 ul li small {
	position: absolute;
	bottom: 22px;
	left: 50%;
	width: 143px;
	height: 44px;
	margin: 0 0 0 -72px;
	background-image: url(../images/result_icon_up.png);
}


#contents_wrapper #result .top5 ul li p::after {
	content: '';
	position: absolute;
	top: -25px;
	left: 50%;
	width: 322px;
	height: 177px;
	margin: 0 0 0 -161px;
}




/*No.1*/
#contents_wrapper #result .top5 ul li.no1 {
	z-index: 2;
}

#contents_wrapper #result .top5 ul li.no1 .chara {
	top: -34px;
	width: 406px;
	height: 362px;
	margin: 0 0 0 -203px;
	background-image: url(../images/result_no1_img.png);
}

#contents_wrapper #result .top5 ul li.no1 p {
	background-image: url(../images/result_no1_name.png);
}

#contents_wrapper #result .top5 ul li.no1 p::after {
	background-image: url(../images/result_no1_frame.png);
}


/*No.2*/
#contents_wrapper #result .top5 ul li.no2 .chara {
	top: 34px;
	width: 318px;
	height: 287px;
	margin: 0 0 0 -159px;
	background-image: url(../images/result_no2_img.png);
}

#contents_wrapper #result .top5 ul li.no2 p {
	background-image: url(../images/result_no2_name.png);
}

#contents_wrapper #result .top5 ul li.no2 p::after {
	background-image: url(../images/result_no2_frame.png);
}




/*No.3*/
#contents_wrapper #result .top5 ul li.no3 .chara {
	top: 34px;
	width: 306px;
	height: 279px;
	margin: 0 0 0 -153px;
	background-image: url(../images/result_no3_img.png);
}

#contents_wrapper #result .top5 ul li.no3 p {
	background-image: url(../images/result_no3_name.png);
}

#contents_wrapper #result .top5 ul li.no3 p::after {
	background-image: url(../images/result_no3_frame.png);
}


/*No.4*/
#contents_wrapper #result .top5 ul li.no4 .chara {
	top: 0px;
	width: 271px;
	height: 244px;
	margin: 0 0 0 -153px;
	background-image: url(../images/result_no4_img.png);
}

#contents_wrapper #result .top5 ul li.no4 p {
	background-image: url(../images/result_no4_name.png);
}

#contents_wrapper #result .top5 ul li.no4 p::after {
	background-image: url(../images/result_no4_frame.png);
}


/*No.5*/
#contents_wrapper #result .top5 ul li.no5 .chara {
	top: 0px;
	width: 260px;
	height: 235px;
	margin: 0 0 0 -130px;
	background-image: url(../images/result_no5_img.png);
}

#contents_wrapper #result .top5 ul li.no5 p {
	background-image: url(../images/result_no5_name.png);
}

#contents_wrapper #result .top5 ul li.no5 p::after {
	background-image: url(../images/result_no5_frame.png);
}




/*shine_a*/
#contents_wrapper #result .a.deco_shine {
	z-index: 2;
	top: 10px;
	margin: 0 0 0 -258px;
}

/*shine_b*/
#contents_wrapper #result .b.deco_shine {
	z-index: 2;
	top: -32px;
	margin: 0 0 0 210px;
}

/*shine_c*/
#contents_wrapper #result .c.deco_shine {
	z-index: 2;
	top: 588px;
	margin: 0 0 0 -379px;
}

/*shine_d*/
#contents_wrapper #result .d.deco_shine {
	z-index: 2;
	top: 790px;
	margin: 0 0 0 324px;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　result_top5_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
result_top15_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #result .runking {
	padding: 50px 0 0 0;
}

#contents_wrapper #result .runking ul {
	position: relative;
	left: 50%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	width: 990px;
	padding: 5px;
	margin: 0 0 0 -495px;
}


#contents_wrapper #result .runking ul li {
	position: relative;
	box-sizing: border-box;
	width: 225px;
	height: 320px;
	padding: 5px;
	margin: 10px;
}


#contents_wrapper #result .runking ul li .chara_ball {
	width: 170px;
	height: 170px;
	margin: 0 auto;
	background-size: auto;
	background-position: center center;
}

#contents_wrapper #result .runking ul li p {
	width: 170px;
	height: 70px;
	margin: 40px auto 40px auto;
	background-size: auto;
	background-position: center center;
}

/*common_frame*/
#contents_wrapper #result .runking ul li p::before {
	content: '';
	position: absolute;
	top: 190px;
	left: 50%;
	width: 215px;
	height: 123px;
	margin: 0 0 0 -108px;
	background-image: url(../images/result_common_frame.png);
}

/*ranking_text*/
#contents_wrapper #result .runking ul li p::after {
	content: '';
	position: absolute;
	top: 180px;
	left: 50%;
	width: 70px;
	height: 40px;
	margin: 0 0 0 -35px;
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center center;
}



/*No.6*/
#contents_wrapper #result .runking ul li.no6 .chara_ball {
	background-image: url(../images/result_no6_ball.png);
}

#contents_wrapper #result .runking ul li.no6 p {
	background-image: url(../images/result_no6_name.png);
}

#contents_wrapper #result .runking ul li.no6 p::after {
	background-image: url(../images/result_no6_text.png);
}


/*No.7*/
#contents_wrapper #result .runking ul li.no7 .chara_ball {
	background-image: url(../images/result_no7_ball.png);
}

#contents_wrapper #result .runking ul li.no7 p {
	background-image: url(../images/result_no7_name.png);
}

#contents_wrapper #result .runking ul li.no7 p::after {
	background-image: url(../images/result_no7_text.png);
}


/*No.8*/
#contents_wrapper #result .runking ul li.no8 .chara_ball {
	background-image: url(../images/result_no8_ball.png);
}

#contents_wrapper #result .runking ul li.no8 p {
	background-image: url(../images/result_no8_name.png);
}

#contents_wrapper #result .runking ul li.no8 p::after {
	background-image: url(../images/result_no8_text.png);
}



/*No.9*/
#contents_wrapper #result .runking ul li.no9 .chara_ball {
	background-image: url(../images/result_no9_ball.png);
}

#contents_wrapper #result .runking ul li.no9 p {
	background-image: url(../images/result_no9_name.png);
}

#contents_wrapper #result .runking ul li.no9 p::after {
	background-image: url(../images/result_no9_text.png);
}


/*No.10*/
#contents_wrapper #result .runking ul li.no10 .chara_ball {
	background-image: url(../images/result_no10_ball.png);
}

#contents_wrapper #result .runking ul li.no10 p {
	background-image: url(../images/result_no10_name.png);
}

#contents_wrapper #result .runking ul li.no10 p::after {
	background-image: url(../images/result_no10_text.png);
}


/*No.11*/
#contents_wrapper #result .runking ul li.no11 .chara_ball {
	background-image: url(../images/result_no11_ball.png);
}

#contents_wrapper #result .runking ul li.no11 p {
	background-image: url(../images/result_no11_name.png);
}

#contents_wrapper #result .runking ul li.no11 p::after {
	background-image: url(../images/result_no11_text.png);
}


/*No.12*/
#contents_wrapper #result .runking ul li.no12 .chara_ball {
	background-image: url(../images/result_no12_ball.png);
}

#contents_wrapper #result .runking ul li.no12 p {
	background-image: url(../images/result_no12_name.png);
}

#contents_wrapper #result .runking ul li.no12 p::after {
	background-image: url(../images/result_no12_text.png);
}


/*No.13*/
#contents_wrapper #result .runking ul li.no13 .chara_ball {
	background-image: url(../images/result_no13_ball.png);
}

#contents_wrapper #result .runking ul li.no13 p {
	background-image: url(../images/result_no13_name.png);
}

#contents_wrapper #result .runking ul li.no13 p::after {
	background-image: url(../images/result_no13_text.png);
}


/*No.14*/
#contents_wrapper #result .runking ul li.no14 .chara_ball {
	background-image: url(../images/result_no14_ball.png);
}

#contents_wrapper #result .runking ul li.no14 p {
	background-image: url(../images/result_no14_name.png);
}

#contents_wrapper #result .runking ul li.no14 p::after {
	background-image: url(../images/result_no14_text.png);
}


/*No.15*/
#contents_wrapper #result .runking ul li.no15 .chara_ball {
	background-image: url(../images/result_no15_ball.png);
}

#contents_wrapper #result .runking ul li.no15 p {
	background-image: url(../images/result_no15_name.png);
}

#contents_wrapper #result .runking ul li.no15 p::after {
	background-image: url(../images/result_no15_text.png);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　result_top15_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
gacha_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #gacha {
	position: relative;
	padding: 100px 0 100px 0;
}

/*campaign common*/
#contents_wrapper .box {
	/*	opacity: 0.5;*/
	position: relative;
	left: 50%;
	width: 1000px;
	margin: 0 0 0 -500px;
	border-radius: 20px;
	text-align: center;
}

#contents_wrapper .box::after {
	content: '';
	position: absolute;
	top: -65px;
	left: 50%;
	width: 102px;
	height: 83px;
	margin: 0 0 0 -40px;
	background-image: url(../images/sc_6th_deco.png);

}



#contents_wrapper #gacha h2 {
	width: 100%;
	height: 160px;
	background: url(../images/gacha_h2.png);
	background-repeat: no-repeat;
	background-position: center center;
}

#contents_wrapper #gacha .bar,
#contents_wrapper #campaign .bar {
	border-radius: 19px 19px 0 0;
	box-shadow: 0px 0px 50px 0px rgba(255, 255, 255, 0.8) inset, 0px 0px 10px 0px rgba(255, 255, 255, 0.3), 0px 0px 7px 0px rgba(255, 255, 255, 0.3) inset;
	background: rgb(245, 255, 163, 0.9);
	background: -moz-linear-gradient(-45deg, rgba(245, 255, 163, 0.9) 0%, rgba(186, 253, 180, 1) 22%, rgba(95, 223, 255, 0.9) 53%, rgba(155, 155, 255, 0.9) 75%, rgba(255, 150, 255, 0.9) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(245, 255, 163, 0.9) 0%, rgba(186, 253, 180, 0.9) 22%, rgba(95, 223, 255, 0.9) 53%, rgba(155, 155, 255, 0.9) 75%, rgba(255, 150, 255, 0.9) 100%);
	background: linear-gradient(135deg, rgba(245, 255, 163, 0.9) 0%, rgba(186, 253, 180, 0.9) 22%, rgba(95, 223, 255, 0.9) 53%, rgba(155, 155, 255, 0.9) 75%, rgba(255, 150, 255, 0.9) 100%);

}

/*
#contents_wrapper #gacha img {
	margin: 50px 0 30px 0;
}
*/
#contents_wrapper #gacha .gacha_logo{
	display: block;
	background-image: url(../images/gacha_logo.png);
	width: 440px;
	height: 192px;
	margin: 50px auto 30px auto;
}

#contents_wrapper #gacha .box > p {
	width: 558px;
	height: 80px;
	margin: 0 auto 10px auto;
	background-image: url(../images/gacha_date.png);
}

#contents_wrapper #gacha .box > small {
	display: inline-block;
	width: 795px;
	height: 28px;
	margin: 0 0 50px 0;
	background-image: url(../images/gacha_text.png);
}

/*gacha_decoration*/
/*chara_ra*/
#contents_wrapper #gacha .ra {
	top: -150px;
	width: 328px;
	height: 296px;
	margin: 0 0 0 230px;
	background-image: url(../images/gacha_ra.png);
}

/*chara_seiren*/
#contents_wrapper #gacha .se {
	top: 20px;
	width: 361px;
	height: 321px;
	margin: 0 0 0 -600px;
	background-image: url(../images/gacha_se.png);
}

/*shine_c*/
#contents_wrapper #gacha .c.deco_shine {
	top: 400px;
	margin: 0 0 0 -430px;
}

/*shine_d*/
#contents_wrapper #gacha .d.deco_shine {
	top: 300px;
	margin: 0 0 0 250px;
}





/*about*/
#contents_wrapper #gacha #about {
	position: relative;
	width: 940px;
	box-sizing: border-box;
	border-radius: 15px;
	margin: 0 auto 30px auto;
	padding: 30px;
	background-color: rgba(71, 71, 225, 0.5);
}

#contents_wrapper #gacha #about h3 {
	width: 365px;
	height: 97px;
	margin: 0 auto 50px auto;
	background-image: url(../images/about_h3.png);

}

#contents_wrapper #gacha #about p {
	width: 658px;
	height: 143px;
	margin: 0 auto;
	background-image: url(../images/about_text.png);
}


/*about_decoration*/
/*ball_walpurgis*/
#contents_wrapper #about .wa {
	top: -60px;
	margin: 0 0 0 380px;
	background-image: url(../images/about_ball_wa.png);
}

/*ball_atum*/
#contents_wrapper #about .at {
	top: 70px;
	margin: 0 0 0 -530px;
	background-image: url(../images/about_ball_at.png);
	background-size: 143px auto;
}

/*ball_robin hood*/
#contents_wrapper #about .ro {
	top: 317px;
	margin: 0 0 0 274px;
	background-image: url(../images/about_ball_ro.png);
	background-size: 143px auto;
}

/*shine_a*/
#contents_wrapper #about .a.deco_shine {
	top: 200px;
	margin: 0 0 0 370px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 gacha_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
campaign_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #campaign {
	position: relative;
	padding: 100px 0 100px 0;
}

#contents_wrapper #campaign .box {
	margin-bottom: 50px;
}

#contents_wrapper #campaign h2 {
	width: 100%;
	height: 140px;
	margin: 0 0 50px 0;
	background: url(../images/camp_h2.png);
	background-repeat: no-repeat;
	background-position: center center;
}

#contents_wrapper #campaign li {
	position: relative;
}

#contents_wrapper #campaign li h3 {
	width: 570px;
	height: 128px;
	margin: 0 auto 30px auto;
	background-size: auto 128px;
}

#contents_wrapper #campaign li:nth-of-type(1) h3 {
	background-image: url(../images/camp01_h3.png);
}

#contents_wrapper #campaign li:nth-of-type(2) h3 {
	background-image: url(../images/camp02_h3.png);
}

#contents_wrapper #campaign li:nth-of-type(3) h3 {
	background-image: url(../images/camp03_h3.png);
}

/*
#contents_wrapper #campaign img {
	width: 500px;
	height: 134px;
	margin: 0 0 15px 0;
}
*/
/*Temporary*/
#contents_wrapper #campaign .camp01_banner{
	display: block;
	background-image: url(../images/camp01_banner.png);
	width: 500px;
	height: 134px;
	margin: 0 auto 15px auto;
}
#contents_wrapper #campaign .camp02_banner{
	display: block;
	background-image: url(../images/camp02_banner.png);
	width: 500px;
	height: 200px;
	margin: 0 auto 15px auto;
}

/*
#contents_wrapper #campaign li:nth-of-type(3) img{
	width: 380px;
}
*/
#contents_wrapper #campaign li:nth-of-type(3) .camp03_img{
	display: block;
	background-image: url(../images/camp03_img.png);
	width: 380px;
	height: 354px;
	margin: 0 auto 15px auto;
}

#contents_wrapper #campaign li p {
	width: 493px;
	height: 34px;
	margin: 0 auto 50px auto;
}

#contents_wrapper #campaign li:nth-of-type(1) p {
	background-image: url(../images/camp01_date.png);
}

#contents_wrapper #campaign li:nth-of-type(2) p {
	background-image: url(../images/camp02_date.png);
}

#contents_wrapper #campaign li:nth-of-type(3) p {
	background-image: url(../images/camp03_date.png);
}

#contents_wrapper #campaign figure {
	width: 100%;
	margin: 0 auto;
	text-indent: 0;
}

#contents_wrapper #campaign figcaption {
	width: 204px;
	height: 33px;
	margin: 0 auto 50px auto;
	text-indent: -9999px;
	background-image: url(../images/camp03_name.png);
}



#contents_wrapper #campaign .more {
	display: block;
	width: 354px;
	height: 118px;
	text-indent: -9999px;
	margin: 0 auto;

	background-image: url(../images/btn_more.png);
}



/*campaign_decoration*/
/*chara_zephon*/
#contents_wrapper #campaign .ze {
	top: -110px;
	width: 333px;
	height: 297px;
	margin: 0 0 0 -560px;
	background-image: url(../images/camp_ze.png);
}


/*第一彈_decoration*/
/*ball_babyark*/
#contents_wrapper #campaign .baby {
	top: -130px;
	margin: 0 0 0 310px;
	background-image: url(../images/camp_ball_baby.png);
}

/*ball_babyark*/
#contents_wrapper #campaign .diva {
	top: 130px;
	margin: 0 0 0 -460px;
	background-image: url(../images/camp_ball_diva.png);
	background-size: auto 144px;
}

/*ball_sandalphone*/
#contents_wrapper #campaign .san {
	top: 320px;
	margin: 0 0 0 310px;
	background-image: url(../images/camp_ball_san.png);
}

/*shine_b*/
#contents_wrapper #campaign li:nth-of-type(1) .b.deco_shine {
	top: 90px;
	margin: 0 0 0 330px;
}

/*shine_d*/
#contents_wrapper #campaign li:nth-of-type(1) .d.deco_shine {
	top: 316px;
	margin: 0 0 0 -452px;
}





/*第二彈_decoration*/
/*ball_lewis carroll*/
#contents_wrapper #campaign .ca {
	top: 80px;
	margin: 0 0 0 -450px;
	background-image: url(../images/camp_ball_ca.png);
}

/*chara_ruby*/
#contents_wrapper #campaign .ruby {
	top: 130px;
	width: 346px;
	height: 311px;
	margin: 0 0 0 300px;
	background-image: url(../images/camp_ruby.png);
}

/*shine_a*/
#contents_wrapper #campaign li:nth-of-type(2) .a.deco_shine {
	top: 77px;
	margin: 0 0 0 240px;
}

/*shine_c*/
#contents_wrapper #campaign li:nth-of-type(2) .c.deco_shine {
	top: 316px;
	margin: 0 0 0 -423px;
}





/*第三彈_decoration*/
/*ball_hibiscus*/
#contents_wrapper #campaign .hi {
	top: 80px;
	margin: 0 0 0 -450px;
	background-image: url(../images/camp_ball_hi.png);
	background-size: auto 144px;
}

/*ball_brionac*/
#contents_wrapper #campaign .br {
	top: 370px;
	margin: 0 0 0 390px;
	background-image: url(../images/camp_ball_br.png);
	background-size: auto 144px;
}


/*shine_b*/
#contents_wrapper #campaign li:nth-of-type(3) .b.deco_shine {
	top: 187px;
	margin: 0 0 0 -270px;
}

/*shine_c*/
#contents_wrapper #campaign li:nth-of-type(3) .c.deco_shine {
	top: 316px;
	margin: 0 0 0 235px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 campaign_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
share_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #share {
	position: relative;
	width: 100%;
	height: 190px;
	box-sizing: border-box;
	padding: 30px 0 0 0;
	margin: 0 0 100px;
	text-align: center;
	background-image: url(../images/share_bg.png);
	background-repeat: repeat-x;
}

#contents_wrapper #share h2 {
	width: 171px;
	height: 19px;
	margin: 0 auto 20px auto;
	background-image: url(../images/share_h2.png);
}

#contents_wrapper #share li {
	display: inline-block;
	width: 88px;
	height: 87px;
	margin: 0 10px 0 10px;
}

#contents_wrapper #share a {
	display: block;
	width: 100%;
	height: 100%;
}

#contents_wrapper #share .facebook {
	background-image: url(../images/icon_sns_facebook.png);
}

#contents_wrapper #share .line {
	background-image: url(../images/icon_sns_line.png);
}

/*chara_amenomurakumo*/
#contents_wrapper #share .ame {
	position: absolute;
	top: -200px;
	width: 370px;
	height: 333px;
	margin: 0 0 0 220px;
	background-image: url(../images/camp_ame.png);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    share_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
app_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contents_wrapper #app {
	position: relative;
	width: 700px;
	height: 600px;
	box-sizing: border-box;
	padding: 50px;
	margin: 0 auto;
	border-radius: 10px;
}

#contents_wrapper #app h2 {
	width: 130px;
	height: 145px;
	margin: 0 auto 30px auto;
	background-image: url(../images/footer_openapp.png);
}

#contents_wrapper #app > P:nth-of-type(1) {
	width: 453px;
	height: 60px;
	margin: 0 auto 30px auto;
	background-image: url(../images/footer_openapp_read.png);
}

#contents_wrapper #app ul {
	display: flex;
	justify-content: space-between;
	width: 540px;
	margin: 0 auto 30px auto;
}

#contents_wrapper #app li {
	width: 167px;
	height: 50px;
}

#contents_wrapper #app li:nth-of-type(1) a {
	background-image: url(../images/storebadge_appstore.png);
}

#contents_wrapper #app li:nth-of-type(2) a {
	background-image: url(../images/storebadge_googleplay.png);
}

#contents_wrapper #app li:nth-of-type(3) a {
	background-image: url(../images/storebadge_apk.png);
}

#contents_wrapper #app li a {
	display: block;
	width: 100%;
	height: 100%;
}

#contents_wrapper #app small {
	display: inline-block;
	width: 365px;
	height: 82px;
	text-indent: -9999px;
	margin: 0 0 30px 0;
	background-image: url(../images/store_text.png);
}

#contents_wrapper #app > P:last-of-type {
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	background-image: url(../images/footer_rating.png);
}



/*decoration*/
#contents_wrapper #app .lantern {
	z-index: 8;
	position: absolute;
	left: 50%;
}

#contents_wrapper #app .lantern.a {
	top: -40px;
	width: 76px;
	height: 81px;
	margin: 0 0 0 -240px;
	background-image: url(../images/app_deco01.png);
}

#contents_wrapper #app .lantern.b {
	top: 50px;
	width: 106px;
	height: 138px;
	margin: 0 0 0 270px;
	background-image: url(../images/app_deco02.png);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　      app_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
footer_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
footer#global {
	background-color: #000000;
	color: #ffffff;
	padding: 50px 0;
	font-size: 11px;
	text-align: center;
}

footer#global li {
	display: inline-block;
}

footer#global a {
	font-size: 16px;
	text-decoration: none;
	color: #ffffff;
}

footer#global li a::after {
	content: "|";
	margin: 0 20px 0 20px;
}

footer#global li:last-of-type a::after {
	content: none;
}


/*
licence
*/
footer#global .licence > p a {
	display: block;
	background-image: url(https://xflag.com/common/images/promotion_logo_xflag.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin: 45px auto;
	width: 120px;
	height: 139px;
	text-indent: -9999px;
}

footer#global .licence small {
	display: block;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　footer_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/









/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ANIMATION_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*section_anime*/
#contents_wrapper #result,
#contents_wrapper #result .runking,
#contents_wrapper #gacha,
#contents_wrapper #campaign,
#contents_wrapper #campaign li:nth-of-type(1),
#contents_wrapper #campaign li:nth-of-type(2),
#contents_wrapper #campaign li:nth-of-type(3),
#contents_wrapper #campaign .more,
#contents_wrapper #share,
#contents_wrapper #app {
	opacity: 0;
	transition: all 0.3s ease-out;
}

/*section_anime_active*/
#contents_wrapper #result.active,
#contents_wrapper #result.active .runking.active,
#contents_wrapper #gacha.active,
#contents_wrapper #campaign.active,
#contents_wrapper #campaign li:nth-of-type(1).active,
#contents_wrapper #campaign li:nth-of-type(2).active,
#contents_wrapper #campaign li:nth-of-type(3).active,
#contents_wrapper #campaign .more.active,
#contents_wrapper #share.active,
#contents_wrapper #app.active {
	opacity: 1;
}


/*h2_anime*/
#contents_wrapper h2 {
	opacity: 0;
	transition: all 0.3s ease-out;
	transform: translateY(-20px);
}

#contents_wrapper .active h2 {
	opacity: 1;
	transform: translateY(0px);
}





/*kv_chara_animation*/
@keyframes kv_cutIn {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}

	80% {
		transform: translateY(-5px);
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}





/*img_fadein*/
@keyframes popUp {
	0% {
		transform: scale(0, 0);
		opacity: 0;
	}

	90% {
		transform: scale(1.05, 1.05);
		opacity: 1;
	}

	100% {
		transform: scale(1, 1);
	}
}


/*ball_cutin*/
@keyframes topright {
	0% {
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.77, 0, 1, 1);
		transform: translate(75px, -75px);
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

@keyframes topleft {
	0% {
		opacity: 0;
		transition: all 0.3s cubic-bezier(0, 0.77, 1, 1);
		transform: translate(-75px, -75px);
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}


@keyframes bottomright {
	0% {
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.77, 0, 1, 1);
		transform: translate(75px, 75px);
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}

}

@keyframes bottomleft {
	0% {
		opacity: 0;
		transition: all 0.3s cubic-bezier(0.77, 0, 1, 1);
		transform: translate(-75px, 75px);
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}


/*chara_anime*/
@keyframes decoChara {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes shine {
	0% {
		opacity: 1;
	}

	22% {
		opacity: 0.6;
	}

	30% {
		opacity: 0;
	}

	58% {
		opacity: 0.8;
	}

	78% {
		opacity: 0.6;
	}

	85% {
		opacity: 0;
	}

	90% {
		opacity: 0.4;
	}

	100% {
		opacity: 1;

	}
}

.active .deco_shine.a {
	animation: shine 4s infinite;
}

.active .deco_shine.b {
	animation: shine 8s infinite;
}

.active .deco_shine.c {
	animation: shine 6s infinite;
}

.active .deco_shine.d {
	animation: shine 9s infinite;
}

.active .deco_shine.x {
	animation: shine 12s infinite;
}

.active .deco_shine.y {
	animation: shine 14s infinite;
}




@keyframes lantern {
	0% {
		transform: translateY(0px);
	}

	40% {
		transform: translateY(8px);
	}

	80% {
		transform: translateY(-7px);
	}

	100% {
		transform: translateY(0px; )
	}
}

.active .lantern.a {
	animation: lantern 6s infinite;
}

.active .lantern.b {
	animation: lantern 4s infinite;
}

/*
kv_area
*/
/*kv*/
#contents_wrapper #kv {
	opacity: 0;
	transition: all 0.3s;
}

#contents_wrapper #kv.active {
	opacity: 1;
}


/*event_logo*/
#contents_wrapper #kv h1,
#contents_wrapper #kv p {
	opacity: 0;
	transition: all 0.3s ease-out 0.3s;
	transform: translateY(10px);
}

#contents_wrapper #kv.active h1,
#contents_wrapper #kv.active p {
	opacity: 1;
	transform: translateY(0px);
}


/*result_logo*/
#contents_wrapper #kv.active h2 {
	animation: popUp 0.4s 0.5s ease-out backwards;
}


/*kv_spotlight*/

#contents_wrapper #kv .result .spotlight {
	opacity: 0;
	transition: all 0.2s 1.1s;
}

#contents_wrapper #kv.active .result .spotlight {
	opacity: 1;
}


/*kv_base*/
#contents_wrapper #kv.active .result .base {
	animation: kv_cutIn 0.1s 1.1s ease-out backwards;
}


/*kv_chara*/
#contents_wrapper #kv.active .result .chara_ball {
	animation: kv_cutIn 0.3s ease-out backwards;
}

#contents_wrapper #kv.active .result .no1 .chara_ball {
	animation-delay: 1.3s;
}

#contents_wrapper #kv.active .result .no2 .chara_ball,
#contents_wrapper #kv.active .result .no3 .chara_ball {
	animation-delay: 1.4s;
}

#contents_wrapper #kv.active .result .no4 .chara_ball,
#contents_wrapper #kv.active .result .no5 .chara_ball {
	animation-delay: 1.5s;
}




/*
result_area
*/

#contents_wrapper #result.active .top5 li {
	animation: kv_cutIn 0.3s ease-out backwards;
}

#contents_wrapper #result.active .top5 li.no1 {
	animation-delay: 0.5s;
}

#contents_wrapper #result.active .top5 li.no2 {
	animation-delay: 0.7s;
}

#contents_wrapper #result.active .top5 li.no3 {
	animation-delay: 0.9s;
}

#contents_wrapper #result.active .top5 li.no4 {
	animation-delay: 1.1s;
}

#contents_wrapper #result.active .top5 li.no5 {
	animation-delay: 1.3s;
}



/*
result_runking_area
*/
@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}


#contents_wrapper #result.active .runking.active li {
	animation: slideIn 0.3s ease-in backwards;
}

#contents_wrapper #result.active .runking.active li.no6 {
	animation-delay: 0.4s;
}

#contents_wrapper #result.active .runking.active li.no7 {
	animation-delay: 0.45s;
}

#contents_wrapper #result.active .runking.active li.no8 {
	animation-delay: 0.5s;
}

#contents_wrapper #result.active .runking.active li.no9 {
	animation-delay: 0.55s;
}

#contents_wrapper #result.active .runking.active li.no10 {
	animation-delay: 0.6s;
}

#contents_wrapper #result.active .runking.active li.no11 {
	animation-delay: 0.65s;
}

#contents_wrapper #result.active .runking.active li.no12 {
	animation-delay: 0.7s;
}

#contents_wrapper #result.active .runking.active li.no13 {
	animation-delay: 0.75s;
}

#contents_wrapper #result.active .runking.active li.no14 {
	animation-delay: 0.8s;
}

#contents_wrapper #result.active .runking.active li.no15 {
	animation-delay: 0.85s;
}


/*
gacha_area
*/
#contents_wrapper #gacha h2 {
	transition-delay: 0.4s;
}

/*chara_ra*/
#contents_wrapper #gacha.active .ra {
	animation: decoChara 0.3s 0.6s ease-out backwards;
}

/*chara_seiren*/
#contents_wrapper #gacha.active .se {
	animation: decoChara 0.3s 0.8s ease-out backwards;
}

/*gacha_logo*/
/*
#contents_wrapper #gacha.active img {
	animation: popUp;
	animation-duration: 0.4s;
	animation-delay: 1s;
	animation-fill-mode: backwards;
}
*/
#contents_wrapper #gacha.active .gacha_logo {
	animation: popUp;
	animation-duration: 0.4s;
	animation-delay: 1s;
	animation-fill-mode: backwards;
}



/*
about_area
*/
#contents_wrapper #gacha #about {

	opacity: 0;
	transition: all 0.4s cubic-bezier(0, 0, 0.17, 1.01);
	transform: scale(0, 0);
}

#contents_wrapper #gacha #about.active {
	opacity: 1;
	transform: scale(1, 1);

}


/*ball_walpurgis*/
#contents_wrapper #about.active .wa {
	animation: topright;
	animation-duration: 0.3s;
	animation-delay: 0.5s;
	animation-fill-mode: backwards;
}

/*ball_atum*/
#contents_wrapper #about.active .at {
	animation: bottomleft;
	animation-duration: 0.3s;
	animation-delay: 0.5s;
	animation-fill-mode: backwards;
}

/*ball_robin hood*/
#contents_wrapper #about.active .ro {
	animation: bottomright;
	animation-duration: 0.3s;
	animation-delay: 0.5s;
	animation-fill-mode: backwards;
}



/*
campaign_area
*/
#contents_wrapper #campaign h2 {
	transition-delay: 0.4s;
}

/*chara_zephon*/
#contents_wrapper #campaign.active .ze {
	animation: decoChara 0.3s 0.6s ease-out backwards;
}





/*第一彈_decoration*/

/*banner*/
/*
#contents_wrapper #campaign.active li:nth-of-type(1).active img {
	animation: popUp 0.4s;
	animation-delay: 0.3s;
	animation-fill-mode: backwards;
}
*/
/*Temporary*/
#contents_wrapper #campaign.active li:nth-of-type(1).active .camp01_banner{
	animation: popUp 0.4s;
	animation-delay: 0.3s;
	animation-fill-mode: backwards;
}

/*ball_babyark*/
#contents_wrapper #campaign.active li:nth-of-type(1).active .baby {
	animation: topright;
	animation-duration: 0.3s;
	animation-delay: 0.8s;
	animation-fill-mode: backwards;
}

/*ball_babyark*/
#contents_wrapper #campaign.active li:nth-of-type(1).active .diva {
	animation: bottomleft;
	animation-duration: 0.3s;
	animation-delay: 0.8s;
	animation-fill-mode: backwards;
}

/*ball_sandalphone*/
#contents_wrapper #campaign.active li:nth-of-type(1).active .san {
	animation: bottomright;
	animation-duration: 0.3s;
	animation-delay: 0.8s;
	animation-fill-mode: backwards;
}


/*第二彈_decoration*/
/*banner*/
/*
#contents_wrapper #campaign.active li:nth-of-type(2).active img {
	animation: popUp 0.4s 0.3s backwards;
}
*/
/*Temporary*/
#contents_wrapper #campaign.active li:nth-of-type(2).active .camp02_banner {
	animation: popUp 0.4s 0.3s backwards;
}

#contents_wrapper #campaign.active li:nth-of-type(2).active .ca {
	animation: topleft 0.3s 0.8s backwards;
}

#contents_wrapper #campaign.active li:nth-of-type(2).active .ruby {
	animation: decoChara 0.3s 0.8s ease-out backwards;
}


/*第三彈_decoration*/
/*
#contents_wrapper #campaign.active li:nth-of-type(3).active img {
	animation: decoChara 0.3s 0.3s backwards;
}
*/
#contents_wrapper #campaign.active li:nth-of-type(3).active .camp03_img {
	animation: decoChara 0.3s 0.3s backwards;
}

/*ball_hibiscus*/
#contents_wrapper #campaign.active li:nth-of-type(3).active .hi {
	animation: topleft;
	animation-duration: 0.3s;
	animation-delay: 0.8s;
	animation-fill-mode: backwards;
}

/*ball_brionac*/
#contents_wrapper #campaign.active li:nth-of-type(3).active .br {
	animation: bottomright;
	animation-duration: 0.3s;
	animation-delay: 0.8s;
	animation-fill-mode: backwards;
}


/*more_button*/
#contents_wrapper #campaign.active .more.active {
	animation: popUp 0.4s 0.3s backwards;
}

/*
share_area
*/

#contents_wrapper #share.active .ame {
	animation: decoChara 0.3s 0.6s ease-out backwards;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   　　ANIMATION_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Tablet_scale_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#contents_wrapper #kv,
#contents_wrapper #result,
#contents_wrapper #runking,
#contents_wrapper #gacha,
#contents_wrapper #campaign {
	transform: scale(0.7);
}


#contents_wrapper #kv {
	margin: -104px 0 -400px 0;
}

#contents_wrapper #kv .result {
	width: 770px;
}

#contents_wrapper #result .top5 ul {
	padding: 0;
}

#contents_wrapper #gacha {
	margin: -450px 0 0 0;
}

#contents_wrapper #campaign {
	margin: -400px 0 0 0;
}

#contents_wrapper #share {
	margin: -200px 0 100px 0;
}

#contents_wrapper #share .ame {
	background-size: 259px auto;
	background-position: center center;
	margin: 0 0 0 100px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    Tablet_scale_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/