@charset "UTF-8";

/* ============================================
   加工事例（WORKS）一覧ページ専用スタイル
   - 共通パーツ（header / footer / page-hero（en/ja含む）/ case-card 等）は base.css を継承
============================================ */

/* ============================================
   一覧セクション
============================================ */
.works-list {
  background-color: #f8f8f8;
  padding: 0 0 min(8vw, 150px);
}

/* ----- フィルター（業界 / 材質 / 加工方法） ----- */
.works-filter {
  position: absolute;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.works-filter__all {
  height: clamp(54px, 4.2vw, 80px);
  background-color: var(--color-base);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.4rem, 1.25vw);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-filter__group {
  border: 1px solid #9ea0ad;
  background-color: #fff;
}

.works-filter__group summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  height: clamp(52px, 4.06vw, 78px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.4rem, 1.25vw);
  letter-spacing: 0.1em;
  color: #000;
  cursor: pointer;
  list-style: none;
}

.works-filter__group summary::-webkit-details-marker {
  display: none;
}

.works-filter__group summary::after {
  position: absolute;
  right: 1.5em;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 14px;
  height: 6px;
  background-color: currentColor;
  -webkit-mask: url("../images/works/filter-arrow.svg") no-repeat center / contain;
  mask: url("../images/works/filter-arrow.svg") no-repeat center / contain;
  transition: transform 0.2s ease;
}

.works-filter__group[open] summary::after {
  transform: rotate(180deg);
}

.works-filter__tags {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #9ea0ad;
}

.works-filter__tags button,
.works-filter__tags a {
  height: clamp(42px, 3.3vw, 50px);
  background-color: #fff;
  color: #000;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-filter__tags button:not(:last-child),
.works-filter__tags a:not(:last-child) {
  border-bottom: 1px solid #e4e4e4;
}

.works-filter__tags button:hover,
.works-filter__tags a:hover {
  background-color: #000;
  color: #FFF;
}

/* ----- 一覧見出し ----- */
.works-heading {
  margin: 0 0 min(3vw, 56px);
  padding-top: min(12.76vw, 245px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3rem, 1.56vw);
  letter-spacing: 0.2em;
  color: #000;
}

.works-grid {
  margin-top: 0;
}


/* ============================================
   WORKS 詳細ページ
============================================ */
/* 上部スリム帯（ヘッダー背景＋パンくず） */
.wd-band {
  position: relative;
  height: clamp(120px, 9vw, 172px);
  overflow: hidden;
  background-color: var(--color-base);
}

.wd-band__bg {
  position: absolute;
  inset: 0;
}

.wd-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-band .page-hero__breadcrumb {
  z-index: 2;
}

.works-detail {
  background-color: #f8f8f8;
  padding: min(4vw, 76px) 0 min(8vw, 150px);
}

/* タイトル（アクセントバー＋事例名） */
.wd-titlebar {
  display: flex;
  align-items: stretch;
  gap: min(1vw, 20px);
  margin-bottom: min(1.2vw, 22px);
}

.wd-bar {
  flex: none;
  width: clamp(8px, 0.57vw, 11px);
  height: auto;
  background-color: var(--color-base);
}

.wd-title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.2rem, 1.66vw);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: #000;
}

.wd-tag {
  margin: 0;
}

/* 2カラム（左：画像／右：仕様） */
.wd-main {
  display: flex;
  gap: min(4.8vw, 92px);
  align-items: flex-start;
  margin-top: min(3vw, 56px);
}

.wd-gallery {
  /* flex: 1 1 auto; */
  width: 60%;
  min-width: 0;
}

.wd-main-img {
  width: 100%;
  aspect-ratio: 1080 / 810;
  overflow: hidden;
  background-color: #e0e0e0;
}

.wd-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-thumbs {
  display: flex;
  gap: min(0.8vw, 14px);
  margin-top: min(0.9vw, 16px);
}

.wd-thumbs__item {
  width: clamp(70px, 5.7vw, 109px);
  aspect-ratio: 109 / 82;
  overflow: hidden;
  background-color: #e0e0e0;
  padding: 0;
  cursor: pointer;
  opacity: 0.3;
}
.wd-thumbs__item:hover {
  opacity: 0.5;
}
.wd-thumbs__item.active {
  opacity: 1;
}

.wd-thumbs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-thumbs__item.active {
  outline: 2px solid var(--color-base);
  outline-offset: -2px;
}

.wd-info {
  /* flex: 0 0 clamp(300px, 28vw, 453px); */
  width: 40%;
}

.wd-spec {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-jp);
  font-weight: 500;
}

.wd-spec th,
.wd-spec td {
  border: 1px solid #9ea0ad;
  padding: min(0.8vw, 14px) min(1.2vw, 22px);
  vertical-align: middle;
  line-height: 1.5;
  text-align: left;
  letter-spacing: 0.2em;
}

.wd-spec th {
  width: clamp(80px, 6.5vw, 125px);
  background-color: var(--color-base);
  color: var(--color-white);
  font-weight: 500;
  font-size: min(1.6rem, 0.83vw);
}

.wd-spec td {
  background-color: #fff;
  color: #000;
  font-size: min(1.8rem, 0.94vw);
}

.wd-desc {
  margin: min(2vw, 40px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.2em;
  line-height: 2.1;
  color: #000;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

/* その他関連事例 */
.wd-related {
  margin-top: min(7vw, 130px);
}

.wd-related__head {
  text-align: center;
  margin-bottom: min(4vw, 80px);
}

.wd-related__title {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-bottom: min(1.4vw, 28px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3rem, 1.56vw);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: #000;
}

.wd-related__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: currentColor;
}

.wd-back {
  display: flex;
  justify-content: center;
  margin-top: min(5vw, 96px);
}

.wd-back .btn-line {
  width: auto;
  min-width: 250px;
  padding: 0 min(2vw, 40px);
}

/* ============================================
   SP（375px基準）
============================================ */
@media print, screen and (max-width: 768px) {
  .works-list {
    padding-bottom: 21.3vw;
  }

  .works-heading {
    margin-bottom: 8vw;
    padding-top: 10.6vw;
    font-size: 5.3vw;
  }

  .works-filter {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .works-filter__group {
    border-top: none;
  }

  .works-filter__all,
  .works-filter__group summary {
    height: 13vw;
    font-size: 4vw;
  }

  .works-filter__tags button,
  .works-filter__tags a {
    height: 11vw;
    font-size: 3.7vw;
  }

  /* WORKS 詳細 SP */
  .works-detail {
    padding: 10.6vw 0 21.3vw;
  }

  .wd-titlebar {
    gap: 3.2vw;
    margin-bottom: 4.2vw;
  }

  .wd-title,
  .wd-related__title {
    font-size: 5vw;
  }

  .wd-main {
    flex-direction: column;
    gap: 6.4vw;
    margin-top: 4.8vw;
  }

  .wd-gallery {
    width: 100%;
  }

  .wd-thumbs {
    gap: 2.13vw;
    margin-top: 2.67vw;
  }

  .wd-spec th,
  .wd-spec td {
    padding: 2.13vw 3.2vw;
  }

  .wd-desc {
    margin-top: 6.4vw;
    font-size: 3.7vw;
  }

  .wd-related {
    margin-top: 18.6vw;
  }

  .wd-related__head {
    margin-bottom: 10.6vw;
  }

  .wd-related__title {
    padding-bottom: 4.2vw;
  }

  .wd-back {
    margin-top: 13.3vw;
  }

  .wd-back .btn-line {
    padding: 0 6.4vw;
  }

  .wd-info {
    flex-basis: auto;
    width: 100%;
  }

  .wd-spec th {
    width: 28vw;
    font-size: 3.4667vw;
  }

  .wd-spec td {
    font-size: 3.7vw;
  }

  .wd-thumbs__item {
    width: 20vw;
  }
}