.two_column05 { gap: 40px; display: flex; flex-wrap: wrap; } .two_column05 li { width: calc((100% - 40px) / 2); position: relative; } .two_column05 li a{ display: block; position: relative; width: 100%; } .two_column05 li a:hover{ text-decoration: none; } .two_column05 li a .two_column05_box { width: 100%; min-height: 300px; display: flex; justify-content: center; align-items: center; position: relative; } .two_column05 li a .two_column05_box::before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,.4); position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); z-index: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .two_column05 li a:hover .two_column05_box::before{ background: rgba(0,0,0,.5); width: calc(100% - 40px); height: calc(100% - 40px); } .two_column05 li a .two_column05_box::after{ content: ''; position: absolute; bottom: 10px; right: 10px; width: 0; height: 0; border-style: solid; border-width: 0 0 19px 19px; border-color: transparent transparent #fff transparent; } .two_column05_tit { font-size: 23px; font-size: 2.3rem; font-weight: bold; letter-spacing: 0; color: #fff; position: relative; z-index: 5; text-align: center; line-height: 1.5; } .two_column05_bg01{ background: url("../img/common/two_column05_bg01.webp") no-repeat 50% 50% #ccc; background-size: cover; } .two_column05_bg02{ background: url("../img/common/two_column05_bg02.webp") no-repeat 50% 50% #ccc; background-size: cover; } .two_column05_bg03{ background: url("../img/common/two_column05_bg03.webp") no-repeat 50% 50% #ccc; background-size: cover; } .two_column05_bg04{ background: url("../img/common/two_column05_bg04.webp") no-repeat 50% 50% #ccc; background-size: cover; } @media (max-width: 810px) { .two_column05 { gap: 20px; } .two_column05 li { width: 100%; } }