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

.wrapper {
	width: 100%;
	height: 100%;
	text-align: center;
}

.header h1,
.contents h1 {
	margin-bottom: 30px;
}

.contents {
	width: 100%;
	height: 100%;
	display: table;
}

.contents.top {
	background:#84E084;
}
.contents.bottom {
	background: #F2E74D;
}

.contents__inner {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: 640px;
	height: 100vh;
	margin: 0 auto;
	padding: 100px 24px 0;
}

.contents__inner p {
	margin-bottom: 50px;
}

/* --------------------------------------------------- flash */
.flash-text {
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1;
}

.visible .flash-text {
	-webkit-animation: fade-in-out 2s ease 0s forwards;
	animation: fade-in-out 2s ease 0s forwards;
}
.flash-text p {
	display: table-cell;
	vertical-align: middle;
	font-size: 90px;
	text-align: center;
	color: #000;
}

@-webkit-keyframes fade-in-out {
	0% {visibility: hidden; opacity: 0;}
	50% {visibility: visible; opacity: 1;}
	100% {visibility: hidden; opacity: 0;}
}

@keyframes fade-in-out {
	0% {visibility: hidden; opacity: 0;}
	50% {visibility: visible; opacity: 1;}
	100% {visibility: hidden; opacity: 0;}
}

@media screen and (max-width: 500px) {
	.flash-text p {
		font-size: 45px;
	}
}