/* ============================================================
   AIライターキットPro マニュアル
   デザイン別Ver.（販売LP D版とトーンを揃えた版）
   ※ HTMLは元のマニュアルと同じ。CSSとJSだけを差し替えています
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Yomogi&display=swap");
:root{
  --bg:#ffffff; --fg:#23282f; --muted:#5f6875; --line:#d9e0ea;
  --accent:#2f5a94; --accent-bg:#eef3fb; --nav-on:#ffffff; --warn-bg:#fff8f0; --warn-line:#e8823c;
  --code-bg:#f3f6fb;
  --ink:#1f3f6e; --card:#ffffff; --sky:#e8f7fd; --cyan:#22b8e6; --orange:#e8823c; --orange-deep:#d9631e;
  --yellow-pop:#ffe45c; --tint-2:#e3ecf9; --marker:#fff27a; --dot:#e2f1f8;
  --h2-fg:#ffffff; --h3-fg:#1f3f6e; --h3-line:#2f5a94;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14181d;--fg:#e6e9ee;--muted:#a3acb8;--line:#313946;
  --accent:#8fbcf2;--accent-bg:#1c2633;--nav-on:#0f141a;--warn-bg:#2a2218;--warn-line:#e8974f;--code-bg:#1d232b;
  --ink:#9fc3f5;--card:#1b2129;--sky:#16222b;--tint-2:#243247;--marker:#6b5a12;--dot:#1e2b36;
  --h3-fg:#dbe9fb;--h3-line:#8fbcf2;}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--fg);
  background-image:radial-gradient(var(--dot) 1.6px,transparent 1.7px);background-size:22px 22px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9;font-size:16px;}
.wrap{max-width:800px;margin:0 auto;padding:28px 20px 90px}

/* ---------------- メニュー ---------------- */
nav.top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:0 0 18px;margin:0 0 34px;border-bottom:3px dotted var(--line);font-size:.92em}
nav.top a{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;
  line-height:1.35;white-space:nowrap;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--tint-2);transition:transform .12s,box-shadow .12s,background .12s}
nav.top a:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cyan);background:var(--sky)}
nav.top a.cur{background:linear-gradient(135deg,#f39a4a,var(--orange-deep));color:#fff;
  box-shadow:3px 3px 0 var(--ink)}
@media screen and (max-width:600px){
  nav.top{gap:7px 6px;font-size:.84em}
  nav.top a{padding:7px 12px}
}
@media screen and (min-width:1080px){
  nav.top{
    position:fixed; top:0; left:0; bottom:0; width:250px; z-index:50;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:8px;
    padding:26px 18px 20px; margin:0;
    background:var(--card); border-bottom:none; border-right:3px solid var(--ink);
    overflow-y:auto; font-size:.92em;
  }
  nav.top::before{
    content:"AIライターキットPro";
    display:block; font-size:.86em; font-weight:900; color:#fff; text-align:center;
    letter-spacing:.04em; padding:9px 10px; margin-bottom:14px; border-radius:12px;
    background:linear-gradient(135deg,#2b4f86,#2f9fd0); border:2px solid var(--ink);
    box-shadow:3px 3px 0 var(--yellow-pop);
  }
  nav.top a{padding:10px 14px; border-radius:12px; white-space:normal; text-align:left;
    background:transparent; border-color:transparent; box-shadow:none; font-weight:700; color:var(--fg)}
  nav.top a:hover{background:var(--sky); border-color:var(--ink); box-shadow:3px 3px 0 var(--cyan); transform:none; color:var(--ink)}
  nav.top a.cur{border-color:var(--ink); box-shadow:3px 3px 0 var(--ink)}
  .wrap{margin-left:250px; max-width:860px; padding:36px 44px 90px}
}
@media screen and (min-width:1440px){
  .wrap{margin-left:auto; margin-right:auto}
}

/* ---------------- 見出し ---------------- */
h1{position:relative;font-size:1.75em;line-height:1.45;margin:34px 0 14px;padding:0 0 16px;
  color:var(--ink);border-bottom:none;letter-spacing:.02em}
h1::before{content:"MANUAL";position:absolute;left:0;top:-30px;
  background:var(--ink);color:var(--bg);font-family:"Arial Black",Arial,sans-serif;font-size:11px;
  letter-spacing:.14em;padding:3px 12px;border-radius:5px;transform:rotate(-3deg);
  box-shadow:3px 3px 0 var(--cyan)}
h1::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--cyan),var(--accent))}
h1 .ver{display:inline-block;margin-left:10px;padding:2px 12px;border-radius:999px;font-size:.5em;
  vertical-align:middle;background:var(--yellow-pop);color:#1f3f6e;border:2px solid var(--ink)}

h2{position:relative;font-size:1.3em;font-weight:900;line-height:1.55;letter-spacing:.03em;
  color:var(--h2-fg);background:linear-gradient(135deg,#2b4f86,#2f8fc8);
  padding:.6em .9em .6em 1em;margin:2.8em 0 1.1em;border-radius:14px;
  border:3px solid #1f3f6e;box-shadow:5px 5px 0 var(--yellow-pop);
  text-shadow:2px 2px 0 rgba(31,63,110,.55)}
h3{font-size:1.14em;font-weight:900;line-height:1.6;color:var(--h3-fg);
  border-bottom:3px dotted var(--h3-line);padding:.2em 0 .35em 1.3em;margin:2em 0 .9em;position:relative}
h3::before{content:"";position:absolute;left:0;top:.5em;width:.85em;height:.85em;border-radius:50%;
  background:var(--orange);border:2px solid var(--ink)}
h4{font-size:1.02em;font-weight:700;margin:1.6em 0 .6em;
  padding-left:.6em;border-left:5px solid var(--cyan);color:var(--fg)}
@media screen and (max-width:600px){
  h1{font-size:1.45em}
  h2{font-size:1.14em;padding:.6em .8em;box-shadow:4px 4px 0 var(--yellow-pop)}
  h3{font-size:1.06em}
}

/* ---------------- 本文 ---------------- */
p{margin:0 0 16px}
.lead{color:var(--muted);margin-bottom:26px}
ol,ul{padding-left:1.5em;margin:0 0 20px}
li{margin-bottom:10px}
a{color:var(--accent);font-weight:600}
b,strong{color:var(--fg)}

.step{background:var(--card);border:3px solid var(--ink);border-radius:16px;
  box-shadow:5px 5px 0 var(--tint-2);padding:20px 24px 8px;margin:0 0 22px}
.step h3{margin-top:0}
.step > :last-child{margin-bottom:14px}

.note{position:relative;background:var(--warn-bg);border:3px solid var(--warn-line);border-radius:16px;
  padding:16px 20px 16px 58px;margin:22px 0;box-shadow:4px 4px 0 var(--tint-2)}
.note::before{content:"!";position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;
  background:var(--orange);color:#fff;font-weight:900;font-family:"Arial Black",Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);line-height:1}
.note strong{display:block;margin-bottom:6px;color:var(--orange-deep)}
@media (prefers-color-scheme:dark){ .note strong{color:#f3a765} }

code{background:var(--code-bg);padding:2px 7px;border-radius:6px;font-size:.92em;border:1px solid var(--line)}
pre{background:var(--code-bg);padding:16px 18px;border-radius:14px;overflow-x:auto;border:2px dashed var(--line);
  white-space:pre-wrap;word-break:break-word;font-size:.92em;line-height:1.7;margin:0 0 20px}

figure.video{margin:24px 0;padding:0}
figure.video video{width:100%;height:auto;display:block;border-radius:14px;
  background:#000;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--cyan)}
figure.video figcaption{margin-top:10px;font-size:.9em;color:var(--muted)}

.tools{background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:18px 22px;margin:24px 0;
  box-shadow:5px 5px 0 var(--cyan)}
.tools > strong{display:block;margin-bottom:10px;color:var(--ink)}
.tools ul{margin:0 0 12px;padding-left:1.3em}
.tools li{margin-bottom:8px}
.tools .caution{margin:0;font-size:.9em;color:var(--muted);
  border-top:2px dotted var(--line);padding-top:12px}

.tablewrap{overflow-x:auto;margin:0 0 26px;border:3px solid var(--ink);border-radius:14px;background:var(--card);
  box-shadow:5px 5px 0 var(--tint-2)}
table{width:100%;border-collapse:collapse;font-size:.94em}
th,td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.tablewrap tr:first-child > *{border-top:0} .tablewrap tr:last-child > *{border-bottom:0}
.tablewrap tr > :first-child{border-left:0} .tablewrap tr > :last-child{border-right:0}
th{background:var(--accent-bg);font-weight:900;white-space:nowrap;color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:0 0 30px}
.card{background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:18px 20px;text-decoration:none;
  color:inherit;display:block;box-shadow:5px 5px 0 var(--tint-2);transition:transform .14s,box-shadow .14s;font-weight:400}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cyan)}
.card b{display:block;color:var(--ink);margin-bottom:6px;font-size:1.04em}
.card b::after{content:"→";color:var(--orange);float:right;margin-left:6px}
.card span{font-size:.9em;color:var(--muted)}
footer{margin-top:64px;padding-top:20px;border-top:3px dotted var(--line);color:var(--muted);font-size:.85em}

/* コピー用ブロック */
.copybox{border:3px solid var(--ink);border-radius:16px;overflow:hidden;margin:0 0 26px;background:var(--card);
  box-shadow:5px 5px 0 var(--cyan)}
.copybox .head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--sky);padding:10px 14px;font-size:.9em;font-weight:900;color:var(--ink);
  border-bottom:2px solid var(--ink)}
.copybox button{border:2px solid #1f3f6e;background:linear-gradient(135deg,#f39a4a,var(--orange-deep));color:#fff;
  border-radius:999px;padding:6px 18px;font-size:.9em;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;
  box-shadow:3px 3px 0 #1f3f6e;transition:transform .1s,box-shadow .1s}
.copybox button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #1f3f6e}
.copybox button.done{background:#3a8a5c}
.copybox textarea{width:100%;border:0;display:block;background:var(--code-bg);color:var(--fg);
  padding:16px 18px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;
  line-height:1.7;resize:vertical;outline:none}

/* スクリーンショット */
.shot{margin:0 0 26px}
.shot img{max-width:100%;height:auto;border:3px solid var(--ink);border-radius:14px;display:block;
  box-shadow:5px 5px 0 var(--tint-2);background:#fff}
.shot figcaption{color:var(--muted);font-size:.86em;margin-top:12px;padding-left:1.3em;position:relative}
.shot figcaption::before{content:"▲";position:absolute;left:0;color:var(--cyan);font-size:.8em;top:.2em}

/* 折りたたみ目次 */
.toc{border:3px solid var(--ink);border-radius:16px;background:var(--card);
  margin:0 0 36px;overflow:hidden;box-shadow:5px 5px 0 var(--tint-2)}
.toc>summary{cursor:pointer;list-style:none;padding:13px 20px;font-weight:900;background:var(--sky);
  color:var(--ink);display:flex;align-items:center;gap:10px;user-select:none}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::before{content:"▶";font-size:.8em;transition:transform .15s;color:var(--orange)}
.toc[open]>summary::before{transform:rotate(90deg)}
.toc[open]>summary{border-bottom:2px solid var(--ink)}
.toc .toc-body{padding:6px 20px 16px;background:var(--card)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0;padding:0}
.toc li>a{display:block;padding:9px 2px;color:var(--fg);text-decoration:none;font-weight:700;
  border-bottom:2px dotted var(--line);line-height:1.5}
.toc li>a:hover{color:var(--orange-deep)}
.toc li.sub>a{padding-left:20px;font-size:.94em;color:var(--muted);font-weight:500}
.toc li:last-child>a{border-bottom:0}

/* NEW! アイコン */
.nav-badge{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;
  background:var(--yellow-pop);color:#1f3f6e;font-size:11px;font-weight:900;letter-spacing:.06em;
  line-height:1.4;vertical-align:middle;flex:none;border:2px solid #1f3f6e;transform:rotate(-4deg)}

/* 更新情報ページのダウンロード枠（ページ内の指定より優先させる） */
body .dlbox{border:3px solid var(--ink);border-radius:16px;background:var(--sky);box-shadow:5px 5px 0 var(--yellow-pop)}
body .dlbtn{background:linear-gradient(135deg,#f39a4a,var(--orange-deep));color:#fff;border-radius:999px;
  border:3px solid #1f3f6e;box-shadow:4px 4px 0 #1f3f6e;transition:transform .1s,box-shadow .1s}
body .dlbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #1f3f6e}

/* 画面が狭いとき：上にバー＋ハンバーガーメニュー（JSが動くときだけ） */
.mbar{display:none}
@media screen and (max-width:1079px){
  .js body{padding-top:58px}
  html.js{scroll-padding-top:74px}
  .js .mbar{display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;height:58px;z-index:60;
    padding:0 12px 0 18px;background:var(--card);border-bottom:3px solid var(--ink);box-sizing:border-box}
  .mbar-t{font-weight:900;color:var(--ink);font-size:1.02em;letter-spacing:.02em}
  .mbar-btn{width:44px;height:40px;border:2px solid var(--ink);border-radius:10px;background:var(--sky);cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;box-shadow:2px 2px 0 var(--ink)}
  .mbar-btn span{display:block;width:20px;height:3px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  .nav-open .mbar-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-open .mbar-btn span:nth-child(2){opacity:0}
  .nav-open .mbar-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .js nav.top{display:none;position:fixed;top:58px;left:0;right:0;z-index:59;margin:0;max-height:calc(100vh - 58px);overflow-y:auto;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:12px 14px 16px;background:var(--card);
    border-bottom:3px solid var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.18);font-size:.95em;box-sizing:border-box}
  .js.nav-open nav.top{display:flex}
  .js nav.top a{border-radius:12px;padding:11px 14px;white-space:normal;justify-content:flex-start}
}
@media print{ nav.top{display:none} body{background:#fff} .wrap{margin:0;max-width:none} }