/* ============================================================
   Wonder Studio — 共通シェル v1 (PLAN-20260611-ws-hp-rebranding)
   文法は一つ: トークン / タイポ / ヘッダー / フッター / ボタン /
   昼夜 / 停止ボタン / リビール / マーカー
   世界レイヤー(星空canvas等)は各ページ側で実装する
   ============================================================ */

:root{
  /* 紙とインク(昼) / 夜は body.night で上書き */
  --bg:#ece7da; --bg2:#f2eee2; --tx:#1a1f24; --tx2:#3b434a; --tx3:#555d54;
  --mut:#73796f; --line:#c9c3b4; --acc:#ac2b72;
  /* ロゴ4色(正式) */
  --teal:#69adbc; --blue:#3556a1; --yel:#ebcf00; --mag:#ac2b72;
  /* ダークバンド(画素・しごと帯) — 昼夜共通 */
  --band:#11161c; --band-tx:#e9e4d6; --band-mut:#8d96a0; --band-line:#2a333c;
  --serif:'Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif;
  --mono:'JetBrains Mono','Noto Sans JP',monospace;
  --ease:cubic-bezier(.2,.75,.25,1);
}
body.night{
  --bg:#0e1419; --bg2:#131a21; --tx:#e9e4d6; --tx2:#b9c0c8; --tx3:#aab2bb;
  --mut:#8d96a0; --line:#2a333c; --acc:#ebcf00;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);font-family:var(--sans);color:var(--tx);overflow-x:hidden;transition:background .5s,color .5s}
::selection{background:rgba(235,207,0,.35)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.kn{font-size:.78em}

/* ---- 紙の粒子(常時・最弱) ---- */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:multiply}
body.night .grain{mix-blend-mode:screen;opacity:.06}
body.night .grain .gd{display:none}
body:not(.night) .grain .gn{display:none}

/* ---- ヘッダー ---- */
header{position:fixed;left:0;right:0;top:0;z-index:40;transition:background .4s,box-shadow .4s}
header.sc{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 color-mix(in srgb,var(--tx) 12%,transparent)}
.hd{display:flex;align-items:center;gap:13px;height:78px}
.hd .lmark{width:36px;height:auto;flex:none}
.hd .lt .t{font:700 16.5px/1 var(--serif);letter-spacing:.13em;white-space:nowrap}
.hd .lt .s{margin-top:4px;font:500 8px/1 var(--sans);letter-spacing:.18em;color:var(--mut);white-space:nowrap}
nav.gnav{margin-left:auto;display:flex;gap:24px;align-items:center}
nav.gnav a.nv{font:700 12px/1 var(--sans);letter-spacing:.1em;padding:4px 0;position:relative}
nav.gnav a.nv::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav.gnav a.nv:hover::after{transform:scaleX(1)}
/* 世界グループ: A=テキスト / B=画面のなかチップ(mono+ダーク) */
nav.gnav .nvdiv{width:1px;height:16px;background:var(--line);flex:none}
nav.gnav a.nv.bw{font:500 10.5px/1 var(--mono);letter-spacing:.1em;background:#11161c;color:#e9e4d6;padding:9px 12px;border-radius:7px;border:1px solid #232c36}
nav.gnav a.nv.bw::after{display:none}
nav.gnav a.nv.bw:hover{border-color:#ffe21f;color:#ffe21f}
@media(max-width:1080px){nav.gnav a.nv,nav.gnav .nvdiv{display:none}}

/* ---- ボタン言語 ---- */
.btn{display:inline-flex;align-items:center;gap:12px;font:700 13px/1 var(--sans);letter-spacing:.1em;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s,background .3s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--mag);color:#fff}
.btn.primary:hover{box-shadow:0 12px 26px -12px var(--mag)}
.btn.ghost{border-color:var(--line);color:var(--tx)}
.btn.ghost:hover{border-color:var(--mut)}
.btn.small{padding:11px 18px;font-size:11.5px}
.btn .ar{width:14px;height:12px;flex:none}

/* ---- セクション見出し (メリハリ: eyebrow 小 × タイトル大) ---- */
.sec{padding:clamp(64px,8vw,108px) 0;position:relative}
.eyebrow{font:500 9.5px/1 var(--mono);letter-spacing:.36em;color:var(--mut)}
.sec-title{margin-top:16px;font:600 clamp(24px,3.2vw,38px)/1.6 var(--serif);letter-spacing:.06em}
.lead{margin-top:22px;font:500 13.5px/2.4 var(--sans);letter-spacing:.05em;color:var(--tx2);max-width:36em}
/* 縦書きアクセント (awahi 参照) */
.vlabel{position:absolute;right:clamp(14px,3vw,40px);top:clamp(70px,8vw,110px);writing-mode:vertical-rl;font:500 9px/1 var(--mono);letter-spacing:.42em;color:var(--mut);opacity:.75;pointer-events:none}
@media(max-width:860px){.vlabel{display:none}}
em.mk{font-style:normal;background:linear-gradient(transparent 60%,rgba(235,207,0,.38) 60% 94%,transparent 94%) no-repeat 0 0/0% 100%;transition:background-size .6s var(--ease)}
em.mk.in{background-size:100% 100%}

/* ---- リビール ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---- 現場の声トーン(カジュアル枠) ---- */
.voice-tone{font:500 13px/2.1 var(--sans);letter-spacing:.04em}

/* ---- 固定操作ボタン(左下) ---- */
.fixbtn{position:fixed;left:18px;z-index:60;font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--tx);background:color-mix(in srgb,var(--bg2) 90%,transparent);border:1px solid var(--line);border-radius:999px;padding:11px 17px;cursor:pointer;backdrop-filter:blur(6px)}
.fixbtn:hover{border-color:var(--mut)}
#motion-btn{bottom:18px}
#theme-btn{bottom:62px}

/* ---- 固定CTA(右下) ---- */
#cta-fab{position:fixed;right:18px;bottom:18px;z-index:60;box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}

/* ---- フッター ---- */
footer{background:var(--band);color:#cfcabd;padding:56px 0 40px;margin-top:0}
footer .fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
@media(max-width:860px){footer .fgrid{grid-template-columns:1fr}}
footer .flogo{display:flex;align-items:center;gap:12px}
footer .flogo .t{font:700 17px/1 var(--serif);letter-spacing:.12em;color:#ece8db}
footer .flogo .s{margin-top:4px;font:500 7.5px/1 var(--sans);letter-spacing:.18em;color:#8d96a0}
footer h4{font:500 10px/1 var(--mono);letter-spacing:.28em;color:#8d96a0;margin-bottom:16px}
footer p,footer a.fl{font:500 12px/2.1 var(--sans);letter-spacing:.04em;color:#cfcabd;display:block}
footer a.fl:hover{color:#ebcf00}
footer .cp{margin-top:44px;padding-top:20px;border-top:1px solid #2a333c;font:500 9px/1.8 var(--mono);letter-spacing:.18em;color:#6e7780;display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---- アクセシビリティ ---- */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}
body.still .rv{transition:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}