/* ============================================================
   v62 WORKS 一覧：1件ずつ、PC とスマホの画面に収めて見せる
   （works.html ／ works-tag-*.html だけで読み込む）
   ============================================================ */
.sec-wx{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(48px,7vw,96px)}
/* 一覧ページだけ、本文の幅を広げて画面を大きく見せる（見出し・パンくず・絞り込み・各実績の左端をそろえる） */
.page-works-list .page-hero-works .wrap,.page-works-list .sec-wx .wrap{max-width:1360px;padding-inline:clamp(20px,4vw,40px)}
.sec-wx .wk-filter{padding-bottom:clamp(20px,3vw,32px)}
.wx-sum{margin-left:auto;font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.26em;color:var(--fg-muted)}
.wx-sum b{color:var(--fg);font-size:13px;letter-spacing:.06em;margin-right:6px}
@media (max-width:560px){.wx-sum{margin-left:0;width:100%;order:-1;margin-bottom:6px}}

.wx-list{list-style:none;margin:0;padding:0}
.wx{border-top:1px solid var(--line-c)}
.wx:last-child{border-bottom:1px solid var(--line-c)}
.wx-in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-areas:"stage info";
  gap:clamp(32px,5.4vw,84px);align-items:center;padding-block:clamp(44px,6.6vw,100px)}
.wx:nth-child(even) .wx-in{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);grid-template-areas:"info stage"}
.wx-stage{grid-area:stage}
.wx-info{grid-area:info;min-width:0}
@media (max-width:900px){
  .wx-in,.wx:nth-child(even) .wx-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "info";gap:26px}
}

/* ---------------------------------------------------------------- ステージ（画面を置く面） */
.wx-stage{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;isolation:isolate;
  background:var(--surface-alt);container-type:inline-size;-webkit-tap-highlight-color:transparent;outline-offset:4px}
.wx-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:7;border:1px solid var(--line-c)}
/* 画面の光：撮影した画面を 48×30 まで縮めた画像を大きく敷く（色はクライアントのサイトそのもの） */
.wx-amb{position:absolute;left:-12%;top:-16%;width:124%;height:132%;max-width:none;object-fit:cover;z-index:-1;
  opacity:0;filter:saturate(1.25);transition:opacity 1.6s var(--ease);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.35) 62%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.35) 62%,transparent 100%)}
.wx-stage.is-in .wx-amb{opacity:.34}
/* 細い罫の方眼（設計図の名残り）。ごく薄く */
.wx-grid{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line-c) 1px,transparent 1px),linear-gradient(90deg,var(--line-c) 1px,transparent 1px);
  background-size:8cqw 8cqw;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 40%,#000 100%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 40%,#000 100%)}

/* 傾き：カーソルの位置で、画面の束がわずかに向きを変える */
.wx-rig{position:absolute;inset:0;transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .9s var(--ease)}
.wx-stage.is-hover .wx-rig{transition-duration:.25s}

/* ---------------------------------------------------------------- PC：ブラウザの窓 */
.wx-mac{position:absolute;left:6%;top:12.5%;width:73%;border-radius:1cqw;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(34,24,21,.09),0 .8cqw 1.6cqw -.6cqw rgba(34,24,21,.22),0 3.4cqw 6cqw -2.4cqw rgba(34,24,21,.38);
  opacity:0;transform:translateY(7%);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.wx:nth-child(even) .wx-mac{left:auto;right:6%}
.wx-bar{display:flex;align-items:center;gap:.62cqw;height:3.3cqw;padding:0 1.3cqw;background:#f4f3f1;border-bottom:1px solid rgba(34,24,21,.08)}
.wx-bar i{flex:none;width:.78cqw;height:.78cqw;border-radius:50%;background:#d9d5d1}
.wx-url{flex:0 1 auto;min-width:0;max-width:56%;margin:0 auto;height:1.95cqw;padding:0 1.6cqw;border-radius:1cqw;background:#fff;
  font:600 1cqw/1.95cqw var(--font-en);letter-spacing:.06em;color:#8a8681;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-url::before{content:"";display:inline-block;width:.62cqw;height:.7cqw;margin-right:.6cqw;vertical-align:-.05cqw;border-radius:.12cqw;
  background:#b9b4af;-webkit-mask:radial-gradient(circle at 50% 0,transparent 42%,#000 44%) top/100% 55% no-repeat,linear-gradient(#000,#000) bottom/100% 52% no-repeat;
          mask:radial-gradient(circle at 50% 0,transparent 42%,#000 44%) top/100% 55% no-repeat,linear-gradient(#000,#000) bottom/100% 52% no-repeat}
.wx-bar::after{content:"";flex:none;width:2.6cqw}
.wx-mac .wx-scr{aspect-ratio:16/10}

/* ---------------------------------------------------------------- SP：スマホ */
.wx-pho{position:absolute;right:6%;bottom:6.5%;width:20.5%;opacity:0;transform:translateY(16%);
  transition:opacity 1.1s var(--ease) .18s,transform 1.4s var(--ease) .18s}
.wx:nth-child(even) .wx-pho{right:auto;left:6%}
.wx-phi{position:relative;display:block;padding:.72cqw;border-radius:3.3cqw;background:#1d1614;
  box-shadow:inset 0 0 0 .18cqw #3a302c,0 0 0 1px rgba(34,24,21,.12),0 1cqw 2cqw -.8cqw rgba(34,24,21,.3),0 4cqw 7cqw -2.6cqw rgba(34,24,21,.45);
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);transition:transform .9s var(--ease)}
.wx-stage.is-hover .wx-phi{transition-duration:.3s}
.wx-phi::before{content:"";position:absolute;top:1.55cqw;left:50%;width:5.4cqw;height:1.45cqw;margin-left:-2.7cqw;border-radius:1cqw;background:#1d1614;z-index:4}
.wx-pho .wx-scr{aspect-ratio:368/796;border-radius:2.62cqw}

/* ---------------------------------------------------------------- v66 印刷物：写真を1枚の紙のように置く（パンフレット等） */
.wx-print{position:absolute;left:50%;top:50%;width:70%;
  box-shadow:0 0 0 1px rgba(34,24,21,.08),0 .8cqw 1.6cqw -.6cqw rgba(34,24,21,.22),0 3.4cqw 6cqw -2.4cqw rgba(34,24,21,.38);
  opacity:0;transform:translate(-50%,-45%);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.wx-stage.is-in .wx-print{opacity:1;transform:translate(-50%,-50%)}
.wx-print .wx-scr{aspect-ratio:4/3}
.wx-print .wx-scr img{object-position:center}
.wx-print .wx-scr::after{background:linear-gradient(115deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%)}
/* 入ってきたあと、写真がゆっくり引いていく（カメラが少し下がる手ざわり） */
.wx-print .wx-scr img.is-on{transform:scale(1.06)}
.wx-stage.is-in .wx-print .wx-scr img.is-on{transform:none;transition:transform 7s cubic-bezier(.2,.7,.2,1),filter 1.25s cubic-bezier(.76,0,.2,1)}
.wx-stage-print .wx-kind,.wx:nth-child(even) .wx-stage-print .wx-kind,
.wx-stage-print .wx-prog,.wx:nth-child(even) .wx-stage-print .wx-prog{left:15%;right:auto}
@media (prefers-reduced-motion:reduce){.wx-print .wx-scr img.is-on{transform:none}}
/* v66：長いクライアント名は、語の途中で折り返さない（対応ブラウザのみ。例：〜コンサルティ／ング を避ける） */
.wx-ttl .cl,.wd-title .cl,.wd-table td{word-break:auto-phrase}

/* ---------------------------------------------------------------- 画面：下から押し上げるように次の画面へ（スクロールの手ざわり） */
.wx-scr{position:relative;display:block;overflow:hidden;background:var(--gray-2);transform:translateZ(0)}
.wx-scr img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center;
  transform:translate3d(0,100%,0);transition:transform 1.25s cubic-bezier(.76,0,.2,1),filter 1.25s cubic-bezier(.76,0,.2,1)}
.wx-scr img.is-on{transform:none;z-index:2}
.wx-scr img.is-out{transform:translate3d(0,-26%,0);filter:brightness(.62);z-index:1}
.wx-scr img.is-reset{transition:none}
.wx-scr::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%)}   /* ガラスの映り込み */

/* 入ってくる動き（.rv の is-in に合わせて、窓 → スマホの順） */
.wx-stage.is-in .wx-mac,.wx-stage.is-in .wx-pho{opacity:1;transform:none}

/* ---------------------------------------------------------------- 送りの目盛り（何枚目の画面か） */
.wx-prog{position:absolute;left:6%;bottom:5.6%;z-index:6;display:flex;gap:6px;pointer-events:none}
.wx:nth-child(even) .wx-prog{left:auto;right:6%}
.wx-prog i{position:relative;width:clamp(16px,2.6cqw,26px);height:2px;overflow:hidden;background:color-mix(in srgb,var(--fg) 16%,transparent)}
.wx-prog i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}
.wx-prog i.is-done::after{transform:scaleX(1)}
.wx-prog i.is-on::after{animation:wx-prog var(--wx-dur,4200ms) linear forwards}
.wx-stage.is-hold .wx-prog i.is-on::after{animation-play-state:paused}
@keyframes wx-prog{to{transform:scaleX(1)}}
.wx-kind{position:absolute;top:4.6%;left:6%;z-index:6;font:700 clamp(9px,1.1cqw,11px)/1 var(--font-en);letter-spacing:.28em;color:var(--fg-muted)}
.wx:nth-child(even) .wx-kind{left:auto;right:6%}

/* ---------------------------------------------------------------- VIEW（カーソルに付いてくる丸） */
.wx-view{position:absolute;left:0;top:0;z-index:8;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  display:grid;place-items:center;background:var(--fg);color:var(--bg);pointer-events:none;
  font:700 10.5px/1 var(--font-en);letter-spacing:.24em;text-indent:.24em;
  transform:translate3d(var(--mx,50%),var(--my,50%),0) scale(0);transition:transform .5s var(--ease)}
.wx-stage.is-hover .wx-view{transform:translate3d(var(--mx,50%),var(--my,50%),0) scale(1)}
@media (hover:none),(pointer:coarse){.wx-view{display:none}}

/* ---------------------------------------------------------------- 文字の側 */
.wx-no{display:flex;align-items:baseline;gap:12px;margin:0 0 22px;font-family:var(--font-en)}
.wx-no b{display:inline-flex;overflow:hidden;padding-bottom:.04em;font-size:clamp(46px,5.2vw,76px);font-weight:600;line-height:.9;letter-spacing:-.03em}
.wx-no b span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.wx-no b span+span{transition-delay:.07s}
.wx-info.rv.is-in .wx-no b span{transform:none}
.wx-no small{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--fg-muted)}
.wx-ind{margin:0 0 10px;font-size:12px;letter-spacing:.12em;line-height:1.8;color:var(--fg-muted)}
.wx-ttl{margin:0;font-size:clamp(22px,2.25vw,29px);line-height:1.5;letter-spacing:.04em;font-weight:700}
.wx-ttl .cl{display:block;margin-bottom:6px;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--fg-soft)}
.wx-ttl a{color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.wx-ttl a:hover{background-size:100% 1px}
.wx-lead{margin:18px 0 0;font-size:14px;line-height:2;color:var(--fg-soft)}
.wx-scope{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-c);font-size:12.5px;line-height:1.9}
.wx-scope dt{font:700 10px/2.4 var(--font-en);letter-spacing:.24em;color:var(--fg-muted)}
.wx-scope dd{margin:0;color:var(--fg-soft)}
.wx-info .wk-tags{margin-top:16px;padding-top:0}
.wx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.wx-acts .btn-line{padding:12px 26px;font-family:var(--font-en);font-weight:700;font-size:11.5px;letter-spacing:.22em}
.wx-acts .btn-line .ar{transition:transform .4s var(--ease)}
.wx-acts .btn-line:hover .ar{transform:translateX(4px)}
.wx-ext{display:inline-flex;align-items:center;gap:6px;padding-bottom:2px;border-bottom:1px solid var(--line-c);
  font-size:12.5px;letter-spacing:.06em;line-height:1.6;color:var(--fg-soft);transition:color .3s,border-color .3s}
.wx-ext:hover{color:var(--fg);border-color:var(--fg)}
.wx-ext .ex{font-family:var(--font-en);font-size:11px}

/* 情報の入り（.rv を使い、番号 → 見出し → 本文の順に少しずつ） */
.wx-info.rv .wx-no,.wx-info.rv .wx-ind,.wx-info.rv .wx-ttl,.wx-info.rv .wx-lead,.wx-info.rv .wx-scope,.wx-info.rv .wk-tags,.wx-info.rv .wx-acts{
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.wx-info.rv.is-in > *{opacity:1;transform:none}
.wx-info.rv.is-in .wx-ttl{transition-delay:.08s}.wx-info.rv.is-in .wx-lead{transition-delay:.16s}
.wx-info.rv.is-in .wx-scope{transition-delay:.22s}.wx-info.rv.is-in .wk-tags{transition-delay:.28s}.wx-info.rv.is-in .wx-acts{transition-delay:.34s}
.wx-info.rv{opacity:1;transform:none}

@media (max-width:900px){
  .wx-no{margin-bottom:14px}
  .wx-no b{font-size:42px}
  .wx-acts{margin-top:22px}
}
@media (max-width:560px){
  .wx-print{width:80%}
  .wx-stage-print .wx-kind,.wx:nth-child(even) .wx-stage-print .wx-kind{left:10%}
  .wx-in{padding-block:36px 44px}
  .wx-stage{aspect-ratio:16/12.6}
  .wx-mac{top:16%;width:75%;left:4.5%}
  .wx:nth-child(even) .wx-mac{right:4.5%}
  .wx-pho{width:26%;right:4.5%;bottom:5%}
  .wx:nth-child(even) .wx-pho{left:4.5%}
  .wx-prog{bottom:4.5%}
  .wx-lead{font-size:13.5px}
  .wx-acts .btn-line{flex:1 1 auto;justify-content:center}
}

/* ---------------------------------------------------------------- スクロールに合わせた奥行き（対応ブラウザのみ） */
@supports (animation-timeline: view()){
  .wx-pho .wx-scr{will-change:auto}
  .wx-pho{animation:wx-par-p linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .wx-mac{animation:wx-par-m linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes wx-par-p{from{translate:0 11%}to{translate:0 -11%}}
  @keyframes wx-par-m{from{translate:0 2.4%}to{translate:0 -2.4%}}
}

/* ---------------------------------------------------------------- NIGHT */
.is-night.is-dark .wx-stage{background:#271e1b}
.is-night.is-dark .wx-stage.is-in .wx-amb{opacity:.5}
.is-night.is-dark .wx-mac{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 .8cqw 1.6cqw -.6cqw rgba(0,0,0,.5),0 3.4cqw 6cqw -2.4cqw rgba(0,0,0,.7)}
.is-night.is-dark .wx-bar{background:#2f2522;border-bottom-color:rgba(255,255,255,.06)}
.is-night.is-dark .wx-bar i{background:#5a4f4a}
.is-night.is-dark .wx-url{background:#3a2f2b;color:#b5aea9}
.is-night.is-dark .wx-url::before{background:#8a8079}
.is-night.is-dark .wx-phi{background:#0f0b0a;box-shadow:inset 0 0 0 .18cqw #3d3330,0 0 0 1px rgba(255,255,255,.06),0 1cqw 2cqw -.8cqw rgba(0,0,0,.6),0 4cqw 7cqw -2.6cqw rgba(0,0,0,.8)}
.is-night.is-dark .wx-phi::before{background:#0f0b0a}
.is-night.is-dark .wx-scr img{filter:brightness(.93)}
.is-night.is-dark .wx-scr img.is-out{filter:brightness(.5)}
.is-night.is-dark .wx-grid{opacity:.35}

/* ---------------------------------------------------------------- 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  .wx-mac,.wx-pho,.wx-amb{opacity:1;transform:none;transition:none;animation:none}
  .wx-stage .wx-amb{opacity:.34}
  .wx-rig,.wx-phi{transform:none!important;transition:none}
  .wx-scr img{transition:none}
  .wx-prog{display:none}
  .wx-info.rv > *,.wx-no b span{opacity:1!important;transform:none!important}
}

/* 画面に載っている間は、サイト共通のスポットライトとネオンの残像を消す（VIEW の丸をくっきり見せる） */
.wx-hovering .cursor-spot,.wx-hovering .neon-trail{opacity:0!important;transition-duration:.25s}

/* 見出し・ボタンに載せたときも、画面がわずかに前へ出る（どれを見ているかを画面側でも示す） */
.wx:has(.wx-info a:hover) .wx-rig{transform:perspective(1600px) scale(1.022)}
.wx:has(.wx-info a:hover) .wx-stage.is-in .wx-amb{opacity:.5}

/* ---------------------------------------------------------------- 実績詳細：SCREENS（一覧と同じ画面を大きく） */
.wx-solo{border:0!important;margin-top:clamp(8px,1.5vw,16px)}
.wx-solo .wx-stage{aspect-ratio:16/9;cursor:default}
.wx.wx-solo .wx-mac{left:8%;right:auto;top:11%;width:68%}
.wx.wx-solo .wx-pho{right:8%;left:auto;bottom:7%;width:18%}
.wx.wx-solo .wx-prog,.wx.wx-solo .wx-kind{left:8%;right:auto}
@media (max-width:560px){
  .wx-solo .wx-stage{aspect-ratio:16/12.6}
  .wx.wx-solo .wx-mac{left:4.5%;top:16%;width:75%}
  .wx.wx-solo .wx-pho{right:4.5%;bottom:5%;width:26%}
  .wx.wx-solo .wx-prog,.wx.wx-solo .wx-kind{left:4.5%}
}

/* v65：同じ実績の別ページは、画面を分けて置く（GP15：LP／ギャラリーページ）。見出しは番号＋英字＋和文の1行だけ */
.wd-scr + .wd-scr{margin-top:clamp(56px,8vw,104px)}
.wd-scr-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0;padding-bottom:12px;border-bottom:1px solid var(--line-c)}
.wd-scr-cap .n{font:600 11px/1 var(--font-en);letter-spacing:.2em;color:var(--fg-muted)}
.wd-scr-cap b{font:700 clamp(14px,1.5vw,17px)/1 var(--font-en);letter-spacing:.24em;color:var(--fg)}
.wd-scr-cap .jp{font-size:12px;line-height:1;letter-spacing:.08em;color:var(--fg-muted)}
.wd-scr .wx-solo{margin-top:clamp(14px,2vw,22px)}

/* ---------------------------------------------------------------- 一覧 ⇄ 詳細：画面の面がそのまま移り変わる（View Transitions） */
@view-transition{navigation:auto}
html.wx-noload #loader{display:none}
.site-header{view-transition-name:wx-header}
::view-transition-group(wx-kv){animation-duration:.8s;animation-timing-function:cubic-bezier(.22,1,.36,1);z-index:50}
::view-transition-old(wx-kv),::view-transition-new(wx-kv){height:100%;width:100%;object-fit:cover;animation-duration:.5s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s}
::view-transition-group(wx-header){z-index:60}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media (max-width:560px){.wx-sum{display:none}}

/* v64：別ページの画面に送られたとき、URL 表示がふわっと入れ替わる */
.wx-url{transition:opacity .26s ease}
.wx-url.is-swap{opacity:0}