CSS

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

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

.three_column05 > li > a {
 text-decoration: none;
 transition: 0.3s all;
}

.three_column05 > li > a img {
 transition: 0.3s all;
}

.three_column05_txt_box {
 padding: 10px 0;
 background: var(--main-color);
}

.three_column05_main_tit {
 font-size: 18px;
 font-size: 1.8rem;
 text-align: center;
 color: #fff;
}

@media (max-width : 1060px){

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

}


@media  (max-width : 810px){

.three_column05 > li {
 width: 100%;
}
 
.three_column05_img_box {
 text-align: center;
}
 
}
一覧に戻る