/* WORKS内で必要な共通スタイル */
.npws-works{
  --npws-ink:#111214;
  --npws-line:#e7e9ec;
  --npws-max:1180px;
  --npws-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --npws-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --npws-display:"Cormorant Garamond","Times New Roman",serif;
  position:relative;
  isolation:isolate;
  background:transparent;
  color:var(--npws-ink);
  font-family:var(--npws-sans);
  line-height:1.82;
  letter-spacing:.025em;
}

.npws-works,
.npws-works *{box-sizing:border-box}

.npws-works img{display:block;max-width:100%}

.npws-works .npws-wrap{
  width:min(var(--npws-max),calc(100% - 48px));
  margin:0 auto;
}

.npws-works::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  width:auto;
  transform:none;
  background:#fcfcfb;
  border-top:1px solid var(--npws-line);
  border-bottom:1px solid var(--npws-line);
}

.npws-works .npws-kicker{
  margin:0 0 12px;
  color:#787d84;
  font-family:var(--npws-display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1.45;
}

.npws-works .npws-h2{
  margin:0 0 18px;
  font-family:var(--npws-serif);
  line-height:1.34;
  letter-spacing:-.025em;
  font-weight:650;
}

.npws-textworks-label{font-family:var(--npws-display)}

.npws-works{
  padding:56px 0 58px;
}

.npws-works .npws-works-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:24px;
}

.npws-works .npws-h2{
  font-size:clamp(24px,2.6vw,36px);
  margin-bottom:0;
}

.npws-works-note{
  max-width:470px;
  margin:0;
  color:#83878d;
  font-size:12px;
}

.npws-work-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

.npws-work-track{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  will-change:transform;
}

.npws-work-track--image{
  animation:npwsImageScroll 60s linear infinite;
}

.npws-work-track--text{
  gap:0;
  animation:npwsTextScroll 68s linear infinite;
}

.npws-work-marquee:hover .npws-work-track{
  animation-play-state:paused;
}

/* 小さめKV */
.npws-work-card{
  flex:0 0 auto;
  width:190px;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid #e6e6e6;
  border-radius:8px;
  background:#eee;
}

.npws-work-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.76) brightness(.97);
  opacity:.9;
  transition:.28s ease;
}

.npws-work-card:hover img{
  filter:saturate(1) brightness(1);
  opacity:1;
  transform:scale(1.015);
}

@keyframes npwsImageScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 5px))}
}

@keyframes npwsTextScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}


/* テキスト実績 */
.npws-textworks{
  padding-top:26px;
}

.npws-textworks-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}

.npws-textworks-label{
  flex:0 0 auto;
  color:#85898f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.npws-textworks-line{
  flex:1;
  height:1px;
  background:#e6e6e6;
}

.npws-text-marquee{
  border-top:1px solid #ececec;
  border-bottom:1px solid #ececec;
  background:#fff;
}

.npws-text-item{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-height:50px;
  padding:0 21px;
  border-right:1px solid #e7e7e7;
  white-space:nowrap;
  color:#44484e;
  font-size:12px;
}

.npws-text-item strong{
  margin-right:8px;
  color:#25282d;
  font-weight:800;
}

.npws-text-item small{
  color:#858a90;
  font-size:11px;
}

.npws-works-foot{
  margin:12px 0 0;
  color:#90949a;
  font-size:11px;
  text-align:center;
}

/* スマートフォン・タブレット */
@media(max-width:900px){
  .npws-works .npws-wrap{
    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
  }
  .npws-works .npws-works-head{
    display:block;
  }
  .npws-works-note{
    margin-top:10px;
  }
}

@media(max-width:600px){
  .npws-works{
    padding:32px 0 36px;
  }
  .npws-works .npws-h2{
    line-height:1.38;
  }
  .npws-work-card{
    width:138px;
  }
  .npws-text-item{
    min-height:46px;
    padding:0 16px;
    font-size:11px;
  }
  .npws-text-item small{
    font-size:10px;
  }
  .npws-works *{
    min-width:0;
  }
  .npws-work-marquee,
  .npws-text-marquee{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
}

@media(prefers-reduced-motion:reduce){
  .npws-work-track--image,
  .npws-work-track--text{
    animation:none!important;
  }
}

.npws-works{width:100%;max-width:100%;min-width:0;clear:both;margin:32px 0;}
.npws-work-marquee:focus .npws-work-track{animation-play-state:paused;}