body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin: 0;
}
#bpc_bg {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			1;
}
#bpc_bg img {
	width:				300px;
	height:				300px;
}
#roulette {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			2;
}
#roulette img {
	width:				300px;
	height:				300px;
	z-index:			2;
}
#treasure_box {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			2;
}
#treasure_box img {
	width:				100%;
	height:				auto;
	z-index:			2;
}
#flash {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				300px;
	height:				300px;
	z-index:			2;
}
#flash img {
	width:				300px;
	height:				300px;
	z-index:			2;
}
#roulette_cover {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			3;
}
#roulette_cover img {
	width:				300px;
	height:				300px;
	z-index:			3;
}

#cutin {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			3;
}
#cutin img {
	width:				300px;
	height:				300px;
	z-index:			4;
}

#win_item {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			5;
}
#win_item img {
	width:				300px;
	height:				auto;
	z-index:			5;
	padding:			120px;
}



#flash {
	position:			absolute;
	top:				0;
	left:				0;
	width:				300px;
	height:				300px;
	z-index:			5;
}
#flash img {
	width:				300px;
	height:				300px;
	z-index:			5;
}


#item {
	z-index:			2;
	top:				250px;
	left:				440px;
	position:			absolute;
	display: none;
}


.entry_down {
	animation: entry_down 500ms linear 1;
	animation-fill-mode: forwards;
}

@keyframes entry_down{
	0%  {transform: translate(0px, -300px);}
	100%  {transform: translate(0px, 0px);}
}

.flip-container {
	perspective: 1000;
	position: absolute;
	top: 250px;
	left: 440px;
	z-index: 3;
	display: none;
}

.flip-container, .front, .back {
	width: 200px;
	height: 265px;
	background-size: 200px 265px !important;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	animation: coins2 7s ease-out forwards;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
}
.back {
	transform: rotateY(180deg);
}
@keyframes coins2 {
0% {
	transform: rotateY(0deg) translate(0,0) ;
	transform-origin:50% 200px;
}
3% {
	transform: rotateY(0deg);
	transform-origin:50% 200px;
}
6% {
	transform: rotateY(0deg);
	transform-origin:50% 200px;
}
9% {
	transform: rotateY(0deg);
	transform-origin:50% 200px;
}
30% { transform: rotateY(0deg); }
60% { transform: rotateY(-30deg); }
98% { transform: rotateY(-60deg); }
100% { transform: rotateY(-180deg);}
}


.flash_bg1 {
	-webkit-animation: image_flash1 150ms linear infinite;
	animation: image_flash1 150ms linear infinite;
}

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

.bgFadeIn {
	animation:bgFadeIn 500ms linear forwards;
}

@keyframes bgFadeIn{
	0% {opacity:0;}
	100% {opacity:1;}
}
html { scroll-behavior: smooth;}


.falling {
-webkit-animation: falling 2000ms linear both;
animation: falling 2000ms linear both;
}

/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A%7Bx%3A0%2Cy%3A-250%7D%2Ct%3A%7Bx%3A0%2Cy%3A0%7D%2Cs%3A3%2Cb%3A4%7D%5D%7D */

@-webkit-keyframes falling { 
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); }
4.3% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); }
8.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); }
12.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); }
17.22% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); }
28.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); }
39.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); }
61.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); }
83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes falling { 
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); }
4.3% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); }
8.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); }
12.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); }
17.22% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); }
28.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); }
39.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); }
61.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); }
83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); }
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

.shakeYinfinite {
	animation: shakeYinfinite 200ms infinite;
}

@keyframes shakeYinfinite {
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	100% {transform: translate(0px, 10px) rotateZ(0deg)}
}

.shakeXinfinite {
	animation: shakeXinfinite 400ms infinite;
}

@keyframes shakeXinfinite {
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	25% {transform: translate(-10px, 10px) rotateZ(0deg)}
	50% {transform: translate(10px, -10px) rotateZ(0deg)}
	75% {transform: translate(-10px, -20px) rotateZ(0deg)}
	100% {transform: translate(10px, 20px) rotateZ(0deg)}
}

.completeFadeIn {
	/* ƒAƒjƒ[ƒVƒ‡ƒ“‚Ì’·‚³ */
	animation:completeFadeIn 500ms linear forwards;
}

@keyframes completeFadeIn{
	0% {filter:brightness(100%);opacity:0;}
	100% {filter:brightness(100%);opacity:1;}
}
.completeFadeOut {
	/* ƒAƒjƒ[ƒVƒ‡ƒ“‚Ì’·‚³ */
	animation:completeFadeOut 500ms linear forwards;
}

@keyframes completeFadeOut{
	0% {filter:brightness(100%);opacity:1;}
	100% {filter:brightness(100%);opacity:0;}
}

.scatterZoom {
	animation: scatterZoom 500ms ease-in forwards;
}

@keyframes scatterZoom {
	0%		{ -webkit-transform: scale(1.3); transform: scale(1.8); }
	20%		{ -webkit-transform: scale(1); transform: scale(1); }
	40%		{ -webkit-transform: scale(1.3); transform: scale(1.3); }
	60%		{ -webkit-transform: scale(1); transform: scale(1); }
	80%		{ -webkit-transform: scale(1.3); transform: scale(1.3); }
	100%	{ -webkit-transform: scale(1.5); transform: scale(1.5); }
}

.entry_zoom {
	animation: entry_zoom 400ms linear 1;
	animation-fill-mode: forwards;
}

@keyframes entry_zoom{
	0%  {transform: scale(0);}
	90%  {transform: scale(1.5);}
	100%  {transform: scale(1);}
}

.selectedPanel {
	animation: selectedPanel 4000ms forwards;
}
@keyframes selectedPanel {
	0%		{ opacity: 100; transform:scale(0.6) translate(0px, 0px); }
	1.25%		{ opacity: 100; transform:scale(1.0) translate(-1px, -1px); }
	2.5%		{ opacity: 100; transform:scale(1.0) translate(-2px, 2px); }
	3.75%		{ opacity: 100; transform:scale(1.0) translate(3px, -1px); }
	5%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	70%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	80%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	100%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
}

.fullCutInA {
	animation: fullCutInA 5500ms linear forwards;
}
@keyframes fullCutInA {
	0%		{ opacity: 100; transform:translate(10px, -2px); }
	5%		{ opacity: 100; transform:translate(5px, -1px); }
	90%		{ opacity: 100; transform:translate(-10px, 2px); }
	100%		{ opacity: 0; transform:translate(-10px, 2px); }
}

.fullCutInB {
	animation: fullCutInB 4000ms linear forwards;
}
@keyframes fullCutInB {
	0%		{ opacity: 100; transform:translate(-10px, -2px); }
	10%		{ opacity: 100; transform:translate(-5px, -1px); }
	85%		{ opacity: 100; transform:translate(10px, 2px); }
	100%		{ opacity: 0; transform:translate(10px, 2px); }
}

.hexagonRoulette {
	animation: hexagonRoulette 200ms linear infinite;
}

@keyframes hexagonRoulette {
	0%		{ clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); }
	24.999%		{ clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); }
	25%		{ clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0, 50% 0); }
	49.999%		{ clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0, 50% 0); }
	50%		{ clip-path: polygon(100% 50%, 50% 50%, 50% 100%, 0 100%, 0 0, 100% 0); }
	74.999%		{ clip-path: polygon(100% 50%, 50% 50%, 50% 100%, 0 100%, 0 0, 100% 0); }
	75%		{ clip-path: polygon(100% 100%, 50% 100%, 50% 50%, 0 50%, 0 0, 100% 0); }
	100%		{ clip-path: polygon(100% 100%, 50% 100%, 50% 50%, 0 50%, 0 0, 100% 0); }
}

.selectedPanel {
	animation: selectedPanel 4000ms forwards;
}
@keyframes selectedPanel {
	0%		{ opacity: 100; transform:scale(0.6) translate(0px, 0px); }
	1.25%		{ opacity: 100; transform:scale(1.0) translate(-1px, -1px); }
	2.5%		{ opacity: 100; transform:scale(1.0) translate(-2px, 2px); }
	3.75%		{ opacity: 100; transform:scale(1.0) translate(3px, -1px); }
	5%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	70%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	80%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	100%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
}

.lastCutIn {
	animation: lastCutIn 1500ms linear forwards;
}

@keyframes lastCutIn {
	0%		{ transform:scale(1.0) translate(272px, 0px) rotateZ(0deg); }
	10%		{ transform:scale(1.0) translate(10px, 0px) rotateZ(0deg); }
	90%		{ transform:scale(1.0) translate(-10px, 0px) rotateZ(0deg); }
	100%		{ transform:scale(1.0) translate(-272px, 0px) rotateZ(0deg); }

	0%		{ opacity: 0; }
	10%		{ opacity: 1; }
	90%		{ opacity: 1; }
	100%		{ opacity: 0; }
}

/*--------------------------------------------
15th
--------------------------------------------*/
.buruburu {
    animation: buruburu 350ms  infinite;
}

@keyframes buruburu {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, -2px) rotateZ(-2deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(0px, -2px) rotateZ(2deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.boundOne {
	animation:
		boundOne 1500ms ease-out;
}
@keyframes boundOne {
	0%		{ transform: scale(1.0, 1.0) translate(0%, 0%); }
	10%		{ transform: scale(1.3, 0.7) translate(0%, 30%); }
	20%		{ transform: scale(0.7, 1.3) translate(0%, -120%); }
	30%		{ transform: scale(1.0, 1.4) translate(0%, -15%); }
	40%		{ transform: scale(1.3, 0.7) translate(0%, 30%); }
	50%		{ transform: scale(1.0, 1.0);  translate(0%, 0%);}
	100%		{ transform: scale(1.0, 1.0);  translate(0%, 0%);}
}




@keyframes chakuchi {
	0%		{ transform: scale(1.0, 1.0) translate(0%, -60%); }
	25%		{ transform: scale(1.0, 1.0) translate(0%, 0%); }
	50%		{ transform: scale(1.0, 1.0) translate(0%, -10%); }
	75%		{ transform: scale(1.0, 1.0) translate(0%, 0%); }
	100%	{ transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.effect_big_piyo {
	animation:
		effect_big_piyo 3000ms ease-out;
		/*effect_big_piyo_up 2000ms ease-in 6000ms forwards;*/
}
@keyframes effect_big_piyo {
	0%		{ transform: scale(1.0, 1.4) translate(0%, -300%); }
	10%		{ transform: scale(1.0, 1.4) translate(0%, -15%); }
	20%		{ transform: scale(1.4, 0.6) translate(0%, 30%); }
	30%		{ transform: scale(1.0, 1.1) translate(0%, -10%); }
	40%		{ transform: scale(1.0, 1.2) translate(0%, -30%); }
	50%		{ transform: scale(1.0, 1.2) translate(0%, -10%); }
	60%		{ transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%		{ transform: scale(1.0, 1.2) translate(0%, -10%); }
	80%		{ transform: scale(1.1, 0.9) translate(0%, 5%); }
	90%		{ transform: scale(1.0, 1.0) translate(0%, -5%); }
	95%		{ transform: scale(1.0, 1.0) translate(0%, 0%); }
	100%	{ transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes effect_big_piyo_up {
	95%		{ transform: translateY(-35%); }
	100%	{ transform: translateY(-100%); }
}

.conLine {
	animation:conLine 500ms linear infinite;
}

@keyframes conLine{
	0% {filter:brightness(100%);opacity:0;}
	50% {filter:brightness(200%);opacity:1;}
	100% {filter:brightness(100%);opacity:0;}
}

.mochi {
	animation: mochimochi 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes mochimochi {
	0% {
		transform: translateY(-5%);
	}
	100% {
		transform: translateY(5%);
	}
}
/* .btn001,
.btn002{
    padding: 10px 30px;
    margin: 30px auto;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    outline: none;
	border: 0;
    border-radius: 60px;
    color: #fff !important;
    background: #dc143c;
    text-decoration: none;
    text-align: center;
    width: 300px;
    font-size: 16px;
} */
h1 {
    font-size: 26px;
    font-weight: 600;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
    padding: 10px 0;
    margin: 0;
    margin-bottom: 0;
    color: #6a6a6a;
    text-align: center;
    background: #fafa19;
    width: -webkit-fill-available;
}
.hero_logo{
  position: fixed;
  top: -3px;
  left: 8px;
  z-index: 1;
}
img.hero_logo{
  width: 70px;
}
.fadeIn {
    overflow-x: hidden;
}
a.btn001,
a.btn002{
    cursor: pointer;
    display: block;
    outline: none;
    /* color: #fff !important; */
    /* background: #dc143c; */
    text-decoration: none;
    text-align: center;
    width: 200px;
    font-size: 14px;
    --inset: 40px;
    font-weight: 600;
    background-image: linear-gradient(315deg, #ffc4ec -10%, #efdbfd 50%, #ffedd6 110%);
    padding: .8em 1.4em;
    margin: 1em auto;
    min-width: 200px;
    position: relative;
    isolation: isolate;
    box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 -10px 20px -10px hsla(var(--shadow-hue), 10%, 90%, 95%);
    border-radius: 60px;
    scale: 1;
    transition: all var(--spring-duration) var(--spring-easing);
    border: 2px outset #000;
}
.btn001:hover,
.btn002:hover {
    background: #da4866;
    color: #fff;

}
.meter_wrap{
    position: fixed;
    bottom: 6px;
    right: 6px;
    background: hsl(0deg 0% 0% / 80%);
    padding: 5px;
    display: flex;
    flex-direction: column;
    width: 67px;
    text-align: center;
    border-radius: 8px;
    z-index: 3;
}
.meter_inner{
    padding: 0;
    background: url(/images/event/continuous_battle/bg_ren.jpg) no-repeat;
    background-size: cover;
    margin-top: 5px;
    border-radius: 3px;
    font-family: "Protest Strike", sans-serif;
	font-weight: 400;
    color: #000;
}
.meter_inner p{
	margin: 0;
	border-bottom: 1px solid #0000001f;
}
.gray_out{
	background: #000000a8;
}

.ren_wrap{
	display: flex;
    align-items: center;
    margin: auto;
	position: relative;
	transform: rotate(351deg);
	background: url(/images/event/continuous_battle/bg_result.png) 50% 50% no-repeat;
    background-size: contain;
	padding: 0 30px;
}

.ren_wrap img{
	z-index: auto !important;
    width: 300px;
}
.ren_wrap h1{
	font-size: 80px;
    margin: 0;
    margin-top: -6px;
    margin-right: 10px;
    font-family: "Protest Strike", sans-serif;
    padding-top: 10px;
    font-weight: 400;
    font-style: normal;
    color: hsl(50.8deg 100% 50%);
    line-height: 0;
    display: block;
    text-shadow: -2px -3px hsl(0deg 100% 29.8%), 5px 5px hsl(0deg 100% 21.21%);
    filter: drop-shadow(1px 3px 0px hsl(242, 54%, 10%)) drop-shadow(1px 3px 0px hsl(242, 54%, 15%)) drop-shadow(1px 3px 0px hsl(242, 54%, 20%)) drop-shadow(1px 3px 0px hsl(242, 54%, 25%)) drop-shadow(1px 3px 0px hsl(242, 54%, 30%)) drop-shadow(0px 0px 10px rgba(16, 16, 16, 0.4));
}
.ren_inner{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: auto;
}
.result_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(351deg);
}


#bpc_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    z-index: -1;
}

.notes {
    clear: both;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 5px;
}
.notes ul {
    padding: 0 1em;
    font-size: 14px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
p.notes{
  padding: 10px;
  display: table;
  margin-bottom: 20px;
  width: 800px;
  margin: auto;
}
.notes .form_wrap{
  max-width: 700px;
  margin-inline: auto;
}
.notes .header{
  color: #fdff2f;
}
#effect_wrap{
    display: flex;
    position: unset;
    margin-top: auto;
    width: 300px;
    height: auto;
    overflow: hidden;
}

#effect_area {
    background: #00000000;
    max-width: 600px;
    margin: 0 auto;
}
.combo_count{
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px #ffffff1c solid;
  outline: 1px #ffffff4d solid;
  outline-offset: -6px;
  border-radius: 100%;
  padding: 1em;
  aspect-ratio: 1 / 1;
  margin: 60px auto;
  max-width: 600px;
  z-index: 1;
  position: relative;
  backdrop-filter: blur(6px);
      background: #000000cf;
}
.pt_finish{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100vw;
    font-size: 16px;
    color: #6a6a6a;
    z-index: 10;
    background-size: contain;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 30% 70%, rgba(255, 255, 255, 0));
}
.pt_finish p{
    font-size: 16px;
    line-height: 1;
    display: block;
    margin: 0;
    font-weight: 400;
    font-style: normal;
    padding: 4px 0;
}
.notes {
    position: relative;
    z-index: 1;
}
.notes li {
    margin-bottom: 0.4em;
    list-style: disc;
    font-size: 12px;
    width: 100%;
    padding: 0;
}

.event_wrap{
	color: #fff;
  max-width: none;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  /* height: 100%; */
}
h4{
    font-size: 17px;
    margin: auto;
    background: rgb(0 0 0 / 79%);
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    border-radius: 30px;
    color: #fff;
}
h5 {
	text-align: center;
	font-size: 20px;
	color: #C8A03C;
}
.header_date{
  text-align: center;
  background: #fafa19;
  color: #6a6a6a;
  border-radius: 100px;
  font-size: 16px;
  padding: 6px;
  margin-top: 1em;
  font-weight: 600;
}
.header_text{
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 0;
  text-align: left;
  line-height: 1.7;
  padding: 1em;
  color: #fff;
}
.ren__wrap{
    animation: bg_fade 1s ease-out 1.5s 1 forwards;
  opacity: 0;
}
.bg_fixed_{
  position:relative;
	z-index:-1;
}
.bg-img_{
	margin: 0;
}
.bg-img_::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-6;
	width:100%;
	height:100%;
	background: #131313;
	background-size: cover;
	background-attachment: fixed;
}
.bg-img_1::before,
.bg-img_2::before,
.bg-img_3::before,
.bg-img_4::before,
.bg-img_5::before,
.bg-img_6::before,
.bg-img_7::before,
.bg-img_8::before,
.bg-img_9::before,
.bg-img_10::before,
.bg-img_max::before{
	content:"";
	display:block;
  position: fixed;
	top:0;
	left:0;
	z-index:-5;
	width:100%;
  height: 100%;
  background: #000 ;
  background-size: cover !important;
	background-attachment: fixed !important;
  opacity: 0;
}


@media screen and (max-width: 600px) {
.bg-img_1::before,
.bg-img_2::before,
.bg-img_3::before,
.bg-img_4::before,
.bg-img_5::before,
.bg-img_6::before,
.bg-img_7::before,
.bg-img_8::before,
.bg-img_9::before,
.bg-img_10::before,
.bg-img_max::before{
  content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -5;
	width: 100%;
	height: 700px;
	background: #000;
  background-size: cover !important;
	background-attachment: scroll !important;
	opacity: 0;
}
}

.bg-img_1::before{
	background: url(/images/event/continuous_battle/lottery/bg1.jpg) center top no-repeat;
  animation: bg_fade 1s ease-out 2s 1 forwards;
}
.bg-img_2::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center top no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;

}
.bg-img_3::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_4::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_5::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_6::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_7::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_8::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_9::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_10::before{
	background: url(/images/event/continuous_battle/lottery/bg2.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.bg-img_max::before{
	background: url(/images/event/continuous_battle/lottery/bg7.jpg) center center no-repeat;
  animation: bg_fade 1s ease-out 1.5s 1 forwards;
}
.cockpit_::before{
  content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-2;
	width:100%;
	height:100%;
  background: #000 ;
  background-size: cover !important;
	background-attachment: fixed !important;
	background: url(/images/event/continuous_battle/cockpit.png) center center no-repeat;
}

@keyframes bg_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#pagetop{
	cursor:pointer;
}
p.btn_regist {
	margin: auto;
	max-width: 370px;
	text-align:center;
	position:relative;
	margin:auto;
	background:transparent;
}
table tr:hover {
	background: #c8a03d;
}
.btn_regist a {
	color:#000;
	background: #c8a03d;
	border-width:6px;
	border-style: solid;
	border-color: #000;
	position:relative;
	margin:1em 0;
	display:inline-block;
	padding:0.5em 1em;
	transition:all 0.3s ease-in-out;
	text-align:center;
	font-size: 30px;
	font-weight:bold
}
.btn_regist a:before, .btn_regist a:after {
	content:'';display:block;
	position:absolute;
	border-color:#454545;
	box-sizing:border-box;
	border-style:solid;
	width:1em;height:1em;
	transition:all 0.3s ease-in-out
}
.btn_regist a:before {
	top: -16px;
	left: -16px;
	border-width: 4px 0 0 4px;
	z-index: 5;
}
.btn_regist a:after {
	bottom: -16px;
	right: -16px;
	border-width: 0 4px 4px 0;
}
.btn_regist a:hover:before, .btn_regist a:hover:after {
	width:calc(100% + 12px);
	height:calc(100% + 12px);
	border-color:#fff
}
.btn_regist a:hover {
	color:#fff;
	background-color:#d00;
	border-color:#d00
}
a {
	color:#000;
	border-color:#000
}
.btn_regist a:before, .btn_regist a:after {
	border-color:#000
}
.btn_regist a:hover:before, .btn_regist a:hover:after {
	border-color:#d00;
}
.btn_regist a:hover {
	color:#fff;
	background-color:#d00;
	border-color:#d00;
}
.panel {
	max-width: 370px;
	text-align:center;
	position:relative;
	margin:auto;
}
#win_item_text {
	padding: 5px 10px 10px 10px;
	font-size: 2.5em;
	line-height: 0.95em;
	color: #d00 !important;
	text-shadow: 0.04em 0.02em 0 #b0bec5, 0.08em 0.05em 0 rgb(0 0 0 / 80%);
	font-family: 'Dela Gothic One';
	background: rgb(0 0 0 / 65%);
	display: none;
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	width: 80%;
	border-radius: 6px;
}
.btn-primary{
	border-radius: 5px;
	background: #c8a03d;
	color: #000;
	padding: 10px;
	display: block;
	margin: 50px auto 50px auto;
}
.btn-none{
	border-radius: 0;
	background: #ff2a5b;
	color: #000;
	display: inline-block;
	margin: 10px auto;
	padding: 10px;
	font-size: 18px;
}
#win_item img {
	width: 100%;
	height: auto;
	z-index: 5;
	padding: 0 50px;
	filter: drop-shadow(0 0 5px rgba(251,242,151,0.9)) drop-shadow(0 0 29px #ffffff);
}
.selection-group{
	width: 500px;
    margin: auto;
}
.selection-group input[type="radio"] {
	display: none;
}
.selection-group img, .selection-group label img {
    width: 120px;
    background: #0000001a;
    border-radius: 100%;
    /* filter: contrast(10); */
    filter: contrast(10px);
    backdrop-filter: blur(10px);
    border: 1px #ffffff1c solid;
    outline: 1px #ffffff4d solid;
    outline-offset: -4px;
}
.selection-group input[type="radio"] + label img {
	opacity: 1;
}
.selection-group input[type="radio"]:checked + label img {
    position: relative;
    opacity: 1;
    filter: drop-shadow(0px 0px 0px #000);
    animation: rotation 4s linear infinite;
    border: 1px #ffffffb0 solid;
    outline: 4px #fffea587 solid;
    outline-offset: 4px;
    scale: 1.05;
    z-index: 2;
    transition: all 0.3s;
    background: #00000096;
}
.selection-group label:checked + label img:checked {
  animation: rotation 4s linear infinite;
  background:red;
}
.select_b{
    filter: drop-shadow(0px 0px 10px #fff) !important;
    border: 1px #ffffffb0 solid !important;
    outline: 4px #fffea587 solid !important;
    outline-offset: 4px !important;
    position: relative;
}
.fh5co-cards .fh5co-card .fh5co-card-body {
	padding: 10px;
	-webkit-border-radius: 50px;
	border-radius: 10px;
	margin: 0px auto;
	max-width: 600px;
	/* background: rgb(0 0 0 / 80%) !important; */
}



.t_r1,.t_r2,.t_r3,.t_r4,.t_r5,.t_r6,.t_r7,.t_r8,.t_r9,.t_r10,.t_r11,.t_r12,.t_r13 {
	opacity: 0;
	z-index:1
}
.t_r1 {
	animation: rotation1 .2s ease-in 1 forwards;
}
.t_r2 {
	animation: rotation2 .2s ease-in 0.2s 1 forwards;
}
.t_r3 {
	animation: rotation3 .2s ease-in 0.4s 1 forwards;
}
.t_r4 {
	animation: rotation4 .2s ease-in 0.6s 1 forwards;
}
.t_r5 {
	animation: rotation5 .2s ease-in 0.8s 1 forwards;
}
.t_r6 {
	animation: rotation6 .3s ease-in 1.5s 1 forwards;
}
.t_r7 {
	animation: rotation7 .3s ease-in 2.2s 1 forwards;
}
.t_r8 {
	animation: rotation8 .4s ease-in 3.4s 1 forwards;
}
.t_r9 {
	animation: rotation9 .2s ease-out 1.6s 1 forwards;
}
.t_r10 {
	animation: rotation10 .2s ease-out 1.8s 1 forwards;
}
.t_r11 {
	animation: rotation11 .2s ease-out 2s 1 forwards;
}
.t_r12 {
	animation: rotation12 .2s ease-out 2.5s 1 forwards;
}
.t_r13 {
	animation: rotation13 3s ease-out 5s 1 forwards;
}
@keyframes rotation1 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation2 {
  0% {transform: scale(10) rotate(0deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation3 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation4 {
  0% {transform: scale(10) rotate(0deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation5 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation6 {
  0% {transform: scale(2) ;}
  100% {transform: scale(1) ;opacity: 1;}
}
@keyframes rotation7 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation8 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1.1) rotate(0deg);opacity: 1;}
}
@keyframes rotation9 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation10 {
  0% {transform: scale(10) rotate(-80deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation11 {
  0% {transform: scale(10) rotate(0deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation12 {
  0% {transform: scale(10) rotate(-360deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
@keyframes rotation13 {
  0% {transform: scale(10) rotate(0deg);}
  100% {transform: scale(1) rotate(0deg);opacity: 1;}
}
.shake {
    display: block;
    animation: shake .2s  infinite;
    margin: 0 auto;
    width: 60%;
}

@keyframes shake {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(4px, 4px) rotateZ(1deg)}
    50% {transform: translate(0px, 4px) rotateZ(0deg)}
    75% {transform: translate(4px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.shake2 {
    display: block;
    animation: shake2 .2s  infinite;
    margin: 0 auto;
    width: 60%;
    margin-top: -15%;
}

@keyframes shake2 {
    0% {transform: translate(6px, 4px) rotateZ(0deg)}
    25% {transform: translate(6px, 4px) rotateZ(1deg)}
    50% {transform: translate(4px, 0px) rotateZ(0deg)}
    75% {transform: translate(6px, 4px) rotateZ(-1deg)}
    100% {transform: translate(6px, 0px) rotateZ(0deg)}
}
.bg_egg{
	background: none !important;
}
.egg_img{
	clear: both;
	width: 60%;
	height: auto;
	display: block;
	margin: 0 auto;
	position:relative;
	z-index:10 !important;
}

.comp17 {
	width: 440px;
    position: absolute;
    z-index: 1;
	top: 212px;
    left: 20px;
    right: 0;
}

#canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
canvas{
  width: 100vmax;
  height: 100vmax;
  margin-left: 50vw;
  margin-top: 50vh;
  transform: translate(-50%,-50%);
}

.grid_inner {
    margin: 0 auto;
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.blur-layer {
    -webkit-backdrop-filter: blur(var(--blur));
    contain: layout style paint;
    z-index: 10;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backdrop-filter: blur(var(--blur));
    background-image: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), color-stop(90%, var(--blurColor)), color-stop(95%, hsla(0, 0%, 100%, 0)));
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, rgb(36 36 36 / 35%) 90%, hsla(0, 0%, 100%, 0) 95%);
    background-size: 60px 60px;
    backdrop-filter: blur(10px);
}





.content {
  /* width: 95%;
  max-width: 40ch;
  padding: 3em 1em; */
  color: #fff;
}

.marquee_on {
    position: fixed;
    left: 0;
    z-index: -6;
    width: 100%;
    height: 100%;
    font-size: 10em;
    display: grid;
    place-items: center;
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: .8;
    font-style: italic;
}
.marquee_off {
    display: none;
}
.marquee_text {
  position: absolute;
  min-width: 100%;
  white-space: nowrap;
  animation: marquee 16s infinite linear;
  color: #fff;
}
  @keyframes marquee {
    from { translate: 70%; }
    to { translate: -70%; }
  }
.marquee_blur {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: #7a6755;
    background-image: linear-gradient(to right, white, 1rem, transparent 50%), linear-gradient(to left, white, 1rem, transparent 50%);
    filter: contrast(15);
}
.marquee_blur p {
  filter: blur(0.07em);
}
.marquee_clear {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.text {
  margin-block: 2em;
}


/*ぼたん*/
:root {
    --glow-hue: 222deg;
    --shadow-hue: 180deg;
    --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
  );
    --spring-duration: 1.33s;
    --f-size: 15;
    --f-unit: 1vmin;
    --f: calc(var(--f-size) * var(--f-unit));
    --bg: #18171700; 
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
    --yellow:#fafa19;
}
@property --shimmer {
    syntax: "<angle>";
    inherits: false;
    initial-value: 33deg;
}

@keyframes shimmer {
    0% {
        --shimmer: 0deg;
    }
    100% {
        --shimmer: 360deg;
    }
}

@keyframes shine {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes text {
    0% {
        background-position: 100% center;
    }    
    100% {
        background-position: -100% center;
    }    
}

button {
    --inset: 40px;
    color: var(--bg);
    font-weight: 600;
    background-image: linear-gradient(
        315deg,
        #ffc4ec -10%,
        #efdbfd 50%,
        #ffedd6 110%
    );
    padding: .8em 1.4em;
    margin: 1em 0;
    min-width: 200px;
    position: relative;
    isolation: isolate;
    box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 -10px 20px -10px hsla(var(--shadow-hue),10%,90%,95%);
    border-radius: 60px;
    scale: 1;
    transition: all var(--spring-duration) var(--spring-easing);
}

button:hover:not(:active),
button.active {
    transition-duration: calc(var(--spring-duration)*0.5);
    scale: 1.2;
    box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 0 0 transparent;
}
button:active {
    scale: 1.1;
    transition-duration: calc(var(--spring-duration)*0.5);
}

.shimmer {
    position: absolute;
    inset: calc(var(--inset) * -1);
    border-radius: inherit;
    pointer-events: none;
    mask-image: conic-gradient(
        from var(--shimmer, 0deg),
        transparent 0%,
        transparent 20%,
        black 36%,
        black 45%,
        transparent 50%,
        transparent 70%,
        black 85%,
        black 95%,
        transparent 100%
    );
    mask-size: cover;
    mix-blend-mode: plus-lighter;
    animation: shimmer 1.5s linear infinite both;
}
button .shimmer::before,
button .shimmer::after,
button:hover .shimmer::before,
button:hover .shimmer::after,
button.active .shimmer::before,
button.active .shimmer::after {
    opacity: 1;
    animation: shine 1.5s ease-in infinite forwards;
}
.shimmer::before,
.shimmer::after {
    transition: all 0.5s ease;
    opacity: 0;
    content: "";
    border-radius: inherit;
    position: absolute;
    mix-blend-mode: color;
    inset: var(--inset);
    pointer-events: none;
}
.shimmer::before {
    box-shadow: 0 0 calc(var(--inset) * 0.1)  2px hsl(var(--glow-hue) 20% 95%),
        0 0 calc(var(--inset) * 0.18)  4px hsl(var(--glow-hue) 20% 80%),
        0 0 calc(var(--inset) * 0.33)  4px hsl(var(--glow-hue) 50% 70%),
        0 0 calc(var(--inset) * 0.66) 5px hsl(var(--glow-hue) 100% 70%);
    z-index: -1;
}

.shimmer::after {
    box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
        inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
        inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
    z-index: 2;
}

button .text {
    color: transparent;
    background-clip: text;
    background-color: #303030;
    background-image: linear-gradient(120deg, transparent, hsla(var(--glow-hue),100%,80%,0.66) 40%, hsla(var(--glow-hue),100%,90%,.9) 50%, transparent 52%);
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: center 200%;
}

button:hover .text,
button.active .text {
    animation: text .66s ease-in 1 both;
}

/* parallax */
.parallax-area {
  position: fixed;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  inset: 0;
  z-index: -4;
}
.parallax-area1,
.parallax-area2,
.parallax-area3,
.parallax-area4,
.parallax-area5,
.parallax-area6,
.parallax-area7,
.parallax-area8,
.parallax-area9,
.parallax-area10{
    display: none;
}
#canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  /* position: relative; */
  z-index: -6;
}

.parallax-overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.parallax-item {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0.5;
  will-change: transform;
  transform: translate(-50%, -50%);
}

.parallax-item-1 {
  width: 300px;
  height: 300px;
  background: rgba(104, 152, 208, 0.85);
  transition: transform 0.35s linear;
}

.parallax-item-2 {
  width: 270px;
  height: 270px;
  background: rgba(114, 188, 201, 0.71);
  transition: transform 0.25s linear;
}

.parallax-item-3 {
  width: 240px;
  height: 240px;
  background: rgba(76, 197, 249, 0.68);
  transition: transform 0.18s linear;
}


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

.text_status_wrap {
    background: #2d2c27e6;
    color: #dedede;
    padding: 1em 2em;
    width: fit-content;
    margin: 16px auto;
    border-left: 9px #fafa19 ridge;
    outline: 1px #fffea547 solid;
    outline-offset: 2px;
    position: relative;
    min-width: 300px;
}
.text_status_wrap span{
    background: #fafa190f;
    color: #dedede;
    padding: 2px;
    width: -webkit-fill-available;
    display: inline-block;
    border-radius: 60px;
    margin-bottom: .6em;
    font-weight: 700;
    letter-spacing: .2em;
}
.result_wrap_{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-inline: auto;
    width: 100%;
}
/* .result_wrap_ > div > div{
    transform: translateZ(0px);
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 4px 4px);
} */

.result_failed_wrap{
    text-align: center;
    background: #f8000045;
    width: 100vw;
    margin: auto;
    z-index: 2;
    padding: 10px 6px 6px 6px;
    backdrop-filter: blur(10px);
}
.result_success_wrap{
    text-align: center;
    background: #00f8bc45;
    width: 100vw;
    margin: auto;
    z-index: 2;
    padding: 10px 6px 6px 6px;
    backdrop-filter: blur(10px);
    background: #00f8bc45 url(/images/event/continuous_battle/t_01.png) 99% 87% no-repeat;
    background-size: 17% auto;
}
p.failed {
  font-size: 40px;
  font-weight: 700;
  flex: 1;
  line-height: .75;
  margin: auto;
  color: #ffc9c9;
  text-align: center;
  transform: scaleX(var(--scale, 1));
  animation: glitch-p 11s infinite alternate;
}
p.failed::before,
p.failed::after {
    --top: 0;        // offset from top [0 - 10]
    --left: 0;       // offset from left [0.001 - 1]
    --v-height: 30%; // visible part;
    
    --n-tenth: calc(var(--f-size) * .1 * var(--top));
    --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
    --b-cut: calc(var(--t-cut) + var(--v-height));
    
    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    
    transform: translateX(calc(var(--left) * 100%));
    
    // this helps to get rid of pixelization
    filter: drop-shadow(0 0 transparent); 
    
    text-shadow: calc(var(--left) * -3em) 0 .02em lime, 
                 calc(var(--left) * -6em) 0 .02em #ff00e1;
    
    background-color: var(--bg);
    clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
  } 
  
  p.failed::before {
    animation: glitch-b 1.7s infinite alternate-reverse;
  }
  p.failed::after {
    animation: glitch-a 3.1s infinite alternate;
  }

@keyframes glitch-p {
  17% { --scale: .87; }
  31% { --scale: 1.1; }
  37% { --scale: 1.3; }
  47% { --scale: .91; }
  87% { --scale: 1; }
}

@keyframes glitch-a {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%; 
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
    10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%; 
    --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}

.sub {
    color: #ff4a54;
    letter-spacing: 1em;
    padding-top: 1em;
    padding-left: 1em;
    display: inline-block;
    font-size: 10px;
}
.sub.success{
  color: #fdff2f;
}

@keyframes background-pan {
  from {
    background-position: 0% center;
  }
  
  to {
    background-position: -200% center;
  }
}

@keyframes scale_ {
  from, to {
    transform: scale(0);
  }
  
  50% {
    transform: scale(1);
  }
}

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

.r_success {
    color: white;
    font-size: 40px;
    font-weight: 800;
    margin: 0px;
    padding: 0;
    text-align: center;
    line-height: .75;
}

.r_success > .magic {
  display: inline-block;
  position: relative;
}

.r_success > .magic > .magic-star {
  --size: clamp(20px, 1.5vw, 30px);
  
  animation: scale_ 700ms ease forwards;
  display: block;
  height: var(--size);
  left: var(--star-left);
  position: absolute;
  top: var(--star-top);
  width: var(--size);
}

.r_success > .magic > .magic-star > svg {
  animation: rotate_ 1000ms linear infinite;
  display: block;
  opacity: 0.7;
}

.r_success > .magic > .magic-star > svg > path {
  fill: var(--violet);
}

.r_success > .magic > .magic-text {
  animation: background-pan 3s linear infinite;
  background: linear-gradient(to right, rgb(237 255 255), rgb(255 255 255), rgb(255 229 238), rgb(237 255 255));
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}



/*modal*/

.modal-open-button_ {
  line-height: 1;
  padding: 6px 6px;
  color: #6a6a6a;
  text-decoration: none;
  cursor: pointer;
  background-color: #fafa19;
  box-shadow: 0px 0px 4px 1px rgb(0 0 255 / 0.4);
  position: fixed;
  top: 7px;
  right: 7px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 100;
  border-radius: 60px;
}
.modal-open-button_:hover {
  color: #6a6a6a;
  text-decoration: none;
}
.modal_ {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 80%);
  opacity: 0;
  transition: opacity 0.5s, scale 0s 0.5s;
  scale: 0;
}

.modal_:target {
  opacity: 1;
  transition: opacity 0.5s;
  scale: 1;
}

.close_ {
  position: absolute;
  top: 26px;
  right: 26px;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  transform: translate(50%, -50%);
  color: #6a6a6a;
  background: #fafa19;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 4px 1px rgb(0 0 255 / 0.4);
}
.close_:hover {
  color: #6a6a6a;
  text-decoration: none;
}
.modal-wrapper_ {
  position: relative;
  width: 94%;
  max-width: 600px;
  max-height: 70%;
  padding: 20px;
  margin: auto;
  overflow: scroll;
  background-color: #060606f0;
  border-radius: 5px;
}

.modal-content_ h1 {
  margin: 0;
  font-size: 4rem;
  line-height: 1.2em;
  letter-spacing: -0.02em;
}
.modal-content_ img{
    width: 40%;
    margin-inline: auto;
    display: block;
}

table {
    background-color: transparent;
    background: #fff;
    border-radius: 8px;
    margin: 16px 16px 40px 16px;
    width: -webkit-fill-available !important;
    overflow: hidden;
    color: #6a6a6a;
    font-size: 14px;
}
table tr:nth-child(odd) {
  background: #ffffff;
}

table tr:nth-child(even) {
  background: #f7f7f7;
}
table tr:hover {
	background: #c8a03d;
}
thead tr{
    background: #fafa19 !important;
    font-size: 16px;
}
table td{
    padding: 6px;
    width: auto !important;
}
table tr:hover {
    background: #eee;
}
@media screen and (max-width: 600px) {
table {
    border-radius: 6px;
    margin: 16px 0 40px 0;
    font-size: 12px;
}
thead tr{
    font-size: 12px;
}
table td{
    padding: 8px;
    width: auto !important;
}
img.hero_logo {
  width: 66px;
}
.cockpit_{
  display: none;
}
.cockpit_::before{
  display: none;
}
.marquee_blur {
    background-image: linear-gradient(to right, white, 1rem, transparent 10%), linear-gradient(to left, white, 1rem, transparent 10%);
}
.selection-group {
    width: 380px;
    margin: auto;
}
.result_failed_wrap {

}
p.failed {

}
.combo_count {
    padding: 10px 0;
    scale: .8;
    margin: 0;
}

.sub {
    padding-top: 0;
    scale: .8;
    margin-top: .5em;
}
.meter_wrap {
    width: 50px;
    bottom: 0;
    right: 0;
    scale: .8;
}
#effect_area {
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
}
.notes {
    padding: 16px;
    font-size: 12px;
    margin-top: 12em;
}
.modal-content_ img{
    width: 40%;
}

}