body {
  font-family: 'Noto Serif JP', sans-serif;
  margin: 0;
}


.tophalf {
  display: flex;
  height: 600px;
  background-color: #2BCDC0;
  align-items: center;
  justify-content: center;
}

h1 {
  color: white;
  font-size: 45px;
}

.bottomhalf {
  display: flex;
  background-color: black;
  color: white;
  flex-direction: row;
}

.box {
  display: inline;
  height: 488px;
  align-items: center;
  text-align: center;
}


.title1 {
  border-top: 25px #33A8DD solid;
  width: 200px;
  text-align: center;
  margin-left: 100px;
  font-size: 45px;
}

.title2 {
  border-top: 25px #F46731 solid;
  text-align: center;
  margin-left: 100px;
  width: 200px;
  font-size: 45px;
}

.title3 {
  border-top: 25px #2BCDC0 solid;
  text-align: center;
  margin-left: 100px;
  width: 200px;
  font-size: 45px;
}


@media (max-width: 576px) {
  .tophalf {
    background-color: #33A8DD;
  }
  .bottomhalf {
    background-color: #F7F5F6;
    color: black;
    flex-direction: column;
  }
}