:root{
  --bg:#f7f7f7;
  --card:#ffffff;
  --line:#d9d9d9;
  --text:#222;
  --muted:#666;
  --accent:#2f5fa7;
  --sidebar:#efefef;
  --orange:#d59a3a;
  --pink:#ff6aa6;
  --link:#4b2ca0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.8;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline}
a.manual-link{font-weight:400}
.layout{display:grid;grid-template-columns:320px 1fr;min-height:100vh}
.sidebar{
  background:var(--sidebar);
  border-right:1px solid var(--line);
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  padding:0;
}
.sidebar-header{
  padding:18px 16px;
  font-size:1.15rem;
  font-weight:700;
  border-bottom:1px solid var(--line);
  background:#e4e4e4;
  margin:0;
}
.nav-list,.nav-children{margin:0;padding:0 0 8px 0;background:#f7f7f7;border-left:none;list-style:none}
.nav-list>li{margin:0;border-bottom:1px solid var(--line)}
.nav-list a,.nav-label{
  display:block;
  padding:14px 16px;
  text-decoration:none;
  color:#222;
  border-radius:0;
}
.nav-list a:hover{background:#f8f8f8}
.nav-list a.current{background:#ffffff;border-left:4px solid var(--accent);padding-left:12px;font-weight:700;color:var(--accent)}
.nav-parent{margin-top:0}
.nav-label{font-weight:700;color:#444;background:#f3f3f3;padding:14px 16px 8px}
.nav-children a{padding:10px 16px 10px 30px;font-size:.96rem}
.main{padding:32px 40px 56px;min-width:0}
.article{
  max-width:980px;
  margin:0;
  background:var(--card);
  border:1px solid var(--line);
  padding:34px 42px 48px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.page-title{
  font-size:2rem;
  line-height:1.35;
  margin:0 0 24px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.lead{font-size:1.06rem;margin:18px 0 20px}
h2{
  font-size:1.7rem;
  margin:42px 0 16px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
h3{
  font-size:1.24rem;
  margin:28px 0 12px;
  padding-bottom:6px;
  border-bottom:2px solid #b9d78a;
  display:inline-block;
}
p{margin:0 0 12px}
.figure{margin:16px 0 20px;max-width:760px}
.figure.hero{margin-top:6px}
.figure.align-left img{margin-left:0}
.figure.medium{max-width:820px}
.figure.narrow{max-width:520px}
.figure.small{max-width:360px}
.figure img,
.figure.single-figure img,
.single-figure img{
  width:auto;
  max-width:100%;
  height:auto;
}

.caption{font-size:.95rem;color:var(--muted);margin-top:6px}
.step-list,.inline-steps,.text-list{padding-left:1.4em}
.step-list li,.inline-steps li{margin:10px 0 14px}
.text-list li{margin:8px 0}
.dialogue{display:flex;gap:14px;align-items:flex-start;margin:20px 0}
.dialogue.right{flex-direction:row-reverse}
.avatar{width:62px;height:62px;flex:0 0 62px;margin-top:6px}
.bubble{position:relative;flex:1;background:#ffffff;border-radius:14px;padding:18px 20px}
.bubble.orange{border:2px solid var(--orange)}
.bubble.pink{border:2px solid var(--pink)}
.dialogue.left .bubble:before,
.dialogue.right .bubble:before{content:"";position:absolute;top:26px;width:0;height:0;border:10px solid transparent}
.dialogue.left .bubble:after,
.dialogue.right .bubble:after{content:"";position:absolute;top:28px;width:0;height:0;border:9px solid transparent}
.dialogue.left .bubble.orange:before{left:-20px;border-right-color:var(--orange)}
.dialogue.left .bubble.orange:after{left:-16px;border-right-color:#ffffff}
.dialogue.left .bubble.pink:before{left:-20px;border-right-color:var(--pink)}
.dialogue.left .bubble.pink:after{left:-16px;border-right-color:#ffffff}
.dialogue.right .bubble.orange:before{right:-20px;border-left-color:var(--orange)}
.dialogue.right .bubble.orange:after{right:-16px;border-left-color:#ffffff}
.dialogue.right .bubble.pink:before{right:-20px;border-left-color:var(--pink)}
.dialogue.right .bubble.pink:after{right:-16px;border-left-color:#ffffff}
.bubble p{margin:0 0 12px}
.bubble p:last-child{margin-bottom:0}
.arrow-down{font-size:1.5rem;line-height:1;margin:6px 0 10px}
.manual-card{display:block;border:1px solid #d8d8d8;background:#fafafa;padding:14px 16px;border-radius:6px;text-decoration:none;color:inherit;max-width:760px}
.manual-card:hover{background:#f3f3f3}
.manual-card__title{display:block;font-weight:700;margin-bottom:6px;color:#333}
.manual-card__desc{display:block;color:#666;font-size:.96rem}
.note{font-size:1rem;color:#333}
.numbered-line{font-size:1rem;margin:10px 0 8px}
.step-block{margin:0 0 28px}
.note-box{border:1px solid var(--line);background:#fafafa;padding:14px 16px;margin:16px 0 20px;color:#555}
.code-block{background:#f5f5f5;border:1px solid #ddd;border-radius:8px;padding:12px 14px;white-space:pre-wrap;font-family:Consolas,Menlo,monospace;line-height:1.7;margin:12px 0 18px}
.mini-heading{font-size:1.1rem;font-weight:700;margin:20px 0 10px}
.section-indent{margin-left:32px}
.card-wrap{margin-top:10px;margin-bottom:20px;max-width:760px}
.example-panel{margin:18px 0 28px}
.example-item{margin:0 0 22px}
.example-title{font-size:1.7rem;font-weight:700;line-height:1.4;margin:0 0 10px}
.table-scroll{margin:14px 0 18px;overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;background:#fff;margin:0 0 18px}
.compare-table:last-child{margin-bottom:0}
.compare-table thead th{background:#ededed;font-weight:700;text-align:left;padding:12px 12px;border:1px solid #cfcfcf;border-bottom:4px solid #333;color:#222}
.compare-table tbody th,.compare-table tbody td{background:#fff;border:1px solid #ddd;padding:10px 12px;vertical-align:top}
.compare-table tbody th{font-weight:400;text-align:left;width:148px}
.key-grid-table{min-width:740px}
.key-grid-table tbody td{padding:8px 10px;text-align:center;white-space:nowrap}
@media (max-width:900px){
  .layout{display:block}
  .sidebar{position:static;height:auto;width:auto}
  .main{padding:16px}
  .article{padding:24px 20px 32px}
  .page-title{font-size:1.8rem}
}