@charset "UTF-8";

:root{
  --m-accent:      #0097E0;
  --m-accent-dark: #004E75;
  --m-accent-soft: rgba(0,151,224,.10);
  --m-bar:         #2b2b2b;
  --m-bar-sub:     #3c3c3c;
  --m-text:        #23282c;
  --m-text-sub:    #5d666d;
  --m-text-mute:   #8a9299;
  --m-line:        #e2e6ea;
  --m-bg:          #f6f8fa;
  --m-card:        #ffffff;
  --m-warn:        #e07a00;
  --m-warn-bg:     #fff6e6;
  --m-danger:      #d33a2f;
  --m-danger-bg:   #fdeeed;
  --m-ok:          #2f8f4e;
  --m-ok-bg:       #edf7f0;
  --m-radius:      8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--m-bg);
  color:var(--m-text);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:15px;
  line-height:1.85;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--m-accent-dark); }

/* ===== ヘッダー ===== */
.m-head{
  background:var(--m-bar);
  border-bottom:3px solid var(--m-accent);
  position:sticky; top:0; z-index:50;
}
.m-head-in{
  max-width:1180px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:14px;
}
.m-head-logo img{ height:28px; }
.m-head-title{
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.04em;
  padding-left:14px; border-left:1px solid #555;
}
.m-head-back{
  margin-left:auto; color:#cfd6db; text-decoration:none; font-size:13px;
  border:1px solid #555; border-radius:5px; padding:5px 12px; white-space:nowrap;
}
.m-head-back:hover{ background:var(--m-bar-sub); color:#fff; }

/* ===== レイアウト ===== */
.m-wrap{
  max-width:1180px; margin:0 auto; padding:28px 20px 80px;
  display:grid; grid-template-columns:236px minmax(0,1fr); gap:34px;
  align-items:start;
}

/* ===== サイドナビ ===== */
.m-nav{ position:sticky; top:78px; }
.m-nav-label{
  font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--m-text-mute);
  padding:0 10px 8px;
}
.m-nav ol{ list-style:none; margin:0; padding:0; }
.m-nav a{
  display:flex; gap:9px; align-items:baseline;
  padding:9px 12px; margin-bottom:2px;
  color:var(--m-text-sub); text-decoration:none; font-size:14px;
  border-radius:6px; line-height:1.5;
}
.m-nav a:hover{ background:#fff; color:var(--m-text); }
.m-nav a.is-active{
  background:var(--m-accent); color:#fff; font-weight:700;
}
.m-nav-num{ font-size:12px; opacity:.65; min-width:1.2em; }
.m-nav a.is-active .m-nav-num{ opacity:.85; }

/* ===== 本文 ===== */
.m-main{ min-width:0; }
.m-lead{
  font-size:14px; color:var(--m-text-sub); margin:0 0 26px;
}
h1.m-title{
  font-size:25px; line-height:1.45; margin:0 0 6px; letter-spacing:.01em;
}
h1.m-title .m-title-num{
  display:inline-block; font-size:13px; font-weight:700; color:#fff;
  background:var(--m-accent); border-radius:4px;
  padding:2px 9px; margin-right:10px; vertical-align:3px; letter-spacing:.06em;
}
h2.m-h2{
  font-size:19px; margin:44px 0 14px; padding-bottom:8px;
  border-bottom:2px solid var(--m-line);
}
h3.m-h3{
  font-size:16px; margin:28px 0 10px; color:var(--m-accent-dark);
}
p{ margin:0 0 14px; }
.m-main ul,.m-main ol{ margin:0 0 16px; padding-left:1.5em; }
.m-main li{ margin-bottom:6px; }
code{
  background:#eef1f4; border-radius:4px; padding:1px 5px;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:.9em;
}
.m-ui{
  display:inline-block; background:#fff; border:1px solid var(--m-line);
  border-bottom-width:2px; border-radius:4px; padding:1px 7px;
  font-size:.92em; font-weight:700; white-space:nowrap;
}

/* ===== 手順ステップ ===== */
.m-step{
  background:var(--m-card); border:1px solid var(--m-line);
  border-radius:var(--m-radius); padding:20px 22px; margin:0 0 16px;
  position:relative;
}
.m-step-head{
  display:flex; align-items:center; gap:11px; margin-bottom:10px;
}
.m-step-no{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--m-accent); color:#fff;
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.m-step-title{ font-size:16px; font-weight:700; }
.m-step > :last-child{ margin-bottom:0; }

/* ===== 注意書き ===== */
.m-note{
  border-left:4px solid var(--m-accent); background:var(--m-accent-soft);
  border-radius:0 6px 6px 0; padding:13px 16px; margin:0 0 18px;
  font-size:14px;
}
.m-note.is-warn{ border-left-color:var(--m-warn); background:var(--m-warn-bg); }
.m-note.is-danger{ border-left-color:var(--m-danger); background:var(--m-danger-bg); }
.m-note.is-ok{ border-left-color:var(--m-ok); background:var(--m-ok-bg); }
.m-note-title{ font-weight:700; display:block; margin-bottom:3px; }
.m-note > :last-child{ margin-bottom:0; }

/* ===== 表 ===== */
.m-table-wrap{ overflow-x:auto; margin:0 0 18px; }
table.m-table{
  width:100%; border-collapse:collapse; background:var(--m-card);
  font-size:14px; min-width:460px;
}
table.m-table th,table.m-table td{
  border:1px solid var(--m-line); padding:9px 12px; text-align:left; vertical-align:top;
}
table.m-table thead th{ background:#eef2f5; white-space:nowrap; }
table.m-table th[scope="row"]{ background:#f7f9fb; white-space:nowrap; font-weight:700; }

/* ===== キャプチャ枠 ===== */
figure.m-shot{
  margin:0 0 20px; background:var(--m-card);
  border:1px solid var(--m-line); border-radius:var(--m-radius);
  padding:10px; overflow:hidden;
}
/* 元サイズを超えて拡大しない（アプリ画面など幅の狭いキャプチャがボケて巨大化するのを防ぐ）。
   はみ出す大きいものだけ縮める。中央寄せ。 */
figure.m-shot img{
  border-radius:4px;
  display:block;
  margin:0 auto;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:78vh;
}
figure.m-shot figcaption{
  font-size:13px; color:var(--m-text-sub); padding:9px 4px 2px; line-height:1.6;
}
.m-shot-todo{
  border:2px dashed #c4ccd3; border-radius:6px; background:#fafbfc;
  padding:26px 20px; text-align:center; color:var(--m-text-mute);
}
.m-shot-todo b{ display:block; color:var(--m-text-sub); font-size:14px; margin-bottom:6px; }
.m-shot-todo .m-shot-file{
  display:inline-block; margin-top:10px; font-size:12px;
  background:#eef1f4; border-radius:4px; padding:3px 9px;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace; color:var(--m-text-sub);
}

/* ===== 目次カード ===== */
.m-toc{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;
  margin:0 0 26px;
}
.m-toc a{
  display:block; background:var(--m-card); border:1px solid var(--m-line);
  border-radius:var(--m-radius); padding:17px 18px;
  text-decoration:none; color:inherit;
}
.m-toc a:hover{ border-color:var(--m-accent); }
.m-toc-num{
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--m-accent);
}
.m-toc-title{ font-size:16px; font-weight:700; margin:3px 0 5px; }
.m-toc-desc{ font-size:13px; color:var(--m-text-sub); line-height:1.65; }

/* ===== ページ送り ===== */
.m-pager{
  display:flex; gap:12px; margin-top:52px; padding-top:20px;
  border-top:1px solid var(--m-line);
}
.m-pager a{
  flex:1; background:var(--m-card); border:1px solid var(--m-line);
  border-radius:var(--m-radius); padding:12px 16px;
  text-decoration:none; color:inherit; font-size:14px;
}
.m-pager a:hover{ border-color:var(--m-accent); }
.m-pager .is-next{ text-align:right; }
.m-pager small{ display:block; font-size:11px; color:var(--m-text-mute); letter-spacing:.08em; }

/* ===== フッター ===== */
.m-foot{
  background:var(--m-bar); color:#9aa3aa; font-size:12.5px;
  padding:22px 20px; text-align:center;
}
.m-foot a{ color:#cfd6db; }

/* ===== スマホ ===== */
@media (max-width:860px){
  .m-wrap{ grid-template-columns:1fr; gap:20px; padding-top:20px; }
  .m-nav{ position:static; }
  .m-nav ol{ display:flex; flex-wrap:wrap; gap:6px; }
  .m-nav a{ margin:0; border:1px solid var(--m-line); background:#fff; padding:7px 11px; font-size:13px; }
  .m-head-title{ display:none; }
  h1.m-title{ font-size:21px; }
}