.works { min-height: 80vh; padding-top: 40px; }
.works-home-link, .works__back { color: #397b7c; font-size: 13px; line-height: 1.9; text-decoration: none; }
.works-home-link:hover, .works__back:hover { text-decoration: underline; text-underline-offset: 5px; }
.works__back { display: inline-block; padding-block: 10px; }
.works__intro { margin-top: 40px; margin-bottom: 48px; }
.works h1 { margin: 14px 0 20px; font-size: clamp(28px, 4vw, 40px); line-height: 1.6; }
.works .works__lead { color: #565e5b; font-family: "Yu Gothic", "Meiryo", sans-serif; font-size: 15px; line-height: 2.1; }
.works__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.works__card { min-width: 0; scroll-margin-top: 32px; }
.works__thumbnail { aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.works__thumbnail--green { background: #e9f0e9; }
.works__thumbnail--blue { background: #eaf0f3; }
.works__thumbnail--sand { background: #f1ebdf; }
.works__thumbnail svg { display: block; width: 100%; height: 100%; }
.works__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.works__thumbnail img[src$=".svg"] { object-fit: contain; }
.works__thumbnail .cases__practice-visual { min-height: 0; width: 100%; height: 100%; padding: 20px 16px; gap: 10px; font-size: 14px; }
.works .cases__demo-type { font-size: 11px; }
.works h2 { margin-top: 10px; font-size: 18px; line-height: 1.8; }
.works .cases__demo-text { font-size: 13px; }
.works .cases__demo-body { padding: 20px; }
.works__closing { margin-block: 56px 32px; padding: 32px; border-radius: 12px; background: #e9f0e9; line-height: 2; }
.works__contact { display: inline-flex; gap: 24px; margin-top: 16px; padding: 10px 24px; border-radius: 999px; background: #2b7476; color: #fff; font-size: 14px; text-decoration: none; }
.works__contact:hover { background: #245f61; }
:is(.works__contact, .works__back, .works-home-link):focus-visible { outline: 2px solid #397b7c; outline-offset: 5px; }
@media (max-width: 1000px) { .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .works { padding-top: 24px; }
  .works__intro { margin-top: 24px; margin-bottom: 32px; }
  .works__grid { grid-template-columns: 1fr; gap: 24px; }
  .works__closing { padding: 24px; font-size: 14px; }
  .works-home-link { font-size: 11px; }
}