/* ポートフォリオ共通スタイル：モノクロ、グロテスク体の大きな見出し、12カラムのグリッドとヘアライン */
:root {
    --bg: #f3f3f0;
    --ink: #0c0c0c;
    --mute: #5c5c58;
    --line: rgba(12, 12, 12, .18);
    --pad: clamp(16px, 2.2vw, 32px);
    --gap: clamp(12px, 1.6vw, 24px);
    --f: "Inter Tight", "Noto Sans JP", "Hiragino Sans", sans-serif;
    --d-xl: clamp(64px, 10.6vw, 176px);
    --d-l: clamp(48px, 7vw, 116px);
    --d-m: clamp(28px, 3.4vw, 52px);
    --ease: cubic-bezier(.2, .7, 0, 1);
    --ease-io: cubic-bezier(.76, 0, .24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pad) + 56px); }
@media (prefers-reduced-motion: no-preference) { html.pf-ready { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.85; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, p, li, dd, td, th, figcaption { word-break: auto-phrase; line-break: strict; }

/* 大見出し（欧文） */
.pf-d { font-family: var(--f); font-weight: 500; letter-spacing: -.055em; line-height: .86; margin: 0; }
.pf-xl { font-size: var(--d-xl); }
.pf-l { font-size: var(--d-l); }
.pf-label { font-size: 14px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.pf-mute { color: var(--mute); }

/* 12カラムのグリッド */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--pad); }

/* ヘッダー：左に名前、中央に所在地、右上に固定のピル型ナビ */
.pf-top { position: absolute; inset: 0 0 auto; z-index: 20; padding-top: var(--pad); }
.pf-top__name { grid-column: 1 / 4; }
.pf-top__meta { grid-column: 4 / 9; margin: 0; padding-left: var(--gap); }
.pf-nav { position: fixed; top: var(--pad); right: var(--pad); z-index: 40; display: flex; gap: 6px; }
.pf-nav a:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg); }
.pf-nav a { padding: 7px 15px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; line-height: 1; transition: transform .6s var(--ease), scale .3s var(--ease); }

/* 行ごとに下からせり上がる見出し */
.ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.ln > span { display: block; }
.js .ln > span { transform: translateY(calc(100% + .2em)); animation: pf-up 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes pf-up { to { transform: none; } }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- トップページ ---------- */
.pf-main { position: relative; z-index: 1; }
.pf-intro { padding-top: calc(var(--pad) + 64px); }
.pf-intro__grid { row-gap: 0; }
.pf-intro__fig { grid-column: 1 / 4; grid-row: 1; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.pf-intro__fig img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05); transition: filter .8s var(--ease); }
.pf-intro__fig:hover img { filter: none; }
.pf-intro__role { grid-column: 1 / 4; grid-row: 2; align-self: end; margin: 0; padding-top: 24px; }
.pf-intro__right { grid-column: 4 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; margin-top: calc(-1 * (var(--pad) + 64px)); padding-left: var(--gap); border-left: 1px solid var(--ink); }
.pf-intro__name { font-size: var(--d-xl); }
.pf-intro__jp { margin: 18px 0 0; font-size: 15px; font-weight: 500; }
.pf-state { margin-top: clamp(56px, 9vw, 140px); align-items: end; }
.pf-state__h { grid-column: 1 / 10; line-height: 1; } /* 複数行の見出し：g・p の下端が次の行の i の点やアセンダーに重ならない行送り（.216 + .756 < 1em） */
.pf-state__h .ln:nth-child(2) { padding-left: 8.33vw; }
.pf-state__h .ln:nth-child(4) { padding-left: 16.66vw; }
.pf-state__lede { grid-column: 10 / 13; margin: 0 0 .6em; font-size: 15px; line-height: 1.9; }
.pf-state__lede strong { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }

/* セクション見出し（Work 19– / 26 のような2段組） */
.pf-sec { padding-top: clamp(96px, 14vw, 220px); }
.pf-sechead { align-items: start; margin-bottom: clamp(32px, 5vw, 72px); }
.pf-sechead .pf-d { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .12em; }
.pf-sechead small { font-size: .5em; line-height: .9; letter-spacing: -.04em; }

/* 作品リスト：ホバーで反転し、カーソルにプレビューが付いてくる */
.pf-list { margin: 0; padding: 0 var(--pad); list-style: none; border-bottom: 1px solid var(--ink); }
.pf-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 22px 0 26px; border-top: 1px solid var(--ink); }
.pf-row__no { grid-column: 1 / 2; font-size: 14px; font-weight: 600; }
.pf-row__title { grid-column: 2 / 8; font-size: var(--d-m); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.pf-row__title small { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.6; }
.pf-row__tags { grid-column: 8 / 11; font-size: 14px; font-weight: 500; line-height: 1.6; }
.pf-row__year { grid-column: 11 / 12; font-size: 14px; font-weight: 600; }
.pf-row__state { grid-column: 12 / 13; justify-self: end; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pf-row__state::after { content: " →"; }
.pf-peek { position: fixed; left: 0; top: 0; z-index: 30; width: 380px; aspect-ratio: 16 / 10; pointer-events: none; opacity: 0; translate: var(--x, -999px) var(--y, -999px); scale: .92; transition: opacity .3s var(--ease), scale .55s var(--ease); background: var(--bg); color: var(--ink); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.pf-peek img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-peek--text { display: grid; align-content: space-between; padding: 18px 20px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.pf-peek--text b { font-size: 34px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.pf-row:hover .pf-peek { opacity: 1; scale: 1; }
.pf-worknote { margin: 18px 0 0; grid-column: 2 / 9; font-size: 13px; color: var(--mute); }

/* 注目の制作物（TK168の録画） */
.pf-feature { margin-top: clamp(40px, 6vw, 88px); row-gap: 14px; }
.pf-feature__media { grid-column: 1 / 10; display: block; margin: 0; background: var(--ink); align-self: start; }
.pf-feature__media video, .pf-feature__media img { width: 100%; }
.pf-feature__side { grid-column: 10 / 13; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.pf-feature__side p { margin: 0; font-size: 14px; line-height: 1.8; }
.pf-more { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: scale .3s var(--ease); }
.pf-more::after { content: "→"; transition: transform .35s var(--ease); }
.pf-feature__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
/* 2つ目の注目作品は左右を入れ替えて、TK168 と交互に並べる */
.pf-feature + .pf-feature { margin-top: clamp(64px, 9vw, 140px); }
.pf-feature--rev .pf-feature__media { grid-column: 4 / 13; grid-row: 1; }
.pf-feature--rev .pf-feature__side { grid-column: 1 / 4; grid-row: 1; }
/* 中くらいの幅では説明の列を少し広げる（文章が長くなりすぎないように） */
@media (min-width: 861px) and (max-width: 1180px) { .pf-feature__media { grid-column: 1 / 9; } .pf-feature__side { grid-column: 9 / 13; } .pf-feature--rev .pf-feature__media { grid-column: 5 / 13; } .pf-feature--rev .pf-feature__side { grid-column: 1 / 5; } }

/* 数字 */
.pf-nums { row-gap: 36px; }
.pf-num { grid-column: span 4; padding-top: 14px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 100% 1px; }
.pf-num b { display: block; font-size: var(--d-l); font-weight: 500; letter-spacing: -.055em; line-height: .9; }
.pf-num b small { font-size: .36em; letter-spacing: -.02em; margin-left: .1em; }
.pf-num > span { display: block; margin-top: 14px; font-size: 14px; font-weight: 500; line-height: 1.6; }

/* 経歴の表（Awardsの表に相当） */
.pf-rec { padding: 0 var(--pad); }
.pf-rec__group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 12px 0 30px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.6; }
.pf-rec__group:first-child { border-top-color: var(--ink); }
.pf-rec__y { grid-column: 1 / 3; font-weight: 600; }
.pf-rec__o { grid-column: 3 / 6; }
.pf-rec__r { grid-column: 6 / 9; }
.pf-rec__d { grid-column: 9 / 13; }
.pf-skills { margin-top: clamp(56px, 8vw, 120px); row-gap: 32px; }
.pf-skill { grid-column: span 3; padding-top: 12px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 100% 1px; font-size: 14px; font-weight: 500; line-height: 1.75; }
.pf-skill h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.pf-skill ul { margin: 0; padding: 0; list-style: none; }

/* フッター */
.pf-foot { position: relative; z-index: 1; padding-top: clamp(120px, 16vw, 260px); overflow: hidden; }
.pf-foot__state { grid-column: 1 / 10; line-height: 1; }
.pf-foot__state .ln:nth-child(2) { padding-left: 8.33vw; }
.pf-foot__state .ln:nth-child(4) { padding-left: 25vw; }
.pf-foot__side { grid-column: 10 / 13; align-self: end; font-size: 14px; font-weight: 500; line-height: 1.7; }
.pf-foot__side p { margin: 0 0 18px; }
.pf-clock { font-variant-numeric: tabular-nums; }
.pf-contact { margin-top: 64px; row-gap: 12px; align-items: end; }
.pf-contact p { grid-column: 1 / 7; margin: 0; font-size: 15px; font-weight: 500; }
.pf-contact nav { grid-column: 7 / 13; justify-self: end; display: flex; gap: 8px; }
.pf-circle { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .3s var(--ease), color .3s var(--ease), transform .6s var(--ease), scale .3s var(--ease); }
button.pf-circle { font-family: inherit; background: transparent; color: inherit; cursor: pointer; }
.pf-play { display: none; min-width: 96px; }
.js .pf-play { display: grid; }
.pf-mark { margin: clamp(56px, 8vw, 120px) 0 0; padding: 0; font-size: 22vw; font-weight: 500; letter-spacing: -.065em; line-height: .78; white-space: nowrap; text-align: center; overflow: hidden; padding-top: .06em; }
.pf-bar { display: flex; justify-content: space-between; padding: 18px var(--pad) 22px; font-size: 13px; font-weight: 600; }

/* 画面下に固定した薄い名前（フッターが見えたら隠す） */
.pf-ghost { position: fixed; inset: auto 0 0; z-index: 0; display: flex; justify-content: space-between; padding: 0 var(--pad); font-size: clamp(56px, 11vw, 180px); font-weight: 500; letter-spacing: -.06em; line-height: .78; color: var(--ink); opacity: .07; pointer-events: none; transition: opacity .5s var(--ease); }
.pf-ghost span { transition: transform .9s var(--ease); }
.pf-ghost.off { opacity: 0; }
.pf-ghost.off span { transform: translateY(45%); }

/* ---------- ケーススタディ（既存のマークアップにそのまま適用） ---------- */
.cs { position: relative; z-index: 1; font-size: 15px; line-height: 1.9; }
.cs-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--pad); }
.cs-hero { padding-top: calc(var(--pad) + 120px); }
.cs-hero .cs-wrap > * { grid-column: 1 / -1; }
.cs-kicker { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cs-title { margin: 22px 0 0; font-size: clamp(36px, 5.6vw, 92px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; font-feature-settings: "palt"; }
.cs-hero .cs-wrap > .cs-lede { grid-column: 7 / 13; margin: clamp(32px, 4vw, 56px) 0 0; font-size: 16px; line-height: 1.95; }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: var(--gap); row-gap: 24px; margin: clamp(48px, 6vw, 88px) 0 clamp(28px, 3vw, 40px); }
.cs-meta div { padding-top: 12px; border-top: 1px solid var(--ink); }
.cs-meta dt { font-size: 13px; font-weight: 600; color: var(--mute); }
.cs-meta dd { margin: 6px 0 0; font-size: 14px; font-weight: 500; line-height: 1.65; }
.cs-media { margin: 0; background: var(--ink); }
.cs-media video, .cs-media img { width: 100%; }
.cs-hero .cs-shot img { width: 100%; }
.cs-cap { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--mute); }
.cs-hero .cs-wrap > .cs-cap { grid-column: 7 / 13; }
.cs-hero .cs-wrap > .cs-cap + .cs-cap { margin-top: 6px; }

/* 各セクション：左に番号と見出し（追従）、右に本文 */
.cs-sec { margin-top: clamp(80px, 10vw, 160px); }
.cs-sec .cs-wrap { row-gap: 0; padding-top: 14px; background: linear-gradient(var(--ink), var(--ink)) no-repeat var(--pad) 0 / calc(100% - 2 * var(--pad)) 1px; transition: background-size 1.3s var(--ease-io) .15s; }
.cs-sec-head { grid-column: 1 / 5; grid-row: 1 / span 60; align-self: start; position: sticky; top: calc(var(--pad) + 52px); display: grid; gap: 14px; }
.cs-sec .cs-wrap > :not(.cs-sec-head) { grid-column: 5 / 13; }
.cs-num { font-size: 14px; font-weight: 600; line-height: 1; }
.cs-sec h2 { margin: 0; font-size: var(--d-m); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; font-feature-settings: "palt"; }
.cs-sec p { margin: 0 0 16px; max-width: 44em; }
.cs h3.cs-sub { margin: 40px 0 10px; font-size: 17px; font-weight: 600; }
.cs-list { margin: 0 0 18px; padding: 0; list-style: none; max-width: 44em; }
.cs-list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); }
.cs-list li:last-child { border-bottom: 1px solid var(--line); }
.cs-list li::before { content: ""; position: absolute; left: 2px; top: 1.3em; width: 8px; height: 1px; background: var(--ink); }
.cs-grid-2, .cs-grid-3 { display: grid; gap: var(--gap); margin: 28px 0 8px; }
.cs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
.cs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-shot { margin: 0; }
.cs-shot img { width: 100%; background: #fff; outline: 1px solid var(--line); outline-offset: -1px; }
.cs-shot--phone img { max-width: 280px; margin: 0 auto; }
.cs-shot--phone .cs-cap { text-align: center; }
.cs-card { padding-top: 14px; border-top: 1px solid var(--ink); }
.cs-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.cs-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.85; }
.cs-card .why { color: var(--mute); }
.cs-steps { counter-reset: s; margin: 8px 0 0; padding: 0; list-style: none; max-width: 44em; }
.cs-steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; padding: 16px 0; border-top: 1px solid var(--line); }
.cs-steps li:last-child { border-bottom: 1px solid var(--line); }
.cs-steps li::before { content: counter(s, decimal-leading-zero); font-size: 14px; font-weight: 600; line-height: 1.9; }
.cs-steps strong { display: block; font-size: 16px; font-weight: 600; }
.cs-steps + p { margin-top: 24px; }
.cs-table { width: 100%; max-width: 44em; border-collapse: collapse; margin: 6px 0 20px; font-size: 14px; line-height: 1.75; }
.cs-table th, .cs-table td { padding: 12px 16px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.cs-table tr:last-child > * { border-bottom: 1px solid var(--line); }
.cs-table th { font-weight: 600; white-space: nowrap; }
.cs-table tr:first-child > * { border-top-color: var(--ink); }
.cs-note { margin-top: 20px; padding: 16px 18px; background: rgba(12, 12, 12, .045); font-size: 13px; line-height: 1.8; max-width: 44em; }
.cs a.cs-link { border-bottom: 1px solid currentColor; }
.cs .cs-poster-fallback { display: none; }

/* ケース末尾のリンク：大きな文字のリスト */
.cs-foot { margin-top: clamp(96px, 12vw, 180px); padding-bottom: 0; }
.cs-foot .ghost-btn { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0 22px; border-top: 1px solid var(--ink); font-size: var(--d-m); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.cs-foot .ghost-btn:last-child { border-bottom: 1px solid var(--ink); }
.cs-foot .ghost-btn > span { word-break: auto-phrase; line-break: strict; }
.cs-foot .ghost-btn::after { content: "→"; font-size: .7em; }
.cs-foot .ghost-btn[target]::after { content: "↗"; }
.cs-end { display: flex; justify-content: space-between; margin-top: 64px; padding: 18px var(--pad) 22px; font-size: 13px; font-weight: 600; }

/* ---------- 動き（インタラクション） ---------- */
/* ボタン：文字が上に転がり、押すと少し縮む。.roll は pf.js が挿入する */
.roll { display: inline-block; overflow: hidden; line-height: 1.2; vertical-align: top; }
.roll > span { display: block; text-shadow: 0 1.2em currentColor; transition: transform .55s var(--ease-io); }
:is(.pf-nav a, .pf-circle, .pf-more):focus-visible .roll > span { transform: translateY(-1.2em); }
.pf-circle:focus-visible { background: var(--ink); color: var(--bg); }
:is(.pf-nav a, .pf-circle, .pf-more):active { scale: .96; }
@media (hover: hover) {
    :is(.pf-nav a, .pf-circle, .pf-more):hover .roll > span { transform: translateY(-1.2em); }
    .pf-circle:hover { background: var(--ink); color: var(--bg); }
    .pf-more:hover::after { transform: translateX(6px); }
}

/* 作品リスト・末尾リンク：入った方向から黒が満ち、文字が左右に開く。方向は pf.js が data-dir に入れる */
:is(.pf-row, .cs-foot .ghost-btn) { position: relative; outline: none; }
:is(.pf-row, .cs-foot .ghost-btn)::before { content: ""; position: absolute; inset: -1px 0 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease-io); }
:is(.pf-row, .cs-foot .ghost-btn)[data-dir="top"]::before { transform-origin: 50% 0; }
.pf-list, .cs-foot { isolation: isolate; background: var(--bg); }
:is(.pf-row__no, .pf-row__title, .pf-row__tags, .pf-row__year, .pf-row__state), .cs-foot .ghost-btn > span, .cs-foot .ghost-btn::after { color: #fff; mix-blend-mode: difference; transition: transform .55s var(--ease); }
:is(.pf-row, .cs-foot .ghost-btn):is(:focus-visible, :active)::before { transform: scaleY(1); }
:is(.pf-row, .cs-foot .ghost-btn):active::before { transition-duration: .2s; }
.pf-row:focus-visible :is(.pf-row__no, .pf-row__title), .cs-foot .ghost-btn:focus-visible > span { transform: translateX(14px); }
.pf-row:focus-visible :is(.pf-row__year, .pf-row__state), .cs-foot .ghost-btn:focus-visible::after { transform: translateX(-14px); }
@media (hover: hover) {
    :is(.pf-row, .cs-foot .ghost-btn):hover::before { transform: scaleY(1); }
    .pf-row:hover :is(.pf-row__no, .pf-row__title), .cs-foot .ghost-btn:hover > span { transform: translateX(14px); }
    .pf-row:hover :is(.pf-row__year, .pf-row__state), .cs-foot .ghost-btn:hover::after { transform: translateX(-14px); }
}

/* 動画の上でカーソルに付いてくる「View case」 */
.pf-cursor { position: fixed; left: 0; top: 0; z-index: 30; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; pointer-events: none; translate: var(--x, -200px) var(--y, -200px); scale: 0; transition: scale .5s var(--ease); }
.pf-feature__media:hover .pf-cursor { scale: 1; }
@media (hover: none) { .pf-cursor { display: none; } }

/* 画面外から入ってくる要素（pf.js が .rv を付け、見えたら .in にする） */
.js .rv:is(.pf-foot__state, .pf-state__h, .pf-mark, .cs-shot, .pf-feature__media) { opacity: 1; transform: none; }
.js .rv:not(.in) .ln > span { animation: none; transform: translateY(calc(100% + .2em)); }
/* 作品リストは透明度だけで表示する（transform があると追従プレビューの基準がずれ、反転文字の合成も崩れるため） */
.js .rv.pf-list { transform: none; }
.pf-mark .ch { display: inline-block; transition: transform 1.2s var(--ease) calc(var(--i, 0) * 45ms); }
.js .pf-mark.rv:not(.in) .ch { transform: translateY(105%); }
.js .rv:is(.cs-shot, .pf-feature__media) { overflow: hidden; }
.js .rv:is(.cs-shot, .pf-feature__media) > :is(img, video) { clip-path: inset(0 0 100% 0); scale: 1.06; transition: clip-path 1.1s var(--ease-io), scale 1.4s var(--ease); }
.js .rv.in:is(.cs-shot, .pf-feature__media) > :is(img, video) { clip-path: inset(0); scale: 1; }
.js .rv:is(.pf-num, .pf-skill) { transition: opacity .9s var(--ease), transform .9s var(--ease), background-size 1.2s var(--ease-io); }
.js .rv:is(.pf-num, .pf-skill):not(.in) { background-size: 0 1px; }
:is(.pf-num, .pf-skill):nth-child(2) { transition-delay: 90ms; }
:is(.pf-num, .pf-skill):nth-child(3) { transition-delay: 180ms; }
.pf-skill:nth-child(4) { transition-delay: 270ms; }
.js .cs-sec.rv:not(.in) .cs-wrap { background-size: 0 1px; }
.pf-num [data-count] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* 読み込み時：ヘッダーと事例の概要を順に表示（見出しと画像は最初から表示して表示速度を保つ） */
.js .pf-top, .js .cs-hero :is(.cs-kicker, .cs-lede), .js .cs-meta > div { animation: pf-fade .9s var(--ease) both; }
.js .cs-hero .cs-lede { animation-delay: .15s; }
.js .cs-meta > div:nth-child(1) { animation-delay: .25s; }
.js .cs-meta > div:nth-child(2) { animation-delay: .32s; }
.js .cs-meta > div:nth-child(3) { animation-delay: .39s; }
.js .cs-meta > div:nth-child(4) { animation-delay: .46s; }
.js .cs-meta > div:nth-child(5) { animation-delay: .53s; }
.js .cs-meta > div:nth-child(6) { animation-delay: .6s; }
@keyframes pf-fade { from { opacity: 0; transform: translateY(18px); } }

/* スクロールに連動（対応ブラウザのみ）：見出しの年号が右から寄る、事例ページ上端の読了バー */
@keyframes pf-spread { from { transform: translateX(22vw); opacity: 0; } }
@keyframes pf-progress { from { transform: scaleX(0); } }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
        .pf-sechead small { animation: pf-spread linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    }
    .cs::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 50; height: 2px; background: var(--ink); transform-origin: 0 50%; animation: pf-progress linear both; animation-timeline: scroll(root); }
}

/* ページ移動：カメラが前に進むように切り替え、右上のナビは動かさない（対応ブラウザのみ） */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .pf-nav { view-transition-name: pf-nav; }
}
::view-transition-old(root) { animation: pf-vt-out .3s var(--ease-io) both; }
::view-transition-new(root) { animation: pf-vt-in .55s var(--ease) both; }
@keyframes pf-vt-out { to { opacity: 0; transform: scale(1.08); } }
@keyframes pf-vt-in { from { opacity: 0; transform: scale(.94); } }

/* 事例ページの画像の拡大表示（pf.js が dialog を作る） */
.cs-shot img[role="button"] { cursor: zoom-in; }
.cs-shot img[role="button"]:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.cs-shot:has(img:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
html:has(.pf-lb[open]) { overflow: hidden; }
.pf-lb { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 6vh 4vw; border: 0; background: transparent; overflow: auto; }
.pf-lb[open] { display: grid; place-items: center; }
.pf-lb::backdrop { background: rgba(12, 12, 12, .9); }
.pf-lb img { max-width: 100%; max-height: 88vh; width: auto; height: auto; transition: scale .45s var(--ease), opacity .3s var(--ease); }
@starting-style { .pf-lb[open] img { scale: .96; opacity: 0; } }
.pf-lb button { position: fixed; top: var(--pad); right: var(--pad); background: var(--bg); color: var(--ink); }
.pf-lb button:is(:hover, :focus-visible) { background: var(--bg); color: var(--ink); outline-color: var(--bg); }
.pf-lb.tall[open] { place-items: start center; }
.pf-lb.tall img { max-height: none; max-width: min(100%, 1100px); }

/* ---------- 推镜头：TK168 の制作を一続きのカメラで飛ぶ（pf.js が --u と各面の不透明度、カメラ位置を更新） ---------- */
.pf-cam { display: none; }
.cam-ready .pf-cam { display: block; position: relative; height: 460vh; margin-top: clamp(24px, 4vw, 56px); background: #0b0b0c; }
.pf-cam__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #1c1c1f 0%, #0b0b0c 62%); color: #f3f3f0; perspective: calc(900px * var(--u, 1)); }
.pf-cam__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.pf-cam__world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.pf-cam__plane { position: absolute; left: 0; top: 0; width: calc(var(--w) * var(--u, 1) * 1px); height: calc(var(--h) * var(--u, 1) * 1px); margin: calc(var(--h) * var(--u, 1) * -.5px) 0 0 calc(var(--w) * var(--u, 1) * -.5px); transform: translate3d(calc(var(--x) * var(--u, 1) * 1px), calc(var(--y) * var(--u, 1) * 1px), calc(var(--z) * var(--u, 1) * 1px)) rotateY(calc(var(--ry, 0) * 1deg)); opacity: 0; outline: 1px solid rgba(243, 243, 240, .22); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); background: #111; }
.pf-cam__plane img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-cam__plane::before, .pf-cam__plane::after { content: "+"; position: absolute; font: 400 16px/1 var(--f); color: rgba(243, 243, 240, .7); }
.pf-cam__plane::before { left: -22px; top: -22px; }
.pf-cam__plane::after { right: -22px; bottom: -22px; }
.pf-cam__fog { position: absolute; inset: -20%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(243, 243, 240, .96) 0%, rgba(243, 243, 240, .75) 30%, rgba(243, 243, 240, 0) 68%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .95 0 0 0 0 .94 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center / 600px 600px; will-change: opacity, transform; }
/* 上下の帯を暗くして、明るい画面の上でも文字が読めるようにする */
.pf-cam__hud { position: absolute; inset: 0; pointer-events: none; padding: calc(var(--pad) + 64px) var(--pad) var(--pad); display: grid; grid-template-rows: auto 1fr auto; background: linear-gradient(rgba(11, 11, 12, .88) 0, rgba(11, 11, 12, 0) 24%, rgba(11, 11, 12, 0) 78%, rgba(11, 11, 12, .9) 100%); text-shadow: 0 1px 12px rgba(0, 0, 0, .65); }
.pf-cam__note { margin: 8px 0 0; max-width: min(calc(100% - 130px), 34em); font-size: 11px; line-height: 1.6; color: #c9c9c4; }
@media (max-height: 500px) { .pf-cam__note { display: none; } }
.pf-cam__tag { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.pf-cam__tag b { display: block; margin-top: 6px; font-weight: 400; opacity: .6; }
.pf-cam__count { position: absolute; right: var(--pad); top: calc(var(--pad) + 58px); padding: 6px 8px; background: rgba(11, 11, 12, .55); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; text-align: right; }
.pf-cam__bar { display: block; width: 120px; height: 1px; margin-top: 10px; background: rgba(243, 243, 240, .25); }
.pf-cam__bar i { display: block; height: 100%; background: #f3f3f0; transform-origin: 0 50%; transform: scaleX(0); }
.pf-cam__caps { grid-row: 3; display: grid; }
.pf-cam__cap { grid-area: 1 / 1; max-width: 30em; margin: 0; font-size: clamp(15px, 1.4vw, 19px); font-weight: 500; line-height: 1.7; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pf-cam__cap.off { opacity: 0; transform: translateY(12px); }
.pf-cam__hint { position: absolute; left: 50%; bottom: var(--pad); translate: -50% 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; letter-spacing: .2em; opacity: .7; transition: opacity .4s; }
.pf-cam__skip { position: absolute; right: var(--pad); bottom: var(--pad); pointer-events: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; letter-spacing: .14em; color: rgba(243, 243, 240, .75); border-bottom: 1px solid currentColor; }
.pf-cam__skip:hover { color: #f3f3f0; }
/* 暗い舞台の上では右上のナビを白黒反転させる */
html.cam-on .pf-nav a { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px rgba(11, 11, 12, .6); }
html.cam-on .pf-nav a:focus-visible { outline-color: var(--bg); box-shadow: 0 0 0 2px var(--ink); }
/* スマホでは SKIP 後に舞台の黒い帯がナビの裏に残らないよう、少し上まで送る */
@media (max-width: 860px) { .pf-cam__hint { display: none; } #work-feature { scroll-margin-top: -48px; } }

/* ---------- スマートフォン ---------- */
@media (max-width: 860px) {
    .pf-top__name { grid-column: 1 / 7; }
    .pf-top__meta { display: none; }
    .pf-intro { padding-top: calc(var(--pad) + 56px); }
    .pf-intro__fig { grid-column: 1 / 6; }
    .pf-intro__role { grid-column: 7 / 13; grid-row: 1; align-self: end; padding: 0; }
    .pf-intro__right { grid-column: 1 / -1; grid-row: 2; margin-top: 28px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--ink); }
    .pf-state__h, .pf-state__lede, .pf-feature__media, .pf-feature__side, .pf-foot__state, .pf-foot__side, .pf-contact p, .pf-contact nav, .pf-worknote { grid-column: 1 / -1; }
    .pf-feature--rev :is(.pf-feature__media, .pf-feature__side) { grid-column: 1 / -1; grid-row: auto; }
    .pf-state__lede { margin-top: 32px; }
    .pf-state__h .ln:nth-child(n), .pf-foot__state .ln:nth-child(n) { padding-left: 0; }
    .pf-foot__side { margin-top: 36px; }
    .pf-contact nav { justify-self: start; }
    .pf-row { row-gap: 8px; padding: 18px 0 20px; }
    .pf-row__no { grid-column: 1 / 3; }
    .pf-row__year { grid-column: 3 / 9; grid-row: 1; }
    .pf-row__state { grid-column: 9 / 13; grid-row: 1; }
    .pf-row__title, .pf-row__tags { grid-column: 1 / -1; }
    .pf-num { grid-column: 1 / -1; }
    .pf-skill { grid-column: span 6; }
    .pf-rec__group { row-gap: 2px; }
    .pf-rec__y { grid-column: 1 / -1; }
    .pf-rec__o, .pf-rec__r, .pf-rec__d { grid-column: 1 / -1; }
    .pf-rec__d { color: var(--mute); }
    .pf-peek, .pf-ghost { display: none; }
    .cs-hero { padding-top: calc(var(--pad) + 76px); }
    .cs-hero .cs-wrap > .cs-lede, .cs-hero .cs-wrap > .cs-cap { grid-column: 1 / -1; }
    .cs-sec-head { grid-column: 1 / -1; grid-row: auto; position: static; margin-bottom: 20px; }
    .cs-sec .cs-wrap > :not(.cs-sec-head) { grid-column: 1 / -1; }
    .cs-grid-2, .cs-grid-3 { grid-template-columns: 1fr; }
    .cs-table th { white-space: normal; }
    .pf-lb[open] { justify-items: safe center; }
    .pf-lb.wide img { max-width: none; max-height: 78vh; }
}
@media (max-width: 520px) {
    .pf-skill { grid-column: 1 / -1; }
    .pf-row__title small { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .ln > span { animation: none; transform: none; }
    .js .rv { opacity: 1; transform: none; transition: none; }
    .pf-peek, .pf-cursor { display: none; }
    .pf-mark .ch, .pf-ghost span { transform: none !important; transition: none; }
    .pf-cam { display: none !important; }
    .js .pf-top, .js .cs-hero :is(.cs-kicker, .cs-lede), .js .cs-meta > div { animation: none; }
    *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
    .pf-row:is(:hover, :focus-visible) > *, .cs-foot .ghost-btn:is(:hover, :focus-visible) > span, .cs-foot .ghost-btn:is(:hover, :focus-visible)::after, .pf-more::after { transform: none !important; }
    :is(.pf-nav a, .pf-circle, .pf-more):active { scale: none; }
}
@media (forced-colors: active) {
    .roll > span { transform: none !important; }
    :is(.pf-row, .cs-foot .ghost-btn)::before { display: none; }
    :is(.pf-row__no, .pf-row__title, .pf-row__tags, .pf-row__year, .pf-row__state), .cs-foot .ghost-btn > span, .cs-foot .ghost-btn::after { mix-blend-mode: normal; color: CanvasText; }
    :is(.pf-row, .cs-foot .ghost-btn):focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; }
}
@media print {
    .js .rv { opacity: 1 !important; transform: none !important; background-size: 100% 1px !important; }
    .js .ln > span, .pf-mark .ch, .js .rv > :is(img, video) { animation: none !important; transform: none !important; clip-path: none !important; scale: 1 !important; }
    .pf-nav, .pf-ghost, .pf-peek, .pf-cursor, .pf-play, .cs::before, .pf-cam { display: none !important; }
    .cs-sec .cs-wrap { background-size: calc(100% - 2 * var(--pad)) 1px !important; }
    .pf-sechead small { animation: none !important; }
    .cs-sec .cs-wrap, .pf-num, .pf-skill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    :is(.pf-row__no, .pf-row__title, .pf-row__tags, .pf-row__year, .pf-row__state), .cs-foot .ghost-btn > span, .cs-foot .ghost-btn::after { mix-blend-mode: normal; color: var(--ink); }
    :is(.pf-row, .cs-foot .ghost-btn)::before { display: none; }
    .cs-media video { display: none !important; }
    .cs .cs-poster-fallback { display: block; }
}