.work-detail-page{background:#f7f8f9}.work-detail-main{--detail-info-width:clamp(340px,24vw,430px);--detail-gap:clamp(45px,6vw,95px);display:grid;grid-template-columns:var(--detail-info-width) minmax(0,1fr);column-gap:var(--detail-gap);align-items:start;min-height:100vh;padding-top:clamp(60px,7vw,105px);padding-bottom:clamp(75px,9vw,140px)}
.work-detail-info{position:sticky;z-index:2;top:var(--detail-sticky-top,auto);width:var(--detail-info-width);min-width:0;max-height:none;overflow:visible}.back-to-works{display:inline-block;margin-bottom:clamp(46px,5vw,72px);font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.08em;transition:color .25s,transform .4s cubic-bezier(.22,1,.36,1)}.back-to-works:hover,.back-to-works:focus-visible{color:var(--blue);transform:translateX(-5px)}
.detail-category{margin:0 0 13px;color:var(--blue);font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.14em}.work-detail-info h1{margin:0;white-space:nowrap;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:clamp(22px,1.85vw,28px);font-weight:800;line-height:1.08;letter-spacing:.006em}.work-detail-info time{display:block;margin-top:18px;color:#777c82;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em}.detail-description{margin:clamp(33px,4vw,52px) 0 0;color:#555a60;font-family:'Yu Gothic UI','Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-size:14px;font-weight:500;line-height:2;letter-spacing:.018em;white-space:pre-line}
.detail-credit{margin:clamp(34px,4vw,52px) 0 0}.detail-credit h2{margin:0 0 10px;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.15em}.detail-credit p{margin:0;padding-top:16px;border-top:1px solid #c7cbd0;font-size:12px;font-weight:700;line-height:1.85;letter-spacing:.015em}.detail-credit p>span{display:block}.detail-credit .thin-slash{display:inline}
.work-detail-media{display:grid;gap:clamp(22px,3vw,42px);min-width:0;margin-left:0}.work-detail-media figure{margin:0;background:#e2e4e6}.work-detail-media img{display:block;width:100%;height:auto}.movie-sample{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}.movie-sample iframe,.movie-sample video{display:block;width:100%;height:100%;border:0;object-fit:contain}
@media(min-width:901px) and (max-height:850px){.back-to-works{margin-bottom:25px}.detail-description{margin-top:22px;font-size:13px;line-height:1.65}.detail-credit{margin-top:22px}.detail-credit p{font-size:11px;line-height:1.55}}
@media(max-width:900px){.work-detail-main{display:grid;grid-template-columns:1fr;min-height:0}.work-detail-info{position:static;width:auto;max-height:none;overflow:visible;transform:none}.work-detail-media{margin-left:0}.back-to-works{margin-bottom:38px}.detail-description{max-width:650px}.detail-credit{max-width:650px}}
@media(max-width:600px){.work-detail-main{padding-top:45px;gap:40px}.work-detail-info h1{font-size:24px;white-space:normal}}

/* v122: prepare the media column behind a neutral sheet before revealing it. */
.work-detail-media{position:relative}
.work-detail-media::after{content:'';position:absolute;inset:0;z-index:4;background:#f7f8f9;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),visibility 0s linear .7s}
.work-detail-media.is-preparing::after{opacity:1;visibility:visible;pointer-events:auto;transition:none}
.work-detail-media img,.is-primary-detail-media img{aspect-ratio:auto 16/9}
@media(prefers-reduced-motion:reduce){.work-detail-media::after{transition:none}}

/* Keep the video slot stable while the remote player loads. */
.movie-sample:has(iframe[data-youtube-src])::after{content:'';position:absolute;inset:0;z-index:1;background:#f7f8f9;opacity:0;pointer-events:none;transition:opacity .45s ease}
.movie-sample.is-video-pending::after{opacity:1}
@media(prefers-reduced-motion:reduce){.movie-sample:has(iframe[data-youtube-src])::after{transition:none}}

/* v115: readable titles, compact real line breaks and unclipped return arrow. */
.work-detail-info h1{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.detail-description{line-height:1.75}
.detail-description a,.detail-credit a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.back-to-works{padding-left:6px;transition:color .25s,transform .45s cubic-bezier(.25,.1,.25,1)}
@media(prefers-reduced-motion:reduce){.back-to-works{transition:none}}

/* v78: first project visual precedes description and credits on smartphones. */
@media(max-width:600px){
  .work-detail-info>.is-primary-detail-media{width:100%;margin:32px 0 0;background:#e2e4e6}
  .work-detail-info>.is-primary-detail-media img{display:block;width:100%;height:auto}
  .work-detail-info>.is-primary-detail-media+.detail-description{margin-top:38px}
}

/* The hit area stays still while the label moves beyond its aligned edge. */
.back-to-works{padding-inline:2px;transition:color .25s}
.back-to-works:hover,.back-to-works:focus-visible{transform:none}
.back-to-works>.arrow-link-label{display:inline-block;pointer-events:auto;transition:transform .45s cubic-bezier(.25,.1,.25,1)}
.back-to-works:hover>.arrow-link-label,.back-to-works:focus-visible>.arrow-link-label{transform:translateX(-5px)}
@media(prefers-reduced-motion:reduce){
  .back-to-works,.back-to-works>.arrow-link-label{transition:none}
  .back-to-works:hover>.arrow-link-label,.back-to-works:focus-visible>.arrow-link-label{transform:none}
}

.back-to-works{margin-left:-2px}

/* v10-61: use the site's Japanese text family in work articles. */
.detail-description,.detail-credit p{font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
.work-detail-info h1{font-family:'Barlow','Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif}

/* Tablet's stacked columns need a deliberate gap after the credits. */
@media(min-width:601px) and (max-width:900px){
  .work-detail-main{row-gap:clamp(48px,7vw,64px)}
}