:root{
  --ink:#1b2430;
  --ink-soft:#4a5766;
  --line:#e2e7ee;
  --bg:#f6f8fb;
  --card:#ffffff;
  --brand:#1667c8;
  --brand-soft:#eaf2fd;
  --warn:#b4520d;
  --warn-bg:#fff6ec;
  --warn-line:#f0cfa8;
  --ok:#1f7a4d;
  --radius:14px;
  --shadow:0 1px 2px rgba(27,36,48,.05), 0 8px 24px rgba(27,36,48,.06);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:17px; line-height:1.9;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; display:block}

/* ---------- ヘッダー ---------- */
.top{
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.top-in{
  max-width:820px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.top-home{
  font-size:14px; color:var(--brand); text-decoration:none; font-weight:700;
  white-space:nowrap;
}
.top-home:hover{text-decoration:underline}
.top-now{font-size:14px; color:var(--ink-soft)}
.top-prog{
  margin-left:auto; font-size:13px; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:3px 12px; white-space:nowrap;
}
.top-prog b{color:var(--brand); font-size:15px}

/* ---------- 本体 ---------- */
main{max-width:820px; margin:0 auto; padding:28px 20px 90px}
h1{
  font-size:29px; line-height:1.45; margin:.4em 0 .3em; letter-spacing:.01em;
}
.lead{color:var(--ink-soft); margin:0 0 26px}
.meta{
  display:flex; gap:10px; flex-wrap:wrap; margin:0 0 30px; padding:0; list-style:none;
}
.meta li{
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:5px 15px; font-size:14px; color:var(--ink-soft);
}
.meta li b{color:var(--ink)}

h2{
  font-size:22px; line-height:1.5; margin:46px 0 16px;
  padding-bottom:10px; border-bottom:2px solid var(--line);
}
h3{font-size:18px; margin:30px 0 10px}
p{margin:0 0 1.1em}
a{color:var(--brand)}

/* ---------- カード（用意するもの等） ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:0 0 28px; box-shadow:var(--shadow);
}
.card h2, .card h3{margin-top:0}
.card ul{margin:0; padding-left:1.3em}
.card li{margin:.35em 0}

/* ---------- 手順 ---------- */
.steps{list-style:none; margin:0; padding:0; counter-reset:st}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin:0 0 20px; box-shadow:var(--shadow); overflow:hidden;
}
.step-head{
  display:flex; gap:14px; align-items:flex-start;
  padding:20px 22px; cursor:pointer; user-select:none;
}
.step-head:hover{background:#fbfcfe}
.step-check{
  flex:none; width:28px; height:28px; margin-top:3px;
  border:2px solid #c6cfdb; border-radius:8px; background:#fff;
  display:grid; place-items:center; transition:.15s;
}
.step-check svg{width:16px; height:16px; opacity:0; transform:scale(.5); transition:.15s}
.step.done .step-check{background:var(--ok); border-color:var(--ok)}
.step.done .step-check svg{opacity:1; transform:scale(1)}
.step-title{
  font-size:19px; font-weight:700; line-height:1.55; margin:0;
}
.step-title .n{
  color:var(--brand); font-weight:800; margin-right:.5em;
}
.step.done .step-title{color:#8a94a3; text-decoration:line-through; text-decoration-thickness:1px}
.step-body{padding:0 22px 22px; border-top:1px solid var(--line); padding-top:18px}
.step-body > :last-child{margin-bottom:0}

/* ---------- 入力対応表 ---------- */
.tbl{width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:16px}
.tbl th, .tbl td{border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top}
.tbl th{background:var(--brand-soft); font-weight:700; white-space:nowrap}
.tbl td b{color:var(--brand)}
.tbl-wrap{overflow-x:auto; margin:0 0 1.2em}

/* ---------- 画像 ---------- */
figure{margin:18px 0; }
figure img{
  border:1px solid var(--line); border-radius:10px; width:100%;
  box-shadow:0 2px 10px rgba(27,36,48,.07);
}
figcaption{font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.7}

/* ---------- 止まったら ---------- */
details.stuck{
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:10px; margin:16px 0 0; padding:0;
}
details.stuck > summary{
  cursor:pointer; padding:12px 16px; font-weight:700; color:var(--warn);
  font-size:16px; list-style:none;
}
details.stuck > summary::-webkit-details-marker{display:none}
details.stuck > summary::before{content:"▸ "; font-size:14px}
details.stuck[open] > summary::before{content:"▾ "}
details.stuck > summary:hover{text-decoration:underline}
.stuck-body{padding:0 16px 14px; font-size:16px}
.stuck-body > :last-child{margin-bottom:0}

/* ---------- 注意ブロック ---------- */
.must{
  background:#fff4f4; border:1px solid #f3c9c9; border-left:5px solid #cf3a3a;
  border-radius:10px; padding:20px 22px; margin:24px 0;
}
.must h3{margin:0 0 12px; color:#a92a2a; font-size:19px}
.must ul{margin:0 0 1em; padding-left:1.3em}
.must li{margin:.4em 0}
.must > :last-child{margin-bottom:0}

.note{
  background:var(--brand-soft); border-radius:10px; padding:14px 18px;
  font-size:15.5px; color:var(--ink-soft); margin:16px 0;
}
.note > :last-child{margin-bottom:0}

/* ---------- 動画枠 ---------- */
.video[hidden]{display:none}
.video{
  background:#0e1520; border-radius:var(--radius); overflow:hidden;
  margin:0 0 30px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 300px;
}
.video video{width:100%; height:100%; display:block; background:#000}
.video-toc{background:#131c2a; color:#c8d3e2; padding:14px 0; overflow-y:auto; max-height:420px}
.video-toc h3{color:#fff; font-size:14px; margin:0 0 8px; padding:0 16px; letter-spacing:.05em}
.video-toc button{
  display:block; width:100%; text-align:left; background:none; border:0;
  color:#c8d3e2; padding:8px 16px; font-size:14px; line-height:1.6; cursor:pointer;
  font-family:inherit;
}
.video-toc button:hover{background:#1c2839; color:#fff}
.video-toc button.active{background:var(--brand); color:#fff; font-weight:700}
.video-toc .t{color:#7e8ea3; font-variant-numeric:tabular-nums; margin-right:.6em; font-size:13px}
.video-toc button.active .t{color:#cfe0f7}
@media(max-width:780px){
  .video{grid-template-columns:1fr}
  .video-toc{max-height:220px}
}

/* ---------- 次へ ---------- */
.next{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--brand); color:#fff; text-decoration:none;
  border-radius:var(--radius); padding:20px 24px; margin:44px 0 0;
  box-shadow:var(--shadow); font-weight:700; font-size:18px;
}
.next:hover{background:#1157ac}
.next small{display:block; font-size:13px; opacity:.85; font-weight:400}
.next .arw{font-size:22px}

/* ---------- 目次（トップ） ---------- */
.toc{list-style:none; margin:0; padding:0}
.toc li{margin:0 0 14px}
.toc a{
  display:flex; gap:16px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); transition:.15s;
}
.toc a:hover{border-color:var(--brand); transform:translateY(-1px)}
.toc .num{
  flex:none; width:44px; height:44px; border-radius:12px;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-weight:800; font-size:15px; line-height:1.2;
  text-align:center;
}
.toc .ttl{display:block; font-size:19px; font-weight:700; margin:0 0 4px; line-height:1.5}
.toc .dsc{display:block; font-size:15px; color:var(--ink-soft); margin:0; line-height:1.75}
.toc .tag{font-size:13px; color:var(--ink-soft); margin-top:6px; display:block}

/* ---------- 問い合わせ ---------- */
.contact{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:44px 0 0; text-align:center; box-shadow:var(--shadow);
}
.contact h3{margin:0 0 8px}
.contact p{margin:0; color:var(--ink-soft); font-size:16px}

footer{
  max-width:820px; margin:0 auto; padding:26px 20px 40px;
  font-size:13px; color:#8a94a3; line-height:1.8;
}