テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
POINT1タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
.common_box03 { width: 100%; display: flex; margin: 0 0 70px; gap: 40px 40px; } .common_box03:last-child { margin: 0; } .common_box03 .common_box03_txt_area { width: 60%; } .common_box03 .common_box03_txt_area:only-child { width: 100%; } .common_box03 .common_box03_img_area { width: 40%; box-sizing: border-box; } .common_box03_tit_area { display: flex; margin: 0 0 35px; flex-direction: column; position: relative; } .common_box03_point { position: relative; display: flex; justify-content: center; align-items: center; width: 110px; padding: 10px 5px; font-size: 18px; font-size: 1.8rem; font-weight: 600; line-height: 1; color: #fff; text-align: center; background-color: var(--main-color); margin: 0 0 15px; } .common_box03_tit { font-size: 24px; letter-spacing: 0.1em; font-weight: 400; border-bottom: 2px solid #f3f3f3; padding-bottom: 8px; position: relative; } .common_box03_tit::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 70px; height: inherit; border-bottom: 2px solid var(--main-color); } @media (max-width : 810px){ .common_box03 { flex-direction: column; align-items: center; text-align: center; } .common_box03 .common_box03_img_area { max-width: inherit; width: 100%; order: 1; } .common_box03 .common_box03_txt_area { width: 100%; margin: 0; order: 2; } }