/*--------------------------------------------------------------
 *  CSS for Works Listing  ― 正方形カード + 4 / 2 / 1 列
 *--------------------------------------------------------------*/

/* Container */
.works { margin: 50px auto 100px; }

/* Tabs */
.tab {
  width: 85%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  animation: fadeIn 2s forwards;
}
.tab li   { padding: 0 10px; border-left: 1px solid #333; }
.tab li:first-child { border: none; padding-left: 0; }
.tab a    { color: #333; text-decoration: none; display: block; }
.tab li.active a { color: #333; }

/* Area (tab content) */
.area          { display: none; opacity: 0; position: relative; z-index: 0; }
.area.is-active{ display: block; animation: fadeIn 2s forwards; }

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* --- グリッド --- */
.area ul{
  display: flex; flex-wrap: wrap; justify-content: space-between;
  width: 85%; margin: 50px auto 30px; padding: 0; list-style: none;
}
.area ul li{
  position: relative;
  overflow: visible; /* テキストエリアを表示するため */
  width: 21%;               /* 横4列に並ぶように設定 */
  margin: 0 0 2% 0;
  border-radius: 5px;
  box-sizing: border-box;
}
.area ul li a{ 
  display: block; 
  width: 100%; 
  height: 100%; 
  text-decoration: none;
}

/* 画像エリア */
.workimg{ 
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;      /* 縦長の比率 */
  overflow: hidden;
  border-radius: 5px;
}
.workimg img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.2s ease-in-out;
}
.workimg.vertical img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

/* ホバー効果 */
.area li:hover .workimg img {
  transform: scale(1.02);
  filter: grayscale(0%);
}

/* テキストエリア（画像の下に配置） */
.area .text{
  position: relative;
  width: 100%;
  padding: 10px 0;
  background: transparent; /* 背景を透明に */
  font-family: "Klee One", cursive;
  text-align: left;
  color: #888888;
}

.area .text h4{ 
  margin: 0 0 5px 0; 
  font-size: 13px; 
  color: #888888;
  line-height: 1.4;
}

.area .text h5{ 
  margin: 0; 
  font-size: 10px;  
  color: #888888;
  line-height: 1.2;
}


.area li:hover .text h4,
.area li:hover .text h5{
 color: #000000;
}


/* ---------- ブレークポイント ---------- */

/* 1024px 未満：2列 */
@media (max-width:1023.98px){
  .area ul li{ width:48%; margin:0 0 4% 0; }

  .tab {
    width: 90%;
  }

  .area ul{
    width: 90%;
  }
  .area ul li.dummy{ display:none; }

}

/* 768px 未満：1列 */
@media (max-width:767.98px){

  .tab {
    width: 95%;
  }

  .tab{ display:block; text-align:left; line-height:30px; font-size:12px; margin-bottom:15px; }
  .tab li{ padding:0; border:none; }



  .area ul{
    width: 95%;
  }

  /* .area ul{ justify-content:flex-start; }
  .area ul li{ width:100%; margin:0 0 4% 0; } */
  .area ul li.dummy{ display:none; }
}