#imgcontainer {
  display: grid;
  background: #f88;
}
.canvas-flex{
  display:grid;  
  padding: 0px;
  grid-template-columns: 50% 50%;
}
.canvas1{
  grid-row: 1 / 3; 
  grid-column: 1 / 3; 
}
.canvas2-1{
  grid-row: 1 / 2; 
  grid-column: 1 / 2; 
}
.canvas2-2{
  grid-row: 1 / 1; 
  grid-column: 2 / 2; 
}
.canvas3-1{
  grid-row: 1 / 1; 
  grid-column: 1 / 2; 
}
.canvas3-2{
  grid-row: 2 / 2; 
  grid-column: 1 / 2; 
}
.canvas3-3{
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
.canvas4-1{
  grid-row: 1 / 3; 
  grid-column: 1 / 1; 
}
.canvas4-2{
  grid-row: 1 / 2; 
  grid-column: 2 / 2; 
}
.canvas4-3{
  grid-row: 2 / 3;
  grid-column: 2 / 2;
}
.canvas5-1{
  grid-row: 1 / 1; 
  grid-column: 1 / 1; 
}
.canvas5-2{
  grid-row: 2 / 2; 
  grid-column: 1 / 1; 
}
.canvas5-3{
  grid-row: 1 / 2;
  grid-column: 2 / 2;
}
.canvas5-4{
  grid-row: 2 / 2;
  grid-column: 2 / 2;
}
.canvas img{
  margin-bottom: 0px;
}

.lazyImg{
  max-width:100%;  
  vertical-align:bottom;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right;
}
.article_img{
  height: 100%;
  position: relative;
  z-index: auto;
}
.blue{
  color:blue;
}

/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width:768px) and (max-width:1079px) {
  .canvas3-1 .article_img{		
    height: 150px;
  }	
  .canvas3-2 .article_img{
    height: 150px;
  }
  .canvas3-3 .article_img{
    height: 300px;
  }
  .canvas4-1 .article_img{		
    height: 300px;
  }	
  .canvas4-2 .article_img{
    height: 150px;
  }
  .canvas4-3 .article_img{
    height: 150px;
  }
}

@media only screen and (min-width:1080px) and (max-width:1280px) {
  .canvas3-1 .article_img{		
    height: 220px;
  }	
  .canvas3-2 .article_img{
    height: 220px;
  }
  .canvas3-3 .article_img{
    height: 440px;
  }
  .canvas4-1 .article_img{		
    height: 440px;
  }	
  .canvas4-2 .article_img{
    height: 220px;
  }
  .canvas4-3 .article_img{
    height: 220px;
  }
}

/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:479px) and (max-width:768px) {
  .canvas3-1 .article_img{		
    height: 200px;
  }	
  .canvas3-2 .article_img{
    height: 200px;
  }
  .canvas3-3 .article_img{
    height: 400px;
  }
  .canvas4-1 .article_img{		
    height: 400px;
  }	
  .canvas4-2 .article_img{
    height: 200px;
  }
  .canvas4-3 .article_img{
    height: 200px;
  }
}
/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 479px) {
  .canvas3-1 .article_img{		
    height: 140px;
  }	
  .canvas3-2 .article_img{
    height: 140px;
  }
  .canvas3-3 .article_img{
    height: 280px;
  }
  .canvas4-1 .article_img{		
    height: 280px;
  }	
  .canvas4-2 .article_img{
    height: 140px;
  }
  .canvas4-3 .article_img{
    height: 140px;
  }
}