/* AMPL Motion — 動く資料の共通スタイル（AMPL 自前。1920×1080 の固定キャンバスを画面に合わせて縮める）
   色はここのトークンだけを使う。強調色 --amber は資料全体で1か所だけ */
:root{
  --main:#0B7DA3; --t1:#5AA7C2; --t2:#A3CFDE; --t3:#D5EAF1;
  --ink:#1F2629; --sub:#4F5D63; --note:#5F6E75; --rule:#D9DEE1; --panel:#F1F4F5;
  --g1:#5B6970; --g2:#9AA6AC; --g3:#E1E6E8; --amber:#B7791F; --white:#fff;
  --ez:cubic-bezier(.22,.68,.18,1);
  --ff:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0E1215;overflow:hidden}
body{font-family:var(--ff);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font-family:var(--ff)}
.num{font-variant-numeric:tabular-nums}

#am-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;background:var(--white);transform-origin:0 0;overflow:hidden}
.am-page{position:absolute;inset:0;background:var(--white);opacity:0;visibility:hidden;transition:opacity .4s}
.am-page.on{opacity:1;visibility:visible;z-index:2}

/* 版面：余白 上62・左右86。本体は .am-body（左86・上279・幅1748・高さ690）に絶対配置で置く */
.am-sec{position:absolute;left:86px;top:62px;font-size:28px;font-weight:700;color:var(--main);line-height:1}
.am-label{position:absolute;right:86px;top:68px;font-size:18px;color:var(--note)}
.am-head{position:absolute;left:86px;top:112px;margin:0;font-size:48px;font-weight:700;line-height:1.3;white-space:nowrap}
.am-title{position:absolute;left:86px;top:214px;font-size:24px;font-weight:700;line-height:1.3}
.am-body{position:absolute;left:86px;top:279px;width:1748px;height:690px}
.am-foot{position:absolute;left:86px;right:560px;bottom:24px;font-size:18px;color:var(--note);line-height:1.4}

/* 組み上がり：入った直後に --d の遅れで順に現れる */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ez),transform .7s var(--ez);transition-delay:var(--d,0ms)}
.fd{opacity:0;transition:opacity .6s var(--ez);transition-delay:var(--d,0ms)}
.gw{transform:scaleX(0);transform-origin:left center;transform-box:fill-box;transition:transform .9s var(--ez);transition-delay:var(--d,0ms)}
.gh{transform:scaleY(0);transform-origin:center bottom;transform-box:fill-box;transition:transform .9s var(--ez);transition-delay:var(--d,0ms)}
.built .rv,.built .fd{opacity:1;transform:none}
.built .gw,.built .gh{transform:none}
.am-static *{transition:none!important;animation:none!important}

/* よく使う部品 */
.am-panel{position:absolute;background:var(--panel);padding:34px 40px}
.am-k{font-size:20px;font-weight:700}
.am-big{font-size:96px;font-weight:700;line-height:1;color:var(--main);font-variant-numeric:tabular-nums}
.am-big small{font-size:34px;color:var(--ink);margin-left:6px}
.am-lead{font-size:22px;font-weight:700;line-height:1.5;margin-top:14px}
.am-note{font-size:18px;color:var(--note);line-height:1.6}
.am-rows{margin-top:22px;border-top:1px solid var(--rule)}
.am-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:20px}
.am-rows b{font-size:24px;white-space:nowrap;font-variant-numeric:tabular-nums}
.am-btn{background:var(--white);border:1.5px solid var(--main);color:var(--main);font-size:20px;font-weight:700;padding:10px 20px;cursor:pointer;transition:background .2s,color .2s}
.am-btn:hover,.am-btn.dh{background:var(--main);color:var(--white)}
.am-seg{position:absolute;display:flex;border:1.5px solid var(--main);background:var(--white)}
.am-seg button{border:0;border-left:1.5px solid var(--main);background:var(--white);color:var(--main);font-size:20px;font-weight:700;padding:10px 22px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.am-seg button:first-child{border-left:0}
.am-seg button[aria-pressed="true"]{background:var(--main);color:var(--white)}
.am-seg button:not([aria-pressed="true"]):hover,.am-seg button.dh:not([aria-pressed="true"]){background:var(--t3)}
.am-tap{cursor:pointer;transition:background .2s,box-shadow .2s}
.am-tap:hover,.am-tap.dh{box-shadow:inset 0 0 0 2px var(--main)}
.am-hit{fill:transparent;cursor:pointer;transition:fill .2s}
.am-hit:hover,.dh>.am-hit,.am-hit.dh{fill:var(--panel)}
input.am-range{-webkit-appearance:none;appearance:none;display:block;height:40px;margin:0;background:transparent;cursor:pointer}
input.am-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--main) var(--pct,0%),var(--rule) var(--pct,0%))}
input.am-range::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:var(--white);border:3px solid var(--main);margin-top:-14px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
input.am-range:focus{outline:none}
.t18{font-size:18px}.t20{font-size:20px}.t22{font-size:22px}.t24{font-size:24px}.b{font-weight:700}
.f-main{fill:var(--main)}.f-t1{fill:var(--t1)}.f-t2{fill:var(--t2)}.f-t3{fill:var(--t3)}.f-g1{fill:var(--g1)}.f-g2{fill:var(--g2)}.f-g3{fill:var(--g3)}.f-ink{fill:var(--ink)}.f-note{fill:var(--note)}.f-amber{fill:var(--amber)}.f-none{fill:none}
.s-main{stroke:var(--main)}.s-rule{stroke:var(--rule)}.s-note{stroke:var(--note)}.s-ink{stroke:var(--ink)}

/* 根拠パネル（右から出る） */
#am-scrim{position:absolute;inset:0;background:rgba(10,16,20,.36);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
#am-drawer{position:absolute;top:0;right:0;width:720px;height:1080px;background:var(--white);padding:52px 52px 40px;transform:translateX(100%);transition:transform .45s var(--ez),box-shadow .45s;z-index:21;overflow:hidden}
.am-open #am-scrim{opacity:1;pointer-events:auto}.am-open #am-drawer{transform:none;box-shadow:-12px 0 40px rgba(0,0,0,.12)}
#am-drawer .x{position:absolute;right:40px;top:40px;width:48px;height:48px;border:1px solid var(--rule);background:var(--white);font-size:28px;line-height:1;color:var(--sub);cursor:pointer}
#am-drawer .x:hover,#am-drawer .x.dh{border-color:var(--ink);color:var(--ink)}
#am-drawer .crumb{font-size:18px;font-weight:700;color:var(--main)}
#am-drawer h2{font-size:32px;line-height:1.45;margin:14px 60px 26px 0}
#am-drawer .tabs{border-bottom:2px solid var(--rule);display:flex;gap:30px}
#am-drawer .tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:0 0 12px;font-size:20px;font-weight:700;color:var(--note);cursor:pointer}
#am-drawer .tabs button.on{color:var(--ink);border-color:var(--main)}
#am-drawer .tb{margin-top:26px;font-size:20px;line-height:1.7}
#am-drawer table{width:100%;border-collapse:collapse;font-size:19px}
#am-drawer th{text-align:left;font-weight:700;color:var(--note);font-size:18px;padding:0 10px 10px 0;border-bottom:1px solid var(--rule)}
#am-drawer td{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
#am-drawer .src{position:absolute;left:52px;right:52px;bottom:40px;font-size:18px;color:var(--note);line-height:1.5;margin:0}

/* 吹き出し・知らせの輪 */
#am-tip{position:absolute;display:none;z-index:30;background:var(--white);box-shadow:0 6px 20px rgba(0,0,0,.16);padding:12px 16px;font-size:18px;line-height:1.55;pointer-events:none;max-width:460px}
#am-tip .v{font-weight:700;font-size:20px}#am-tip .s{color:var(--note)}
.am-ring{position:absolute;z-index:15;border:3px solid var(--main);border-radius:12px;pointer-events:none;animation:am-ring 1.3s var(--ez) 2 forwards;opacity:0}
@keyframes am-ring{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}

/* ナビ */
#am-nav{position:absolute;right:86px;bottom:18px;display:flex;align-items:center;gap:10px;z-index:12}
#am-nav button{height:36px;min-width:36px;padding:0 12px;border:1px solid var(--rule);background:var(--white);color:var(--sub);font-size:18px;cursor:pointer}
#am-nav button:hover,#am-nav button.dh{border-color:var(--ink);color:var(--ink)}
#am-nav .pno{font-size:18px;color:var(--note);min-width:70px;text-align:center}

/* 一覧（O） */
#am-ov{position:absolute;inset:0;background:var(--panel);opacity:0;visibility:hidden;transition:opacity .35s;z-index:1}
.am-ovon #am-ov{opacity:1;visibility:visible}
#am-ov .ot{position:absolute;left:86px;top:52px;font-size:28px;font-weight:700;color:var(--main)}
#am-ov .cap{position:absolute;font-size:18px;line-height:1.5;font-weight:700}
#am-ov .cap span{display:block;color:var(--main)}
.am-ovon .am-page{visibility:visible;opacity:1;transform-origin:0 0;transition:transform .55s var(--ez);cursor:pointer;box-shadow:0 0 0 1px var(--rule),0 12px 28px rgba(0,0,0,.08);z-index:2}
.am-ovon .am-page *{pointer-events:none}
.am-ovon .am-page:hover{box-shadow:0 0 0 3px var(--main)}

/* 自動デモのカーソル */
#am-cur{position:absolute;left:960px;top:540px;z-index:40;display:none;pointer-events:none;transition:left .7s var(--ez),top .7s var(--ez);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
#am-cur.on{display:block}
#am-cur .clk{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:3px solid var(--main);opacity:0}
#am-cur.c .clk{animation:am-clk .5s ease-out}
@keyframes am-clk{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}

/* 印刷・PDF：全ページを組み上がった姿で1枚ずつ */
@page{size:1920px 1080px;margin:0}
@media print{
  html,body{height:auto;overflow:visible;background:var(--white)}
  #am-stage{position:static;transform:none!important;height:auto;overflow:visible}
  .am-page{position:relative!important;width:1920px;height:1080px;opacity:1!important;visibility:visible!important;transform:none!important;break-after:page}
  .rv,.fd{opacity:1!important;transform:none!important}.gw,.gh{transform:none!important}
  *{transition:none!important;animation:none!important}
  #am-nav,#am-tip,#am-scrim,#am-drawer,#am-cur,#am-ov,.am-ring{display:none!important}
}