.three_btn01 { display: flex; flex-wrap: wrap; gap: 30px 40px; margin: 0 0 40px; } .three_btn01:last-child { margin: 0; } .three_btn01 .btn_area { width: calc((100% - 80px) / 3); } .three_btn01 .btn_area a { display: block; padding: 10px 0; text-align: center; color: var(--main-color); text-decoration: none; font-weight: normal; font-size: 14px; font-size: 1.4rem; border: 2px solid var(--main-color); position: relative; } .three_btn01 .btn_area a:hover { color: #fff; background: var(--main-color); border-color: var(--main-color); } .three_btn01 .btn_area a:after { content: ''; width: 6px; height: 6px; border-top: 1px solid var(--main-color); border-right: 1px solid var(--main-color); transform: rotate(45deg); position: absolute; top: 50%; right: 15px; margin: -3px 0 0 0; } .three_btn01 .btn_area a:hover::after { border-color: #fff; } @media (max-width : 810px){ .three_btn01 .btn_area { width: calc((100% - 40px) / 2); } } @media (max-width : 640px){ .three_btn01 .btn_area { width: 100%; } }