@charset "UTF-8";

/* ヘッダー */
header {
	background-position: 65% 50%;
	background-size: cover;
}
header .wrapper {
	align-items: initial;
	flex-direction: column;
	justify-content: space-between;
}
#app-header {
	background-color: #ffc63e;
}

header h1 {
	display: flex;
	line-height: 0;
	margin-right: auto;
	max-width: 298px;
	width: calc((100vw - 2rem) - 48px);
}
header .wrapper div {
	display: flex;
	flex-direction: column;
	margin-bottom: calc((100vh - 10rem) / 2);
}
header h2 {
	margin: 0 auto;
	max-width: 229px;
}
header p {
	color: #fff;
	text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
header p br {
	display: none;
}
#scroll span, #scroll span:after {
	background-color: #fff;
}


@media screen and (min-height: 500px) and (min-width: 980px) {
	header .wrapper div {
		margin-bottom: initial;
		margin-bottom: calc((500px - 31px) / 3);
	}
	header h2 {
		margin: 0;
	}
	header p {
		text-align: left;
	}
	header p br {
		display: initial;
	}
}
@media screen and (min-width: 1200px) {
	header .wrapper {
		margin: 0 auto;
		max-width: 1200px;
	}
}