/* 写真の傾き：角度と、+/- が 1 往復する長さ */
:root { --tilt-a: 3deg; --tilt: 2.4s; }
:root {
  --paper: #f4f1ea;
  --ink: #1b1b19;
  --blue: #2f45ff;
  --mute: rgba(27, 27, 25, .55);
  /* 墨色の透明度違い。近い値は丸めて 5 段（.08〜.16 → 10・15、.3〜.4 → 35、.45、.55 は --mute） */
  --ink-10: rgba(27, 27, 25, .1);
  --ink-15: rgba(27, 27, 25, .15);
  --ink-35: rgba(27, 27, 25, .35);
  --ink-45: rgba(27, 27, 25, .45);
  /* 紙色の透明度違い */
  --paper-25: rgba(244, 241, 234, .25);
  --paper-60: rgba(244, 241, 234, .6);
  --paper-80: rgba(244, 241, 234, .8);
  /* 夜の紺（影・終わりの頁の暗幕）。#0a0a28 と、(0,0,40)・(0,0,50) の影の色を丸めた */
  --navy: #0a0a28;
  --navy-10: rgba(10, 10, 40, .1);
  --navy-30: rgba(10, 10, 40, .3);
  --navy-60: rgba(10, 10, 40, .6);
  --card: #fffdf8;   /* 索引カードの面（#fbfaf6 の台紙も丸めた） */
  --title-size: 80px;   /* 見出しの大きさ（72・80・84 を丸めた。スマホの 96・120 は別） */
  --outline-color: var(--paper);
  --outline-width: .16em;
  --sans: "LINE Seed JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono: "DM Mono", monospace;  
  --serif: "Fraunces", serif;  
  --bold: 500;
  --view-height: 100lvh;
  --view-top: 0px;
  --view-fixed-top: 0px;
  --view-bottom: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s;
}
body.is-blue { background: var(--blue); }
body.is-dark { background: var(--ink); }
a { color: inherit; text-decoration: none; }

/* ---------- ヘッダー（画面に固定） ---------- */
.site-header {
  opacity: 0;
  position: fixed; inset: var(--view-fixed-top) 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 40px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 36px 22px;
  color: var(--ink);
  transition: color .4s;
}
.is-blue .site-header, .is-dark .site-header { color: var(--paper); }
/* 紙色の文字のときだけ、明るい写真がヘッダーの下を通っても読めるように薄い影を付ける（墨色の文字には付けない） */
.is-blue .logo, .is-dark .logo, .is-blue .gnav a, .is-dark .gnav a { text-shadow: 0 0 6px var(--navy-30), 0 1px 2px var(--navy-30); }
.logo { display: block; flex: 0 0 auto; }
/* ロゴ：編集できる文字と CSS グラデーション（private/MOBILE_BRANCH_HANDOFF.md の採用元をそのまま使う） */
.logo-test .wordmark {
  margin: 0;
  font-family: "LINE Seed JP", sans-serif;
  font-size: clamp(28px, 8vw, 96px);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: var(--tracking);
  white-space: nowrap;
}
.logo-test .glyph { display: inline-block; }
.logo-test .glyph:last-child { letter-spacing: 0; }
.logo-test .i { color: var(--blue); }
/* Letter spacing is excluded from the gradient's painted width. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .logo-test .stem {
    background-image: var(--bands);
    background-size: calc(100% - var(--tracking)) 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   /* color は残す（墨の部分が currentColor を引き継ぐため） */
  }
  /* 帯：縦線（青）の左右に、縦線の幅 × --band の幅で背景色の帯を入れる。
     縦線の端（--a0〜--a1、--b0〜--b1）は、送り幅に対する % 。font-weight 700 の字形から測った値。
     400 に戻すときの値：Y 43.95/56.22、R 13.53/26.19、M 9.65/18.39・81.63/90.37、H 11.92/23.07・77.08/88.11 */
  .logo-test .stem {
    --ba: calc((var(--a1) - var(--a0)) * var(--band));   /* 左（または唯一）の縦線の帯の幅 */
    --bb: calc((var(--b1) - var(--b0)) * var(--band));   /* 右の縦線の帯の幅（M・H） */
  }
  .logo-test .y { --a0: 40.53; --a1: 59.49; --bands: linear-gradient(90deg, var(--ink) 0 calc((var(--a0) - var(--ba)) * 1%), var(--paper) calc((var(--a0) - var(--ba)) * 1%) calc(var(--a0) * 1%), var(--blue) calc(var(--a0) * 1%) calc(var(--a1) * 1%), var(--paper) calc(var(--a1) * 1%) calc((var(--a1) + var(--ba)) * 1%), var(--ink) calc((var(--a1) + var(--ba)) * 1%) 100%); }
  .logo-test .r { --a0: 11.87; --a1: 31.76; --bands: linear-gradient(90deg, var(--ink) 0 calc((var(--a0) - var(--ba)) * 1%), var(--paper) calc((var(--a0) - var(--ba)) * 1%) calc(var(--a0) * 1%), var(--blue) calc(var(--a0) * 1%) calc(var(--a1) * 1%), var(--paper) calc(var(--a1) * 1%) calc((var(--a1) + var(--ba)) * 1%), var(--ink) calc((var(--a1) + var(--ba)) * 1%) 100%); }
  .logo-test .m { --a0: 8.48; --a1: 22.11; --b0: 77.81; --b1: 91.54; --bands: linear-gradient(90deg, var(--blue) 0 calc(var(--a1) * 1%), var(--paper) calc(var(--a1) * 1%) calc((var(--a1) + var(--ba)) * 1%), var(--ink) calc((var(--a1) + var(--ba)) * 1%) calc((var(--b0) - var(--bb)) * 1%), var(--paper) calc((var(--b0) - var(--bb)) * 1%) calc(var(--b0) * 1%), var(--blue) calc(var(--b0) * 1%) 100%); }
  .logo-test .h { --a0: 10.44; --a1: 27.95; --b0: 72.07; --b1: 89.58; --bands: linear-gradient(90deg, var(--blue) 0 calc(var(--a1) * 1%), var(--paper) calc(var(--a1) * 1%) calc((var(--a1) + var(--ba)) * 1%), var(--ink) calc((var(--a1) + var(--ba)) * 1%) calc((var(--b0) - var(--bb)) * 1%), var(--paper) calc((var(--b0) - var(--bb)) * 1%) calc(var(--b0) * 1%), var(--blue) calc(var(--b0) * 1%) 100%); }
}
.logo-test { --band: .5;   /* 帯の幅：縦線の幅に対する割合 */
  --tracking: .28em; margin: 24px 0 32px; padding: 28px 0; }
.logo-test p { margin-top: 16px; }
/* Lower copy only: balance the spaces between glyph envelopes.
   Per-glyph tracking also keeps the painted gradient width unchanged. */
.logo-test .wordmark-optical { margin-top: 28px; }
.logo-test .wordmark-optical .glyph { letter-spacing: var(--tracking); }
.logo-test .wordmark-optical .glyph:nth-child(1) { --tracking: .2166em; } /* Y–O */
.logo-test .wordmark-optical .glyph:nth-child(2) { --tracking: .2872em; } /* O–R */
.logo-test .wordmark-optical .glyph:nth-child(3) { --tracking: .2995em; } /* R–I */
.logo-test .wordmark-optical .glyph:nth-child(4) { --tracking: .2810em; } /* I–M */
.logo-test .wordmark-optical .glyph:nth-child(5) { --tracking: .2810em; } /* M–I */
.logo-test .wordmark-optical .glyph:nth-child(6) { --tracking: .2881em; } /* I–C */
.logo-test .wordmark-optical .glyph:nth-child(7) { --tracking: .3056em; } /* C–H */
.logo-test .wordmark-optical .glyph:nth-child(8) { --tracking: .2810em; } /* H–I */
.logo-test .wordmark-optical .glyph:last-child { --tracking: 0em; }
/* サイトへ入れる際の配置・サイズの上書き */
.site-header .logo-test,
.en-logo .logo-test {
  display: block;
  margin: 0;
  padding: 0;
}
.site-header .logo-test .wordmark-optical,
.en-logo .logo-test .wordmark-optical {
  display: block;
  margin-top: 0;
  font-size: 17.55px; /* 現在の輪郭・字間で全幅およそ140px。両箇所を共通に調整する */
}
/* 背景に合わせた色：墨の部分は文字色（currentColor）、帯は背景色、青は青背景のときだけ紙色 */
.logo-test { --ink: currentColor; }
.is-blue .site-header .logo-test { --blue: #f4f1ea; --paper: #2f45ff; }
.is-dark .site-header .logo-test { --paper: #1b1b19; }
body.menu-open .site-header .logo-test { --paper: #f4f1ea; --blue: #2f45ff; }
.gnav { display: flex; gap: 28px; margin-left: auto; font: 400 13px/1 var(--sans); letter-spacing: .08em; }
.gnav a { position: relative; padding: 6px 0; }
.gnav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.6, 0, .2, 1); }
.gnav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* --cb-icon-color：アイコンの色。文字色と背景色のうち紙色でない方にする（既定は文字色。墨や青の地に紙色の文字のボタンでは背景色を指定する） */
/* 基本のボタン：方位磁針。大きさは rem の値に --cb-k を掛けて決める（場所ごとに --cb-k だけ変える）。色は --cb-bg・--cb-fg
   文字盤のアイコンは右端に半分はみ出し、difference で地の色から浮く。SVG の中の線の太さと針の軸（24px）は viewBox（48）の単位 */
.btn-compass {
  --cb-k: 1;
  --cb-bg: var(--ink); --cb-fg: var(--paper);
  --cb-h: 3.5rem; --cb-w: 12.5rem; --cb-pl: 1.5rem; --cb-pr: 4rem;
  --cb-fz: 1rem; --cb-fw: 700; --cb-ls: 0em;
  --cb-icon: 3rem; --cb-icon-scale: 1.5; --cb-icon-x: 25%; 
  --cb-ring: .5px;
  --cb-rest: -35deg; --cb-turn: 90deg; --cb-dur: .9s; --cb-ease: cubic-bezier(.3, 1.6, .5, 1);
  display: inline-block; align-content: center;
  min-height: calc(var(--cb-h) * var(--cb-k)); min-width: calc(var(--cb-w) * var(--cb-k));
  padding-block: 0; padding-inline: calc(var(--cb-pl) * var(--cb-k)) calc(var(--cb-pr) * var(--cb-k)); border-radius: 999px;
  background: var(--cb-bg); color: var(--cb-fg);
  font-size: calc(var(--cb-fz) * var(--cb-k)); font-weight: var(--cb-fw); letter-spacing: var(--cb-ls);
  text-align: left; text-decoration: none; white-space: nowrap;
}
.btn-compass .dial {
  position: absolute; right: 0; top: 50%; width: calc(var(--cb-icon) * var(--cb-k)); height: calc(var(--cb-icon) * var(--cb-k));
  border-radius: 50%; box-shadow: inset 0 0 0 var(--cb-ring) currentColor;
  color: var(--cb-icon-color, currentColor); mix-blend-mode: difference; pointer-events: none;   /* アイコンの色を反転（filter）してから差を取る：紙のボタンの上では元の色に戻る */
  transform: translate(var(--cb-icon-x), -50%) scale(var(--cb-icon-scale));
  filter: invert(1);
}
.btn-compass .dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }   /* 目盛りは円の外に出す */
.btn-compass .ticks line { stroke: currentColor; stroke-width: .5; opacity: .55; }
.btn-compass .ticks line.major { stroke-width: .8; opacity: 1; }
.btn-compass .needle { transform-origin: 24px 24px; transform: rotate(var(--cb-rest)); transition: transform var(--cb-dur) var(--cb-ease); }
.btn-compass:hover .needle { transform: rotate(var(--cb-turn)); }
.btn-compass .n-line, .btn-compass .n-tip { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }   /* 針は 1 本の線と、先のシェブロンだけ */
.btn-compass .pin { fill: currentColor; }
/* 修飾：方位磁針をボタンの右端に収め、ボタンの高さと同じ大きさにする（拡大しない）。右の余白＝方位磁針の大きさ＋.5em（文字が方位磁針にくっつかない） */
.btn-compass.is-edge { --cb-icon: var(--cb-h); --cb-icon-scale: 1; --cb-icon-x: 0%; padding-inline-end: calc(var(--cb-icon) * var(--cb-k) + .5em); }
.btn-head {
  position: relative; --cb-k: .8; --cb-icon-color: var(--ink); min-width: unset;
  transition: background-color .4s, color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.btn-head:hover { transform: rotate(-4deg) scale(1.06); }
.is-blue .btn-head { --cb-bg: var(--paper); --cb-fg: var(--blue); --cb-icon-color: var(--blue); }
.is-dark .btn-head { --cb-bg: var(--paper); --cb-fg: var(--ink); }
body.menu-open .site-header { z-index: 62; opacity: 1 !important; color: var(--ink) !important; background: var(--paper); }
body.menu-open .site-header .logo { text-shadow: none; }
body.menu-open .site-header .btn-head { --cb-bg: var(--ink); --cb-fg: var(--paper); }
@media (max-width: 900px) {
  .gnav { display: none; }
  .btn-head { margin-left: auto; }
  .site-header { padding-inline: 18px; }
}

/* ---------- 舞台（高さは JS が区切りから決める） ---------- */
.theater { position: relative; height: 1729.6lvh; }   /* 高さは JS（main.js・modules/*.js）が決めるのと同じ値。読み込み時のレイアウト移動を防ぐため CSS でも先に予約する */
.stage { position: sticky; top: var(--view-top); height: var(--view-height); overflow: hidden; }
#grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.css3d { position: absolute; inset: 0; pointer-events: none; }
.stage:not(.ready) .pg { visibility: hidden; }
/* 画面から離れたシーンは描かない（ブラウザが絵を捨てられるので、GPU のメモリがたまらない）。modules/offscreen.js */
section.is-off { visibility: hidden; }

/* ---------- 頁（単位は頁の px） ---------- */
.pg { position: absolute; left: 0; top: 0; height: 1080px; transform-style: preserve-3d; }
.pg > * { position: absolute; margin: 0; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); white-space: nowrap; }

/* 1 字ずつ出る（不透明度と位置は JS が t から決める） */
.split .c { display: inline-block; opacity: 0; }

/* リビール：字が下から行の枠の中へせり上がる */
.rv { overflow: hidden; padding: 0 .14em .14em 0; margin: 0 -.14em -.14em 0; }
.svb .rv { display: block; }
.lm { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.rv .lm + .lm { margin-top: 0; }

/* 行ごとに出る */
.ln2 { display: block; opacity: 0; }

/* 画像やボタンが置かれる */
.pop { opacity: 0; }

.lbl { font: 500 19px/1 var(--sans); letter-spacing: .22em; }
.lbl .mk { display: inline-block; width: 11px; height: 11px; margin-right: 16px; border-radius: 50%; background: var(--blue); vertical-align: .05em; }

/* 写真（全区画で共通）：白い縁（四角のまま）と影。写真だけ左上と右下を斜めに切り落とし、2 つの角で挟んで留めたように見せる。
   --fr-bd＝白い縁の太さ、--fr-cut＝切り落とす角の長さ。.ph が一定の間隔で +/- の 2 つの角度に切り替わる。ずれは nth-child で付ける */
.ph { --fr-bd: 10px; --fr-cut: 2.5rem; position: relative; transform-style: preserve-3d; animation: tilt var(--tilt) step-end infinite;
  padding: var(--fr-bd); background: #fff;
  box-shadow: 0 30px 60px -28px var(--ink-45), 0 2px 6px var(--ink-10);
}
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(1px); }   /* 白い地（.ph）と同じ奥行きだと 3D の中で重なり順が揺れてちらつくので、写真を 1px 手前へ */
.ph img, .tm-print img, #seed img { clip-path: polygon(var(--fr-cut) 0, 100% 0, 100% calc(100% - var(--fr-cut)), calc(100% - var(--fr-cut)) 100%, 0 100%, 0 var(--fr-cut)); }
:nth-child(3n+2) > .ph { animation-delay: calc(var(--tilt) / -3); }
:nth-child(3n) > .ph { animation-delay: calc(var(--tilt) / -1.5); }
@keyframes tilt { 0% { rotate: calc(var(--tilt-a) * -1); } 50%, 100% { rotate: var(--tilt-a); } }
/* 写真の縁取り：校正紙（四隅の一重のトンボの縦と横の線）。.ph に fr-proof を足すと、白い縁の代わりにトンボで縁取る（影は残す）。
   線は文字色。--fr-len＝印の長さ、--fr-gap＝写真からの距離、--fr-w＝線の太さ。private/WORKSPACE.html の 05 */
.fr-proof { --fr-c: currentColor; --fr-w: 1px; --fr-len: 1.5rem; --fr-gap: .625rem; --fr-o: calc(var(--fr-gap) + var(--fr-len)); }
.fr-proof::before { content: ""; position: absolute; inset: calc(var(--fr-o) * -1); pointer-events: none;
  background:
    linear-gradient(var(--fr-c), var(--fr-c)) left 0 top var(--fr-o) / var(--fr-len) var(--fr-w) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) left var(--fr-o) top 0 / var(--fr-w) var(--fr-len) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) right 0 top var(--fr-o) / var(--fr-len) var(--fr-w) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) right var(--fr-o) top 0 / var(--fr-w) var(--fr-len) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) left 0 bottom var(--fr-o) / var(--fr-len) var(--fr-w) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) left var(--fr-o) bottom 0 / var(--fr-w) var(--fr-len) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) right 0 bottom var(--fr-o) / var(--fr-len) var(--fr-w) no-repeat,
    linear-gradient(var(--fr-c), var(--fr-c)) right var(--fr-o) bottom 0 / var(--fr-w) var(--fr-len) no-repeat; }
.ph.fr-proof { padding: 0; background: none; }
.ph.fr-proof img { clip-path: none; }
/* 制作物の板：奥行きと位置の補正は JS が transform で付ける */
.card { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform-style: preserve-3d; }
.card .ph { width: 100%; height: 100%; }

/* ---------- 頁：ファーストビュー ---------- */
/* 位置と大きさは、正面から見た画面上の値（奥行きによる縮小は JS が打ち消す）。奥行きは data-z × DEPTH */
#hero > p, #hero .ln { transform-style: preserve-3d; }
/* オープニングの厚み：要素の右端に立てた 1px の側面。真横から見るとこれが線になる */
.edge { position: absolute; top: 0; left: 100%; width: 1px; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); pointer-events: none; }
.edge i { position: absolute; left: 0; width: 1px; background: currentColor; }
.card .edge { background: #c9c2b5; }
#hLabel { --x: 261; --y: 160; font-size: 28.5px; }
#hLabel .mk { width: 16.5px; height: 16.5px; margin-right: 24px; }
.h1 { display: contents; font-weight: var(--bold); }
.h1 .ln { position: absolute; font-size: 132px; line-height: 1.2; letter-spacing: -.02em; }
#h1a { left: 261px; top: 222px; }
#h1b { left: 393px; top: 380px; }
#h1c { left: 525px; top: 538px; }
.dot { position: relative; display: inline-block; width: .38em; height: .38em; margin-left: .1em; border-radius: 50%; background: var(--blue); vertical-align: -.02em; }
#hEn { --x: 702.5; --y: 736; font: italic 400 73px/1.1 var(--serif); letter-spacing: -.01em; color: var(--blue); }
#hSub { --x: 261; --y: 747; font-size: 21.5px; line-height: 1.95; font-weight: 500; letter-spacing: .06em; }
#hSub > span:not(.edge) { display: block; }
/* 架空サイトの注意書き：赤の太字。赤い字が画面の中央に入ると is-gone が付き、1.5 秒（時間）でゆっくり広がり始めて 10 倍になり、消える。一度きり（theater.js） */
#hSub > #hFake { display: inline-block; color: #e5322d; font-weight: var(--bold); }
#hSub > #hFake.is-gone { transform: scale(10); opacity: 0; transition: transform 1.5s ease-in, opacity 1.5s ease-in; }
#c1 { --x: 1029; --y: -34; --w: 693; --h: 465; }
#c2 { --x: -61; --y: 731; --w: 639; --h: 447; }
#c3 { --x: 1528; --y: 786; --w: 467; --h: 569; }

/* 句点の中の小さな写真（私たちについての写真と同じもの）。寄るとこれが大きくなる */
#seed {
  position: absolute; left: 50%; top: 50%; width: .19em; height: calc(.19em * 500 / 700);
  padding: calc(.19em * 10 / 700); background: #fff; --fr-cut: calc(.19em * 40 / 700);   /* 縁と切る角は私たちについての写真（幅 700）と同じ比率 */
  translate: -50% -50%; transform: scale(0);
  animation: tilt var(--tilt) step-end infinite;   /* 私たちについての写真と同じ傾き・同じ間隔 */
}
#seed img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 頁：私たちについて ---------- */
#about { color: var(--paper); }
#about .lbl .mk { background: var(--paper); }
#aPhoto { --x: 110; --y: 236; --w: 700; --h: 500; }
#aLabel { --x: 900; --y: 214; }
.h2 { display: contents; font-weight: var(--bold); }
.h2 .ln { position: absolute; font-size: 64px; line-height: 1.3; letter-spacing: -.01em; }
#aH1 { left: 896px; top: 262px; }
#aH2 { left: 896px; top: 356px; }
#aH3 { left: 896px; top: 450px; }
#aBody { --x: 902; --y: 584; font-size: 21px; line-height: 2.05; font-weight: 500; letter-spacing: .05em; }
.slot { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: -.3em; font: 500 1.25em/1.25em var(--sans); text-align: center; }
.reel { display: flex; flex-direction: column; }
.reel i { font-style: normal; height: 1.25em; }
.btn-about { --x: 902; --y: 790; --cb-k: 1.25; --cb-bg: var(--paper); --cb-fg: var(--blue); pointer-events: auto; }

/* ---------- 画面に固定するもの ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; color: var(--ink); transition: color .4s; }
.is-blue .hud { color: var(--paper); }
.hud .corner { position: absolute; width: 18px; height: 18px; }
.hud .corner::before, .hud .corner::after { content: ''; position: absolute; background: currentColor; opacity: .5; }
.hud .corner::before { left: 0; right: 0; top: 50%; height: 1px; }
.hud .corner::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.hud .tl { left: 26px; top: 84px; } .hud .tr { right: 26px; top: 84px; }
.hud .bl { left: 26px; bottom: 26px; } .hud .br { right: 26px; bottom: 26px; }
/* 進行度のメーター：外周の弧＝ページ全体、中央＝今いる区画 */
.meter {
  position: fixed; left: 40px; bottom: 40px; z-index: 20; width: 112px; height: 112px;
  color: var(--ink); opacity: 0; pointer-events: none; transition: color .4s;
}
.meter.on-blue, .meter.on-dark { color: var(--paper); }
.meter svg { width: 100%; height: 100%; overflow: visible; }
.meter .m-track, .meter .m-bar { fill: none; stroke: currentColor; }
.meter .m-track { stroke-width: 1; opacity: .18; }
.meter .m-bar { stroke-width: 2.5; stroke: var(--blue); stroke-dasharray: 1; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 64px 64px; }
.meter.on-blue .m-bar, .meter.on-dark .m-bar { stroke: var(--paper); }
.meter text { font: 500 8.5px var(--sans); letter-spacing: .38em; fill: currentColor; }
.meter .m-ring { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }   /* 回転は modules/rings.js（スマホナビの輪と同じ周期。非表示のタブと動きを減らす設定では止まる） */
/* 動きを減らす設定：止まっていても続く無限アニメーション（写真の傾き）だけ止める */
@media (prefers-reduced-motion: reduce) {
  .ph, #seed { animation: none; }
}
/* 中央：番号の下にページ全体の進み具合（％）を縦に並べる */
.m-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5px; }
.m-no { font: 500 17px/1 var(--sans); letter-spacing: .06em; }
.m-pct { font: 500 12px/1 var(--sans); letter-spacing: .06em; }
@media (max-width: 900px) { .meter { left: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px) + var(--view-bottom)); width: 84px; height: 84px; } .m-center { gap: 2.5px; } .m-no { font-size: 13px; } .m-pct { font-size: 9px; } }
/* シーンへ移るときの幕 */
.veil { position: fixed; inset: 0; z-index: 40; background: var(--paper); opacity: 0; pointer-events: none; }
.mobile-notice {
  position: fixed; bottom: calc(4px + env(safe-area-inset-bottom, 0px) + var(--view-bottom)); left: 0; z-index: 61;
  width: 100%; overflow: hidden; font: 500 10px/1.4 var(--sans); pointer-events: none;
}
.mobile-notice, .mobile-nav-toggle { color: var(--ink); }
.is-blue .mobile-notice, .is-dark .mobile-notice,
.is-blue .mobile-nav-toggle, .is-dark .mobile-nav-toggle { color: var(--paper); }
body.menu-open .mobile-notice, body.menu-open .mobile-nav-toggle { color: var(--ink); }
.mobile-notice-track { display: flex; width: max-content; animation: mobile-notice-scroll 28s linear infinite; }
.mobile-notice-track span { flex: none; min-width: 100vw; padding-right: 3em; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes mobile-notice-scroll { to { transform: translateX(-50%); } }
/* 注意文はスマホ・タブレット（900px 以下）だけ表示する */
@media (min-width: 901px) { .mobile-notice { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-notice-track { width: 100%; animation: none; }
  .mobile-notice-track span { display: none; }
  .mobile-notice-track span:first-child { display: block; flex: 1; min-width: 0; padding-right: 0; white-space: normal; }
}
/* ---------- できること（普通にスクロールする区画） ---------- */
.services { position: relative; background: var(--paper); padding-block: 24lvh 30lvh; padding-inline: clamp(20px, 6vw, 120px); }
.sv-head { display: flex; flex-direction: column; gap: 32px; margin-bottom: 14lvh; }
.sv-title { margin: 0; font-size: clamp(64px, 10vw, 184px); line-height: 1.1; font-weight: var(--bold); letter-spacing: -.02em; }
.sv-list { list-style: none; margin: 0; padding: 0; }
.sv-row { perspective: 1600px; border-top: 1px solid var(--ink); }
.sv-row:last-child { border-bottom: 1px solid var(--ink); }
.sv-flap {
  display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: baseline; gap: 14px 48px;
  padding-block: 48px 56px;
  transform-origin: 50% 0; backface-visibility: hidden;
}
.sv-no { font: 500 17px/1 var(--sans); letter-spacing: .12em; }
.sv-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; }
.sv-en { font: italic 400 clamp(52px, 6.6vw, 120px)/1 var(--serif); letter-spacing: -.01em; color: var(--blue); }
.sv-ja { font-size: clamp(18px, 1.5vw, 24px); font-weight: var(--bold); letter-spacing: .1em; }
.sv-desc { margin: 0; font-size: 18px; line-height: 1.9; font-weight: 500; letter-spacing: .04em; }
@media (max-width: 900px) { .sv-flap { grid-template-columns: 1fr; padding-block: 36px 40px; } }

/* ---------- 頁：できること（青い机に置かれた紙） ---------- */
#services {
  background: var(--paper);   /* 点の柄は描かない（単色なら、ブラウザは絵を抱えずに塗るだけで済む） */
  box-shadow: 0 60px 120px -40px var(--navy-60);
}
#svLabel { --x: 429; --y: 1112; }
.sv-title2 { --x: 425; --y: 1150; font-size: var(--title-size); line-height: 1.2; font-weight: var(--bold); letter-spacing: -.02em; }
.sym { --x: 1150; --y: 1150; width: 1100px; height: 1100px; transform: translateZ(6px) rotate(45deg); }   /* 紙の背景と同じ奥行きだと重なり順が揺れてちらつくので、手前へ */
.sym .q { position: absolute; width: 550px; height: 550px; }
.q0 { right: 0; top: 0; border-top-right-radius: 100%; }
.q1 { right: 0; bottom: 0; border-bottom-right-radius: 100%; }
.q2 { left: 0; bottom: 0; border-bottom-left-radius: 100%; }
.q3 { left: 0; top: 0; border-top-left-radius: 100%; }
/* 写真：部分は広げず、写真だけを初めから画面の端の外まで届く四分円（半径 550 × --g。--g は JS が画面から求める）に入れておく。JS は不透明度だけを変える。
   丸ごと 45° 回っているので、写真は逆に回して正立させる */
.sym { --g: calc(632 / 550); }   /* 632＝輪の半径 630 ＋ 線の太さの半分（線をちょうど覆う） */
.sym .q-ph { position: absolute; width: calc(550px * var(--g)); height: calc(550px * var(--g)); overflow: hidden; }   /* 角は丸めない（弧は写真の外にあるので四角で切れば足りる。丸い切り抜きより軽い） */
.q0 .q-ph { left: 0; bottom: 0; } .q1 .q-ph { left: 0; top: 0; } .q2 .q-ph { right: 0; top: 0; } .q3 .q-ph { right: 0; bottom: 0; }
.sym { --s: calc(800px * var(--g)); --f: 396px; }   /* --s＝写真の一辺（方位磁針の中心から、寄ったときの画面の右端まで）、--f＝写真の中心までの丸の中心からの縦横の距離（--s ÷ 2 ÷ √2）。どちらも JS が画面から求める */
.sym .q img { position: absolute; width: var(--s); height: var(--s); max-width: none; object-fit: cover; filter: saturate(.85); opacity: 0; will-change: transform, opacity; clip-path: var(--clip, none); }   /* --clip＝境目と画面の上下から余白をとった縁取り（JS） */   /* 倍率が変わっても描き直さない（寄るとぼやけるが、ちらつかない） */
/* 写真の左の辺が丸の中心、右の辺が寄ったときの画面の右端。丸の 45° と、項目ごとのカメラのロール（90° ずつ）を打ち消して、画面の右で正立させる */
.q0 img { left: calc(var(--f) - var(--s) / 2); bottom: calc(var(--f) - var(--s) / 2); transform: rotate(-45deg); }
.q1 img { left: calc(var(--f) - var(--s) / 2); top: calc(var(--f) - var(--s) / 2); transform: rotate(45deg); }
.q2 img { right: calc(var(--f) - var(--s) / 2); top: calc(var(--f) - var(--s) / 2); transform: rotate(135deg); }
.q3 img { right: calc(var(--f) - var(--s) / 2); bottom: calc(var(--f) - var(--s) / 2); transform: rotate(225deg); }
/* 写真は今の項目の部分だけに出る（JS）。ふだんは中に何も描かず、目盛りの輪と境目の線だけ */
.sym .q::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sym-dot { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 14px var(--paper); display: grid; place-items: center; }
.sym-no { font: 500 56px/1 var(--sans); letter-spacing: .04em; color: var(--paper); opacity: 0; }
/* 外周の製図：目盛りの輪と、項目ごとの扇形の塗り */
.sv-draft { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-ring { fill: none; stroke: var(--ink-35); stroke-width: 2; }
.sv-ticks line { stroke: var(--ink-35); stroke-width: 1.5; }
.sv-ticks line.major { stroke: var(--ink); stroke-width: 2.5; }
.sv-cross line { stroke: var(--ink-35); stroke-width: 1; }   /* 4 つの部分の境目 */
.sv-needle { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sv-needle { transform-origin: 50% 50%; will-change: transform; }
.sv-needle .n-head { fill: var(--ink); }
.sv-needle .n-tail { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sv-fans { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.sv-fan { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sv-fan1 { transform: rotate(90deg); } .sv-fan2 { transform: rotate(180deg); } .sv-fan3 { transform: rotate(270deg); }
/* 部分の四角（丸の中心から右上へ一辺 --fr）。中の正方形は右下の角を丸の中心に置き、そこを軸に回る。0° で四角の外（左上）、90° で四角を覆う */
.sv-fan-q { position: absolute; left: 0; top: calc(var(--fr, 3000px) * -1); width: var(--fr, 3000px); height: var(--fr, 3000px); overflow: hidden; }
.sv-fan-h { position: absolute; left: calc(var(--fr, 3000px) * -1.42); top: calc(var(--fr, 3000px) * -.42); width: calc(var(--fr, 3000px) * 1.42); height: calc(var(--fr, 3000px) * 1.42); transform-origin: 100% 100%; transform: rotate(0deg); will-change: transform; }
.sv-fan0 .sv-fan-h { background: #6a94ff; }   /* Branding：くすんだ青 */
.sv-fan1 .sv-fan-h { background: #ffa75b; }   /* Package：素焼きの土色 */
.sv-fan2 .sv-fan-h { background: #bbfa9e; }   /* Editorial：セージ */
.sv-fan3 .sv-fan-h { background: #ff8fba; }   /* Web：くすんだ藤色 */
/* 紙の上の要素は紙と同じ平面にまとめる（別々の 3D の面にするとちらつく） */
#services { transform-style: flat; }
/* 回る間は紙を外へ広げておき、画面の角に机（青）が見えないようにする。紙の端が画面の外にある時刻に切り替える。528＝点の間隔 48 の倍数 */
#services::before { content: ''; position: absolute; inset: -528px; z-index: -1; background: inherit; display: none; }
#services.wide::before { display: block; }
/* 説明：左端の中央を丸の外側に置き、--a だけ回す */
/* 文字は写真（.sym）よりさらに手前に置く。3D の中なので z-index ではなく奥行きで重ねる */
#svLabel, .sv-title2 { transform: translateZ(12px); }
/* 説明のかたまり：紙色（透明度 80%）の地を輝度（luminosity）で重ね、写真と同じ校正紙の縁取り（fr-proof）。余白の分だけ左へずらし、文字の位置は今のまま */
.svb { display: flex; flex-direction: column; gap: 10px; padding: 1.75rem 2.25rem; background: var(--paper-80); mix-blend-mode: luminosity; transform-origin: 0 0; transform: translateZ(12px) rotate(calc(var(--a) * 1deg)) translate(-2.25rem, -50%); }
#svb0 { --x: 2410; --y: 1700; --a: 0; }
#svb1 { --x: 1700; --y: 2410; --a: 90; }
#svb2 { --x: 990; --y: 1700; --a: 180; }
#svb3 { --x: 1700; --y: 990; --a: 270; }
.svb-no { font: 500 22px/1 var(--sans); letter-spacing: .14em; }
.svb-en { font: italic 400 124px/1 var(--serif); letter-spacing: -.01em;  -webkit-text-stroke: 2px currentColor; -webkit-text-fill-color: transparent; }   /* 縁取りの文字：線は文字色、中は紙の色 */
.svb-ja { font-size: 30px; font-weight: var(--bold); letter-spacing: .1em; }
.svb-desc { margin: 10px 0 0; font-size: 22px; line-height: 1.9; font-weight: 500; letter-spacing: .04em; }

/* ---------- 実績（奥へ進む区画） ---------- */
.works { position: relative; z-index: 2; height: 680lvh; margin-top: -100lvh; color: var(--paper); pointer-events: none; }
.wk-stage { position: sticky; top: var(--view-top); height: var(--view-height); overflow: hidden; perspective: 1200px; background: var(--ink); opacity: 0; }
.wk-stage.on { opacity: 1; pointer-events: auto; }
.wk-world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.wk-plane { position: absolute; left: 0; top: 0; }
.wk-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; white-space: nowrap; }
.wk-intro .lbl .mk { background: var(--paper); }
.wk-title { margin: 0; font-size: 102px; line-height: 1.1; font-weight: var(--bold); letter-spacing: -.02em; }
.wk-item { display: grid; grid-template-columns: 880px auto; align-items: end; gap: 56px; }
.wk-item .ph { width: 880px; height: 590px; }
.wk-cap { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; white-space: nowrap; }
.wk-no { margin: 0; font: italic 500 64px/1  var(--serif) ; letter-spacing: -.02em; color: var(--blue); filter: brightness(1.6); }
.wk-meta { margin: 0; font: 400 16px/1 var(--sans); letter-spacing: .16em; opacity: .7; }
.wk-client { margin: 18px 0 0; font-size: 40px; line-height: 1.3; font-weight: var(--bold); letter-spacing: .02em; }
.wk-desc { margin: 0; font-size: 18px; line-height: 1.9; font-weight: 500; letter-spacing: .04em; opacity: .85; }
.wrv { overflow: hidden; padding: 0 .14em .14em 0; margin-right: -.14em; margin-bottom: -.14em; }
.wrv .c { display: inline-block; }
.wk-cap .btn-works { margin-top: 22px; align-self: flex-start; pointer-events: auto; }
.btn-works { position: relative; --cb-k: 1.375; --cb-bg: var(--paper); --cb-fg: var(--ink); }
/* 右下の一覧（元ネタの目次） */
.wk-index { position: absolute; right: 48px; bottom: 48px; margin: 0; padding: 0; list-style: none; perspective: 600px; display: flex; flex-direction: column; gap: 12px; }
.wk-index li { display: flex; align-items: baseline; gap: 14px; font-size: 15px; font-weight: var(--bold); letter-spacing: .06em; transform-origin: 100% 50%; opacity: 0; }
.ix-lead { width: 120px; height: 2px; align-self: center; background: radial-gradient(circle, currentColor 1px, transparent 1.3px) 0 50% / 6px 2px repeat-x; transform-origin: 0 50%; transform: scaleX(0); }
.ix-no { font: 500 15px/1 var(--sans); letter-spacing: .08em; }
@media (max-width: 900px) { .wk-index { right: 18px; bottom: 120px; } .wk-index li { font-size: 12px; } .ix-lead { width: 60px; } }

/* ---------- 数字（281 枚の索引カードの引き出し。1 枚＝1 件の仕事） ---------- */
.numbers { position: relative; z-index: 3; height: 910lvh; margin-top: -100lvh; pointer-events: none; }
.nm-stage { position: sticky; top: var(--view-top); height: var(--view-height); overflow: hidden; background: var(--ink); opacity: 0; perspective: 1400px; }
.nm-stage.on { opacity: 1; }
.nm-world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.nm-world > * { position: absolute; left: 0; top: 0; }
.nm-card { width: 240px; height: 300px; margin: -150px 0 0 -120px; transform-style: preserve-3d; }
.nm-face { position: absolute; inset: 0; padding: 40px 22px 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-15); }
.nm-tab {
  position: absolute; top: -26px; height: 27px; padding: 0 10px; border-radius: 6px 6px 0 0;
  background: var(--card); box-shadow: inset 0 1px 0 var(--ink-15), inset 1px 0 0 var(--ink-15), inset -1px 0 0 var(--ink-15);
  font: 500 12px/27px var(--sans); letter-spacing: .06em; white-space: nowrap;
}
.is-rep .nm-tab::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--blue); vertical-align: .05em; }
.nm-l { display: block; width: 80%; height: 8px; margin-bottom: 16px; background: var(--ink-10); }
.nm-l.s { width: 52%; }
.nm-cat { display: block; margin-bottom: 12px; font: 500 11px/1 var(--sans); letter-spacing: .22em; }
.nm-cat .mk { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--blue); vertical-align: .08em; }
.nm-name { margin: 0; font-size: 21px; line-height: 1.45; font-weight: var(--bold); }
/* カードの上端（厚み 6px）。真上から見るとこれが線になる。青＝2 回目以降のご依頼 */
.nm-top { position: absolute; left: 0; top: 0; width: 100%; height: 6px; transform-origin: 50% 0; transform: rotateX(90deg); background: var(--ink); }
.is-rep .nm-top { background: var(--blue); }
/* 年の仕切り */
.nm-card.nm-div { width: 260px; height: 340px; margin: -170px 0 0 -130px; }
.nm-div .nm-face { background: #ebe6da; }
/* 入りの間だけ、先頭のカードを墨色にする（背景と同じ色で、名前だけが見える）。面・文字・背景の色は、色の切り替えの止める区間の進み具合に合わせて JS（updateNumbers）が混ぜる。タブと上端の線は混ぜ終わるまで隠す */
.nm-card.inv .nm-tab, .nm-card.inv .nm-top { visibility: hidden; }
.nm-div .nm-tab { background: var(--ink); color: var(--paper); box-shadow: none; font-size: 15px; font-weight: var(--bold); }
.nm-div .nm-top { background: var(--ink-35); }
/* 床のグリッドと文字 */
.nm-grid { background: var(--ink-10); transform-origin: 0 0; }
.nm-floor { transform-origin: 0 0; font: 500 22px/1 var(--sans); letter-spacing: .12em; color: var(--ink); white-space: nowrap; }
.nm-staff { font-size: 60px; }
/* 文字（画面に固定） */
.nm-copy { position: absolute; left: clamp(20px, 7.3vw, 140px); top: 14lvh; color: var(--ink); }
.nm-title { margin: 22px 0 0; font-size: clamp(40px, 4.4vw, var(--title-size)); line-height: 1.22; font-weight: var(--bold); letter-spacing: -.01em; white-space: nowrap; }
/* 見出しの縁取り（修飾クラス。.nm-title.is-outline のように見出しへ足す）。縁は文字の外側にだけ出て、色は後ろの背景に合わせる（--outline-color・--outline-width で変える）。Numbers の背景は墨色 → 紙色へ入れ替わり、見出しが点く時には紙色になっている */
.is-outline { -webkit-text-stroke: var(--outline-width) var(--outline-color); paint-order: stroke fill; }
.nm-rv { overflow: hidden; padding: 0 .14em .14em 0; margin-right: -.14em; margin-bottom: -.14em; }
.nm-rv .c { display: inline-block; }
.nm-facts { position: absolute; right: clamp(20px, 6.3vw, 120px); bottom: 8lvh; margin: 0; color: var(--ink); }
.nm-fact { position: absolute; right: 0; bottom: 0; text-align: right; white-space: nowrap; }
.nm-fact dt { display: inline-block; font-size: 26px; font-weight: var(--bold); letter-spacing: .1em; }
.nm-fact dd { margin: 0; overflow: hidden; padding: .32em; font: 400 clamp(90px, 7.8vw, 150px)/1 var(--serif); }
/* 数字の枠（元ネタの日付の枠）：正方形の中で数字が縦に回る。回っている間は枠が太くなる */
.nm-digits { position: relative; display: inline-flex; vertical-align: bottom; }
/* 枠と同じ 1em のマス目を背景に引き、上下左右へ .3em 延ばしたところで切る */
.nm-digits::before {
  content: ''; position: absolute; inset: -.3em; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink-35) 1px, transparent 1px) calc(.3em - .5px) 0 / 1em 1em,
    linear-gradient(var(--ink-35) 1px, transparent 1px) 0 calc(.3em - .5px) / 1em 1em;
}
.nm-slot { position: relative; width: 1em; height: 1em; overflow: hidden; outline: 0 solid var(--ink); }
.nm-reel { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; }
.nm-reel i { height: 1em; line-height: 1.04em; text-align: center; font-style: normal; }
.nm-v { display: inline-block; }
.nm-fact small, .nm-plus { color: var(--blue); }
.nm-fact small, .nm-plus { margin-left: .08em; font-size: .5em; vertical-align: bottom; }

/* ---------- 進め方（方眼の地図の上を、寄り道しながら進むルート） ---------- */
.process { position: relative; z-index: 3; height: 1300lvh; pointer-events: none; }
.pr-stage { position: sticky; top: var(--view-top); height: var(--view-height); overflow: hidden; background: var(--paper); perspective: 1400px; }
.pr-world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.pr-world > *, .pr-steps > li { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pr-stage.is-flat { perspective: none; }
.pr-stage.is-flat .pr-world { transform: none !important; transform-style: flat; }
.pr-stage.is-flat .pr-grid, .pr-stage.is-flat .pr-plan, .pr-stage.is-flat .pr-line, .pr-stage.is-flat .pr-tip { display: none; }
.pr-stage.is-flat .pr-step, .pr-stage.is-flat .pr-photo { transform-style: flat; }
.pr-steps { display: contents; }
/* 方眼（数字シーンの床と同じ 1 マス・同じ線） */
.pr-grid { background: var(--ink-10); }
/* ルート：予定の道（点線）と、引かれていく道（青） */
.pr-plan { height: 4px; background: repeating-linear-gradient(90deg, var(--ink-45) 0 14px, transparent 14px 28px); }
.pr-line { height: 10px; background: var(--blue); }
.pr-tip { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--blue); }
/* 見出し（床に描く。真上から見ると、ほかのシーンの見出しと同じ大きさ） */
.pr-head { display: flex; flex-direction: column; gap: 48px; white-space: nowrap; }
.pr-head .lbl { font-size: 43px; }
.pr-head .lbl .mk { width: 25px; height: 25px; margin-right: 36px; }
.pr-title { margin: 0; font-size: 191px; line-height: 1.22; font-weight: var(--bold); letter-spacing: -.01em; }
/* 停留所：文字と写真（7.5×5 マス）は、それぞれ data-text・data-photo の位置に置く。番号は方眼の 1 マスに入る */
.pr-step { display: flex; gap: 44px; height: 360px; white-space: nowrap; transform-style: preserve-3d; }
.pr-no { flex: none; display: grid; place-items: center; width: 120px; height: 120px; box-shadow: inset 0 0 0 3px var(--ink); font: 500 46px/1 var(--sans); letter-spacing: -.02em; }
.pr-txt { display: flex; flex-direction: column; gap: 16px; }
.pr-en { font: italic 400 150px/.86 var(--serif); letter-spacing: -.01em; color: var(--blue); }
.pr-ja { margin: 0; font-size: 56px; line-height: 1.2; font-weight: var(--bold); letter-spacing: .06em; }
.pr-desc { margin: 0; font-size: 28px; line-height: 1.8; font-weight: 500; letter-spacing: .04em; }
.pr-rv { overflow: hidden; padding: 0 .14em .14em 0; margin-right: -.14em; margin-bottom: -.14em; }
.pr-rv .c { display: inline-block; }
.pr-photo { margin: 0; width: 900px; height: 600px; transform-style: preserve-3d; }
.pr-photo .ph { width: 100%; height: 100%; }

#debug { position: fixed; left: 8px; bottom: 8px; z-index: 30; padding: 4px 8px; font: 12px/1.4 var(--mono); color: #fff; background: rgba(0, 0, 0, .6); border-radius: 4px; pointer-events: none; }

/* ---------- メンバー（青い机に置いた肖像のプリント） ---------- */
/* Process の固定が外れる 30lvh 前から重ねる（ゴールの青い点が広がる間、Process はまだ画面に固定されている） */
.team { position: relative; z-index: 4; height: 1130lvh; margin-top: -130lvh; color: var(--paper); pointer-events: none; }
.tm-stage { position: sticky; top: var(--view-top); height: var(--view-height); overflow: hidden; visibility: hidden; }
.tm-stage.dive { visibility: visible; }
.tm-stage.on { background: var(--blue); }
.tm-stage:not(.on) .tm-world, .tm-stage:not(.on) .tm-loupe { visibility: hidden; }
.tm-dot { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: var(--blue); }
.tm-stage.on .tm-dot { display: none; }
.tm-world { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; }
.tm-world > * { position: absolute; left: 0; top: 0; }
/* 机：紙色の点（48px）と、480px ごとの十字（ファーストビュー・私たちについての方眼と同じ） */
.tm-floor {
  left: -7000px; top: -6000px; width: 16000px; height: 13000px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cpath d='M240 229v22M229 240h22' stroke='%23f4f1ea' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 480px 480px,
    radial-gradient(circle, var(--paper-25) 1.8px, transparent 2.3px) 0 0 / 48px 48px;
}
.tm-head { display: flex; flex-direction: column; gap: 40px; white-space: nowrap; }
.tm-head .lbl { font-size: 30px; }
.tm-head .lbl .mk { width: 17px; height: 17px; margin-right: 24px; background: var(--paper); }
.tm-title { margin: 0; font-size: 150px; line-height: 1.22; font-weight: var(--bold); letter-spacing: -.01em; }
.tm-rv { overflow: hidden; padding: 0 .14em .14em 0; margin-right: -.14em; margin-bottom: -.14em; }
.tm-rv .c { display: inline-block; }
/* 1 人：プリント（白い縁、テープ、影）と文字。要素の中心で data-rot だけ回す */
.tm-m { display: flex; align-items: center; gap: 88px; white-space: nowrap; transform-origin: 50% 50%; }
.tm-print { --fr-cut: 2.5rem; position: relative; margin: 0; padding: 18px; background: var(--card); box-shadow: 0 2px 0 var(--navy-10), 0 40px 70px -30px var(--navy-60); }
.tm-print img { display: block; width: 560px; height: 700px; max-width: none; object-fit: cover; }
.tm-print::before { content: ""; position: absolute; left: 50%; top: -22px; width: 170px; height: 46px; margin-left: -85px; background: var(--paper-60); transform: rotate(-2deg); box-shadow: 0 1px 2px var(--navy-10); }
.tm-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tm-no { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; box-shadow: inset 0 0 0 2.5px var(--paper); font: 500 28px/1 var(--sans); letter-spacing: -.02em; opacity: 0; }
.tm-role { font: 500 22px/1.2 var(--mono); letter-spacing: .16em; }
.tm-ja { margin: 0; font-size: 96px; line-height: 1.15; font-weight: var(--bold); letter-spacing: .08em; }
.tm-en { font: italic 400 104px/.9 var(--serif); letter-spacing: -.01em; }
.tm-desc { margin: 12px 0 0; font-size: 26px; line-height: 1.8; font-weight: 500; letter-spacing: .04em; }
.tm-btn { left: 0; top: 760px; --cb-k: 2.25; --cb-bg: var(--paper); --cb-fg: var(--blue); opacity: 0; pointer-events: auto; }
/* ルーペの輪：細部に寄っている間、画面の中央（寄った手元）を囲む */
.tm-loupe { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); opacity: 0; pointer-events: none;
  background:
    linear-gradient(var(--paper), var(--paper)) 50% 0 / 2px 5vmin no-repeat,
    linear-gradient(var(--paper), var(--paper)) 50% 100% / 2px 5vmin no-repeat,
    linear-gradient(var(--paper), var(--paper)) 0 50% / 5vmin 2px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 100% 50% / 5vmin 2px no-repeat; }

/* ---------- 最後の頁（ジャーナル・問い合わせ・奥付） ---------- */
/* Team の固定が外れる 60lvh 前から重ねる（頁がめくれる間、Team の机はまだ画面に固定されている） */
.end { position: relative; z-index: 5; height: 320lvh; margin-top: -160lvh; pointer-events: none; }
.en-stage { position: sticky; top: var(--view-top); height: var(--view-height); overflow: hidden; perspective: 2400px; }
.en-shade { position: absolute; inset: 0; background: var(--navy); opacity: 0; }
.en-page {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(0, 1fr) auto; column-gap: 112px;
  padding: 16lvh 104px 5.5lvh 216px;   /* 左は、画面に固定したメーターの分を空ける（余白の書き込みのように見せる） */ transform-origin: 0 50%; transform: rotateY(-90deg); backface-visibility: hidden;
  background: var(--paper) radial-gradient(circle, var(--ink-15) 1.4px, transparent 1.9px) 0 0 / 48px 48px;
}
.en-page a { pointer-events: auto; color: inherit; text-decoration: none; }
.en-line { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.en-line.v { left: 0; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; transform-origin: 50% 0; transform: scaleY(0); }
.en-top { left: 72px; right: 104px; top: 11.5lvh; }
.en-rv { display: inline-block; overflow: hidden; padding: 0 .14em .14em 0; margin-right: -.14em; margin-bottom: -.14em; vertical-align: bottom; }
.en-rv .c, .en-jt .c, .en-more .c { display: inline-block; }
/* ジャーナル：目次のように罫線で区切る */
.en-journal { align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 3lvh; padding-bottom: 5lvh; }
.en-jt { margin: 0 0 1.2lvh; font-size: 4.2lvh; line-height: 1.4; font-weight: var(--bold); letter-spacing: .02em; }
.en-list { align-self: stretch; margin: 0; padding: 0; list-style: none; }
.en-row { position: relative; }
.en-row-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-45) 0 2px, transparent 2px 7px); transform-origin: 0 50%; transform: scaleX(0); }
/* 1 段目に日付と分類、題名は 2 段目へ落とす（右端に矢印） */
.en-row a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "date cat ar" "ttl ttl ar"; align-items: center; justify-items: start; gap: 1.4lvh 24px; padding: 2.2lvh 0 2.4lvh; }
.en-date { grid-area: date; } .en-cat { grid-area: cat; } .en-ttl { grid-area: ttl; } .en-ar { grid-area: ar; }
.en-date { font: 500 1.7lvh/1 var(--sans); letter-spacing: .1em; }
.en-cat { font: 500 1.35lvh/1 var(--sans); letter-spacing: .18em; padding: .7lvh 1.2lvh .6lvh; box-shadow: inset 0 0 0 1.5px var(--ink); opacity: 0; }
.en-ttl { font-size: 2.1lvh; line-height: 1.4; font-weight: var(--bold); letter-spacing: .04em; white-space: nowrap; }
.en-ar { font: 400 2.4lvh/1 var(--sans); color: var(--blue); opacity: 0; }
.en-page-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-10), var(--navy-30)); pointer-events: none; }
.en-row a:hover .en-ttl { color: var(--blue); }
.en-end { position: relative; height: 0; }
.en-end .en-line { height: 1px; background: repeating-linear-gradient(90deg, var(--ink-45) 0 2px, transparent 2px 7px); }
.en-more { display: inline-block; overflow: hidden; opacity: 0; margin-top: .6lvh; font: 500 1.7lvh/1 var(--mono); letter-spacing: .14em; border-bottom: 1.5px solid currentColor; padding-bottom: .9lvh; }
/* 問い合わせ：ラベル、縦書きの見出し、ボタンを縦に並べて中央揃え */
.en-contact { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5lvh; padding: 0 0 5lvh; }
.en-line.en-sep { left: -56px; top: 0; bottom: 17lvh; }   /* ボタンの上で止める（下の余白 5lvh＋ボタン約 8lvh＋あき 4lvh） */
.en-ct-col { display: flex; flex-direction: column; align-items: center; gap: 2.5lvh; }
.en-ct { margin: 0; writing-mode: vertical-rl; font-size: 4.4lvh;   /* 縦書きの 9 字が画面の高さに収まるよう、高さで決める */ line-height: 1.32; font-weight: var(--bold); letter-spacing: .08em; white-space: nowrap; }
.en-ct .lm { display: block; overflow: visible; padding: 0; margin: 0; }
.en-ct .dot { display: inline-block; width: .32em; height: .32em; margin: .2em 0 0; vertical-align: middle; border-radius: 50%; background: var(--blue); }
.en-btn { position: relative; --cb-k: 1.25; --cb-bg: var(--blue); --cb-fg: var(--paper); --cb-icon-color: var(--blue); color: var(--cb-fg) !important; opacity: 0; }
/* 奥付：罫線の枠にロゴと所在地、右にコピーライト */
.en-foot { grid-column: 1 / -1; position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding-top: 3.5lvh; }
.en-colo { display: flex; align-items: stretch; box-shadow: inset 0 0 0 1.5px var(--ink); opacity: 0; }
.en-logo { margin: 0; display: grid; place-items: center; padding: 1.8lvh 3lvh; box-shadow: inset -1.5px 0 0 var(--ink); }
.en-addr { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: .8lvh; padding: 1.4lvh 2.8lvh; font: 500 1.4lvh/1.3 var(--mono); letter-spacing: .12em; }
.en-copy { margin: 0; font: 500 1.35lvh/1 var(--sans); letter-spacing: .14em; }
@media (min-width: 601px) {
  .en-page .lbl { font-size: 1.8lvh; }
  .en-page .lbl .mk { width: 1.1lvh; height: 1.1lvh; margin-right: 1.6lvh; }
}
@media (max-width: 900px) {
  .en-page { grid-template-columns: 1fr; grid-template-rows: auto auto auto; column-gap: 0; padding: 96px 20px 24px; }
  .en-page.is-readable { overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .en-foot { padding-left: 110px; }
  .en-top { left: 20px; right: 20px; top: 76px; }
  .en-journal { padding-bottom: 20px; gap: 14px; }
  .en-jt { font-size: 24px; }
  .en-row a { grid-template-columns: auto 1fr; gap: 8px 14px; padding: 14px 0; }
  .en-cat, .en-ar { display: none; }
  .en-ttl { font-size: 15px; white-space: normal; }
  .en-contact { align-items: flex-start; gap: 18px; padding-bottom: 20px; }
  .en-line.en-sep { display: none; }
  .en-ct { font-size: 36px; }
  .en-btn { --cb-k: 1; }
  .en-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ---------- SP：舞台 ---------- */
br.sp { display: none; }
@media (max-width: 600px) {
  br.sp { display: inline; }
  /* 負荷軽減（スマホは層ごとの絵が大きく、iPhone のメモリが足りなくなってページが読み込み直される）：
     扇は描かない。写真を別の層にせず、彩度の加工と傾きもやめる。説明は重ね方を普通に。紙の影と、回る間に広げる紙（WebGL の板で描く。theater.js の svPaper）をやめる */
  .sv-fans { display: none; }
  .sym .q img { will-change: auto; filter: none; }
  .svb { mix-blend-mode: normal; }
  .ph, #seed { animation: none; }
  #services { box-shadow: none; }
  #services.wide::before { display: none; }
  /* ヒーロー：ラベルと説明を読める大きさに。説明は英語の下へ、2 枚目の写真はその下へ */
  #hLabel { font-size: 40px; }
  #hLabel .mk { width: 23px; height: 23px; margin-right: 30px; }
  #hSub { --y: 850; font-size: 40px; }
  #c2 { --y: 1040; }
  /* 私たちについて：写真、ラベル、見出し、本文、ボタンを縦に並べる */
  #aPhoto { --x: 520; --y: 160; --w: 880; --h: 628; }
  #aLabel { --x: 524; --y: 860; font-size: 40px; }
  #aLabel .mk { width: 22px; height: 22px; margin-right: 28px; }
  #aH1 { left: 520px; top: 940px; }
  #aH2 { left: 520px; top: 1065px; }
  #aH3 { left: 520px; top: 1190px; }
  #aBody { --x: 524; --y: 1370; font-size: 46px; line-height: 1.75; }
  .btn-about { --x: 524; --y: 2070; --cb-k: 2.5; }
  /* できること：見出しはシンボルの上へ。説明は読める大きさに */
  #svLabel { --x: 1160; --y: 390; font-size: 44px; }
  #svLabel .mk { width: 24px; height: 24px; margin-right: 30px; }
  .sv-title2 { --x: 1160; --y: 450; font-size: 120px; }
  .svb { gap: 14px; }
  .svb-no { font-size: 38px; }
  .svb-ja { font-size: 40px; }
  .svb-desc { margin-top: 14px; font-size: 41px; }
}

/* ---------- SP：Works・Numbers ---------- */
@media (max-width: 600px) {
  /* Works：写真の下に文字を積む（板の幅 880px を JS が画面幅の 88% に縮める。文字は縮み後に読める大きさにしてある） */
  .wk-intro { gap: 28px; }
  .wk-intro .lbl { font-size: 30px; }
  .wk-item { grid-template-columns: 880px; align-items: start; gap: 36px; }
  .wk-cap { gap: 16px; padding-bottom: 0; }
  .wk-no { font-size: 84px; }
  .wk-meta { font-size: 34px; }
  .wk-client { margin-top: 6px; font-size: 62px; }
  .wk-desc { font-size: 33px; }
  .wk-cap .btn-works { margin-top: 24px; }
  .btn-works { --cb-k: 2.25; }
  .wk-index { right: 16px; bottom: 26px; gap: 7px; }
  .wk-index li { font-size: 12px; line-height: 1.2; gap: 10px; }
  .ix-lead { width: 40px; }
  .ix-no { font-size: 13px; }
  /* Numbers：見出しを画面幅に収め、数字はメーター（左下）の上に出す */
  .nm-copy { top: 12lvh; }
  .nm-title { margin-top: 16px; font-size: 35px; }
  .nm-facts { bottom: 15lvh; }
  .nm-fact dt { font-size: 20px; }
  .nm-fact dd { font-size: 76px; }
}

/* ---------- SP：Process・Team・最後の頁 ---------- */
@media (max-width: 600px) {
  /* Process：追いかけるカメラの倍率（.32）で、本文が約 12px、英語の見出しが約 48px に見える大きさ */
  .pr-ja { font-size: 64px; }
  .pr-desc { font-size: 40px; }
  /* Team：見出しの小ラベルを、引いた画面（約 .26 倍）でも 10px 以上に。1 人は写真の下に文字を並べて縦長にし、画面の幅いっぱいに寄れるようにする */
  .tm-head .lbl { font-size: 44px; }
  .tm-head .lbl .mk { width: 25px; height: 25px; margin-right: 34px; }
  .tm-m { flex-direction: column; align-items: flex-start; gap: 44px; }
  /* 最後の頁：問い合わせの見出しを横書きにして、ジャーナル・問い合わせ・奥付を 1 画面に収める */
  .en-page { padding: 76px 20px calc(110px + env(safe-area-inset-bottom, 0px)); align-content: space-between; }
  .en-top { top: 64px; }
  .en-journal { gap: 8px; padding-bottom: 12px; }
  .en-jt { margin-bottom: 6px; font-size: 19px; }
  .en-row a { padding: 9px 0 10px; gap: 4px 12px; }
  .en-date { font-size: 12px; }
  .en-ttl { font-size: 13px; line-height: 1.35; }
  .en-more { margin-top: 0; font-size: 12px; padding-bottom: 5px; }
  .en-contact { gap: 12px; padding-bottom: 14px; }
  .en-ct-col { align-items: flex-start; gap: 8px; }
  .en-ct { writing-mode: horizontal-tb; font-size: clamp(10px, 3.4vw, 20px); line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
  .en-ct .lm { display: inline; }
  .en-ct .dot { margin: 0 0 0 .2em; }
  .en-btn { --cb-k: .94; }
  /* 奥付：ロゴの右に所在地を並べ、左下のメーターと重ならないよう行内に収める */
  .en-foot { padding: 12px 0 0; gap: 8px; }
  .en-colo { width: 100%; min-width: 0; }
  .en-logo { flex: 0 0 auto; padding: 8px; justify-items: start; box-shadow: inset -1.5px 0 0 var(--ink); }
  .en-addr { flex: 1 1 0; min-width: 0; padding: 8px 10px; font-size: 10px; gap: 4px; }
  .en-addr .en-rv { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .en-copy { font-size: 10px; }
}

/* ---------- モバイルメニュー ---------- */
.mobile-nav-toggle, .mobile-nav { display: none; }
@media (max-width: 900px) {
  .mobile-nav-toggle {
    position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px) + var(--view-bottom)); z-index: 61;
    display: grid; place-items: center; width: 84px; height: 84px;
    padding: 0; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
  .mobile-nav-circle, .mobile-nav-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .mobile-nav-track { fill: none; stroke: currentColor; stroke-width: 1; opacity: .18; }
  .mobile-nav-ring { transform-origin: 50% 50%; will-change: transform; }
  .mobile-nav-ring text { font: 500 8.5px var(--sans); letter-spacing: .38em; fill: currentColor; }
  .mobile-nav-icon { position: relative; display: block; width: 22px; height: 16px; }
  .mobile-nav-icon i { position: absolute; left: 0; width: 22px; height: 1px; background: currentColor; transition: transform .25s ease, top .25s ease; }
  .mobile-nav-icon i:first-child { top: 4px; }
  .mobile-nav-icon i:last-child { top: 11px; }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:first-child { top: 7px; transform: rotate(45deg); }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-icon i:last-child { top: 7px; transform: rotate(-45deg); }
  .mobile-nav {
    position: fixed; inset: var(--view-fixed-top) 0 auto; height: var(--view-height); z-index: 60; display: flex; align-items: flex-start;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: var(--mobile-nav-top, 110px) 32px calc(24px + env(safe-area-inset-bottom, 0px) + 88px);
    color: var(--ink); background: var(--paper); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .mobile-nav[aria-hidden="false"] { opacity: 1; visibility: visible; }
  .mobile-nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font: 400 clamp(22px, 6vw, 32px)/1.25 var(--sans); }
  .mobile-nav-links a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
  .lenis.lenis-stopped { overflow: clip; }
}


:root{
        --TLC :var(--inh);
        --TLFZ:var(--h2FZ);
        --TLFF:var(--Eng);
        --TLFW:500;
        --TLFS:normal;
        --TLLS:inherit;
        --TLLH:1;
        --TLDeco:none;
        --TLOff:.25em;
        --TLG :.25em;
    
        --btnBG:var(--ac);
        --btnC:var(--wh);
        --hoverBG: var(--ac);
        --hoverC: var(--wh);
        --hoverFL: invert(0%) brightness(100%) saturate(100%);
        --btnFF:var(--Eng);
        --btnLH:1.125;
        --btnFW: 400; 
        --btnLS:0.0em; 
        --btnW:232px;
        --btnW48:100%;
        --btnH:72px;
        @media (max-width : 834px){
            --btnH:56px;
        }
        
        --btnPX:1em ;
        --btnPY: 0.25em;
        --btnG:.5em;
        --btnTR:var(--trans);
        --btnRad:0;
    
        --btnIFZ:calc(var(--btnFZ)*1.25);
        --btnImg:2.25em;
        
        --btnIFF:var(--icon);
        --btnIMX: 0 0.25em ;
        --btnAC:center; 
        --btnTA:center; 
        --btnAF: "\f105";
        --btnAFdis: block;
        --btnAFMX: 0;
        --btnAFC: var(--inh);
        --btnAFFZ: calc(var(--btnFZ)*1);
        --btnAFFW: 900;
        --btnAFPOS: absolute;
        --btnAFRT: 0.25em;
    }
    
    .btn{
        position: relative; 
        z-index: 1;
        text-decoration: none;
        display: inline-block;
        justify-content: var(--btnJC);
        flex-direction: var(--btnDir);
        font-size: var(--btnFZ);
        font-weight: var(--btnFW);
        font-family: var(--btnFF);
        line-height: var(--btnLH);
        letter-spacing: var(--btnLS);
        min-width: var(--btnW);
        @media (max-width: 480px){
            min-width: var(--btnW48);
        }
        min-height: var(--btnH);
        padding-inline:var(--btnPX);
        padding-block:var(--btnPY);
        gap: var(--btnG);
        border-radius: var(--btnRad);
        box-shadow: var(--btnSh);
        max-width: 100%;
        align-content: var(--btnAC);
        text-align: var(--btnTA);
        will-change: filter;
        transition: var(--btnTR);
        background-color: var(--btnBG);
        margin-inline-end: calc(var(--btnH) / 2);
    
        &:is(a,span){
            color: var(--btnC);
        }
        small{
            display: block;
            margin-top: 0.25em;
            font-size: 0.625em;
            font-family: var(--San);
            font-weight: 700;
            color: inherit;
        }
        &:after{ 
            content: var(--btnAF);
            color: var(--btnAFC);
            font-family: var(--btnIFF);
            font-size: var(--btnAFFZ);
            font-weight: var(--btnAFFW);
            display: var(--btnAFdis);
            place-items: center;
            position: var(--btnAFPOS); 
            left: 0;
            place-items: center;
            line-height: var(--btnFZ);
            margin-inline: var(--btnAFMX); 
            transition: .4s;
            top: 0;
            z-index: -1;
            width: calc(100% + var(--btnH) / 2);
            height: 100%;
            background-color: inherit;
            clip-path: polygon(0 0, calc(100% - var(--btnH) / 2) 0, 100% 50%, calc(100% - var(--btnH) / 2) 100%, 0 100%);
            font-family: "Phosphor";
            
            
            &:is([target='_blank']:after){
                content: "\f35d";
            }
        }
    }