@charset "UTF-8";
/* ============================================================
   施工事例ページ固有
   ============================================================ */

/* 絞り込み ------------------------------------------------ */
.gbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-top:clamp(34px,5vw,56px)}
.gtabs{display:flex;gap:10px;flex-wrap:wrap}
.gtabs button{
  padding:12px 28px;border:1px solid var(--line);background:none;color:var(--ink);
  font-family:inherit;font-weight:300;font-size:12.5px;letter-spacing:.1em;cursor:pointer;transition:.35s}
.gtabs button:hover{border-color:var(--green)}
.gtabs button.on{background:var(--green);color:#fff;border-color:var(--green)}
.gcount{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:11px;letter-spacing:.2em;color:var(--sub);flex:none;padding-bottom:12px}
.gcount b{color:var(--green);font-weight:400}

/* 一覧 ---------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,52px) clamp(16px,2vw,30px);
  margin-top:clamp(34px,5vw,56px)}
.gitem.hide{display:none}
.gmedia{position:relative;overflow:hidden;background:#EAE8E2;height:clamp(280px,30vw,420px)}
.gmedia img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gitem:hover .gmedia img{transform:scale(1.05)}
.gcat{display:block;margin-top:16px;font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:9px;letter-spacing:.26em;color:var(--green)}
.gname{display:block;margin-top:7px;font-family:"Shippori Mincho B1",serif;font-size:16px;letter-spacing:.06em;line-height:1.6}
.gmat{display:block;margin-top:7px;font-size:12px;color:var(--sub);line-height:1.85}

/* 末尾の一言 ---------------------------------------------- */
.gnote{margin-top:clamp(70px,9vw,120px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.gnote p{font-size:13px;color:var(--sub);max-width:44em}

/* レスポンシブ -------------------------------------------- */
@media(max-width:980px){
  .gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .gbar{align-items:flex-start}
  .gcount{padding-bottom:0}
  .gtabs button{padding:10px 20px;font-size:12px}
  .gnote{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}