:root {
  --main-bg-color: #0a67b7;
  --main-button-hover-color: #0d5ca0;
	--page-background-color: #f8f9fa;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", Meiryo, sans-serif;
	background-color: var(--page-background-color);
	display: flex;
	flex-direction: column;
}
main {
	flex: 1;
	padding: 3em 0;
}

header {
	background-color: var(--main-bg-color);
}

footer {
	background-color: var(--main-bg-color);
	text-align: center;
	padding: 0.4rem;
	color: #fff;
}
.image-grid img {
	width: 7.8em;
}

.applicationflow {
	max-width: 600px;
	margin: 20px auto;
	padding: 15px;
	border: 1px solid #ccc;
	text-align: left;
	background-color: #ffffff;
}

.card-text img {
	border: 2px solid #ccc;
}

.card-footer {
	background-color: #fff;
}

.btn-syobun {
	background-color: var(--main-bg-color);
	color: #fff;
	border-color: var(--main-bg-color);
}
.btn-syobun:hover {
	background-color: var(--main-button-hover-color-color);
	color: #fff;
	border-color: var(--main-button-hover-color-color);
}
.btn-syobun:active {
	background-color: var(--main-button-hover-color-color) !important;
	color: #fff !important;
	border-color: var(--main-button-hover-color-color) !important;
}

.syobun-error {
	font-size: 75%;
}

@media (min-width: 768px) {
	.main-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
@media (max-width: 767px) {
	.main-container {
		margin: 2rem auto;
		padding: 0 1rem;
	}

	.applicationflow {
		font-size: 0.95rem;
		padding: 10px;
	}
}