/* 外枠：暗い台の中央に画面、左に開閉できる目次。
   操作は上の帯に 5 つだけ置く（目次・前後・改善後と比較・番号・端末の幅）。
   動きの基準は参考ビューアの実測値：寸法の補間 350ms・cubic-bezier(.16,1,.3,1)、色の変化 .25s ease。 */
:root{
  --stage:#26262a;
  --stage-2:#1c1c1f;
  --pop:#2e2e33;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --hover:rgba(255,255,255,.06);
  --text:#f2f2f4;
  --accent:#00cbb5;
  --accent-bg:rgba(0,203,181,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --side:300px;
  --bar:56px;
  --float:0 28px 70px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--stage);color:var(--text);
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ms{font-family:"Material Symbols Outlined";font-weight:300;font-style:normal;font-size:22px;line-height:1;display:inline-block;
  letter-spacing:normal;text-transform:none;white-space:nowrap;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;user-select:none}
.lato{font-family:"Lato",sans-serif}

/* ---------- 上の帯 ---------- */
.bar{
  flex:none;position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  height:var(--bar);padding:0 12px;background:var(--stage-2);
}
.bar-l{display:flex;align-items:center;gap:8px;min-width:0}
.bar h1{margin:0;font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.icon-btn{appearance:none;border:0;background:transparent;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;flex:none;
  transition:background-color .25s ease,transform .18s var(--spring),opacity .25s ease}
.icon-btn:hover{background:var(--hover)}
.icon-btn:active{transform:scale(.92);transition-duration:.08s}
.icon-btn:disabled{opacity:.25;cursor:default;background:transparent;transform:none}

/* いまのページ名と前後 */
.pager{display:flex;align-items:center;gap:4px}
.here{display:flex;align-items:baseline;gap:10px;min-width:0;max-width:min(420px,34vw);padding:0 6px}
.here-t{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.here-n{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap;font-variant-numeric:tabular-nums}

.tools{justify-self:end;display:flex;align-items:center;gap:12px}
/* 2 択の切り替え：選んだ側に下地がすべって移る */
.seg{position:relative;display:flex;padding:3px;border-radius:10px;background:rgba(255,255,255,.08)}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:7px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .35s var(--ease),width .35s var(--ease),opacity .2s ease}
.seg button{
  appearance:none;border:0;background:transparent;position:relative;z-index:1;
  height:30px;padding:0 16px;border-radius:7px;font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text);
  transition:color .25s ease,opacity .25s ease;
}
.seg button[aria-pressed="true"]{color:#141416}
.seg button:disabled{opacity:.3;cursor:default}
.toggle{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:8px;font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;cursor:pointer;user-select:none;white-space:nowrap;transition:background-color .25s ease,opacity .25s ease}
.toggle:hover{background:var(--hover)}
.toggle.is-off{opacity:.3;pointer-events:none}
.toggle input{appearance:none;width:30px;height:18px;border-radius:999px;background:rgba(255,255,255,.22);position:relative;cursor:pointer;margin:0;transition:background-color .25s ease}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .35s var(--spring)}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(12px)}

/* 端末の幅のメニュー */
.menu{position:relative}
.menu-btn{appearance:none;border:0;background:transparent;height:36px;padding:0 6px 0 8px;border-radius:8px;display:flex;align-items:center;gap:4px;
  font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;transition:background-color .25s ease,opacity .25s ease}
.menu-btn .ms{font-size:18px}
.menu-btn .caret{transition:transform .3s var(--ease)}
.menu-btn:hover,.menu.is-open .menu-btn{background:var(--hover)}
.menu.is-open .caret{transform:rotate(180deg)}
.menu-btn:disabled{opacity:.25;cursor:default;background:transparent}
.pop{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:12px;background:var(--pop);
  box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity .2s ease,transform .3s var(--ease)}
.menu.is-open .pop{opacity:1;transform:none;pointer-events:auto}
.pop button{appearance:none;border:0;background:transparent;width:100%;height:40px;padding:0 10px;border-radius:8px;display:grid;grid-template-columns:1fr auto 20px;align-items:center;gap:10px;text-align:left;font-size:13px;transition:background-color .2s ease}
.pop button:hover{background:var(--hover)}
.pop .dim{font-size:12px;font-weight:700}
.pop .ck{font-size:18px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .3s var(--spring)}
.pop button[aria-checked="true"] .ck{opacity:1;transform:none}

/* アイコンの説明（少し待ってから出す） */
.tip{position:fixed;z-index:50;left:0;top:0;padding:5px 9px;border-radius:6px;background:#f2f2f4;color:#141416;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(-2px);transition:opacity .15s ease,transform .2s var(--ease)}
.tip.is-on{opacity:1;transform:none}

/* ---------- 本体の割り付け（目次は開閉式） ---------- */
.layout{flex:1;min-height:0;display:grid;grid-template-columns:var(--side) 1fr;transition:grid-template-columns .35s var(--ease)}
body.side-closed .layout{grid-template-columns:0 1fr}
.scrim{display:none}

/* ---------- 左：目次 ---------- */
.index{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;background:var(--stage-2);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.index-in{width:var(--side);padding:12px 10px 40px;transition:opacity .25s ease,transform .35s var(--ease)}
body.side-closed .index-in{opacity:0;transform:translateX(-16px)}

.flow{padding:14px 0 6px}
.flow+.flow{margin-top:6px}
.flow-head{display:flex;align-items:baseline;gap:8px;padding:0 10px 6px}
.flow-head .no{font-family:"Lato",sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--accent)}
.flow-head .name{font-weight:700;font-size:12px;letter-spacing:.04em}
.steps{list-style:none;margin:0;padding:0}
.step-btn{
  appearance:none;border:0;background:transparent;width:100%;text-align:left;
  display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;
  min-height:40px;padding:6px 10px;border-radius:8px;transition:background-color .25s ease;
}
.step-btn:hover{background:var(--hover)}
.step-dot{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:"Lato",sans-serif;font-weight:700;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.1);transition:background-color .3s ease,color .3s ease,transform .35s var(--spring);
}
.step-dot .ms{font-size:14px}
.step-title{font-size:13px;line-height:1.5}
.step[aria-current="step"] .step-btn{background:rgba(255,255,255,.08)}
.step[aria-current="step"] .step-title{font-weight:700}
.step[aria-current="step"] .step-dot{background:var(--accent);color:#0e0e0e}
.step-btn:active .step-dot{transform:scale(.88)}

/* 選んでいるページの要点。見出しだけを並べ、押した要点だけ説明を開く */
.points{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.step[aria-current="step"] .points{grid-template-rows:1fr}
.points-inner{overflow:hidden}
.points-list{list-style:none;margin:2px 0 8px 32px;padding:0;display:grid;gap:1px}
.points-list li{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .35s var(--ease)}
.step[aria-current="step"] .points-list li{opacity:1;transform:none}
.step[aria-current="step"] .points-list li:nth-child(2){transition-delay:.04s}
.step[aria-current="step"] .points-list li:nth-child(3){transition-delay:.08s}
.step[aria-current="step"] .points-list li:nth-child(n+4){transition-delay:.12s}
.pt{
  appearance:none;border:0;background:transparent;width:100%;text-align:left;
  display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;padding:7px 8px;border-radius:8px;
  transition:background-color .25s ease;
}
.pt:hover{background:var(--hover)}
.pt.is-on{background:var(--accent-bg)}
.pt-n{
  width:18px;height:18px;border-radius:50%;background:var(--accent);color:#0e0e0e;margin-top:1px;
  display:grid;place-items:center;font-family:"Lato",sans-serif;font-weight:700;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;
}
.pt-n.is-sec{background:rgba(255,255,255,.12);color:var(--text)}
.pt.is-on .pt-n.is-sec{background:var(--accent);color:#0e0e0e}
.pt-body b{display:block;font-size:12px;line-height:1.6;font-weight:500}
.pt.is-on .pt-body b{font-weight:700}
.pt-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.pt.is-on .pt-desc{grid-template-rows:1fr}
.pt-desc>span{overflow:hidden;font-size:12px;line-height:1.7}
.pt-desc>span>span{display:block;padding-top:4px}

/* ---------- 中央：画面 ---------- */
/* 台は参考ビューアと同じ #26262a の一色。画面は影で浮かせる */
.stage{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:hidden;background:var(--stage)}
.pair{display:flex;align-items:flex-start;gap:28px;transform-origin:center center;transition:transform .35s var(--ease)}
.pane{margin:0;display:flex;flex-direction:column;gap:12px}
.pane figcaption{display:flex;align-items:center;height:24px}
.tag{font-family:"Lato",sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.12)}
.tag-after{background:var(--accent);color:#0e0e0e}
.pair:not(.is-compare) .pane figcaption{display:none}

.device{
  position:relative;width:var(--w,390px);height:var(--h,844px);flex:none;
  border-radius:18px;overflow:hidden;background:var(--stage);
  box-shadow:var(--float);
  transition:width .35s var(--ease),height .35s var(--ease),box-shadow .35s ease;
}
/* 画面は 2 枚の iframe を重ね、読み込みが終わってから入れ替える */
.device .frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;opacity:0;pointer-events:none;will-change:transform,opacity}
.device .frame.is-active{opacity:1;pointer-events:auto}
.before .device{background:#fff}
.before .device .scroll{width:100%;height:100%;overflow-y:auto;background:#fff;scrollbar-width:none}
.before .device img{display:block;width:100%;height:auto;transition:opacity .3s ease}
.pane-note{margin:0;max-width:var(--w,390px);font-size:13px;line-height:1.75}
.pair-arrow{align-self:center;color:var(--accent);margin-top:36px}
.pair-arrow .ms{font-size:32px}
.pair.is-compare .before{animation:slide-in .5s var(--ease)}
.pair.is-compare .pair-arrow{animation:arrow-in .6s var(--ease) .15s both}
@keyframes slide-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes arrow-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* 比較の下に出す数字：1 行で読めるように */
.result{display:flex;align-items:center;gap:14px;margin-top:20px;padding:12px 22px;border-radius:999px;background:var(--stage-2);animation:rise .45s var(--ease) both}
.r-l{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.r-b{font-size:13px;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}
.r-arrow{font-size:20px;color:var(--accent)}
.r-a{font-size:16px;color:var(--accent)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 中央：資料のページ ---------- */
.doc{position:absolute;inset:24px 28px;border-radius:18px;background:#fff;color:#202020;overflow:hidden;box-shadow:var(--float);display:flex;flex-direction:column}
.doc-scroll{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;scrollbar-width:thin}
.doc-in{max-width:1040px;margin:0 auto;padding:56px 56px 96px}
.stage.is-doc .pair,.stage.is-doc .result{display:none!important}
.doc.is-enter{animation:doc-in .5s var(--ease)}
@keyframes doc-in{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}

/* ---------- 狭い画面：目次は左から出る引き出し ---------- */
@media (max-width:1100px){
  .here{max-width:24vw}
  .bar h1{display:none}
}
@media (max-width:900px){
  body{overflow:auto}
  .bar{position:sticky;top:0;grid-template-columns:auto 1fr;height:auto;padding:8px 10px;row-gap:8px}
  .pager{justify-self:end}
  .here{max-width:46vw}
  .tools{grid-column:1/-1;justify-self:stretch;justify-content:space-between}
  .menu,.toggle{display:none}
  .layout{display:block}
  .index{position:fixed;z-index:20;left:0;top:0;bottom:0;width:min(320px,86vw);transform:translateX(-100%);transition:transform .35s var(--ease);box-shadow:12px 0 40px rgba(0,0,0,.4)}
  .index-in{width:auto}
  body.side-open .index{transform:none}
  body.side-closed .index-in{opacity:1;transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.side-open .scrim{opacity:1;pointer-events:auto}
  .stage{padding:16px;overflow:visible;min-height:calc(100svh - 100px)}
  .pair{transform:none!important;flex-direction:column;align-items:center;width:100%;margin:0!important}
  .pane{width:100%;align-items:center}
  .device{width:min(100%,var(--w,390px));height:min(var(--h,844px),calc(100svh - 150px))}
  .pair-arrow{transform:rotate(90deg);margin:0}
  .result{flex-wrap:wrap;border-radius:14px;justify-content:center}
  .r-l{width:auto}
  .doc{position:relative;inset:auto;width:100%;min-height:calc(100svh - 132px)}
  .doc-in{padding:32px 20px 64px}
  .tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}