.cases { position: fixed; inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); z-index: 5; overflow-y: auto; overscroll-behavior: contain; color: #1A1A1C; background: #FFFFFF;
  opacity: var(--cs, 0); visibility: hidden; pointer-events: none; transform: translateY(calc((1 - var(--cs, 0)) * 24 * var(--ut))); }
.cases.is-on { visibility: visible; }
.cases.is-live { pointer-events: auto; }
.cases-in { box-sizing: border-box; width: calc(1440 * var(--ut)); max-width: 100%; margin: 0 auto; padding: calc(192 * var(--ut)) calc(98 * var(--ut)) 0; }
.cases h2 { margin: 0; font-family: var(--heading); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; letter-spacing: var(--ls-h2); }   
.ucs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-list-item) calc(40 * var(--ut)); margin: var(--sp-heading-content) 0 0; padding: 0; list-style: none; }   
.uc { box-sizing: border-box; min-width: 0; height: calc(130 * var(--ut)); border: 1px solid transparent; border-bottom-color: #C9CCD3; border-radius: 0; padding: 0 calc(8 * var(--ut)); display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--ut)); }
.uc h3 { margin: 0; font-family: var(--font); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-body-lg); letter-spacing: var(--ls-body-lg); }   
.uc p { margin: var(--sp-label-desc) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }   
.works { margin-top: var(--sp-section); }
.wks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(32 * var(--ut)) calc(40 * var(--ut)); margin: var(--sp-heading-content) 0 0; padding: 0; list-style: none; }   
.wk { min-width: 0; }
.wk .pic { box-sizing: border-box; aspect-ratio: 602 / 423; max-width: 100%; border-radius: calc(32 * var(--ut)); overflow: hidden; background: #ECEDF0; }   
.wk .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk .nm { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-media-caption) calc(8 * var(--ut)) 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-body-lg); letter-spacing: var(--ls-body-lg); }   

.uc { position: relative; cursor: pointer; transition: color .25s var(--ease-out-cubic), opacity .25s var(--ease-out-cubic), border-color .5s ease, border-radius .5s var(--ease-out-cubic), padding .5s var(--ease-out-cubic); }
.uc::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: #1A1D26; opacity: 0; transform: scaleX(1.01); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.uc > * { position: relative; }
.uc p { transition: color .25s var(--ease-out-cubic); }
.chev { transition: color .5s var(--ease-out-cubic); }
@media (hover: hover) {
  .uc:hover { color: #FFFFFF; border-color: #1A1D26; border-radius: calc(80 * var(--ut)); padding: 0 calc(32 * var(--ut)); }
  .uc:hover::before { opacity: 1; transform: scale(1); }
  .uc:hover p { color: #C9CCD3; }
  .uc:hover .chev { color: #FFFFFF; }
  .ucs:has(.uc:hover) .uc:not(:hover) { opacity: .4; }
}
a.uc { display: flex; color: inherit; text-decoration: none; }
.wk > a { display: block; color: inherit; text-decoration: none; }