@charset "utf-8";
/* =======================================

	IndexElements

======================================= */

body {
	min-height: 100vh;
	background: #fff url(../img/bg.png) center bottom no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

/* ------------------------------------
	main section
------------------------------------ */
main {
	padding: 80px 60px;
}
main > section {
	width: 860px;
	max-width: 100%;
	padding: 40px 50px 60px;
	margin: 0 auto 0 0;
	text-align: left;
	background: rgba(255,255,255,0.45);
	border-radius: 5px;
}
main > section > h1 {
	font-size: 4.2rem;
	margin: 0 0 1em;
	font-weight: 500;
}
main > section > h1 small {
	display: block;
	font-size: 2.8rem;
	font-weight: 400;
}

main .caption {
	font-size: 1.6rem;
	line-height: 2;
	margin: 0 0 6rem;
}

.status {
	font-size: 1.8rem;
	font-weight: 500;
	color: #008AE0;
	line-height: 1.6;
}
.status span {
	padding: 0 0 0 0.2em;
	background: linear-gradient(transparent 60%, #CCF3FF 60%);
}
.status br {
	display: none;
}
.status.wait::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	vertical-align: middle;
	background: transparent url(../img/ico_timer.png) center center no-repeat;
	background-size: 19px;
	margin: 0 8px 0 0;
}

.requirements {
	font-size: 1.8rem;
  margin-top: 36px;
	font-weight: 500;
	line-height: 1.6;
}
.requirements a {
	padding: 0.3em 1.2em 0 0;
	background: transparent url(../img/ico_link.png) right 6px no-repeat;
	background-size: 13px;
}
.requirements a:link { text-decoration:underline; color: #008AE0;}
.requirements a:visited { text-decoration:underline; color: #008AE0;}
.requirements a:active { text-decoration:underline; color: #008AE0;}
.requirements a:hover { text-decoration:none; color: #008AE0;}

@media only screen and (max-width: 768px) {
	main {
		padding: 10px 0 40px;
	}
	main > section {
		width: 100%;
		padding: 30px 5%;
	}
	main > section > h1 {
		font-size: 2.4rem;
	}
	main > section > h1 small {
		font-size: 1.8rem;
	}

	.status {
		text-align: center;
	}
	.status.wait::before {
		display: block;
		margin: 0 auto 12px;
	}
	.status br {
		display: block;
	}
	.requirements {
		text-align: center;
	}
}