/* Works Page */
    .works-section { background: var(--color-white); }
    .works-section .section-inner { padding: 80px 0; }

    .works-filter {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 50px;
    }

    .filter-btn {
      padding: 9px 22px;
      font-size: 13px;
      font-weight: 600;
      font-family: 'Noto Sans JP', sans-serif;
      border: 1px solid rgba(0,0,0,0.15);
      background: transparent;
      color: var(--color-gray);
      cursor: pointer;
      transition: all 0.3s ease;
      letter-spacing: 0.05em;
    }

    .filter-btn.active,
    .filter-btn:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: white;
    }

    .works-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .works-card {
      background: var(--color-white);
      box-shadow: 0 2px 16px rgba(0,0,0,0.08);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .works-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.14);
    }

    .works-card-img {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
    }

    .works-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .works-card:hover .works-card-img img {
      transform: scale(1.06);
    }

    .works-card-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--color-primary);
      color: white;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      letter-spacing: 0.05em;
    }

    .works-card-body {
      padding: 22px;
    }

    .works-card-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      color: var(--color-gray);
      margin-bottom: 10px;
    }

    .works-card-meta span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .works-card-meta i {
      color: var(--color-primary);
      font-size: 11px;
    }

    .works-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .works-card-desc {
      font-size: 13px;
      color: var(--color-gray);
      line-height: 1.7;
    }

    .works-card-footer {
      padding: 14px 22px;
      border-top: 1px solid var(--color-light-gray);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .works-card-price {
      font-size: 12px;
      color: var(--color-gray);
    }

    .works-card-price strong {
      font-family: 'Oswald', sans-serif;
      font-size: 18px;
      color: var(--color-primary);
      margin-left: 4px;
    }

    .works-load-more {
      text-align: center;
      margin-top: 60px;
    }

    @media (max-width: 1024px) {
      .works-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .works-grid { grid-template-columns: 1fr; }
      .works-filter { gap: 6px; }
      .filter-btn { padding: 7px 14px; font-size: 12px; }
    }

/* single works - card width */
.works-card--single{
  max-width: 980px;
  margin: 0 auto;
}

/* works-card を <a> で使う場合の見た目安定 */
.works-card--link{
  display:block;
  color: inherit;
  text-decoration: none;
}
.works-card-more{
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
}
/* filter-btn を a にしても見た目そのまま */
.works-filter .filter-btn{
  display:inline-block;
  text-decoration:none;
}
/* Works card actions */
.works-card-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.works-card-detail-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  color:var(--color-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  transition:all .25s ease;
}

.works-card-detail-btn:hover{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
}

@media (max-width:768px){
  .works-card-actions{justify-content:flex-start;}
}
.works-card-footer{
  align-items: flex-end;
}
/* 価格ブロックとボタンブロックの縦ズレを防ぎつつ、右側を2段にする */
.works-card-footer{
  align-items: flex-start; /* ←価格が2行でもボタンがズレにくい */
}

/* 右側：ボタンを縦積み（2段）＋右寄せ */
.works-card-actions{
  display: flex;
  flex-direction: column;   /* ←2段の核心 */
  align-items: flex-end;    /* 右寄せ（左の見た目に近い） */
  gap: 10px;
}

/* 上段ボタン：サイズを揃えて“ボタン感”を出す */
.works-card-detail-btn{
  min-width: 138px;         /* 好みで 120〜160px */
  justify-content: center;
}

/* 下段リンク：改行させない（見た目安定） */
.works-card-more{
  white-space: nowrap;
}

/* SPのときは左寄せにしたい場合（任意） */
@media (max-width: 768px){
  .works-card-actions{
    align-items: flex-start;
  }
}