/* =====================================================================
   /work/ 共通スタイル
   トップ(index.html)のトークンをそのまま引き写している。ここで新しい
   デザインは作らない — 同じ部品を並べ替えるだけ、が「壊さない」の中身。
   ⚠ 値を変えるときはトップの :root と揃える。片方だけ動かすと崩れる。
===================================================================== */

@font-face{ font-family:'D-DIN-PRO'; src:url('../fonts/D-DIN-PRO-400.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'D-DIN-PRO'; src:url('../fonts/D-DIN-PRO-500.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'D-DIN-PRO'; src:url('../fonts/D-DIN-PRO-600.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'D-DIN-PRO'; src:url('../fonts/D-DIN-PRO-700.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'D-DIN-PRO'; src:url('../fonts/D-DIN-PRO-800.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  --paper:#ffffff;
  --paper-2:#f4f4f2;
  --ink:#111111;
  --ink-2:#3a3a3a;
  --ink-3:#6f6f6f;
  --ink-4:#9a9a9a;
  --line:#e6e6e3;
  --grid-line:rgba(17,17,17,.05);
  --grid-line-edge:rgba(17,17,17,.10);
  /* ⚠ Inter 系の書体を候補に入れない（2026-09-11 の独立採点で指紋に数えられた） */
  --font-en:'D-DIN-PRO',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-jp:'Noto Sans JP',system-ui,sans-serif;
  --wrap:1440px;
  --gut:clamp(1.25rem,5vw,5rem);
  /* ⚠ ブランドの正（DESIGN_enyeart.md）の緩急。(.16,1,.3,1) だった（2026-09-11 採点 r3） */
  --ease:cubic-bezier(.2,0,0,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-en); font-weight:400; line-height:1.65; letter-spacing:.015em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1;
}
::selection{ background:var(--ink); color:var(--paper); }

/* 背景のドット（2026-10-14 CEO指示）。全面ではなく、選んだセクションだけに付ける。
   参考=北海道コカ・コーラの bg_dots.svg（34px角に直径約2.7pxの点・#e6e6e6）。
   ::before を画面幅いっぱいに広げるので、.wrap の中の見出しに付けても端まで出る。上下はぼかして切れ目を作らない。 */
.bg-dots{ position:relative; isolation:isolate; }
.bg-dots::before{ content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 2.4px 2.4px, #e6e6e6 1.35px, transparent 1.75px) 0 0 / 34px 34px repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,p,figure,ul,dl,dd{ margin:0; }
ul{ padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.en{ font-family:var(--font-en); }
.jp{ font-family:var(--font-jp); letter-spacing:.045em; line-break:strict; text-wrap:pretty; }

.eyebrow{
  font-family:var(--font-en); font-weight:600; font-size:.7rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:.9rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ink); display:inline-block; }
.sec-index{
  font-family:var(--font-en); font-weight:500; font-size:.72rem;
  letter-spacing:.2em; color:var(--ink-3);
}
.display{
  font-family:var(--font-en); font-weight:900; line-height:.9;
  letter-spacing:.005em; text-transform:uppercase; color:var(--ink);
}
/* 1文字ずつのシマー（トップと同じ）。色は inline style で振るので transition だけ持たせる */
.char{ display:inline-block; transition:color .30s ease; }
/* ⚠ .55s は規定帯（200〜320ms・DESIGN_enyeart.md）の外だった（2026-09-11） */
/* ⚠ シマーは .char に inline style で色を入れる。黒く反転した行の上で
   濃いグレー(#111111)が当たると文字が背景に溶けて消える（PRODUCT FILM の L が消えた）。
   反転中だけ !important で紙色に固定し、inline style に勝たせる。 */
.wrow > a:hover .char, .wrow > a:focus-visible .char,
.wnext a:hover .char, .wnext a:focus-visible .char{ color:var(--paper) !important; }


/* ---------- 背景の縦グリッド（トップの initGrid と同じ列） ---------- */
.grid-lines{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.gl-inner{
  width:100%; max-width:var(--wrap); height:100%; margin:0 auto;
  padding-inline:var(--gut); display:grid; grid-template-columns:repeat(6,1fr);
}
/* ⚠⚠ **1行に固定する。** 子は span 6本＋閉じの ::after で**7個**。6列の格子に7個入れると
     2行目へ折り返し、行が2つ（高さ50%ずつ）になって、**内側の罫が画面の上半分にしか
     描かれていなかった**（左端だけ ::after が2行目の1列目に落ちて全高に見えていた）。
     2026-09-11、/work/branding/ の舞台の中で罫が y=449 で途切れているのを画素で測って発覚。
     ⇒ grid-auto-flow:column で横にだけ足し、閉じの ::after は幅0の列（=右端）に置く。
     ⚠ 3列・1列のときは、列より多い span を消す（右端に罫が重なって濃くなるため）。 */
.gl-inner{ grid-template-rows:100%; grid-auto-flow:column; grid-auto-columns:0; }
.gl-inner span{ border-left:1px solid var(--grid-line); }
.gl-inner span:first-child{ border-left-color:var(--grid-line-edge); }
.gl-inner::after{ content:""; border-left:1px solid var(--grid-line-edge); }
/* ⚠ 761〜1024px も6列（行・フッターが6列。3列にしたら 900px で名前が罫から外れた・r3） */
@media (max-width:760px){ .gl-inner{ grid-template-columns:repeat(3,1fr); }
  .gl-inner span:nth-child(n+4){ display:none; } }
@media (max-width:640px){ .gl-inner{ grid-template-columns:1fr; }
  .gl-inner span:nth-child(n+2){ display:none; } }

/* ---------- 右端の座標タグ（トップと同じ） ---------- */
/* ⚠⚠ **区切りは「点を描く」。中黒の文字（·）を使わない。**
   トップ（index.html:726）は `<span class="cg-dot">` で描いているのに、
   下層の写しだけ `32.8032 · 130.7079` と中黒の文字になっていた。
   受賞審査の「中黒で繋いだメタ情報」に**字面で当たる**（2026-09-11 の採点で指紋1）。 */
/* ⚠⚠ 2026-09-11 採点: 点を描いても見た目は「中黒で繋いだメタ情報」と同じ、と数えられた。⇒ 点を消し、余白だけで区切る */
.coord-tag .cg-dot{ width:5px; height:5px; border-radius:50%; background:transparent;
  flex:none; }
.coord-tag{
  /* ⚠⚠ **display を書かないと点が描かれない。** span は inline なので
     .cg-dot の width/height が効かず **5×0px**＝1画素も出ない。
     2026-09-11、中黒を消したのに代わりの点も無く、8ページで
     「32.8032° N130.7079° E」と地続きに出ていた。
     ⚠ **grep で「中黒が消えた」を確かめただけで、実物を見ていなかった。** */
  display:flex; align-items:center; gap:1rem;
  position:fixed; right:calc(var(--gut) * .42); top:50%; transform:translateY(-50%);
  z-index:0; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-en); font-weight:500; font-size:.6rem; letter-spacing:.24em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; pointer-events:none;
}
@media (max-width:1140px){ .coord-tag{ display:none; } }

/* ---------- ヘッダー（トップと同じ挙動：最上部は透明→スクロールでガラス） ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:55;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
}
header.scrolled{
  /* ⚠ かつて 70% の白だった。黒い面（プランの Standard・.wnext の反転帯）の上に来ると
       #b8b8b8 相当まで沈み、章ラベルが **2.53:1**、901px以上ではナビ3項目も基準割れ。
     ⚠ 半透明の帯は「後ろに何が来るか」を決めないと、**特定のスクロール位置でだけ**壊れる。
       止まって見ている限り気づけない種類の欠陥。
     ⇒ ぼかしの質感は残したまま、地の白を .92 まで上げて背景依存を断つ
       （#111111 の上でも #eeeeee 相当。章ラベル #6f6f6f で 4.35:1）。
     ⚠⚠ **4.35:1 でも 4.5:1 を割っていた。** 2026-09-11 の独立採点で、黒いマークが下を通る
       位置でナビが 4.25:1 と実測された。⇒ **不透明の白**にする（#6f6f6f で 5.02:1）。 */
  background-color:#ffffff;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.head-in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:74px;
}
/* ⚠ 79x24 しかなく、押せる大きさ(44px)を割っていた。字は大きくせず、当たり判定だけ広げる */
.brand{ font-family:var(--font-en); font-weight:800; font-size:.9rem; letter-spacing:.22em;
  display:inline-flex; align-items:center; min-height:44px; }
.head-chapter{
  font-family:var(--font-en); font-weight:500; font-size:.68rem;
  letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase;
}
/* ⚠ 同じクラスを、ヘッダでは span（飾り）、下では a（「← Home」）に使い回していた。
   押せるほうだけ高さを確保する */
a.head-chapter{ display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:640px){ .head-chapter{ display:none; } }

/* 下層ページのメニュー。
   ⚠ 2026-08-12 まで下層にはロゴと見出ししか無く、/services/ に来た人が
     実績にも問い合わせにも進めなかった（トップへ戻るしか無い）。
   ⚠ スマホでも隠さない。3語しかないので畳む必要がなく、
     ハンバーガーにすると1タップ増えるだけで何も良くならない。 */
.head-nav{ display:flex; align-items:center; gap:1.4rem; }
.head-nav a{
  font-family:var(--font-en); font-weight:500; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;   /* ⚠ 高さだけ直していた。「Work」は幅 38px で横が足りない */
  transition:color .3s var(--ease);
}
.head-nav a:hover{ color:var(--ink); }
.head-nav a[aria-current="page"]{ color:var(--ink); font-weight:700; }
@media (max-width:640px){
  .head-nav{ gap:.95rem; }
  .head-nav a{ font-size:.66rem; letter-spacing:.1em; }
}

main{ position:relative; z-index:1; padding-top:74px; }
.band{ border-top:1px solid var(--line); padding-block:clamp(3.5rem,7vw,7rem); }
.band:first-of-type{ border-top:0; }

/* =====================================================================
   一覧
===================================================================== */
.work-head{ padding-block:clamp(64px,9vw,128px) clamp(40px,5vw,64px); }
.work-head .top{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; }
.work-head h1{ font-size:clamp(3rem,13vw,11rem); }
/* 枠線の英字が回る円（2026-10-14 CEO）。見出しの右の余白に置き、文字の後ろ（ドットの上）に敷く。
   線は画面上で常に1px（vector-effect）＝大きさが変わっても太らない・細りすぎない。
   ⚠ スマホでは円が右へはみ出す。外枠（画面幅いっぱい・横だけ clip）で切らないと横スクロールが出る（2026-10-14 実測 462/390px）。 */
.wh-spin{ position:absolute; z-index:-1; pointer-events:none; overflow-x:clip; overflow-y:visible;
  top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); }
.wh-spin svg{ position:absolute; width:clamp(200px,34vw,520px); height:auto; aspect-ratio:1; overflow:visible;
  right:clamp(-100px,calc(22vw - 186px),12%); top:clamp(8px,3vw,48px); animation:whSpin 40s linear infinite; }
.wh-spin text{ font-family:var(--font-en); font-weight:800; font-size:29px; letter-spacing:.02em; text-transform:uppercase;
  fill:none; stroke:var(--ink); stroke-width:1px; vector-effect:non-scaling-stroke; }
@keyframes whSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .wh-spin svg{ animation:none; } }
.work-head .lead{
  font-family:var(--font-jp); font-size:clamp(.95rem,1.5vw,1.15rem);
  color:var(--ink-2); margin-top:2rem; max-width:34ch; letter-spacing:.045em;
}

/* --- 絞り込み（カテゴリ見出しの代わり。1実績=1行を崩さないための装置） --- */
.filters-wrap{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  /* ⚠ 地を書かないと、ブラウザ既定のボタンの灰色（#f0f0f0）が出て文字が 4.41:1 に落ちた（2026-09-11 採点 P0） */
  /* ⚠ 透明にすると背景の罫が文字を貫いた（2026-09-11 採点 r2）。紙色で塗る */
  background:var(--paper);
  display:inline-flex; align-items:baseline; gap:.55rem;
  font-family:var(--font-en); font-weight:600; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  /* ⚠ 高さ 33px で 44px を割っていた。文字の大きさは変えず、上下の余白で稼ぐ */
  min-height:44px; align-items:center;
  border:1px solid var(--line); padding:.75rem .95rem;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
/* ⚠ opacity で薄くしない（件数が 2.09:1 になっていた・2026-09-11 採点 P0） */
.chip-n{ font-size:.62rem; letter-spacing:.14em; font-variant-numeric:tabular-nums; }
.chip:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* --- 行 --- */
.wlist{ border-top:1px solid var(--line); }
.wrow{ border-bottom:1px solid var(--line); }
.wrow[hidden]{ display:none; }
.wrow > a, .wrow > .norow{
  /* ⚠⚠ 背景の6列の罫に載せる（2026-09-11 採点 r2: 名前も一言も罫から浮いていた）。
       1列目=番号・2〜3列目=名前と一言・4〜5列目=画面・6列目=年。黒い面だけ罫の外へ広げる */
  position:relative; display:grid; align-items:start;
  grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:0; row-gap:.7rem;
  padding-block:clamp(1.5rem,2.6vw,2.4rem);
  transition:color .3s var(--ease);
  isolation:isolate;
}
/* 黒スラブ反転（トップのカードと同じ言語）。⚠ 文字は罫に載せたまま、面だけ左右へはみ出させる */
.wrow > a::before{
  content:""; position:absolute; inset:0 calc(var(--gut) * -.4); z-index:-1; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s var(--ease);
}
.wrow > a:hover::before, .wrow > a:focus-visible::before{ transform:scaleY(1); transform-origin:top; }
.wrow > a:hover, .wrow > a:focus-visible{ color:var(--paper); }
.wrow > a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.wnum{ grid-column:1; grid-row:1; padding-top:.55rem; font-family:var(--font-en); font-weight:500; font-size:.75rem; letter-spacing:.2em; color:var(--ink-3); transition:color .3s var(--ease); }
.wrow > a:hover .wnum{ color:rgba(255,255,255,.55); }
.wmain{ grid-column:2 / span 2; grid-row:1; display:flex; flex-direction:column; gap:.55rem; min-width:0; padding-right:1.5rem; }
.wname{ font-family:var(--font-en); font-weight:800; text-transform:uppercase; font-size:clamp(1.35rem,3.4vw,2.6rem); line-height:1; letter-spacing:.01em; }
.wtypes{ font-family:var(--font-en); font-weight:500; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); transition:color .3s var(--ease); }
.wrow > a:hover .wtypes{ color:rgba(255,255,255,.5); }
/* ⚠ 一言は本文の大きさ（15px）。12.5px では本文より小さかった（2026-09-11 採点 r2） */
.wjp{ grid-column:2 / span 2; grid-row:2; padding-right:1.5rem; font-family:var(--font-jp); font-size:.9375rem; line-height:1.7; color:var(--ink-2); letter-spacing:.045em; transition:color .3s var(--ease); }
.wrow > a:hover .wjp{ color:rgba(255,255,255,.72); }
.wyear{ grid-column:6; grid-row:1; justify-self:end; padding-top:.55rem; font-family:var(--font-en); font-weight:500; font-size:.75rem; letter-spacing:.16em; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; transition:color .3s var(--ease); }
.wrow > a:hover .wyear{ color:rgba(255,255,255,.55); }
/* 矢印はSVG（個別ページの Next と Site にだけ残っている）。↗の文字はD-DIN-PROに無い */
.warrow{ width:18px; height:18px; justify-self:end; opacity:.3; transition:opacity .3s var(--ease), transform .3s var(--ease); }

/* 個別ページが無い行＝押せない。押せそうにも見せない */
.wrow > .norow{ color:var(--ink); }
.wrow > .norow .wname{ color:var(--ink-3); }
.wrow > .norow .wstate{ grid-column:6; grid-row:1; justify-self:end; padding-top:.55rem;
  font-family:var(--font-jp); font-size:.75rem; color:var(--ink-3); letter-spacing:.045em; }

/* --- 画面は常に見せる ---
   ⚠⚠ 2026-09-11 採点 r2: ホバーした時だけ・1100px 以下では消える作りで、/work/ に作品の絵が一度も写らなかった。 */
.wthumb{ grid-column:4 / span 2; grid-row:1 / span 2; display:flex; gap:.5rem; align-items:flex-start;
  min-width:0; overflow:hidden; pointer-events:none; }
.wthumb img{ display:block; width:auto; max-width:none; height:clamp(96px,9vw,132px);
  border:1px solid var(--line); background:var(--paper-2); }
.wthumb img{ height:clamp(120px,14vw,200px); }
.wrow > a:hover .wthumb img, .wrow > a:focus-visible .wthumb img{ border-color:rgba(255,255,255,.18); }

@media (max-width:760px){
  /* SP: 番号｜名前（年は右上）→ 一言 → 画面。⚠ 年を左下に落とすと「取り残された数字」に見えた（r1） */
  .wrow > a, .wrow > .norow{ grid-template-columns:3rem minmax(0,1fr) auto; }
  .wnum{ grid-column:1; }
  .wmain{ grid-column:2; padding-right:1rem; }
  .wjp{ grid-column:2 / span 2; padding-right:0; }
  .wyear{ grid-column:3; }
  .wthumb{ grid-column:2 / span 2; grid-row:3; }
  .wthumb img{ height:120px; }
  .wrow > .norow .wstate{ grid-column:2 / span 2; grid-row:3; justify-self:start; }
}

/* --- 受託の一文（実績として数えない） --- */
.clientwork{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5.5rem); }
/* ⚠ 見出しは1〜3列・本文は4〜6列の罫に載せる（r3: 本文が罫から 89px 外れていた）。
     上の罫は画面幅いっぱいでなく中身の幅に（一覧の罫と長さを揃える） */
.clientwork{ border-top:0; padding-top:0; }
.clientwork .cw-in{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:0;
  padding-top:clamp(3rem,6vw,5.5rem); }
.clientwork .cw-in::before{ content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:var(--line); }
.clientwork .cw-in > :first-child{ grid-column:1 / span 3; }
.clientwork .cw-in > p{ grid-column:4 / span 3; }
.clientwork p{ font-family:var(--font-jp); font-size:1rem; line-height:1.9; color:var(--ink-2); letter-spacing:.045em; max-width:44ch; }
@media (max-width:760px){ .clientwork .cw-in{ grid-template-columns:1fr; row-gap:1.2rem; }
  .clientwork .cw-in > :first-child, .clientwork .cw-in > p{ grid-column:1; } }

/* =====================================================================
   個別ページ
===================================================================== */
.w-head{ padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem); }
.w-head .top{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,6vw,5rem); }
.backlink{
  font-family:var(--font-en); font-weight:600; font-size:.7rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--line); padding-bottom:.35rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.backlink:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.w-head h1{ font-size:clamp(2.8rem,11vw,9rem); }
.w-head .lead{
  font-family:var(--font-jp); font-size:clamp(1rem,1.8vw,1.35rem); font-weight:500;
  color:var(--ink); margin-top:1.8rem; max-width:30ch; letter-spacing:.045em;
}

/* スペックシート（名刺の裏と同じ型） */
.spec{
  margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--ink);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0 clamp(1.5rem,3.5vw,3.5rem);
}
.spec > div{ padding:1.4rem 0; }
.spec dt{ font-family:var(--font-en); font-weight:600; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }
.spec dd{ font-family:var(--font-jp); font-size:.8rem; color:var(--ink); margin-top:.7rem; letter-spacing:.045em; }
.spec dd.en{ font-family:var(--font-en); letter-spacing:.06em; }
.spec a{ border-bottom:1px solid var(--line); padding-bottom:.15rem; transition:border-color .3s var(--ease); }
.spec a:hover{ border-bottom-color:var(--ink); }
@media (max-width:860px){ .spec{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .spec{ grid-template-columns:1fr; } .spec > div{ border-bottom:1px solid var(--line); } }
.spec > div:last-child{ border-bottom:0; }

/* 画面（静止時グレースケール → 触れると色が戻る） */
.shots{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,6rem); }
/* スマホは横に並べ、横長のもの（サイト・名刺・映像）は1枚で行を取る。
   件数が変わっても空セルが出ないように grid ではなく flex で組む。 */
.shots-in{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(1.6rem,3.5vw,3.5rem); }
.shot.is-phone{ flex:1 1 clamp(170px,20%,300px); max-width:340px; }
.shot.is-plain{ flex:1 1 100%; }
.plate{ border:1px solid var(--line); background:var(--paper-2); overflow:hidden; }
.plate video{ width:100%; height:auto; display:block; background:#000; }
/* 本編は横型と縦型の2本ある。画面の形に合う方だけを出す（JS不要） */
.film-sp{ display:none; }
@media (max-width:760px){ .film-pc{ display:none; } .film-sp{ display:block; } }
.film-sp .plate{ max-width:390px; margin-inline:auto; }
.plate img{ width:100%; height:auto; }
/* --- スマホの実機にはめて見せる。影は使わない（サイトはフラット） --- */
.phone{
  background:var(--ink); border-radius:clamp(24px,2.6vw,38px);
  padding:clamp(7px,.75vw,11px) clamp(7px,.75vw,11px) clamp(9px,.95vw,14px);
  transition:transform .7s var(--ease);
}
/* スピーカー。飾りはこの一本だけ */
.phone::before{
  content:""; display:block; width:20%; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22); margin:.35rem auto .5rem;
}
.phone-screen{ border-radius:clamp(16px,1.9vw,28px); overflow:hidden; background:#000; }
.shot img{ width:100%; height:auto; }
.shot:hover .phone, .shot:focus-within .phone{ transform:translateY(-6px); }
.shot figcaption{
  font-family:var(--font-jp); font-size:.8125rem; color:var(--ink-3);
  margin-top:1rem; letter-spacing:.045em;
}
.shots-note{
  font-family:var(--font-jp); font-size:.75rem; color:var(--ink-3);
  margin-top:clamp(1.5rem,3vw,2.5rem); letter-spacing:.045em;
}
@media (max-width:760px){ .shot.is-phone{ flex:1 1 100%; max-width:none; } }

/* 本文 01/02/03 */
.wbody{ border-top:1px solid var(--line); }
.wblock{ border-bottom:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4.5rem); }
.wblock:last-child{ border-bottom:0; }
.wblock-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(1.5rem,4vw,4rem); }
.wblock .bn{ display:flex; align-items:baseline; gap:1.1rem; }
.wblock .bn .n{ font-family:var(--font-en); font-weight:500; font-size:.72rem; letter-spacing:.2em; color:var(--ink-3); }
.wblock .bn .ben{ font-family:var(--font-en); font-weight:800; text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:.02em; }
.wblock .bjp{ font-family:var(--font-jp); font-size:.68rem; color:var(--ink-3); letter-spacing:.14em; margin-top:.7rem; }
.wblock p{ font-family:var(--font-jp); font-size:.9rem; line-height:2.05; color:var(--ink-2); letter-spacing:.045em; max-width:48ch; }
@media (max-width:760px){ .wblock-in{ grid-template-columns:1fr; gap:1.4rem; } }

/* 次へ */
.wnext{ border-top:1px solid var(--ink); }
.wnext a{ display:block; padding-block:clamp(3rem,7vw,6.5rem); position:relative; isolation:isolate; transition:color .3s var(--ease); }
.wnext a::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform .3s var(--ease); }
.wnext a:hover::before, .wnext a:focus-visible::before{ transform:scaleY(1); transform-origin:top; }
.wnext a:hover, .wnext a:focus-visible{ color:var(--paper); }
.wnext .lbl{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-en); font-weight:600; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); transition:color .3s var(--ease); }
.wnext .lbl .warrow{ width:15px; height:15px; opacity:1; }
.spec .warrow{ width:12px; height:12px; opacity:.5; display:inline-block; vertical-align:-1px; }
.wnext a:hover .lbl{ color:rgba(255,255,255,.6); }
/* ⚠ .display が color:var(--ink) を持つので、継承では白くならない。
   ホバーで黒地に黒文字＝見えなくなるため、名前は明示的に紙色へ */
.wnext a:hover .nm, .wnext a:focus-visible .nm{ color:var(--paper); }
.wnext .nm{ font-family:var(--font-en); font-weight:900; text-transform:uppercase; font-size:clamp(2.4rem,10vw,8rem); line-height:.92; margin-top:1rem; }

/* フッター */
/* ⚠ 上の罫は中身の幅に（画面幅いっぱいだと一覧の罫と長さが違った・r3） */
footer{ padding-block:0 2.6rem; }
/* ⚠ 3つを背景の6列の罫に載せる（2026-09-11 採点 r2: 真ん中の KUMAMOTO に罫がかかっていた） */
.foot-in{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; column-gap:0; row-gap:.6rem; padding-top:2.6rem; }
.foot-in::before{ content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:var(--line); }
.foot-in > :nth-child(1){ grid-column:1 / span 3; }
.foot-in > :nth-child(2){ grid-column:4 / span 2; }
.foot-in > :nth-child(3){ grid-column:6; justify-self:end; }
@media (max-width:640px){
  .foot-in{ grid-template-columns:minmax(0,1fr) auto; }
  .foot-in > :nth-child(1){ grid-column:1; grid-row:1; }
  .foot-in > :nth-child(2){ grid-column:1; grid-row:2; }
  .foot-in > :nth-child(3){ grid-column:2; grid-row:1 / span 2; }
}
/* ⚠⚠ **--ink-4(#9a9a9a) は 10.24px で 2.81:1。本文の 4.5:1 を割る。**
   2026-09-11 に .sm-hint・.lg-eyebrow で同じことを直したのに、**ここが3か所目**として
   残っていた。⇒ **同じ色を使っている所を一度に数えること。**1つ直して終わりにしない。 */
.foot-in span{ font-family:var(--font-en); font-weight:500; font-size:.75rem; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase; }

@media (prefers-reduced-motion: reduce){
  /* ⚠ 疑似要素にも効かせる（行の黒い面 ::before が .3s のまま動いていた・r3） */
  *, *::before, *::after{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   ページ遷移 — 下からカーテンが上がって次のページが出る
   トップの「章カーテン」と同じ動き。View Transitions API のCSSだけで、
   JSは1行も使わない。
   ⚠ JSで全画面を覆う実装にしない。過去にプリローダーが固着してページごと
     読めなくなったことがある（index.html の clamp 未定義の件）。CSSだけなら
     未対応ブラウザは普通に遷移するだけで、覆われたまま残ることが起きない。
===================================================================== */
@view-transition { navigation: auto; }

::view-transition-group(root){ animation-duration:.62s; }
/* 前のページはその場に留める。⚠ animation:none だと実装によって即座に消え、
   カーテンの下が白く抜ける。opacity を保つアニメを明示して確実に残す。 */
::view-transition-old(root){ animation:enHold .62s linear both; mix-blend-mode:normal; }
@keyframes enHold{ from{ opacity:1; } to{ opacity:1; } }
/* 次のページを下から一掃で出す */
::view-transition-new(root){
  animation:enCurtain .62s cubic-bezier(.65,.05,.36,1) both;
  mix-blend-mode:normal;
}
@keyframes enCurtain{
  from{ clip-path:inset(100% 0 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* =====================================================================
   制作例（架空）
   ⚠ 実績(works)と**同じ見た目にしない**。押せるものだと誤解させないため、
     カードは figure のままにして、hover で持ち上げない・矢印を付けない。
   ⚠ 断り書き（.sm-note「架空です」）は 2026-08-15 に千紗さんの判断で外した。
     ⇒ 画面上に「架空」と書いた場所は無い。実績と混ぜて良い、という意味ではない。
===================================================================== */
/* ⚠ 上罫を引かない。直前の一覧の最後の下罫と重なって 2px の二重線になっていた（r3） */
.samples{ padding-block:clamp(3rem,6vw,5.5rem); }
.sm-head .sm-jp{ font-family:var(--font-jp); font-weight:500; font-size:.68rem;
  letter-spacing:.16em; text-transform:none; color:var(--ink-3); }
.sm-lead{ margin-top:1.4rem; font-family:var(--font-jp); font-size:.95rem;
  letter-spacing:.045em; color:var(--ink-2); max-width:34ch; }
/* ⚠ 帯のスクロールバーを隠しているので、手で送れることがこの一行でしか分からない。
   消すなら、かわりの手がかりを必ず用意すること。
   ⚠ 色は --ink-4 にしない（本文4.5:1 を割る薄さ。過去に同じ所で指摘が出ている）。 */
.sm-hint{ display:block; margin-top:.7rem; font-family:var(--font-jp); font-size:.8125rem;
  letter-spacing:.08em; color:var(--ink-3); }
/* ── 横に流れる帯 ────────────────────────────────────────────
   ⚠ 2026-08-16、静止画（1画面目）を並べたグリッドから、
     「横に流れる帯＋中身が上から下へ流れ続ける」へ変えた。3案から千紗さんが選んだ形。
   ⚠ 選ばれた案には弱点が3つある。**手当てとセットでしか成立しない**ので、
     どれかを外すときは「なぜ外してよくなったか」をここに書くこと:
       ① 20枚ぶん読む      → 幅680のwebp（合計1.4MB）・5枚目から lazy・画面外では止める
       ② 目が休まる所が無い → 触れているあいだ、縦も横も全部止まる
       ③ 動きを減らす設定    → prefers-reduced-motion で完全に止め、手で送る帯として使えるままにする
   ⚠ CSSのマーキー（translateX を無限に流す）は使わない。**手で送れなくなる**ため。
     ここは本物の横スクロール領域で、JS が scrollLeft を進めている。
     指でも・キーボードでも動き、触れば止まる。JS が動かなくても「手で送れる帯」として成立する。 */
.sm-rail{ --card:340px; --win:460px;
  margin-top:clamp(2rem,4vw,3.2rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; }
.sm-rail::-webkit-scrollbar{ display:none; }
.sm-track{ display:flex; width:max-content;
  gap:clamp(1rem,2vw,1.8rem); padding-inline:clamp(1.25rem,5vw,4rem); }
.sm-card{ flex:none; width:var(--card); display:flex; flex-direction:column; }
/* ⚠ 箱線で囲むと「カード」になる。Enyeart 自社サイトの枠は**辺を描かず、四隅の鉤**
   （印刷のトンボの見立て）。⚠ この意匠は自社資産だけ——制作例やクライアント案件には持ち込まない。
   ⚠ 鉤は画像の**外側**に置く。img の上に重ねると写真の明るい所で消える。 */
.sm-shot{
  --hook:14px; --hookw:1px; --hookc:var(--ink);
  position:relative; padding:7px; background:none;
  background-image:
    linear-gradient(var(--hookc),var(--hookc)), linear-gradient(var(--hookc),var(--hookc)),
    linear-gradient(var(--hookc),var(--hookc)), linear-gradient(var(--hookc),var(--hookc)),
    linear-gradient(var(--hookc),var(--hookc)), linear-gradient(var(--hookc),var(--hookc)),
    linear-gradient(var(--hookc),var(--hookc)), linear-gradient(var(--hookc),var(--hookc));
  background-repeat:no-repeat;
  background-size:
    var(--hook) var(--hookw), var(--hookw) var(--hook),
    var(--hook) var(--hookw), var(--hookw) var(--hook),
    var(--hook) var(--hookw), var(--hookw) var(--hook),
    var(--hook) var(--hookw), var(--hookw) var(--hook);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
/* 窓。⚠ 切り抜き（overflow:hidden）は**内側**に置く。鉤を描いている .sm-shot に
   掛けると、鉤ごと切られる。画面に入ったかを見る側も外側で測ること。
   ⚠ 2026-08-16、千紗さんの指示で「触れるまでは動かない静止画」に変えた。
     縦長の絵を上から下へ流す作りをやめたので、**窓を映像と同じ 16:10 にできる**。
     前は縦長の窓（0.709）に横長の映像（1.600）を cover で入れており、
     2.26倍に拡大して横の56%を捨てていた（独立レビューの実測）。
     器と中身の比率は必ず揃える。ずれた瞬間に、切るか余らせるかしか選べなくなる。 */
.sm-win{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.sm-win img, .sm-mov{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block; }
/* 触れたときだけ、そのサイトの**実際の動き**を再生する。
   ⚠ 触れるまで1バイトも読まない: preload="none"／src は触れてから入れる。
   ⚠ 読み込み中に黒い矩形を見せない。**再生が始まってから**静止画を引く。 */
.sm-mov{ opacity:0; transition:opacity .25s var(--ease); pointer-events:none; }
.sm-win.is-playing .sm-mov{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  /* 動きを減らす設定では、そもそも再生しない（JS側でも止めている） */
  .sm-mov{ display:none; }
}
/* 触れているあいだは横の送りも止める（JS側）。⚠ 縦に流す動きは無くなったので、
   ここで止めるものは無い——けれど帯そのものは止める必要があるので data-off は残す。 */

/* ⚠ 帯の作りを変えたとき、この figcaption 一式まで巻き添えで消していた。
   キャプションが1行に流れ、業種の [ ] も消えた（目で見て気づいた）。
   ⚠ 範囲を丸ごと差し替えるときは、消える側に何が入っているかを必ず数えること。 */


/* ⚠ 帯の作りを変えたとき、この figcaption 一式まで巻き添えで消していた。
   キャプションが1行に流れ、業種の [ ] も消えた（機械の検査は全部緑・目で見て気づいた）。
   ⚠ 範囲を丸ごと差し替えるときは、消える側に何が入っているかを必ず数えること。 */
.sm-card figcaption{ margin-top:.8rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem; }
/* ⚠ 黒く塗った小さな箱にしていたが、すぐ上のフィルタ（.chip は本物のボタン）と
   見分けが付かず、押せるものに見えた。箱をやめ、細い罫だけで区切る */
/* ラベルは角括弧で囲む（自社サイトの語彙。NO ART Amsterdam の [EXPERIENCE] の見立て）*/
.sm-genre{ font-family:var(--font-jp); font-weight:500; font-size:.8125rem; letter-spacing:.14em;
  color:var(--ink-3); }
.sm-genre::before{ content:"["; margin-right:.15em; }
.sm-genre::after{ content:"]"; margin-left:.15em; }
.sm-name{ font-family:var(--font-jp); font-weight:500; font-size:.9rem; letter-spacing:.04em; }
.sm-catch{ flex-basis:100%; font-family:var(--font-jp); font-size:.875rem; letter-spacing:.04em;
  color:var(--ink-3); }

@media (max-width:640px){
  .sm-rail{ --card:260px; }
}

/* =====================================================================
   /work/logos/ ロゴの自主制作 ── 案B「索引と舞台」（2026-09-11 CEO 選択）
   ブリーフ: factory/design_reviews/enyeart-logos/design-brief.md
   ⚠⚠ 既定（JS なし・指で触る端末・1024px 以下）は**縦に並ぶだけ**。
     舞台の並びは .bd.is-stage の下にしか書かない（印を付けるのは _STAGE_JS）。
     ⇒ JS が落ちても、索引が押せないまま残る・舞台が1枚目で固まる、は起きない。
   ⚠ 名前・業種を出さない。番号だけ。
   ⚠ 動きは舞台の差し替え1つだけ（260ms）＝ページで唯一の見せ場。
===================================================================== */
.bd{ --bd-ease:cubic-bezier(.2,0,0,1); --bd-top:clamp(5.5rem,10vh,7.5rem); }
/* ⚠⚠ 見出しは /work/ と同じ部品（.work-head .top / h1.display / .sec-index）。2026-09-11 CEO。
     ここで書体・大きさ・余白を持たない（2か所に書くと必ずずれる）。 */
/* 語の途中で折り返さない箱（split_words）。⚠ .char が inline-block なので、無いと LOGO STUD|IES になる */
.word{ display:inline-block; white-space:nowrap; }
/* ⚠ 見出しの下は案内の一行だけ。/work/ のリード文と同じ位置（左・見出しの下）。
     和文の副題（ロゴの自主制作）と件数（51点）は置かない（2026-09-11 CEO）。 */
/* ⚠ 語の途中で折らない。スマホで「替わ／ります。」と切れていた（2026-09-11 撮影）。
     auto-phrase（文節で折る）が効かない機械は keep-all（句読点で折る）で受け、
     それでも収まらない長さのときだけ anywhere で折る（はみ出させない）。 */
.bd-note{ margin:2rem 0 0; max-width:34ch; font-family:var(--font-jp); font-size:.8125rem;
  line-height:1.8; letter-spacing:.03em; color:var(--ink-3); line-break:strict; text-wrap:pretty;
  word-break:keep-all; word-break:auto-phrase; overflow-wrap:anywhere; }
.bd-note-stage{ display:none; }
.bd.is-stage .bd-note-stage{ display:block; }
.bd.is-stage .bd-note-tap{ display:none; }

/* ── 既定: 縦に並ぶだけ ── */
.bd-index, .bd-stage{ display:none; }
.bd-body{ padding-bottom:clamp(3rem,5vw,5rem); }
.bd-steps{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(3rem,5vw,4rem) clamp(1rem,2vw,2rem); }
/* ⚠ 番号はマークの**下**に付ける（参照 Logobook の見本帳と同じ）。上に置いていた版は、
     正方形の中の余白のせいで「上の段のマークの説明」に読めた（2026-09-11 撮影・近接の原則）。
     ⚠ HTML の順は番号→絵のまま（読み上げで番号が先に来る）。見た目だけ order で下げる。 */
/* ⚠ 罫は1点ごとの下に引く。番号の上に引くと、番号が「下の絵の見出し」に読めた（2026-09-11 採点・SP） */
.bd-step{ display:flex; flex-direction:column; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.bd-no{ order:2; display:block; font-family:var(--font-en); font-size:.8125rem; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; color:var(--ink-3);
  padding-top:.25rem; }
.bd-tile{ display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
/* ⚠ マークも切り出す前の一枚も、同じ正方形の中に contain で置く（押しても高さが跳ねない）
   ⚠⚠ **白い地を塗らない。** 舞台用の絵（s*.webp）は白を透明にして書き出してある
     （slim_logos.unwhite）。白地のまま置くと白い正方形が背景の罫を隠し、**罫が見えない箱の縁で
     ぷつりと切れる**（2026-09-11 撮影で確認）。
     ⚠ CSS の mix-blend-mode:multiply では直らない（main と舞台が重ね合わせの文脈を切る）。 */
.bd-tile img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.bd-tile:focus-visible{ outline:1px solid var(--ink); outline-offset:6px; }
@media (max-width:1024px){
  .bd-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .bd-steps{ grid-template-columns:1fr; }
}

/* ── 舞台: 1025px 以上・カーソルあり・JS あり ──
   ⚠ 索引は 3列×17行の番号表（1行 32px＝544px）。1列に 51 行並べると 1632px になり、
     sticky のまま画面に収まらない。 */
/* ⚠ 列の間を 0 にして、舞台の左端を背景の罫（5列目の頭）に載せる（2026-09-11 採点 r8: 10px ずれていた） */
.bd.is-stage .bd-body{ display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:0; align-items:start; }
/* ⚠ 4列×13行（1列 108px）。3列だと列の頭が罫（288px）に乗らなかった（r9） */
.bd.is-stage .bd-index{ display:grid; grid-template-columns:repeat(4,1fr);
  grid-column:1 / span 4; grid-row:1; position:sticky; top:var(--bd-top);
  margin:0; padding:0; list-style:none; }
.bd-i{ position:relative; display:block; width:100%; height:32px; padding:0; border:0;
  background:none; text-align:left; cursor:pointer;
  font-family:var(--font-en); font-size:.8125rem; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; color:var(--ink-3);
  transition:color .2s var(--bd-ease); }
.bd-i:hover, .bd-i[aria-current="true"]{ color:var(--ink); }
.bd-i[aria-current="true"]::after{ content:""; position:absolute; left:0; bottom:7px;
  width:24px; height:1px; background:var(--ink); }
.bd-i:focus-visible{ outline:1px solid var(--ink); outline-offset:-1px; color:var(--ink); }
.bd.is-stage .bd-stage{ display:block; grid-column:5 / span 8; grid-row:1;
  position:sticky; top:var(--bd-top); z-index:1;
  /* ⚠ 高さは画面から 16rem を引いた分まで（一番下で潜らない・1画面目に枠が収まる・r10） */
  height:min(60vh, calc(100vh - 16rem));
  /* ⚠ 1画面目に舞台の枠を全部出す。見出しの右の空きへ持ち上げる。低い画面では（04）に触れないよう小さく */
  margin-top:calc(-1 * min(10rem, 14vh)); }
/* ⚠ 枠は舞台の列いっぱい（正方形にしない）。正方形だと 3:2 の「切り出す前の一枚」が
     608px の中に上下を空けて小さく収まっていた。マークは正方形なので中央に来る。 */
.bd-frame{ position:relative; width:100%; height:calc(100% - 2.5rem); }
/* ⚠ 白を塗らない（.bd-tile img と同じ理由。絵の白は透明で書き出してある） */
.bd-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .26s var(--bd-ease); }
.bd-sb{ opacity:0; }
.bd-stage.is-board .bd-sb{ opacity:1; }
.bd-stage.is-board .bd-sm{ opacity:0; }
/* ⚠ 差し替えの瞬間だけ fade を切って消し、読み込み後に 260ms で出す */
.bd-stage.is-swap .bd-sm{ opacity:0; transition:none; }
.bd-cap{ height:2.5rem; margin:0; display:flex; align-items:flex-end; gap:.4em;
  font-family:var(--font-en); font-size:.8125rem; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; color:var(--ink); }
.bd-of{ color:var(--ink-3); }
.bd.is-stage .bd-steps{ display:block; grid-column:5 / span 8; grid-row:1; }
.bd.is-stage .bd-step{ height:56vh; padding:0; border:0; }
/* ⚠ 最後の段が画面の真ん中まで上がれるよう、下に余りを足す */
.bd.is-stage .bd-step:last-child{ height:calc(56vh + 36vh); }
.bd.is-stage .bd-step > *{ visibility:hidden; }

@media (prefers-reduced-motion: reduce){
  .bd-frame img, .bd-i{ transition:none; }
}

/* =====================================================================
   媒体ページ（2026-09-11 CEO「媒体ごとにページを分ける」）
   /work/ の目次 → /work/web/ ・ /work/graphic/（ロゴの入口を含む）・ /work/film/
===================================================================== */
/* ⚠⚠ 種別は1語ずつの箱。中黒（·）で繋がない（採点の指紋「中黒で繋いだメタ情報」） */
.wtypes, .spec .types{ display:flex; flex-wrap:wrap; gap:0 1.1em; }
.page-end{ padding-bottom:clamp(4rem,8vw,7rem); }

/* /work/ の目次。⚠ tracked ALL-CAPS の eyebrow にしない（指紋）。和文の小見出しで置く */
.media-idx{ padding-top:clamp(4rem,8vw,7rem); }
.mi-h{ margin:0; font-family:var(--font-jp); font-weight:500; font-size:clamp(1.75rem,3.4vw,2.6rem);
  letter-spacing:.06em; color:var(--ink); }
.mi-h{ margin-bottom:1.4rem; }

/* /work/graphic/ ── ロゴ・名刺・ポスター・パッケージの絞り込み（2026-09-11 CEO）
   ⚠ 絞り込みは /work/ と同じ .chip。マスは 4列の正方形（前に OK が出た「1列に4つ」「大きさは一緒」）。
   ⚠⚠ 写真のコマは原寸 262〜401px。**マスの幅は写真のいちばん小さい原寸まで**（伸ばさない）。 */
/* ⚠ 絞り込みはヘッダーの下に貼り付ける（85点で約7,500px。下の方から戻れなかった・2026-09-11 採点 r2）。
     --head-h はヘッダーの実の高さを JS が入れる（無ければ 4.6rem） */
.gf-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem;
  position:sticky; top:var(--head-h,4.6rem); z-index:5; background:var(--paper); padding-block:.9rem; }
/* ⚠ 貼り付けた行の下端に縁（r3: マスがいきなり切れていた）。中身の幅に引く */
.gf-bar::after{ content:""; position:absolute; bottom:0; left:var(--gut); right:var(--gut); height:1px; background:var(--line); }
.gf-bar .gr-more{ margin-top:0; }
.gr-more{ display:inline-block; font-family:var(--font-jp);
  font-size:.875rem; letter-spacing:.06em; color:var(--ink);
  text-decoration:underline; text-underline-offset:.4em;
  text-decoration-thickness:1px; text-decoration-color:var(--ink-4);
  transition:text-decoration-color .22s var(--ease); }
.gr-more:hover, .gr-more:focus-visible{ text-decoration-color:var(--ink); }
/* ⚠ マスの幅の上限 --gf-max は build_work.py が「写真のいちばん小さい原寸」を数えて入れる。余った幅は間に回す */
/* ⚠⚠ マスの左端を背景の罫に揃える（2026-09-11 採点: 罫6本・マス4列で、透明なロゴの上を罫が横切っていた）。
     このページだけ背景の罫を 4列（1024px 以下 3列・640px 以下 2列）にし、マスはその列の左から置く。
   ⚠ マスの幅の上限 --gf-max は build_work.py が「写真のいちばん小さい原寸」を数えて入れる（伸ばさない） */
.gf-grid{ --gf-gut:clamp(1.5rem,2.4vw,2.4rem); display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:0; row-gap:clamp(1rem,4.3vw,3.875rem); padding-bottom:clamp(6rem,10vw,10rem); }
@media (min-width:1025px){
  body:has(.gf-grid) .gl-inner{ grid-template-columns:repeat(4,1fr); }
  body:has(.gf-grid) .gl-inner span:nth-child(n+5){ display:none; }
}
@media (max-width:1024px){ .gf-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  body:has(.gf-grid) .gl-inner{ grid-template-columns:repeat(3,1fr); }
  body:has(.gf-grid) .gl-inner span:nth-child(n+4){ display:none; } }
/* ⚠ SP: 貼り付けた絞り込みがチップ2段＋リンクで画面の約3分の1を塞いだ（2026-09-11 撮影）。
     ⇒ チップは横1列で横に送り、リンクは同じ行の右に置く（高さ約73px） */
@media (max-width:640px){
  .gf-bar{ flex-wrap:nowrap; gap:.8rem; }
  .gf-bar .filters{ flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .gf-bar .filters::-webkit-scrollbar{ display:none; }
  .gf-bar .chip{ flex:none; }
  /* ⚠ リンクは行から出す（r3: チップが「BUS」で途切れ、横に送れると分からなかった）。チップの右端をぼかす */
  .gf-bar .gr-more{ display:none; }
  .gf-bar .filters{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); padding-right:24px; }
}
.gf-sp-link{ display:none; }
@media (max-width:640px){ .gf-sp-link{ display:block; margin:0 0 1rem; } }
@media (max-width:640px){ .gf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--gf-gut); }
  body:has(.gf-grid) .gl-inner{ grid-template-columns:repeat(2,1fr); }
  body:has(.gf-grid) .gl-inner span:nth-child(2){ display:block; } }
.gf-cell{ margin:0; justify-self:start; width:min(calc(100% - var(--gf-gut)), var(--gf-max,288px));
  aspect-ratio:1; overflow:hidden; }
.gf-cell[hidden]{ display:none !important; }
.gf-cell img{ display:block; width:100%; height:100%; object-fit:cover; }
/* ロゴ: 舞台用の透明な書き出し（罫が透ける）。インクの面積は書き出しで 34% に揃えてある */
.gf-cell.is-logo img{ object-fit:contain; }
/* ポスター: 切らずに正方形の中へ。紙が白いので縁に罫を引く */
.gf-cell.is-contain{ display:flex; align-items:center; justify-content:center; }
.gf-cell.is-contain img{ width:auto; height:auto; max-width:100%; max-height:100%; border:1px solid var(--line); }
/* 一個ずつ出す（隠すのは JS が is-armed を付けた後だけ） */
.gf-grid.is-armed .gf-cell img{ opacity:0; transform:translateY(22px); }
.gf-grid.is-armed .gf-cell.is-in img{ opacity:1; transform:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .gf-grid.is-armed .gf-cell img{ opacity:1; transform:none; transition:none; }
}

/* ⚠ 和文を語の途中で折らない（2026-09-11 採点: 「公開したあ／との」「作っ／ています」）。
     auto-phrase（文節）が効かない機械は keep-all（句読点）で受け、収まらない時だけ anywhere で折る */
.work-head .lead, .w-head .lead, .clientwork p, .sm-lead, .sm-hint, .wjp, .shot figcaption, .shots-note, .wblock p{
  word-break:keep-all; word-break:auto-phrase; overflow-wrap:anywhere; line-break:strict; text-wrap:pretty; }
/* フッターの戻り道: 矢印（← Home）をやめて下線で示す（「→」付きリンクの指紋・2026-09-11 採点） */
.foot-home{ text-decoration:underline; text-underline-offset:.4em; text-decoration-thickness:1px;
  text-decoration-color:var(--ink-4); }
.foot-home:hover, .foot-home:focus-visible{ text-decoration-color:var(--ink); }

/* =====================================================================
   2026-09-11 採点 r2 の直し（ページごと）
===================================================================== */
/* /work/ の目次: 最後の行の下罫と受託の上罫が二重になっていた */
.media-idx .wrow:last-child{ border-bottom:0; }

/* Graphic: ロゴのマスは地が透明で正方形が見えなかった → 四隅にトンボ（ブランドの署名の細部） */
.gf-cell.is-logo, .gf-cell.is-contain{ --tm:rgba(17,17,17,.28); background:
  linear-gradient(var(--tm),var(--tm)) 0 0 / 10px 1px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 0 0 / 1px 10px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 100% 0 / 10px 1px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 100% 0 / 1px 10px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 0 100% / 10px 1px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 0 100% / 1px 10px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 100% 100% / 10px 1px no-repeat,
  linear-gradient(var(--tm),var(--tm)) 100% 100% / 1px 10px no-repeat; }

/* ロゴのページ: 見出しまわりを詰め、1画面目に舞台を多く出す（r8: 1440×900 で枠の 61% しか見えなかった）。
   ⚠ 見出しの書体・大きさ・動きは /work/ のまま（CEO）。変えるのは上下の余白だけ */
.bd .work-head{ padding-block:clamp(3rem,5.5vw,5rem) clamp(1.5rem,3vw,2.5rem); }
/* 051 の後の相談への道（r8: フッターの Home しか無かった） */
.bd-end{ padding-bottom:clamp(6rem,10vw,10rem); }
/* SP: 正方形だとマークの下が空きすぎて、番号が離れた（r8） */
.bd:not(.is-stage) .bd-tile img{ aspect-ratio:4/3; }

/* Film: 再生前はブラウザの操作バーを出さず、黒い再生ボタン1つ（r2: 操作バーが作りかけに見えた）。
   ⚠ JS が動かなければ controls が付いたまま（ボタンは JS が作る）＝再生できなくはならない */
.plate:has(video){ position:relative; }
.film-play{ position:absolute; left:50%; top:50%; width:88px; height:88px; transform:translate(-50%,-50%);
  border:0; padding:0; background:var(--ink); cursor:pointer; transition:background-color .2s var(--ease); }
.film-play::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  border-left:24px solid var(--paper); border-top:15px solid transparent; border-bottom:15px solid transparent; }
.film-play:hover{ background:#2b2b2b; }
.film-play:focus-visible{ outline:2px solid var(--paper); outline-offset:-8px; }
.film-sp .film-play{ width:64px; height:64px; }

/* Web: 帯を手で送るボタン（r2: スクロールバーを隠していて、マウスでは送れなかった）。⚠ 矢印の記号は使わない */
.sm-nav{ display:flex; gap:.5rem; margin-top:1.2rem; }
.sm-btn{ min-width:44px; min-height:44px; padding:0 1.1rem; border:1px solid #8a8a8a; background:var(--paper);
  font-family:var(--font-jp); font-size:.8125rem; letter-spacing:.06em; color:var(--ink); cursor:pointer;
  transition:border-color .2s var(--ease); }
.sm-btn:hover{ border-color:var(--ink); }
.sm-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.film-shots{ padding-top:3rem; }
.foot-home{ min-width:44px; justify-content:flex-end; }

/* 読み上げ用のひとつながりの名前（split_chars / split_words）。見た目には出さない */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ロゴのページ: 画像の入っていない提案書の枠を出さない（P0 の受け皿・r10） */
.bd-sb:not([src]){ visibility:hidden; }
/* 相談の一行: PC（舞台）では索引の下、SP では最後。⚠ 舞台の後ろに段を続けない（一番下で潜った・r10） */
.bd-index .bd-contact{ grid-column:1 / -1; margin-top:1.5rem; list-style:none; }
.bd.is-stage .bd-end{ display:none; }
.bd.is-stage .bd-body{ padding-bottom:0; }
/* 番号「026 / 051」は枠の上に（下に置くとマークから離れて浮き、1画面目で見切れた・r10） */
.bd.is-stage .bd-stage{ display:flex; flex-direction:column; }
.bd.is-stage .bd-cap{ order:-1; height:auto; margin:0 0 1rem; }
.bd.is-stage .bd-frame{ flex:1 1 auto; height:auto; min-height:0; }

/* =====================================================================
   /work/ カテゴリーの段（2026-09-11 CEO「system と app は同じにして、web, graphic, film をカテゴリー毎でみせたい」）
   ⚠ 段の見出し・説明・「すべて見る」は背景の6列の罫に載せる（1〜3列・4〜5列・6列）
===================================================================== */
.wk-sec{ padding-top:clamp(4rem,8vw,7rem); }
#wlist > .wk-sec:first-child{ padding-top:clamp(1rem,2vw,1.5rem); }
.wk-sec[hidden]{ display:none; }
.wk-head{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:end; column-gap:0; row-gap:.8rem;
  padding-bottom:clamp(1.6rem,3vw,2.4rem); }
.wk-h{ grid-column:1 / span 3; margin:0; font-family:var(--font-en); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.2rem,5vw,4.5rem); line-height:.95; letter-spacing:.005em; color:var(--ink); }
.wk-desc{ grid-column:4 / span 2; margin:0; padding-right:1.5rem; font-family:var(--font-jp); font-size:.9375rem;
  line-height:1.7; color:var(--ink-2); letter-spacing:.045em; word-break:keep-all; word-break:auto-phrase; overflow-wrap:anywhere; }
/* ⚠ 押せる高さ 44px（文字だけだと足りなかった・文言審査） */
.wk-more{ grid-column:6; justify-self:end; display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:760px){
  .wk-head{ grid-template-columns:minmax(0,1fr) auto; }
  .wk-h{ grid-column:1 / -1; }
  .wk-desc{ grid-column:1; padding-right:1rem; }
  .wk-more{ grid-column:2; }
}
/* Graphic の段: マス6つを6列の罫に1つずつ載せる（/work/graphic/ と同じ .gf-cell） */
.wk-tiles{ --gf-gut:clamp(1rem,2vw,2rem); display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  row-gap:var(--gf-gut); border-top:1px solid var(--line); padding-top:clamp(1.6rem,3vw,2.4rem); }
@media (max-width:760px){ .wk-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* =====================================================================
   /work/ 試作（2026-09-11 CEO「graphic みたいに全部のカテゴリーがみれて、カテゴリーでソートすると、ロゴを1点ずつ見るみたいな見え方」）
   All＝全カテゴリーのマス／Web＝索引と舞台。ブリーフ §9
===================================================================== */
/* 見え方は html[data-view]（#wlist より前の script が決める）。JS が無ければ全部が縦に並ぶ */
html[data-view] #wlist > .wk-view{ display:none; }
/* ⚠ 出す側にも #wlist > を付ける。付けないと隠す側（#wlist > .wk-view）の方が強く、何も出なかった（2026-09-11 試作） */
html[data-view="all"] #wlist > #all{ display:grid; }
html[data-view="product"] #wlist > #product, html[data-view="web"] #wlist > #web,
html[data-view="graphic"] #wlist > #graphic, html[data-view="film"] #wlist > #film{ display:block; }
html[data-view] #wlist > .wk-sec{ padding-top:48px; }
/* 背景の罫: どの見え方も4列（マス4つ・索引3：舞台9・映像の左端 が罫に載る） */
@media (min-width:1025px){
  html[data-view] .gl-inner{ grid-template-columns:repeat(4,1fr); }
  html[data-view] .gl-inner span:nth-child(n+5){ display:none; }
}

/* ── All: マス ── */
.wk-all{ --gf-gut:clamp(1.5rem,2.4vw,2.4rem); display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:0; row-gap:48px; padding-top:48px; padding-bottom:96px; }
@media (max-width:1024px){ .wk-all{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .wk-all{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.wk-tile{ justify-self:start; display:block; width:min(calc(100% - var(--gf-gut)), var(--gf-max,288px));
  color:inherit; text-decoration:none; }
.wk-tile .gf-cell{ width:100%; }
.wk-tile:focus-visible{ outline:1px solid var(--ink); outline-offset:6px; }
/* 札: 名前（実績は製品名／架空は「制作例」・種類）とカテゴリー。⚠ 大文字にしない（tracked ALL-CAPS の指紋） */
.wk-tl{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:12px; }
.wk-tl-n{ font-family:'D-DIN-PRO','Noto Sans JP',sans-serif; font-size:.875rem; letter-spacing:.02em; color:var(--ink); }
.wk-tl-k{ font-family:var(--font-en); font-size:.75rem; letter-spacing:.03em; color:var(--ink-3); white-space:nowrap; }
.wk-tile:hover .wk-tl-n, .wk-tile:focus-visible .wk-tl-n{ text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }

/* ── Web: 索引と舞台（.bd の部品を使う。違う所だけ書く） ── */
.ws .wk-head{ border-bottom:1px solid var(--line); padding-bottom:32px; row-gap:12px; }
/* ⚠ 4列は 761px 以上だけ。全幅に掛けると、スマホで WEB が左の細い列に押し込まれた（試作の撮影） */
@media (min-width:761px){
  .ws .wk-head{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  /* ⚠ 見出しは左2列で1行に（1列だと APP / SYSTEM が2行になり、押した直後の1画面に舞台が収まらなかった）。説明は3本目の罫から */
  .ws .wk-h{ grid-column:1 / span 2; }
  .ws .wk-desc{ grid-column:3 / span 2; }
}
.ws .wk-desc p{ margin:0; }
.ws .bd-note{ margin-top:8px; max-width:none; }
.ws .bd-body{ padding-top:32px; padding-bottom:96px; }
/* 縦に並べた時 */
.ws .bd-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 24px; }
@media (max-width:640px){ .ws .bd-steps{ grid-template-columns:1fr; } }
/* 小見出しは下の1点に寄せる（並びの行の間 3〜4rem をそのまま空けると、見出しが浮いた） */
.ws-gh{ grid-column:1 / -1; margin:16px 0 -32px; font-family:var(--font-jp); font-weight:500; font-size:1rem; letter-spacing:.04em; color:var(--ink-2); }
.ws .bd-step{ scroll-margin-top:calc(var(--head-h,64px) + 1rem); }
.ws .bd-no{ order:1; padding-top:12px; }
.ws .ws-cap{ order:2; margin-top:4px; }
.ws-art.is-phones{ display:flex; gap:clamp(.6rem,1.5vw,1rem); }
.ws-art.is-phones img{ display:block; flex:1 1 0; min-width:0; height:auto; border:1px solid var(--line); }
.ws .sm-win[role="button"]{ cursor:pointer; }
.ws .sm-win:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
.ws-cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.ws-name{ font-family:var(--font-jp); font-weight:500; font-size:.9375rem; letter-spacing:.04em; color:var(--ink); }
.ws-catch{ font-family:var(--font-jp); font-size:.875rem; letter-spacing:.04em; color:var(--ink-3); }
.ws-tag{ font-family:var(--font-jp); font-size:.75rem; letter-spacing:.06em; color:var(--ink-3); }
.ws .ws-link{ margin-top:0; }

/* 舞台 */
.ws.is-stage .bd-index{ grid-column:1 / span 3; align-content:start; }
.ws-ih{ grid-column:1 / -1; list-style:none; margin:24px 0 8px; font-family:var(--font-jp);
  font-size:.75rem; letter-spacing:.06em; color:var(--ink-3); }
.ws-ih:first-child{ margin-top:0; }
.ws.is-stage .bd-stage{ grid-column:4 / span 9; margin-top:0; }
.ws.is-stage .bd-steps{ grid-column:4 / span 9; }
.ws.is-stage .ws-gh{ display:none; }
.ws .bd-cap{ align-items:baseline; }
.ws-capx{ flex:1 1 auto; min-width:0; margin-left:24px; }
.ws-capx .ws-cap{ margin:0; }
.ws-capx .ws-link{ margin-left:auto; }
/* ⚠ 枠の高さから絵の幅を決める（container の cqh）。サイトは 16:10 の窓、スマホ画面は2枚を高さいっぱい。
     ⚠ 左に寄せる（舞台の左端＝背景の罫の2本目） */
.ws.is-stage .bd-frame{ container-type:size; display:flex; align-items:flex-start; justify-content:flex-start; }
.ws .bd-frame .ws-art{ height:100%; opacity:1; transition:opacity .26s var(--bd-ease); }
.ws .bd-stage.is-swap .ws-art{ opacity:0; transition:none; }
.ws .bd-frame .ws-art.is-phones{ display:flex; gap:clamp(1rem,2vw,1.6rem); }
.ws .bd-frame .ws-art.is-phones img{ position:static; inset:auto; flex:none; width:auto; height:100cqh; max-width:none; object-fit:contain; }
.ws .bd-frame .ws-art.is-site{ width:100%; }
.ws .bd-frame .sm-shot{ width:min(100cqw, calc((100cqh - 14px) * 1.6 + 14px)); }
.ws .bd-frame .sm-win img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: reduce){ .ws .bd-frame .ws-art{ transition:none; } }

/* ── Graphic（2026-09-11）: 85点を1点ずつ。ロゴは元の画像に替わる ── */
/* 縦に並べた時: /work/graphic/ と同じ正方形のマス */
.ws-graphic .bd-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; }
.ws-graphic .ws-gh{ margin-bottom:-16px; }
@media (max-width:1024px){ .ws-graphic .bd-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .ws-graphic .bd-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ws-graphic .ws-art{ position:relative; aspect-ratio:1; }
/* 縦に並べた時は番号だけ（85点に「作例 Logo」が続いてくどかった・種類は区切りの小見出しで分かる）。⚠ 舞台の写しは消さない */
.ws-graphic:not(.is-stage) .bd-step .ws-cap{ display:none; }
.ws-art.is-mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .26s var(--bd-ease); }
.ws-b{ opacity:0; }
.ws-b:not([src]){ visibility:hidden; }
.ws-art.is-board .ws-b{ opacity:1; }
.ws-art.is-board .ws-m{ opacity:0; }
.ws-flip{ position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
button.ws-flip:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
/* ⚠ 写真は原寸より大きくしない（width/height は auto、max で収めるだけ） */
.ws-art.is-photo{ display:flex; align-items:center; justify-content:center; }
.ws-art.is-photo img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; }
.ws-art.is-poster img{ border:1px solid var(--line); }
/* 舞台 */
.ws.is-stage .bd-frame .ws-art.is-mark, .ws.is-stage .bd-frame .ws-art.is-photo{ width:100%; height:100%; aspect-ratio:auto; }
.ws.is-stage .bd-frame .ws-art.is-mark img{ object-position:left center; }
.ws.is-stage .bd-frame .ws-flip{ cursor:default; }
.ws.is-stage .bd-frame .ws-art.is-photo{ align-items:center; justify-content:flex-start; }
.ws.is-stage .bd-frame .ws-art.is-photo img{ position:static; inset:auto; max-width:100%; max-height:100cqh; }
/* ⚠ 85段。1段 40vh（56vh だと 47画面ぶん続く） */
.ws-graphic.is-stage .bd-step{ height:40vh; }
.ws-graphic.is-stage .bd-step:last-child{ height:calc(40vh + 50vh); }
/* ⚠ 索引は6列。それでも低い画面で収まらない時は、索引の中だけを送る（JS がいまの番号を見える所へ） */
.ws-graphic.is-stage .bd-index{ grid-template-columns:repeat(6,1fr); max-height:calc(100vh - var(--bd-top) - 1.5rem);
  overflow-y:auto; scrollbar-width:thin; }
.ws-graphic .bd-i{ height:32px; }
@media (prefers-reduced-motion: reduce){ .ws-art.is-mark img{ transition:none; } }

/* ── Film: 1本を大きく（映像の左端を舞台と同じ罫に載せる） ── */
.ws-film-body{ padding-top:32px; padding-bottom:96px; }
@media (min-width:1025px){ .ws-film-body{ padding-left:25%; } }
.ws-film-body .shots-in{ display:block; }
.ws-film-body .ws-cap{ margin-top:32px; }

/* 余白（2026-09-11 CEO「余白などがちゃんととれてない」→ company/design/SPACING.md）: スマホ（Mobile のセクション 48〜64px） */
.ws-gh:first-child{ margin-top:0; }
@media (max-width:640px){
  html[data-view] #wlist > .wk-sec{ padding-top:32px; }
  .wk-all{ row-gap:32px; padding-top:32px; padding-bottom:64px; }
  .ws .wk-head{ padding-bottom:24px; }
  .ws .bd-body{ padding-top:24px; padding-bottom:64px; }
  .ws .bd-steps{ gap:40px 16px; }
  .ws-gh{ margin-bottom:-24px; }
  .ws-graphic .bd-steps{ gap:32px 16px; }
  .ws-graphic .ws-gh{ margin-bottom:-16px; }
  .ws-graphic .bd-no{ padding-top:8px; }
  .ws-film-body{ padding-top:24px; padding-bottom:64px; }
}

/* 動きを減らす設定: 帯（/work/web/）は再生しないまま。/work/ は本人が押した・重ねた時だけ再生するので、映像を隠さない（文言審査 note 1） */
@media (prefers-reduced-motion: reduce){ .ws .sm-mov{ display:block; transition:none; } }

/* =====================================================================
   独立採点 r5 の直し（2026-09-11・総合 6.85）。数値は採点側がブラウザで入れて測ったもの
===================================================================== */
/* 1: 舞台の最後の1点・索引が「受託の仕事」の罫に 0px で当たっていた（.bd.is-stage .bd-body の 0 が勝っていた） */
.ws.is-stage .bd-body{ padding-bottom:96px; }
/* 2: 止まっている時、ヘッダーの下 15px・枠の下 270px と偏っていた。
   ⚠ 高さは「押した直後の1画面に舞台が収まる」も守る（採点側の 656px 基準だと 1280×720 で割る）⇒ 100vh − 264px */
/* r6 の直し: 上 32／下 157 と偏っていた → 上 64（高い画面は 160）。⚠ 真ん中に置く案は 1440×900 で Graphic の索引が送りになるので採らない */
.ws.is-stage{ --bd-top:calc(var(--head-h, 75px) + 64px); }
@media (min-height:1040px){ .ws.is-stage{ --bd-top:calc(var(--head-h, 75px) + 160px); } }
.ws.is-stage .bd-stage{ height:min(656px, calc(100vh - 264px)); }
/* 3: SP で最後の1点の罫と「受託の仕事」の罫が二重に */
.ws:not(.is-stage) .bd-step:last-child{ border-bottom:0; padding-bottom:0; }
/* 7: 説明の下の案内が margin:0 に負けて 0px だった */
.ws .wk-desc .bd-note{ margin-top:8px; }
/* 9: リンクの押せる高さ 44px */
.ws .ws-link{ display:inline-flex; align-items:center; min-height:44px; }
/* 5・6: 受託の仕事とフッター（86.4／41.6px → 8px の倍数。見出しは上を大きく、下を小さく） */
.clientwork{ padding-bottom:96px; }
.clientwork .cw-in{ padding-top:96px; }
.clientwork .mi-h{ margin-bottom:0; line-height:1.3; }
footer{ padding-bottom:40px; }
.foot-in{ padding-top:40px; }
@media (max-width:760px){ .clientwork .cw-in{ row-gap:16px; } }
@media (max-width:640px){
  /* 4: All の左右の余白 20／44px → 揃える */
  .wk-all{ column-gap:16px; }
  .wk-all .wk-tile{ width:100%; }
  /* 8 */
  .ws-film-body .ws-cap{ margin-top:24px; }
  .clientwork{ padding-bottom:48px; }
  .clientwork .cw-in{ padding-top:48px; }
  /* 9: 絞り込みは横1列で送る（FILM だけ2行目に落ちていた）。/work/graphic/ の .gf-bar と同じ見せ方 */
  .filters-wrap .filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-block:4px; padding-right:24px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); }
  .filters-wrap .filters::-webkit-scrollbar{ display:none; }
  .filters-wrap .chip{ flex:none; }
}

/* =====================================================================
   独立採点 r6（総合 7.01・合格）の直し。数値は採点側がブラウザで入れて測ったもの
===================================================================== */
/* 舞台の番号の行: 44px のリンクで行が伸び、段を切り替えると枠の高さが 19px 変わっていた。押せる高さは余白で保つ */
.ws .bd-cap .ws-link, .ws-film-body .ws-link{ min-height:0; padding-block:12px; margin-block:-12px; }
/* 案内が2行の段だけ見出しが 12px 下がっていた */
.ws .wk-head{ align-items:start; }
@media (max-width:640px){
  /* 右端のぼかしが最後の chip に掛かっていた・上下の 4px で 8 の倍数から外れていた */
  .filters-wrap .filters{ padding-right:40px; margin-block:-4px; }
}
/* 縦に並べた時の罫は「1列の時」だけ（スマホの App / System・Web）。
   ⚠ 多列だと最後の行に片側だけ罫が残る。列の数は幅と区切りの小見出しで変わるので、nth-last-child では当てられなかった
     （採点 r6 の案は 768・1024・1280 のタッチと SP の Graphic で外れた＝ws9_test「最後の行に罫が残らない」が捉えた）。
     多列は /work/graphic/ のマスと同じく、間の余白だけで区切る */
.ws:not(.is-stage) .bd-step{ border-bottom:0; padding-bottom:0; }
@media (max-width:640px){
  .ws-product:not(.is-stage) .bd-step, .ws-web:not(.is-stage) .bd-step{ border-bottom:1px solid var(--line); padding-bottom:16px; }
  .ws-product:not(.is-stage) .bd-step:last-child, .ws-web:not(.is-stage) .bd-step:last-child{ border-bottom:0; padding-bottom:0; }
}

/* =====================================================================
   All のページ送り（2026-09-12 CEO「allで一部しかみれなくなってるけど、ページャーはないの？」）
   全点を 24 マスずつ。出し分けは html[data-page]（#wlist より前の script が # から決める）とマスの data-p。
   ⚠ JS が無ければ data-view も data-page も付かず、全点が並ぶだけ（ページ送りも出ない）
===================================================================== */
/* ⚠ 8 ページぶん。増やす時は build_work.ALL_MAX_PAGES と一緒に（超えると build が止まる） */
html[data-page="1"] #all > .wk-tile:not([data-p="1"]),
html[data-page="2"] #all > .wk-tile:not([data-p="2"]),
html[data-page="3"] #all > .wk-tile:not([data-p="3"]),
html[data-page="4"] #all > .wk-tile:not([data-p="4"]),
html[data-page="5"] #all > .wk-tile:not([data-p="5"]),
html[data-page="6"] #all > .wk-tile:not([data-p="6"]),
html[data-page="7"] #all > .wk-tile:not([data-p="7"]),
html[data-page="8"] #all > .wk-tile:not([data-p="8"]){ display:none; }
.wk-pager{ display:none; grid-column:1 / -1; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 24px; }
/* ⚠ 上に罫を引かない。受託の仕事の罫と2本で挟まれ、ページ送りが空の帯に浮いて見えた（2026-09-12 目で見て） */
html[data-view="all"] #all > .wk-pager{ display:flex; }
.wk-pg-count{ margin:0; font-family:'D-DIN-PRO','Noto Sans JP',sans-serif; font-size:.875rem; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--ink-3); }
/* ⚠ 押せる所は 44px。文字の外の余白 12px ぶん右へ出し、「次へ」の字の右端を罫の右端に揃える */
.wk-pg-links{ display:flex; align-items:center; margin-right:-12px; }
.wk-pg-links a{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px; color:var(--ink-3); text-decoration:none;
  font-family:var(--font-en); font-size:.8125rem; letter-spacing:.03em; font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease); }
.wk-pg-links .wk-pg-step{ font-family:var(--font-jp); letter-spacing:.04em; }
.wk-pg-links a:hover, .wk-pg-n[aria-current="page"]{ color:var(--ink); }
/* 今のページ: 索引（.bd-i）と同じ細い罫 */
.wk-pg-n[aria-current="page"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:10px; height:1px; background:var(--ink); }
/* ⚠ 端のページの「前へ／次へ」は消す（薄くすると読めない文字が残る）。場所は空けたまま（数字が左右に動かない） */
.wk-pg-links a[aria-disabled="true"]{ visibility:hidden; }
.wk-pg-links a:focus-visible{ outline:1px solid var(--ink); outline-offset:-1px; color:var(--ink); }
@media (max-width:640px){
  /* スマホ: 件数の下に、前へ〜次へを横幅いっぱいに */
  .wk-pg-links{ width:calc(100% + 24px); margin-inline:-12px; justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce){ .wk-pg-links a{ transition:none; } }

/* 絞り込みの件数（2026-09-15）: 読み上げ用の .sr-only（position:absolute）の基準をボタンにする。
   ⚠ 基準が無いと横送りの枠の外（ページの右）に置かれ、スマホの画面が 390→473px に広がってヘッダーの CONTACT が外に出た */
.filters .chip{ position:relative; }
/* 件数の注記（2026-09-15 CEO「はい」）: ボタンのすぐ下。近い関係なので 12px（company/design/SPACING.md）。色と字は .bd-note・札の小さい字と同じ系 */
.filters-note{ margin:12px 0 0; font-family:var(--font-jp); font-size:.75rem; line-height:1.6; letter-spacing:.03em; color:var(--ink-3); }
/* ⚠ スマホで最後の「す。」だけが2行目に落ちた（2026-09-15 撮った画面）。.bd-note と同じく文節で折り、行の長さをそろえる */
.filters-note{ line-break:strict; word-break:keep-all; word-break:auto-phrase; overflow-wrap:anywhere; text-wrap:balance; }
/* ⚠ それでも「Web は／22点のうち…」と語の間で折れた。「、」の前後を折れない塊にし、スマホは「、」の後だけで折る（文言再審査 note 1） */
.filters-note .nb{ display:inline-block; }

/* 画像だけの制作例（縦長のページ1枚）: 窓は上だけ見せ、止まる・重ねる・押すと下まで流す */
.sm-win.is-tall img{ object-fit:cover; object-position:50% 0; transition:object-position var(--dur,9s) linear; }  /* 縦の長さに比例（MAREA だけ約3倍の長さ） */
.sm-win.is-tall.is-playing img{ object-position:50% 100%; }
@media (prefers-reduced-motion:reduce){ .sm-win.is-tall img{ transition-duration:.01s; } }

/* 小さい字の字間（2026-10-16 CEO「文字間のスペースが狭いので小さい文字の時の英字などはみにくい」）
   12〜13px の英字のラベル・番号は .08em、和文の注記は .06em。大きい見出しは触らない */
.wk-tl-k,.bd-no,.bd-cur,.bd-of,.bd-i,.wk-pg-n,.wk-pg-links a,.wk-pg-count,.head-chapter{ letter-spacing:.08em; }
.filters-note,.nb,.bd-note,.shots-note,.spec dd,.shots figcaption,.wk-pg-links .wk-pg-step{ letter-spacing:.06em; }

/* 導線（2026-10-16）: フッターのサービスと料金・詳細ページの末尾の相談 */
.foot-svc{ display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; align-items:baseline; padding-top:2rem; padding-bottom:1.2rem;
  font-family:var(--font-jp); font-size:.875rem; letter-spacing:.05em; }
.foot-svc span{ flex-basis:100%; font-size:.75rem; letter-spacing:.08em; color:var(--ink-3); }
.foot-svc a{ color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:.15rem; }
.foot-legal{ font-family:var(--font-jp); font-size:.75rem; letter-spacing:.06em; color:var(--ink-3); }
.wcta{ border-top:1px solid var(--rule, rgba(0,0,0,.12)); }
.wcta-in{ display:flex; flex-wrap:wrap; gap:1rem 2.4rem; padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem);
  font-family:var(--font-jp); font-size:clamp(1rem,1.4vw,1.15rem); font-weight:500; letter-spacing:.05em; }
.wcta-in a{ color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:.2rem; }
.foot-end{ display:flex; gap:1.6rem; align-items:baseline; justify-content:flex-end; flex-wrap:nowrap; white-space:nowrap; }
@media (max-width:640px){ .foot-end{ justify-content:flex-start; } }