:root{
  --bg:#f7f7f7;
  --card:#ffffff;
  --line:#d9d9d9;
  --text:#222;
  --muted:#666;
  --accent:#2f5fa7;
  --sidebar:#efefef;
  --orange:#ff8a34;
  --green:#33c97b;
  --link:#4b2ca0;
}
*{box-sizing:border-box}
body{
  margin:0;
  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}
.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{margin:0;padding:0 0 8px 0;background:#f7f7f7;border-left:none}
.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;
}
.figure{margin:16px 0 20px}
.figure.hero{margin-top:6px}
.figure.align-left img{margin-left:0}
.caption{font-size:.95rem;color:var(--muted);margin-top:6px}
.step-list{padding-left:1.4em}
.step-list li{margin:10px 0 14px}
.dialogue{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin:20px 0;
}
.dialogue.right{flex-direction:row-reverse}
.avatar{width: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.green{border:2px solid var(--green)}
.dialogue.left .bubble:before,
.dialogue.right .bubble:before{
  content:"";
  position:absolute;
  top:26px;
  width:0;height:0;
  border:10px solid transparent;
}
.dialogue.left .bubble.orange:before{left:-20px;border-right-color:var(--orange)}
.dialogue.left .bubble.orange:after,
.dialogue.left .bubble.green:after,
.dialogue.right .bubble.orange:after,
.dialogue.right .bubble.green:after{
  content:"";position:absolute;top:28px;width:0;height:0;border:9px solid transparent;
}
.dialogue.left .bubble.orange:after{left:-16px;border-right-color:#ffffff}
.dialogue.left .bubble.green:before{left:-20px;border-right-color:var(--green)}
.dialogue.left .bubble.green: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.green:before{right:-20px;border-left-color:var(--green)}
.dialogue.right .bubble.green: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;
}
.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}
.single-figure img{max-width:760px}
@media (max-width:900px){
  .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;
}
  .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);
}
}
.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}
.text-list{padding-left:1.4em}
.text-list li{margin:8px 0}
.inline-steps{padding-left:1.4em}
.inline-steps li{margin:12px 0 18px}
.figure.small img{max-width:520px}
.figure.narrow img{max-width:360px}

.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}