@charset "UTF-8";
/* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;}
/* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}#yui3-css-stamp.cssfonts{display:none}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.container{width:100%; max-width:1280px; margin:0 auto; padding:0 6%;}
.container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;}
@media(min-width:769px){
	.container{padding:30px;}
}

// COLOR
@black:#000;
@white:#FFF;
@gray:#4D4D4D;
@grayL:#EDEDED;
@green:#09FF9D;
@gold:#c19e2e;

// LESS
@ncc:no-repeat center center;
// MIXIN
.trans{transition:0.3s;}
.fb{font-weight:700;}
.tac{text-align:center;}
.tar{text-align:right;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{background-size:cover;}
.inline{display:inline-block;}

/*BASE*/
html,body{width:100%; height:100%; margin:0; scroll-behavior:smooth;}
body{background:@green; color:@white; line-height:1; -webkit-text-size-adjust:100%; font-weight:500; font-style:normal; font-feature-settings:"palt";
font-family:"Noto Sans JP",sans-serif; font-size:13px;}
img{max-width:100%; height:auto; vertical-align:middle;}
video{max-width:100%; height:auto; vertical-align:middle;}
/*LETTER*/
.wf{font-family:"Montserrat";}
strong{.fb()}
::selection{background:@green; color:@black;}
::-moz-selection{background:@green; color:@black;}
/*LINK*/
a:link{color:@black; .tdu(); .trans();}
a:visited{color:@black; .tdu();}
a:hover{color:@gray; .tdu();}
a:active{color:@black; .tdn();}
a img{border:none; .tdn(); .trans();}
a img:hover{opacity:0.6; .tdn();}
/*FADE*/
.fade{opacity:0;}
.fade.fadeSt{animation:fadeIn 0.85s ease-in-out 0.1s forwards;}

/*SP NAV*/
button.spmenu{z-index:1001; position:fixed; top:26px; right:5%; height:42px; width:42px; 
	background-color:transparent; background:@green; border-radius:6px; border:none; cursor:pointer; outline:none; padding:0; appearance:none;
	span{z-index:1002; position:absolute; left:7px; width:28px; height:2px; background-color:@white; .inline(); .trans();}
	span:nth-of-type(1){top:10px;}
	span:nth-of-type(2){top:20px;}
	span:nth-of-type(3){bottom:10px;}
}
button.spmenu.active{position:fixed; background:none;
	span{background-color:@black;}
	span:nth-of-type(1){-webkit-transform:translateY(10px) rotate(45deg); transform:translateY(10px) rotate(45deg);}
	span:nth-of-type(2){opacity:0;}
	span:nth-of-type(3){-webkit-transform:translateY(-10px) rotate(-45deg); transform:translateY(-10px) rotate(-45deg);}
}
div#spnav{z-index:1000; position:fixed; top:0; right:0; width:100%; height:100%; opacity:0; .trans();
	background:linear-gradient(#26d0ff 0%, #09ff9d 44.33%, #09ff9d 100%);
	overflow-y:auto; -webkit-overflow-scrolling:touch; visibility:hidden;
	h1{width:72px; position:absolute; top:26px; left:5%;}
	div.logo{padding:120px 24px 72px;
		h2{width:300px; margin:0 auto;}
	}
	ul.mainnav{margin:0 auto; width:260px;
		li{margin:0 0 26px;
			a{font-size:22px; letter-spacing:1px;
				display:flex;
				flex-flow:row nowrap; 
				justify-content:space-between;
				align-items:center;
				white-space:nowrap;
				span{width:22px; margin-right:12px; .trans();
					img{opacity:1!important;}
				}
			}
			a:link{color:@black; .tdn(); .trans();}
			a:visited{color:@black; .tdn();}
			a:hover{color:@black; .tdn();
				span{margin-right:0;}
			}
			a:active{color:@black; .tdn();}
		}
	}
}
div#spnav.active{right:0; opacity:1; -moz-transform:translateX(0); -webkit-transform:translateX(0); transform:translateX(0); visibility:visible;}


/*LOADING*/
div#loading{z-index:2000; position:fixed; background:linear-gradient(#26d0ff 0%, #09ff9d 44.33%, #09ff9d 100%);
	top:0; left:0; width:100%; height:100svh;
	div.loadingbox{position:absolute; width:80%; top:50%; left:50%; transform:translateY(-50%) translateX(-50%);
		h1{opacity:0;}
	}
	div.imgs{position:absolute; top:0; left:0; width:100%; height:100svh;
		img{position:absolute; opacity:0;}
		img:nth-child(1){width:70%; top:1%; left:0;}
		img:nth-child(2){width:75%; top:36%; right:-4%;}
		img:nth-child(3){width:77%; top:68%; left:-6%;}
	}
}

div#loading.starts{animation:curtain 0.8s ease-in-out 5.7s forwards;
	div.loadingbox{
		h1{animation:revealFromLeft 3.5s ease-in-out forwards;}
	}
	div.imgs{
		img:nth-child(3){animation:imgIn 0.5s ease-in-out 3.6s forwards;}
		img:nth-child(2){animation:imgIn 0.5s ease-in-out 4.1s forwards;}
		img:nth-child(1){animation:imgIn 0.5s ease-in-out 4.5s forwards;}
	}
}

div#kv{position:relative; width:100%; background:@black;
	div.kvtxt{z-index:3; position:absolute; top:0; left:0; width:100%; height:100%;
		img{width:7%; position:absolute; opacity:0;}
		img:nth-child(1){top:30%; left:66%;}
		img:nth-child(2){top:37%; left:31%;}
		img:nth-child(3){top:43%; left:22.5%;}
	}
	div.kvimg{position:relative; z-index:2; width:100%;}
}
div#kv.starts{
	div.kvtxt{
		img:nth-child(1){animation:fadeIn 0.7s ease-in-out 6.6s forwards;}
		img:nth-child(2){animation:fadeIn 0.7s ease-in-out 7.2s forwards;}
		img:nth-child(3){animation:fadeIn 0.7s ease-in-out 7.8s forwards;}
	}
}

div.tickerbox{position:absolute; top:77.8%; left:0; overflow:hidden; width:100%;}
div.tickerbox2{position:absolute; bottom:0; left:0; overflow:hidden; width:100%;
	div.ticker{opacity:0.15;
		ul{color:@white; animation:hscrollrev 300s linear infinite;
			li{font-size:48px; font-style:normal; padding:0 10px 0 0;}
		}
	}
}
div.ticker{width:100%; white-space:nowrap; padding:0; pointer-events:none; overflow:hidden;
	ul{color:@green; animation:hscroll 50s linear infinite; font-weight:800; .inline();
		li{font-size:13px; font-style:italic; padding:0 5px 0 0; text-box:trim-both cap alphabetic; .inline();
			img{width:10px;}
		}
	}
}

div.entrybtn{z-index:100; position:fixed; bottom:5%; right:4%; width:100px;}

/*LAYOUT*/
main{background:@black; position:relative; width:100%; overflow:hidden; clear:both; display:block;}

div.topintro{position:relative; overflow:hidden; padding:10px 0 0; background:@black;
	article{z-index:3; position:relative;
		div.container{z-index:4; position:relative;}
		h2{margin:0 0 18px;}
		section{padding:0 6%; margin:0 0 50px;}
		div.illust{z-index:2; position:absolute; width:100%; height:100%; top:0; left:0;
			img{position:absolute;}
			img:nth-child(1){width:36%; top:10%; right:-5%;}
			img:nth-child(2){width:38.5%; top:70%; right:-6%;}
			img:nth-child(3){width:42%; top:37%; left:-12%;}
		}
	}
	img.bgimg{z-index:1; position:absolute; width:60%; top:30%; right:-10%; opacity:0.5;}
}
div.topbox{
	h2{font-size:35px; font-weight:800; margin:0 0 10px; color:@black; white-space:nowrap; .tac();
	text-shadow:1px 1px 0 @green,-1px 1px 0 @green,1px -1px 0 @green,-1px -1px 0 @green;}
}

div.bggr{z-index:1; position:relative; background:linear-gradient(#000 0%, #00fece 200%);
	div.bgarea{z-index:2; position:absolute; top:0; left:0; width:100%; height:100%;
		img{position:absolute; width:60%; opacity:0.5;}
		img:nth-child(1){top:4%; left:-10%;}
		img:nth-child(2){top:40%; right:-10%;}
	}
}
div.bgbk{position:relative; z-index:1; background-image:linear-gradient(#666 1px, transparent 1px),linear-gradient(90deg, #666 1px, transparent 1px);
	background-size:40px 40px; background-position:center center;
}

div.topreward{z-index:3; position:relative; padding:100px 0 72px;
	h3{width:63.5%; margin:0 auto 40px;}
	h4{margin:0 0 20px;}
	article{position:relative;}
	section{z-index:2; position:relative;
		img.scales{position:relative; opacity:0;}
	}
}
div.glitch{width:100%; height:100%;}
.glitch__img{width:100%; height:100%; background:url("../img/reward_sp.png") no-repeat top center; .bgsc();}

div.topentry{padding:100px 0 90px;
	h3{width:61.1%; margin:0 auto 40px;}
	section{
		div{margin:0 auto 40px;}
	}
	a{display:block; width:90%; margin:0 0 10px 3%;}
	p{font-size:11px; margin:0 0 46px; .tac();}
	section.cond{
		div:nth-child(1){margin:0 auto 74px;}
		div:nth-child(2){margin:0 auto 40px;}
	}
}

div.topschedule{padding:0 0 90px;
	h3{width:52.3%; margin:0 auto 40px;}
	section{width:96%; margin:0 auto;}
}

div.topreality{padding:0 0 80px;
	h2{color:@white; text-shadow:none; margin:0 0 24px;
		span.ja{font-size:16px; font-weight:500;}
	}
}
div.reality{background:@grayL; padding:40px 6%; border-radius:20px;
	div.app{width:60px; margin:0 auto 24px;}
	h3{width:190px; margin:0 auto 32px;}
	p{color:@gray; font-weight:400; font-size:14px; line-height:2; .tac(); margin:0 0 32px;}
	ul{
		display:flex;
		-webkit-flex-flow:row nowrap; flex-flow:row nowrap;
		-webkit-justify-content:space-between; justify-content:space-between;
		-webkit-align-items:flex-start; align-items:flex-start;
		li{width:47%;}
	}
}

div.topadd{padding:0 0 80px;
	h2{color:@white; text-shadow:none; margin:0 0 24px;}
	p{line-height:2; letter-spacing:0.5px;}
}

/*FOOTER*/
footer{position:relative; padding:40px 0 60px; background:@black; color:@white; overflow:hidden;
	h1{width:150px; margin:0 auto 18px;}
	ul.sns{width:150px; margin:0 auto;
		display:flex;
		flex-flow:row nowrap; 
		justify-content:space-between;
		align-items:center;
		li:nth-child(1){width:23.5px;}
		li:nth-child(2){width:19.3px;}
		li:nth-child(3){width:19.3px;}
	}
}

/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){
body{min-width:1220px;}
.sp{display:none!important;}

/*SP NAV*/
button.spmenu{top:30px; right:4%; height:66px; width:66px;
	span{width:42px; left:12px; height:3px;}
	span:nth-of-type(1){top:16px;}
	span:nth-of-type(2){top:32px;}
	span:nth-of-type(3){bottom:16px;}
}
button.spmenu.active{
	span:nth-of-type(1){-webkit-transform:translateY(15px) rotate(45deg); transform:translateY(15px) rotate(45deg);}
	span:nth-of-type(3){-webkit-transform:translateY(-15px) rotate(-45deg); transform:translateY(-15px) rotate(-45deg);}
}
div#spnav{padding:48px 4%;
	section{position:absolute; top:50%; left:50%; transform:translateY(-50%) translateX(-50%);
		display:flex;
		flex-flow:row nowrap; 
		justify-content:center;
		align-items:center;
	}
	h1{width:160px; top:30px; left:4%;}
	div.logo{padding:0;
		h2{width:560px; margin:0;}
	}
	ul.mainnav{width:350px; margin:0 0 0 30%; 
		li{margin:0 0 24px;
			a{font-size:28px; letter-spacing:2px;
				span{width:28px; margin-right:15px;}
			}
		}
	}
}

/*LOADING*/
div#loading{
	div.imgs{
		img:nth-child(1){width:35%; top:2.4%; left:32.5%;}
		img:nth-child(2){width:36%; top:40%; right:4%;}
		img:nth-child(3){width:37%; top:40%; left:4%;}
	}
}

div#kv{
	div.kvtxt{z-index:3; position:absolute; top:0; left:0; width:100%; height:100%;
		img{width:5%; position:absolute;}
		img:nth-child(1){top:20%; left:63%;}
		img:nth-child(2){top:27%; left:36%;}
		img:nth-child(3){top:36%; left:29%;}
	}
	div.kvimg{position:relative; z-index:2; width:100%;}
}

div.tickerbox{top:70.5%;}
div.tickerbox2{
	div.ticker{
		ul{animation:hscrollrev 400s linear infinite;
			li{font-size:240px; padding:0 30px 0 0; letter-spacing:1px;}
		}
	}
}
div.ticker{width:100%;
	ul{animation:hscroll 50s linear infinite;
		li{font-size:56px; padding:0 15px 0 0;
			img{width:32px;}
		}
	}
}

div.entrybtn{bottom:3%; right:2%; width:17%;}

/*LAYOUT*/
main{}

div.topintro{padding:0;
	article{width:1280px; margin:0 auto;
		h2{width:767px; margin:0 auto 30px;}
		section{width:552px; padding:0; margin:0 auto 70px;}
		h4{width:770px; margin:0 auto;}
		div.illust{
			img:nth-child(1){width:322px; top:15%; right:6%;}
			img:nth-child(2){width:347px; top:60%; right:4%;}
			img:nth-child(3){width:353px; top:30%; left:0;}
		}
	}
	img.bgimg{width:758px; top:30%; right:0;}
}

div.topbox{
	h2{font-size:62px; margin:0 0 20px;}
}

div.bggr{
	div.bgarea{
		img{width:758px; opacity:0.5;}
		img:nth-child(1){width:758px; top:6%; left:0;}
		img:nth-child(2){top:46%; right:0;}
	}
}
div.bgbk{background-size:60px 60px;}

div.topreward{padding:234px 0 76px;
	h3{width:356px; margin:0 auto 80px;}
	h4{width:986px; margin:0 auto 80px;}
	section{width:88%; max-width:1114px; margin:0 auto;
		img.scales{position:relative; opacity:0;}
	}
}
.glitch__img{background:url("../img/reward_pc.png") no-repeat top center; .bgsc();}

div.topentry{padding:200px 0 140px;
	h3{width:341px; margin:0 auto 82px;}
	section{
		div{margin:0 auto 80px;}
	}
	a{position:relative; width:716px; margin:0 auto 18px; left:-46px;}
	p{font-size:18px; margin:0 0 86px;}
	section.cond{
		div:nth-child(1){margin:0 auto 128px;}
		div:nth-child(2){width:900px; margin:0 auto 50px;}
		div:nth-child(3){width:900px; margin:0 auto;}
	}
}

div.topschedule{padding:0 0 140px;
	h3{width:292px; margin:0 auto 64px;}
	section{width:1156px;}
}

div.topreality{padding:0 0 140px;
	h2{margin:0 0 42px;
		span.ja{font-size:27px;}
	}
}
div.reality{width:900px; margin:0 auto; padding:48px 6% 56px;
	div.app{width:88px; margin:0 auto 54px;}
	h3{width:276px; margin:0 auto 72px;}
	p{font-size:16px; margin:0 0 82px;}
	ul{width:462px; margin:0 auto;
		li{width:46%;}
	}
}

div.topadd{padding:0 0 100px;
	article{width:900px; margin:0 auto;}
	h2{font-size:55px; margin:0 0 42px;}
	p{font-size:21px; line-height:2; letter-spacing:1px;}
}

/*FOOTER*/
footer{padding:104px 0 104px;
	h1{width:228px; margin:0 auto 26px;}
	ul.sns{width:228px;
		li:nth-child(1){width:35.3px;}
		li:nth-child(2){width:29px;}
		li:nth-child(3){width:29px;}
	}
}

}
/************************ SP ************************/
@media (max-width:768px){
	.pc{display:none;}
	.spmb{margin-bottom:6%;}
}
/************************ NOISE ************************/
div.noisewrap{z-index:-1; position:absolute; display:block; overflow:hidden; top:0; left:0; width:100%; height:100%;}
div.noisebg{width:100%; height:100%; opacity:0.8;}
div.noisebg::before{content:''; position:absolute; display:block; top:-50%; left:-50%; width:200%; height:200%;
	background-image:url("../img/bg/noise.png"); will-change:transform; animation:noiseBGS 1s steps(4) infinite;}
div.whver{opacity:0.3;}
div.whver::before{background-image:url("../img/bg/noisew.png");}
/************************ ANIM ************************/
@keyframes curtain{
	  0%{opacity:1; width:100%; height:100svh;}
	 95%{opacity:0; width:100%; height:100svh;}
	100%{opacity:0; width:0%; height:0svh;}
}
@keyframes revealFromLeft {
	0% {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
	1% {
		clip-path: inset(0 100% 0 0);
		opacity: 1;
	}
	60% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
	90% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0 0 0);
		opacity: 0;
	}
}
.fuwa1 {
  animation: fuwa1 7s ease-in-out infinite;
}
@keyframes fuwa1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -10px); }
  50% { transform: translate(-3px, 0); }
  75% { transform: translate(5px, 8px); }
}
.fuwa2 {
  animation: fuwa2 7s ease-in-out infinite;
}
@keyframes fuwa2 {
  0% { transform: translateY(0); }
  20% { transform: translateY(-8px); }
  45% { transform: translateY(4px); }
  70% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.fuwa3 {
  animation: fuwa3 9s ease-in-out infinite;
}
@keyframes fuwa3 {
  0% { transform: translate(0, 0); }
  15% { transform: translate(6px, -5px); }
  35% { transform: translate(-8px, 10px); }
  55% { transform: translate(4px, -8px); }
  75% { transform: translate(-6px, 6px); }
  100% { transform: translate(0, 0); }
}
.fuwafuwa{
	animation-name:fuwafuwa;
	animation-duration:2.2s;
	animation-iteration-count:infinite;
	animation-timing-function:ease;
}
@keyframes fuwafuwa{
	0%{transform:translate(0, 10px);}
	50%{transform:translate(0, 0);}
	100%{transform:translate(0, 10px);}
}
@keyframes imgIn{
	  0%{opacity:0;}
	100%{opacity:1; }
}
@keyframes fadeIn{
	  0%{opacity:0; transform:translate(0,15px);}
	100%{opacity:1; transform:translate(0,0px);}
}
@keyframes hscroll{
	to{transform:translateX(-50%);}
}
@keyframes hscrollrev{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(4%);}
}
@keyframes noiseBGS{
	  0%{transform:translate(0);}
	 10%{transform:translate(-5%,-5%);}
	 20%{transform:translate(-10%,5%);}
	 30%{transform:translate(5%,-10%);}
	 40%{transform:translate(-5%,15%);}
	 50%{transform:translate(-10%,5%);}
	 60%{transform:translate(15%);}
	 70%{transform:translateY(10%);}
	 80%{transform:translate(-15%);}
	 90%{transform:translate(10%,5%);}
	100%{transform:translate(5%);}
}