テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
.three_column06 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .three_column06:last-child { margin: 0; } .three_column06_txt_area { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 225px; padding: 10px; box-sizing: border-box; position: relative; } .three_column06_txt_area:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.3s all; background: rgba(0,0,0,0.3); z-index: -1; } .three_column06_tit { font-size: 20px; font-size: 2.0rem; color: #fff; text-align: center; padding: 0 0 10px; margin: 0 0 15px; position: relative; } .three_column06_tit:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 4px; background: #fff; } .three_column06_txt { font-size: 16px; font-size: 1.6rem; text-align: center; font-weight: 500; display: block; position: relative; width: 100%; color: #fff; } .three_column06 > li { width: calc((100% - 60px) / 3) } .three_column06_bg01 { background: url("../img/common/three_column06_bg01.webp") center/cover no-repeat #ccc; z-index: 0; } .three_column06_bg02 { background: url("../img/common/three_column06_bg02.webp") center/cover no-repeat #ccc; z-index: 0; } .three_column06_bg03 { background: url("../img/common/three_column06_bg03.webp") center/cover no-repeat #ccc; z-index: 0; } @media (max-width : 1060px){ .three_column06 > li { width: 100%; } }