@charset "utf-8";

  :root{
    --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f8fafc;
    --code-bg:#0f172a; --code-ink:#e2e8f0;
    --warn-bg:#fffbeb; --warn-line:#fde68a; --ok-bg:#ecfdf5; --ok-line:#a7f3d0;
  }

.wrap{max-width:880px;margin:3rem auto 0;padding:0 22px 80px;}
  h2{margin:2.6rem 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent-color);}
  h3{margin:1.8rem 0 .6rem;color:#111827;}
  h4{margin:1.4rem 0 .5rem;color:#334155;}
  p{margin:.6rem 0;}
  code{background:#eef2f7;border-radius:4px;padding:.1em .4em;font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.92em;color:#b91c1c;}
  pre{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:1rem 1.1rem;overflow:auto;font-size:.86rem;line-height:1.6;}
  pre code{background:transparent;color:inherit;padding:0;}
  .toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;margin:1.4rem 0;}
  .toc .toctitle{margin:0 0 .4rem;font-size:1.05rem;font-weight:700;}
  .toc ul{margin:.3rem 0;padding-left:1.3rem;}
  .toc a{color:var(--accent-color);text-decoration:none;}
  .toc a:hover{text-decoration:underline;}
  table{width:100%;border-collapse:collapse;margin:1rem 0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem;}
  th{background:#f1f5f9;font-weight:700;}
  tr:last-child td{border-bottom:0;}
  .note{border-radius:10px;padding:.9rem 1.1rem;margin:1.1rem 0;font-size:.93rem;}
  .note.tip{background:var(--accent-light-color);border:1px solid #cfe2d6;}
  .note.warn{background:var(--warn-bg);border:1px solid var(--warn-line);}
  .note.ok{background:var(--ok-bg);border:1px solid var(--ok-line);}
  .imgph{background:#fff;border:1px dashed #94a3b8;border-radius:10px;padding:.8rem 1.1rem;margin:1rem 0;color:var(--muted);font-size:.9rem;}
  .muted{color:var(--muted);font-size:.9rem;}
  hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0;}
  ul,ol{margin:.5rem 0;padding-left:0;}
  li{margin:.25rem 0;}
  

  /*開閉ブロック（クリックで開く補足。読む人が分かれる内容に使う）*/
  .wrap .openclose{
    position:relative;
    margin:1.2rem 0 0;
    padding:.85rem 3rem .85rem 1.1rem;
    background:var(--accent-light-color);
    border:1px solid #cfe2d6;
    border-radius:10px;
    font-size:.93rem;
    font-weight:700;
    color:#334155;
    cursor:pointer;
    user-select:none;
    transition:background .2s;
  }
  .wrap .openclose:hover{background:#e6f2ea;}
  .wrap .openclose.active{border-radius:10px 10px 0 0;}
  /*右端の＋アイコン（開くと×になる）*/
  .wrap .openclose::before,
  .wrap .openclose::after{
    content:"";position:absolute;top:50%;
    background:var(--accent-color);
    transition:transform .3s;
  }
  .wrap .openclose::before{right:1.1rem;width:12px;height:2px;transform:translateY(-50%);}
  .wrap .openclose::after{right:calc(1.1rem + 5px);width:2px;height:12px;transform:translateY(-50%);}
  .wrap .openclose.active::before,
  .wrap .openclose.active::after{transform:translateY(-50%) rotate(45deg);background:var(--accent-color);}
  /*開いた中身*/
  .wrap .openclose + div{
    background:#fff;
    border:1px solid #cfe2d6;
    border-top:0;
    border-radius:0 0 10px 10px;
    padding:1.1rem 1.3rem;
    margin:0 0 1.2rem;
  }
  .wrap .openclose + div > :first-child{margin-top:0;}
  .wrap .openclose + div > :last-child{margin-bottom:0;}

  @media (max-width:600px){
    .wrap .openclose{padding:.8rem 2.6rem .8rem 1rem;}
    .wrap .openclose::before{right:1rem;}
    .wrap .openclose::after{right:calc(1rem + 5px);}
    .wrap .openclose + div{padding:1rem 1.1rem;}
  }

  /*コードのコピーボタン*/
  .wrap pre{position:relative;}
  .wrap .copybtn{
    position:absolute;top:.55rem;right:.55rem;
    background:rgba(255,255,255,.12);
    color:var(--code-ink);
    border:1px solid rgba(255,255,255,.28);
    border-radius:6px;
    padding:.25rem .7rem;
    font-size:.75rem;
    line-height:1.6;
    cursor:pointer;
    transition:background .2s,border-color .2s;
  }
  .wrap .copybtn:hover{background:rgba(255,255,255,.24);}
  .wrap .copybtn.done{background:var(--accent-color);border-color:var(--accent-color);color:#fff;}

  @media (max-width:600px){
    .wrap .copybtn{top:.4rem;right:.4rem;padding:.2rem .55rem;font-size:.7rem;}
  }