@charset "utf-8";

#h1Area {width: 70%; position: absolute; left: 40px; top: calc(100% - 210px); transform: translateY(-100%);}
#h1Area p {margin-top: 1.5vw; color: #999; font-size: 2.5vw; white-space: nowrap; line-height: 1;}
#mainArea {width: 100%; height: calc(100% - 80px); background: url("../img/top/noise.png") repeat;}

#news {position: fixed; bottom: 80px; height: 50px; line-height: 50px; color: #FFF; font-size: 12px; width: calc(100% - 80px); overflow: hidden; border-radius: 5px; margin: 40px}

#news dt {background-color: rgba(60,60,60,1); text-align: center; width: 90px; float: left;}
#news dd {background-color: rgba(45,45,45,1); padding-left: 15px; width: 100%; margin-left: 90px}

@media screen and (max-width : 1023px ){
	#h1Area {width: 65%; left: 30px; top: calc(50% - 80px); transform: translateY(-50%);}
	#h1Area p {margin-top: 3vw; font-size: 3.5vw;}
	#news {height: 40px; line-height: 40px; width: calc(100% - 60px); margin: 30px}
}

@media screen and (max-width : 767px ){
	#h1Area {width: 80%; left: 20px; top: calc(50% - 40px); }
	#h1Area p {margin-top: 4vw;  font-size: 4.8vw;}
	#mainArea {height: calc(100% - 40px);}
	#news {bottom: 60px; width: calc(100% - 40px); margin: 0 20px}
}

@media screen and (min-width : 1440px ){
	#h1Area {width: 1008px;}
	#h1Area p {margin-top: 21.6px; font-size: 36px}
}

#gradient-canvas {
	filter: blur(0px);
	opacity: 0.85;
	width: 100%;
	height: 100%;
	--gradient-color-1: #1e1e1e;
	--gradient-color-2: #3c3c3c;
	--gradient-color-3: #5a5a5a;
	--gradient-color-4: #000000;
}