/*
Theme Name: 北村電気管理事務所 青焼き
Version: 1.0.0
Text Domain: kitamura-blueprint
*/

/* ============================================================
   北村電気管理事務所 — デザイン案 v0.3「青焼き一葉」
   サイト全体を、電気管理技術者が引いた一枚の竣工図面として設計する。

   ― 禁則（このデザインの背骨。破ると全体が崩れる）―
   1. JIS安全色は情報分類にのみ使う。装飾で赤を出さない。
      紙上: --red/--amber/--blue/--green ／ 青地上: --red-bp/--amber-bp/--blue-bp
   2. 動きは「線が引かれる」「電気が流れる」「印を押す」の3種のみ。
      パララックス・自動カルーセル・feGaussianBlur・大面積の影アニメは禁止。
   3. 図面語彙（DWG NO./SCALE/REV）は装飾に留める。導線・CTA・本文は
      必ず平易な日本語 + BIZ UDPGothic。
   4. 儀式的演出（検印・コーナーめくれ）は 1画面 1個まで。
   ============================================================ */
:root{
  /* JIS安全色 — 紙上（製図紙 #F7F6F1 でコントラスト4.5:1以上を実測済み） */
  --red:    #C4361B;   /* 危険 → 事故・トラブル (incident) */
  --amber:  #8A5C00;   /* 注意 → 法改正 (law) ※JIS黄の暗色。紙上5.4:1 */
  --blue:   #1B4F8A;   /* 指示 → 技術情報 (tech) */
  --green:  #12503C;   /* 安全 → ブランド・保安管理・CTA */
  --lamp:   #00A06B;   /* 運転表示灯。紙上では線・点にのみ使い文字に使わない */

  /* JIS安全色 — 青焼き地上バリアント（slug対応は同一系統） */
  --red-bp:   #FF7A5C;
  --amber-bp: #FFC24D;
  --blue-bp:  #6FB1E8;
  --lamp-bp:  #2BD99F;  /* 通電フロー・青地上のCTA */

  /* 青焼き */
  --bp:       #0F2B46;  /* プルシアンブルーの図面シート */
  --bp-night: #0A1E33;  /* 夜モード */
  --bp-panel: #14324F;  /* 青地上のパネル */
  --bp-line:  #EAF3FA;  /* 図面の白線・反転文字 */
  --bp-dim:   #7FA6C4;  /* 寸法線・補助線・青地上の補助文字 */
  --bp-grid:  rgba(234,243,250,.055);

  /* 製図紙 */
  --paper:  #F7F6F1;
  --card:   #FFFFFF;
  --grid:   #DCE4EA;
  --ink:    #16212B;
  --ink-2:  #4A5866;
  --line:   #C9D2D8;

  --disp: "Zen Kaku Gothic New", sans-serif;
  --body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono: "B612 Mono", "JetBrains Mono", monospace;

  --maxw: 1140px;
  --ease: cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); line-height:1.9; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono); letter-spacing:.05em; font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ---------- 図枠（デスクトップのみ・装飾） ---------- */
.sheet-frame{position:fixed; inset:10px; border:1.5px solid rgba(74,88,102,.5); pointer-events:none; z-index:90}
.sheet-frame i{position:absolute; font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.18em; color:rgba(74,88,102,.75)}
.sheet-frame .zt{top:-1px; left:50%; transform:translate(-50%,-50%); background:var(--paper); padding:0 8px}
.sheet-frame .zb{bottom:-1px; left:50%; transform:translate(-50%,50%); background:var(--paper); padding:0 8px}
.sheet-frame .zl{left:3px; top:50%; writing-mode:vertical-rl; transform:translateY(-50%)}
.sheet-frame .zr{right:3px; top:50%; writing-mode:vertical-rl; transform:translateY(-50%)}
@media (max-width:1023px){ .sheet-frame{display:none} }

/* ---------- 注記バナー ---------- */
.proto{background:#FFF3D6; border-bottom:1px solid #E4C97A; font-size:12.5px; padding:9px 0; color:#6a5200; position:relative; z-index:60}
.proto .wrap{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.proto b{font-family:var(--mono); letter-spacing:.08em}

/* ---------- ヘッダー（図面ヘッダー帯） ---------- */
header.site{
  position:sticky; top:0; z-index:70; background:rgba(247,246,241,.94);
  backdrop-filter:blur(8px); border-bottom:1.5px solid var(--ink);
}
.hdr{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand .lampdot{
  width:10px; height:10px; border-radius:50%; background:var(--lamp);
  box-shadow:0 0 0 3px rgba(0,160,107,.15); animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.brand b{font-family:var(--disp); font-weight:900; font-size:16.5px; letter-spacing:.02em; line-height:1.2; display:block}
.brand span.sub{display:block; font-size:9px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.16em}
nav.main{display:flex; gap:20px; align-items:center}
.hdr .menu-btn{white-space:nowrap}
nav.main a{
  text-decoration:none; font-size:13.5px; font-weight:700; color:var(--ink-2);
  padding:6px 0; border-bottom:2px solid transparent;
}
nav.main a:hover,nav.main a:focus-visible{color:var(--ink); border-bottom-color:var(--green)}
.btn-ask{
  background:var(--green); color:#fff; text-decoration:none; font-weight:700;
  font-size:13.5px; padding:10px 18px; border-radius:2px; white-space:nowrap;
}
.btn-ask:hover{background:#0d3f2e}
.menu-btn{display:none; background:none; border:1px solid var(--line); padding:8px 12px; font-family:var(--body); font-weight:700; cursor:pointer; font-size:13px}

/* ---------- 汎用：図名見出し ---------- */
.fig-head{display:flex; align-items:center; gap:12px; margin:0 0 14px}
.fig-no{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; border:1.5px solid currentColor; border-radius:50%;
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink-2); padding:0 4px;
}
.fig-label{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--ink-2); text-transform:uppercase}
h2.sec{font-family:var(--disp); font-weight:900; font-size:clamp(24px,3.2vw,34px); line-height:1.4; margin:0 0 10px; letter-spacing:.01em}
.sec-lead{color:var(--ink-2); margin:0 0 36px; max-width:44em}
section.block{padding:96px 0; position:relative}

/* 紙の方眼（見せる下地） */
.gridded{
  background-image:
    linear-gradient(rgba(220,228,234,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,228,234,.5) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:center top;
}

/* ---------- 寸法線セクション区切り ---------- */
.dim{position:relative; height:0; border-top:1px solid var(--ink-2); margin:0 24px}
@media (min-width:1188px){ .dim{margin:0 auto; max-width:var(--maxw)} }
.dim::before,.dim::after{
  content:""; position:absolute; top:-4px; width:7px; height:7px;
  background:var(--ink-2); transform:rotate(45deg);
}
.dim::before{left:0} .dim::after{right:0}
.dim b{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--paper); padding:0 14px; font-family:var(--mono); font-weight:400;
  font-size:10.5px; letter-spacing:.22em; color:var(--ink-2); white-space:nowrap;
}
/* 電流パルス：in-view時に一度だけ走る */
.dim i{position:absolute; top:-1.5px; left:0; width:44px; height:2.5px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--lamp), transparent); pointer-events:none}
.dim.in-view i{animation:pulse-run 1.2s var(--ease) .15s 1}
@keyframes pulse-run{0%{opacity:0; left:0} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0; left:calc(100% - 44px)}}

/* ---------- 分類スタンプ・タグ（slug機械対応） ---------- */
.stamp{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border:1.5px solid currentColor; border-radius:2px;
  font-family:var(--disp); font-weight:900; font-size:13px; flex:none;
}
.tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:11px; font-weight:700; letter-spacing:.08em; padding:4px 9px; border-radius:2px;
}
.tag::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.t-law     {color:var(--amber); background:rgba(184,122,0,.10)}
.t-incident{color:var(--red);   background:rgba(196,54,27,.06)}
.t-tech    {color:var(--blue);  background:rgba(27,79,138,.08)}
.c-law{color:var(--amber)} .c-incident{color:var(--red)} .c-tech{color:var(--blue)}

/* ============================================================
   ヒーロー：青焼き主投影図
   ============================================================ */
.hero{
  background:var(--bp); color:var(--bp-line); position:relative;
  padding:56px 0 64px; overflow:hidden;
  transition:background .8s var(--ease);
}
.hero.night{background:var(--bp-night)}
.hero::before{ /* 方眼 8px minor / 40px major */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
    linear-gradient(rgba(234,243,250,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,243,250,.09) 1px, transparent 1px);
  background-size:8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
.hero-grid{display:grid; grid-template-columns:1.02fr 1.28fr; gap:48px; align-items:start; position:relative}
.hero-grid > *, .bess-grid > *, .contact-grid > *, .details-grid > *{min-width:0}
.hero .eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--bp-dim);
  text-transform:uppercase; margin:6px 0 18px;
}
h1{
  font-family:var(--disp); font-weight:900; font-size:clamp(25px,3.1vw,42px);
  line-height:1.42; letter-spacing:-.01em; margin:0 0 20px; color:var(--bp-line);
}
h1 em{font-style:normal; color:var(--lamp-bp); position:relative; white-space:nowrap}
h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.05em; height:.12em; background:rgba(43,217,159,.28)}
.hero p.lead{font-size:16.5px; color:#C4D6E4; margin:0 0 22px; max-width:30em; line-height:2}
.scope-note{
  border-left:2px solid var(--lamp-bp); padding:10px 16px; margin:0 0 26px;
  background:rgba(43,217,159,.06); max-width:34em;
}
.scope-note b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--lamp-bp); margin-bottom:4px}
.scope-note p{margin:0; font-size:13.5px; color:#C4D6E4; line-height:1.85}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.cta-1{background:var(--lamp-bp); color:#062018; padding:14px 26px; text-decoration:none; font-weight:700; border-radius:2px; display:inline-block}
.cta-1:hover{background:#4AE6B0}
.cta-2{border:1.5px solid var(--bp-line); color:var(--bp-line); padding:12.5px 24px; text-decoration:none; font-weight:700; border-radius:2px; display:inline-block}
.cta-2:hover{background:var(--bp-line); color:var(--bp)}
.hero-meta{display:flex; gap:8px 24px; flex-wrap:wrap; font-size:11.5px; color:var(--bp-dim); font-family:var(--mono); letter-spacing:.06em}

/* ---------- 単線結線図パネル ---------- */
.sld{border:1.5px solid rgba(234,243,250,.4); background:rgba(10,26,42,.35); position:relative}
.sld-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 14px; border-bottom:1px solid rgba(234,243,250,.25);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--bp-dim);
}
/* 昼/夜トグル（Braun風の物理スイッチ） */
.dn-toggle{
  display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid rgba(234,243,250,.35);
  padding:5px 10px; cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--bp-dim); border-radius:2px;
}
.dn-toggle .knob{
  width:26px; height:14px; border:1px solid var(--bp-dim); border-radius:8px; position:relative; flex:none;
}
.dn-toggle .knob::after{
  content:""; position:absolute; top:1.5px; left:2px; width:9px; height:9px; border-radius:50%;
  background:var(--amber-bp); transition:transform .25s var(--ease), background .25s;
}
.night .dn-toggle .knob::after{transform:translateX(12px); background:var(--lamp-bp)}
.dn-toggle:hover, .dn-toggle:focus-visible{color:var(--bp-line); border-color:var(--bp-line)}
.dn-state{color:var(--bp-line); font-weight:700; min-width:6.5em; text-align:left}

.sld-stage{position:relative; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
.sld-stage svg{display:block; min-width:660px}

/* 図面の白線：描かれていくアニメーション */
.draw path, .draw line, .draw rect, .draw circle, .draw polyline{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:drawline 1.1s var(--ease) forwards;
}
@keyframes drawline{to{stroke-dashoffset:0}}
.d1{animation-delay:.15s} .d2{animation-delay:.45s} .d3{animation-delay:.75s}
.d4{animation-delay:1.05s} .d5{animation-delay:1.35s} .d6{animation-delay:1.65s}
.draw text{opacity:0; animation:steplbl .01s steps(1) forwards}
.lb1{animation-delay:.6s} .lb2{animation-delay:.95s} .lb3{animation-delay:1.3s}
.lb4{animation-delay:1.6s} .lb5{animation-delay:1.9s} .lb6{animation-delay:2.1s}
@keyframes steplbl{to{opacity:1}}

/* 通電フロー（描画完了後に流れ出す） */
.draw path.flow{ /* 描画アニメより優先させる（詳細度を上げる） */
  stroke-dasharray:5 11; stroke-dashoffset:0; animation:flowin .4s var(--ease) 2.3s forwards, flowmove 1.6s linear 2.3s infinite;
}
.flow{
  fill:none; stroke:var(--lamp-bp); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:5 11; opacity:0;
  animation:flowin .4s var(--ease) 2.3s forwards, flowmove 1.6s linear 2.3s infinite;
}
@keyframes flowin{to{opacity:1}}
@keyframes flowmove{to{stroke-dashoffset:-32}}
/* 昼＝太陽光が主役、夜＝蓄電所が主役 */
.flow-day{display:inline}   .flow-night{display:none}
.night .flow-day{display:none} .night .flow-night{display:inline}
.night .g-pv{opacity:.3; transition:opacity .8s}
.g-pv{transition:opacity .8s}
.sun-moon{transition:opacity .8s}
.night .icon-sun{opacity:0} .icon-moon{opacity:0} .night .icon-moon{opacity:1}

/* 稼働ランプ */
.oplamp{fill:var(--lamp-bp); opacity:0; animation:flowin .4s var(--ease) 2.5s forwards}
.blink{animation:flowin .4s var(--ease) 2.5s forwards, lampblink 3.2s ease-in-out 2.5s infinite}
@keyframes lampblink{0%,100%{fill-opacity:1}50%{fill-opacity:.35}}

/* ノード（機器）とフォーカス */
.node{cursor:pointer}
.node .hit{fill:transparent; transition:fill .2s}
.node:hover .hit{fill:rgba(43,217,159,.08)}
.node.on .hit{fill:rgba(43,217,159,.12)}
.node.on .box{stroke:var(--lamp-bp); stroke-width:2}
.node:focus{outline:none}
.node:focus-visible .hit{stroke:var(--lamp-bp); stroke-width:1.5; stroke-dasharray:4 3}
.inspecting .node:not(.on){opacity:.35; transition:opacity .35s}
.node{transition:opacity .35s}

/* 引出線（注記への線） */
.leader{
  fill:none; stroke:var(--lamp-bp); stroke-width:1.3; opacity:0;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.leader.show{opacity:1; animation:drawline .45s var(--ease) forwards}

/* CADクロスヘア */
.xh{position:absolute; background:rgba(127,166,196,.5); pointer-events:none; display:none; z-index:5}
.xh-v{top:0; bottom:0; width:1px} .xh-h{left:0; right:0; height:1px}
.coord{
  position:absolute; right:10px; bottom:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--bp-dim); pointer-events:none; display:none; z-index:6;
}
@media (hover:hover) and (pointer:fine){
  .sld-stage:hover .xh, .sld-stage:hover .coord{display:block}
}

/* 注記パネル */
.sld-note{padding:16px 18px 14px; border-top:1px solid rgba(234,243,250,.25); min-height:118px; position:relative}
.sld-note .code{font-family:var(--mono); font-size:10.5px; color:var(--lamp-bp); letter-spacing:.14em}
.sld-note h4, .sld-note .sld-h{margin:4px 0 0; font-family:var(--disp); font-size:15px; font-weight:900; color:var(--bp-line)}
.sld-note p{margin:8px 0 0; font-size:13px; color:#C4D6E4; line-height:1.85}
.sld-note .chk{margin:8px 0 0; font-size:12.5px; color:var(--lamp-bp); font-weight:700}
.draft-chip{
  position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  color:var(--amber-bp); border:1px solid var(--amber-bp); padding:2px 7px; border-radius:2px; opacity:.85;
}
.model-note{
  padding:7px 14px; border-top:1px solid rgba(234,243,250,.18);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--bp-dim);
}

/* ============================================================
   改訂欄（更新情報）
   ============================================================ */
.rev-table{border-top:1.5px solid var(--ink)}
.rev-row{
  display:grid; grid-template-columns:64px 110px 44px 1fr auto; gap:16px; align-items:center;
  padding:17px 8px; border-bottom:1px solid var(--line); text-decoration:none; position:relative;
  background:transparent; transition:background .2s;
}
.rev-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.rev-row:hover{background:var(--card)}
.rev-row:hover::before{transform:scaleX(1)}
.rev-row .rno{font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.1em}
.rev-row time{font-family:var(--mono); font-size:12.5px; color:var(--ink-2)}
.rev-row .ttl{font-weight:700; line-height:1.65; color:var(--ink); font-size:15px}
.rev-row .arw{color:var(--ink-2); font-family:var(--mono)}
/* 未実装の記事行：押しても遷移しない（本番では実URLの <a> に戻す） */
.rev-row.is-soon{cursor:default}
.rev-row.is-soon:hover{background:transparent}
.rev-row.is-soon:hover::before{transform:scaleX(0)}
.rev-row.is-soon .arw::after{content:"　準備中"; font-size:10px; letter-spacing:.1em}
.is-soon{color:var(--ink-2)}
.rev-row:hover .arw{color:inherit}
.legend{display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; margin:0 0 26px; font-size:13.5px; color:var(--ink-2)}
.legend span{display:inline-flex; gap:8px; align-items:center; font-weight:700}

/* ============================================================
   詳細図呼び出し（専門分野）
   ============================================================ */
.details-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:22px}
.d-note{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--green); border:1px solid var(--green); padding:2.5px 9px; border-radius:2px; margin:0 0 12px}
.detail{
  background:var(--card); border:1px solid var(--line); padding:0; text-decoration:none;
  display:flex; flex-direction:column; position:relative; transition:border-color .2s, transform .2s var(--ease);
}
.detail:hover{border-color:var(--ink-2); transform:translateY(-2px)}
.detail .d-head{
  display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-2);
}
.detail .d-head .scale{margin-left:auto}
.detail .d-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.detail h3{font-family:var(--disp); font-weight:900; font-size:21px; margin:0 0 10px}
.detail p{margin:0 0 18px; font-size:14px; color:var(--ink-2); line-height:1.9}
.detail .more{margin-top:auto; font-size:13px; font-weight:700; color:var(--green)}
.detail .d-fig{padding:10px 24px 0}
.detail-b{border:2px solid var(--green)}
.detail-b .d-head{border-bottom-color:rgba(18,80,60,.3); color:var(--green)}
.d-stamp{
  position:absolute; top:-13px; right:16px; background:var(--green); color:#fff;
  font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:.2em;
  padding:3px 12px; border-radius:2px;
}
.kwchips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; padding:0; list-style:none}
.kwchips li{font-family:var(--mono); font-size:11px; border:1px solid var(--line); padding:4px 9px; color:var(--ink-2); border-radius:2px}
.detail-ref{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  background:transparent; border:1px dashed var(--ink-2); padding:20px 24px; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.detail-ref:hover{border-color:var(--ink); background:var(--card)}
.detail-ref .d-head2{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-2); white-space:nowrap}
.detail-ref h3{font-family:var(--disp); font-weight:900; font-size:16px; margin:0 0 4px}
.detail-ref p{margin:0; font-size:13.5px; color:var(--ink-2)}
.detail-ref .more{font-size:13px; font-weight:700; color:var(--green); white-space:nowrap}
.scale-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-2); margin:18px 0 0}

/* ============================================================
   蓄電所ハイライト（青焼きスペックシート）
   ============================================================ */
.bess{background:var(--bp); color:var(--bp-line); border:none}
.bess::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size:40px 40px;
}
.bess .wrap{position:relative}
.bess h2.sec{color:var(--bp-line)}
.bess .sec-lead{color:#C4D6E4}
.bess .fig-no{color:var(--bp-dim)}
.bess .fig-label{color:var(--bp-dim)}
.bess-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.spec{border:1px solid rgba(234,243,250,.3); margin:0 0 26px}
.spec-row{display:grid; grid-template-columns:9.5em 1fr; border-bottom:1px solid rgba(234,243,250,.18)}
.spec-row:last-child{border-bottom:none}
.spec-row dt{
  padding:11px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--bp-dim); border-right:1px solid rgba(234,243,250,.18);
}
.spec-row dd{margin:0; padding:11px 16px; font-size:13.5px; color:var(--bp-line); line-height:1.8}
.bess .kwchips li{border-color:rgba(234,243,250,.35); color:#C4D6E4}
.qa-lite{border-top:1px solid rgba(234,243,250,.25); padding-top:22px}
.qa-lite .ql-lead{color:#C4D6E4; font-size:14px; margin:0 0 16px}
.qa-lite .ql-list{list-style:none; padding:0; margin:0}
.qa-lite .ql-list li{
  padding:13px 0 13px 24px; border-bottom:1px solid rgba(234,243,250,.18);
  color:var(--bp-line); font-size:14.5px; line-height:1.75; position:relative;
}
.qa-lite .ql-list li::before{content:"Q"; position:absolute; left:0; top:13px; font-family:var(--mono); font-size:12px; color:var(--lamp-bp)}

/* ============================================================
   GENERAL NOTES（五感の五本柱）＋ 4本柱
   ============================================================ */
.notes-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:16px}
.note{background:var(--card); padding:26px 20px 28px; position:relative}
.note .n{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); letter-spacing:.18em}
.note h3{font-family:var(--disp); font-weight:900; font-size:22px; margin:12px 0 8px}
.note h3 small{display:block; font-family:var(--mono); font-size:10px; font-weight:400; color:var(--ink-2); letter-spacing:.2em; margin-top:2px}
.note p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.85}
.note .meas{font-family:var(--mono); font-size:12px; color:var(--green); font-weight:700; display:block; margin-top:10px}
.foot-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-2); margin:0 0 56px}
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pillar{background:var(--paper); padding:24px 22px}
.pillar .n{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); letter-spacing:.16em}
.pillar h3{font-family:var(--disp); font-weight:900; font-size:16.5px; margin:8px 0 6px}
.pillar p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.8}

/* ============================================================
   子ども向け入口（図面の隅がめくれて、昼の世界が覗く）
   ============================================================ */
.kids-strip{
  position:relative; border-radius:3px; overflow:hidden; text-decoration:none;
  display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center;
  background:var(--bp); color:#fff; padding:46px 200px 46px 44px; min-height:220px;
}
.kids-strip::before{ /* 方眼 */
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.kids-peel{ /* めくれて覗く暖色の別世界 */
  position:absolute; right:0; top:0; bottom:0; width:190px;
  background:#FFF3D6;
  clip-path:polygon(52px 0, 100% 0, 100% 100%, 0 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:-18px 0 44px rgba(255,210,63,.28);
  transition:width .35s var(--ease);
}
.kids-strip:hover .kids-peel, .kids-strip:focus-visible .kids-peel{width:216px}
.kids-fold{ /* めくれた紙の裏 */
  position:absolute; right:138px; top:-14px; width:110px; height:110px;
  background:linear-gradient(225deg, #DCE4EA 0 50%, transparent 50%);
  transform:rotate(0deg); pointer-events:none; opacity:.9;
}
.kids-strip .eyebrow2{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--bp-dim); margin:0 0 10px}
.kids-strip h2{font-family:var(--disp); font-weight:900; font-size:clamp(21px,2.7vw,29px); margin:0 0 10px; color:#FFD23F; position:relative}
.kids-strip p{margin:0 0 18px; color:#C4D6E4; max-width:36em; font-size:14px; position:relative}
.kids-strip .go{
  display:inline-block; background:#FFD23F; color:#123; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:14px; position:relative;
}
.kids-strip:hover .go{background:#ffdc65}

/* ============================================================
   問い合わせ（見積依頼書様式）
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:56px}
.form-sheet{background:var(--card); border:1.5px solid var(--ink); padding:34px 32px 38px; position:relative}
.form-sheet::before{
  content:"FORM 01 — 相談票"; position:absolute; top:-1.5px; left:24px; transform:translateY(-50%);
  background:var(--card); padding:0 10px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-2);
}
.field{margin-bottom:22px}
.field label{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; margin-bottom:6px}
.field label .fno{font-family:var(--mono); font-size:10px; color:var(--ink-2); letter-spacing:.1em}
.req, .opt{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; padding:1.5px 7px; border-radius:2px; font-weight:400}
.req{color:#fff; background:var(--green)}
.opt{color:var(--ink-2); border:1px solid var(--line)}
.field input,.field textarea,.field select{
  width:100%; padding:10px 2px; border:none; border-bottom:1.5px solid var(--ink-2); background:transparent;
  font-family:var(--body); font-size:15px; border-radius:0;
}
.field select{padding:10px 2px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-bottom-color:var(--green); box-shadow:0 1.5px 0 var(--green)}
.field input::placeholder,.field textarea::placeholder{color:#9AA7B0}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); margin:26px 0 20px}
.consent input{width:17px; height:17px; margin-top:4px; accent-color:var(--green)}
.consent a{color:var(--green); font-weight:700}
.submit-row{display:flex; gap:22px}
.seal-btn{
  width:165px !important; height:64px; border-radius:0; border:2.5px solid var(--green); background:transparent;
  color:var(--green); font-family:var(--disp); font-weight:900; font-size:17px; letter-spacing:.1em;
  cursor:pointer; position:relative; transition:background .2s, color .2s, transform .12s var(--ease); margin-bottom:20px;
}
.seal-btn::before{content:""; position:absolute; inset:5px; border:1px solid currentColor; border-radius:0}
.seal-btn:hover{background:var(--green); color:#fff}
.seal-btn:active{transform:scale(.94)}
.seal-btn:focus-visible{outline:2.5px solid var(--lamp); outline-offset:3px}
.submit-row small{font-size:12.5px; color:var(--ink-2); line-height:1.8}
.info-rows{margin:0}
.info-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.info-row dt{width:7em; flex:none; font-size:11.5px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.08em; padding-top:3px}
.info-row dd{margin:0; font-size:15px}

/* ---------- 緊急連絡先（同意して開示） ---------- */
.tel-gate{border:1.5px solid var(--ink); background:var(--card); padding:20px 22px; margin:26px 0 0; position:relative}
.tel-gate::before{
  content:"EMERGENCY ／ 緊急のご連絡"; position:absolute; top:-1.5px; left:18px; transform:translateY(-50%);
  background:var(--card); padding:0 10px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-2);
}
.tel-gate p{margin:6px 0 14px; font-size:13.5px; color:var(--ink-2); line-height:1.9}
.tel-gate p b{color:var(--ink)}
.tel-reveal{
  display:inline-flex; align-items:center; gap:9px; background:var(--green); color:#fff; border:none;
  font-family:var(--body); font-weight:700; font-size:14px; padding:14px 22px; border-radius:2px; cursor:pointer; min-height:44px;
}
.tel-reveal:hover{background:#0d3f2e}
.tel-reveal:focus-visible{outline:2px solid var(--lamp); outline-offset:3px}
.tel-out{display:none; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:4px}
.tel-out.on{display:flex}
.tel-out .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-2)}
.tel-out .num{font-family:var(--mono); font-size:clamp(20px,2.6vw,26px); font-weight:700; color:var(--green); letter-spacing:.04em; text-decoration:none}
.tel-out a.num:hover{text-decoration:underline}
.tel-out .sub{font-size:12.5px; color:var(--ink-2); width:100%; line-height:1.85}
/* 反転面（青焼き）に置く場合 */
.bess .tel-gate, .bess-hero .tel-gate{background:rgba(10,26,42,.4); border-color:rgba(234,243,250,.5); color:var(--bp-line)}
.bess .tel-gate::before, .bess-hero .tel-gate::before{background:var(--bp); color:var(--bp-dim)}
.bess .tel-gate p, .bess-hero .tel-gate p{color:#C4D6E4}
.bess .tel-gate p b, .bess-hero .tel-gate p b{color:var(--bp-line)}


/* ============================================================
   フッター（表題欄）
   ============================================================ */
footer.site{background:var(--bp); color:var(--bp-line); padding:64px 0 30px; position:relative}
footer.site::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--bp-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size:40px 40px;
}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; position:relative; margin-bottom:44px}
footer.site h4{font-family:var(--mono); font-size:10.5px; margin:0 0 14px; letter-spacing:.2em; color:var(--bp-dim)}
footer.site p.about{font-size:13px; color:#C4D6E4; margin:0; line-height:1.9}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:9px}
footer.site a{font-size:13.5px; color:#C4D6E4; text-decoration:none}
footer.site a:hover{color:var(--lamp-bp)}
.title-block{border:1.5px solid rgba(234,243,250,.5); position:relative; background:rgba(10,26,42,.4)}
.tb-grid{display:grid; grid-template-columns:repeat(4,1fr)}
.tb-cell{padding:10px 14px 12px; border-right:1px solid rgba(234,243,250,.25); border-bottom:1px solid rgba(234,243,250,.25)}
.tb-cell:nth-child(4n){border-right:none}
.tb-cell.wide{grid-column:1 / -1; border-right:none}
.tb-cell b{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--bp-dim); font-weight:400; margin-bottom:3px}
.tb-cell span{font-size:13px; color:var(--bp-line); line-height:1.7}
.tb-cell .mono{font-size:12px}
.copy{margin-top:22px; font-size:11px; color:var(--bp-dim); font-family:var(--mono); letter-spacing:.08em; position:relative}

/* ============================================================
   蓄電所ページ（SHEET 2）
   ============================================================ */
.bess-hero{background:var(--bp); color:var(--bp-line); padding:72px 0 76px; position:relative; overflow:hidden}
.bess-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
    linear-gradient(rgba(234,243,250,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,243,250,.09) 1px, transparent 1px);
  background-size:8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
.bess-hero .wrap{position:relative}
.bess-hero .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--bp-dim); text-transform:uppercase; margin:0 0 18px}
.bess-hero h1{max-width:17em}
.bess-hero p.lead{font-size:16.5px; color:#C4D6E4; margin:0 0 28px; max-width:38em; line-height:2}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(234,243,250,.25); border:1px solid rgba(234,243,250,.25)}
.step-c{background:var(--bp-panel); padding:26px 22px}
.step-c .n{font-family:var(--mono); font-size:10.5px; color:var(--bp-dim); letter-spacing:.18em}
.step-c h3{font-family:var(--disp); font-weight:900; font-size:17px; margin:10px 0 8px; color:var(--bp-line)}
.step-c p{margin:0; font-size:13px; color:#C4D6E4; line-height:1.85}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:2px; padding:26px 24px 28px;
  display:flex; flex-direction:column; text-decoration:none;
}
.card:hover{border-color:var(--ink-2)}
.card-hl{border:2px solid var(--green)}
.card-hl h3{color:var(--green)}
.card h3{font-family:var(--disp); font-weight:900; font-size:18px; margin:14px 0 8px}
.card p{margin:0 0 8px; font-size:14px; color:var(--ink-2); line-height:1.85}

/* ============================================================
   子ども向けページ（昼の世界 — 意図的な別世界）
   ============================================================ */
#view-kids{background:#F0F8F4}
.kids-hero{padding:56px 0 40px; text-align:center}
.kids-hero .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:#4E6259; margin:0 0 14px}
.kids-hero h1{font-size:clamp(28px,5vw,48px); color:#0E4C3A}
.kids-hero h1 em{color:#E8380D}
.kids-hero h1 em::after{background:rgba(255,210,63,.55); height:.28em; bottom:.02em}
.kids-hero p{font-size:17px; color:#2B4A3E; max-width:34em; margin:0 auto}
#view-kids h2.sec{color:#0E4C3A}
#view-kids .sec-lead{color:#2B4A3E}
.chars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:20px}
.char{background:#fff; border:3px solid #0E4C3A; border-radius:18px; padding:20px; text-align:center}
.char svg{height:150px}
.char .char-img{height:150px; width:100%; object-fit:contain; display:block}
.char .char-img.cut{object-position:center bottom}
.g-ava{display:block; width:168px; height:168px; border-radius:50%; overflow:hidden;
  border:3px solid #0E4C3A; background:#DDE3E7; flex:none}
.g-ava img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block}
.kids-poster{margin:28px 0 0; padding:0}
.kids-poster img{width:100%; border-radius:14px; border:3px solid #0E4C3A; display:block}
.kids-poster figcaption{font-family:var(--mono); font-size:11px; color:#4E6259; letter-spacing:.08em; margin-top:8px}
/* お願いすること（番号付き） */
.duty{list-style:none; counter-reset:duty; padding:0; margin:0; max-width:860px; border-top:1.5px solid var(--ink)}
.duty li{counter-increment:duty; position:relative; padding:22px 0 22px 62px; border-bottom:1px solid var(--line)}
.duty li::before{
  content:counter(duty,decimal-leading-zero); position:absolute; left:0; top:24px;
  font-family:var(--mono); font-size:13px; font-weight:700; color:#fff; background:var(--green);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:2px;
}
.duty li b{display:block; font-family:var(--disp); font-weight:900; font-size:17px; margin:0 0 8px; color:var(--ink)}
.duty li p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.95}
@media (max-width:700px){
  .duty li{padding:18px 0 18px 46px}
  .duty li::before{width:28px; height:28px; font-size:11px; top:20px}
}

/* SDGs 支援先リスト */
.support-list{border-top:1.5px solid var(--ink); max-width:820px}
.support{display:grid; grid-template-columns:56px 1fr; gap:18px; padding:22px 6px; border-bottom:1px solid var(--line)}
.support .s-no{font-family:var(--mono); font-size:12px; color:var(--ink-2); letter-spacing:.14em; padding-top:4px}
.support h3{font-family:var(--disp); font-weight:900; font-size:17px; margin:0 0 6px; color:var(--ink)}
.support p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.9}
@media (max-width:700px){
  .support{grid-template-columns:1fr; gap:6px; padding:18px 4px}
}
.char h3{font-family:var(--disp); font-weight:900; font-size:20px; margin:8px 0 2px; color:#0E4C3A}
.char .role{font-family:var(--mono); font-size:11px; color:#4E6259; letter-spacing:.1em; margin-bottom:10px}
.char p{font-size:14px; margin:0 0 12px; text-align:left; line-height:1.85}
.char .look{background:#FFF6D6; border-radius:10px; padding:10px 12px; font-size:13px; text-align:left; line-height:1.75}
.char .look b{color:#8A5C00; display:block; font-size:11.5px; font-family:var(--mono); letter-spacing:.08em}
.kids-day{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kstep{background:#fff; border-radius:14px; padding:22px 20px; border:2px dashed #9CC4B4}
.kstep .num{font-family:var(--mono); font-weight:700; color:#E8380D; font-size:12px; letter-spacing:.1em}
.kstep h3{font-family:var(--disp); font-size:17px; margin:8px 0 6px; color:#0E4C3A}
.kstep p{font-size:13.5px; margin:0; line-height:1.8}
.back-biz{display:inline-block; margin-top:8px; font-size:13px; color:#2B4A3E}
.guides{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px 22px; align-items:center;
  background:#fff; border:3px solid #0E4C3A; border-radius:18px;
  padding:24px 28px; margin-bottom:10px; overflow:hidden;
}
.guides{align-items:center}
.guide-talk{padding:0 4px 24px; align-self:center}
.guide-talk .bubble{
  background:#F0F8F4; border:2px solid #9CC4B4; border-radius:14px;
  padding:14px 18px; font-size:14.5px; line-height:1.95; margin:0 0 10px; position:relative;
}
.guide-talk .bubble::after{
  content:""; position:absolute; left:-12px; bottom:16px;
  border:7px solid transparent; border-right-color:#9CC4B4;
}
.guide-talk .bubble b{color:#0E4C3A}
.guide-talk .who{font-family:var(--mono); font-size:10.5px; color:#4E6259; letter-spacing:.1em; margin:0; line-height:1.9}
.guide-note{font-family:var(--mono); font-size:10.5px; color:#4E6259; letter-spacing:.08em; margin:0 0 26px}
@media (max-width:700px){
  .guides{grid-template-columns:1fr 1fr; padding:20px 18px 0}
  .guide-talk{grid-column:1 / -1; order:-1; padding-bottom:6px}
  .guide-talk .bubble::after{display:none}
  .g-ava{width:130px; height:130px; margin:0 auto}
}

/* ---------- 下層ページ共通（製図紙） ---------- */
.page-t{font-family:var(--disp); font-weight:900; font-size:clamp(27px,3.6vw,40px); color:var(--ink); line-height:1.4; margin:0 0 12px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 30px}
.chip{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; padding:7px 14px; border:1.5px solid var(--line); background:var(--card); border-radius:2px; cursor:pointer; color:var(--ink-2)}
.chip[aria-pressed="true"]{border-color:currentColor; font-weight:700; box-shadow:inset 0 -2.5px 0 currentColor}
.chip:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.chip.all[aria-pressed="true"]{color:var(--ink)}

/* 記事見本 */
.art{max-width:720px}
.a-t{font-family:var(--disp); font-weight:900; font-size:clamp(23px,3vw,32px); color:var(--ink); line-height:1.55; margin:0 0 10px}
.a-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.08em; margin:0 0 26px}
.a-note{background:#FFF3D6; border:1px solid #E4C97A; color:#6a5200; font-size:12.5px; padding:9px 14px; margin:0 0 30px}
.a-one{border:1.5px solid var(--ink); border-left:5px solid var(--amber); background:var(--card); padding:16px 20px; margin:0 0 12px}
.a-one b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--amber); margin-bottom:5px}
.a-one p{margin:0; font-weight:700; font-size:16.5px; line-height:1.9}
.art h2{font-family:var(--disp); font-weight:900; font-size:19.5px; margin:42px 0 14px; padding-left:12px; border-left:4px solid var(--amber)}
.art p{margin:0 0 16px; font-size:15.5px; line-height:2}
.tbl-scroll{overflow-x:auto; margin:0 0 16px}
.art table{width:100%; border-collapse:collapse; font-size:14px; background:var(--card)}
.art th,.art td{border:1px solid var(--line); padding:9px 12px; text-align:left; line-height:1.7}
.art th{background:#EFF1EC; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-2); font-weight:400}
.a-check{list-style:none; padding:0; margin:0 0 16px}
.a-check li{padding:10px 0 10px 34px; position:relative; border-bottom:1px dashed var(--line); font-size:15px; line-height:1.9}
.a-check li::before{content:""; position:absolute; left:4px; top:15px; width:14px; height:14px; border:1.5px solid var(--ink-2); background:#fff}
.a-src{font-size:12.5px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:14px; line-height:1.9}

/* FAQ（紙面） */
.qa-paper{border-top:1.5px solid var(--ink); max-width:820px}
.qa-paper details{border-bottom:1px solid var(--line)}
.qa-paper summary{cursor:pointer; padding:18px 40px 18px 0; font-weight:700; list-style:none; position:relative; font-size:15.5px; line-height:1.8}
.qa-paper summary::-webkit-details-marker{display:none}
.qa-paper summary::after{content:"＋"; position:absolute; right:6px; top:18px; color:var(--green); font-family:var(--mono)}
.qa-paper details[open] summary::after{content:"−"}
.qa-paper .qa-a{margin:0 0 20px; color:var(--ink-2); font-size:14.5px; line-height:1.95; max-width:46em}
.qa-paper .tag{margin-right:10px; vertical-align:2px}
/* FAQのタグは分類色を使わない（安全色は記事カテゴリー専用） */
.tag-q{display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; padding:4px 9px; border-radius:2px; margin-right:10px; vertical-align:2px;
  color:var(--ink-2); background:#E7EAE5; border:1px solid var(--line)}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:960px){
  .hero-grid,.bess-grid,.contact-grid{grid-template-columns:1fr; gap:38px}
  .details-grid{grid-template-columns:1fr}
  .cards,.chars{grid-template-columns:1fr 1fr}
  .notes-grid{grid-template-columns:1fr 1fr 1fr}
  .pillars,.kids-day,.steps{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tb-grid{grid-template-columns:1fr 1fr}
  .tb-cell:nth-child(4n){border-right:1px solid rgba(234,243,250,.25)}
  .tb-cell:nth-child(2n){border-right:none}
  .kids-strip{grid-template-columns:1fr; padding:36px 170px 36px 28px}
}
/* ナビは6項目あるため1000px以下でハンバーガーに畳む（横1行に収まらないため） */
@media (max-width:1000px){
  nav.main{
    display:none; position:absolute; top:64px; left:0; right:0; background:var(--paper);
    border-bottom:1.5px solid var(--ink); flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 18px;
    z-index:71;
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 0; border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
}
@media (max-width:700px){
  .brand span.sub{display:none}
  .sld-stage svg{min-width:640px}
  .swipe-hint{display:block !important}
  .model-note{font-size:9px; letter-spacing:.06em}
  .btn-ask{padding:9px 13px; font-size:12.5px}  /* モバイルでも消さない（v0.1の欠陥修正） */
  nav.main{top:56px}
  .cards,.chars,.pillars,.kids-day,.steps,.notes-grid{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
  .chip{padding:12px 16px; font-size:12.5px}   /* タッチ領域を44px相当に */
  .qa-paper summary{padding:16px 40px 16px 0}
  .art h2{margin-top:34px}
  section.block{padding:60px 0}
  .rev-row{grid-template-columns:44px 1fr auto; gap:10px 14px; padding:15px 6px}
  .rev-row .rno{display:none}
  .rev-row time{grid-column:2}
  .rev-row .ttl{grid-column:1 / -1; grid-row:2}
  .rev-row .arw{display:none}
  .hero{padding:40px 0 48px}
  .detail-ref{grid-template-columns:1fr; gap:10px}
  .kids-strip{padding:32px 24px 120px}
  .kids-peel{left:0; right:0; top:auto; bottom:0; width:auto; height:104px;
    clip-path:polygon(0 34px, 100% 0, 100% 100%, 0 100%)}
  .kids-strip:hover .kids-peel{width:auto}
  .kids-fold{display:none}
  .submit-row{flex-direction:column; align-items:flex-start}
  .spec-row{grid-template-columns:1fr}            /* 見出し列が潰れるので縦積みに */
  .spec-row dt{border-right:none; border-bottom:1px solid rgba(234,243,250,.18); padding-bottom:6px}
  .rev-row{grid-template-columns:1fr auto}        /* REV列を消した分の余白を詰める */
  .rev-row time{grid-column:1}
  .kids-peel img{width:88px !important; margin:0 !important}   /* 帯からはみ出さない */
}

/* ============================================================
   動きの停止（情報は欠けない）
   ============================================================ */
@media (max-width:700px){
  .hdr{height:56px; gap:10px}
  .brand b{font-size:14.5px; white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .draw path,.draw line,.draw rect,.draw circle,.draw polyline{stroke-dasharray:none; stroke-dashoffset:0}
  .draw text{opacity:1}
  .flow{opacity:1; animation:none}          /* 流れは静的な破線として残す */
  .oplamp,.blink{opacity:1; animation:none}
  .leader.show{stroke-dasharray:none; stroke-dashoffset:0}
  .xh,.coord{display:none !important}
  .dim i{display:none}
}

/* ============================================================
   印刷（青地は紙に反転）
   ============================================================ */
@media print{
  .hero,.bess,.bess-hero,footer.site,.kids-strip{background:#fff !important; color:#000 !important}
  .sheet-frame,.proto,.xh,.coord,.dn-toggle{display:none !important}
  .flow{stroke:#00805A}
  h1,.bess h2.sec,.bess-hero h1{color:#000 !important}
}