@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background:rgb(245, 245, 245);
  font-family: "M PLUS 1p", sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0px auto;
  width: 922px;
  height: 1152px;
  background-color: rgb(51,102,153);
}

.title-box {
  width: 232px;
  height: 864px;
}

.title-box img {
  width: 232px;
  height: 864px;
}

.area-box--right {
  display: flex;
  flex-wrap: wrap;
  width: 690px;
}
.area-box--all {
  display: flex;
  flex-wrap: wrap;
  width: 1125px;
}
.area {
  width: 230px;
  height: 288px;
}
.photo {
  width: 230px;
  height: 220px;
}
.photo img {
  width: 230px;
  height: 220px;
}
.info {
  height: 68px;
  text-align: center;
  color: #fff;
}