body {
  width: 100%;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #2b2c40;
}

.header {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  align-items: center;
  border-bottom: solid 1px #d1d8dd;
  background-color: white;
}

.header-logo-image {
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin: auto auto auto 12px;
  width: 138px;
  height: 40px;
}

.main {
  padding: 64px 0 20px 0;
  height: calc(100vh - 64px - 20px);
  display: flex;
  flex-direction: column;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #2d76e0;
}

.maintenance-container {
  margin: auto;
}

.maintenance-image {
  background-image: url(./img/maintenance.svg);
  background-repeat: no-repeat;
  margin: auto auto 0 auto;
  width: 581px;
  height: 303px;
}

.upper-text {
  margin-top: 46px;
  font-size: 14px;
  text-align: center;
}

.time-container {
  display: flex;
  margin: 16px auto 0 auto;
  width: 496px;
  height: 32px;
  overflow: hidden;
  border-radius: 16px;
}

.time-title-div {
  width: 146px;
  height: 100%;
  background-color: #2d76e0;
}

.time-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 32px;
}

.time-div {
  width: calc(100% - 146px);
  height: 100%;
  background-color: #f4faff;
}

.time {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #2d76e0;
  text-align: center;
  line-height: 32px;
}

.lower-text {
  margin-top: 16px;
  margin-bottom: calc(4% + 20px);
  font-size: 14px;
  text-align: center;
}