@charset "UTF-8";
/* CSS Document */

body{
	position:relative;
	z-index:-40;
}

header{
	position:fixed;
	width:100%;
	height:100vh;
	display:flex;
	z-index:-30;
}

header img{
	width:50%;
	object-fit:cover;
}

main{
	position:relative;
	max-width:800px;
	margin:0 auto;
	background-color:#FFEFD7;
	color:#1C1C1C;
	z-index:-20;
	font-family: m-plus-rounded-1p, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:16pt;
}

.main-title{
	padding-top:40px;
	text-align:center;
}

.main-title p{
	color:#A56921;
	padding-bottom:20px;
}

.main-title h2{
	color:#DB953A;
	font-family: ab-marusan, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:30pt;
}

.main-title h1{
	color:#875015;
	font-family: ab-marusan, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:60pt;
}

.main-menu{
	display:flex;
	flex-wrap:wrap;
	width:80%;
	padding:100px 0;
	margin:0 auto;
}

.menu{
	width:40%;
	box-sizing:border-box;
	margin:2% auto;
	padding:3%;
	text-align:center;
	transition:0.5s;
}

.menu span{
	font-family: ab-marusan, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:20pt;
}

.be{
	background-color:#FFC880;
}

.br{
	color:#F2F2F2;
	background-color:#A56921;
}

.menu:hover{
	background-color:#DB953A;
	color:#1C1C1C;
}

.n{
	display:none;
}

#howto,#lineup,#sidemenu,#contact{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:5vh 0 5vh 0;
}

.subtitle{
	padding:30px 0;
	margin-bottom:20px;
	text-align:center;
	font-family: ab-marusan, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:40pt;
}

#howto .subtitle span,#lineup .subtitle span{
	font-family: m-plus-rounded-1p, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:24pt;
}

.img-block{
	text-align:center;
	width:50%;
	margin:2vh auto 1vh auto;
}

.img-block img{
	object-fit:contain;
}

.info{
	display:block;
	width:80%;
	margin:0 auto;
}

.block{
	padding:50px 10%;
}

.block h3,.side h3{
	margin-bottom:150px;
	text-align:center;
}

.re{
	position:relative;
}

.bl{
	position:relative;
	top:-10vh;
}

.ye{
	position:relative;
	top:-20vh;
}

.re::before{
	position:absolute;
	content:"";
	background-color:#FFDEC7;
	top:0;
	left:0;
	bottom:0;
	right:0;
	transform:skewY(-7deg);
	z-index:-10;
}

.bl::before{
	position:absolute;
	content:"";
	background-color:#DEF6FF;
	top:0;
	left:0;
	bottom:0;
	right:0;
	transform:skewY(7deg);
	z-index:-10;
}

.ye::before{
	position:absolute;
	content:"";
	background-color:#FFFEE1;
	top:0;
	left:0;
	bottom:0;
	right:0;
	transform:skewY(-7deg);
	z-index:-10;
}

.d-red{
	color:#D84141;
}

h3 span{
	font-family: ab-marusan, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:24pt;
}

.btn{
	width:50%;
	margin:2vh auto;
	padding:20px;
	text-align:center;
	transition:0.8s;
}

.btn:hover{
	width:60%;
	background-color:#875015;
	color:#F2F2F2;
}

.copyright{
	text-align:center;
	padding:50px 0 25px 0;
	font-family: m-plus-rounded-1p, sans-serif;
	font-weight: 400;
	font-style: normal;
}

footer{
	max-width:800px;
}

.to-top-btn{
	display:none;
	width:100%;
	position:fixed;
	border-radius:50%;
	width:5vw;
	height:5vw;
	bottom:20px;
	right:calc(50vw - 400px - 3vw);
}

.to-top-btn::after{
	content:"";
	position:absolute;
	border-top:solid 1px #1C1C1C;
	border-left:solid 1px #1C1C1C;
	transform:rotate(45deg);
	width:50%;
	height:50%;
	top:35%;
	left:25%;
}

.to-top-btn:hover{
	background-color:#DB953A;
}

.cur{
	cursor:pointer;
}

@media(max-width:1080px){
	header{
		display:none;
	}

	main{
		max-width:100%;
	}

	.to-top-btn{
		width:10vw;
		height:10vw;
		right:20px;
	}
}

@media(max-width:485px){
	.n{
		display:block;
	}
}