/* JSで対応を確認できたときだけ導入を表示。既存の実績は常に残す。 */
.works-expand{display:none}
.works-expand.is-enabled{--works-top:72px;--x:0;--caption:0;--s0:.56;--radius:22px;--bezel:18px;display:block;height:220vh;height:220svh;margin-bottom:48px}
.works-expand-stage{position:sticky;top:var(--works-top);height:calc(100vh - var(--works-top));height:calc(100svh - var(--works-top));overflow:hidden;isolation:isolate}
/* 小さなスマホ（PCはブラウザの窓）に映ったサイトが、スクロールで画面いっぱいになる。
   枠・アドレスバー・ダイナミックアイランドは広がるにつれて消える。transform と box-shadow だけで動かす */
.works-expand-device{position:absolute;inset:0;transform:scale(calc(var(--s0) + (1 - var(--s0)) * var(--x)));transform-origin:50% 6%;will-change:transform}
.works-expand-window{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--radius) * (1 - var(--x)));box-shadow:0 0 0 calc(var(--bezel) * max(0, 1 - var(--x) * 1.8)) #222420,0 40px 80px rgba(20,16,10,calc(.32 * (1 - var(--x))));background:#f6f1e7}
.works-expand-island{position:absolute;z-index:2;left:50%;top:18px;width:30%;height:30px;border-radius:999px;background:#111;transform:translateX(-50%);opacity:calc(1 - var(--x) * 1.6)}
.works-expand-bar{display:none;position:absolute;left:calc(var(--bezel) * -1);right:calc(var(--bezel) * -1);bottom:100%;height:calc(var(--bezel) * 2.6);align-items:center;gap:10px;padding:0 calc(var(--bezel) * 1.4);border-radius:calc(var(--radius) * .7) calc(var(--radius) * .7) 0 0;background:#e9e6df;color:#6f6a60;font-size:calc(var(--bezel) * .9);opacity:calc(1 - var(--x) * 1.4)}
.works-expand-bar i{width:calc(var(--bezel) * .7);height:calc(var(--bezel) * .7);border-radius:50%;background:#cfc9be}
.works-expand-bar i:first-child{background:#e2a28f}
.works-expand-bar span{margin-left:auto;margin-right:auto;padding:4px 40px;border-radius:999px;background:#f7f5f0;letter-spacing:.04em}
.works-expand-window picture{display:block;width:100%;height:100%}
.works-expand-window img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.works-expand-scrim{position:absolute;inset:0;background:linear-gradient(transparent 58%,rgba(32,24,14,.5) 80%,rgba(32,24,14,.82));opacity:var(--caption);pointer-events:none}
.works-expand-caption{position:absolute;left:20px;right:20px;bottom:calc(48px + env(safe-area-inset-bottom,0px));text-align:center;color:#fff;opacity:var(--caption);transform:translateY(calc(18px * (1 - var(--caption))));text-shadow:0 2px 12px #0006}
.works-expand-label{font-size:13px;letter-spacing:.16em}
.works-expand-name{font-family:var(--serif);font-size:clamp(22px,3vw,40px);line-height:1.65;margin-top:10px}
.works-expand-location{font-size:13px;margin-top:10px}
@media(max-width:760px){
  .works-expand.is-enabled{--works-top:60px;--s0:.62;--radius:60px;--bezel:12px;margin-bottom:28px}
  .works-expand-caption{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.works-expand.is-enabled{display:none}}
/* PCはブラウザの窓（上にアドレスバー）。スマホは枠＋ダイナミックアイランド */
@media(min-width:761px){
  .works-expand-bar{display:flex}
  .works-expand-island{display:none}
  .works-expand-window{border-radius:0 0 calc(var(--radius) * (1 - var(--x))) calc(var(--radius) * (1 - var(--x)));box-shadow:0 0 0 calc(5px * (1 - var(--x))) #e9e6df,0 40px 80px rgba(20,16,10,calc(.28 * (1 - var(--x))))}
  .works-expand-bar{left:-5px;right:-5px}
  .works-expand-device{transform-origin:50% 16%}
}
/* 固定しない：高さは画面の8割ほど。ページは普通に流れる */
.works-expand.is-enabled{height:auto}
.works-expand-stage{position:relative;top:auto;height:82vh;height:82svh}
@media(max-width:760px){.works-expand-stage{height:78vh;height:78svh}}