/* 使い方ページの骨格。テーマの CSS のあとに読み込む。
   テーマは本文を 500px に収める作りなので、ここで別の骨格に置き換える。
   色と字は他のページとそろえたいので、テーマの値をなぞっている。 */

:root{
  --ink:#222;
  --ink-weak:#6b6b6b;
  --line:#e5e5e5;
  --line-soft:#f0f0f0;
  --link:#267CB9;
  --bg:#fff;
  --bg-soft:#f7f9fb;
  --accent:#00a0dc;      /* アプリの青。見出しの目印に使う */
  --side:280px;
}

.manual-body{
  margin:0;
  padding:0;                /* テーマの body{padding:50px} を打ち消す */
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.8;
}

/* テーマ（jekyll-theme-minimal）は header と footer を
   **左に270pxで固定する**前提で書かれている。使い方ページは左右2段の別の骨格を
   持つので、要素セレクタで当たってくるぶんをここで打ち消す。
   打ち消し忘れると、上の帯と下の帯が左端に細長く固定され、本文が右に潰れる。 */
.manual-body .mheader,
.manual-body .mfooter{
  width:auto; float:none; padding-right:0;
}
.manual-body .mheader{position:sticky; top:0}
.manual-body .mfooter{position:static; bottom:auto}

/* 画面外に置いて、Tab で最初に拾えるようにする */
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:60;border:2px solid var(--link)}

/* ---- 上の帯 ---- */
.mheader{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky; top:0; z-index:40;
}
.mheader-in{
  max-width:1180px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;
}
.mheader-title{font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;white-space:nowrap}
.mheader-title span{font-size:11px;color:var(--ink-weak);font-weight:400;letter-spacing:.08em;margin-left:6px}
.mheader-nav{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.mheader-nav a{color:var(--link);text-decoration:none}
.mheader-nav a.current{color:var(--ink);font-weight:700}
.mheader-nav a:hover{text-decoration:underline}

/* ---- 左右の骨格 ---- */
.mshell{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:var(--side) minmax(0,1fr); gap:36px;
  align-items:start;
}
.mside{
  position:sticky; top:56px; align-self:start;
  max-height:calc(100vh - 70px); overflow-y:auto;
  padding:18px 0 40px;
}
.mmain{padding:24px 0 60px; min-width:0; overflow-wrap:anywhere}

/* ---- 検索 ---- */
.msearch input{
  width:100%; box-sizing:border-box;
  padding:9px 12px; font-size:14px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--bg-soft);
}
.msearch input:focus{outline:none;border-color:var(--accent);background:#fff}
.msearch-hit{font-size:12px;color:var(--ink-weak);margin:8px 2px 0}

/* ---- 目次 ---- */
.mnav{margin-top:18px;font-size:13.5px}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav > ul > li{margin:0 0 2px}
.mnav a{display:block;padding:5px 10px;color:var(--ink);text-decoration:none;border-radius:6px}
.mnav a:hover{background:var(--bg-soft)}
.mnav .lv1 > a{font-weight:700}
.mnav .lv2 a{padding-left:22px;color:var(--ink-weak);font-size:13px}
.mnav a.here{background:#e8f6fc;color:#0b6c92;font-weight:700}
/* 開いている章だけ、下の階層を見せる */
.mnav .lv1 > ul{display:none}
.mnav .lv1.open > ul{display:block}

/* ---- 本文 ---- */
.mmain h1{font-size:30px;margin:0 0 6px;line-height:1.35}
.mmain .lead{color:var(--ink-weak);margin:0 0 28px}
.mmain h2{
  font-size:22px; margin:56px 0 4px; padding-top:14px;
  border-top:3px solid var(--accent); scroll-margin-top:64px;
}
.mmain h3{font-size:18px;margin:36px 0 6px;scroll-margin-top:64px}
.mmain h2:first-of-type{margin-top:28px}
.mmain p{margin:10px 0}
.mmain ol{padding-left:1.3em}
.mmain ol > li{margin:14px 0}
.mmain ul{padding-left:1.3em}

/* 手順の中の画面写真は、文の流れを切らない大きさに収める */
.shot{
  display:block; width:100%; max-width:230px; height:auto;
  margin:10px 0 4px; border:1px solid var(--line); border-radius:10px;
}
.shot-row{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0}
.shot-row figure{margin:0;max-width:230px}
.shot-row figcaption{font-size:12px;color:var(--ink-weak);margin-top:2px;line-height:1.5}
.shot-row .shot{margin:0}
/* 切り出したもの（ウィジェット・電光掲示板）は縦横比が違うので別枠 */
.shot-wide{display:block;width:100%;max-width:420px;height:auto;border-radius:10px;margin:10px 0}

/* 動画。GIF のかわりなので、操作するものだと見せない */
.demo{
  display:block; width:100%; max-width:250px; height:auto;
  border:1px solid var(--line); border-radius:12px;
  margin:6px 0 14px; background:#000;
}
.demo-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.demo-wrap .demo-note{flex:1 1 260px;min-width:0}

/* こんな使いかた */
.uses{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:10px; padding:10px 14px; margin:16px 0 0;
}
.uses > summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none}
.uses > summary::-webkit-details-marker{display:none}
.uses > summary::before{content:"▸ ";color:var(--accent)}
.uses[open] > summary::before{content:"▾ "}
.uses ul{margin:8px 0 4px;padding-left:1.2em}
.uses li{margin:4px 0;font-size:14px}

/* プラン限定の印 */
.plan{
  display:inline-block; font-size:11.5px; font-weight:700;
  padding:2px 8px; border-radius:999px; vertical-align:middle;
  margin-left:8px; white-space:nowrap;
  background:#fdf0e3; color:#9a5a12; border:1px solid #f2d7b6;
}
.plan.std{background:#eaf4fb;color:#1b6690;border-color:#c9e2f2}
.note{
  border-left:3px solid var(--accent); background:var(--bg-soft);
  padding:10px 14px; margin:16px 0; font-size:14px;
}
.note strong{color:var(--ink)}

/* ---- 逆引き ---- */
.qa-wrap{margin:10px 0 8px}
.qa-group{margin:22px 0 0}
.qa-group > h3{font-size:15px;margin:0 0 8px;color:var(--ink-weak);letter-spacing:.02em}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.qa{
  border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:0; overflow:hidden;
}
.qa > summary{
  cursor:pointer; padding:11px 14px; font-size:14px; font-weight:700;
  list-style:none; display:block;
}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary::before{content:"＋ ";color:var(--accent);font-weight:700}
.qa[open] > summary::before{content:"− "}
.qa[open]{border-color:var(--accent)}
.qa-body{padding:0 14px 12px;font-size:14px;border-top:1px solid var(--line-soft);margin-top:0}
.qa-body p{margin:10px 0}
.qa-body ol{padding-left:1.2em;margin:8px 0}
.qa-body li{margin:6px 0}

/* ---- 検索でしぼったとき ---- */
.hidden-by-search{display:none !important}
.mmain.searching h2, .mmain.searching h3{border-top-color:var(--line)}

/* ---- 表 ---- */
.mmain table{border-collapse:collapse;width:100%;max-width:640px;font-size:14px;margin:14px 0}
.mmain th,.mmain td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.mmain th{background:var(--bg-soft)}
.mmain td:first-child{white-space:nowrap}

/* ---- 下の帯 ---- */
.mfooter{
  border-top:1px solid var(--line); margin-top:40px;
  padding:18px 20px 40px; font-size:13px; color:var(--ink-weak);
}
.mfooter p{max-width:1180px;margin:0 auto}
.mfooter a{color:var(--link)}

/* ---- 目次を開くボタン（狭い画面だけ） ---- */
.side-toggle{
  display:none;
  position:sticky; top:53px; z-index:35;
  width:100%; box-sizing:border-box;
  padding:11px 20px; font-size:14px; font-weight:700;
  background:var(--bg-soft); color:var(--ink);
  border:0; border-bottom:1px solid var(--line);
  text-align:left; cursor:pointer;
}
.side-toggle::before{content:"☰ ";color:var(--accent)}

/* ---- 狭い画面 ---- */
@media (max-width:820px){
  /* 表は自分の中で横に流す。**これをしないと表の幅がページ全体を広げ、
     本文まで画面の外にはみ出す**（料金プランの4列で踏んだ）。 */
  .mmain table{display:block;overflow-x:auto;max-width:100%}
  .mshell{grid-template-columns:1fr;gap:0;padding:0 18px}
  .side-toggle{display:block}
  .mside{
    position:static; max-height:none; overflow:visible;
    display:none; padding:14px 0 6px; border-bottom:1px solid var(--line);
  }
  .mside.open{display:block}
  .mmain{padding-top:18px}
  .mmain h1{font-size:25px}
  .mmain h2{font-size:20px;margin-top:44px}
  .qa-grid{grid-template-columns:1fr}
}

/* 画面の明るさをダークにしている端末でも、白のまま読めるようにしておく
   （他のページと同じ見た目にそろえるため、ここでは配色を切り替えない） */