body {
  font-family: "メイリオ", "Hiragino Kaku Gothic pro", "sans-self";
  color: rgb(24, 22, 22);
  background-color: rgb(226, 252, 219);

  line-height: 1.5;
  margin-left: 15px;
  padding-left: 30px;
  display: grid;
  grid-template:
    " header1 header2 header3 header4"
    " main main main main"
    " center1 center2 center3 center4"
    " footer1 footer2 footer3 footer4"
    /250px 340px 275px 275px;
}

header1 {
  grid-area: header1;
}

header2 {
  grid-area: header2;
}

header3 {
  grid-area: header3;
}
header4 {
  grid-area: header4;
}

main {
  grid-area: main;
}

center1 {
  grid-area: center1;
}

center2 {
  grid-area: center2;
}

center3 {
  grid-area: center3;
}

center4 {
  grid-area: center4;
}

footer1 {
  grid-area: footer1;
}

footer2 {
  grid-area: footer2;
}

footer3 {
  grid-area: footer3;
}

footer4 {
  grid-area: footer4;
}

header1 img {
  position: absolute;
  top: 40px;
  left: 100px;
}
header2 p {
  font-family: "MS serif";
  font-size: 180%;
  color: #7a743a;
  left: 120px;
}
header3 img {
  position: absolute;
  top: 0px;
  left: 700px;
}

header4 img {
  position: absolute;
  top: 73px;
  left: 1000px;
}

main p1 {
  position: absolute;
  font-size: 200%;
  color: #7a743a;
  top: 180px;
  left: 70px;
}

main p2 {
  position: absolute;
  color: #7a743a;
  top: 700px;
  left: 900px;
}

center1 {
  padding-top: 10px;
  border-top: 1px solid #666666;
  text-align: center;
}
center2 {
  padding-top: 10px;
  border-top: 1px solid #666666;
  text-align: center;
}
center3 {
  padding-top: 10px;
  border-top: 1px solid #666666;
  text-align: center;
}
center4 {
  padding-top: 10px;
  border-top: 1px solid #666666;
  text-align: center;
}

center1 p {
  font-family: "arial black";
  font-size: 150%;
  color: #7a743a;
}
/**/
center2 p {
  font-family: "Times";
  font-size: 150%;
  color: rgb(39, 27, 27);
}

/**/
center3 p {
  font-family: "Times";
  font-size: 150%;
  color: rgb(39, 27, 27);
}

center4 p {
  font-family: "Times";
  font-size: 150%;
  color: #7a743a;
}
center4 p1 {
  font-family: "Times";
  font-size: 100%;
  color: #7a743a;
}
center4 p2 {
  font-family: "Times";
  font-size: 150%;
  color: rgb(39, 27, 27);
}

footer1 {
  border-top: 1px solid #666666;
  background-color: rgb(226, 252, 219);
}

footer2 {
  line-height: 1;
  background-color: rgb(226, 252, 219);
  border-top: 1px solid #666666;
  text-align: center;
}

footer2 img {
  padding-top: 10px;
}

footer3 {
  border-top: 1px solid #666666;
  background-color: rgb(226, 252, 219);
}

footer4 {
  border-top: 1px solid #666666;
  background-color: rgb(226, 252, 219);
}

/*900px以下の場合*/
@media (max-width: 900px) {
  body {
    grid-template:
      "header1"
      "header2"
      "header3"
      "main"
      "center1"
      "center3"
      "center2"
      "center4"
      "footer4"
      "footer1"
      "footer2"
      "footer3";
  }

  header1 img {
    position: absolute;
    top: 50px;
    left: 150px;
  }

  header2 p {
    padding-top: 62px;
    padding-left: 10px;
  }

  header3 img {
    position: absolute;
    top: 2px;
    left: 250px;
  }
  main {
    width: auto;
  }

  main img {
    max-width: 100%;
    height: 550px;
  }

  main p2 {
    position: absolute;
    color: #7a743a;
    top: 650px;
    left: 280px;
  }

  center1 img {
    width: 350px;
    height: 350px;
  }

  center2 img {
    width: 350px;
    height: 350px;
  }

  center3 img {
    width: 350px;
    height: 350px;
  }

  center4 img {
    width: 250px;
    height: 150px;
  }
}