@charset "utf-8";
/* 施工実績ページ 専用スタイル（style.css の後に読み込む） */

/* ── 絞り込み ── */
.wfilter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.wfilter button{border:1.5px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:10px 20px;font-size:13px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:.2s}
.wfilter button:hover{border-color:var(--ink)}
.wfilter button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.wcount{font-size:13px;color:var(--sub);font-weight:700;margin:0 0 22px}

/* ── 一覧 ── */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wgrid{grid-template-columns:1fr}}
.wcard{background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 3px 18px rgba(34,38,44,.06);transition:transform .28s,box-shadow .28s;display:flex;flex-direction:column}
.wcard:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(34,38,44,.12)}
.wthumb{aspect-ratio:16/10;background:var(--paper2);overflow:hidden;position:relative}
.wthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.wcard:hover .wthumb img{transform:scale(1.05)}
.wthumb .noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--sub);font-size:12px;font-weight:700}
.wbody{padding:20px 20px 24px;flex:1;display:flex;flex-direction:column}
.wmeta{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.wbadge{font-size:10.5px;font-weight:800;padding:4px 12px;border-radius:999px}
.wbadge.pub{background:var(--blue-l);color:var(--blue-d)}
.wbadge.pri{background:var(--terra-l);color:var(--terra-d)}
.wbadge.oth{background:#EFEDE8;color:var(--sub)}
.wbid{font-size:10.5px;font-weight:800;padding:4px 12px;border-radius:999px;
  background:var(--mustard-l);color:#8A6A10}
.wcard time{font-size:11.5px;color:var(--sub);font-weight:700;margin-left:auto}
.wcard h3{margin:0 0 10px;font-size:15.5px;font-weight:800;line-height:1.65}
.wplace{margin:0;font-size:12.5px;color:var(--sub);display:flex;align-items:flex-start;gap:6px}
.wplace::before{content:"📍";font-size:11px;line-height:1.8}

/* ── 個別ページ ── */
.wdetail{max-width:960px;margin:0 auto}
/* 写真は2列固定。1枚が大きくなりすぎず、ページも間延びしない */
.wgal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 40px;
  align-items:start;justify-items:center}
@media(max-width:640px){.wgal{grid-template-columns:1fr}}
.wgal figure{margin:0;width:100%}
/* height:auto を必ず効かせる（縦横比の歪み防止）。元画像より拡大しない */
.wgal img{width:100%;height:auto;max-height:56vh;object-fit:contain;border-radius:16px;
  background:var(--paper2);box-shadow:0 3px 16px rgba(34,38,44,.07);cursor:zoom-in}
.wspec{border-top:1px solid var(--line);margin:0 0 36px}
.wspec>div{display:grid;grid-template-columns:minmax(110px,160px) 1fr;border-bottom:1px solid var(--line)}
.wspec dt{padding:16px 16px 16px 0;font-weight:800;font-size:13.5px}
.wspec dd{padding:16px 0;margin:0;font-size:14.5px;color:#3D444F}
@media(max-width:620px){
  .wspec>div{grid-template-columns:1fr}
  .wspec dt{padding-bottom:2px}
  .wspec dd{padding-top:2px}
}
.wnav{display:flex;gap:12px;justify-content:space-between;margin-top:50px;flex-wrap:wrap}
.wnav a{font-size:13.5px;font-weight:800;text-decoration:none;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:13px 24px;transition:.2s}
.wnav a:hover{border-color:var(--ink)}

/* 画像の拡大 */
#lbox{position:fixed;inset:0;background:rgba(20,22,26,.92);display:none;align-items:center;
  justify-content:center;z-index:200;cursor:zoom-out;padding:24px}
#lbox.on{display:flex}
#lbox img{max-width:96vw;max-height:92vh;border-radius:10px}