/* =================================================================
   施工実績（一覧・詳細）専用スタイル
================================================================= */

/* ===== 施工実績一覧 ===== */
.works{padding:120px 0;background:#fff;position:relative;overflow:hidden}

.works-divider{
  width:100%;
  max-width:500px;
  height:2px;
  background:#03115e;
  margin:18px 0;
}

.sec-head__jp-font{
  font-family:"Noto Sans JP",sans-serif;
  font-size:36px;
  font-weight:900;
  color:var(--ink);
}

.works-top{justify-content:center;text-align:center}
.works-top .sec-head{width:100%}
.works-top .sec-head__jp-font{display:block;font-size:16px;font-weight:400}
.works-top .en{display:block;margin-top:8px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(32px,4.2vw,50px);font-weight:800;letter-spacing:.02em}
.works-top .works-divider{max-width:none;margin-left:auto;margin-right:auto}

/* ----- スクロール連動アニメーション（WORKS見出し） ----- */
.works-top .sec-head.reveal-io .en{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.works-top .sec-head.reveal-io .sec-head__jp-font{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) .15s,transform .7s cubic-bezier(.22,1,.36,1) .15s;
}
.works-top .sec-head.reveal-io .works-divider{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1s cubic-bezier(.22,1,.36,1) .4s;
}
.works-top .sec-head.reveal-io p{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) 1.3s,transform .7s cubic-bezier(.22,1,.36,1) 1.3s;
}
.works-top .sec-head.reveal-io.in .en{opacity:1;transform:none}
.works-top .sec-head.reveal-io.in .sec-head__jp-font{opacity:1;transform:none}
.works-top .sec-head.reveal-io.in .works-divider{transform:scaleX(1)}
.works-top .sec-head.reveal-io.in p{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .works-top .sec-head.reveal-io .en,
  .works-top .sec-head.reveal-io .sec-head__jp-font,
  .works-top .sec-head.reveal-io .works-divider,
  .works-top .sec-head.reveal-io p{
    transition:none !important;opacity:1 !important;transform:none !important;
  }
}

/* ===== 施工実績詳細：スライドショー ===== */
.work-slideshow{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:20px;
}
.work-slideshow__main{
  position:relative;
  height:560px;
  overflow:hidden;
  background:#eee;
}
.work-slideshow__img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.work-slideshow__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.08);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.work-slideshow__nav:hover{background:#fff}
.work-slideshow__nav--prev{left:20px}
.work-slideshow__nav--next{right:20px}
.work-slideshow__zoom{
  position:absolute;right:16px;bottom:16px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.08);
  color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.work-slideshow__zoom:hover{background:#fff}

.work-slideshow__thumbs{
  height:560px;overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;align-content:start;
}
.work-slideshow__thumb{
  aspect-ratio:4/3;overflow:hidden;padding:0;border:2px solid transparent;
  background:none;cursor:pointer;line-height:0;
}
.work-slideshow__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.work-slideshow__thumb.is-active{border-color:var(--accent, #b08d57)}

@media(max-width:760px){
  .work-slideshow{grid-template-columns:1fr;gap:14px}
  .work-slideshow__main{height:280px}
  .work-slideshow__thumbs{
    height:auto;max-height:none;
    display:flex;overflow-x:auto;overflow-y:visible;
    gap:8px;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .work-slideshow__thumb{flex:0 0 auto;width:96px}
}

/* ===== スライドショー（ライトボックス） ===== */
.lightbox{
  position:fixed;inset:0;z-index:10000;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,14,24,.94);
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width:88vw;max-height:82vh;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__close{
  position:absolute;top:24px;right:28px;
  background:none;border:none;color:#fff;font-size:36px;line-height:1;
  cursor:pointer;padding:4px;
}
.lightbox__prev,.lightbox__next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:28px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox__prev{left:24px}
.lightbox__next{right:24px}
.lightbox__prev:hover,.lightbox__next:hover,.lightbox__close:hover{background:rgba(255,255,255,.18)}
.lightbox__count{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:14px;letter-spacing:.05em;
}
body.lightbox-open{overflow:hidden}

@media(max-width:640px){
  .lightbox__prev,.lightbox__next{width:40px;height:40px;font-size:22px}
  .lightbox__prev{left:10px}
  .lightbox__next{right:10px}
  .lightbox__close{top:14px;right:16px;font-size:30px}
}

/* ===== 施工実績詳細：仕様テーブル ===== */
.work-specs{
  margin:56px 0 0;
  border-top:1px solid var(--line);
}
.work-specs__row{border-bottom:1px solid var(--line)}
.work-specs__row dt{
  background:rgba(26,52,97,1);color:#fff;font-weight:700;font-size:15px;
  padding:16px 20px;margin:0;
}
.work-specs__row dd{
  background:#fff;color:var(--ink);font-size:15px;
  padding:16px 20px;margin:0;
}

.work-back-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:32px;padding:16px;width:100%;max-width:280px;
  border:1px solid var(--ink);color:var(--ink);
  font-size:14px;letter-spacing:.05em;background:#fff;
  transition:background .2s,color .2s;
}
.work-back-btn:hover{background:var(--ink);color:#fff}