/* ============================================================
   制作実績: 絞り込みチップ + 実績カードグリッド + 注記/CTA
   Figma: 312:4405 / チップ h45 / カード 350 x 396 gap 24
   影 0,0,20 青15% / 数値・色・タイポは Figma REST API の実測値。
   ============================================================ */

/* ---- 絞り込みチップ ---- */
ul.nv-wk-filter{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:64px 0 0;   /* 実績サマリ4枚の削除 (2026-07-14) に伴い 120px から詰め */
  padding:0;
  list-style:none;
}
.nv-wk-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:45px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:#F1F2F4;
  font-family:var(--nv-font);
  font-size:14px;
  line-height:21px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nv-wk-chip::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--nv-main);
  transition:background .2s ease;
}
.nv-wk-chip:hover{transform:translateY(-2px)}
.nv-wk-chip.is-active{
  background:var(--nv-main);
  color:var(--nv-white);
}
.nv-wk-chip.is-active::before{background:var(--nv-white)}

/* ---- 実績カード ---- */
ul.nv-wk-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:56px 0 0;
  padding:0;
  list-style:none;
}
.nv-wk-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--nv-white);
  border-radius:12px;
  box-shadow:0 0 20px rgba(42,103,212,.15);
  transition:box-shadow .2s ease, transform .2s ease;
}
.nv-wk-card.is-hidden{display:none}

/* カード全体をクリック可能に (詳細ページへの導線) */
.nv-wk-card__link{
  display:flex;
  flex-direction:column;
  flex:1;
  color:inherit;
  text-decoration:none;
}
.nv-wk-card:hover,
.nv-wk-card:focus-within{
  box-shadow:0 8px 28px rgba(42,103,212,.22);
  transform:translateY(-3px);
}
.nv-wk-card__more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-main);
}
.nv-wk-card__arrow{transition:transform .2s ease}
.nv-wk-card:hover .nv-wk-card__arrow,
.nv-wk-card:focus-within .nv-wk-card__arrow{transform:translateX(4px)}

.nv-wk-card__thumb{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  background:#EBF6FF;
}
.nv-wk-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:16px 24px;
}
.nv-wk-card__tag{
  align-self:flex-start;
  padding:0 12px;
  border-radius:999px;
  background:var(--nv-main);
  font-size:14px;
  line-height:21px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-white);
}
.nv-wk-card__title{
  margin:8px 0 0;
  min-height:54px;                 /* 2行分を確保 (Figma固定行) */
  font-size:18px;
  line-height:1.5;                 /* 27 / 18 */
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-wk-card__meta{
  margin:8px 0 0;
  font-size:14px;
  line-height:21px;
  font-weight:700;
  letter-spacing:.04em;
  color:#828282;
}

/* ---- 注記 + 相談ボタン ---- */
.nv-wk-note{
  margin:40px 0 0;
  font-size:14px;
  line-height:21px;
  letter-spacing:.04em;
  color:var(--nv-text);
  text-align:center;
}
.nv-wk-consult{
  margin:40px 0 0;
  text-align:center;
}
.nv-wk-consult__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:260px;
  height:64px;
  border:3px solid transparent;
  border-radius:999px;
  background:linear-gradient(var(--nv-white),var(--nv-white)) padding-box,
             linear-gradient(90deg,#2A67D4,#4EB1EA) border-box;
  box-shadow:0 0 20px rgba(0,0,0,.10);
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
  transition:box-shadow .2s ease, transform .2s ease;
}
.nv-wk-consult__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(42,103,212,.25);
}
.nv-wk-consult__arrow{
  display:inline-flex;
  color:var(--nv-main);
  transition:transform .2s ease;
}
.nv-wk-consult__btn:hover .nv-wk-consult__arrow{transform:translateX(4px)}

/* ---- 実績セクションの器 ---- */
.nv-wk-main{
  background:var(--nv-white);
  padding-block:16px 88px;
}

/* ---- レスポンシブ ---- */
@media (max-width:1024px){
  ul.nv-wk-filter{margin-top:56px;gap:12px}
  ul.nv-wk-grid{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
}

@media (max-width:767px){
  .nv-wk-main{padding-bottom:56px}
  /* Figma SP 644:19132-: チップは横スクロールでなく折返し (高さ26 / gap 縦12 横8) */
  ul.nv-wk-filter{
    margin-top:40px;
    flex-wrap:wrap;
    gap:12px 8px;
  }
  .nv-wk-chip{height:26px;padding:0 12px;gap:8px;font-size:12px}
  .nv-wk-chip::before{width:6px;height:6px}
  ul.nv-wk-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .nv-wk-card__title{min-height:0}
  .nv-wk-note{margin-top:32px;text-align:left}
}