/* 製品・サービス紹介（濃紺・編集グリッド型）。トークンは index.html の :root */
.works{background:var(--navy);color:var(--ivory);padding-bottom:calc(var(--sec) + var(--shore) * .86)}
.works .section-intro{color:var(--mist)}
.work-top{margin:clamp(44px,5vw,72px) 0 clamp(36px,4vw,56px)}
.filter-label{margin:0 0 14px;color:var(--gold-hi);font-size:16px;letter-spacing:.08em}
.filters{position:relative;display:grid;grid-template-columns:1fr 1fr .8fr;gap:12px;padding-bottom:14px}
.works .filter{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;min-height:112px;padding:20px 24px;border:1px solid var(--line-d);border-radius:0;background:rgba(23,58,85,.55);color:var(--ivory);text-align:left;transition:background .3s,border-color .3s,color .3s}
.works .filter:hover{background:var(--navy-2);border-color:var(--champagne)}
.works .filter:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}
.works .filter[aria-selected=true]{background:#F4E5C7;border-color:#F4E5C7;color:#122D41}
.filter-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:20px;line-height:1.45;letter-spacing:.04em}
.filter-name{min-width:0}
.works .filter-count{font-size:20px;font-weight:600;letter-spacing:.06em;color:var(--champagne)}
.works .filter[aria-selected=true] .filter-count{color:var(--gold)}
.filter-detail{font-size:16px;line-height:1.6;color:var(--mist)}
.filter[aria-selected=true] .filter-detail{color:#345064}
.filter-ink{position:absolute;left:0;top:0;width:var(--ink-w,0);height:2px;background:var(--champagne);box-shadow:0 0 10px rgba(238,217,172,.5);transform:translate(var(--ink-x,0),var(--ink-y,0));transition:transform .35s var(--ease-out),width .35s var(--ease-out)}
.works .work-count{margin:14px 0 0;color:var(--mist);font-size:16px}

/* グリッド: 大1＋縦1／中3／中2 の3行で7件。data-slot は site.js が表示中の順に振る */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,5vw,72px) 24px}
.work-grid:focus-visible{outline:2px solid var(--champagne);outline-offset:10px}
.work-grid.is-swapping{animation:swap .35s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:translateY(12px)}}
.work-card{grid-column:span 4;min-width:0}
.work-card>a{display:block;color:inherit}
.work-media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--navy-2);outline:1px solid transparent;outline-offset:8px;transition:outline-color .35s,outline-offset .35s var(--ease-out)}
.work-media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1.1s var(--ease-out)}
.work-media img[data-preview=photo]{object-position:center}
.work-media img[src$="kintsugi.webp"]{object-position:left center}
.work-media img[src*="lp-salon"]{object-position:74% center}
.work-card[data-slot="1"]{grid-column:span 8}
.work-card[data-slot="2"]{grid-column:span 4}
.work-card[data-slot="1"] .work-media,.work-card[data-slot="2"] .work-media{aspect-ratio:auto;height:clamp(300px,34vw,490px)}
.work-card[data-slot="6"],.work-card[data-slot="7"]{grid-column:span 6}
.work-card[data-slot="6"] .work-media,.work-card[data-slot="7"] .work-media{aspect-ratio:16/9}
.js .work-card[data-slot="2"] .work-media[data-m=reveal]:not(.in){clip-path:inset(0 100% 0 0)}
.js .work-card[data-slot="7"] .work-media[data-m=reveal]:not(.in){clip-path:inset(0 0 0 100%)}
.work-tag{margin:18px 0 4px;color:var(--sky);font-size:16px;letter-spacing:.06em}
.work-title{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:clamp(22px,2.4vw,30px);line-height:1.45}
.work-title::after{content:'';flex:none;width:18px;height:18px;background:var(--champagne);-webkit-mask:var(--i-ne) center/contain no-repeat;mask:var(--i-ne) center/contain no-repeat;transition:transform .35s var(--ease-out)}
.work-description{margin-top:8px;color:var(--mist);font-size:16px;line-height:1.8}
.work-card>a:hover .work-media{outline-color:var(--champagne);outline-offset:0}
.work-card>a:hover .work-media img,.js .work-card>a:hover .work-media.in img{transform:scale(1.03)}
.work-card>a:hover .work-title::after{transform:translate(4px,-4px)}
.works-note{margin-top:clamp(48px,5vw,72px);padding-top:22px;border-top:1px solid var(--line-d);color:var(--mist);font-size:16px}
.works-more{display:flex;justify-content:flex-end;margin-top:32px}

@media(max-width:1100px){
  .work-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .work-card,.work-card[data-slot]{grid-column:span 3}
  .work-card[data-slot="1"]{grid-column:span 6}
  .work-card[data-slot="1"] .work-media{height:auto;aspect-ratio:16/9}
  .work-card[data-slot="2"] .work-media,.work-card[data-slot="6"] .work-media,.work-card[data-slot="7"] .work-media{height:auto;aspect-ratio:3/2}
}
@media(max-width:780px){
  /* 2＋1 の形のまま、題の長い「ホームページ・LP」の列を少し広く（375px 以上で題が1行に収まる） */
  .filters{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:10px}
  .works .filter{min-height:112px;padding:16px}
  /* 題が2行に折れても、件数は最後の行の右端にそろえる（語の途中では折らない） */
  .filter-title{font-size:18px;align-items:flex-end}
  .works .filter-count{font-size:18px;line-height:1.45}
  .works .filter[data-filter=all]{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
  .work-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .work-card,.work-card[data-slot]{grid-column:auto}
  .work-card[data-slot] .work-media{height:auto;aspect-ratio:3/2}
  .works-more{justify-content:flex-start}
}
@media(max-width:420px){
  .works .filter{padding:14px 12px}
  .filter-title{font-size:16px;gap:8px;letter-spacing:.02em}
  .works .filter-count{font-size:16px}
}
@media(max-width:360px){
  /* 320px 級では2列に題が収まらないので、3つを縦に並べる（語の途中で折らない） */
  .filters{grid-template-columns:minmax(0,1fr)}
  .works .filter{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .works .filter,.filter-ink,.work-media,.work-media img,.work-title::after{transition:none}
}