タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

HTML


 
  
  
  タイトルが入ります
  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  
 
 
  
  
  タイトルが入ります
  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  
 
 
  
  
  タイトルが入ります
  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  
 
 
  
  
  タイトルが入ります
  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

CSS

.three_column03 {
 display: flex;
 flex-wrap: wrap;
 gap: 30px 30px;
 margin: 0 0 60px;
}

.three_column03:last-child {
 margin: 0;
}
.three_column03 > li {
 width: calc((100% - 60px) / 3)
}

.three_column03_txt_box {
 margin: 15px 0 0;
}

.three_column03_main_tit {
 font-size: 20px;
 font-weight: bold;
}

@media (max-width : 1060px){



.three_column03 > li {
 width: calc((100% - 30px) / 2)
}
}


@media  (max-width : 810px){

.three_column03 > li {
 width: 100%;
}
 
.three_column03_img_box {
 text-align: center;
}
 
.three_column03_main_tit {
 font-size: 18px;
}  
 
}