/* =========================================================================
 * 公開サイト（ランディング・法的ページ・問い合わせ）の共通スタイル
 *   ツール本体と同じ約束ごと: 角丸 2px、影なし、区切りは罫線、色は意味にだけ。
 * ======================================================================= */
:root{
  --win:#f0f0f0; --panel:#ffffff; --panel-2:#f7f7f7; --hover:#e8eef5;
  --line:#c9c9c9; --line-2:#e2e2e2;
  --text:#1c1c1c; --text-2:#474747; --muted:#707070;
  --focus:#0a64ad; --sel:#cfe3f6; --sel-line:#5b9bd5;
  --err:#b3261e; --warn:#8a5a00; --ok:#1e6b57;
  --ui:"Meiryo UI","Yu Gothic UI","Segoe UI",sans-serif;
  --mono:"BIZ UDGothic","Consolas","MS Gothic",monospace;
  --page:860px;
}
[data-theme="dark"]{
  --win:#2b2b2b; --panel:#1f1f1f; --panel-2:#262626; --hover:#313131;
  --line:#474747; --line-2:#333333;
  --text:#dcdcdc; --text-2:#b4b4b4; --muted:#8f8f8f;
  --focus:#4b9ce6; --sel:#173450; --sel-line:#3d6f9e;
  --err:#e06c65; --warn:#d6a44a; --ok:#63b79c;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --win:#2b2b2b; --panel:#1f1f1f; --panel-2:#262626; --hover:#313131;
    --line:#474747; --line-2:#333333;
    --text:#dcdcdc; --text-2:#b4b4b4; --muted:#8f8f8f;
    --focus:#4b9ce6; --sel:#173450; --sel-line:#3d6f9e;
    --err:#e06c65; --warn:#d6a44a; --ok:#63b79c;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--win); color:var(--text);
  font:15px/1.8 var(--ui);
}
a{color:var(--focus)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus); outline-offset:1px;
}
code,kbd{font-family:var(--mono); font-size:.92em}

/* ---- ヘッダ ---------------------------------------------------------- */
.hd{
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.hd-in{
  max-width:var(--page); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:bold; text-decoration:none; color:inherit}
.brand svg{width:18px; height:18px; color:var(--focus)}
.hd-nav{display:flex; gap:14px; margin-left:auto; flex-wrap:wrap; font-size:13px}
.hd-nav a{text-decoration:none}
.hd-nav a:hover{text-decoration:underline}
.langbox{display:flex; align-items:center; gap:5px; color:var(--text-2)}
.langbox svg{width:14px; height:14px}
.langbox select{
  font:inherit; font-size:13px; padding:2px 4px; cursor:pointer;
  color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:2px;
}

/* ---- 本文 ------------------------------------------------------------ */
main{max-width:var(--page); margin:0 auto; padding:26px 16px 40px}
h1{font-size:25px; line-height:1.45; margin:0 0 6px}
h2{font-size:19px; margin:32px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line)}
h3{font-size:16px; margin:22px 0 6px}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px; padding-left:1.4em}
li{margin:3px 0}
.lead{color:var(--text-2); margin-bottom:22px}
.updated{color:var(--muted); font-size:13px; margin:0 0 24px}
.note{
  background:var(--panel-2); border:1px solid var(--line-2); border-left:3px solid var(--focus);
  border-radius:2px; padding:10px 13px; margin:0 0 14px;
}
.warn{border-left-color:var(--warn)}
.todo{border-left-color:var(--err); color:var(--err)}

table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:13.5px}
th,td{border:1px solid var(--line-2); padding:7px 9px; text-align:left; vertical-align:top}
th{background:var(--panel-2); font-weight:bold}
.tbl-wrap{overflow-x:auto}

/* ---- ツール一覧（トップ） -------------------------------------------- */
.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin:0 0 26px}
.tool{
  display:flex; flex-direction:column; gap:4px; padding:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:2px;
  text-decoration:none; color:inherit;
}
.tool:hover{background:var(--hover); border-color:var(--sel-line)}
.tool b{font-size:15px}
.tool span{color:var(--text-2); font-size:13.5px}
.tool .step{color:var(--muted); font-size:12px; font-family:var(--mono)}

/* ---- フォーム -------------------------------------------------------- */
.form{display:flex; flex-direction:column; gap:14px; max-width:560px}
.field{display:flex; flex-direction:column; gap:4px}
.field label{font-weight:bold; font-size:14px}
.field .hint{color:var(--muted); font-size:13px}
.field input,.field textarea,.field select{
  font:inherit; padding:7px 9px; border-radius:2px;
  color:var(--text); background:var(--panel); border:1px solid var(--line);
}
.field textarea{min-height:150px; resize:vertical}
.field.bad input,.field.bad textarea{border-color:var(--err)}
.field .err{color:var(--err); font-size:13px; display:none}
.field.bad .err{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.btn{
  align-self:flex-start; min-height:36px; padding:0 18px; cursor:pointer; font:inherit;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:2px;
}
.btn:hover{background:var(--hover)}
.btn.primary{border-color:var(--focus); color:var(--focus); font-weight:bold}
.btn:disabled{color:var(--muted); cursor:default; background:var(--panel-2)}
.form-msg{padding:10px 13px; border:1px solid var(--line-2); border-radius:2px; display:none}
.form-msg.on{display:block}
.form-msg.ok{border-left:3px solid var(--ok)}
.form-msg.ng{border-left:3px solid var(--err); color:var(--err)}

/* ---- フッター -------------------------------------------------------- */
.ft{background:var(--panel); border-top:1px solid var(--line); margin-top:40px}
.ft-in{max-width:var(--page); margin:0 auto; padding:18px 16px 26px; font-size:13px; color:var(--text-2)}
.ft-links{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.ft-links a{text-decoration:none}
.ft-links a:hover{text-decoration:underline}
.ft-op{color:var(--muted)}
.ft-op b{color:var(--text-2)}

@media (max-width:560px){
  body{font-size:14.5px}
  h1{font-size:21px}
  .hd-nav{width:100%; margin-left:0}
}

/* =========================================================================
 * 読み物としての体裁
 *   表を並べるだけだと「様式」に見えてしまうので、
 *   導入の文・要点のカード・定義リストで緩急をつける。
 * ======================================================================= */

/* 本文の行長を読みやすい範囲に収める（表とカードは全幅のまま） */
main > p, main > ul, main > ol, main > h2, main > h3 { max-width: 62ch; }
main > h1 { max-width: 20ch; }

/* 書き出しの一段落。少し大きく、行間を広く */
.intro{
  font-size:16.5px; line-height:1.95; color:var(--text);
  margin:0 0 26px; max-width:62ch;
}
.intro + .intro{margin-top:-14px}

/* 要点カード。罫線 1 本と左のアクセントだけで、囲みすぎない */
.card{
  border:1px solid var(--line); border-left:3px solid var(--focus); border-radius:2px;
  background:var(--panel); padding:16px 18px; margin:0 0 26px;
}
.card h2, .card h3{margin:0 0 10px; border:0; padding:0; font-size:15px}
.card p:last-child, .card dl:last-child{margin-bottom:0}

/* 定義リスト。表よりも軽く、項目名と値の関係が読み取りやすい */
.dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; align-items:baseline}
.dl dt{
  font-weight:bold; color:var(--text-2); white-space:nowrap;
  font-size:13.5px; padding-top:2px;
}
.dl dd{margin:0; min-width:0}
.dl dd .sub{display:block; color:var(--muted); font-size:13px; margin-top:2px}
.dl .big{font-size:17px; font-weight:bold}
@media (max-width:560px){
  .dl{grid-template-columns:1fr; gap:2px 0}
  .dl dt{margin-top:10px}
}

/* 箇条書きを少しだけ読みやすく */
.bullets{list-style:none; padding:0; margin:0 0 20px; max-width:62ch}
.bullets li{
  position:relative; padding-left:1.25em; margin:7px 0;
}
.bullets li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:1px; background:var(--muted);
}

/* 署名。ページの終わりに、人が書いたことが分かる一行を置く */
.sig{
  margin:34px 0 0; padding-top:14px; border-top:1px solid var(--line-2);
  color:var(--muted); font-size:13.5px;
}
.sig b{color:var(--text-2)}

/* 小さな補足。段落の後ろに添える */
.aside{color:var(--muted); font-size:13.5px; max-width:62ch; margin:-6px 0 20px}