*{margin:0;padding:0;box-sizing:border-box}
:root{--vh:100vh;--pad-x:clamp(24px,6vw,96px);--pad-b:clamp(40px,11vh,120px)}
/* dvh はアドレスバーの伸縮や回転にブラウザが自動で追随する。JSで焼き込むと取り逃す */
@supports (height:100dvh){:root{--vh:100dvh}}
html{background:#07090d}
body{font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#f3f5f9;background:#07090d;
  height:var(--vh);overflow:hidden;overscroll-behavior:none;touch-action:none}
/* ロゴを h1 にしている（このページの主見出し）。見た目は変えない */
#nav .logo{margin:0;font-size:inherit;font-weight:inherit;line-height:0}
/* 読み上げ専用。目に見える見出しはロゴ画像そのもの */
.srt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* パネル本文の置き場。開くときにここから読む（タブ/アコーディオンと同じ） */
#psrc{display:none}
/* ---- stage ---- */
#stage{position:fixed;inset:0;height:var(--vh);overflow:hidden;background:#07090d}
/* 素材は全部16:9。cover なので、窓が縦長になるほど左右が落ちる。
   4:3 で左右25%、スマホ(375x812)では74%。人物とAKIが並ぶ章は、中央固定だと
   右にいるAKIが丸ごと画面外に出る。章ごとに注視点を持たせ、縦長では別の値を使う
   （落ちる量が違うので、同じ%では同じ場所を捉えられない）。 */
#stage video,#stage img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);
  opacity:0;transition:opacity .5s}
/* 縦画面は落ちる量が74%（幅の26%しか出ない）。横長とは別の値でないと
   同じ場所を捉えられないので、focusp を持つ章はそちらを使う。
   なお、縦画面で映像を縮めて全体を見せる案は試したが、
   ムービーとしての迫力が落ちるので採らない。全画面のままにすること。 */
@media (max-aspect-ratio:3/4){
  #stage video,#stage img.still{object-position:var(--fxp,var(--fx,50%)) var(--fy,50%)}
}
#stage video.on,#stage img.still.on{opacity:1}
#stage img.still.on{animation:kb 18s ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
#vignette{position:absolute;inset:0;z-index:2;pointer-events:none;transition:background .5s;
  background:linear-gradient(to top,rgba(5,7,10,.62) 0%,rgba(5,7,10,0) 34%)}
#stage.tone-light #vignette{
  background:linear-gradient(to top,rgba(250,248,243,.82) 0%,rgba(250,248,243,0) 30%)}
/* ---- nav ---- */
#nav{position:fixed;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;transition:opacity .35s ease;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(20px,4vw,48px) 14px;
  background:linear-gradient(to bottom,rgba(7,9,13,.55),rgba(7,9,13,0))}
#nav .logo{cursor:pointer;display:flex;align-items:center}
#nav .logo img{height:clamp(18px,2.4vw,24px);display:block}
#nav .logo .lb{display:none}
#stage.tone-light ~ #nav .logo .lw{display:none}
#stage.tone-light ~ #nav .logo .lb{display:block}
#nav .links{margin-left:auto;display:flex;gap:clamp(14px,2.6vw,30px)}
#nav .links a{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11.5px;letter-spacing:.14em;color:rgba(255,255,255,.75);
  cursor:pointer;text-decoration:none;transition:color .3s}
#nav .links a:hover{color:#fff}
#stage.tone-light ~ #nav{background:linear-gradient(to bottom,rgba(250,248,243,.6),rgba(250,248,243,0))}
#stage.tone-light ~ #nav .logo{color:#1d1d1f}
#stage.tone-light ~ #nav .links a{color:rgba(29,29,31,.65)}
#stage.tone-light ~ #nav .links a:hover{color:#1d1d1f}
/* ---- copy overlay ---- */
#copy{position:absolute;z-index:3;max-width:min(640px,86vw);
  opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
#copy.show{opacity:1;transform:none}
#copy.pos-bl{left:var(--pad-x);bottom:var(--pad-b);text-align:left}
#copy.pos-cl{left:var(--pad-x);top:50%;transform:translateY(calc(-50% + 14px));text-align:left}
#copy.pos-cl.show{transform:translateY(-50%)}
#copy.pos-bc{left:50%;bottom:var(--pad-b);transform:translate(-50%,14px);text-align:center}
#copy.pos-bc.show{transform:translate(-50%,0)}
#copy .eyebrow{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:12px;letter-spacing:.14em;color:#7fc0ff;margin-bottom:14px}
#copy .eyebrow b{color:#fff;font-weight:700}
#copy .nar{font-size:clamp(20px,3.2vw,34px);line-height:1.7;font-weight:600;color:#fff;
  text-shadow:0 2px 24px rgba(5,7,10,.65);text-wrap:pretty}
#copy.small .nar{font-size:clamp(16px,2.1vw,22px);line-height:2.0;font-weight:500}
/* テロップは“ラベル”。ボタンに見せない（クリック要素と混同させない） */
#copy .telop{display:block;margin-top:16px;font-size:clamp(12px,1.3vw,14px);letter-spacing:.1em;color:#ffd9a0;
  padding-left:13px;border-left:2px solid rgba(255,217,160,.7);line-height:1.7;
  text-shadow:0 2px 14px rgba(5,7,10,.7)}
#copy.tone-light .eyebrow{color:#0066cc}
#copy.tone-light .eyebrow b{color:#1d1d1f}
#copy.tone-light .nar{color:#1d1d1f;text-shadow:0 1px 18px rgba(250,248,243,.9)}
#copy.tone-light .telop{color:#0066cc;border-left-color:rgba(0,102,204,.55);text-shadow:0 1px 12px rgba(250,248,243,.95)}
#copy.small.tone-light .inner{background:rgba(250,248,243,.72);border:1px solid rgba(29,29,31,.08);
  border-radius:16px;padding:22px 26px;backdrop-filter:blur(6px);display:block}
#copy .inner{display:contents}
/* ---- reading panel（室内章＝全画面オーバーラップで読ませる） ---- */
/* パネル表示中はテロップ・矢印を必ず退避（重なりの原因を根絶。全ビューポート） */
body.panel-on #copy,body.panel-on #next,body.panel-on #back{opacity:0 !important;pointer-events:none}
body.panel-on #nav{opacity:0;pointer-events:none}   /* 読ませる間は本文とナビを重ねない */
/* すりガラスの膜。パネル本体の外に出してある。
   中に置くとパネルのスクロールで本文と一緒にずれるため、独立させて
   「下から上がってきて覆いかぶさる」動きだけを担当させる。 */
#panelbg{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(100deg,rgba(250,248,243,.52) 0%,rgba(250,248,243,.40) 52%,rgba(250,248,243,.22) 78%,rgba(250,248,243,.09) 100%);
  backdrop-filter:blur(15px) saturate(114%);
  opacity:0;transform:translateY(30vh);
  transition:opacity .55s ease,transform .82s cubic-bezier(.22,1,.36,1)}
#panelbg.on{opacity:1;transform:none}
#panel{position:fixed;inset:0;z-index:6;color:#1d1d1f;
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  opacity:0;pointer-events:none;transition:opacity .45s ease}
#panel.show{opacity:1;pointer-events:auto}
#panel .pin{position:relative;max-width:1180px;margin:0 auto;
  padding:clamp(72px,8.4vh,94px) clamp(24px,6vw,88px) clamp(48px,9vh,110px);
  animation:prise .86s cubic-bezier(.22,1,.36,1) .08s both}
/* 膜より少し遅れて、本文が下から追いついてくる */
@keyframes prise{from{opacity:0;transform:translateY(52px)}to{opacity:1;transform:none}}
#panel .peyebrow{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:12px;letter-spacing:.2em;color:#0066cc;margin-bottom:20px}
#panel h2{font-size:clamp(27px,4.6vw,54px);font-weight:700;line-height:1.42;letter-spacing:-.01em;margin-bottom:26px;max-width:20em;
  text-shadow:0 1px 20px rgba(250,248,243,.95),0 0 40px rgba(250,248,243,.7)}
/* 本文は薄いカードで受けて、透けた背景でも読み負けしないように */
#panel .plead{max-width:66ch;background:rgba(255,255,255,.76);border-radius:16px;
  padding:22px 26px;box-shadow:0 8px 30px rgba(20,16,10,.07);border:1px solid rgba(255,255,255,.6)}
#panel p{font-size:clamp(14.5px,1.35vw,17px);line-height:2.15;color:#333a44;margin-bottom:16px}
#panel p:last-child{margin-bottom:0}
#panel p b{color:#1d1d1f;font-weight:700}
#panel .psec{margin-top:clamp(30px,4.4vh,50px);background:rgba(255,255,255,.76);border-radius:16px;
  padding:22px 26px;box-shadow:0 8px 30px rgba(20,16,10,.07);border:1px solid rgba(255,255,255,.6)}
#panel .plabel{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11.5px;letter-spacing:.18em;color:#0066cc;
  margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(29,29,31,.14)}
/* team — 2カラム */
.pteam{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,32px)}
.pmember{display:flex;gap:16px;align-items:flex-start}
.pmember .av{flex:none;width:66px;height:66px;border-radius:50%;overflow:hidden;background:rgba(0,102,204,.1);
  box-shadow:0 6px 20px rgba(20,16,10,.12)}
.pmember .av img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.pmember .mt b{display:block;font-size:17px;margin-bottom:5px}
.pmember .mt i{font-style:normal;font-size:12px;color:#0066cc;letter-spacing:.04em}
.pmember .mt p{font-size:13.5px;line-height:2.0;margin:9px 0 0;color:#4b5563}
/* principles — 3カラム */
.pprin{counter-reset:pp;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2vw,28px)}
.pprin li{counter-increment:pp;position:relative;padding-top:44px}
.pprin li::before{content:"0" counter(pp);position:absolute;left:0;top:0;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;
  font-size:26px;font-weight:700;color:#0066cc;opacity:.45}
.pprin>li>b{display:block;font-size:15.5px;line-height:1.6;margin-bottom:8px}
.pprin span{font-size:13px;line-height:2.0;color:#4b5563}
/* 7 workflows 一覧 — 文字を大きく、余白を締める */
#panel .pwl{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 clamp(22px,3vw,44px)}
#panel .pwl li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(58,47,40,.12)}
#panel .pwl .n{font-family:"IBM Plex Mono","SF Mono",monospace;font-size:12.5px;font-weight:500;
  color:var(--amber);padding-top:.28em}
#panel .pwl .t{font-size:clamp(15.5px,1.5vw,18px);font-weight:700;color:var(--ink-strong);line-height:1.55}
#panel .pwl .t i{display:block;font-style:normal;font-size:13px;font-weight:400;line-height:1.85;
  color:var(--ink);opacity:.82;margin-top:6px;letter-spacing:.03em}
@media(max-width:560px){#panel .pwl{grid-template-columns:1fr}}

/* 7 workflows — タイルグリッド（1つずつ開く） */
.pwf{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:14px}
.pwf button{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid rgba(29,29,31,.12);border-radius:14px;padding:20px 22px 18px;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.pwf button:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,16,10,.13);
  border-color:rgba(0,102,204,.45)}
.pwf .n{display:block;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:13px;
  font-weight:700;letter-spacing:.1em;color:#0066cc;margin-bottom:10px}
.pwf .t{display:block;font-size:17px;font-weight:700;color:#1d1d1f;line-height:1.5;margin-bottom:8px}
.pwf .d{display:block;font-size:13.5px;line-height:1.85;color:#4b5563;letter-spacing:.02em}
.pwf .g{display:inline-block;margin-top:14px;padding-top:12px;font-size:12.5px;color:#0066cc;
  font-weight:600;border-top:1px solid rgba(29,29,31,.09);width:100%}
/* extension — 4カード */
.pext{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.pext .c{background:rgba(255,255,255,.86);border:1px solid rgba(29,29,31,.12);border-radius:16px;padding:18px}
.pext .c em{font-style:normal;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11px;letter-spacing:.16em;color:#0066cc}
.pext .c>b{display:block;font-size:14.5px;margin:9px 0 7px}
.pext .c span{font-size:12.5px;line-height:1.95;color:#4b5563}
.pexamples ul{margin:0;padding:0}
.pexamples li{list-style:none;padding:16px 0;border-top:1px solid rgba(29,29,31,.1);font-size:13px;line-height:2.0}
.pexamples>li>b{display:block;color:#1d1d1f;margin-bottom:4px;font-size:14.5px;line-height:1.7}
.pexamples li span{color:#4b5563}
/* ==== パネルの版面：1本のコラムに揃える ==== */
#panel .pin{max-width:940px}
#panel .plead,#panel .pdef{max-width:none}
/* 4項目のときに3+1で余らないよう、狭めのミニマムで割る */
#panel .pprin{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
#panel .pprin.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){#panel .pprin.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){#panel .pprin{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media (max-width:560px){#panel .pprin,#panel .pprin.four{grid-template-columns:1fr}}

/* ==== 読み物パネル：紙の質感に寄せた作り直し ==== */
#panel{--cream:#fdf4e0;--cream2:#faf6ec;--paper:#f4eede;--ink:#3a2f28;--ink-strong:#2a2320;
       --amber:#f2b705;--coral:#f2765e;--line:rgba(58,47,40,.13)}
/* 背景も冷たい白ではなく、きなりのすりガラスに。
   映像が透けて見えるよう、以前より全体に薄くしてある。 */
#panelbg{background:linear-gradient(104deg,rgba(250,246,236,.68) 0%,rgba(250,246,236,.54) 46%,
  rgba(253,244,224,.30) 76%,rgba(253,244,224,.13) 100%);
  backdrop-filter:blur(17px) saturate(120%)}
/* eyebrow はバッジに */
#panel .peyebrow{display:inline-block;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11px;letter-spacing:.18em;
  color:var(--ink-strong);background:rgba(242,183,5,.24);border:1px solid rgba(242,183,5,.55);
  border-radius:980px;padding:7px 15px;margin-bottom:22px}
#panel h2{color:var(--ink-strong);line-height:1.4;
  text-shadow:0 1px 22px rgba(253,244,224,.98),0 0 44px rgba(250,246,236,.8)}
/* 本文カード・セクションカード — 紙 */
#panel .plead,#panel .psec{
  background:linear-gradient(180deg,rgba(253,244,224,.94),rgba(250,246,236,.90));
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,36px);
  box-shadow:0 16px 44px rgba(58,47,40,.10),inset 0 1px 0 rgba(255,255,255,.75)}
#panel p{color:var(--ink);line-height:2.1}
#panel p b{color:var(--ink-strong)}
/* セクション見出しは琥珀のマーカーで */
#panel .plabel{position:relative;color:var(--ink-strong);font-size:11px;letter-spacing:.16em;
  padding:0 0 12px 16px;border-bottom:1px solid var(--line)}
#panel .plabel::before{content:"";position:absolute;left:0;top:1px;width:5px;height:13px;
  border-radius:3px;background:var(--amber)}
/* 定義カード — 「これは何か」を最初に言い切る場所 */
#panel .pdef{display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;
  margin-bottom:18px;padding:20px clamp(20px,2.4vw,28px);
  background:#fff;border:1px solid rgba(242,183,5,.42);border-left:5px solid var(--amber);
  border-radius:18px;box-shadow:0 12px 32px rgba(58,47,40,.09)}
#panel .pdef .k{flex:none;align-self:center;font-size:clamp(13px,1.3vw,15px);font-weight:700;
  color:var(--ink-strong);letter-spacing:.02em;padding-right:clamp(14px,1.8vw,22px);
  border-right:1px solid rgba(58,47,40,.14)}
#panel .pdef .v{font-size:clamp(13.5px,1.25vw,15px);line-height:1.95;color:var(--ink)}
#panel .pdef .v b{color:var(--ink-strong)}
/* 役割・原則カード — 番号を丸バッジにして紙のカードに載せる */
#panel .pprin{gap:clamp(12px,1.4vw,18px)}
#panel .pprin li{padding:clamp(18px,2vw,24px);background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 8px 22px rgba(58,47,40,.07)}
#panel .pprin li::before{position:static;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-bottom:13px;border-radius:50%;
  background:rgba(242,183,5,.2);color:var(--ink-strong);opacity:1;font-size:12.5px}
#panel .pprin b{color:var(--ink-strong)}
#panel .pprin span{color:var(--ink);opacity:.86}
/* タイル・カード類も紙に揃える */
#panel .pwf button,#panel .pext .c{background:#fff;border-color:var(--line);
  box-shadow:0 8px 22px rgba(58,47,40,.07)}
#panel .pwf button:hover{border-color:rgba(242,183,5,.65);box-shadow:0 16px 36px rgba(58,47,40,.14)}
#panel .pwf .t,#panel .pext .c b{color:var(--ink-strong)}
#panel .pext .c span,#panel .pexamples li span{color:var(--ink);opacity:.86}
#panel .pexamples li{border-top-color:var(--line)}
#panel .pexamples li b{color:var(--ink-strong)}
#panel .pmember .mt p{color:var(--ink);opacity:.88}
#panel .pmember .av{box-shadow:0 8px 22px rgba(58,47,40,.16)}
/* パネル内の表 */
#panel .twrap{border-color:var(--line);background:#fff}
#panel .twrap th{background:rgba(242,183,5,.14);color:var(--ink-strong);border-bottom-color:var(--line)}
#panel .twrap td{color:var(--ink);border-bottom-color:rgba(58,47,40,.08)}
#panel .twrap td:last-child{color:var(--ink-strong)}

/* ==== お問い合わせフォーム ==== */
.cform{margin:22px 0 4px}
.cfrow{margin-bottom:14px}
.cfrow label{display:block;font-size:13px;font-weight:700;color:var(--ink-strong);
  letter-spacing:.04em;margin-bottom:6px}
.cfrow label em,.cfrow label i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  margin-left:8px;padding:2px 7px;border-radius:3px;vertical-align:1px}
.cfrow label em{background:rgba(180,85,42,.12);color:#a44a22}
.cfrow label i{background:rgba(29,29,31,.07);color:#6b7280}
.cform input,.cform textarea{width:100%;font:inherit;font-size:15px;line-height:1.7;color:var(--ink-strong);
  background:#fff;border:1px solid rgba(29,29,31,.2);border-radius:8px;padding:11px 13px;
  transition:border-color .18s,box-shadow .18s}
.cform textarea{resize:vertical;min-height:104px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:#0066cc;
  box-shadow:0 0 0 3px rgba(0,102,204,.14)}
.cfrow.bad input,.cfrow.bad textarea{border-color:#b4552a;background:#fffaf8}
.cfmsg{display:none;font-size:12px;color:#a44a22;margin-top:5px}
.cfrow.bad .cfmsg{display:block}
.cfconsent{margin-top:18px;padding-top:16px;border-top:1px solid rgba(29,29,31,.12)}
.cfcheck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.8;
  color:var(--ink-strong)}
.cfcheck input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:#0066cc;cursor:pointer}
.cfcheck a{color:#0066cc;text-underline-offset:3px}
.cfcheck em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;margin-left:8px;
  padding:2px 7px;border-radius:3px;background:rgba(180,85,42,.12);color:#a44a22;vertical-align:1px}
.cfconsent.bad .cfcheck input{outline:2px solid #b4552a;outline-offset:2px}
.cfpriv a{color:#0066cc;text-underline-offset:3px}
.cfpriv{font-size:12px;line-height:1.85;color:#6b7280;margin:14px 0 10px}
.cferr{font-size:13px;line-height:1.8;color:#a44a22;background:rgba(180,85,42,.08);
  border-radius:8px;padding:10px 13px;margin:0 0 12px}
.cfsend{width:100%;justify-content:center}
.cfsend[disabled]{opacity:.55;cursor:default}
.cfdone{margin:22px 0 4px;padding:20px 22px;background:#fff;
  border:1px solid rgba(29,29,31,.14);border-left:3px solid #0066cc;border-radius:10px}
.cfdone b{display:block;font-size:17px;color:var(--ink-strong);margin-bottom:8px}
.cfdone p{font-size:13.5px;line-height:1.95;color:#4b5563;margin:0}
.cfdone .cfnote{margin-top:10px;font-size:12px;color:#8a8f98}
#panel .pnote{color:var(--ink);opacity:.72}
@media (max-width:720px){
  #panel .pdef{flex-direction:column;gap:12px}
  #panel .pdef .k{align-self:flex-start;padding:0 0 10px;border-right:none;
    border-bottom:1px solid rgba(58,47,40,.14)}
  #panel .twrap tr{background:#fff;border-color:var(--line)}
  #panel .twrap td:first-child{color:var(--ink);opacity:.75}
}

/* パネル：任せる範囲が広がる3段階 */
#panel .ptier{display:grid;gap:clamp(14px,1.6vw,20px)}
#panel .pt{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);box-shadow:0 10px 26px rgba(58,47,40,.07)}
#panel .pt::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;
  border-radius:0 4px 4px 0;background:var(--amber)}
#panel .pt:nth-child(2)::before{background:var(--coral)}
#panel .pt:nth-child(3)::before{background:#86c440}
#panel .pth{margin-bottom:14px}
#panel .pth em{font-style:normal;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.18em;
  color:var(--ink);opacity:.55;display:block;margin-bottom:6px}
#panel .pth b{font-size:clamp(16px,1.6vw,19px);color:var(--ink-strong);margin-right:12px}
#panel .pth i{font-style:normal;font-size:12.5px;color:var(--ink);opacity:.78}
#panel .ptier ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
#panel .ptier li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);
  align-items:center;gap:clamp(10px,1.4vw,18px);
  padding:12px 15px;background:var(--cream2);border-radius:12px;font-size:13px;line-height:1.85}
#panel .ptier li .a{color:var(--ink);opacity:.78}
#panel .ptier li .ar{color:var(--amber);font-weight:700;font-size:15px}
#panel .ptier li .b{color:var(--ink-strong);font-weight:600}
#panel .ptneed{font-size:12.5px;line-height:1.9;letter-spacing:.03em;color:var(--ink);
  background:rgba(242,183,5,.13);border-radius:10px;padding:9px 13px;margin:0 0 13px}
#panel .ptneed b{color:var(--ink-strong)}
@media (max-width:720px){
  #panel .ptier li{grid-template-columns:1fr;gap:4px;padding:12px 14px}
  #panel .ptier li .ar{display:none}
  #panel .ptier li .b::before{content:"→ ";color:var(--amber);font-weight:700}
  #panel .pth b{display:block;margin:0 0 4px}
}

/* ==== 読み物パネル：組版と抑揚（第2段） ==== */
/* 版面の頭に細い罫。記事が始まる合図 */
#panel .pin::before{content:"";position:absolute;left:clamp(24px,6vw,88px);top:clamp(50px,5.8vh,66px);
  width:52px;height:3px;border-radius:3px;background:var(--amber)}
#panel .peyebrow{margin-bottom:26px}
#panel h2{font-weight:700;letter-spacing:-.012em;line-height:1.38;margin-bottom:clamp(26px,3.2vh,38px)}

/* リードは記事の導入。一段大きく、行間もゆったり */
#panel .plead{padding:clamp(26px,3vw,38px) clamp(24px,3.2vw,42px)}
#panel .plead p{font-size:clamp(15px,1.18vw,16.5px);line-height:1.98;letter-spacing:.03em;margin-bottom:1.25em}
#panel .plead p:first-child{font-size:clamp(16px,1.36vw,18.5px);line-height:1.92;color:var(--ink-strong)}
#panel .plead p:last-child{margin-bottom:0}

/* 下位セクションは一段軽く。同じ重さの箱を積まない */
#panel .psec{margin-top:clamp(34px,5vh,58px);
  background:linear-gradient(180deg,rgba(253,244,224,.72),rgba(250,246,236,.64));
  box-shadow:0 10px 30px rgba(58,47,40,.07),inset 0 1px 0 rgba(255,255,255,.6)}
#panel .psec p{font-size:clamp(13.5px,1.05vw,15px);line-height:1.95;letter-spacing:.03em}
#panel .plabel{margin-bottom:20px}

/* 紙の粒 — のっぺりした面を避ける */
#panel .plead,#panel .psec,#panel .pdef{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
  linear-gradient(180deg,rgba(253,244,224,.94),rgba(250,246,236,.90));
  background-blend-mode:multiply,normal}
#panel .psec{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
  linear-gradient(180deg,rgba(253,244,224,.72),rgba(250,246,236,.64))}
#panel .pdef{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),linear-gradient(180deg,#fff,#fffdf8)}

/* 定義カード — 用語であることが分かる形に */
#panel .pdef{align-items:stretch;padding:clamp(20px,2.2vw,26px) clamp(22px,2.6vw,30px)}
#panel .pdef .k{display:flex;flex-direction:column;justify-content:center;align-self:stretch;
  min-width:8.5em;font-size:clamp(14px,1.35vw,16.5px);letter-spacing:.01em;line-height:1.5}
#panel .pdef .k::before{content:"用語";display:block;font-family:"IBM Plex Mono","SF Mono",monospace;
  font-size:9.5px;letter-spacing:.2em;color:var(--amber);margin-bottom:7px;font-weight:500}
#panel .pdef .v{font-size:clamp(13.5px,1.1vw,15px);line-height:2.0;letter-spacing:.03em}

/* カード内の小さめテキストも同じ組版に */
#panel .pprin span,#panel .pext .c span,#panel .ptier li,#panel .pmember .mt p{letter-spacing:.03em}
#panel .pprin b{font-size:clamp(14.5px,1.25vw,16px);line-height:1.6}

@media (max-width:720px){
  #panel .pin::before{top:auto;margin-top:-18px;width:40px}
  #panel .plead p:first-child{font-size:16px}
  #panel .pdef .k{min-width:0}
}

/* サンプル一覧：3群に整理 */
#cases .cgroup{margin-top:clamp(34px,5vh,56px)}
#cases .ghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid rgba(29,29,31,.14)}
#cases .ghead .gn{font-family:"IBM Plex Mono","SF Mono",monospace;font-size:12px;letter-spacing:.16em;
  color:#f2b705;font-weight:500}
#cases .ghead b{font-size:clamp(17px,1.7vw,21px);color:#1d1d1f}
#cases .ghead i{font-style:normal;font-size:12.5px;color:#6b7280;letter-spacing:.03em}
#cases .cgroup .ccard{margin-top:14px}
#cases .sub .note{display:inline-block;margin-top:8px;font-size:12.5px;color:#9aa3b2}

/* 用語の節 — この領域だけの形。定義は正面から出す */
#wf .wterms{background-image:none;background:linear-gradient(180deg,#fffdf8,#fdf8ec);
  border:1px solid rgba(242,183,5,.4)}
#wf .wtintro{font-size:clamp(13.5px,1.1vw,15px);line-height:2.05;letter-spacing:.03em;
  color:var(--ink);margin-bottom:20px}
#wf .wtd{margin:0}
#wf .wtd dt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-top:20px;margin-top:20px;border-top:1px solid rgba(242,183,5,.3)}
#wf .wtd dt:first-of-type{padding-top:0;margin-top:0;border-top:none}
#wf .wtd dt b{font-size:clamp(17px,1.9vw,22px);font-weight:900;color:var(--ink-strong);
  letter-spacing:-.02em}
#wf .wtd dt em{font-style:normal;font-family:"IBM Plex Mono","SF Mono",monospace;font-size:11px;
  letter-spacing:.2em;color:var(--amber)}
#wf .wtd dd{margin:10px 0 0;font-size:clamp(13.5px,1.08vw,15px);line-height:2.1;
  letter-spacing:.035em;color:var(--ink);max-width:44em}
#wf .wtd dd b{color:var(--ink-strong)}

/* ==== 実例ページ：パネルと同じ紙のテイストに揃える ==== */
#wf{--cream:#fdf4e0;--cream2:#faf6ec;--ink:#3a2f28;--ink-strong:#2a2320;
    --amber:#f2b705;--line:rgba(58,47,40,.13)}
#wf .wnum{color:rgba(242,183,5,.55)}
#wf .weyebrow{display:inline-block;font-family:"IBM Plex Mono","SF Mono",monospace;font-size:11px;
  letter-spacing:.18em;color:var(--ink-strong);background:rgba(242,183,5,.22);
  border:1px solid rgba(242,183,5,.5);border-radius:980px;padding:6px 14px}
#wf .whero h2{color:var(--ink-strong);letter-spacing:-.012em;
  text-shadow:0 1px 20px rgba(250,248,243,.96),0 0 44px rgba(250,248,243,.8)}
#wf .wnum{text-shadow:0 0 30px rgba(250,248,243,.9)}
#wf .wlead{text-shadow:0 1px 14px rgba(250,248,243,.9)}
/* 冒頭の「この方法で、こうなります」 */
#wf .wcore{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),linear-gradient(180deg,#fff,#fffdf8);
  background-blend-mode:multiply,normal;border:1px solid rgba(242,183,5,.4);
  border-left:5px solid var(--amber);border-radius:18px;box-shadow:0 12px 32px rgba(58,47,40,.09)}
#wf .wcore .lb{color:var(--amber)}
#wf .wcore b{color:var(--ink-strong)}
#wf .wcore i{color:var(--ink);opacity:.75}
#wf .wlead{font-size:clamp(15px,1.15vw,16.5px);line-height:1.98;letter-spacing:.03em;color:var(--ink)}
#wf .wlead b{color:var(--ink-strong)}
/* 各ブロックを紙のカードに */
#wf .wblk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(253,244,224,.72),rgba(250,246,236,.6));
  background-blend-mode:multiply,normal;border:1px solid var(--line);border-radius:20px;
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);margin-top:clamp(26px,3.6vh,42px);
  box-shadow:0 10px 28px rgba(58,47,40,.07),inset 0 1px 0 rgba(255,255,255,.6)}
#wf .wsum{margin:0 0 20px;padding:16px 20px;border-radius:14px;
  background:rgba(242,183,5,.14);border:1px solid rgba(242,183,5,.4);
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.95;color:var(--ink-strong)}
#wf .wsum b{font-weight:700}
#wf .wlabel{position:relative;font-family:"IBM Plex Mono","SF Mono",monospace;font-size:11.5px;
  letter-spacing:.14em;color:var(--ink-strong);padding:0 0 12px 16px;margin-bottom:18px;
  border-bottom:1px solid var(--line);border-left:none}
#wf .wlabel::before{content:"";position:absolute;left:0;top:1px;width:5px;height:13px;
  border-radius:3px;background:var(--amber)}
#wf .wperma{margin-top:26px;font-size:12.5px;color:#6b7280;letter-spacing:.02em}
#wf .wperma a{color:#0066cc;text-decoration:none;font-family:"IBM Plex Mono","SF Mono",monospace}
#wf .wperma a:hover{text-decoration:underline}
/* 実物サンプルへの導線（領域を読み終えた直後に置く） */
#wf .wsnote{font-size:13.5px;line-height:1.95;color:#4b5563;margin:0 0 18px}
#wf .wsnote b{color:var(--ink-strong)}
#wf .wsrow{display:flex;flex-wrap:wrap;gap:12px}
#wf .wsample{display:inline-flex;align-items:center;gap:10px;font-family:inherit;
  font-size:14.5px;font-weight:700;line-height:1.5;text-decoration:none;cursor:pointer;
  color:#0066cc;background:#fff;border:1px solid rgba(0,102,204,.32);border-radius:980px;
  padding:13px 22px;transition:background .2s,border-color .2s,transform .2s}
#wf .wsample:hover{background:#f2f7ff;border-color:#0066cc;transform:translateY(-1px)}
#wf .wsample>i{font-style:normal;flex:none}
@media(max-width:520px){
  #wf .wsrow{flex-direction:column}
  #wf .wsample{justify-content:space-between;width:100%;font-size:14px;padding:14px 20px}
}
/* 中身 */
#wf .wsteps li,#wf .wflow li{background:#fff;border-color:var(--line)}
#wf .wsteps li b,#wf .wflow li b{color:var(--ink-strong)}
#wf .wsteps li span,#wf .wflow li span{color:var(--ink);letter-spacing:.03em}
#wf .wflow li::before{background:rgba(242,183,5,.2);color:var(--ink-strong)}
#wf .wflow li::after{background:linear-gradient(to bottom,rgba(242,183,5,.5),rgba(242,183,5,.08))}
#wf .twrap{border-color:var(--line);background:#fff}
#wf .twrap th{background:rgba(242,183,5,.13);color:var(--ink-strong);border-bottom-color:var(--line)}
#wf .twrap td{color:var(--ink);border-bottom-color:rgba(58,47,40,.08);letter-spacing:.03em}
#wf .wcheck li{color:var(--ink);letter-spacing:.03em}
#wf .wmemo{background:#fff;border-color:var(--line);color:var(--ink);letter-spacing:.03em}
#wf .wkey{background-image:none;background:linear-gradient(135deg,rgba(242,183,5,.16),rgba(242,118,94,.10));
  border-color:rgba(242,183,5,.42)}
#wf .wkey p{color:var(--ink-strong)}
#wf .wnote,#wf .wexlead{color:var(--ink);opacity:.8;letter-spacing:.03em}

/* 実例ページ：運用の絵（入れる→AIがする→溜まる→引き出す） */
.wflow{list-style:none;counter-reset:fl;display:grid;gap:12px}
.wflow li{counter-increment:fl;position:relative;padding:16px 18px 16px 56px;
  border:1px solid rgba(29,29,31,.12);border-radius:14px;background:#fff}
.wflow li::before{content:counter(fl);position:absolute;left:18px;top:15px;
  font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:13px;font-weight:700;color:#0066cc;
  width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;
  background:rgba(0,102,204,.1)}
.wflow li::after{content:"";position:absolute;left:29px;top:44px;bottom:-13px;width:1px;
  background:linear-gradient(to bottom,rgba(0,102,204,.35),rgba(0,102,204,.06))}
.wflow li:last-child::after{display:none}
.wflow>li>b{display:block;font-size:14.5px;margin-bottom:7px;color:#1d1d1f}
.wflow li span{display:block;font-size:13.5px;line-height:2.0;color:#4b5563}
@media (max-width:720px){
  .wflow li{padding:14px 15px 14px 15px}
  .wflow li::before{position:static;display:inline-block;margin-bottom:8px}
  .wflow li::after{display:none}
}

/* パネル内の表（AIができること） */
#panel .twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(29,29,31,.12);
  border-radius:12px;background:rgba(255,255,255,.75)}
#panel .twrap table{border-collapse:collapse;width:100%;min-width:460px;font-size:13.5px;line-height:1.9}
#panel .twrap th{background:rgba(0,102,204,.08);text-align:left;font-size:12px;letter-spacing:.03em;
  padding:10px 13px;border-bottom:1px solid rgba(29,29,31,.1);color:#1d1d1f}
#panel .twrap td{padding:11px 13px;border-bottom:1px solid rgba(29,29,31,.07);color:#3f4550;vertical-align:top}
#panel .twrap tr:last-child td{border-bottom:none}
#panel .twrap td:last-child{color:#1d1d1f}

#panel .pnote{margin-top:14px;font-size:12.5px;line-height:1.95;color:#6b7280}
/* 本物のボタン（押せるものだけボタンの形にする） */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:600;letter-spacing:.02em;border-radius:980px;padding:16px 34px;
  border:none;background:#0066cc;color:#fff;text-decoration:none;
  box-shadow:0 8px 26px rgba(0,102,204,.3);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,102,204,.38);background:#0a5cb8}
.btn.ghost{background:rgba(255,255,255,.9);color:#0066cc;border:1.5px solid rgba(0,102,204,.5);box-shadow:none}
.btn.ghost:hover{background:#fff;box-shadow:0 10px 26px rgba(20,16,10,.12)}
.btn.lg{font-size:16.5px;padding:19px 44px}
.pacts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(30px,4.6vh,52px)}
.plink{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#0066cc;
  text-decoration:none;border-bottom:1px solid rgba(0,102,204,.35);padding-bottom:3px}
.plink:hover{border-bottom-color:#0066cc}
.pnote{margin-top:clamp(28px,4vh,44px);padding-top:20px;border-top:1px solid rgba(29,29,31,.12);
  font-size:12.5px;line-height:2.0;color:#6b7280;max-width:60ch}
.pnote a{color:#0066cc}
/* ---- boot / loading ---- */
#boot{position:fixed;inset:0;z-index:30;background:#07090d;display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease}
#boot.gone{opacity:0;pointer-events:none}
#boot .bwrap{text-align:center;padding:24px;max-width:min(440px,86vw)}
#boot .blogo{height:clamp(22px,3vw,30px);opacity:0;animation:bfade 1s ease .2s forwards}
@keyframes bfade{to{opacity:1}}
#boot .btag{margin-top:18px;font-size:12.5px;line-height:2.0;letter-spacing:.04em;color:#7f8895;
  opacity:0;animation:bfade 1s ease .5s forwards}
#boot .bbar{position:relative;height:2px;margin:28px auto 0;width:min(240px,60vw);
  background:rgba(255,255,255,.13);border-radius:2px;overflow:hidden}
#boot .bbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#4d9bff;border-radius:2px;
  transition:width .45s ease;box-shadow:0 0 12px rgba(77,155,255,.7)}
#boot .bpct{margin-top:12px;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.22em;color:#5b6270}
/* ---- buffering（章の読み込み待ち） ---- */
#buf{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .35s}
#buf.on{opacity:1}
#buf .ring{width:38px;height:38px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);border-top-color:#4d9bff;animation:spin .9s linear infinite}
#buf .lbl{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.24em;color:rgba(255,255,255,.72)}
@keyframes spin{to{transform:rotate(360deg)}}
#stage.tone-light ~ #buf .ring{border-color:rgba(29,29,31,.18);border-top-color:#0066cc}
#stage.tone-light ~ #buf .lbl{color:rgba(29,29,31,.6)}
/* ---- 常時表示の「戻る」（クリックで進む操作の対になるもの） ---- */
#back{position:fixed;left:clamp(16px,3vw,32px);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.9);
  background:rgba(10,13,18,.5);border:1px solid rgba(255,255,255,.28);border-radius:980px;
  padding:11px 20px;backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s,background .25s}
#back.on{opacity:1;pointer-events:auto}
#back:hover{background:rgba(10,13,18,.72)}
#stage.tone-light ~ #back{color:#1d1d1f;background:rgba(255,255,255,.72);border-color:rgba(29,29,31,.22)}
#stage.tone-light ~ #back:hover{background:#fff}
@media (max-width:740px){#back{font-size:12px;padding:10px 17px}}
/* ---- next arrow ---- */
#next{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;
  opacity:0;transition:opacity .5s;pointer-events:none;text-align:center}
#next.show{opacity:1}
#next .ar{width:22px;height:22px;margin:0 auto;border-right:2px solid #7fc0ff;border-bottom:2px solid #7fc0ff;
  transform:rotate(45deg);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 7px}}
#stage.tone-light ~ #next .ar{border-color:#0066cc}
#restart{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:6;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#1d1d1f;
  background:rgba(255,255,255,.92);border:1px solid rgba(29,29,31,.16);border-radius:980px;
  padding:12px 22px;box-shadow:0 8px 24px rgba(20,16,10,.14);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .45s,transform .2s,background .2s}
#restart.show{opacity:1;pointer-events:auto}
#restart:hover{background:#fff;transform:translateX(-50%) translateY(-2px)}
#stage.tone-dark ~ #restart{color:#fff;background:rgba(10,13,18,.55);border-color:rgba(255,255,255,.28)}
#stage.tone-dark ~ #restart:hover{background:rgba(10,13,18,.75)}
/* ---- 現在地とメニュー ---- */
#rail{display:none}
#nav .here{margin-left:14px;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11px;
  letter-spacing:.08em;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stage.tone-light ~ #nav .here{color:rgba(29,29,31,.5)}
/* ---- 右上のボタン（開く／閉じるを1つに）---- */
#hub{position:fixed;right:clamp(16px,3.4vw,40px);top:calc(12px + env(safe-area-inset-top,0px));z-index:14;
  display:flex;align-items:center;gap:10px;height:44px;padding:0 20px;cursor:pointer;
  font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11.5px;letter-spacing:.14em;
  border-radius:999px;border:1px solid rgba(255,255,255,.34);color:#fff;
  background:rgba(255,255,255,.14);backdrop-filter:blur(12px);
  box-shadow:0 4px 18px rgba(0,0,0,.28);
  transition:background .22s,color .22s,border-color .22s,box-shadow .22s,transform .18s}
#hub:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
#hub:active{transform:translateY(0)}
#hub i{display:block;width:16px;height:11px;position:relative;font-style:normal;flex:none}
#hub i::before,#hub i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s cubic-bezier(.22,1,.36,1),top .2s,bottom .2s}
#hub i::before{top:0}
#hub i::after{bottom:0}
#hub b{font-weight:600}
/* 何かが開いているとき＝×に変形して、色が立つ */
#hub.x i::before{top:4.5px;transform:rotate(45deg)}
#hub.x i::after{bottom:4.5px;transform:rotate(-45deg)}
#hub.x{background:#7fc0ff;border-color:#7fc0ff;color:#07090d;box-shadow:0 6px 22px rgba(127,192,255,.4)}
#hub.x:hover{background:#a8d4ff;border-color:#a8d4ff}
/* 紙の画面では反転 */
#stage.tone-light ~ #hub,#hub.paper{background:#fff;border-color:rgba(29,29,31,.16);color:#1d1d1f;
  box-shadow:0 4px 18px rgba(29,29,31,.14)}
#stage.tone-light ~ #hub:hover,#hub.paper:hover{background:#f4f6f9}
#hub.paper.x{background:#0066cc;border-color:#0066cc;color:#fff;box-shadow:0 6px 22px rgba(0,102,204,.34)}
#hub.paper.x:hover{background:#1a78d6;border-color:#1a78d6}
@media(max-width:640px){#hub{height:42px;padding:0 16px;gap:8px;font-size:10.5px;
  right:clamp(12px,3vw,20px)}}
/* ---- 詳細ページ上端のつまみ ---- */
.wgrip{position:sticky;top:0;z-index:3;display:flex;justify-content:center;padding:10px 0 4px;cursor:pointer;
  background:linear-gradient(to bottom,var(--cream) 62%,rgba(253,244,224,0))}
.wgrip i{display:block;width:44px;height:4px;border-radius:99px;background:rgba(58,47,40,.24);
  transition:background .2s,width .2s}
.wgrip:hover i{background:rgba(58,47,40,.42);width:56px}
#menu{position:fixed;inset:0;z-index:12;background:rgba(7,9,13,.94);backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;padding:clamp(80px,12vh,120px) clamp(24px,6vw,72px) 48px}
#menu.on{opacity:1;pointer-events:auto}
#menu .mwrap{width:100%;max-width:960px;display:grid;gap:clamp(30px,5vw,64px);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
#menu .mh{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.2em;
  color:rgba(255,255,255,.36);margin-bottom:16px}
#menu a,#menu .mi{display:block;color:rgba(255,255,255,.82);cursor:pointer;text-decoration:none;
  font-size:clamp(15px,1.7vw,18px);line-height:1.55;letter-spacing:.02em;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);transition:color .2s,padding-left .2s}
#menu .mi:hover,#menu a:hover{color:#fff;padding-left:8px}
#menu .mi.on{color:#7fc0ff}
#menu .mi em{font-style:normal;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;
  font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.34);margin-right:12px}
#menu .mi.on em{color:#7fc0ff}
#menu .mi{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;
  column-gap:2px;row-gap:3px;padding:13px 0}
#menu .mi em{margin-right:0;grid-row:1 / span 2}
#menu .mi b{font-weight:700;font-size:clamp(15px,1.7vw,18px);line-height:1.5}
#menu .mi span{grid-column:2;font-size:clamp(12px,1.15vw,13.5px);line-height:1.7;
  color:rgba(255,255,255,.44);letter-spacing:.02em}
#menu .mi.on span{color:rgba(127,192,255,.72)}
@media(max-width:720px){#menu .mi{grid-template-columns:30px minmax(0,1fr);padding:12px 0}
  #menu .mi b{font-size:15px}#menu .mi span{font-size:12px}}
@media(max-width:720px){
  #nav .here{display:none}
  #menu{padding-top:calc(78px + env(safe-area-inset-top,0px));align-items:flex-start}
  #menu .mwrap{grid-template-columns:1fr;gap:26px}
}
/* ---- top progress bar (mobile) ---- */
#bar{position:fixed;left:0;top:0;height:3px;width:0;background:#4d9bff;z-index:9;transition:width .4s;display:none}
/* ---- workflows overlay ---- */
#wf{position:fixed;inset:0;z-index:10;color:#1d1d1f;
  /* 背景の映像を活かす。文字は .wblk が自前の紙カードを持っているので読み負けしない */
  background:linear-gradient(180deg,rgba(250,248,243,.46) 0%,rgba(250,248,243,.62) 14%,rgba(250,248,243,.72) 100%);
  backdrop-filter:blur(16px) saturate(118%);
  opacity:0;pointer-events:none;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  transform:translateY(26vh);
  transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1)}
#wf.on{opacity:1;pointer-events:auto;transform:none}
#wf .wrap{max-width:920px;margin:0 auto;padding:clamp(30px,3.4vh,44px) 20px 90px}
#wf .eyebrow{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:12px;letter-spacing:.2em;color:#0066cc;margin-bottom:14px}
#wf h1{font-size:clamp(24px,3.6vw,36px);font-weight:700;line-height:1.5;margin-bottom:12px}
#wf .sub{font-size:clamp(13.5px,1.6vw,15.5px);line-height:1.95;color:#3f4550;margin-bottom:10px}
#wf .sub{margin-bottom:22px}
/* 一覧（動かないカテゴリー）: カードは“読む”ための入口。映像は動かさない */
/* パネル内の静的な7領域リスト（移動させない・押せない） */
.pwl{counter-reset:none;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 22px}
.pwl li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(29,29,31,.09)}
.pwl .n{flex:none;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:12.5px;font-weight:700;color:#0066cc}
.pwl .t{font-size:14.5px;font-weight:700;color:#1d1d1f}
.pwl .t i{font-style:normal;display:block;font-size:12px;font-weight:400;color:#6b7280;margin-top:3px}
/* 1領域＝1ビュー */
.wview{display:none;animation:prise .6s cubic-bezier(.22,1,.36,1) both}
.wview.on{display:block}
.whero{margin-bottom:26px}
.wnum{display:block;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:clamp(38px,6vw,64px);font-weight:700;
  color:#0066cc;opacity:.3;line-height:1;margin-bottom:6px}
.weyebrow{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:12.5px;letter-spacing:.16em;color:#0066cc;margin-bottom:14px}
.whero h2{font-size:clamp(25px,4vw,42px);font-weight:700;line-height:1.45;letter-spacing:-.01em}
.wexlead{font-size:clamp(13.5px,1.4vw,15.5px);line-height:2.05;color:#3f4550;margin:0 0 20px;
  padding:16px 18px;background:rgba(0,102,204,.045);border-left:3px solid rgba(0,102,204,.35);border-radius:0 12px 12px 0}
.wexlead b{color:#0066cc}
.wcore{margin-top:20px;padding:16px 18px;background:rgba(0,102,204,.06);
  border:1px solid rgba(0,102,204,.18);border-radius:14px}
.wcore .lb{display:inline-block;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.16em;
  color:#0066cc;margin-bottom:8px}
.wcore b{display:block;font-size:clamp(15px,1.7vw,18px);line-height:1.75;color:#1d1d1f}
.wcore i{display:block;font-style:normal;font-size:12.5px;line-height:1.9;color:#4b5563;margin-top:9px}
.wcore u{text-decoration:none;color:#0066cc;font-weight:600}
.wcase{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:11.5px;letter-spacing:.06em;color:#0066cc;margin:0 0 12px}
.wlead{font-size:clamp(14px,1.4vw,16px);line-height:2.1;color:#3f4550;margin-bottom:24px;max-width:66ch}
.wnav{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;
  margin-top:40px;padding-top:26px;border-top:1px solid rgba(29,29,31,.12)}
.wsteps{margin:0 0 6px;padding:0;list-style:none;counter-reset:ws}
.wsteps li{counter-increment:ws;position:relative;padding:10px 0 10px 44px;border-top:1px dashed rgba(29,29,31,.1)}
.wsteps li::before{content:counter(ws,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:13px;font-weight:700;color:#0066cc}
.wsteps>li>b{display:block;font-size:14px;margin-bottom:3px}
.wsteps span{font-size:13px;line-height:1.85;color:#4b5563}
.wsteps span b,.wflow span b,.pexamples span b,.pprin span b{display:inline}
.wprompt{display:block;margin:10px 0 9px;padding:12px 14px;background:#fff;border:1px solid rgba(29,29,31,.15);border-left:3px solid #0066cc;border-radius:8px;font-size:12.5px;line-height:1.95;color:#1d1d1f;white-space:pre-wrap}
.wcaveat{margin:0 0 22px;padding:12px 15px;border:1px dashed rgba(29,29,31,.22);border-radius:10px;font-size:12.5px;line-height:1.95;color:#4b5563;background:rgba(255,255,255,.45)}
.wcaveat b{color:#1d1d1f}
.wprompt i{display:block;font-style:normal;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.12em;color:#0066cc;margin-bottom:7px}
.wblk{margin-top:20px}
.wlabel{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#1d1d1f;margin-bottom:8px;
  padding-left:10px;border-left:3px solid #0066cc}
.wmemo{font-size:13.5px;line-height:2.0;color:#4b5563;background:#f4eede;border-radius:12px;padding:14px 16px}
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(29,29,31,.1);border-radius:12px}
.twrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px;line-height:1.8}
.twrap th{background:rgba(0,102,204,.07);color:#1d1d1f;text-align:left;font-size:12px;letter-spacing:.03em;
  padding:9px 12px;border-bottom:1px solid rgba(29,29,31,.1)}
.twrap td{padding:9px 12px;border-bottom:1px solid rgba(29,29,31,.06);color:#3f4550;vertical-align:top}
.twrap tr:last-child td{border-bottom:none}
.wcheck{margin:0;padding:0;list-style:none;border:1px solid rgba(29,29,31,.1);border-radius:12px;overflow:hidden}
.wcheck li{position:relative;padding:10px 14px 10px 38px;font-size:13px;line-height:1.85;color:#3f4550;
  border-bottom:1px solid rgba(29,29,31,.06);background:#fff}
.wcheck li:last-child{border-bottom:none}
.wcheck li::before{content:"✓";position:absolute;left:14px;top:10px;color:#0066cc;font-weight:700}
.wcheck.wwarn li::before{content:"×";color:#b4552a}
.wkey{background:rgba(0,102,204,.06);border:1px solid rgba(0,102,204,.2);border-radius:12px;padding:14px 16px}
.wkey .wlabel{border-left-color:#0066cc}
.wkey p{font-size:13.5px;line-height:2.0;color:#1d1d1f}
.wdeliv{display:flex;flex-wrap:wrap;gap:10px}
.wnote{margin-top:12px;font-size:12.5px;line-height:1.9;color:#6b7280}
/* コピー内「実例を詳しく見る」＝本物のボタン */
#copy .more{display:none;margin-top:26px;clear:both;pointer-events:auto;cursor:pointer;font-family:inherit;
  font-size:16px;font-weight:700;letter-spacing:.03em;color:#fff;background:#0066cc;
  border:none;border-radius:980px;padding:18px 36px;box-shadow:0 12px 34px rgba(0,102,204,.42);
  transition:transform .2s,box-shadow .2s,background .2s}
#copy .more.on{display:inline-flex;animation:ctapop .7s cubic-bezier(.34,1.56,.64,1) .15s both}
@keyframes ctapop{0%{transform:translateY(10px) scale(.96);opacity:0}60%{transform:translateY(-3px) scale(1.02)}100%{transform:none;opacity:1}}
#copy .more:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,102,204,.4);background:#0a5cb8}
/* 矢印はラベルの隣に固定する。文字だけ折り返し、矢印が次の行に落ちないようにする */
#copy .more.on{align-items:center;gap:10px;text-align:left}
#copy .more>i{font-style:normal;flex:none;line-height:1}
@media(max-width:520px){
  /* 長いラベルは、狭い画面ではどうしても折り返す。flex のままだと矢印だけが
     2行の横で宙に浮くので、インラインに戻して文末に付いていくようにする */
  #copy .more{font-size:15px;padding:15px 22px}
  #copy .more.on{display:inline-block;text-align:center;line-height:1.55}
  #copy .more>i{display:inline;margin-left:10px}
}
/* about 内チップをクリック可能に */
/* 共通クローズ（実体のあるボタン。見つけやすさ優先） */
.ovclose{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:clamp(14px,3vw,28px);z-index:20;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;letter-spacing:.04em;color:#fff;background:#1d1d1f;
  border:none;border-radius:980px;padding:13px 24px;box-shadow:0 10px 30px rgba(20,16,10,.32);
  transition:transform .2s,background .2s}
.ovclose:hover{transform:translateY(-2px);background:#0066cc}
.ovclose span{font-size:16px;line-height:1}
#cases .cend{margin-top:clamp(38px,6vh,64px);padding:clamp(28px,4vw,40px);text-align:center;
  background:#fff;border:1px solid rgba(29,29,31,.12);border-radius:14px;
  box-shadow:0 10px 30px rgba(20,16,10,.07)}
#cases .cend p{font-size:clamp(14px,1.3vw,16px);line-height:2;color:#4b5563;margin:0 0 20px}
#cases .cend b{color:#1d1d1f}
@media (max-width:740px){.ovclose{font-size:13px;padding:12px 20px}}
/* ---- cases overlay ---- */
#cases{position:fixed;inset:0;z-index:10;color:#1d1d1f;
  background:linear-gradient(180deg,rgba(250,248,243,.80) 0%,rgba(250,248,243,.94) 16%,rgba(250,248,243,.965) 100%);
  backdrop-filter:blur(18px) saturate(115%);
  opacity:0;pointer-events:none;transition:opacity .5s;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#cases.on{opacity:1;pointer-events:auto}
#cases .wrap{max-width:900px;margin:0 auto;padding:clamp(76px,12vh,120px) 20px 90px}
#cases .eyebrow{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:12px;letter-spacing:.2em;color:#0066cc;margin-bottom:14px}
#cases h1{font-size:clamp(24px,3.6vw,36px);font-weight:700;line-height:1.5;margin-bottom:12px}
#cases .sub{font-size:clamp(13.5px,1.6vw,15.5px);line-height:1.95;color:#3f4550;margin-bottom:30px}
.ccard{background:#fff;border:1px solid rgba(29,29,31,.1);border-radius:18px;padding:24px;margin-bottom:16px}
.ccard .tag{display:inline-block;font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.14em;
  color:#0066cc;background:rgba(0,102,204,.08);border-radius:980px;padding:5px 12px;margin-bottom:12px}
.ccard h3{font-size:clamp(17px,2.2vw,21px);font-weight:700;line-height:1.6;margin-bottom:10px}
.ccard p{font-size:13.5px;line-height:2.0;color:#3f4550;margin-bottom:14px}
.cstats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cstats span{font-size:12px;color:#1d1d1f;background:#f4eede;border-radius:8px;padding:7px 12px;line-height:1.5}
.cstats span b{color:#0066cc}
.chl{margin:0 0 16px;padding:0;list-style:none}
.chl li{position:relative;padding:7px 0 7px 20px;font-size:12.5px;line-height:1.85;color:#4b5563}
.chl li::before{content:"—";position:absolute;left:0;color:#0066cc}
.clinks{display:flex;flex-wrap:wrap;gap:9px}
.clinks a{font-size:12.5px;font-weight:600;text-decoration:none;border-radius:980px;padding:10px 20px;
  background:#0066cc;color:#fff;transition:opacity .2s}
.clinks a.ghost{background:#fff;color:#0066cc;border:1px solid rgba(0,102,204,.35)}
.clinks a:hover{opacity:.85}
/* ---- end overlay ---- */
#end{position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  background:rgba(250,248,243,.96);opacity:0;pointer-events:none;transition:opacity .7s;color:#1d1d1f}
#end.on{opacity:1;pointer-events:auto}
#end .logo{font-family:"IBM Plex Mono","SF Mono",Consolas,monospace;font-size:13px;letter-spacing:.3em;color:#0066cc;font-weight:700}
#end .big{font-size:clamp(24px,3.6vw,42px);font-weight:700;text-align:center;line-height:1.6}
#end .tag{font-size:clamp(14px,1.6vw,17px);color:#4b5563;line-height:1.9;text-align:center}
#end .cta{margin-top:10px;display:inline-block;background:#0066cc;color:#fff;border-radius:980px;
  padding:15px 38px;font-size:15px;font-weight:600;letter-spacing:.04em}
#end .memo{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:11.5px;color:#9aa3b2}
/* ================= mobile ================= */
@media (max-width:740px){
  :root{--pad-x:20px;--pad-b:calc(72px + env(safe-area-inset-bottom,0px))}
  #copy{max-width:none;left:var(--pad-x);right:var(--pad-x)}
  #copy.pos-bc{left:var(--pad-x);right:var(--pad-x);transform:translateY(14px);text-align:left}
  #copy.pos-bc.show{transform:none}
  #copy.pos-cl{top:auto;bottom:var(--pad-b);transform:translateY(14px)}
  #copy.pos-cl.show{transform:none}
  #copy .eyebrow{font-size:11px;margin-bottom:10px}
  #copy .nar{font-size:clamp(19px,5.8vw,24px);line-height:1.75}
  #copy.small .nar{font-size:clamp(14px,4.2vw,17px);line-height:1.95}
  #copy.small.tone-light .inner{padding:16px 18px}
  #copy .telop{font-size:12px;margin-top:14px;padding:6px 13px}
  #vignette{background:linear-gradient(to top,rgba(5,7,10,.78) 0%,rgba(5,7,10,.25) 38%,rgba(5,7,10,0) 55%)}
  #stage.tone-light #vignette{background:linear-gradient(to top,rgba(250,248,243,.92) 0%,rgba(250,248,243,.4) 34%,rgba(250,248,243,0) 55%)}
  #rail{display:none}
  #bar{display:block}
  #nav .links a{font-size:10.5px;letter-spacing:.08em}
  /* workflows library: モバイル密度調整 */
  .witem summary{padding:14px 14px;gap:2px 12px}
  .wnum{font-size:17px}
  .wname b{font-size:13.5px}
  .wname i{font-size:11px;padding:2px 9px}
  .whead{font-size:12px}
  .wbody{padding:2px 14px 18px}
  .wlead{font-size:13px}
  .twrap table{min-width:460px;font-size:12px}
  #wf .wrap{padding:calc(26px + env(safe-area-inset-top,0px)) 20px 70px}
  .whero{margin-bottom:18px}
  /* reading panel: モバイルも全画面。上端に映像を少し残して「続きがある」と分かる作り */
  #panel::before{background:linear-gradient(to bottom,rgba(250,248,243,.30) 0%,rgba(250,248,243,.93) 13%,rgba(250,248,243,.99) 24%)}
  #panel .pin{padding:calc(74px + env(safe-area-inset-top,0px)) 20px calc(56px + env(safe-area-inset-bottom,0px))}
  #panel h2{font-size:clamp(23px,6.6vw,30px);line-height:1.5;margin-bottom:20px}
  #panel p{font-size:14.5px;line-height:2.05}
  #panel .peyebrow{font-size:11px;margin-bottom:14px}
  /* 狭い画面では表を横スクロールさせず、「いま → AIに任せると」の縦積みにする */
  #panel .twrap{overflow-x:visible;border:none;background:none;border-radius:0}
  #panel .twrap table,#panel .twrap tbody,#panel .twrap tr,#panel .twrap td{display:block;min-width:0;width:auto}
  #panel .twrap thead{display:none}
  #panel .twrap tr{border:1px solid rgba(29,29,31,.12);border-radius:12px;background:rgba(255,255,255,.75);
    padding:13px 15px;margin-bottom:10px}
  #panel .twrap tr:last-child{margin-bottom:0}
  #panel .twrap td{border:none;padding:0;font-size:13.5px;line-height:1.95}
  #panel .twrap td:first-child{color:#6b7280}
  #panel .twrap td:last-child{color:#1d1d1f;margin-top:8px;padding-top:8px;
    border-top:1px dashed rgba(29,29,31,.16);position:relative;padding-left:20px}
  #panel .twrap td:last-child::before{content:"→";position:absolute;left:0;top:8px;color:#0066cc;font-weight:700}
  .pteam,.pprin,.pext,.pwf,.pwl{grid-template-columns:1fr}
  .pprin li{padding-top:38px}
  .pacts{flex-direction:column;align-items:stretch}
  .pacts .btn{justify-content:center;width:100%}
  /* workflows: モバイル密度 */
  .wnum{font-size:34px}
  .whero h2{font-size:clamp(19px,5.6vw,24px)}
  .wnav{flex-direction:column}
  .wnav .btn{justify-content:center}
  .wdeliv .btn{justify-content:center;width:100%}
}