@charset "utf-8";

/* =========================
   Work / 施工事例
========================= */

:root{
  --ink:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.12);
  --card:#ffffff;
  --bg:#f8fafc;
  --accent:#2563eb;
  --accent2:#22c55e;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 18px;
}

/* ページ背景 */
main{
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,0));
}

#cute3work,
#sun1work,
#battery2work{
  scroll-margin-top: 120px;
}


/* =========================
   見出し（太陽光/蓄電池/エコキュート）
========================= */
.work_all_box_title{
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 26px) clamp(14px, 3vw, 22px);
  margin: clamp(26px, 4vw, 54px) auto clamp(18px, 3vw, 30px);
  max-width: 1160px;

  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
  position: relative;
  overflow: hidden;

  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--ink);
  background: rgba(255,255,255,.86);
}

.work_all_box_title::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(37,99,235,.20), rgba(34,197,94,.16));
  transform: rotate(-6deg);
  opacity: .95;
}

.work_all_box_title::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 12px;
  width: 92px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: .95;
}

/* セクション別の色味 */
#sun1work.work_all_box_title::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.78), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(37,99,235,.26), rgba(34,197,94,.10));
}
#battery2work.work_all_box_title::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.78), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(37,99,235,.18), rgba(15,23,42,.10));
}
#cute3work.work_all_box_title::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.78), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(34,197,94,.22), rgba(37,99,235,.10));
}

@media (max-width: 750px){
  .work_all_box_title{
    border-radius: 18px;
    margin: 22px auto 16px;
    padding: 16px 14px;
  }
  .work_all_box_title::after{
    bottom: 10px;
    width: 78px;
  }
  #cute3work,
  #sun1work,
  #battery2work{
    scroll-margin-top: 110px;
  }
}

/* =========================
   メニュー
========================= */
.work_menu_box_all{
  position: sticky;
  top: 72px;
  z-index: 999;
  padding: 10px 0;
  background: rgba(248,250,252,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.work_menu_box{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 22px);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.work_menu_box1,
.work_menu_box2,
.work_menu_box3{
  width: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.work_menu_box1 a,
.work_menu_box2 a,
.work_menu_box3 a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: var(--ink);
  text-decoration: none !important;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
  position: relative;
  z-index: 10000; /* クリック面を前へ */
}

.work_menu_box1 a:hover,
.work_menu_box2 a:hover,
.work_menu_box3 a:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(2,6,23,.10);
  border-color: rgba(37,99,235,.35);
}

@media (max-width: 750px){
  .work_menu_box{
    gap: 8px;
  }
  .work_menu_box1 a,
  .work_menu_box2 a,
  .work_menu_box3 a{
    padding: 9px 12px;
    font-size: 14px;
  }
}

/* =========================
   一覧（カード2列 → 1列）
========================= */
.work-box_all{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 22px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  align-items: start;
  margin-bottom: clamp(18px, 3vw, 34px);
}

@media (max-width: 1200px){
  .work-box_all{
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
}

.work-box_all_1{
  margin: 0; /* 旧marginリセット */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* =========================
   テーブル（太線/黄色ベタ排除）
========================= */
.work-box{
  display: block;
  font-size: 15px;
  color: var(--ink);
  padding: clamp(14px, 2.2vw, 18px);
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(37,99,235,0));
  border-bottom: 1px solid var(--line);
}

.work-box table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.work-box table tr{ border: none; }

.work-box table th,
.work-box table td{
  border: none;
  padding: 10px 12px;
  vertical-align: top;
  line-height: 1.6;
}

.work-box table th{
  width: 32%;
  text-align: left;
  font-weight: 800;
  color: var(--ink);
  background: transparent;
}

.work-box table th::before{
  content:"";
  display:inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: translateY(1px);
}

.work-box table td{
  width: 68%;
  color: rgba(15,23,42,.88);
}

.work-box table tr + tr th,
.work-box table tr + tr td{
  border-top: 1px solid rgba(15,23,42,.08);
}

/* =========================
   画像（今っぽいギャラリー）
========================= */
.work_img_box{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: var(--card);
}

@media (max-width: 750px){
  .work_img_box{
    gap: 8px;
    padding: 12px;
  }
}

/* サムネカード */
.work_img{
  display:block;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 8px 18px rgba(2,6,23,.08);
  transform: translateZ(0);
}

.tmb{ width: 100%; }

.tmb_img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.work_img:hover .tmb_img{
  transform: scale(1.03);
  filter: saturate(1.06) contrast(1.02);
  cursor: zoom-in;
}

/* 拡大アイコン */
.work_img::after{
  content:"";
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(2,6,23,.18);
}

.work_img::before{
  content:"＋";
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight: 900;
  font-size: 18px;
  z-index: 2;
}

.work_img img{
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: cover;
}

/* =========================
   ポップアップ
========================= */
.popup{
  z-index: 110;
  position: fixed;
  inset: 0;
  transform: scale(0.98);
  background-color: rgba(2,6,23,.72);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.popup__btn{
  z-index: 113;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.popup__btn::before,
.popup__btn::after{
  position: absolute;
  top: 50%;
  width: 60%;
  left: 20%;
  height: 2px;
  margin-top: -1px;
  background-color: #fff;
  content: '';
}
.popup__btn::before{ transform: rotate(45deg); }
.popup__btn::after{ transform: rotate(-45deg); }

.popup__btnarea{
  z-index: 112;
  position: absolute;
  inset: 0;
}

.popup__img{
  z-index: 111;
  position: absolute;
  inset: 6%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.popup__img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* radioライトボックス*/
.lb_radio{ display:none; }

.popup{
  z-index: 110;
  position: fixed;
  inset: 0;
  transform: scale(0.98);
  background-color: rgba(2,6,23,.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* radioがチェックされた“その1枚だけ”表示（input + .popup が隣接してる前提） */
.lb_radio:checked + .popup{
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}


/* 既存（必要なら残す） */
.company-map{
  margin-left: 10px;
  margin-right: 10px;
}