/* 制作実例ページ。本文は18px以上、単独リンクは44px以上を維持。 */
.works-jump{
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:24px;
}
.works-jump a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:8px 0;
  font-size:18px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:5px;
}
.works-section{ scroll-margin-top:32px; }
.works-kind{
  margin-bottom:10px;
  color:var(--indigo-d);
  font-size:18px;
  font-weight:700;
}
.works-section .h2{ margin-top:0; margin-bottom:16px; }
.works-intro{
  max-width:820px;
  color:var(--ink-soft);
  font-size:18px;
  margin-bottom:32px;
}
.works-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:32px;
}
.works-screen{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 36px rgba(15,23,42,.06);
}
.works-screen img{
  width:100%;
  height:auto;
  aspect-ratio:103 / 56;
  object-fit:cover;
  object-position:top;
  border-bottom:1px solid var(--line);
}
.works-screen figcaption{
  padding:12px 18px;
  font-size:18px;
  color:var(--muted);
}
.works-content{ min-width:0; }
.works-summary{ border-top:1px solid var(--line); }
.works-summary > div{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.works-summary dt{ font-size:18px; font-weight:700; }
.works-summary dd{ margin-top:3px; font-size:18px; color:var(--ink-soft); }
.works-content h3{
  margin:28px 0 14px;
  font-size:22px;
  line-height:1.6;
}
.works-points{
  display:grid;
  gap:18px;
  margin-bottom:28px;
}
.works-points li{
  font-size:18px;
  line-height:1.9;
  color:var(--ink-soft);
}
.works-points strong{ display:block; color:var(--ink); }
.works-external{
  flex-wrap:wrap;
  justify-content:center;
  column-gap:4px;
  row-gap:0;
  min-height:44px;
  max-width:100%;
  text-align:center;
}
.works-external span{ white-space:nowrap; }
.works-note{
  margin-bottom:32px;
  font-size:18px;
  color:var(--muted);
}
.works-next .btn-row{ margin-top:24px; }
@media (min-width:960px){
  .works-layout{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:44px; }
  .works-screen{ position:sticky; top:calc(var(--header-h) + 24px); }
}
@media (max-width:600px){
  .works-jump{ display:grid; gap:8px; }
  .works-jump a{ justify-content:space-between; gap:8px; }
  .works-section{ padding:60px 0; }
  .works-layout{ gap:24px; }
  .works-screen figcaption{ padding:12px 14px; }
  .works-external{ width:100%; padding-left:16px; padding-right:16px; }
}