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

* {
	margin: 0;
	padding: 0
}

body {
	height: 100vh;
	font-size: 62.5%;
	overflow-x: hidden;
	overflow-y: hidden;
	cursor: default;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

@font-face {
	font-family: "Open Sans";
	src: url(../res/fonts/opensans.ttf);
	font-display: swap;
}

@font-face {
	font-family: "mt";
	src: url(../res/fonts/MyriadSetProThin.ttf);
	font-display: swap;
}

@font-face {
	font-family: "AvertaCY";
	src: url(../res/fonts/AvertaCY-Semibold.woff2);
	font-display: swap;
}
#load_box{
	display: flex;
	position: fixed;
	top: 45%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#load_box span{
	width: 1vw;
	height: 3vw;
	margin: 0 .5vw;
	background-color: var(--loading_color_35);
	animation-name: loading_box;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: calc(.2s * var(--load_delay));
	opacity: 0;
}

@keyframes loading_box {
  	0% {
		transform: translateX(-1vw) scale(1);
		box-shadow: 0 0 0 var(--loading_color_25);
		opacity: 0;
  	}
  	50% {
		transform: translateX(0) scaleX(1.35) scaleY(1.5);
	  	box-shadow: 0 .2vw 1vw var(--loading_color_25);
		opacity: 1;
  	}
  	100% {
	  	transform: translateX(1vw) scale(1);
		box-shadow: 0 0 0 var(--loading_color_25);
		opacity: 0;
  	}
}

#load_text{
	display: flex;
	position: fixed;
	top: 45%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#load_text h1{
	width: 1.1vw;
	color: var(--loading_color);
	font-size: 1.5vw;
	line-height: 2vw;
	text-align: center;
	letter-spacing: .15vw;
	animation-name: loading_text;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: calc(.2s * var(--text_delay));
	opacity: 0;
}

@keyframes loading_text {
	0% {
		opacity: 0;
	}
  	50% {
		transform: scaleX(1.05) scaleY(1.1);
		opacity: 1;
  	}
  	100% {
		opacity: 0;
  	}
}
#load_ajax{
	position: fixed;
	left: 50%;
	top: 50%;
	width: 50vw;
	transform: translateX(-50%) translateY(350%);
	opacity: .85;
}
.progress_bar{
	width: 100%;
	background-color: var(--loading_color_35);
}
.progress_bar_doing{
	width: 0;
	background-color: var(--loading_color);
}
.progress_bar,.progress_bar_doing{
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	transition: width 0.3s ease-out;
}
#load_ajax ul{
	display: flex;
	align-items: flex-start;
	position: relative;
	padding-top: 4px;
	color: var(--loading_color);
	font-size: 12px;
	letter-spacing: .8px;
	text-transform: uppercase;
	text-shadow: 0 0 1px var(--loading_color);
}
#load_ajax ul li{
	flex: none;
}
#load_ajax ul li:first-child{
	position: relative;
	left: 2px;
}
#load_ajax ul li:nth-child(2){
	position: relative;
}
#load_ajax ul li:first-child,#load_ajax ul li:nth-child(2){
	width: 8px;
	height: 16px;
	overflow: hidden;
}
#load_ajax ul li:first-child::before,#load_ajax ul li:nth-child(2)::before{
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: var(--loading_color);
	transform: rotate(-45deg) translateX(-10px) translatey(-1px) scaleX(1.25) scaleY(.7);
}
#load_ajax ul li:nth-child(3){
	width: 72px;
}
#load_ajax ul li:nth-child(3) p{
	text-align: center;
	transform: scaleY(1.1);
}
#load_ajax ul li:nth-child(4){
	width: 16px;
	padding-top: 8px;
}
#load_ajax ul li:nth-child(4) span{
	display: block;
	margin-left: 50%;
	width: 6px;
	height: 2px;
	background-color: var(--loading_color);
	transform: translateX(-50%);
}
#load_ajax ul li:last-child{
	flex: 1;
	min-width: calc(50vw - 104px);
}
#load_ajax ul li:last-child p{
	padding-left: .2vw;
	transform: scaleY(1.1);
}
.hidden_load{
	position: relative;
	top: -200vh;
	left: -200vw;
	width: 100vw;
	height: 100vh;
	opacity: 0;
}

.hidden_load h1{
	font-family: "Open Sans";
}

.hidden_load h2{
	font-family: "mt";
}

.hidden_load h3{
	font-family: "AvertaCY";
}