/* =====================================================================
   /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);
  --font-en:'D-DIN-PRO','Inter Tight',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);
  --ease:cubic-bezier(.16,1,.3,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); }
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 .55s ease; }
/* ⚠ シマーは .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);
}
.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); }
@media (max-width:1024px){ .gl-inner{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .gl-inner{ grid-template-columns:1fr; } }

/* ---------- 右端の座標タグ（トップと同じ） ---------- */
.coord-tag{
  position:fixed; right:calc(var(--gut) * .42); top:50%; transform:translateY(-50%);
  z-index:40; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-en); font-weight:500; font-size:.6rem; letter-spacing:.24em;
  color:var(--ink-4); 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 .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}
header.scrolled{
  /* ⚠ かつて 70% の白だった。黒い面（プランの Standard・.wnext の反転帯）の上に来ると
       #b8b8b8 相当まで沈み、章ラベルが **2.53:1**、901px以上ではナビ3項目も基準割れ。
     ⚠ 半透明の帯は「後ろに何が来るか」を決めないと、**特定のスクロール位置でだけ**壊れる。
       止まって見ている限り気づけない種類の欠陥。
     ⇒ ぼかしの質感は残したまま、地の白を .92 まで上げて背景依存を断つ
       （#111111 の上でも #eeeeee 相当。章ラベル #6f6f6f で 4.35:1）。 */
  background-color:rgba(255,255,255,.92);
  -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(4rem,9vw,9rem) clamp(2.5rem,5vw,4rem); }
.work-head .top{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; }
.work-head h1{ font-size:clamp(3rem,13vw,11rem); }
.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:.4rem .5rem; }
.chip{
  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 .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chip-n{ font-size:.56rem; letter-spacing:.14em; opacity:.55; 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{
  position:relative; display:grid; align-items:center;
  grid-template-columns:4.5rem minmax(0,1.15fr) minmax(0,1fr) 5rem 1.5rem;
  gap:1.5rem; padding-block:clamp(1.5rem,2.6vw,2.4rem);
  padding-inline:clamp(.6rem,1.4vw,1.4rem);
  margin-inline:calc(clamp(.6rem,1.4vw,1.4rem) * -1);
  transition:color .5s var(--ease);
  isolation:isolate;
}
/* 黒スラブ反転（トップのカードと同じ言語） */
.wrow > a::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s 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{ font-family:var(--font-en); font-weight:500; font-size:.72rem; letter-spacing:.2em; color:var(--ink-4); transition:color .5s var(--ease); }
.wrow > a:hover .wnum{ color:rgba(255,255,255,.55); }
.wmain{ display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.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:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); transition:color .5s var(--ease); }
.wrow > a:hover .wtypes{ color:rgba(255,255,255,.5); }
.wjp{ font-family:var(--font-jp); font-size:.78rem; color:var(--ink-3); letter-spacing:.045em; transition:color .5s var(--ease); }
.wrow > a:hover .wjp{ color:rgba(255,255,255,.72); }
.wyear{ font-family:var(--font-en); font-weight:500; font-size:.74rem; letter-spacing:.16em; color:var(--ink-4); text-align:right; font-variant-numeric:tabular-nums; transition:color .5s var(--ease); }
.wrow > a:hover .wyear{ color:rgba(255,255,255,.55); }
/* 矢印はSVG。↗の文字はD-DIN-PROに無く、フォールバックで斜め線だけになる */
.warrow{ width:18px; height:18px; justify-self:end; opacity:.3; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.wrow > a:hover .warrow{ opacity:1; transform:translate(2px,-2px); }

/* 個別ページが無い行＝押せない。押せそうにも見せない */
.wrow > .norow{ color:var(--ink); }
.wrow > .norow .wname{ color:var(--ink-3); }
.wrow > .norow .wstate{
  grid-column:4 / span 2; text-align:right;
  font-family:var(--font-jp); font-size:.66rem; color:var(--ink-4); letter-spacing:.045em;
}

/* --- ホバーで出る画面（静止時グレースケール → 触れると色が戻る） --- */
.wthumb{
  position:absolute; right:clamp(3.5rem,9vw,9rem); top:50%;
  display:flex; gap:.55rem; pointer-events:none; z-index:1;
  transform:translate(26px,-50%); opacity:0;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.wthumb img{
  width:clamp(74px,7vw,104px); height:auto;
  border-radius:7px; border:1px solid rgba(255,255,255,.18);
}
.wrow > a:hover .wthumb, .wrow > a:focus-visible .wthumb{ opacity:1; transform:translate(0,-50%); }
@media (max-width:1100px){ .wthumb{ display:none; } }

@media (max-width:760px){
  .wrow > a, .wrow > .norow{ grid-template-columns:3rem minmax(0,1fr) 1.5rem; row-gap:.6rem; }
  .wjp{ grid-column:2 / span 2; }
  .wyear{ grid-column:1 / span 1; text-align:left; }
  .wrow > .norow .wstate{ grid-column:2 / span 2; text-align:left; }
  .warrow{ align-self:start; margin-top:.35rem; }
}

/* --- 受託の一文（実績として数えない） --- */
.clientwork{ border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5.5rem); }
.clientwork .cw-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:2rem; }
.clientwork p{ font-family:var(--font-jp); font-size:.85rem; color:var(--ink-2); letter-spacing:.045em; max-width:44ch; }
@media (max-width:760px){ .clientwork .cw-in{ grid-template-columns:1fr; gap:1.2rem; } }

/* =====================================================================
   個別ページ
===================================================================== */
.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 .4s var(--ease), border-color .4s 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-4); }
.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 .4s 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:.68rem; color:var(--ink-4);
  margin-top:1rem; letter-spacing:.045em;
}
.shots-note{
  font-family:var(--font-jp); font-size:.66rem; color:var(--ink-4);
  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-4); }
.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-4); 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 .55s var(--ease); }
.wnext a::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform .55s 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 .55s 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; }

/* フッター */
footer{ border-top:1px solid var(--line); padding-block:2.6rem; }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.foot-in span{ font-family:var(--font-en); font-weight:500; font-size:.64rem; letter-spacing:.22em; color:var(--ink-4); text-transform:uppercase; }

@media (prefers-reduced-motion: reduce){
  *{ 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 に千紗さんの判断で外した。
     ⇒ 画面上に「架空」と書いた場所は無い。実績と混ぜて良い、という意味ではない。
===================================================================== */
.samples{ border-top:1px solid var(--line); 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-4); }
.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:.74rem;
  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:.72rem; 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:.78rem; letter-spacing:.04em;
  color:var(--ink-3); }

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