body {
  color: #333333;
  font-family: -apple-system , BlinkMacSystemFont , 'Helvetica Neue' , '游ゴシック' , 'Yu Gothic' , '游ゴシック体' , YuGothic , Verdana , 'メイリオ' , Meiryo , sans-serif;
 /* GoogleChromeのバグ対策 */
  font-weight: 500;
}

.grid_container {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 150px 200px 150px 220px 100px 150px 200px;
  gap: 10px 0px;
  /* grid-auto-flow: row; */
  grid-template-areas:
    "info_title"
    "info_text"
    "photo1"
    "photo2"
    "photo3"
    "shipping"
    "photo4"
    "photo5";
}

.grid_container div {
  border: solid 1px #ddd;
}

.info_title { grid-area: info_title; }

.info_text { grid-area: info_text; }

.photo1 { grid-area: photo1; }

.photo2 { grid-area: photo2; }

.photo3 { grid-area: photo3; }

.shipping { grid-area: shipping; }

.photo4 { grid-area: photo4; }

.photo5 { grid-area: photo5; }

.photo1 img,
.photo2 img,
.photo3 img,
.photo4 img,
.photo5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo2 img {
  object-position: center bottom;
}

.photo4 img {
  object-position: center top;
}

.photo5 img {
  object-position: center bottom;
}

.info_title,
.shipping {
  background-color: #666;
  color: #fff;
}

.info_title,
.info_text,
.shipping {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 529px){
  .grid_container {  
    /* display: grid; */
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 150px 150px 300px 100px 200px 300px;
    gap: 10px 10px;
    /* grid-auto-flow: row; */
    grid-template-areas:
      "info_title info_text"
      "photo2 photo2"
      "photo1 photo3"
      "shipping shipping"
      "photo4 photo4"
      "photo5 photo5";
  }
}

@media (min-width: 769px) {
  .grid_container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 150px 150px 150px 150px 340px;
    /* gap: 10px 10px; */
    /* grid-auto-flow: row; */
    grid-template-areas:
      "info_title info_text info_text photo1"
      "photo2 photo2 photo2 photo1"
      "photo3 photo3 shipping shipping"
      "photo3 photo3 photo4 photo4"
      "photo5 photo5 photo5 photo5";
  }

  /* .photo2 img {
    object-position: center center;
  } */
}