@charset "utf-8";

/* font
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Noto+Sans:ital,wdth,wght@0,62.5,100..900;1,62.5,100..900&display=swap');

/* root
================================================== */
:root{
	/* text */
	--default-font-size:16px;
	--main-text-color:#FFF;
	--text-line-height:1.25;
	
	/* background */
	--main-background:#000;
	--header-background:transparent;
	--footer-background:transparent;
	--sub-background:#222;
}

/* reset
================================================== */
*:where(:not(iframe,img,svg):not(svg *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
body{position:relative;width:100%;font-size:var(--default-font-size);line-height:var(--text-line-height);color:var(--main-text-color);font-family:'Noto Sans',sans-serif;font-optical-sizing:auto;font-weight:300;font-style: normal;font-variation-settings:'wdth' 62.5;background:var(--main-background);-webkit-text-size-adjust:100%;}
footer,header,main,section,picture{display:block;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
img{width:100%;height:auto;vertical-align:top;}
a{margin:0;padding:0;color:var(--main-text-color);vertical-align:bottom;background:transparent;cursor:pointer;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}

/* BE:FIRST
================================================== */
.wrapper{
	position:relative;
	display:flex;
	flex-direction:column;
	width:100vw;
	min-height:100dvh;
	overflow:hidden;
	z-index:2;
}
canvas{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100dvh;
	z-index:0;
}

/* header
-------------------------------------------------- */
header{
	padding:40px min(6vw,30px) 59px;
	background:var(--header-background);
}
.headerLogo{
	width:120px;
	margin:0 auto;
}
@media screen and (max-width:767px){
	header{
		padding-top:32px;
		padding-bottom:44px;
	}
	.headerLogo{
		width:80px;
	}
}

/* footer
-------------------------------------------------- */
footer{
	padding:35px min(6vw,30px);
	background:var(--footer-background);
}
.footerLogo{
	width:120px;
	margin:0 auto;
}
.footerLogo a{
	display:block;
	transition:0.3s;
}
.footerButton{
	width:fit-content;
	margin:25px auto 35px;
}
.footerButton a{
	display:flex;
	justify-content:center;
	align-items:center;
	column-gap:8px;
	width:100%;
	height:44px;
	padding:0 50px;
	font-size:13px;
	font-family:Lato;
	font-weight:900;
	border:1px solid var(--main-text-color);
	border-radius:22px;
	transition:0.3s;
}
.footerButton img{
	width:12px;
	height:auto;
}
.footerSns{
	display:grid;
	grid-template-columns:repeat(5,auto);
	align-items:center;
	column-gap:22px;
	width:fit-content;
	height:24px;
	margin:0 auto;
}
.footerSns li img{
	display:block;
	height:24px;
}
.footerSns li:nth-of-type(5) img{
	width:28px;
	height:auto;
}
.footerSns a img{
	transition:0.3s;
}
@media screen and (max-width:767px){
	footer{
		padding-top:25px;
		padding-bottom:25px;
	}
	.footerLogo{
		width:80px;
	}
	.footerButton{
		margin-top:22px;
		margin-bottom:25px;
	}
	.footerSns{
		column-gap:28px;
		height:20px;
	}
	.footerSns li img{
		height:20px;
	}
	.footerSns li:nth-of-type(5) img{
		width:24px;
	}
}
@media screen and (min-width:768px){
	.footerLogo a:hover,
	.footerButton a:hover{
		opacity:0.7;
	}
	.footerSns a:hover img{
		transform:scale(1.2);
	}
}

/* main
-------------------------------------------------- */
main{
	flex:1;
}
.section{
	max-width:768px;
	margin:0 auto;
	padding:0 min(6vw,30px) 85px;
	text-align:center;
}
.nobodyKnows{
	font-size:58px;
	font-weight:900;
}
.nobodyKnows span{
	font-weight:100;
}
.releaseDate{
	margin-top:13px;
	font-size:20px;
}
.message{
	width:676px;
	margin:58px auto 0;
}
.messageText{
	margin:25px 0 26px;
	font-size:30px;
	font-weight:400;
}
.messageText span{
	display:inline-block;
}
.messageText span+span{
	margin-left:1ex;
}
.messageLine{
	height:auto;
	line-height:0;
}
.calendar{
	width:64px;
	margin:53px auto 0;
	cursor:pointer;
}
.banner{
	display:block;
	width:480px;
	margin:55px auto 0;
	padding:12px 0 11px;
	background:var(--sub-background);
}
.bannerTitle{
	font-size:22px;
	font-weight:700;
}
.bannerText{
	font-size:18px;
	margin-top:4px;
}
@media screen and (max-width:767px){
	.section{
		padding-bottom:75px;
	}
	.nobodyKnows{
		font-size:38px;
	}
	.releaseDate{
		margin-top:18px;
		font-size:18px;
	}
	.message{
		width:100%;
		max-width:440px;
		margin-top:35px;
	}
	.messageText{
		display:grid;
		grid-auto-flow:row;
		row-gap:3px;
		margin:18px 0;
		font-size:24px;
	}
	.messageText span+span{
		margin-left:0;
	}
	.calendar{
		width:40px;
		margin-top:39px;
	}
	.banner{
		width:100%;
		max-width:440px;
		margin-top:40px;
		padding:10px 0 8px;
	}
	.bannerTitle{
		font-size:20px;
	}
	.bannerText{
		font-size:16px;
		margin-top:3px;
	}
}

/* modal
-------------------------------------------------- */
#modal{
	position:fixed;
	top:0;
	left:0;
	display:grid;
	grid-template-columns:480px;
	place-content:center;
	width:100vw;
	height:100dvh;
	padding:0 min(6vw,30px);
	opacity:0;
	visibility:hidden;
	overflow:auto;
	background:rgba(0,0,0,0.8);
	transition:0.3s;
}
#modal.active{
	opacity:1;
	visibility:visible;
}
.modalContent{
	width:100%;
	position:relative;
	padding:32px 0;
	background:transparent;
}
.modalClose{
	position:absolute;
	top:0;
	right:0;
	width:24px;
	height:24px;
	cursor:pointer;
}
.modalClose::before,
.modalClose::after{
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	width:32px;
	height:1px;
	background:#fff;
	content:'';
}
.modalClose::before{
	transform:translate(-50%,-50%) rotate(45deg);
}
.modalClose::after{
	transform:translate(-50%,-50%) rotate(-45deg);
}
.modalNav{
	display:grid;
	row-gap:8px;
}
.modalNav a{
	display:block;
	width:100%;
	padding:27px 0 28px;
	font-size:22px;
	font-weight:700;
	text-align:center;
	background:var(--sub-background);
}
@media screen and (max-width:767px){
	#modal{
		grid-template-columns:100%;

	}
	.modalNav a{
		padding:24px 0;
		font-size:22px;
	}
}