/*!
 * 建築志ドットコム-Fu:nature- サイト（v0.5）
 * 雰囲気: 生成りの地・焦げ茶の文字・広い余白（VUILD の上品さ）
 * 挙動: 全体＝Motif／Add-on の紹介＝Thirdway／説明の切り替え＝Vizcom の要領（コード・素材は流用なし）
 * 書体: Noto Sans JP 400・700 の 2 ウェイト（SIL Open Font License 1.1・Google Fonts）
 *
 * 画面を止める演出は「html.pin の中で、その区間に .unpin が付いていないとき」だけ効く。
 * html.pin は描画前に head の中の短いスクリプトが付け（動きを減らす設定・画面が低いときは付けない）、
 * 中身が画面に入らない区間には main.js が .unpin を付けて、止めずに縦に並べる。
 */

/* ============================================================ 0. 色と寸法 */
:root {
  --bg: #F4F3EF;           /* 生成り */
  --bg-2: #ECEAE4;
  --card: #FAF9F6;
  --white: #FFFFFF;
  --ink: #262523;          /* 焦げ茶寄りの墨 */
  --ink-2: #5A554E;        /* 生成りの上で 6.7:1 */
  --ink-3: #6B655D;        /* 生成りの上で 5.2:1 */
  --deep: #1E1C1A;         /* 固定スライドの地（墨 1 色） */
  --line: rgba(38, 37, 35, .12);
  --line-2: rgba(38, 37, 35, .07);
  --line-3: rgba(38, 37, 35, .28);
  --teal: #00A08B;         /* 差し色（図形・大きな面） */
  --teal-d: #00806E;       /* ボタンの地（白字 4.9:1） */
  --teal-ink: #006F60;     /* 生成りの上の文字（5.6:1） */
  --teal-lite: #5FD3BF;    /* 暗い地の上の線・印 */
  --ok: #CFE7D6; --att: #F4EBC4; --chk: #F5D9C1; --na: #E3E1DC;

  --gut: clamp(16px, 5vw, 72px);
  --hdr-h: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-v: cubic-bezier(.4, 0, 0, 1);   /* VUILD の CustomEase "M0,0 C0.4,0 0,1 1,1" 相当 */
  --ease-move: cubic-bezier(.65, 0, .35, 1);   /* ゆっくり動き出してゆっくり止まる（オープニングの寄せ・文字） */
  --ease-fade: cubic-bezier(.37, 0, .63, 1);   /* フェードの入り・抜けをなめらかに */
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .12 0 0 0 0 .08 .16 0 0 0 -.035'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ 1. 基本 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.smooth { scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 2; letter-spacing: .04em;
  font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
em { font-style: normal; }
main:focus, [tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--teal-d); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(0, 160, 139, .22); }

.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; }
.nw { white-space: nowrap; }
.sp { display: none; }
@media (max-width: 600px) { .sp { display: inline; } br.sp { display: block; } .pc { display: none; } }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 120; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* 見出しの共通 */
.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.h2 { font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: balance; }
.h2--xl { font-size: clamp(30px, 3.8vw, 58px); line-height: 1.35; }
.lead { margin-top: 20px; color: var(--ink-2); font-size: 15px; max-width: 36em; }

/* 見える仮置き（本番前に差し替える所） */
.ph { display: inline-block; font-size: 11px; line-height: 1.5; letter-spacing: .02em; padding: 3px 8px; color: #7A3F0C; background: #FFF1DD; border: 1px dashed #C9803F; border-radius: 4px; font-weight: 700; }
.ph--inline { margin-left: 6px; vertical-align: 1px; }

/* 状態の札 */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; background: rgba(0, 160, 139, .12); color: var(--teal-ink); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(0, 160, 139, .5); }
.motion .chip__dot { animation: pulse 2.4s ease-out 2; }   /* 2 回（5 秒未満）で止まる */
.chip--live { background: var(--ink); color: var(--bg); }
.chip--live .chip__dot { background: var(--teal-lite); }
.chip--sm { height: 24px; font-size: 11px; padding: 0 10px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 11px; letter-spacing: .04em; color: var(--ink-2); line-height: 1; }
.tag--soft { background: var(--bg-2); border-color: transparent; color: var(--ink); }

/* ボタン（VUILD 型：ホバーで墨に塗られ、文字が上へ抜ける） */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), border-color .5s; border: 1px solid transparent; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); border-radius: inherit; transition: transform .6s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn__label { position: relative; display: grid; overflow: hidden; }
.btn__t { grid-area: 1 / 1; display: block; transition: transform .6s var(--ease); text-align: center; }
.btn__t + .btn__t { transform: translateY(110%); }
.btn:hover .btn__t:first-child, .btn:focus-visible .btn__t:first-child { transform: translateY(-110%); }
.btn:hover .btn__t + .btn__t, .btn:focus-visible .btn__t + .btn__t { transform: none; }
.btn__ext { font-size: 13px; transition: transform .5s var(--ease); }
.btn:hover .btn__ext { transform: translate(2px, -2px); }
.btn--primary { background: var(--teal-d); color: var(--white); }
.btn--primary:hover { color: var(--bg); }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark::before { background: var(--teal-d); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .06em; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.text-link__arrow { transition: transform .5s var(--ease); }
.text-link:hover .text-link__arrow { transform: translateY(2px); }
.inline-link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); transition: text-decoration-color .3s, color .3s; }
.inline-link:hover { color: var(--teal-ink); text-decoration-color: currentColor; }
.round-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-3); background: transparent; display: inline-grid; place-items: center; font-size: 16px; cursor: pointer; transition: background .4s, color .4s, border-color .4s; }
.round-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.round-btn[disabled] { opacity: .35; pointer-events: none; }

/* ============================================================ 2. オープニング（平面 → 立体 → 1 回転 → アイコン → 文字 → サイト・約 11 秒・opening.js が Canvas に描く） */
/* v0.5: 案 A＝方眼の紙／案 B＝横組み（屋号と事業の一文）／案 C＝生成りの地と GL の線。html[data-op] で切り替える。
   終わり方は共通：ロゴを 1.2 秒見せる → 幕が 0.6 秒で消え切る → それからサイトが始まる（重ならない）。飛ばしたときは 0.25 秒 */
.opening { display: none; }
html.has-opening .opening {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #FFFFFF; opacity: 1; overflow: hidden;
  transition: opacity .6s var(--ease-v);
}
html.has-opening[data-op="c"] .opening { background: var(--bg); }
/* 保険：opening.js が動き出さなかったときだけ、3.55 秒で必ず抜ける（動いている間は JS が幕を上げる） */
html.has-opening:not(.opening-live) .opening { animation: openingAuto .55s 3s var(--ease) forwards; }
/* 終わり方：先にロゴ（と方眼・GL・屋号）だけを 0.45 秒で消し、地が残った状態から地を 0.45 秒で消す＝ロゴとサイトが重ならない */
html.has-opening.opening-done .opening { opacity: 0; pointer-events: none; transition: opacity .7s var(--ease-fade) .55s; }
html.has-opening.opening-done :is(.opening__stage, .opening__paper, .opening__skip) { opacity: 0; transition: opacity .8s var(--ease-fade), transform 1.1s var(--ease-move); }
html.has-opening.opening-quick .opening, html.has-opening.opening-quick :is(.opening__stage, .opening__paper, .opening__skip) { transition: opacity .22s linear; }
.opening__stage { position: relative; width: var(--ow); height: var(--ow); --ow: min(640px, 92vw, 80vh); transition: transform .8s var(--ease-v); }
html[data-op="c"] .opening__stage { --ow: min(700px, 94vw, 86vh); }
html.opening-done:not(.opening-quick):not([data-op="b"]) .opening__stage { transform: scale(.97); }
.opening__canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.opening__skip {
  position: absolute; left: 50%; bottom: max(20px, 3.5vh); transform: translateX(-50%); z-index: 3;
  border: 1px solid rgba(38, 37, 35, .18); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 6px 16px; min-height: 32px;
  font-size: 12px; letter-spacing: .12em; color: #6B655D; cursor: pointer; opacity: 0; transition: opacity .6s var(--ease) 1.2s, color .3s, border-color .3s;
}
.opening__skip:hover { color: var(--ink); border-color: var(--ink); }
html.opening-live .opening__skip { opacity: 1; }
.opening__paper, .opening__gl, .opening__name { display: none; }

/* 案 A：画面いっぱいの方眼（製図用紙の地）と外周の枠。ロゴは紙の上に置かれた形 */
html[data-op="a"] .opening { background: #FBFAF7; }
html[data-op="a"] .opening__paper {
  display: block; position: absolute; inset: 0; opacity: 0;
  background:
    linear-gradient(rgba(38, 37, 35, .12) 1px, transparent 1px) 50% 50% / 100% 120px,
    linear-gradient(90deg, rgba(38, 37, 35, .12) 1px, transparent 1px) 50% 50% / 120px 100%,
    linear-gradient(rgba(38, 37, 35, .055) 1px, transparent 1px) 50% 50% / 100% 24px,
    linear-gradient(90deg, rgba(38, 37, 35, .055) 1px, transparent 1px) 50% 50% / 24px 100%;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%);
}
html[data-op="a"] .opening__paper::after { content: ""; position: absolute; inset: clamp(12px, 2.4vw, 28px); border: 1px solid rgba(38, 37, 35, .22); }
html.opening-t0[data-op="a"] .opening__paper { animation: opFade .9s var(--ease-v) .1s forwards; }

/* 案 B：ロゴが左へ寄り、右に屋号と事業の一文（スマホは下）。ロゴの文字が出た直後から */
html[data-op="b"] .opening__name {
  display: grid; gap: 6px; position: absolute; z-index: 2; left: 94%; top: 50%; width: max-content; transform: translateY(-40%);
  font-feature-settings: "palt"; color: var(--ink);
}
.opening__jp { font-family: var(--f-head); font-size: clamp(26px, 3.2vw, 46px); font-weight: 900; letter-spacing: .08em; line-height: 1.3; }
.opening__en { font-family: var(--f-label); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .12em; color: var(--ink-2); }
.opening__biz { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(38, 37, 35, .2); font-family: var(--f-head); font-size: clamp(17px, 1.6vw, 24px); font-weight: 700; line-height: 1.75; letter-spacing: .06em; color: var(--ink-2); }
html[data-op="b"] .opening__name > span { opacity: 0; transform: translateY(18px); }
/* 案 B の寄せと文字は、Canvas の時計（opening.js）が付けるクラスで動かす＝描画と必ずそろう（タブが裏に回って描画が止まっても、文字だけ先に進まない） */
html[data-op="b"] .opening__stage { transition: transform 1.4s var(--ease-move); }
html.op-shift[data-op="b"] .opening__stage { transform: translateX(calc(var(--ow) * -.34)); }
/* 入りのフェードは子（Canvas）に付ける＝終わりに親（stage）の透明度を下げるフェードを邪魔しない */
html.opening-t0 .opening__canvas { animation: opIn .6s var(--ease-fade) both; }
html[data-op="b"] .opening__name > span { transition: opacity 1.1s var(--ease-move), transform 1.1s var(--ease-move); }
html.op-n1[data-op="b"] .opening__name > .opening__jp,
html.op-n2[data-op="b"] .opening__name > .opening__en,
html.op-n3[data-op="b"] .opening__name > .opening__biz { opacity: 1; transform: none; }

/* 案 C：地はサイトと同じ生成り。ロゴを大きく、正面を向いた所で台座の下に GL の線が画面の端まで伸びる */
html[data-op="c"] .opening__gl {
  display: block; position: absolute; z-index: 0; top: 77.4%; left: 50%; width: 100vw; height: 0; transform: translateX(-50%);
}
html[data-op="c"] .opening__gl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(38, 37, 35, .55); transform: scaleX(0); transform-origin: 50% 50%; }
html[data-op="c"] .opening__gl::after {
  content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 14px; opacity: 0;
  background: repeating-linear-gradient(135deg, rgba(38, 37, 35, .18) 0 1px, transparent 1px 7px);
}
.opening__gl-label { position: absolute; left: max(20px, 4vw); top: -26px; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); opacity: 0; font-variant-numeric: tabular-nums; }
html.opening-t0[data-op="c"] .opening__gl::before { animation: opLine 1.1s var(--ease-v) 9.2s forwards; }
html.opening-t0[data-op="c"] .opening__gl::after { animation: opFade .8s var(--ease-v) 9.8s forwards; }
html.opening-t0[data-op="c"] .opening__gl-label { animation: opFade .8s var(--ease-v) 9.9s forwards; }

@keyframes opFade { to { opacity: 1; } }
@keyframes opIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes opRise { to { opacity: 1; transform: none; } }
@keyframes opLine { to { transform: scaleX(1); } }

@media (max-width: 700px), (max-aspect-ratio: 1/1) {
  html[data-op="b"] .opening__name { left: 50%; top: 97%; transform: translateX(-50%); text-align: center; justify-items: center; }
  html[data-op="b"] .opening__biz { margin-top: 10px; padding-top: 10px; }
  html.op-shift[data-op="b"] .opening__stage { transform: translateY(calc(var(--ow) * -.3)); }
}

/* 遠いページ内リンクで、短く薄く消して飛ぶための幕 */
.veil { position: fixed; inset: 0; z-index: 80; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.veil.is-on { opacity: 1; }

/* ============================================================ 3. ヘッダー（Motif 型：浮いた角丸の帯に） */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; transition: transform .7s var(--ease); }
.hdr__bar {
  pointer-events: auto; margin: 0 auto; height: var(--hdr-h); max-width: 100%;
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  background: rgba(244, 243, 239, 0); border: 1px solid transparent; border-radius: 0;
  transition: max-width .7s var(--ease), height .7s var(--ease), margin .7s var(--ease), border-radius .7s var(--ease), background-color .5s, box-shadow .5s, padding .7s var(--ease), border-color .5s, color .5s;
}
.hdr.is-float .hdr__bar {
  margin-top: 12px; height: 58px; max-width: calc(100% - 24px); border-radius: 14px; padding: 0 12px 0 22px;
  background: rgba(250, 249, 246, .93); border-color: var(--line-2);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 12px 32px -18px rgba(38, 37, 35, .35);
}
.hdr.is-hidden { transform: translateY(-130%); }
.hdr.is-float.is-dark .hdr__bar { background: rgba(30, 28, 26, .82); border-color: rgba(244, 243, 239, .12); color: #F4F3EF; }
.hdr.is-dark .brand__sub { color: rgba(244, 243, 239, .8); }
.hdr.is-dark .menu-btn__bar { background: #F4F3EF; }
.hdr.is-dark :focus-visible { outline-color: var(--teal-lite); }
.brand { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.brand__main { font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.brand__sub { font-size: 11px; letter-spacing: .12em; color: var(--ink-2); }
.gnav { margin-left: auto; }
.gnav__list { display: flex; gap: 30px; }
.gnav__link { position: relative; font-size: 13px; letter-spacing: .1em; padding: 6px 0; }
.gnav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.gnav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta { flex: none; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; position: relative; cursor: pointer; border-radius: 50%; }
.menu-btn__bar { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn__bar:nth-child(1) { top: 18px; }
.menu-btn__bar:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { top: 21.5px; transform: rotate(20deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { top: 21.5px; transform: rotate(-20deg); }

.menu { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: calc(var(--hdr-h) + 32px) var(--gut) 40px; overflow-y: auto; opacity: 0; transition: opacity .45s var(--ease); }
.menu.is-open { opacity: 1; }
.menu__list li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(20px); transition: opacity .6s var(--ease-v), transform .8s var(--ease-v); transition-delay: calc(.08s * var(--i) + .1s); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu__link { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; font-size: 22px; letter-spacing: .06em; }
.menu__num { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.menu__cta { margin-top: 32px; width: 100%; }
.menu__sns { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; font-size: 14px; color: var(--ink-2); }
.menu__sns a { display: inline-block; padding: 8px 0; }
html.menu-open { overflow: hidden; }

/* ============================================================ 4. ヒーロー（Motif 型） */
.hero { position: relative; background: var(--bg); --stage-pt: clamp(20px, 3.6svh, 40px); }
.hero__camera {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  /* 地：生成りの壁＋左上からのやわらかい光＋粒子（地の色に焼き込み。拡大する層には重ねない） */
  background:
    var(--noise) 0 0 / 180px 180px,
    radial-gradient(70% 55% at 14% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #F4F2ED 0%, #EEEBE4 100%);
}
.pin .hero:not(.unpin) { height: 270vh; height: 270svh; }
.pin .hero:not(.unpin) .hero__camera { position: sticky; top: 0; height: 100vh; height: 100svh; }

.hero__copy { position: relative; z-index: 4; flex: none; text-align: center; padding: calc(var(--hdr-h) + 3.2svh) var(--gut) 0; }
.hero__head { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.hero__title { font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: .12em; line-height: 1.6; }
.hero__catch { margin-top: 14px; display: grid; font-size: clamp(24px, min(3.9vw, 6svh), 56px); font-weight: 400; line-height: 1.34; letter-spacing: .02em; font-feature-settings: "palt"; }
.hero__catch em { color: var(--teal-ink); font-weight: 700; }
.hero .chip:not(.chip--live) { background: rgba(250, 249, 246, .9); }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line__in { display: inline-block; }
.motion .hero .line__in { transform: translateY(108%); transition: transform 1.3s var(--ease-v); }
.motion .hero .line:nth-child(2) .line__in { transition-delay: .12s; }
.motion .hero.is-loaded .line__in { transform: none; }
.motion .hero__head, .motion .hero__actions, .motion .hero__note { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--ease-v), transform 1.2s var(--ease-v); }
.motion .hero__actions { transition-delay: .3s; }
.motion .hero__note { transition-delay: .4s; }
.motion .hero.is-loaded .hero__head, .motion .hero.is-loaded .hero__actions, .motion .hero.is-loaded .hero__note { opacity: 1; transform: none; }
.hero__actions { margin-top: 24px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.hero__note { margin-top: 14px; font-size: 12px; color: var(--ink-2); line-height: 1.8; }

/* 机の場面：生成りの平らな面にモニターだけを置く（写真が用意できるまでの抽象表現） */
.hero__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding: var(--stage-pt) 0 64px; }
.pin .hero:not(.unpin) .hero__stage { container-type: size; padding-bottom: 0; }
.rig, .hero__desk { --sw: min(84vw, 520px); }
@media (min-width: 601px) { .rig, .hero__desk { --sw: min(56vw, 620px); } }
/* 止める演出のとき：見出しの下に残った高さからモニターの大きさを決める（入らなければ下へはみ出して、寄るときに上がってくる） */
.pin .hero:not(.unpin) .rig, .pin .hero:not(.unpin) .hero__desk { --sw: clamp(260px, min(38vw, calc((100cqh - var(--stage-pt) - 7svh) / .805)), 760px); }
@media (max-width: 600px) {
  .pin .hero:not(.unpin) .rig, .pin .hero:not(.unpin) .hero__desk { --sw: clamp(200px, min(86vw, calc((100cqh - var(--stage-pt) - 5svh) / .805)), 520px); }
}
.hero__desk {
  position: absolute; left: -30%; right: -30%; z-index: 1; bottom: -45%;
  top: calc(var(--stage-pt) + var(--sw) * .6);
  background: var(--noise) 0 0 / 180px 180px, linear-gradient(180deg, #E5E0D6 0%, #E0DACE 45%, #DAD3C6 100%);
  border-top: 1px solid rgba(38, 37, 35, .08);
}
html:not(.pin) .hero__desk, .hero.unpin .hero__desk { top: calc(var(--stage-pt) + var(--sw) * .6); }
.rig { position: relative; z-index: 2; width: calc(var(--sw) * 1.04); }
.hero__ph { position: absolute; left: var(--gut); bottom: 14px; z-index: 3; }
.pin .hero:not(.unpin) .hero__ph { bottom: 2.4svh; }

.monitor { position: relative; z-index: 2; display: grid; justify-items: center; }
.monitor::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--sw) * -.03); width: calc(var(--sw) * .62); height: calc(var(--sw) * .07); transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(60, 45, 30, .26), rgba(60, 45, 30, 0) 70%); z-index: -1; }
.monitor__bezel { width: 100%; padding: calc(var(--sw) * .02); background: #1E1D1B; border-radius: calc(var(--sw) * .016); box-shadow: 0 calc(var(--sw) * .03) calc(var(--sw) * .07) calc(var(--sw) * -.02) rgba(40, 28, 16, .32), 0 calc(var(--sw) * .02) calc(var(--sw) * .06) rgba(40, 28, 16, .18); }
.monitor__neck { width: calc(var(--sw) * .1); height: calc(var(--sw) * .12); background: linear-gradient(90deg, #BDB8AF, #DEDAD3 45%, #B7B2A9); }
.monitor__foot { width: calc(var(--sw) * .3); height: calc(var(--sw) * .02); border-radius: calc(var(--sw) * .006) calc(var(--sw) * .006) calc(var(--sw) * .01) calc(var(--sw) * .01); background: linear-gradient(180deg, #E4E0D9, #B9B4AB); }

/* 画面の中（Archicad の画面の見本・一般的な BIM の画面のイメージ） */
.screen { position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; background: #FBFBF9; border-radius: calc(var(--sw) * .004); container-type: inline-size; }
.ui { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 1.25cqw; line-height: 1.5; letter-spacing: .02em; color: #3A3733; }
.ui__bar { flex: none; height: 5.6cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 1.6cqw; background: #EEECE7; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ui__icons { display: flex; gap: .9cqw; }
.ui__icons i { width: 2.2cqw; height: 2.2cqw; border-radius: .5cqw; background: #DAD6CE; }
.ui__icons i:nth-child(3n+2) { background: #CFCAC1; }
.ui__file { flex: 1; text-align: center; font-size: 1.2cqw; color: #6B655D; white-space: nowrap; }
.ui__ai { display: inline-flex; align-items: center; gap: .6cqw; padding: .4cqw 1.2cqw; border-radius: 999px; background: var(--teal-d); color: #fff; font-size: 1.1cqw; font-weight: 700; letter-spacing: .08em; }
.ui__ai b { width: .9cqw; height: .9cqw; border-radius: 50%; background: #9FF0E1; }
.ui__body { flex: 1; display: grid; grid-template-columns: 19% 1fr 24%; min-height: 0; }
.ui__nav { background: #F4F3EF; border-right: 1px solid rgba(0, 0, 0, .07); padding: 1.6cqw 1.2cqw; }
.ui__h { font-size: 1.05cqw; letter-spacing: .1em; color: #8A847A; margin-bottom: 1cqw; }
.ui__tree li { font-size: 1.15cqw; padding: .55cqw .8cqw; border-radius: .5cqw; white-space: nowrap; color: #5A554E; transition: background-color .4s, color .4s; }
.ui__tree li.is-on { background: rgba(0, 160, 139, .14); color: var(--teal-ink); font-weight: 700; }
.ui__canvas { position: relative; background: radial-gradient(ellipse at 50% 60%, #FFFFFF 0%, #F3F2EE 100%); overflow: hidden; }
.ui__model { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui [data-view="1"], .ui [data-view="2"] { opacity: 0; }
.ui__plan { position: absolute; left: 3%; top: 4%; width: 94%; height: 80%; }
.ui__plan text { font-family: var(--font); }
.up-bal { fill: none; stroke: #262523; stroke-opacity: .3; stroke-dasharray: 3 3; }
.up-wall { fill: none; stroke: #262523; stroke-width: 2; }
.up-thin { fill: none; stroke: #262523; stroke-opacity: .4; stroke-width: 1; }
.up-door { fill: none; stroke: #262523; stroke-opacity: .6; stroke-width: 1; }
.up-hit { fill: var(--teal); fill-opacity: .1; }
.up-hit--b { fill-opacity: .26; }
.up-tag rect { fill: #262523; }
.up-tag rect.is-b { fill: var(--teal-d); }
.up-tag text { fill: #fff; font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.up-lab { font-size: 9px; fill: #6B655D; text-anchor: middle; }
.up-dim { fill: none; stroke: var(--teal-d); stroke-opacity: .6; stroke-width: 1; }
.ui__table { position: absolute; left: 4%; right: 4%; top: 5%; bottom: 16%; background: #fff; border: 1px solid rgba(38, 37, 35, .12); border-radius: .6cqw; padding: 1.2cqw 1.4cqw; }
.ut__h { font-size: 1.1cqw; color: #6B655D; letter-spacing: .08em; margin-bottom: .8cqw; }
.ui__table table { width: 100%; border-collapse: collapse; font-size: 1.2cqw; }
.ui__table th { text-align: left; font-weight: 700; color: #5A554E; background: #EFEDE8; padding: .6cqw .9cqw; }
.ui__table td { padding: .62cqw .9cqw; border-bottom: 1px solid rgba(38, 37, 35, .08); color: #3A3733; }
.ui__table tr.is-on td { background: rgba(0, 160, 139, .12); color: var(--teal-ink); font-weight: 700; }
.ui__gizmo { position: absolute; right: 1.6cqw; top: 1.6cqw; width: 3.6cqw; height: 3.6cqw; }
.ui__gizmo i { position: absolute; left: 50%; top: 50%; height: .25cqw; width: 1.8cqw; transform-origin: 0 50%; border-radius: 1px; }
.ui__gizmo i:nth-child(1) { background: #D26A5B; transform: rotate(20deg); }
.ui__gizmo i:nth-child(2) { background: #5BA36B; transform: rotate(160deg); }
.ui__gizmo i:nth-child(3) { background: #4F7BC8; transform: rotate(-90deg); }
.ui__tabs { position: absolute; left: 50%; bottom: 1.4cqw; transform: translateX(-50%); display: flex; gap: .4cqw; padding: .4cqw; background: rgba(255, 255, 255, .92); border-radius: 999px; box-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .08); }
.ui__tabs i { font-style: normal; font-size: 1.05cqw; padding: .3cqw 1.2cqw; border-radius: 999px; color: #6B655D; white-space: nowrap; transition: background-color .4s, color .4s; }
.ui__tabs i.is-on { background: #262523; color: #fff; }
.ui__side { position: relative; border-left: 1px solid rgba(0, 0, 0, .07); padding: 1.6cqw 1.3cqw; background: #FAFAF8; }
.ui__chat { position: absolute; left: 1.3cqw; right: 1.3cqw; top: 4.4cqw; display: grid; gap: 1cqw; opacity: 0; transition: opacity .5s; }
.ui__chat.is-on { opacity: 1; }
.ui__msg { font-size: 1.12cqw; line-height: 1.6; padding: .9cqw 1.1cqw; border-radius: 1cqw; background: #fff; border: 1px solid rgba(0, 0, 0, .07); }
.ui__msg--me { background: #262523; color: #fff; border-color: transparent; margin-left: 1.4cqw; }
.ui__k { display: inline-grid; place-items: center; width: 1.9cqw; height: 1.9cqw; margin: .5cqw .5cqw 0 0; border-radius: 50%; background: #262523; color: #fff; font-size: 1cqw; }
.ui__k--b { background: var(--teal-d); }
.ui__dots { display: inline-flex; gap: .35cqw; margin-left: .5cqw; vertical-align: middle; }
.ui__dots i { width: .5cqw; height: .5cqw; border-radius: 50%; background: var(--teal); }
.motion .ui__dots i { animation: blink 1.2s 3; }   /* 3 回で止まる */
.ui__dots i:nth-child(2) { animation-delay: .2s !important; } .ui__dots i:nth-child(3) { animation-delay: .4s !important; }
.screen__ph { position: absolute; left: 20.5%; bottom: 5cqw; font-size: max(6px, 1.2cqw); padding: .3cqw .8cqw; border-radius: .4cqw; z-index: 2; }

/* 寄った後に出るリード文 */
.hero__lead { position: relative; z-index: 5; text-align: center; padding: 32px var(--gut) 56px; background: var(--bg); }
.pin .hero:not(.unpin) .hero__lead { position: absolute; left: 0; right: 0; top: calc(var(--hdr-h) + 3svh); padding: 0 var(--gut); background: none; opacity: 0; pointer-events: none; }
.hero__lead p:first-child { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.95; letter-spacing: .06em; max-width: 46em; margin: 0 auto; word-break: auto-phrase; text-wrap: balance; }
.hero__lead-note { margin-top: 6px; font-size: 11px; color: var(--ink-2); }
.hero__scroll { display: none; }
.pin .hero:not(.unpin) .hero__scroll { position: absolute; left: 50%; bottom: 3svh; z-index: 4; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 10px; letter-spacing: .3em; color: #4A3E33; }
.hero__scroll-line { width: 1px; height: 40px; background: rgba(38, 37, 35, .25); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--ink); }
.motion .hero__scroll-line::after { animation: scrollLine 2s var(--ease-v) 2; }   /* 2 回で止まる */

/* ============================================================ 5. 4つの動詞（Motif 型 2×2） */
.verbs { padding: clamp(96px, 16svh, 180px) 0 clamp(72px, 10svh, 120px); position: relative; background: var(--bg); }
.statement { text-align: center; max-width: 900px; margin: 0 auto; }
.statement .eyebrow { justify-content: center; }
.statement__title { font-size: clamp(26px, 3.4vw, 50px); font-weight: 400; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: balance; }
.statement__lead { margin-top: 22px; color: var(--ink-2); }
.sc-ch { transition: opacity .25s linear; }
.vcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 8svh, 88px); }
.vcard { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 30px 32px 28px; min-height: 440px; display: flex; flex-direction: column; transition: background .5s, border-color .5s; }
.vcard:hover { background: var(--white); border-color: var(--line); }
.vcard__head { display: flex; justify-content: space-between; align-items: center; }
.vcard__num { font-size: 12px; letter-spacing: .12em; color: var(--ink-3); }
.vcard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); transition: transform .5s var(--ease); }
.vcard:hover .vcard__dot { transform: scale(1.6); }
.vcard__title { margin-top: 18px; display: flex; align-items: baseline; gap: 14px; font-weight: 400; }
.vcard__jp { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: .08em; }
.vcard__en { font-size: 11px; letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase; }
.vcard__text { margin-top: 10px; max-width: 22em; color: var(--ink-2); font-size: 14px; position: relative; z-index: 1; }
.vcard__ill { position: absolute; right: 16px; bottom: 18px; width: min(52%, 320px); height: auto; transition: transform .8s var(--ease); }
.vcard:hover .vcard__ill { transform: translateY(-6px); }
.vcard__link { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; display: inline-flex; gap: 8px; font-size: 13px; letter-spacing: .06em; padding: 6px 0; border-bottom: 1px solid var(--line-3); transition: border-color .3s, color .3s; }
.vcard__link span { transition: transform .5s var(--ease); }
.vcard__link:hover { color: var(--teal-ink); border-color: currentColor; }
.vcard__link:hover span { transform: translateX(4px); }

/* 誓約書の下書きの色分け（候補・属性あり要確認・要確認・対象外） */
.r-ok { fill: var(--ok); } .r-att { fill: var(--att); } .r-chk { fill: var(--chk); } .r-na { fill: var(--na); }

/* 線画の共通（テンプレートに入っている物を、同じ線の太さで） */
.ill { overflow: visible; }
.ill text { font-family: var(--font); }
.i-ln { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.i-soft { stroke-opacity: .35; }
.i-bold { stroke-width: 2.2; }
.i-paper { fill: var(--white); stroke: var(--ink); stroke-width: 1.3; }
.i-teal { fill: var(--teal); fill-opacity: .85; }
.i-teal--lite { fill-opacity: .16; }
.i-teal-ln { fill: none; stroke: var(--teal-d); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i-dash { fill: none; stroke: var(--teal-d); stroke-width: 1.3; stroke-dasharray: 5 4; }
.i-white { fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.i-fill-w { fill: var(--white); stroke: none; }
.i-tx { font-size: 11px; fill: var(--ink-2); letter-spacing: .02em; }
.i-tx--h { font-size: 10px; fill: var(--ink-3); letter-spacing: .1em; }
.i-tx.is-on { fill: var(--teal-ink); font-weight: 700; }
.i-tx--w { fill: var(--white); font-weight: 700; font-size: 13px; }
.i-old { text-decoration: line-through; fill: var(--ink-3); }
.i-new { fill: var(--teal-ink); font-weight: 700; }
.i-soft-tx { fill: var(--ink-3); }
.i-ok { font-size: 13px; fill: var(--teal-ink); font-weight: 700; }
.i-warn { fill: #FFF1DD; stroke: #C9803F; stroke-dasharray: 3 2; }
.i-warn-tx { font-size: 10.5px; fill: #7A3F0C; font-weight: 700; text-anchor: middle; }
.i-chip rect { fill: var(--ink); }
.i-chip rect.is-t { fill: var(--teal-d); }
.i-chip text { font-size: 9px; fill: #fff; font-weight: 700; text-anchor: middle; }

/* ============================================================ 6. 説明の切り替え（Vizcom の要領：画面を止めたまま、同じ図面が育つ） */
.story { position: relative; padding-top: clamp(80px, 14svh, 160px); padding-bottom: clamp(40px, 8svh, 96px); }
.pin .story:not(.unpin) { padding-bottom: 0; }
.story__intro { text-align: center; }
.story__intro .eyebrow { justify-content: center; }
.story__intro .lead { margin-left: auto; margin-right: auto; }
.story__track { position: relative; margin-top: clamp(24px, 4svh, 48px); }
.pin .story:not(.unpin) .story__track { height: calc(var(--n) * 80vh + 100vh); height: calc(var(--n) * 80svh + 100svh); }
.story__sticky { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3svh, 32px); padding: 24px var(--gut) 24px; }
.pin .story:not(.unpin) .story__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--hdr-h) + 8px); padding-bottom: 2svh; }
.story__stage { display: grid; gap: clamp(12px, 2.2svh, 22px); min-width: 0; justify-items: center; }
.story__tabs { display: none; justify-content: center; gap: clamp(6px, 2.6vw, 40px); }
.pin .story:not(.unpin) .story__tabs { display: flex; }
.stab { border: 0; background: none; padding: 10px 6px 12px; min-width: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 10px; align-items: baseline; text-align: left; color: var(--ink-3); cursor: pointer; transition: color .4s; border-radius: 6px; }
.stab:hover { color: var(--ink); }
.stab.is-active { color: var(--ink); }
.stab__num { font-size: 11px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.stab__label { font-size: 15px; letter-spacing: .08em; white-space: nowrap; }
.stab.is-active .stab__label { font-weight: 700; }
.stab__bar { grid-column: 1 / -1; position: relative; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.stab__fill { position: absolute; inset: 0; background: var(--teal-d); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.story__body { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 2fr); gap: clamp(24px, 4.4vw, 72px); align-items: center; }
.story__captions { position: relative; }
.pin .story:not(.unpin) .story__captions { min-height: 300px; }
.story__count { display: none; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 13px; letter-spacing: .08em; }
.pin .story:not(.unpin) .story__count { display: flex; }
.story__count span:first-child { font-size: 44px; color: var(--ink); line-height: 1; letter-spacing: 0; }
.scap { padding: 22px 0; border-top: 1px solid var(--line); }
.scap:last-child { border-bottom: 1px solid var(--line); }
.pin .story:not(.unpin) .scap { position: absolute; left: 0; right: 0; top: 52px; padding: 0; border: 0; opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .9s var(--ease-v); pointer-events: none; }
.pin .story:not(.unpin) .scap.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .1s; }
.scap__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-weight: 400; }
.scap__num { font-size: 12px; letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pin .story:not(.unpin) .scap__num { display: none; }
.scap__jp { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: .08em; }
.scap__en { font-size: 11px; letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase; }
.scap__text { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 2.05; }
.scap__prompt { margin-top: 10px; font-size: 13px; color: var(--teal-ink); line-height: 1.8; }
.scap__sum { display: none; }   /* 1 行の要約：低い画面で止めるときだけ本文の代わりに出す（下の is-tight） */

/* 画面の見本 */
.app { width: 100%; max-width: 900px; justify-self: center; display: flex; flex-direction: column; background: #FBFBF9; border-radius: 12px; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px rgba(38, 37, 35, .08), 0 40px 80px -40px rgba(38, 37, 35, .45); }
.pin .story:not(.unpin) .app { width: min(100%, calc((100svh - var(--hdr-h) - 110px) * 1.6)); max-width: none; aspect-ratio: 16 / 10; }
.app__bar { flex: none; height: max(30px, 5.2cqw); display: flex; align-items: center; gap: 2cqw; padding: 0 max(12px, 1.6cqw); background: #EFEDE8; border-bottom: 1px solid var(--line); }
.app__bar .ui__icons i { width: max(10px, 1.8cqw); height: max(10px, 1.8cqw); border-radius: 3px; }
.app__file { flex: 1; text-align: center; font-size: max(10px, 1.15cqw); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__bar .ui__ai { font-size: max(10px, 1.1cqw); padding: 3px 10px; }
.app__bar .ui__ai b { width: 6px; height: 6px; }
.app__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 17% minmax(0, 1fr) 24%; }
.app__nav { background: #F4F3EF; border-right: 1px solid var(--line); padding: max(12px, 1.6cqw) max(8px, 1.1cqw); overflow: hidden; }
.app__h { font-size: max(10px, 1.05cqw); letter-spacing: .1em; color: var(--ink-3); margin-bottom: max(6px, 1cqw); white-space: nowrap; }
.app__tree li { font-size: max(10px, 1.2cqw); line-height: 1.5; padding: max(4px, .6cqw) max(6px, .8cqw); border-radius: 4px; color: var(--ink-2); white-space: nowrap; transition: background-color .5s, color .5s, opacity .5s, transform .6s var(--ease); }
.app__tree li.is-hit { background: rgba(0, 160, 139, .14); color: var(--teal-ink); font-weight: 700; }
.app__tree li.app__new { opacity: 0; transform: translateX(-8px); }
.app__tree li.app__new.is-shown { opacity: 1; transform: none; }
.app__canvas { position: relative; background: var(--white); min-height: 0; overflow: hidden; aspect-ratio: 600 / 548; }
.pin .story:not(.unpin) .app__canvas { aspect-ratio: auto; }
.app__ph { position: absolute; left: 12px; bottom: 10px; font-size: max(9px, 1.05cqw); }
.app__side { border-left: 1px solid var(--line); background: #FAFAF8; padding: max(12px, 1.6cqw) max(10px, 1.3cqw); display: flex; flex-direction: column; gap: max(8px, 1.1cqw); overflow: hidden; }
.prompt { font-size: max(11px, 1.3cqw); line-height: 1.75; letter-spacing: .02em; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: max(8px, 1.2cqw); min-height: 6.6em; color: var(--ink); }
.prompt.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: var(--teal-d); }
.app__run { display: flex; gap: 5px; padding-left: 4px; opacity: 0; transition: opacity .3s; }
.app__run i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.app__run i:nth-child(2) { opacity: .6; } .app__run i:nth-child(3) { opacity: .3; }
.app__side.is-running .app__run { opacity: 1; }
.app__reply { font-size: max(11px, 1.2cqw); line-height: 1.7; color: var(--teal-ink); background: rgba(0, 160, 139, .08); border-radius: 8px; padding: max(8px, 1cqw) max(8px, 1.1cqw); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .6s var(--ease); }
.app__side.is-done .app__reply { opacity: 1; transform: none; }

/* 育つ図面（SVG） */
.board { position: absolute; left: 3%; top: 2%; width: 94%; height: 90%; }
.board text { font-family: var(--font); }
.b-title { font-size: 13px; fill: var(--ink-3); letter-spacing: .08em; }
.b-bal { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-dasharray: 4 4; }
.b-wall { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.b-thin { fill: none; stroke: var(--ink); stroke-opacity: .4; stroke-width: 1.1; }
.b-door { fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 1.2; }
.b-lab { font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.b-units rect { fill: var(--teal); fill-opacity: .12; opacity: 0; }
.b-units rect.is-b { fill-opacity: .3; }
.b-types g { opacity: 0; }
.b-types rect { fill: var(--ink); }
.b-types .is-b rect { fill: var(--teal-d); }
.b-types text { fill: #fff; font-size: 10.5px; font-weight: 700; text-anchor: middle; letter-spacing: .04em; }
.b-dtags g, .b-ext [data-dtag] { opacity: 0; }
.b-dtags rect { fill: #fff; stroke: var(--ink); stroke-opacity: .45; transition: stroke .3s, fill .3s; }
.b-dtags g.is-new rect, .b-ext [data-dtag] rect { stroke: var(--teal-d); stroke-opacity: 1; fill: #EAF6F3; }
.b-dtags text, .b-ext [data-dtag] text { font-size: 11px; text-anchor: middle; }
.board .b-o { fill: var(--ink-2); }
.board .b-n { fill: var(--teal-ink); font-weight: 700; opacity: 0; }
.b-ext [data-dtag] .b-n, .b-row-ext .b-n { opacity: 1; }
.b-ring-w { fill: none; stroke: #C9803F; stroke-width: 2; stroke-dasharray: 4 3; opacity: 0; }
.b-ring-ok { fill: rgba(0, 160, 139, .1); stroke: var(--teal-d); stroke-width: 2; opacity: 0; }
.b-ext { opacity: 0; }
.b-ext__area { fill: rgba(0, 160, 139, .08); stroke: var(--teal-d); stroke-width: 2; stroke-dasharray: 6 4; }
.b-ext__line { fill: none; stroke: var(--teal-d); stroke-width: 1.4; }
.b-ext__lab { font-size: 13px; font-weight: 700; fill: var(--teal-ink); text-anchor: middle; }
.b-ext__sub { font-size: 11px; fill: var(--teal-ink); text-anchor: middle; }
.b-scan { fill: var(--teal); opacity: 0; }
.b-thead { fill: var(--bg-2); }
.b-th { font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.b-grid { stroke: var(--ink); stroke-opacity: .12; fill: none; }
.b-table [data-row] { opacity: 0; }
.b-td, .b-table .b-o, .b-table .b-n { font-size: 13px; }
.b-td { fill: var(--ink); }
.b-ok { font-size: 13px; fill: var(--teal-ink); font-weight: 700; }
.b-flag rect { fill: #FFF1DD; stroke: #C9803F; stroke-dasharray: 3 2; }
.b-flag text { font-size: 11px; fill: #7A3F0C; text-anchor: middle; font-weight: 700; }
.b-fix { opacity: 0; }
.b-row-ext__bg { fill: rgba(0, 160, 139, .08); }
/* 動きなし（JS なし・視差効果を減らす設定）では、育ち切った状態を最初から見せる */
html:not(.motion) .board [data-row], html:not(.motion) .b-types g, html:not(.motion) .b-dtags g, html:not(.motion) .b-ext, html:not(.motion) .b-ext [data-dtag], html:not(.motion) .board .b-n, html:not(.motion) .b-fix { opacity: 1; }
html:not(.motion) .b-units rect { opacity: 1; }
html:not(.motion) .board .b-o, html:not(.motion) .b-flag { opacity: 0; }
html:not(.motion) .b-dtags rect { stroke: var(--teal-d); stroke-opacity: 1; fill: #EAF6F3; }
html:not(.motion) .app__tree li.app__new { opacity: 1; transform: none; }
html:not(.motion) .app__reply { opacity: 1; transform: none; }

/* ============================================================ 7. 差別化カードの横送り（Motif 型） */
.diff { padding: clamp(96px, 16svh, 180px) 0 clamp(56px, 10svh, 120px); }
.diff__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 24px; }
.diff__title { min-width: 0; flex: 1 1 260px; }
.diff__ctrl { display: flex; gap: 10px; flex: none; }
.diff__viewport { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); scrollbar-width: none; padding: clamp(32px, 5svh, 56px) var(--gut) 8px; }
.diff__viewport::-webkit-scrollbar { display: none; }
.diff__track { display: flex; gap: 16px; width: max-content; }
.diff__track::after { content: ""; flex: none; width: 1px; }
.dcard { position: relative; scroll-snap-align: start; width: min(620px, 82vw); min-height: 340px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 32px 34px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 14px 32px; }
.dcard__num { grid-column: 1 / -1; font-size: 12px; letter-spacing: .12em; color: var(--ink-3); }
.dcard__title { font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; line-height: 1.6; letter-spacing: .04em; font-feature-settings: "palt"; }
.dcard__text { color: var(--ink-2); font-size: 14px; line-height: 2; }
.dcard__ill { grid-column: 1 / -1; width: min(46%, 230px); height: auto; align-self: end; }
.diff__progress { position: relative; height: 2px; border-radius: 2px; background: var(--line); margin-top: 36px; overflow: hidden; }
.diff__progress span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 30%); transform: translateX(var(--x, 0%)); background: var(--teal-d); transition: transform .2s linear; }

/* ============================================================ 8. 左に見出し・右に本文（Thirdway 型） */
.twocol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 7vw, 140px); padding-top: clamp(80px, 13svh, 160px); padding-bottom: clamp(80px, 13svh, 160px); }
.twocol__head { align-self: start; }
@media (min-width: 901px) { .twocol__head { position: sticky; top: calc(var(--hdr-h) + 40px); } }
.rows { border-bottom: 1px solid var(--line); }
.rows__row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 8px 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.rows__row dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; padding-top: 2px; }
.rows__row dd { font-size: 15px; color: var(--ink); }
.rows__links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.spec { background: var(--bg); }

/* ============================================================ 9. Add-on の紹介 */
.addon { background: var(--bg); padding-bottom: clamp(64px, 10svh, 120px); }
.twocol--addon { padding-bottom: clamp(40px, 7svh, 80px); align-items: end; }
.twocol__body { display: grid; gap: 18px; }
.addon__name { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: .06em; line-height: 1.6; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.addon__ver { font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: .08em; }
.addon__text { color: var(--ink-2); max-width: 38em; }
.addon__actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 6px; }

.showcase { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 1200 / 620; background: #22201D; isolation: isolate; }
.showcase:focus-visible { outline-color: var(--teal-d); outline-offset: 4px; }
.showcase__media { position: absolute; left: 0; right: 0; top: -7%; bottom: -7%; display: block; }
.showcase__art { width: 100%; height: 100%; transition: transform 1.4s var(--ease); }
.showcase:hover .showcase__art { transform: scale(1.025); }
.showcase__ph { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.showcase__label { position: absolute; right: 20px; top: 20px; z-index: 2; background: var(--white); color: var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 13px; letter-spacing: .06em; line-height: 1.4; }
html.has-cursor .showcase__label { display: none; }
.showcase svg text { font-family: var(--font); }
.sw-win { fill: #F7F6F2; } .sw-bar { fill: #E6E3DC; } .sw-dots circle { fill: #CFCAC0; }
.sw-t { font-size: 12px; fill: #6B655D; text-anchor: middle; }
.sw-plan rect, .sw-plan path { fill: none; stroke: #262523; stroke-width: 2; }
.sw-plan .sw-thin { stroke-opacity: .45; stroke-width: 1.2; }
.sw-plan .sw-sel { fill: rgba(0, 160, 139, .16); stroke: var(--teal); stroke-width: 2.2; }
.sw-lab { font-size: 14px; fill: #5A554E; text-anchor: middle; }
.sw-arrow path { fill: none; stroke: #F4F3EF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-page { fill: var(--white); }
.sx-h { font-size: 17px; font-weight: 700; fill: #262523; }
.sx-s { font-size: 12px; fill: #6B655D; }
.sx-head { fill: #EDEBE6; }
.sx-th { font-size: 12px; fill: #5A554E; font-weight: 700; }
.sx-it text, .sx-st text { font-size: 12px; fill: #3A3733; }
.sx-mark text { font-size: 15px; fill: var(--teal-ink); font-weight: 700; }
.sx-legend text { font-size: 11px; fill: #5A554E; }

/* ============================================================ 10. 01/03 の固定スライド（Thirdway 型：端まで画面いっぱい・地は墨 1 色） */
.slides { background: var(--deep); color: #F4F3EF; }
.slides__track { position: relative; }
.pin .slides:not(.unpin) .slides__track { height: calc(var(--n) * 100vh); height: calc(var(--n) * 100svh); }
.slides__sticky { position: relative; }
.pin .slides:not(.unpin) .slides__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.slides__list { position: relative; }
.pin .slides:not(.unpin) .slides__list { height: 100%; }
.slide { position: relative; min-height: 88vh; min-height: 88svh; }
.slide + .slide { border-top: 1px solid rgba(244, 243, 239, .12); }
.pin .slides:not(.unpin) .slide { position: absolute; inset: 0; min-height: 0; border: 0; }
/* 画と地だけを clip-path で切る（文言は別の層＝z-index 2 で、切られない） */
.slide__media { position: absolute; inset: 0; z-index: 1; background: var(--deep); }
.pin .slides:not(.unpin) .slide:not(:first-child) .slide__media { clip-path: inset(100% 0 0 0); }
.slide__art { position: absolute; left: 0; right: 0; top: 0; bottom: 36%; display: flex; align-items: center; justify-content: center; padding: calc(var(--hdr-h) + 12px) 8% 0; }
.slide__art svg { width: min(100%, 880px); height: 100%; overflow: visible; }
.slide__text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 40px; align-items: end; padding: 0 var(--gut) clamp(28px, 6svh, 64px); }
.pin .slides:not(.unpin) .slide:not(:first-child) .slide__text { opacity: 0; visibility: hidden; }
.slide__main { border-top: 1px solid rgba(244, 243, 239, .3); padding-top: 22px; }
.slide__num { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: .1em; font-variant-numeric: tabular-nums; border: 1px solid rgba(244, 243, 239, .45); border-radius: 999px; padding: 3px 12px; margin-bottom: 16px; }
.slide__title { font-size: clamp(28px, 3.5vw, 54px); font-weight: 400; line-height: 1.32; letter-spacing: .04em; font-feature-settings: "palt"; }
.slide__meta { margin-top: 12px; font-size: 12px; letter-spacing: .1em; color: rgba(244, 243, 239, .8); }
.slide__body { font-size: 15px; line-height: 2.05; max-width: 30em; color: rgba(244, 243, 239, .92); }
.slides :focus-visible { outline-color: var(--teal-lite); }
.slide svg text { font-family: var(--font); }
.s-ln, .s-ln rect, .s-ln path { fill: none; stroke: rgba(244, 243, 239, .72); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-tx { font-size: 14px; fill: rgba(244, 243, 239, .9); }
.s-tx--h { font-size: 17px; font-weight: 700; }
.s-tx--dim { font-size: 13px; fill: rgba(244, 243, 239, .62); }
.s-sel { fill: rgba(95, 211, 191, .14); stroke: var(--teal-lite); stroke-width: 2; }
.s-arrow { fill: none; stroke: var(--teal-lite); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-field text { font-size: 13px; fill: rgba(244, 243, 239, .72); }
.s-field rect { fill: none; stroke: rgba(244, 243, 239, .38); }
.s-field .s-val { font-size: 12px; fill: var(--teal-lite); }
.s-mini text { font-size: 13px; fill: rgba(244, 243, 239, .82); }
.s-mini .s-mark { fill: var(--teal-lite); font-weight: 700; font-size: 16px; }
.s-mini .s-q { fill: #F2C18F; font-size: 12px; }
.s-dk text { font-size: 15px; fill: #2A2622; }
.s-legend text { font-size: 13px; fill: rgba(244, 243, 239, .88); }
.s-dot { fill: var(--teal-lite); }
.s-sign { fill: none; stroke: var(--teal-lite); stroke-width: 2.4; stroke-linecap: round; }

/* ============================================================ 11. Add-on を使う手順（止めずに横に並べる） */
.steps { padding: clamp(96px, 15svh, 170px) 0 clamp(24px, 4svh, 48px); background: var(--bg); }
.steps__head { max-width: 44em; }
.steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 6svh, 64px); }
.step { background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.step__num { font-size: 12px; letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.step__ill { width: 100%; height: auto; background: var(--bg); border-radius: 6px; padding: 6px; }
.step__title { font-size: 20px; font-weight: 400; letter-spacing: .08em; margin-top: 4px; }
.step__text { font-size: 14px; color: var(--ink-2); line-height: 1.9; }

/* ============================================================ 12. Add-on のラインナップ（カードごとに動き方を 3 段階で見せる） */
.addon--intro { padding-bottom: 0; }
.addon__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.addon__note { font-size: 13px; color: var(--ink-2); line-height: 1.95; padding: 14px 18px; border-left: 2px solid var(--teal); background: var(--card); max-width: 40em; }
.addon__incl { font-size: 13px; color: var(--ink-3); line-height: 1.9; max-width: 40em; }
.lineup { padding: clamp(24px, 4svh, 48px) 0 clamp(80px, 12svh, 140px); background: var(--bg); }
.lineup__head { max-width: 46em; margin-bottom: clamp(28px, 5svh, 48px); }
.lineup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lcard { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: background .4s; }
.lcard:hover { background: var(--white); }
.lcard--soft { background: transparent; border: 1px dashed var(--line-3); }
.lcard--soft:hover { background: transparent; }
.lcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.lcard__title { font-size: 17px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.lcard__ver { font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--ink-3); }
.lcard__stage { background: var(--bg); border-radius: 6px; overflow: hidden; }
.lcard--soft .lcard__stage { background: var(--bg-2); }
.lcard__art { display: block; width: 100%; height: auto; }
.lcard__text { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.lcard__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); line-height: 1.8; }
.lcard__link { display: inline-flex; gap: 8px; font-size: 14px; letter-spacing: .04em; color: var(--ink); transition: color .3s; }
.lcard__link span[aria-hidden] { transition: transform .5s var(--ease); }
.lcard__link:hover { color: var(--teal-ink); }
.lcard__link:hover span[aria-hidden] { transform: translate(2px, -2px); }
/* 01・02・03 の段階（今の段階の線が伸びる。Vizcom 型の進み具合） */
.lsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lstep { position: relative; padding-top: 10px; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--ink-3); transition: color .3s; }
.lstep::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.lstep__bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left center; }
.lstep__n { display: block; font-size: 10px; letter-spacing: .12em; margin-bottom: 2px; }
.lstep.is-now, .lstep.is-done { color: var(--ink); }
.lstep.is-done .lstep__bar { transform: scaleX(1); }
.lstep.is-now .lstep__bar { transform: scaleX(1); transition: transform var(--st, 2s) linear; }

/* 動き方の画の部品 */
.lcard__art text, .dcard__ill .d-mini { font-family: var(--font); }
.d-tx { font-size: 13px; fill: var(--ink-2); letter-spacing: .02em; }
.d-txs { font-size: 11px; fill: var(--ink-3); letter-spacing: .04em; }
.d-txh { font-size: 14px; fill: var(--ink); font-weight: 700; letter-spacing: .04em; }
.d-txt { font-size: 13px; fill: var(--teal-ink); font-weight: 700; }
.d-mini { font-size: 9.5px; fill: var(--white); font-weight: 700; letter-spacing: .02em; }
.d-mini--ink { fill: var(--ink); }
.d-tbd { stroke-dasharray: 5 4; }
.d-cell { fill: var(--white); stroke: var(--line-3); stroke-width: 1; }
.d-sel { fill: var(--teal); fill-opacity: .16; stroke: var(--teal-d); stroke-width: 1.4; }
.d-lite { fill: var(--teal); fill-opacity: .14; }
.d-chipbg { fill: var(--bg-2); stroke: transparent; stroke-width: 1.4; }
.d-tchip { fill: var(--teal-d); }
.d-tchip-tx { font-size: 12.5px; fill: var(--white); font-weight: 700; letter-spacing: .02em; }
.d-hl { fill: var(--white); stroke: var(--ink); stroke-width: 1.3; }
.d-path { fill: none; stroke: var(--teal-d); stroke-width: 2.2; stroke-linecap: round; }
.d-edge { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.d-band { fill: var(--teal); fill-opacity: .2; }
.d-car { fill: var(--ink); }
.d-carf { fill: var(--teal-lite); }
.d-pipe { fill: none; stroke: var(--teal-d); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-riser { fill: var(--white); stroke: var(--teal-d); stroke-width: 3; }
.d-masu { fill: var(--white); stroke: var(--ink); stroke-width: 1.6; }
.d-masu--pub { fill: var(--ink); }
.d-drop { fill: none; stroke: var(--teal-d); stroke-width: 1.8; stroke-linecap: round; }
.d-stair { fill: var(--bg-2); stroke: var(--ink); stroke-width: 1.3; }
.d-door { fill: var(--teal-d); }
.d-dot { fill: var(--ink); stroke: var(--white); stroke-width: 1.5; }
.d-shadow { filter: drop-shadow(0 6px 14px rgba(38, 37, 35, .16)); }
html:not(.demo-on) .d-mv { display: none; }   /* 動かさないときは、走る車を出さない */

/* 段階の仕組み：main.js が [data-demo] に s1・s2・s3 を順に付ける（静止のときは最初から s1〜s3）。
   JS が動かない環境では、下の「初めの状態」が当たらないので、最後の状態のまま見える */
:is(.demo-on, .demo-static) [data-demo] .fx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
:is(.demo-on, .demo-static) [data-demo] :is(.fx-fade, .fx-fly) { opacity: 0; }
:is(.demo-on, .demo-static) [data-demo] .fx-up { opacity: 0; transform: translateY(10px); }
:is(.demo-on, .demo-static) [data-demo] .fx-pop { opacity: 0; transform: scale(.3); }
:is(.demo-on, .demo-static) [data-demo] .fx-grow { transform: scaleX(0); }
.fx-pop, .fx-grow, .fx-wide { transform-box: fill-box; }
.fx-pop { transform-origin: center; }
.fx-grow { transform-origin: left center; }
.fx-wide { transform-origin: left bottom; }
[data-demo].s1 .on1.fx-draw, [data-demo].s2 .on2.fx-draw, [data-demo].s3 .on3.fx-draw { stroke-dashoffset: 0; }
[data-demo].s1 :is(.on1.fx-fade, .on1.fx-up, .on1.fx-pop),
[data-demo].s2 :is(.on2.fx-fade, .on2.fx-up, .on2.fx-pop),
[data-demo].s3 :is(.on3.fx-fade, .on3.fx-up, .on3.fx-pop) { opacity: 1; transform: none; }
[data-demo].s1 .on1.fx-grow, [data-demo].s2 .on2.fx-grow, [data-demo].s3 .on3.fx-grow { transform: none; }
[data-demo].s2 .on2.fx-fly { opacity: 1; transform: translate(var(--tx), var(--ty)); }
[data-demo].s3 .on3.fx-wide { transform: scaleX(1.12); }
[data-demo].s1 .on1.fx-hl { fill: rgba(0, 160, 139, .16); stroke: var(--teal-d); }
[data-demo].s3 .on3.fx-fill { fill: var(--c); }
[data-demo].s2 .off2.fx-out, [data-demo].s3 .off3.fx-out { opacity: 0; }
.demo-on [data-demo] [class*="fx-"] { transition-property: opacity, transform, stroke-dashoffset, fill, stroke; transition-duration: var(--du, .7s); transition-timing-function: var(--ez, var(--ease)); transition-delay: var(--dl, 0s); }
.demo-on [data-demo].is-reset [class*="fx-"] { transition: none !important; }
.demo-on [data-demo].is-play .d-drop { animation: d-rain 1.1s linear infinite; animation-delay: var(--rd, 0s); }
@keyframes d-rain { 0% { transform: translateY(-10px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }

/* ============================================================ 13. よくある質問 */
.faq { background: var(--bg); }
.faq__list { border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa__q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 4px; font-size: 16px; letter-spacing: .04em; cursor: pointer; transition: color .3s; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--teal-ink); }
.qa__icon { position: relative; flex: none; width: 14px; height: 14px; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a { padding: 0 4px 26px; color: var(--ink-2); max-width: 40em; }
.motion .qa[open] .qa__a { animation: fadeUp .6s var(--ease-v); }

/* ============================================================ 14. 活動報告（サムネイルは載せず、文字のカードにそろえる） */
.journal { padding: clamp(96px, 15svh, 170px) 0 clamp(64px, 10svh, 120px); background: var(--bg); }
.journal__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 7vw, 140px); align-items: end; margin-bottom: clamp(40px, 7svh, 72px); }
.journal__head .lead { margin-top: 0; }
.journal__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px clamp(32px, 5vw, 80px); margin-top: clamp(56px, 9svh, 96px); }
.jcol__title { display: flex; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.jcol__sub { font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; }
.jcol__more { margin-top: 24px; }
.jcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 24px; }
.jcard__link { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 188px; padding: 22px 22px 20px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; transition: transform .6s var(--ease), background-color .4s, box-shadow .6s var(--ease); }
.jcard__link:hover { transform: translateY(-4px); background: var(--white); box-shadow: 0 18px 36px -24px rgba(38, 37, 35, .35); }
.jcard__meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.jcard__title { font-size: 15px; line-height: 1.85; letter-spacing: .03em; transition: color .3s; }
.jcard__link:hover .jcard__title { color: var(--teal-ink); }
.jcard__go { margin-top: auto; font-size: 13px; color: var(--ink-2); letter-spacing: .06em; }
.jrows li { border-bottom: 1px solid var(--line); }
.jrow__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 2px; }
.jrow__meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.jrow__title { grid-column: 1; font-size: 15px; line-height: 1.8; letter-spacing: .03em; transition: color .3s; }
.jrow__arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 14px; transition: transform .5s var(--ease); }
.jrow__link:hover .jrow__title { color: var(--teal-ink); }
.jrow__link:hover .jrow__arrow { transform: translate(3px, -3px); }
.jrow--compact .jrow__title { font-size: 14px; }
.journal__stamp { margin-top: 48px; font-size: 12px; color: var(--ink-3); }

/* ============================================================ 15. 運営者情報 */
.about { background: var(--bg); }
.notice { margin-top: 40px; padding: 28px 32px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-2); }
.notice__title { font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-bottom: 10px; }
.notice__list { display: grid; gap: 6px; font-size: 14px; }
.notice__list li { position: relative; padding-left: 16px; }
.notice__list li::before { content: ""; position: absolute; left: 0; top: .95em; width: 6px; height: 1px; background: var(--ink); }

/* ============================================================ 16. フッター（VUILD 型：白い角丸のカード） */
.ftr { padding: 0 12px 12px; display: grid; gap: 12px; background: var(--bg); }
.fcard { background: var(--white); border-radius: 10px; padding: clamp(28px, 5vw, 72px); }
.fcard--cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: end; }
.fcard__lead { grid-column: 1 / -1; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.75; letter-spacing: .06em; }
.fcard__big { font-size: clamp(46px, 9.4vw, 158px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.fcard__btn { align-self: end; margin-bottom: 1.2vw; }
.fcard--nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 40px; }
.fbrand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fnav__col { display: grid; gap: 4px; align-content: start; font-size: 13px; }
.fnav__col a { display: inline-block; min-height: 24px; padding: 3px 0; transition: color .3s; }
.fnav__col a:hover { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 4px; }
.fcard__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); line-height: 1.8; }
.fcard__foot p:first-child { max-width: 58em; }

/* ============================================================ 17. ついてくるカーソル（PC のみ） */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .35s; }
html.has-cursor .cursor.is-on { opacity: 1; }
.cursor__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: transform .45s var(--ease), background .3s; }
.cursor__ring { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; max-width: none; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .5s var(--ease); overflow: visible; }
.cursor.has-prog .cursor__ring { opacity: 1; transform: none; }
.cursor.has-prog .cursor__dot { transform: scale(.6); }
.cursor__track { fill: none; stroke: rgba(38, 37, 35, .2); stroke-width: 1.5; }
.cursor__prog { fill: none; stroke: var(--teal-d); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); transform: rotate(-90deg); transform-origin: 24px 24px; }
.cursor__label { position: absolute; left: 30px; top: -12px; white-space: nowrap; font-size: 10px; letter-spacing: .2em; line-height: 1; color: var(--ink); padding: 7px 0; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .5s var(--ease); }
.cursor.has-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-big .cursor__dot { transform: scale(0); }
.cursor.is-big .cursor__ring { opacity: 0; }
.cursor.is-big .cursor__label { left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; font-size: 14px; letter-spacing: .06em; padding: 13px 22px; border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .4); }
.cursor.is-big.has-label .cursor__label { transform: translate(-50%, -50%); opacity: 1; }
.cursor.is-link .cursor__dot { transform: scale(2.6); background: rgba(0, 128, 110, .3); }
.cursor.is-dark .cursor__dot { background: #F4F3EF; }
.cursor.is-dark .cursor__label { color: #F4F3EF; }
.cursor.is-dark .cursor__track { stroke: rgba(244, 243, 239, .3); }
.cursor.is-dark .cursor__prog { stroke: var(--teal-lite); }
html.has-cursor [data-cursor-hide], html.has-cursor [data-cursor-hide] * { cursor: none; }

/* ============================================================ 18. 下から現れる（VUILD：20px・1.2 秒・0.1 秒ずつ） */
.motion [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--ease-v), transform 1.2s var(--ease-v); transition-delay: var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal].is-quick { transition: none; }   /* 動きの途中なら打ち切って、すぐ見える状態に */

/* ============================================================ 19. アニメーション */
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes rise { to { transform: none; } }
@keyframes openingAuto { to { opacity: 0; visibility: hidden; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 160, 139, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(0, 160, 139, 0); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================ 20. 画面幅ごとの調整 */
@media (max-width: 1100px) {
  .story__body { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr); }
  .app__body { grid-template-columns: 0 minmax(0, 1fr) 28%; }
  .app__nav { padding: 0; border: 0; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --hdr-h: 64px; }
  .gnav, .hdr__cta { display: none; }
  .menu-btn { display: block; }
  .hdr.is-float .hdr__bar { padding: 0 6px 0 18px; }
  .vcards { grid-template-columns: minmax(0, 1fr); }
  .vcard { min-height: 380px; }
  .story__body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .story__stage { order: -1; justify-items: stretch; }
  .pin .story:not(.unpin) .app, .app { width: 100%; max-width: none; justify-self: stretch; aspect-ratio: auto; }
  .app__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .app__nav { display: none; }
  .app__canvas, .pin .story:not(.unpin) .app__canvas { aspect-ratio: 600 / 548; }
  .app__side { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: center; padding: 10px 12px; }
  .app__side .app__h, .app__run { display: none; }
  .prompt { min-height: 0; flex: 1; padding: 8px 10px; font-size: 12px; }
  .app__reply { display: none; }
  .pin .story:not(.unpin) .story__captions { min-height: 196px; }
  .pin .story:not(.unpin) .scap { top: 44px; }
  .story__count span:first-child { font-size: 34px; }
  .scap__text { font-size: 14px; line-height: 1.95; }
  .pin .story:not(.unpin) .story__track { height: calc(var(--n) * 72svh + 100svh); }
  .twocol, .journal__head { grid-template-columns: minmax(0, 1fr); }
  .lineup__grid { grid-template-columns: minmax(0, 1fr); }
  .journal__grid { grid-template-columns: minmax(0, 1fr); }
  .slide__text { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .slide__art { bottom: 46%; padding: calc(var(--hdr-h) + 8px) 5% 0; }
  .fcard--cta, .fcard--nav { grid-template-columns: minmax(0, 1fr); }
  .fcard__btn { justify-self: start; }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  .pin .hero:not(.unpin) { height: 220svh; }
  .hero__head { gap: 8px; }
  .hero__title { font-size: 13px; letter-spacing: .08em; }
  .hero__catch { margin-top: 10px; font-size: min(6.2vw, 30px); line-height: 1.42; }
  .hero__actions { margin-top: 20px; gap: 12px 20px; }
  .hero__actions .btn { width: 100%; }
  .hero__note { font-size: 11px; }
  .hero__ph { display: none; }
  .pin .hero:not(.unpin) .hero__scroll { display: none; }
  .vcard { padding: 24px 22px; min-height: 0; }
  .vcard__ill { position: static; width: 100%; max-width: 340px; margin: 18px 0 14px auto; }
  .vcard__text { max-width: none; }
  .stab { min-width: 0; flex: 1; padding: 8px 2px 10px; column-gap: 4px; }
  .stab__num { display: none; }
  .stab__label { font-size: 13px; }
  .story__tabs { gap: 6px; }
  .dcard { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; min-height: 0; }
  .dcard__ill { width: 60%; }
  .diff__ctrl .round-btn { width: 44px; height: 44px; }
  .rows__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
  .rows__row dd { font-size: 14px; }
  .slide__title { font-size: 26px; }
  .slide__body { font-size: 13px; line-height: 1.9; }
  .slide__main { padding-top: 16px; }
  .slide__num { margin-bottom: 10px; }
  .slide__art { bottom: 50%; }
  .steps__list { grid-template-columns: minmax(0, 1fr); }
  .jcards { grid-template-columns: minmax(0, 1fr); }
  .jcard__link { min-height: 0; }
  .qa__q { font-size: 15px; padding: 20px 2px; }
  .notice { padding: 22px 20px; }
  .fnav { grid-template-columns: 1fr 1fr; }
  .fcard__btn { justify-self: stretch; width: 100%; padding: 0 18px; font-size: 13px; }
  .lcard { padding: 18px; }
  .lsteps { gap: 6px; }
  .lstep { font-size: 11.5px; }
}
@media (max-width: 360px) {
  .btn { font-size: 12.5px; letter-spacing: .02em; padding: 0 16px; gap: 8px; }
}

/* 低い画面のスマホ（iPhone の Safari でバーが出ている時など）：テンプレートの説明（#how）を止めたときの並びを
   2 段階で詰める。どの段階にするかは main.js が中身の高さを測って選ぶ（入らなければ最後に縦並び .unpin）
   is-compact … タブを小さく、場面の数字を見出しの右へ、本文を小さく、4 つの説明を同じ升に重ねる
   is-tight   … さらに本文の代わりに 1 行の要約、画面の見本を 8 割の高さに */
@media (max-width: 900px) {
  .pin .story.is-compact:not(.unpin) .story__sticky { gap: 10px; padding-top: calc(var(--hdr-h) + 6px); padding-bottom: 10px; }
  .pin .story.is-compact:not(.unpin) .story__body { gap: 12px; }
  .pin .story.is-compact:not(.unpin) .story__stage { gap: 8px; }
  .pin .story.is-compact:not(.unpin) .stab { padding: 6px 2px 8px; row-gap: 6px; }
  .pin .story.is-compact:not(.unpin) .stab__label { font-size: 12px; line-height: 1.5; }
  .pin .story.is-compact:not(.unpin) .app__side { padding: 7px 10px; }
  .pin .story.is-compact:not(.unpin) .prompt { font-size: 11.5px; line-height: 1.6; padding: 6px 9px; min-height: calc(3.2em + 14px); }
  .pin .story.is-compact:not(.unpin) .story__captions { display: grid; min-height: 0; }
  .pin .story.is-compact:not(.unpin) .story__count { grid-area: 1 / 1; justify-self: end; align-self: start; gap: 5px; padding-top: 6px; font-size: 12px; line-height: 1; }
  .pin .story.is-compact:not(.unpin) .story__count span:first-child { font-size: 22px; }
  .pin .story.is-compact:not(.unpin) .scap { grid-area: 1 / 1; position: relative; top: auto; left: auto; right: auto; }
  .pin .story.is-compact:not(.unpin) .scap__title { padding-right: 78px; gap: 2px 10px; }
  .pin .story.is-compact:not(.unpin) .scap__jp { font-size: 22px; line-height: 1.45; }
  .pin .story.is-compact:not(.unpin) .scap__en { font-size: 10px; }
  .pin .story.is-compact:not(.unpin) .scap__text { margin-top: 4px; font-size: 13px; line-height: 1.75; }
  .pin .story.is-compact.is-tight:not(.unpin) .scap__text { display: none; }
  .pin .story.is-compact.is-tight:not(.unpin) .scap__sum { display: block; margin-top: 2px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
  .pin .story.is-compact.is-tight:not(.unpin) .app__bar { height: 26px; }
  .pin .story.is-compact.is-tight:not(.unpin) .app__canvas { aspect-ratio: 600 / 440; }
  .pin .story.is-compact.is-tight:not(.unpin) .prompt { font-size: 11px; padding: 5px 8px; min-height: calc(3.2em + 12px); }
}
@media (max-height: 700px) and (min-width: 901px) {
  .hero__catch { font-size: clamp(24px, 5.6svh, 46px); }
  .pin .story:not(.unpin) .story__captions { min-height: 240px; }
}

/* 動きを減らす設定：残っている小さな動き（ボタンの文字の入れ替え・メニューの入り方など）も止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ============================================================ 21. 文字の設計 v0.5（読む順番を太さ・大きさ・色・書体で分ける）
   読む順番: ①見出し（最大・太い・墨）→ ②リード（中・500・墨）→ ③本文（小・400・灰）→ ④ラベル・番号（最小・英字書体・差し色）
   方向: html[data-type] … t1＝ゴシックの太さ（Noto Sans JP＋Inter）／t2＝明朝の見出し（Shippori Mincho B1）／t3＝図面の寸法書き（Zen Kaku Gothic New＋JetBrains Mono） */
:root {
  /* 既定＝T-3。privacy.html など data-type の無いページもこの値になる */
  --f-head: "Zen Kaku Gothic New", var(--font);
  --f-label: "JetBrains Mono", ui-monospace, monospace;
  --w-display: 900; --w-head: 700; --w-card: 700; --w-lead: 500;
  --ls-head: .03em;
}
html[data-type="t1"] { --f-head: var(--font); --f-label: "Inter", var(--font); --w-display: 800; --ls-head: .02em; }
html[data-type="t2"] { --f-head: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; --w-display: 700; --w-head: 700; --w-card: 600; --ls-head: .04em; }
html[data-type="t3"] { --f-head: "Zen Kaku Gothic New", var(--font); --f-label: "JetBrains Mono", ui-monospace, monospace; --w-display: 900; --w-head: 700; --w-card: 700; --ls-head: .03em; }

/* ①見出し */
.hero__catch { font-family: var(--f-head); gap: .1em; }
.hero__catch .line:first-child { font-family: var(--font); font-size: .42em; font-weight: 500; letter-spacing: .08em; color: var(--ink-2); }
.hero__catch .line:first-child em { color: var(--teal-ink); font-weight: 700; }
.hero__catch .line:nth-child(2) { font-weight: var(--w-display); letter-spacing: var(--ls-head); line-height: 1.22; }
.hero__catch { font-size: clamp(30px, min(4.9vw, 7.4svh), 72px); }
.hero__title { font-size: clamp(12px, 1vw, 14px); font-weight: 500; letter-spacing: .14em; color: var(--ink-2); }
.h2, .statement__title, .slide__title { font-family: var(--f-head); font-weight: var(--w-head); letter-spacing: var(--ls-head); }
.h2 { font-size: clamp(27px, 2.9vw, 44px); line-height: 1.42; }
.h2--xl { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.32; }
.statement__title { font-size: clamp(28px, 3.3vw, 50px); line-height: 1.42; }
.slide__title { line-height: 1.3; }
.vcard__title, .scap__title, .dcard__title, .step__title, .lcard__title, .addon__name { font-family: var(--f-head); font-weight: var(--w-card); }
.vcard__jp { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: .06em; }
.scap__jp { font-size: clamp(26px, 2.5vw, 36px); letter-spacing: .06em; }
.dcard__title { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.55; }
.step__title { font-size: 20px; letter-spacing: .06em; }
.lcard__title { font-size: 18px; }
.fcard__lead { font-family: var(--f-head); font-weight: var(--w-head); font-size: clamp(20px, 2vw, 28px); line-height: 1.6; letter-spacing: .04em; }
.qa__q { font-weight: 700; }
.jcol__title { font-size: 14px; }

/* ②リード：墨・500・本文より一回り大きい */
.lead, .statement__lead { color: var(--ink); font-weight: var(--w-lead); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.95; }
.hero__lead p:first-child { font-weight: var(--w-lead); }
.addon__text { color: var(--ink); }

/* ③本文：灰・400（今のまま）。カードの本文は 14px を保つ */
.jcard__title, .jrow__title { font-weight: 500; }

/* ④ラベル・番号：英字書体・差し色・等幅数字 */
.eyebrow { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--teal-ink); }
.eyebrow::before { background: var(--teal); opacity: 1; }
html:not([data-type="t1"]):not([data-type="t2"]) .eyebrow { font-weight: 500; letter-spacing: .08em; text-transform: none; }
.vcard__num, .scap__num, .dcard__num, .step__num, .stab__num, .story__count, .slide__num, .menu__num, .lstep__n, .jcard__meta, .jrow__meta, .vcard__en, .scap__en, .lcard__ver, .addon__ver {
  font-family: var(--f-label); font-variant-numeric: tabular-nums;
}
.vcard__num, .dcard__num, .step__num { font-size: 13px; font-weight: 600; color: var(--teal-ink); letter-spacing: .08em; }
.vcard__en, .scap__en { font-weight: 600; letter-spacing: .14em; }
.story__count span:first-child { font-family: var(--f-label); font-weight: 600; }

/* 大きな英字（フッター）は読ませる文字でなく模様として一段下げる */
.fcard__big { font-family: var(--f-label); font-weight: 400; color: #D8D4CB; }
html[data-type="t3"] .fcard__big { letter-spacing: -.06em; }

@media (max-width: 600px) {
  .hero__catch { font-size: min(8.6vw, 34px); line-height: 1.3; }
  .hero__catch .line:first-child { font-size: .5em; }
  .h2 { font-size: min(7vw, 28px); }
  .h2--xl { font-size: min(7.8vw, 31px); }
  .statement__title { font-size: min(7.2vw, 29px); }
  .lead, .statement__lead { font-size: 15px; }
  .fcard__lead { font-size: 19px; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .hero__catch { font-size: clamp(28px, 6.4svh, 54px); }
}

/* T-3：ヒーローの 2 行は文字の大きさをそろえ、太さで分ける
   1 行目（AIが理解し…）＝500・動詞だけ 700 の差し色／2 行目（“育つ”実施設計テンプレート）＝900 */
html[data-type="t3"] .hero__catch { font-size: clamp(28px, min(3.8vw, 6.2svh), 56px); line-height: 1.3; gap: .08em; }
html[data-type="t3"] .hero__catch .line:first-child { font-family: var(--f-head); font-size: 1em; font-weight: 500; letter-spacing: var(--ls-head); color: var(--ink); }
html[data-type="t3"] .hero__catch .line:first-child em { font-weight: 700; color: var(--teal-ink); }
html[data-type="t3"] .hero__catch .line:nth-child(2) { font-weight: 900; line-height: 1.3; }
/* 読点の後ろの空き（全角の右半分）を詰める：Zen Kaku Gothic New では palt が効かないため */
.hero__catch .pn { letter-spacing: -.42em; }
@media (max-width: 600px) {
  html[data-type="t3"] .hero__catch { font-size: min(7.4vw, 30px); line-height: 1.34; }
  html[data-type="t3"] .hero__catch .line:first-child { font-size: 1em; }
}
@media (max-height: 700px) and (min-width: 901px) {
  html[data-type="t3"] .hero__catch { font-size: clamp(26px, 5.6svh, 48px); }
}

/* ============================================================ 22. SNS のアイコン（各社の公式素材を無加工で。色・形・比率を変えず、影・縁取り・動きを付けない）
   各アイコンは「アイコン＋各社が決めた余白」を 1 つの箱（.sns__mark の padding）で持つ＝並び方・折り返し・行の端に左右されない。
   ラベルとフォーカスの枠は、その箱の外に出る。
   最小サイズ: LINE＝PC 20px／スマホ 40px（高さ）・BOOTH アイコン 24px・note ロゴタイプ 30px。
   余白: LINE＝辺の 0.5 倍／X＝ロゴの幅／BOOTH＝0.25 倍／YouTube＝素材に含まれる透明の余白（三角形の大きさ）／note＝同梱の square（余白込み）。
   ホバーで拡大・色変え・影は付けない（LINE・YouTube・BOOTH の禁止事項）。文字のラベルだけ色と下線を変える */
.sns { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 2px; }
.sns__link { display: grid; justify-items: center; gap: 4px; border-radius: 8px; }
.sns__link:focus-visible { outline-offset: 2px; }
.fnav__col .sns__link { display: grid; min-height: 0; padding: 0; }   /* フッターの .fnav__col a（inline-block）より優先 */
.sns__mark { display: grid; place-items: center; box-sizing: content-box; }
.sns__icon { display: block; width: auto; max-width: none; }
/* PC */
.sns__icon--line { height: 28px; }  .sns__link--line .sns__mark { padding: 14px; }          /* 0.5 × 28 */
.sns__icon--yt { height: 48px; }    .sns__link--yt .sns__mark { padding: 4px 0; }           /* 余白は素材に含まれる */
.sns__icon--note { height: 44px; }  .sns__link--note .sns__mark { padding: 6px 0; }         /* square（余白込み）・ロゴタイプ 約 34px */
.sns__icon--x { height: 20px; }     .sns__link--x .sns__mark { padding: 20px; }             /* ロゴの幅（約 19.6px）以上 */
.sns__icon--booth { height: 28px; } .sns__link--booth .sns__mark { padding: 7px; }          /* 0.25 × 28 */
.sns__label { font-family: var(--f-label); font-size: 11px; letter-spacing: .06em; line-height: 1.4; color: var(--ink-2); transition: color .3s; }
.sns__link:hover .sns__label { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.fnav__h { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); margin-bottom: 8px; }
.fnav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); }
.menu__sns { margin-top: 28px; font-size: inherit; color: inherit; }
.menu__sns a { display: grid; padding: 0; }
@media (max-width: 600px) {
  .sns__icon--line { height: 40px; }  .sns__link--line .sns__mark { padding: 20px; }        /* スマホは 40px 以上・余白 20px */
  .sns__icon--yt { height: 52px; }    .sns__link--yt .sns__mark { padding: 14px 0; }
  .sns__icon--note { height: 48px; }  .sns__link--note .sns__mark { padding: 16px 0; }
  .sns__icon--x { height: 20px; }     .sns__link--x .sns__mark { padding: 20px; }
  .sns__icon--booth { height: 36px; } .sns__link--booth .sns__mark { padding: 9px; }
  .fnav { grid-template-columns: 1fr 1fr; }
  .fnav__col--sns { grid-column: 1 / -1; order: -1; }
  .fcard--nav { padding: 28px 16px; }
}