/* 
  work_cat アーカイブ専用CSS
  - 一覧グリッド
  - タイトル額縁
  - モーダル
  - SP調整含む
*/

/* =========================
  一覧グリッド
========================= */
.tax-work_cat .workArchiveGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, max-content));
  row-gap: 72px;
  column-gap: 72px;
  justify-content: center;
}

/* =========================
  カード全体（展示ユニット）
========================= */
.tax-work_cat .workCard{
  display: grid;
  justify-items: center;

  /* サムネ置き場（高さ固定）＋キャプション */
  grid-template-rows: 295px auto;

  /* サムネ下の間隔（黒枠20px＋余白14px） */
  row-gap: 34px;
}

/* =========================
  サムネ枠（額縁）
========================= */
.tax-work_cat .workThumb{
  background: #f2f2f2;
  padding: 14px;
  box-sizing: border-box;

  box-shadow:
    0 0 0 2px #ccc,
	0 0 0 16px #222;
  /* 置き場の中で上下中央揃え */
  align-self: center;
}


/* =========================
  縦横比制御（長辺255px）
========================= */

/* 横長：横が長辺 */
.tax-work_cat .workCard.is-landscape .workThumb{
  width: 255px;
  aspect-ratio: 141 / 100;
}

/* 縦長：縦が長辺 */
.tax-work_cat .workCard.is-portrait .workThumb{
  height: 255px;
  aspect-ratio: 100 / 141;
}


/* =========================
  画像
========================= */
.tax-work_cat .workThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================
  キャプション（展示ラベル）
========================= */
.tax-work_cat .workCaption{
  width: 128px;
  min-height: 56px;
  padding: 8px 10px;

  font-size: 14px;
  line-height: 1.4;
  text-align: center;

  background: #fff;
  box-sizing: border-box;

  display: grid;
  place-items: center;
}

@media (min-width: 1024px){
  .tax-work_cat .workArchiveGrid{
    grid-template-columns: repeat(3, max-content);
    column-gap: 120px;
    row-gap: 96px;
    justify-content: center;
  }
}

/* =========================
  SP：2カラム＋詰める
========================= */
@media (max-width: 768px){
	
  /* --- 一覧側（SP） --- */
  .tax-work_cat{
    --thumb-long: clamp(170px, 42vw, 210px);
    --frame: 10px;
    --mat: 10px;
    --gap-x: 24px; 
    --gap-y: 80px;
  }

  .tax-work_cat .workArchiveGrid{
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--gap-x);
    row-gap: var(--gap-y);
    justify-content: center;
  }

  .tax-work_cat .workThumb{
    padding: var(--mat);
    box-shadow: 0 0 0 1px #ccc, 0 0 0 var(--frame) #222;
  }

  .tax-work_cat .workCard.is-landscape .workThumb{
    width: var(--thumb-long);
    aspect-ratio: 141 / 100;
  }
  .tax-work_cat .workCard.is-portrait .workThumb{
    height: var(--thumb-long);
    aspect-ratio: 100 / 141;
  }

  .tax-work_cat .workCard{
    grid-template-rows: auto auto !important;
    row-gap: 24px !important;
  }

  .tax-work_cat .workThumb{
    align-self: start !important;
  }
	
	
	/* SP用_閉じる */
.workModal__close{
top:80px !important;
right:50px !important;
}

}

/* =========================
  モーダルウィンドウ
========================= */
.workModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.workModal.is-open{ display:block; }

/* 黒背景は下 */
.workModal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.8);
  z-index: 0;
}

/* 画像・×ボタンは上 */
.workModal__content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index: 1;
}

/* 画像（額縁なし） */
.workModal__img{
  max-width: 70vw;
  max-height: 70vh;
  object-fit: contain;
  background: transparent;
  padding: 0;
  box-shadow: none;
  pointer-events:auto;
}

/* 閉じる */
.workModal__close{
  position:absolute;
  top:150px;
  right:150px;
  font-size:28px;
  color:#fff;
  background:none;
  border:none;
  cursor:pointer;
  pointer-events:auto;
  z-index: 2; /* 念のため */
}

/* クリックできそう感 */
.tax-work_cat .workThumb:hover{
  transform: translateY(-2px);
  opacity: .9;
}
.tax-work_cat .workThumb{
transition: transform .15s ease, opacity .15s ease;
cursor: pointer;
}