/* メンテナンス画面のページ全体 */
body {
	margin: 0;
	font-family: helvetica, arial, "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;
	background-color: #eeeeee;
}

/* 以前の枠幅を保つ。Bootstrap 5 のコンテナより広くならないようにする */
@media (min-width: 768px) {
	.container {
		max-width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/*
 * ロゴと問い合わせ先を収める白い枠。
 * ロゴ画像の上端に約5px、大きい電話番号の下端に約7pxの見えない空きがあるため、
 * 上下の余白をずらして、枠の線から中身までの見た目を揃えている。
 */
.maintenance-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
	padding: 93px 24px 91px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* 狭い画面ではロゴが枠からはみ出さないようにする */
.maintenance-box img {
	max-width: 100%;
	height: auto;
}

/* ロゴと「お問い合わせ先」の間隔 */
.maintenance-contact {
	margin: 8px 0 0;
	color: #333;
	font-size: 18px;
	line-height: 1.2;
}

/* 電話番号は案内文より大きく、改行して見せる */
.maintenance-tel {
	display: inline-block;
	margin-top: 6px;
	font-size: 32px;
	line-height: 1.2;
}