/* =====================================================================
   Projects page: six ways to show the selected projects — html[data-wkd="1"〜"6"] (統合プレビュー5, 2026-10-14)
   Loaded only by works-v1〜v6.html. wk.js does the measuring and the motion.
   ===================================================================== */
.wk { --wk-ease: cubic-bezier(.7, 0, .2, 1); position: relative; }
.wk .wk-it { color: inherit; text-decoration: none; }
.wk .fig { display: block; overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.wk .fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk .no, .wk .yr { font: 400 12px/1.6 var(--f-mono); color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.wk .mt, .wk .sv, .wk .tp { font-size: 14px; line-height: 1.7; color: var(--muted); }
.wk .nm { font-weight: 500; letter-spacing: .06em; line-height: 1.4; }
.wk [hidden] { display: none !important; }
.wk-it:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }

/* ================= 1 インデックス：一覧＋カーソルに付いてくる写真 ================= */
.wk1 { border-top: 1px solid var(--line-strong); }
.wk1-hd, .wk1 .wk-it { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 200px) 64px 20px; column-gap: 16px; align-items: baseline; }
.wk1-hd > * { grid-area: auto !important; font: inherit !important; color: inherit !important; }
.wk1-hd { padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.wk1 .wk-it { position: relative; grid-template-areas: "no nm sv yr i" "no tp sv yr i"; row-gap: 2px; padding: 24px 0 25px; border-bottom: 1px solid var(--line); transition: opacity .45s var(--ease); }
.wk1 .wk-it::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--wk-ease); }
.wk1 .no { grid-area: no; } .wk1 .nm { grid-area: nm; } .wk1 .tp { grid-area: tp; font-size: 12px; } .wk1 .sv { grid-area: sv; } .wk1 .yr { grid-area: yr; } .wk1 .wk-it > i { grid-area: i; align-self: center; }
.wk1 .nm { font-size: 28px; transition: transform .7s var(--ease), color .3s; }
.wk1 .wk-it > i { font-style: normal; color: var(--muted); transition: transform .5s var(--ease), color .3s; }
.wk1 .mt, .wk1 .fig { display: none; }
.wk1:hover .wk-it:not(:hover) { opacity: .3; }
.wk1 .wk-it:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.wk1 .wk-it:is(:hover, :focus-visible) .nm { transform: translateX(16px); }
.wk1 .wk-it:is(:hover, :focus-visible) > i { transform: translateX(6px); color: var(--blue); }
/* the rows come in: the rule draws, the words rise */
.wk1 .wk-it.wk-rv::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); }
.wk1 .wk-rv > :is(.no, .nm, .tp, .sv, .yr, i, .mt, .fig) { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.wk1 .wk-rv.is-in > :is(.no, .nm, .tp, .sv, .yr, i, .mt, .fig) { opacity: 1; transform: none; }
.wk1 .wk-rv.is-in:is(:hover, :focus-visible) .nm { transform: translateX(16px); }
.wk1 .wk-rv.is-in:is(:hover, :focus-visible) > i { transform: translateX(6px); }
/* the photograph that follows the pointer */
.wk1-pv { position: fixed; left: 0; top: 0; z-index: 15; width: 360px; pointer-events: none; opacity: 0; transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--pr, 0deg)); transition: opacity .35s; display: none; }
.wk1-pv.on { opacity: 1; }
.wk1-pv-in { position: relative; aspect-ratio: 3 / 2; overflow: hidden; clip-path: inset(var(--pc, 50%) 0 var(--pc, 50%) 0); transition: clip-path .7s var(--wk-ease); background: #111; }
.wk1-pv.on .wk1-pv-in { --pc: 0%; }
.wk1-pv-i { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .75s var(--wk-ease); }
.wk1-pv-i img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 1.2s var(--ease); }
.wk1-pv-i.on { clip-path: inset(0 0 0 0); z-index: 2; }
.wk1-pv-i.was { clip-path: inset(0 0 0 0); z-index: 1; }
.wk1-pv-i.on img { transform: scale(1); }
.wk1-pv-c { display: flex; justify-content: space-between; margin: 10px 0 0; font: 400 12px/1 var(--f-mono); color: var(--fg); letter-spacing: .04em; }
.wk1-pv-c b { font-weight: 400; color: var(--blue); }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) { .wk1-pv { display: block; } }
@media (max-width: 1180px) {
  .wk1-hd, .wk1 .wk-it { grid-template-columns: 48px minmax(0, 1fr) 64px 20px; }
  .wk1 .wk-it { grid-template-areas: "no nm yr i" "no tp yr i"; }
  .wk1 .sv, .wk1-hd .sv { display: none; }
  .wk1 .nm { font-size: 24px; }
}
@media (max-width: 900px) {
  .wk1-hd { display: none; }
  .wk1 .wk-it { grid-template-columns: 112px minmax(0, 1fr) 1em; grid-template-areas: "fig no i" "fig nm i" "fig mt i"; column-gap: 16px; row-gap: 4px; align-items: start; padding: 16px 0; }
  .wk1 .fig { display: block; grid-area: fig; aspect-ratio: 4 / 3; }
  .wk1 .nm { font-size: 18px; }
  .wk1 .mt { display: block; grid-area: mt; font-size: 12px; }
  .wk1 :is(.tp, .yr) { display: none; }
  .wk1 .wk-rv > .fig { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--wk-ease) var(--d, 0s), opacity .3s var(--d, 0s); }
  .wk1 .wk-rv.is-in > .fig { clip-path: inset(0); }
}

/* ================= 2 スプリット：左に止まる写真、右の一覧に合わせて入れ替わる ================= */
.wk2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; border-top: 1px solid var(--line-strong); }
.wk2-st { position: sticky; top: calc(var(--wk-top, 64px) + 32px); margin-top: 32px; }
.wk2-ims { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--wk-top, 64px) - 120px); width: 100%; overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.wk2-i { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.wk2-i img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.wk2-i.on { clip-path: inset(0); z-index: 2; transition: clip-path 1s var(--wk-ease); }
.wk2-i.on.up { animation: wk2-down 1s var(--wk-ease); }
@keyframes wk2-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.wk2-i.on img { transform: scale(1); transition: transform 1.6s var(--ease); }
.wk2-i.was { clip-path: inset(0); z-index: 1; }
.wk2-i.was img { transform: scale(1); }
.wk2-cap { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; font: 400 12px/1 var(--f-mono); color: var(--muted); }
.wk2-roll { display: inline-block; height: 1.25em; overflow: hidden; font: 500 20px/1.25 var(--f-mono); color: var(--fg); }
.wk2-roll-in { display: flex; flex-direction: column; transform: translateY(calc(var(--k, 0) * -1.25em)); transition: transform .8s var(--wk-ease); }
.wk2-nm { margin-left: auto; font: 500 14px/1.4 var(--f-jp, inherit); letter-spacing: .06em; color: var(--fg); }
.wk2 .wk-it { position: relative; display: grid; gap: 8px; padding: 40px 0 40px 32px; border-bottom: 1px solid var(--line); opacity: .32; transition: opacity .6s var(--ease); }
.wk2 .wk-it::before { content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; width: 1px; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--wk-ease); }
.wk2 .wk-it.on { opacity: 1; }
.wk2 .wk-it.on::before { transform: scaleY(1); }
.wk2 .wk-it.on .no { color: var(--blue); }
.wk2 .nm { font-size: 28px; transition: transform .7s var(--ease); }
.wk2 .go { font-size: 14px; margin-top: 8px; }
.wk2 .wk-it:is(:hover, :focus-visible) .nm { transform: translateX(8px); }
.wk2 .fig { display: none; }
@media (max-width: 1180px) { .wk2 { column-gap: 32px; } .wk2 .nm { font-size: 24px; } .wk2 .wk-it { padding-block: 32px; padding-left: 24px; } }
@media (max-width: 900px) {
  .wk2 { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .wk2-st { top: var(--wk-top, 64px); z-index: 3; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .wk2-ims { aspect-ratio: 16 / 9; max-height: none; }
  .wk2-cap { margin-top: 10px; }
  .wk2-roll { font-size: 16px; }
  .wk2 .wk-it { padding: 24px 0 24px 20px; }
  .wk2 .wk-it::before { top: 24px; bottom: 24px; }
  .wk2 .nm { font-size: 20px; }
  .wk2 .mt { font-size: 12px; }
}

/* ================= 3 ギャラリー：縦のスクロールで横に流れる ================= */
.wk3 { --ch: min(52vh, 440px); }
.wk3-pin { position: sticky; top: var(--wk-top, 64px); height: calc(100vh - var(--wk-top, 64px)); display: flex; flex-direction: column; justify-content: center; gap: 40px; clip-path: inset(-40px -100vw -40px 0); }
.wk3-track { display: flex; align-items: flex-start; gap: 48px; width: max-content; transform: translate3d(calc(var(--x, 0) * -1px), 0, 0) skewX(var(--sk, 0deg)); will-change: transform; }
.wk3 .wk-it { flex: none; display: grid; gap: 14px; width: calc(var(--ar) * var(--ch)); }
.wk3 .wk-it:nth-child(even) { width: calc(var(--ar) * var(--ch) * .78); margin-top: calc(var(--ch) * .14); }
.wk3 .fig { aspect-ratio: var(--ar); position: relative; }
.wk3 .fig img { position: absolute; left: -8%; width: 116%; max-width: none; transform: translate3d(calc(var(--p, 0) * -6%), 0, 0) scale(var(--zs, 1)); transition: scale .9s var(--ease); }
.wk3 .wk-it:is(:hover, :focus-visible) .fig img { --zs: 1.06; }
.wk3 .cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.wk3 .no { grid-row: span 2; }
.wk3 .nm { font-size: 20px; }
.wk3 .mt { font-size: 12px; }
.wk3-bar { display: flex; align-items: center; gap: 24px; font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .06em; }
.wk3-n b { font-weight: 500; color: var(--fg); }
.wk3-line { position: relative; flex: 1; height: 1px; background: var(--line); max-width: 480px; }
.wk3-line i { position: absolute; inset: 0; background: var(--fg); transform: scaleX(var(--prog, 0)); transform-origin: left; }
.wk3-hint .jl { margin-left: 6px; }
@media (max-width: 900px) {
  .wk3 { height: auto !important; }
  .wk3-pin { position: relative; top: 0; height: auto; clip-path: none; gap: 24px; }
  .wk3-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 4px; gap: 16px; align-items: flex-start; }
  .wk3-track::-webkit-scrollbar { display: none; }
  .wk3 .wk-it, .wk3 .wk-it:nth-child(even) { width: 78vw; margin-top: 0; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .wk3 .fig { aspect-ratio: 4 / 3; }
  .wk3 .fig img { left: 0; width: 100%; transform: none; }
  .wk3 .nm { font-size: 18px; }
  .wk3-hint { display: none; }
}

/* ================= 4 エディトリアル：雑誌の誌面のように大小を組む ================= */
.wk4 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 104px; padding-top: 56px; border-top: 1px solid var(--line-strong); }
.wk4 .wk-it { display: grid; gap: 16px; align-content: start; transform: translate3d(0, calc(var(--py, 0) * 1px), 0); }
.wk4 .wk-it[data-s="0"] { grid-column: 1 / span 8; }
.wk4 .wk-it[data-s="1"] { grid-column: 10 / span 3; margin-top: 30%; }
.wk4 .wk-it[data-s="2"] { grid-column: 2 / span 5; }
.wk4 .wk-it[data-s="3"] { grid-column: 8 / span 5; margin-top: 160px; }
.wk4 .wk-it[data-s="4"] { grid-column: 1 / span 4; margin-top: 80px; }
.wk4 .wk-it[data-s="5"] { grid-column: 6 / span 7; }
.wk4 .fig { aspect-ratio: var(--ar); }
.wk4 .wk-it[data-s="0"] .fig, .wk4 .wk-it[data-s="5"] .fig { aspect-ratio: 16 / 10; }
.wk4 .wk-it[data-s="1"] .fig, .wk4 .wk-it[data-s="4"] .fig { aspect-ratio: 4 / 5; }
.wk4 .fig img { transform: scale(var(--zs, 1)); transition: transform 1.2s var(--ease); }
.wk4 .wk-it:is(:hover, :focus-visible) .fig img { --zs: 1.05; }
.wk4 .cap { display: grid; gap: 4px; }
.wk4 .ln { display: flex; gap: 12px; align-items: baseline; overflow: hidden; }
.wk4 .ln > * { display: inline-block; }
.wk4 .nm { position: relative; font-size: 24px; }
.wk4 .nm::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--wk-ease); }
.wk4 .wk-it:is(:hover, :focus-visible) .nm::after { transform: scaleX(1); }
.wk4 .tp, .wk4 .sv { font-size: 12px; }
.wk4 .wk-it[data-s="0"] .nm, .wk4 .wk-it[data-s="5"] .nm { font-size: 32px; }
/* the photographs open from below, the captions rise line by line */
.wk4 .wk-rv .fig { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--wk-ease); }
.wk4 .wk-rv .fig img { transform: scale(1.3); }
.wk4 .wk-rv.is-in .fig { clip-path: inset(0); }
.wk4 .wk-rv.is-in .fig img { transform: scale(var(--zs, 1)); transition: transform 1.8s var(--ease); }
.wk4 .wk-rv .ln > * { transform: translateY(110%); transition: transform 1s var(--ease); }
.wk4 .wk-rv .ln:nth-child(2) > * { transition-delay: .08s; }
.wk4 .wk-rv .ln:nth-child(3) > * { transition-delay: .16s; }
.wk4 .wk-rv.is-in .ln > * { transform: none; }
.wk4 .wk-rv .cap { transition-delay: .4s; }
@media (max-width: 1180px) { .wk4 { row-gap: 80px; column-gap: 16px; } .wk4 .wk-it[data-s="0"] .nm, .wk4 .wk-it[data-s="5"] .nm { font-size: 28px; } .wk4 .nm { font-size: 20px; } .wk4 .wk-it[data-s="1"] { grid-column: 9 / span 4; margin-top: 20%; } }
@media (max-width: 900px) {
  .wk4 { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 56px; column-gap: 12px; padding-top: 32px; }
  .wk4 .wk-it[data-s] { grid-column: 1 / -1; margin-top: 0; }
  .wk4 .wk-it[data-s="1"], .wk4 .wk-it[data-s="4"] { grid-column: 2 / -1; }
  .wk4 .wk-it[data-s="2"] { grid-column: 1 / span 5; }
  .wk4 .wk-it[data-s="3"] { grid-column: 2 / -1; }
  .wk4 .wk-it[data-s="1"] .fig, .wk4 .wk-it[data-s="4"] .fig { aspect-ratio: 4 / 3; }
  .wk4 .nm, .wk4 .wk-it[data-s="0"] .nm, .wk4 .wk-it[data-s="5"] .nm { font-size: 20px; }
}

/* ================= 5 図面シート：罫線の枠に揃え、絞り込むと並び替わる ================= */
.wk5-hd { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 16px; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.wk5-hd b { font: 500 32px/1 var(--f-disp); color: var(--fg); margin-right: 4px; font-variant-numeric: tabular-nums; }
.wk5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.wk5 .wk-it { position: relative; display: grid; align-content: start; gap: 12px; padding: 16px 20px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .4s var(--ease); }
.wk5 .wk-it:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.wk5 .top { display: flex; justify-content: space-between; }
.wk5 .fig { position: relative; aspect-ratio: 4 / 3; overflow: visible; background: none; }
.wk5 .fig img { transition: transform 1s var(--ease), clip-path .8s var(--wk-ease); clip-path: inset(0); }
.wk5 .wk-it:is(:hover, :focus-visible) .fig img { clip-path: inset(8px); }
.wk5 .tm { position: absolute; inset: 0; pointer-events: none; }
.wk5 .tm i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--blue); opacity: 0; transition: opacity .3s, transform .6s var(--ease); }
.wk5 .tm i:nth-child(1) { left: -6px; top: -6px; border-left-width: 1px; border-top-width: 1px; transform: translate(-8px, -8px); }
.wk5 .tm i:nth-child(2) { right: -6px; top: -6px; border-right-width: 1px; border-top-width: 1px; transform: translate(8px, -8px); }
.wk5 .tm i:nth-child(3) { left: -6px; bottom: -6px; border-left-width: 1px; border-bottom-width: 1px; transform: translate(-8px, 8px); }
.wk5 .tm i:nth-child(4) { right: -6px; bottom: -6px; border-right-width: 1px; border-bottom-width: 1px; transform: translate(8px, 8px); }
.wk5 .wk-it:is(:hover, :focus-visible) .tm i { opacity: 1; transform: none; }
/* the corner marks and the arrow take the light's gradient (the same blue → teal → violet as the menu) */
.wk5 { --wk-light: linear-gradient(135deg, #2448e6, #1fb5a8 55%, #7b5cff); }
.wk5 .tm i { border-image: var(--wk-light) 1; }
.wk5 .ar { background: linear-gradient(90deg, #2448e6, #1fb5a8, #7b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk5 .nm { font-size: 18px; }
.wk5 .sv { font-size: 12px; line-height: 1.6; }
.wk5 .ar { position: absolute; right: 20px; bottom: 22px; font-style: normal; color: var(--blue); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .5s var(--ease); }
.wk5 .wk-it:is(:hover, :focus-visible) .ar { opacity: 1; transform: none; }
.wk5 .wk-rv { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), background-color .4s var(--ease); }
.wk5 .wk-rv.is-in { opacity: 1; transform: none; }
.wk5 .wk-rv .fig img { clip-path: inset(0 0 100% 0); }
.wk5 .wk-rv.is-in .fig img { clip-path: inset(0); transition: clip-path 1.1s var(--wk-ease) calc(var(--d, 0s) + .15s), transform 1s var(--ease); }
.wk5 .wk-rv.is-in:is(:hover, :focus-visible) .fig img { clip-path: inset(8px); transition: clip-path .8s var(--wk-ease); }
@media (max-width: 1180px) { .wk5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .wk5 .wk-it { padding: 12px 12px 16px; gap: 8px; }
  .wk5 .nm { font-size: 14px; }
  .wk5 .ar { display: none; }
  .wk5-hd b { font-size: 24px; }
  .wk5-sheet { display: none; }
}

/* ================= 6 スタック：注目の4件が重なり、残りは一覧で ================= */
.wk6-stack { display: grid; gap: 24px; padding-bottom: 8px; }
.wk6-card { position: sticky; top: calc(var(--wk-top, 64px) + 24px + var(--k, 0) * 14px); display: block; height: min(72vh, 640px); overflow: hidden; color: #fff; transform: scale(var(--sc, 1)); transform-origin: 50% 0; }
.wk6-card .fig { position: absolute; inset: 0; }
.wk6-card .fig img { transform: scale(calc(1.12 - var(--en, 1) * .12)); filter: brightness(calc(1 - var(--dim, 0))); transition: filter .2s; }
.wk6-card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62)); }
.wk6-card .top { position: absolute; left: 32px; right: 32px; top: 28px; display: flex; justify-content: space-between; font: 400 12px/1 var(--f-mono); letter-spacing: .08em; }
.wk6-card .top .no, .wk6-card .top .of { color: #fff; }
.wk6-card .top .tp { font-size: 12px; color: rgba(255, 255, 255, .86); }
.wk6-card .bt { position: absolute; left: 32px; right: 32px; bottom: 32px; display: grid; gap: 8px; }
.wk6-card .nm { font-size: 40px; line-height: 1.3; }
.wk6-card .mt { font-size: 14px; color: rgba(255, 255, 255, .86); }
.wk6-card .go { justify-self: start; margin-top: 12px; font-size: 14px; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--wk-ease); }
.wk6-card:is(:hover, :focus-visible) .go { background-size: 30% 1px; }
.wk6-card .bt > * { transform: translateY(calc((1 - var(--en, 1)) * 40px)); opacity: var(--en, 1); }
.wk6-k { display: flex; align-items: baseline; gap: 12px; margin: 96px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.wk6-k .jl { font-size: 12px; color: var(--muted); }
.wk6-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.wk6-row { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) 1em; grid-template-areas: "fig no i" "fig nm i" "fig mt i"; column-gap: 16px; row-gap: 2px; align-content: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.wk6-row .fig { grid-area: fig; aspect-ratio: 4 / 3; }
.wk6-row .fig img { transition: transform 1s var(--ease); }
.wk6-row:is(:hover, :focus-visible) .fig img { transform: scale(1.08); }
.wk6-row .no { grid-area: no; } .wk6-row .nm { grid-area: nm; font-size: 18px; } .wk6-row .mt { grid-area: mt; font-size: 12px; }
.wk6-row > i { grid-area: i; align-self: center; font-style: normal; color: var(--muted); transition: transform .5s var(--ease), color .3s; }
.wk6-row:is(:hover, :focus-visible) > i { transform: translateX(4px); color: var(--blue); }
.wk6-row.wk-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.wk6-row.wk-rv.is-in { opacity: 1; transform: none; }
@media (max-width: 1180px) { .wk6-list { grid-template-columns: minmax(0, 1fr); } .wk6-card .nm { font-size: 32px; } }
@media (max-width: 900px) {
  .wk6-card { height: min(64svh, 520px); top: calc(var(--wk-top, 64px) + 12px + var(--k, 0) * 10px); }
  .wk6-card .top { left: 20px; right: 20px; top: 20px; }
  .wk6-card .bt { left: 20px; right: 20px; bottom: 24px; }
  .wk6-card .nm { font-size: 28px; }
  .wk6-card .mt { font-size: 12px; }
  .wk6-k { margin-top: 64px; }
  .wk6-row { grid-template-columns: 96px minmax(0, 1fr) 1em; padding: 16px 0; }
  .wk6-row .nm { font-size: 16px; }
}

/* ================= 7 図面シート・製図：罫線が引かれ、写真が刷られ、番号が打たれる ================= */
.wk7 { border-top: 0; border-left: 0; }
.wk7::before, .wk7::after { content: ""; position: absolute; background: var(--line-strong); pointer-events: none; }
.wk7::before { left: 0; right: 0; top: 0; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--wk-ease); }
.wk7::after { left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--wk-ease) .1s; }
.wk7.wk-drawn::before { transform: scaleX(1); } .wk7.wk-drawn::after { transform: scaleY(1); }
.wk7 .wk-it { border: 0; }
.wk7 .wk-it::before, .wk7 .wk-it::after { content: ""; position: absolute; background: var(--line); pointer-events: none; }
.wk7 .wk-it::before { left: 0; right: 0; bottom: 0; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--wk-ease) calc(var(--dg, 0) * .08s); }
.wk7 .wk-it::after { right: 0; top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; transition: transform 1s var(--wk-ease) calc(var(--dg, 0) * .08s + .1s); }
.wk7 .wk-rv, .wk7 .wk-rv.is-in { opacity: 1; transform: none; }
.wk7 .wk-rv:not(.is-in) .top { opacity: 0; }
.wk7 .wk-it.is-in::before { transform: scaleX(1); } .wk7 .wk-it.is-in::after { transform: scaleY(1); }
/* the photograph is plotted from its top-left corner, a blue line sweeps down after it */
.wk7 .wk-rv .fig img { clip-path: inset(0 100% 100% 0); }
.wk7 .wk-rv.is-in .fig img { clip-path: inset(0); transition: clip-path 1.3s var(--wk-ease) calc(var(--dg, 0) * .08s + .25s), transform 1s var(--ease); }
.wk7 .wk-rv.is-in:is(:hover, :focus-visible) .fig img { clip-path: inset(8px); transition: clip-path .8s var(--wk-ease), transform 1s var(--ease); }
.wk7 .fig::after { content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 1px; background: var(--blue); opacity: 0; pointer-events: none; }
.wk7 .wk-rv.is-in .fig::after { animation: wk7-scan 1.3s var(--wk-ease) calc(var(--dg, 0) * .08s + .25s) both; }
@keyframes wk7-scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.wk7 .wk-rv :is(.nm, .sv) { clip-path: inset(0 0 100% 0); transform: translateY(12px); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.wk7 .wk-rv.is-in :is(.nm, .sv) { clip-path: inset(-4px); transform: none; transition-delay: calc(var(--dg, 0) * .08s + .7s); }
.wk7 .wk-rv.is-in .sv { transition-delay: calc(var(--dg, 0) * .08s + .8s); }
/* the CAD cross that follows the pointer over a photograph, with its position in the photograph's own pixels */
.wk7-x { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: hidden; }
.wk7-x i { position: absolute; background: linear-gradient(90deg, #2448e6, #1fb5a8, #7b5cff); }
.wk7-x .v { background: linear-gradient(180deg, #2448e6, #1fb5a8, #7b5cff); }
.wk7-x .h { left: 0; right: 0; top: var(--my, 50%); height: 1px; }
.wk7-x .v { top: 0; bottom: 0; left: var(--mx, 50%); width: 1px; }
.wk7-x em { position: absolute; left: calc(var(--mx, 50%) + 8px); top: calc(var(--my, 50%) + 6px); font: 400 12px/1 var(--f-mono); font-style: normal; color: #fff; background: linear-gradient(90deg, #2448e6, #1fb5a8 60%, #7b5cff); padding: 3px 5px; white-space: nowrap; }
.wk7-x em.fl { translate: calc(-100% - 16px) 0; } .wk7-x em.up { margin-top: -28px; } .wk7-x em.fl.up { translate: calc(-100% - 16px) 0; }
.wk7 .wk-it:hover .wk7-x { opacity: 1; }
.wk7 .wk-it:hover .fig img { clip-path: inset(0) !important; }
@media (hover: none) { .wk7-x { display: none; } }

/* ================= 8 図面シート・立体とプレビュー：セルが起き上がり、写真が傾き、クリックで大きく開く ================= */
.wk8 .wk-it { perspective: 1000px; }
.wk8 .wk-rv, .wk8 .wk-rv.is-in { opacity: 1; transform: none; }
.wk8 .wk-rv > * { opacity: 0; transform: rotateX(-72deg) translateY(28px); transform-origin: 50% 0; transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.wk8 .wk-rv.is-in > * { opacity: 1; transform: none; transition-delay: calc(var(--dg, 0) * .07s); }
.wk8 .wk-rv.is-in > .fig { transition-delay: calc(var(--dg, 0) * .07s + .06s); }
.wk8 .wk-rv.is-in > :is(.nm, .sv) { transition-delay: calc(var(--dg, 0) * .07s + .14s); }
.wk8 .fig { overflow: hidden; transform-style: preserve-3d; will-change: rotate; }
.wk8 .fig img { scale: 1.08; transition: transform 1s var(--ease), clip-path .8s var(--wk-ease); }
.wk8 .wk-rv .fig img, .wk8 .wk-rv.is-in .fig img { clip-path: none; }
.wk8 .wk-it:is(:hover, :focus-visible) .fig img { clip-path: none; }
.wk8 .fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; }
.wk8 .wk-it:hover .fig::after { opacity: 1; }
.wk8 .tm { z-index: 2; }
.wk8 .wk-it { cursor: zoom-in; }
.wk-ghost { transition: none !important; }
/* the preview sheet */
html.wk8-lock { overflow: hidden; }
.wk8-qv { position: fixed; inset: 0; z-index: 112; }
.wk8-qv-bg { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity .5s; }
.wk8-qv.on .wk8-qv-bg { opacity: 1; }
.wk8-qv-in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top" "fig tx"; column-gap: 48px; row-gap: 24px; padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutter) 40px; pointer-events: none; }
.wk8-qv-in > * { pointer-events: auto; }
.wk8-qv-top { grid-area: top; display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .06em; }
.wk8-qv-top b { font: 500 20px/1 var(--f-mono); color: var(--fg); }
.wk8-qv-x { display: inline-flex; align-items: baseline; gap: 8px; background: none; border: 0; padding: 8px 0; color: var(--fg); cursor: pointer; font: 500 14px/1 var(--f-disp); letter-spacing: .04em; }
.wk8-qv-x .jl { font-size: 12px; color: var(--muted); }
.wk8-qv-x i { font-style: normal; font-size: 18px; }
.wk8-qv-fig { grid-area: fig; align-self: center; justify-self: center; width: 100%; max-height: 100%; max-width: calc((100vh - 200px) * 1.6); overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, transparent); visibility: hidden; }
.wk8-qv-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk8-qv.shown .wk8-qv-fig { visibility: visible; }
.wk8-qv-tx { grid-area: tx; align-self: end; display: grid; gap: 12px; padding-bottom: 8px; }
.wk8-qv-tx > * { margin: 0; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .8s var(--ease); }
.wk8-qv.on .wk8-qv-tx > * { opacity: 1; transform: none; }
.wk8-qv.on .wk8-qv-tx > :nth-child(2) { transition-delay: .32s; } .wk8-qv.on .wk8-qv-tx > :nth-child(1) { transition-delay: .26s; }
.wk8-qv.on .wk8-qv-tx > :nth-child(3) { transition-delay: .38s; } .wk8-qv.on .wk8-qv-tx > :nth-child(4) { transition-delay: .44s; } .wk8-qv.on .wk8-qv-tx > :nth-child(5) { transition-delay: .5s; }
.wk8-qv-top { opacity: 0; transition: opacity .5s .2s; } .wk8-qv.on .wk8-qv-top { opacity: 1; }
.wk8-qv-tx .no { font: 400 12px/1 var(--f-mono); color: var(--blue); letter-spacing: .06em; }
.wk8-qv-tx .nm { font-size: 32px; font-weight: 500; letter-spacing: .06em; line-height: 1.4; }
.wk8-qv-tx .sv { font-size: 14px; color: var(--muted); line-height: 1.8; }
.wk8-qv-tx .go { justify-self: start; margin-top: 8px; font-size: 16px; color: inherit; text-decoration: none; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--wk-ease); }
.wk8-qv-tx .go:hover { background-size: 30% 1px; }
.wk8-qv-nav { display: flex; gap: 24px; margin-top: 32px !important; padding-top: 16px; border-top: 1px solid var(--line); }
.wk8-qv-nav button { background: none; border: 0; padding: 6px 0; color: var(--fg); cursor: pointer; font: 500 14px/1 var(--f-disp); }
.wk8-qv-nav button:hover i { color: var(--blue); }
.wk8-qv :is(button, a):focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
/* stepping through: the next photograph wipes across, the words slide in */
.wk8-qv.swap-r .wk8-qv-fig img { animation: wk8-in-r .8s var(--wk-ease); } .wk8-qv.swap-l .wk8-qv-fig img { animation: wk8-in-l .8s var(--wk-ease); }
@keyframes wk8-in-r { from { clip-path: inset(0 0 0 100%); scale: 1.12; } to { clip-path: inset(0); scale: 1; } }
@keyframes wk8-in-l { from { clip-path: inset(0 100% 0 0); scale: 1.12; } to { clip-path: inset(0); scale: 1; } }
.wk8-qv.swap-r .wk8-qv-tx > :not(.wk8-qv-nav), .wk8-qv.swap-l .wk8-qv-tx > :not(.wk8-qv-nav) { animation: wk8-tx .7s var(--ease) both; }
.wk8-qv.swap-r .wk8-qv-tx > .nm, .wk8-qv.swap-l .wk8-qv-tx > .nm { animation-delay: .05s; } .wk8-qv-tx > .sv { animation-delay: .1s; } .wk8-qv-tx > .go { animation-delay: .15s; }
@keyframes wk8-tx { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.wk8-qv.leaving .wk8-qv-fig { visibility: hidden; }
.wk8-fly { position: fixed; z-index: 113; background: center / cover no-repeat; pointer-events: none; }
@media (max-width: 900px) {
  .wk8-qv-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top" "fig" "tx"; row-gap: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  .wk8-qv-fig { max-width: none; align-self: start; }
  .wk8-qv-tx { align-self: start; }
  .wk8-qv-tx .nm { font-size: 24px; }
  .wk8-qv-nav { margin-top: 16px !important; justify-content: space-between; }
  .wk8 .wk-it { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .wk *, .wk *::before, .wk *::after, .wk1-pv, .wk1-pv * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
  .wk .wk-rv, .wk .wk-rv > *, .wk .wk-rv .fig, .wk .wk-rv .fig img, .wk .wk-rv .ln > *, .wk7 .wk-rv :is(.nm, .sv) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .wk7::before, .wk7::after, .wk7 .wk-it::before, .wk7 .wk-it::after { transform: none !important; }
  .wk8-qv *, .wk8-qv-bg { transition: none !important; animation: none !important; }
}