/* 中央にスマホ幅の1列（PCでは左右に、今いる節が色で分かる目次と、相談の入口）。見る順＝何の保守か・いくら → 困りごと → やること → 違い → 料金 → 診断／相談。詳細は畳む。白黒＋差し色（琥珀）1色 */
:root{
  --bg:#FFFFFF; --fg:#111111; --fg2:#474747; --fg3:#8A8A8A;
  --outer:#E9E9E9; --panel:#F4F4F4; --line:#DEDEDE; --card:#FFFFFF;
  --accent:#9A6B25; --tint:#F6EEDF;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",Meiryo,system-ui,sans-serif;
  --col:440px; --r:12px; --fs:1;
  color-scheme:light;
}
/* 既定は明るい表示。端末の設定には合わせず、表示の切り替えメニューで選んだときだけ変える */
:root[data-zoo-dark="on"]{ --bg:#141414; --fg:#EDEDED; --fg2:#B3B3B3; --fg3:#8F8F8F; --outer:#000000; --panel:#1C1C1C; --line:#333333; --card:#222222; --accent:#D3A55E; --tint:#2C251A; color-scheme:dark }
/* 色覚に配慮した色：差し色を、色の見え方が違っても見分けやすい青に替える（カラーユニバーサルデザインの推奨配色の青） */
:root[data-zoo-cb="on"]{ --accent:#005AFF; --tint:#E3ECFF }
:root[data-zoo-cb="on"][data-zoo-dark="on"]{ --accent:#6FA8FF; --tint:#16243D }
/* 文字の大きさ */
:root[data-zoo-fs="l"]{ --fs:1.15 }
:root[data-zoo-fs="xl"]{ --fs:1.3 }

*,*::before,*::after{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-break:strict }
a{ color:inherit }
img{ max-width:100%; display:block }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
svg.i{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none }


/* 舞台 */
.stage{ display:block; min-height:100vh; background:var(--outer) }
.side{ display:none }
.col{ background:var(--bg); max-width:var(--col); margin-inline:auto; min-width:0; overflow:clip }
@media (min-width:1000px){
  .stage{ display:grid; grid-template-columns:minmax(0,1fr) var(--col) minmax(0,1fr); padding-top:28px }
  .stage .col{ width:100%; border-radius:28px 28px 0 0 }
  .stage .side{ display:flex; flex-direction:column; justify-content:center; gap:16px;
    position:sticky; top:0; height:100vh; padding-inline:40px; min-width:0 }
  .stage .side.l{ align-items:flex-end }
  .stage .side.r{ align-items:flex-start }
  .stage .bar{ display:none }
}

/* 文字。見出しは自動で行を整えない。幅に収まらない見出しは意図した位置で改行する */
h1,h2,h3,h4,p{ margin:0 }
h1{ font-size:calc(29px * var(--fs)); line-height:1.45; font-weight:700; letter-spacing:.02em }
h2{ font-size:calc(22px * var(--fs)); line-height:1.5; font-weight:700; letter-spacing:.02em }
h3{ font-size:calc(16px * var(--fs)); line-height:1.6; font-weight:700 }
p,li,dd,dt{ font-size:calc(15px * var(--fs)); line-height:1.85; letter-spacing:.02em }
.sub{ color:var(--fg2) }
.small{ font-size:calc(13px * var(--fs)); line-height:1.75; color:var(--fg2) }
.num{ font-variant-numeric:tabular-nums }
mark{ background:linear-gradient(transparent 60%, var(--tint) 60%); color:inherit; padding-inline:2px }

/* ブロック */
.blk{ padding:48px 22px; display:grid; gap:20px }
.blk.alt{ background:var(--panel) }
.head{ display:grid; gap:10px; justify-items:start }
.pill{ display:inline-flex; align-items:center; gap:6px; background:var(--tint); color:var(--accent); font-size:calc(12px * var(--fs)); font-weight:700; letter-spacing:.06em; padding:5px 12px; border-radius:999px; justify-self:start; align-self:start }
.blk.alt .pill{ background:var(--card) }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px }
.ic{ width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--accent); display:grid; place-items:center; flex:none }
.blk.alt .ic{ background:var(--card) }
.stack{ display:grid; gap:10px }
.hrow{ display:flex; gap:14px; align-items:center }
.hrow > div{ min-width:0; display:grid; gap:2px }
.lead{ font-size:calc(15px * var(--fs)); font-weight:700; line-height:1.7; text-align:center }

/* ヘッダーとファーストビュー */
.top{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; gap:10px }
.logo{ font-weight:700; font-size:calc(16px * var(--fs)); letter-spacing:.3em; text-decoration:none }
.btn-s{ font-size:calc(12px * var(--fs)); font-weight:700; text-decoration:none; background:var(--fg); color:var(--bg); padding:8px 12px; border-radius:8px }
.crumb{ padding:0 18px 10px; font-size:calc(11px * var(--fs)); color:var(--fg3) }
.crumb a{ text-decoration:none }
.hero-img{ position:relative; background:var(--panel) }
.hero-img img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.hero-img .tag{ position:absolute; left:14px; bottom:12px; background:var(--bg); color:var(--fg); font-size:calc(11px * var(--fs)); font-weight:700; padding:4px 10px; border-radius:999px }
.hero{ padding:24px 22px 40px; display:grid; gap:16px }
.facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0 }
.fact{ background:var(--panel); border-radius:10px; padding:10px 6px 11px; display:grid; gap:2px; justify-items:center; align-content:start; text-align:center }
.fact dt{ font-size:calc(11px * var(--fs)); color:var(--fg3); line-height:1.4 }
.fact dd{ margin:0; font-size:calc(16px * var(--fs)); font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums }
.fact dd small{ display:block; font-size:calc(11px * var(--fs)); font-weight:400; color:var(--fg2); line-height:1.45; margin-top:2px }
.ctas{ display:grid; gap:10px }
.btn{ display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:700; font-size:calc(16px * var(--fs)); letter-spacing:.06em;
  padding:16px 18px; border-radius:10px; background:var(--fg); color:var(--bg); border:2px solid var(--fg); cursor:pointer; font-family:inherit }
.btn.ghost{ background:transparent; color:var(--fg) }
.btn:hover{ opacity:.88 }
.btn svg.i{ width:20px; height:20px }
.tel{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:calc(13px * var(--fs)); color:var(--fg2) }
.tel b{ font-size:calc(19px * var(--fs)); color:var(--fg); letter-spacing:.06em; font-variant-numeric:tabular-nums; user-select:all }

/* お困りごと */
.worry{ display:flex; gap:12px; align-items:center; padding:12px 14px }
.worry p{ font-size:calc(14.5px * var(--fs)); line-height:1.65; font-weight:500 }
.down{ display:grid; justify-items:center; color:var(--accent) }

/* やること */
.tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; display:grid; gap:4px; align-content:start }
.tile .ic{ width:36px; height:36px; margin-bottom:4px }
.tile .ic svg.i{ width:19px; height:19px }
.tile b{ font-size:calc(14.5px * var(--fs)); line-height:1.4 }
.tile span{ font-size:calc(12px * var(--fs)); color:var(--fg2); line-height:1.5 }
.tile.wide{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; border:2px solid var(--accent) }
.tile.wide .ic{ margin:0 }
.tile.wide > div{ display:grid; gap:4px; min-width:0 }
.tile.wide b{ font-size:calc(15px * var(--fs)) }
.tag-s{ display:inline-block; background:var(--accent); color:var(--bg) !important; font-size:calc(10.5px * var(--fs)) !important; font-weight:700; padding:2px 8px; border-radius:999px; justify-self:start }
details.more{ border-radius:10px; background:var(--panel) }
.blk.alt details.more{ background:var(--card) }
details.more summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; font-size:calc(13.5px * var(--fs)); font-weight:700 }
details.more summary::-webkit-details-marker{ display:none }
details.more summary::after{ content:"＋"; color:var(--fg3); font-weight:400 }
details.more[open] summary::after{ content:"－" }
details.more .in{ padding:0 14px 14px; display:grid; gap:8px }
ul.dash, ul.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
ul.dash li, ul.ticks li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; align-items:start; font-size:calc(13.5px * var(--fs)); line-height:1.7 }
ul.dash li::before{ content:"－"; color:var(--fg3) }
ul.ticks li svg.i{ width:16px; height:16px; color:var(--accent); margin-top:4px; stroke-width:2.4 }

/* 比較 */
.cmp{ overflow-x:auto }
.cmp table{ width:100%; min-width:330px; border-collapse:separate; border-spacing:0; table-layout:fixed }
.cmp th, .cmp td{ font-size:calc(12.5px * var(--fs)); line-height:1.5; padding:10px 6px; vertical-align:middle; border-bottom:1px solid var(--line); text-align:center }
.cmp col.c1{ width:25% } .cmp col.c2{ width:35% } .cmp col.c3{ width:40% }
.cmp thead th{ font-size:calc(12px * var(--fs)); font-weight:700; color:var(--fg2); border-bottom:0 }
.cmp thead th.zoo{ background:var(--fg); color:var(--bg); border-radius:10px 10px 0 0; font-size:calc(13px * var(--fs)) }
.cmp tbody th{ font-weight:700; text-align:left; font-size:calc(12.5px * var(--fs)) }
.cmp td{ color:var(--fg2) }
.cmp td.zoo{ background:var(--card); color:var(--fg); font-weight:700; border-left:2px solid var(--fg); border-right:2px solid var(--fg) }
.cmp tbody tr:last-child td.zoo{ border-bottom:2px solid var(--fg); border-radius:0 0 10px 10px }

/* 2つの決めごと */
.feat{ display:grid; gap:12px }
.feat .no{ display:flex; align-items:center; gap:10px }
.feat .no span{ background:var(--fg); color:var(--bg); font-size:calc(11px * var(--fs)); font-weight:700; padding:3px 10px; border-radius:999px; flex:none }
.paperwrap{ background:var(--panel); border-radius:var(--r); padding:22px 18px; display:grid; justify-items:center }
.paper{ position:relative; width:min(100%, 290px); background:#FFFFFF; color:#111; border-radius:4px; padding:16px 16px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12); transform:rotate(-1.2deg); display:grid; gap:8px }
.paper .pp-top{ display:flex; justify-content:space-between; font-size:calc(11px * var(--fs)); font-weight:700; letter-spacing:.2em; border-bottom:2px solid #111; padding-bottom:6px }
.paper .pp-title{ font-size:calc(14px * var(--fs)); font-weight:700; line-height:1.4 }
.paper .pp-title small{ display:block; font-size:calc(11px * var(--fs)); font-weight:400; color:#666 }
.paper ul{ list-style:none; margin:0; padding:0 }
.paper li{ display:flex; justify-content:space-between; gap:10px; font-size:calc(12px * var(--fs)); line-height:1.4; padding:6px 0; border-bottom:1px dashed #CFCFCF }
.paper li span:last-child{ font-weight:700; font-variant-numeric:tabular-nums }
.stamp{ position:absolute; top:-10px; right:-8px; background:#111; color:#fff; font-size:calc(11px * var(--fs)); font-weight:700; padding:4px 10px; border-radius:999px; transform:rotate(4deg) }
.own{ display:grid; gap:8px }
.own .three{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px }
.own .chip{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 4px; display:grid; justify-items:center; gap:2px; text-align:center; font-size:calc(13px * var(--fs)); font-weight:700; line-height:1.4 }
.own .chip svg.i{ color:var(--accent); margin-bottom:2px }
.own .chip small{ font-weight:400; font-size:calc(11px * var(--fs)); color:var(--fg2) }
.own .goal{ background:var(--fg); color:var(--bg); border-radius:10px; padding:12px; text-align:center; font-weight:700; font-size:calc(15px * var(--fs)) }

/* 料金 */
.price{ border:2px solid var(--fg); border-radius:var(--r); overflow:hidden; background:var(--card) }
.price.p2{ border:1px solid var(--line) }
.price .ph{ background:var(--fg); color:var(--bg); padding:7px 16px; font-size:calc(12px * var(--fs)); font-weight:700; letter-spacing:.06em }
.price .pb{ padding:14px 16px 16px; display:grid; gap:8px }
.price .pn{ font-size:calc(15px * var(--fs)); font-weight:700 }
.price .pv{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.price .pv b{ font-size:calc(32px * var(--fs)); font-weight:700; font-variant-numeric:tabular-nums }
.price .pv span{ font-size:calc(13px * var(--fs)); color:var(--fg2) }
.price .pv em{ font-style:normal; background:var(--tint); color:var(--accent); font-size:calc(12px * var(--fs)); font-weight:700; padding:3px 8px; border-radius:999px }
.price .pt{ font-size:calc(13.5px * var(--fs)); line-height:1.75 }
/* 別料金の毎月のプラン（主の枠の下に細く。2026-10-16 CEO） */
.xplan{ display:grid; gap:8px; padding-top:16px; border-top:1px solid var(--line) }
.xplan .xh{ font-size:calc(13.5px * var(--fs)); font-weight:700; line-height:1.6 }
.xplan ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.xplan li{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 12px; display:grid; gap:2px }
.xplan .xr{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:calc(13px * var(--fs)); font-weight:700; line-height:1.6 }
.xplan .xr span:last-child{ font-variant-numeric:tabular-nums }
.xplan .xd{ font-size:calc(12px * var(--fs)); line-height:1.65; color:var(--fg2) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips span{ background:var(--card); border-radius:999px; padding:5px 12px; font-size:calc(12.5px * var(--fs)); font-weight:700 }

/* 無料のIT診断 */
.risks{ display:grid; gap:8px }
.risk{ display:flex; gap:10px; align-items:center; background:var(--panel); border-radius:10px; padding:10px 12px }
.risk svg.i{ color:var(--accent); width:22px; height:22px }
.risk p{ font-size:calc(14px * var(--fs)); line-height:1.6; font-weight:500 }
.tool{ background:var(--card); border:2px solid var(--fg); border-radius:16px; overflow:hidden }
.tool .th{ background:var(--fg); color:var(--bg); padding:12px 16px; display:flex; gap:10px; align-items:center; font-weight:700; font-size:calc(16px * var(--fs)) }
.tool .th svg.i{ width:22px; height:22px }
.tool .tb{ padding:16px 16px 20px; display:grid; gap:16px }
.tool .meta{ display:flex; flex-wrap:wrap; gap:6px }
.tool .meta span{ background:var(--panel); border-radius:999px; padding:3px 10px; font-size:calc(12px * var(--fs)); font-weight:700; color:var(--fg2) }
.progress{ display:grid; gap:6px }
.progress .lbl{ display:flex; justify-content:space-between; font-size:calc(12px * var(--fs)); color:var(--fg3); font-variant-numeric:tabular-nums }
.progress .track{ height:6px; background:var(--panel); border-radius:999px; overflow:hidden }
.progress .fill{ height:100%; background:var(--accent); border-radius:999px; transition:width .25s ease }
.qtext{ font-size:calc(17px * var(--fs)); font-weight:700; line-height:1.65 }
.choices{ display:grid; gap:10px }
.choice{ appearance:none; font:inherit; font-size:calc(15px * var(--fs)); font-weight:700; text-align:left; color:var(--fg); background:var(--card); border:2px solid var(--line); border-radius:10px;
  padding:14px 16px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px }
.choice:hover{ border-color:var(--fg) }
.choice svg.i{ width:18px; height:18px; color:var(--fg3) }
.linkbtn{ appearance:none; font:inherit; font-size:calc(13px * var(--fs)); color:var(--fg2); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:5px; cursor:pointer; justify-self:start }
.summary{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.summary div{ border-radius:10px; padding:10px 12px; background:var(--panel); display:grid; gap:2px }
.summary b{ font-size:calc(24px * var(--fs)); font-variant-numeric:tabular-nums }
.summary span{ font-size:calc(12px * var(--fs)); color:var(--fg2); font-weight:700 }
.summary .warn{ background:var(--tint) }
.summary .warn b, .summary .warn span{ color:var(--accent) }
.rlist{ display:grid; gap:10px }
.ritem{ border-radius:10px; padding:12px 14px; display:grid; gap:6px }
.ritem.ok{ background:var(--panel) }
.ritem.ng{ border:2px solid var(--accent) }
.ritem h4{ display:flex; align-items:center; gap:8px; font-size:calc(14.5px * var(--fs)); line-height:1.5 }
.ritem.ok h4 svg.i{ color:var(--fg2) }
.ritem.ng h4 svg.i{ color:var(--accent) }
.ritem p{ font-size:calc(13.5px * var(--fs)); line-height:1.75 }
.ritem .how{ background:var(--panel); border-radius:8px; padding:8px 10px; color:var(--fg2) }
.ritem .how b{ display:block; font-size:calc(11.5px * var(--fs)); color:var(--fg); margin-bottom:2px }
.ledger{ display:grid; gap:10px; background:var(--panel); border-radius:10px; padding:14px }
.scroll{ overflow-x:auto }
.ledger table{ border-collapse:collapse; min-width:380px; width:100%; background:var(--card) }
.ledger th, .ledger td{ text-align:left; padding:8px 10px; font-size:calc(12px * var(--fs)); white-space:nowrap; border-bottom:1px solid var(--line) }
.ledger th{ background:var(--fg); color:var(--bg); font-weight:700 }
.memo{ font-size:calc(11.5px * var(--fs)); color:var(--fg3) }
.memo::before{ content:"［見本のメモ］" }

/* 実例 */
.case{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; align-items:stretch }
.case .st{ border-radius:10px; padding:10px 8px; display:grid; gap:4px; align-content:start; background:var(--card) }
.case .st .k{ font-size:calc(11px * var(--fs)); font-weight:700; color:var(--fg3) }
.case .st.now .k{ color:var(--accent) }
.case .st.next{ background:var(--fg); color:var(--bg) }
.case .st.next .k{ color:var(--bg); opacity:.8 }
.case .st p{ font-size:calc(12.5px * var(--fs)); line-height:1.6; font-weight:500 }

/* 進め方 */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; position:relative }
.flow::before{ content:""; position:absolute; left:12%; right:12%; top:21px; height:2px; background:var(--line) }
.flow li{ display:grid; justify-items:center; gap:6px; text-align:center; position:relative; align-content:start }
.flow .n{ width:42px; height:42px; border-radius:50%; background:var(--fg); color:var(--bg); display:grid; place-items:center; font-weight:700; font-size:calc(16px * var(--fs)) }
.flow li:first-child .n{ background:var(--accent) }
.flow b{ font-size:calc(12.5px * var(--fs)); line-height:1.45 }
.flow small{ font-size:calc(11px * var(--fs)); color:var(--fg2); line-height:1.4 }

/* 対応する範囲 */
.area svg{ width:100%; height:auto; display:block }
.area .lab{ font-family:var(--sans); font-size:13px; font-weight:700; fill:var(--fg) }
.area .lab2{ font-family:var(--sans); font-size:11px; fill:var(--fg2) }
.area .lab3{ font-family:var(--sans); font-size:16px; font-weight:700; fill:var(--accent) }

/* よくあるご質問 */
details.qa{ background:var(--card); border:1px solid var(--line); border-radius:var(--r) }
details.qa summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:26px minmax(0,1fr) 16px; gap:10px; align-items:center; padding:14px }
details.qa summary::-webkit-details-marker{ display:none }
details.qa summary::after{ content:"＋"; color:var(--fg3) }
details.qa[open] summary::after{ content:"－" }
details.qa .qm, details.qa .am{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:calc(12px * var(--fs)); font-weight:700 }
details.qa .qm{ background:var(--fg); color:var(--bg) }
details.qa .am{ background:var(--tint); color:var(--accent) }
details.qa summary p{ font-weight:700; font-size:calc(14.5px * var(--fs)); line-height:1.6 }
details.qa .ans{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; padding:0 14px 14px }
details.qa .ans p{ font-size:calc(13.5px * var(--fs)); line-height:1.8; color:var(--fg2) }

/* ZOOのこと */
.rep{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; align-items:center }
.rep img{ width:112px; aspect-ratio:1/1; object-fit:cover; object-position:52% 30%; border-radius:50% }
.rep p{ font-size:calc(13px * var(--fs)); color:var(--fg2) }
.rep p b{ display:block; font-size:calc(17px * var(--fs)); color:var(--fg) }
.prom{ display:grid; gap:8px }
.prom .hrow{ background:var(--card); border-radius:10px; padding:10px 12px }
.prom .ic{ width:38px; height:38px }
.prom .ic svg.i{ width:20px; height:20px }
.prom b{ font-size:calc(14px * var(--fs)) }
.prom span{ font-size:calc(12.5px * var(--fs)); color:var(--fg2) }
.stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px }
.stats div{ background:var(--card); border-radius:10px; padding:12px 4px; text-align:center; display:grid; gap:2px; align-content:start }
.stats b{ font-size:calc(20px * var(--fs)); font-variant-numeric:tabular-nums; line-height:1.3 }
.stats b small{ font-size:calc(11px * var(--fs)) }
.stats span{ font-size:calc(11px * var(--fs)); color:var(--fg2); line-height:1.45 }
dl.co{ margin:0 }
dl.co div{ display:grid; grid-template-columns:5em minmax(0,1fr); gap:10px; padding:8px 0; border-top:1px solid var(--line) }
dl.co div:first-child{ border-top:0 }
dl.co dt{ font-size:calc(12.5px * var(--fs)); color:var(--fg3); font-weight:700 }
dl.co dd{ margin:0; font-size:calc(13.5px * var(--fs)); line-height:1.7 }

/* 相談 */
.inv{ background:var(--fg); color:var(--bg) }
.inv .pill{ background:var(--bg); color:var(--fg) }
.inv .sub{ color:var(--bg); opacity:.85 }
.inv .btn{ background:var(--bg); color:var(--fg); border-color:var(--bg) }
.inv .tel, .inv .tel b{ color:var(--bg) }
.foot{ padding:24px 22px 36px; font-size:calc(11px * var(--fs)); color:var(--fg3); display:grid; gap:6px }

/* スマホの画面下の相談の帯 */
.bar{ position:sticky; bottom:0; z-index:5; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--bg); box-shadow:0 -1px 0 var(--line) }
.bar a{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; padding:12px 6px; font-size:calc(14px * var(--fs)); font-weight:700; border-radius:10px }
.bar .b1{ background:var(--fg); color:var(--bg) }
.bar .b2{ border:2px solid var(--fg) }
.bar svg.i{ width:18px; height:18px }

/* PCの左右 */
.side .logo{ font-size:calc(18px * var(--fs)) }
.toc{ list-style:none; margin:0; padding:0; display:grid; gap:2px; text-align:right }
.toc a{ font-size:calc(13px * var(--fs)); text-decoration:none; color:var(--fg3); padding:3px 0; display:inline-flex; align-items:center; gap:8px; transition:color .2s }
.toc a::after{ content:""; width:0; height:2px; background:var(--accent); transition:width .2s }
.toc a:hover{ color:var(--fg) }
.toc a.on{ color:var(--accent); font-weight:700 }
.toc a.on::after{ width:16px }
.panel-r{ background:var(--bg); border-radius:16px; padding:20px; display:grid; gap:12px; width:min(100%, 280px) }
.panel-r h2{ font-size:calc(18px * var(--fs)) }

/* スマホの表示の切り替え：画面の右上に重ねて固定する丸いボタン（PCの広い表示では左の目次の上のボタンを使う） */
.fab-wrap{ position:sticky; top:calc(var(--stick-top, 12px) + env(safe-area-inset-top,0px)); height:0; z-index:40 }
.fab{ position:absolute; right:12px; top:0; width:54px; height:54px; border-radius:50%; border:2px solid var(--bg); background:var(--fg); color:var(--bg);
  display:grid; place-items:center; align-content:center; gap:2px; padding:0; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.28); font:inherit }
.fab svg.i{ width:20px; height:20px }
.fab span{ font-size:10px; font-weight:700; line-height:1 }
.top{ padding-right:80px }
@media (min-width:1000px){
  .stage .fab-wrap{ display:none }
  .stage .top{ padding-right:18px }
}

/* 表示の切り替え */
.a11y-btn{ appearance:none; font:inherit; font-size:calc(12px * var(--fs)); font-weight:700; display:inline-flex; align-items:center; gap:6px; color:var(--fg); background:var(--card); border:2px solid var(--fg); border-radius:8px; padding:6px 10px; cursor:pointer }
.a11y-btn svg.i{ width:18px; height:18px }
.top .acts{ display:flex; gap:8px; align-items:center }
.sheet{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.45) }
.sheet[hidden]{ display:none }
.sheet .box{ background:var(--bg); color:var(--fg); width:min(100%, 380px); max-height:calc(100% - 32px); overflow:auto; border-radius:16px; padding:20px; display:grid; gap:18px; box-shadow:0 10px 40px rgba(0,0,0,.3) }
.sheet h2{ font-size:calc(18px * var(--fs)) }
.opt{ display:grid; gap:6px }
.opt .ol{ font-size:calc(14px * var(--fs)); font-weight:700 }
.opt .od{ font-size:calc(12px * var(--fs)); color:var(--fg2); line-height:1.6 }
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-top:2px }
.seg button{ appearance:none; font:inherit; font-size:calc(14px * var(--fs)); font-weight:700; padding:10px 6px; border-radius:8px; border:2px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer }
.seg button[aria-pressed="true"]{ border-color:var(--fg); background:var(--fg); color:var(--bg) }
.sheet .foot2{ display:flex; gap:8px; justify-content:space-between; align-items:center }
.notice{ display:none; background:var(--tint); color:var(--fg); padding:10px 18px; font-size:calc(13px * var(--fs)); line-height:1.6; gap:10px; align-items:center; justify-content:space-between }
:root[data-zoo-simple="on"] .notice{ display:flex }
.notice button{ appearance:none; font:inherit; font-weight:700; background:none; border:0; text-decoration:underline; text-underline-offset:4px; color:inherit; cursor:pointer; white-space:nowrap }
/* 簡易版：大事なところ（何の保守か・料金・やること・範囲・相談）だけ */
:root[data-zoo-simple="on"] .detail{ display:none !important }
:root[data-zoo-simple="on"] .tel b{ font-size:calc(24px * var(--fs)) }
/* 文字を大きくしたときは、横に並べていたものを縦に */
:root[data-zoo-fs="l"] .facts, :root[data-zoo-fs="xl"] .facts,
:root[data-zoo-fs="l"] .stats, :root[data-zoo-fs="xl"] .stats,
:root[data-zoo-fs="l"] .case, :root[data-zoo-fs="xl"] .case,
:root[data-zoo-fs="xl"] .tiles, :root[data-zoo-fs="xl"] .own .three{ grid-template-columns:1fr }
:root[data-zoo-fs="l"] .flow, :root[data-zoo-fs="xl"] .flow{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:16px }
:root[data-zoo-fs="l"] .flow::before, :root[data-zoo-fs="xl"] .flow::before{ display:none }
.cmp table{ min-width:calc(330px * var(--fs)) }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important } .paper{ transform:none } }

/* ---- ここから本番で足したもの ---- */

/* ログイン中の管理バーの下に丸いボタンを出す */
body.admin-bar .fab-wrap{ top:calc(58px + env(safe-area-inset-top,0px)) }
@media (min-width:783px){ body.admin-bar .fab-wrap{ top:44px } body.admin-bar .side{ top:32px; height:calc(100vh - 32px) } }

/* 電話番号はリンク（押すと電話をかけられる端末で） */
.tel a{ color:inherit; text-decoration:none }

/* まとめページの業務の一覧・関連するページ */
.card.link{ text-decoration:none; color:inherit; justify-content:space-between }
.card.link > div{ display:grid; gap:2px; flex:1 }
.card.link b{ font-size:calc(15px * var(--fs)) }
.card.link svg.i:last-child{ color:var(--fg3); width:20px; height:20px }
.card.link:hover{ border-color:var(--fg) }
.related{ padding-block:28px; gap:10px }
.label-s{ font-size:calc(12px * var(--fs)); font-weight:700; color:var(--fg3) }

/* 決めごとの図：番号つきの手順と「今やらないこと」 */
ol.nlist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:n }
ol.nlist li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; counter-increment:n; font-size:calc(14px * var(--fs)); line-height:1.7; background:var(--panel); border-radius:10px; padding:10px 12px }
ol.nlist li::before{ content:counter(n); width:24px; height:24px; border-radius:50%; background:var(--fg); color:var(--bg); display:grid; place-items:center; font-size:calc(12px * var(--fs)); font-weight:700; margin-top:2px }
.notnow{ font-size:calc(13px * var(--fs)); color:var(--fg2); line-height:1.7; border-left:3px solid var(--accent); padding:4px 0 4px 10px }
.notnow b{ display:block; color:var(--fg); font-size:calc(12px * var(--fs)) }

/* 問い合わせフォーム（Contact Form 7） */
.zal-form{ background:var(--bg); color:var(--fg); border-radius:14px; padding:18px 16px }
.zal-form .wpcf7 p{ margin:0 0 14px }
.zal-form label{ display:block; font-size:calc(13px * var(--fs)); font-weight:700; line-height:1.6 }
.zal-form input[type="text"], .zal-form input[type="email"], .zal-form input[type="tel"], .zal-form select, .zal-form textarea{
  width:100%; margin-top:6px; font:inherit; font-size:16px; font-weight:400; color:var(--fg); background:var(--card); border:2px solid var(--line); border-radius:8px; padding:12px }
.zal-form textarea{ min-height:150px; resize:vertical }
.zal-form input:focus, .zal-form select:focus, .zal-form textarea:focus{ outline:none; border-color:var(--fg) }
.zal-form .wpcf7-list-item{ margin:0 }
.zal-form .wpcf7-acceptance label{ display:flex; gap:8px; align-items:center; font-weight:400 }
.zal-form .wpcf7-acceptance input{ width:20px; height:20px }
.zal-form .wpcf7-submit{ width:100%; font:inherit; font-size:calc(16px * var(--fs)); font-weight:700; letter-spacing:.06em; padding:16px; border-radius:10px; border:2px solid var(--fg); background:var(--fg); color:var(--bg); cursor:pointer }
.zal-form .wpcf7-submit:disabled{ opacity:.5 }
.zal-form .wpcf7-not-valid-tip{ font-size:calc(12px * var(--fs)); color:var(--accent); font-weight:700 }
.zal-form .wpcf7-response-output{ margin:10px 0 0 !important; font-size:calc(13px * var(--fs)); border-radius:8px }
.zal-form .wpcf7-spinner{ display:block; margin:8px auto 0 }
.zal-form a{ color:inherit }

/* 決めごとの札が長いときは、名前を次の行へ */
.feat .no{ flex-wrap:wrap; row-gap:4px }

/* 実例は縦に並べる（3列だと文が細切れになる） */
.case{ grid-template-columns:1fr; gap:6px }
.case .st{ grid-template-columns:76px minmax(0,1fr); display:grid; align-items:center; gap:12px; padding:12px 14px }
.case .st .k{ font-size:calc(12px * var(--fs)) }
.case .st p{ font-size:calc(14px * var(--fs)) }

/* 代表の写真は正円 */
.rep img{ height:112px; width:112px }

/* 文字を大きくしたときなど、幅に収まらない見出しは文節の切れ目で折り返す（対応するブラウザだけ。ほかは普通に折り返す） */
h1, h2, h3, .lead, .worry p, .tile b, .tile span, .risk p, .qtext, .notice span, .cmp th, .cmp td, .fact dd, .ritem h4, details.qa summary p, .goal, .price .ticks span, .xplan .xd{ word-break:auto-phrase }

/* PCの左の列：札も右寄せ */
.side.l .pill{ align-self:flex-end }

/* ---- 2026-10-14 修正（まとめページ・範囲・会社概要・小さな注記） ---- */

/* 目立たせない注記 */
.fine{ font-size:calc(11.5px * var(--fs)); line-height:1.7; color:var(--fg3); margin:0 }

/* 最初の画面：まとめページの「困りごとから探す」 */
.jump{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:calc(13px * var(--fs)); font-weight:700; color:var(--fg2); text-decoration:none; padding:4px 0 }
.jump svg.i{ width:16px; height:16px }

/* ZOOの思い */
.msg p{ font-size:calc(15px * var(--fs)); line-height:1.95 }
.quote{ margin:4px 0 0; padding:16px 18px; border-left:4px solid var(--accent); background:var(--tint); border-radius:0 10px 10px 0 }
.quote p{ font-size:calc(16px * var(--fs)); font-weight:700; line-height:1.7 }

/* 3つの約束と理由 */
.pcard{ display:grid; gap:10px }
.pcard h3{ font-size:calc(16px * var(--fs)) }
.pcard .pp{ font-size:calc(14px * var(--fs)); font-weight:500; line-height:1.6 }
.pcard .why{ font-size:calc(13.5px * var(--fs)); line-height:1.85; color:var(--fg2); background:var(--panel); border-radius:8px; padding:10px 12px; margin:0 }
.pcard .why b{ display:block; font-size:calc(11.5px * var(--fs)); color:var(--accent); margin-bottom:2px }

/* 困りごと → お引き受けすること */
.wcard{ display:grid; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit }
.wcard:hover{ border-color:var(--fg) }
.wcard .wq{ display:block; background:var(--panel); padding:10px 14px; font-size:calc(13.5px * var(--fs)); line-height:1.6; font-weight:500 }
.wcard .wl{ display:inline-block; background:var(--fg); color:var(--bg); font-size:calc(10.5px * var(--fs)); font-weight:700; padding:1px 8px; border-radius:999px; margin-right:8px; vertical-align:2px }
.wcard .wa{ display:flex; align-items:center; gap:12px; padding:12px 14px }
.wcard .wa .ic{ width:40px; height:40px }
.wcard .wt{ display:grid; gap:2px; flex:1; min-width:0 }
.wcard .wt b{ font-size:calc(15px * var(--fs)) }
.wcard .wt span{ font-size:calc(12.5px * var(--fs)); color:var(--fg2); line-height:1.6 }
.wcard > .wa > svg.i:last-child{ color:var(--fg3); width:20px; height:20px }

/* 会社概要（常に表示） */
.co-card{ display:grid; gap:8px }
.co-card h3{ font-size:calc(14px * var(--fs)) }

/* 関東の地図 */
figure.area{ margin:0; display:grid; gap:6px; padding:12px }
figure.area svg{ width:100%; height:auto; display:block }

/* 関東の地図の色（ページの色の決まりに合わせて、暗い表示・見分けやすい色でも変わる） */
.map .m-sea{ fill:var(--card) }
.map .m-pref{ fill:var(--panel); stroke:var(--fg3); stroke-width:.6; stroke-linejoin:round }
.map .m-kana{ fill:var(--tint); stroke:var(--accent); stroke-width:1.3; stroke-linejoin:round }
.map .m-yoko{ fill:var(--accent); stroke:var(--accent); stroke-width:.6; stroke-linejoin:round }
.map .m-lab{ font-family:var(--sans); font-size:11px; font-weight:700; fill:var(--fg3) }
.map .m-lab-k{ font-size:13px; fill:var(--accent) }
.map .m-lab-y{ font-size:14px; fill:var(--fg) }
.map .m-sub{ font-size:10px; font-weight:500; fill:var(--fg2) }
.map .m-lead{ fill:none; stroke:var(--fg); stroke-width:1 }
.map .m-pin{ fill:var(--fg) }
.map .m-pin-dot{ fill:var(--bg) }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:calc(12px * var(--fs)); color:var(--fg2) }
.legend span{ display:inline-flex; align-items:center; gap:6px }
.legend span::before{ content:""; width:12px; height:12px; border-radius:3px; flex:none }
.legend .l-y::before{ background:var(--accent) }
.legend .l-k::before{ background:var(--tint); box-shadow:inset 0 0 0 1.5px var(--accent) }
.legend .l-o::before{ background:var(--panel); box-shadow:inset 0 0 0 1px var(--fg3) }

/* 決めごと・進め方の一つひとつを、区切られたかたまりに見せる（2026-10-14 CEO：すべてつながって見える） */
#s-rule{ gap:24px }
.feat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 16px }
.blk.alt .feat{ background:var(--card) }

/* ページの一番下の出典 */
.foot .credit{ font-size:calc(10px * var(--fs)); opacity:.85 }