CSS

.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%;
  }
 
}

一覧に戻る