/* ============================================================================
   assets/guide.css — ご署名の手順（相手方向け） の見た目
   ----------------------------------------------------------------------------
   ※ マニュアルは「読みもの」なので、プログラム（JavaScript）を一切使いません。
   ※ 見た目をこのファイルに分けているのは、サイト全体の安全設定
      （CSP：style-src 'self'）に合わせるためです。
   ============================================================================ */
/* スマートフォンで読むことを前提にした作りです。 */
:root{
  --ink:#111827; --sub:#4B5563; --line:#E5E7EB; --soft:#F6F8FB;
  --blue:#1D4ED8; --blue-soft:#EFF6FF;
  --warn:#B45309; --warn-soft:#FFFBEB; --warn-line:#FCD34D;
  --ok:#15803D; --ok-soft:#F0FDF4; --ok-line:#BBF7D0;
}
*{box-sizing:border-box}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,sans-serif;
  margin:0;background:var(--soft);color:var(--ink);line-height:1.9;font-size:16px;
}
header.top{background:#1D4ED8;color:#fff;padding:22px 16px;text-align:center}
header.top h1{margin:0 0 4px;font-size:20px}
header.top p{margin:0;font-size:14px;color:#DBEAFE}
.wrap{max-width:620px;margin:0 auto;padding:20px 16px 72px}
h2{font-size:18px;margin:36px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
p{margin:0 0 12px}
ul{margin:0 0 12px;padding-left:1.4em}
li{margin-bottom:6px}
img{width:100%;max-width:330px;height:auto;border:1px solid var(--line);border-radius:12px;
    display:block;margin:10px auto;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 8px;margin:18px 0}
.step .n{display:inline-flex;align-items:center;justify-content:center;
         width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
         font-weight:700;font-size:17px;margin-right:10px;vertical-align:middle}
.step h3{display:inline;font-size:17px;margin:0;vertical-align:middle}
.step .body{margin-top:12px}
.box{border:1px solid var(--line);border-left-width:5px;border-radius:0 10px 10px 0;
     padding:12px 14px;margin:14px 0;background:#fff;font-size:15px}
.box .ttl{font-weight:700;display:block;margin-bottom:4px}
.info{border-left-color:var(--blue);background:var(--blue-soft)}
.info .ttl{color:var(--blue)}
.warn{border-left-color:var(--warn-line);background:var(--warn-soft)}
.warn .ttl{color:var(--warn)}
.ok{border-left-color:var(--ok-line);background:var(--ok-soft)}
.ok .ttl{color:var(--ok)}
.box p:last-child,.box ul:last-child{margin-bottom:0}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;background:#fff}
th{background:#F3F4F6;width:38%}
.small{font-size:14px;color:var(--sub)}
.box.tail{margin-top:32px}
.lead{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0}
@media print{ body{background:#fff} header.top{background:#fff;color:#000;border-bottom:2px solid #000} }