@charset "utf-8";

#contents::after {content: ''; width: 100vw; height: 100%; background: url(/img/pre_register/sp/bg.jpg) center top no-repeat; background-size:100% auto; position: fixed; left: 0; top: 0; z-index: -1;}

.pagetitle{position: relative; z-index: 10; background:url(/img/pre_register/sp/title.png) center no-repeat; background-size:auto 100%; height:calc(867/640*100vw); text-indent:200%; margin:calc(0/640*100vw) 0 calc(-313/640*100vw); font-size:0;}

main ol{height:calc(1558/640*100vw); margin:calc(0/640*100vw) 0 calc(0/640*100vw); padding-top:4.063vw; background: url(/img/pre_register/sp/pre_register.png); background-size:100% auto; text-indent:200%;}
main ol li{position:relative; height:19.531vw;}
main ol li + li{margin-top:3.125vw;}

main ol .tsuika::before{margin-top: 50vw;}
main ol li.clear::before{content:''; background:url(/img/pre_register/clear.png) no-repeat left top / 100% auto; width:17.344vw; height:17.344vw; position:absolute; top:-2.344vw; left:11.563vw; z-index:10;}
main ol li.last.clear::before{width:23.594vw; height:23.438vw; top:-6vw; left: 9vw;}



.back{margin-top:-32.344vw; padding:calc(54/640*100vw) 0 calc(58/640*100vw); display:flex; justify-content:center;}
.back a{width:calc(285/640*100vw); height:calc(61/640*100vw); display:block; background:url(/img/cmn/btn_top.png) left top no-repeat; background-size:100% auto; transition: 0.5s;}


@media screen and (min-width:641px){
/* 

    PC
    
***********************************************************************************/

#contents,
#wrapper{min-height: 100vh;}

#contents::after {background: url(/img/pre_register/bg.jpg) center top no-repeat; background-size: cover; position: fixed; left: 0; top: 0; z-index: -1;}

.pagetitle {height:496px; margin:109px auto -21px; width:1300px; background: none;}
.pagetitle::before {background: url(/img/pre_register/chara.png) center top no-repeat; background-size: cover; position: absolute; left:50%; top:-107px; width:1920px; height:1195px; margin:0 0 0 -960px; content: ''; z-index: -1;}
.pagetitle::after {background: url(/img/pre_register/title.png) center top no-repeat; background-size: auto 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; content: ''; z-index: 10;}

main ol {background: url(/img/pre_register/pre_register.png) ; background-size: 100% auto; height: 1200px; margin:0 auto; width:1300px; padding-top:74px;}
main ol li{position: relative; height:85px;}
main ol li + li{margin-top:20px;}
main ol .tsuika::before{margin-top: 170px;}
	
main ol li.clear::before{width:112px; height:111px; left: 262px; top:-24px;}
main ol li.last.clear::before{width:141px; height:150px; right:169px; top:-15px; left: 246px;}


.back {margin-top:-186px; padding: 43px 0 22px;}
.back a {width: 285px; height:61px;}
.back a:hover {filter: brightness(1.4);}

#endwrap{padding-top:184px;}
#endwrap .entry{display:block; position:fixed; right:0; left:0; bottom:0; width:100%; min-width:1400px; height:158px; margin:0 auto; padding:50px 0 0 213px; text-align:center; background:none; z-index:100;}
#endwrap .entry.absolute{position:absolute; top:0; left:0!important; bottom:inherit;}
#endwrap .entry::after{content:''; position:absolute; top:0; left:0; width:100%; height:363px; background:url(/img/pre_register/footer.png) center top repeat-x; z-index:-1;}
#endwrap .entry h2{position:absolute; top:0; left:50%; width:207px; height:100%; margin-left:-560px;  background:url(/img/top/jizen.png) no-repeat left bottom;}
#endwrap .entry img{width:244px; height:auto;}
#endwrap .entry .googleplay img {width:275px; height: auto;}
#endwrap .entry a{position:relative; left:-85px; display:inline-block; margin-top:0; transition:0.3s;}
#endwrap .entry a:hover{filter:brightness(1.2);}

#sitefooter{background: none; z-index:100;}

}

@media screen and (max-width:1920px) and (min-width:1401px){

}
@media screen and (min-width:1921px){

}