テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
.two_column04 { display: flex; flex-wrap: wrap; margin: 0 0 50px; gap: 40px 40px; counter-reset: number; } .two_column04:last-child { margin: 0; } .two_column04 li { width: calc((100% - 40px) / 2); background: #fff; position: relative; } .two_column04_img_box { text-align: center; } .two_column04_txt_box { padding: 20px 10px 30px; box-sizing: border-box; } .two_column04_tit { font-size: 22px; font-size: 2.2rem; text-align: center; color: #444; font-weight: 500; letter-spacing: 0.2em; margin: 0 0 10px; position: relative; } .two_column04_tit_number { padding: 10px 10px 10px 45px; position: relative; display: inline-block; } .two_column04_tit_number:before{ position: absolute; counter-increment: number; content: counter(number); display: inline-block; background: var(--main-color); color: #fff; font-weight: 500; font-size: 14px; left: 0; width: 35px; height: 35px; border-radius: 5px; line-height: 35px; text-align: center; letter-spacing: 0; } .two_column04_tit:after { content: ''; width: 30px; height: 3px; background: var(--sub-color); margin: 10px 0 0; } @media (max-width : 810px){ .two_column04_tit { font-size: 20px; font-size: 2.0rem; } .two_column04 { gap: 30px 30px; } .two_column04 li { width: 100%; } } @media (max-width : 640px){ .two_column04_tit { font-size: 18px; font-size: 1.8rem; } }