/* ===== Works: lead / common ===== */
.section-works .works-lead{ color:#475569; margin:.3rem 0 1.2rem; }
.works-actions{ margin-top:28px; text-align:center; }

/* ===== Device Mockups（一覧/個別 共用） ===== */
.device-mockups{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: clamp(16px, 4vw, 40px);
  margin: 10px 0 26px;
}

/* Laptop */
.mockup-laptop{ position:relative; width:min(900px, 90vw); aspect-ratio:16/10; }
.mockup-laptop .bezel{
  height:100%; background:#111; border-radius:14px; padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.mockup-laptop .bezel::after{
  content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:#222;
  box-shadow:inset 0 0 0 2px #0b0b0b, 0 0 0 1px rgba(255,255,255,.06);
}
.mockup-laptop .base{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:80%; height:10px; border-radius:0 0 10px 10px;
  background:linear-gradient(#c9c9c9,#9e9e9e); box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.mockup-laptop .screen{ width:100%; height:100%; border-radius:8px; overflow:hidden; background:#000; }
.mockup-laptop .screen img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Phone */
.mockup-phone{
  position:absolute; right: clamp(0px, 6vw, 80px); bottom:-20px; width:min(260px, 34vw);
}
.mockup-phone .body{
  position:relative; border:10px solid #111; background:#111; border-radius:38px;
  box-shadow:0 18px 40px rgba(0,0,0,.28); overflow:hidden; aspect-ratio:9/19.5;
}
.mockup-phone .notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:42%; height:22px; background:#111;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}
.mockup-phone .screen{ position:absolute; inset:12px; border-radius:26px; overflow:hidden; background:#000; }
.mockup-phone .screen img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Block (一覧の1件分) ===== */
.work-block{ margin:70px auto; text-align:center; max-width:1200px; }
.work-hero-meta .work-title{ margin:.6rem 0 1rem; }
.work-actions{ display:flex; gap:12px; justify-content:center; margin-top:12px; }

.btn-outline{
  display:inline-block; border:1px solid #cbd5e1; background:#fff; color:#334155;
  border-radius:999px; padding:.38em .9em; text-decoration:none;
  transition:background .2s, opacity .2s;
}
.btn-outline:hover{ background:#f1f5f9; }

/* ===== Single (個別ページの下部情報) ===== */
.single-work .work-hero{ padding-top:40px; } /* 余白だけ個別で */
.work-content{ margin-top:24px; }

.work-facts dl{
  display:grid; grid-template-columns:140px 1fr; gap:10px 16px;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:16px;
}
.work-facts dt{ color:#64748b; font-size:.9rem; }
.work-facts dd{ margin:0; }

.work-voice{
  margin-top:20px; border-left:4px solid #8e00b9;
  background:#f9f5fb; padding:14px 16px; border-radius:8px;
}
.work-voice .voice-label{ font-weight:700; color:#7a22a8; margin-bottom:.4rem; }

.work-gallery{
  margin-top:22px; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.work-gallery .shot{
  margin:0; overflow:hidden; border-radius:10px; border:1px solid #eee; background:#fff;
}
.work-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width: 960px){
  .work-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ==== 見せ方調整：PCを大きく、スマホは小さめ＆右寄せ ==== */

/* 一覧の1件分の最大幅を広げる（全体を大きく） */
.work-block { max-width: 1400px; }

/* PCモック：ひと回り大きく */
.mockup-laptop{
  width: clamp(720px, 76vw, 1180px); /* 以前より大きめに */
}

/* スマホモック：サイズを落として、右にずらす */
.mockup-phone{
  width: clamp(160px, 18vw, 240px);  /* 以前より小さめに */
  right: clamp(24px, 9vw, 160px);    /* 右へオフセットを増やす */
  bottom: -12px;                     /* PCのベースに軽く重ねる */
  z-index: 2;                        /* PCより前面に */
}
.mockup-laptop{ z-index: 1; }        /* 念のための重なり順 */

/* タイトル周りのバランス微調整（任意） */
.work-hero-meta .work-title{ margin: .8rem 0 1.1rem; }

/* スマホ〜タブレット時の安全策（はみ出し防止） */
@media (max-width: 768px){
  .work-block{ max-width: 100%; }
  .mockup-laptop{ width: 92vw; }
  .mockup-phone{
    width: 40vw;          /* 画面幅に合わせて小さめ */
    right: 4vw;           /* 右寄せは弱めに */
    bottom: -10px;
  }
}







/* ========== 見せ方の最終調整 ========== */

/* 1) エリアをひと回り大きく */
.work-block{ max-width: 1440px; }

/* 2) PCは大きめに */
.mockup-laptop{
  width: clamp(780px, 78vw, 1200px);
  z-index: 1;
}

/* 3) スマホは小さめ・右にオフセット（PCの外へ少しはみ出す） */
.mockup-phone{
  width: clamp(140px, 16vw, 220px);  /* 以前より小さめ */
  right: clamp(-140px, -7vw, -40px); /* マイナスで右へ“はみ出し” */
  bottom: 8px;                       /* PCのベースに軽く重ねる高さ */
  z-index: 2;                        /* PCより前面 */
}

/* 4) スマホ枠を細く（黒ベゼルをスリムに） */
.mockup-phone .body{
  border: 6px solid #111;            /* 10px → 6px */
  border-radius: 28px;               /* 38px → 28px（薄枠に合わせて） */
  box-shadow: 0 14px 32px rgba(0,0,0,.24);
}
.mockup-phone .screen{
  inset: 8px;                        /* 12px → 8px（枠に連動） */
  border-radius: 22px;               /* 26px → 22px */
}
.mockup-phone .notch{
  top: 6px;                          /* 10px → 6px */
  height: 14px;                      /* 22px → 14px */
  width: 38%;                        /* 42% → 38%（少し細め） */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 5) タブレット以下は“はみ出し”を弱めて安全側に */
@media (max-width: 1024px){
  .mockup-laptop{ width: 92vw; }
  .mockup-phone{
    width: 36vw;
    right: 2vw;                      /* 画面内に収める */
    bottom: 6px;
  }
}

/* 6) スマホ幅はさらに抑える（はみ出し防止） */
@media (max-width: 640px){
  .mockup-phone{ width: 42vw; right: 3vw; }
}

/* === スマホ枠をさらに細く & 位置を上へ（上書き） === */
.mockup-phone { bottom: 24px; } /* 8px → 24px にして少し上に */

.mockup-phone .body{
  border-width: 2px;            /* 6px → 4px で細ベゼル */
  border-radius: 20px;          /* 角も少しだけシャープに */
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.mockup-phone .screen{
  inset: 6px;                   /* 8px → 6px：枠が細くなった分だけ内側も調整 */
  border-radius: 16px;
}
.mockup-phone .notch{
  top: 4px;                     /* 6px → 4px */
  height: 12px;                 /* 14px → 12px */
  width: 34%;                   /* 38% → 34% */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* レスポンシブ時も少し上げる（はみ出し防止の範囲で） */
@media (max-width: 1024px){
  .mockup-phone { bottom: 16px; }
}
@media (max-width: 640px){
  .mockup-phone { bottom: 12px; }
}