@charset "utf-8";
/* CSS Document */

.card{
  width:32%;
  margin-bottom:20px;
}

.card a{
  display:block;
  text-decoration:none;
  color:#000;
}

.card_ph img{
  width:100%;
  display:block;
}

.card_caption{
  font-size:110%;
  text-align:center;
  padding:8px 4px;
  background-color: rgba(0,0,0,1.00);
  color: rgba(255,255,255,1.00);
  font-weight: 600;
  
}

.img_list{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 50px;
}

.img_list li{
   width: 33%;
   margin-bottom: 15px;
}
   @media screen and (max-width: 650px) {
      .img_list li{
        width: 48%;
      } 
   }


/* ================================
   POST オーバーレイ
================================ */

.card{
  position:relative;
  overflow:hidden;
}

.card_ph{
  position:relative;
  overflow:hidden;
}

.card_ph img{
  width:100%;
  display:block;
  transition: transform .4s ease;
}

/* --- オーバーレイ本体 --- */

.card_ph::after{
  content:"POST";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:24px;
  font-weight:bold;
  letter-spacing:2px;
  opacity:0;
  transition: opacity .3s ease;
}

/* --- hover時 --- */

.card:hover .card_ph::after{
  opacity:1;
}

.card:hover .card_ph img{
  transform:scale(1.05);
}