/* 自費テラス — 共通スタイル
   selfpay.jp / 2026-08-19
   ※ デザイン確定後に置き換える前提の暫定版 */

:root{
  --paper:#E9ECF1; --card:#FCFDFE; --card2:#F1F4F8;
  --ink:#0E131C; --ink2:#48536A; --ink3:#7B8699;
  --rule:#CFD6E1; --rule2:#AEB8C8;
  --ind:#26356B; --ind-soft:#DFE4F1;
  --ok:#13604F; --ok-bg:#DDEBE6; --ok-line:#2E8C74;
  --div:#8A5709; --div-bg:#F3E9D6; --div-line:#C08A2A;
  --non:#8A2434; --non-bg:#F3DFE1;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0C1017; --card:#141A24; --card2:#1B222E;
  --ink:#E3E9F2; --ink2:#A3AEC1; --ink3:#78849A;
  --rule:#28303D; --rule2:#3A4454;
  --ind:#93A6DE; --ind-soft:#1A2237;
  --ok:#5FC0A4; --ok-bg:#12261F; --ok-line:#3E8E76;
  --div:#D9A54F; --div-bg:#2A2216; --div-line:#B78330;
  --non:#DE8592; --non-bg:#2B191D;
}}
:root[data-theme="dark"]{
  --paper:#0C1017; --card:#141A24; --card2:#1B222E;
  --ink:#E3E9F2; --ink2:#A3AEC1; --ink3:#78849A;
  --rule:#28303D; --rule2:#3A4454;
  --ind:#93A6DE; --ind-soft:#1A2237;
  --ok:#5FC0A4; --ok-bg:#12261F; --ok-line:#3E8E76;
  --div:#D9A54F; --div-bg:#2A2216; --div-line:#B78330;
  --non:#DE8592; --non-bg:#2B191D;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.85;margin:0;padding:0 18px 80px;-webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1}
.wrap{max-width:760px;margin:0 auto}
.wide{max-width:920px}
:focus-visible{outline:2px solid var(--ind);outline-offset:3px}
p{margin:0 0 17px} strong{font-weight:600}
a{color:var(--ind)}

/* ── ヘッダ ── */
.mast{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:26px 0 11px;
  border-bottom:1.5px solid var(--ink)}
.mast a.bn{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.1em;
  color:var(--ink);text-decoration:none}
.mast span{font-size:11.5px;color:var(--ink3);font-family:var(--mono)}
.mast .r{margin-left:auto}

/* ── 見出し ── */
h1{font-family:var(--serif);font-size:clamp(29px,5.6vw,44px);line-height:1.27;font-weight:600;
  text-wrap:balance;margin:32px 0 14px;letter-spacing:.01em}
.dek{font-size:17px;color:var(--ink2);margin:0}
.meta{font-family:var(--mono);font-size:11px;color:var(--ink3);display:flex;flex-wrap:wrap;
  gap:5px 15px;margin:18px 0 0}
h2{font-family:var(--serif);font-size:24px;font-weight:600;margin:48px 0 17px;letter-spacing:.02em;
  padding-bottom:10px;border-bottom:1px solid var(--rule2);text-wrap:balance}
h3{font-family:var(--serif);font-size:18.5px;font-weight:600;margin:32px 0 12px}
.lede{font-size:17px;line-height:1.85}

/* ── 部品 ── */
.claim{background:var(--card);border:1.5px solid var(--ink);border-radius:3px;padding:22px 24px;margin:26px 0}
.claim p{font-family:var(--serif);font-size:clamp(18px,2.4vw,20.5px);line-height:1.66;margin:0;font-weight:600}
.claim p+p{font-family:var(--sans);font-size:15px;font-weight:400;color:var(--ink2);margin-top:12px;line-height:1.85}

.box{background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:19px 21px;margin:22px 0}
.box h3,.box h4{margin-top:0}
.box h4{font-family:var(--serif);font-size:17.5px;margin:0 0 10px;font-weight:600}
.box p:last-child,.box ul:last-child{margin-bottom:0}

.note{background:var(--ind-soft);border-left:3px solid var(--ind);border-radius:0 2px 2px 0;
  padding:13px 16px;margin:18px 0}
.note .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ind);font-weight:700;margin:0 0 6px}
.note p{margin:0;font-size:14.5px;line-height:1.8}
.note p+p{margin-top:9px}

blockquote{margin:20px 0;padding:15px 19px;background:var(--ind-soft);border-left:3px solid var(--ind);
  font-family:var(--serif);font-size:16.5px;line-height:1.85}
blockquote cite{display:block;font-family:var(--mono);font-style:normal;font-size:11.5px;
  color:var(--ink3);margin-top:9px;line-height:1.65}

ul.pl,ol.pl{margin:0 0 16px;padding-left:1.35em}
ul.pl li,ol.pl li{margin-bottom:8px;line-height:1.8}

/* ── 表 ── */
.tw{overflow-x:auto;margin:20px 0;border:1px solid var(--rule);border-radius:2px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.7}
thead th{background:var(--card2);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink2);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rh{font-weight:600}

/* ── バッジ ── */
.b{display:inline-block;font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:2px;
  white-space:nowrap;letter-spacing:.03em;vertical-align:1px;font-weight:600}
.b1{background:var(--ind-soft);color:var(--ind)}
.b2{background:var(--card2);color:var(--ink3);border:1px solid var(--rule)}
.bok{background:var(--ok-bg);color:var(--ok)}
.bdv{background:var(--div-bg);color:var(--div)}
.bno{background:var(--non-bg);color:var(--non)}

/* ── 引用チップ ── */
.cite{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:var(--card2);
  border:1px solid var(--rule);border-radius:2px;padding:9px 12px;margin:12px 0 0;
  font-size:11.5px;font-family:var(--mono);color:var(--ink3)}
.lv{font-weight:700;letter-spacing:.08em;flex:none}
.lv3{color:var(--ok)} .lv2{color:var(--ind)} .lv1{color:var(--ink3)}
.cw{background:var(--card);border:1px solid var(--rule2);border-radius:2px;padding:1px 7px;color:var(--ink2);flex:none}
.cs{color:var(--ink2)} .cs a{color:var(--ind);text-decoration:none;border-bottom:1px solid var(--rule2)}
.cm{margin-left:auto;color:var(--ink3)}
.cm.edited{color:var(--div);font-weight:700}

/* ── カード一覧 ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:6px 0 0}
.cd{background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:18px 19px;
  text-decoration:none;color:var(--ink);display:block;transition:border-color .12s}
.cd:hover{border-color:var(--ind)}
.cd .k{font-family:var(--mono);font-size:10.5px;color:var(--ind);font-weight:700;letter-spacing:.1em;margin:0 0 6px}
.cd h3{font-family:var(--serif);font-size:18px;margin:0 0 8px;font-weight:600}
.cd p{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.7}
.cd .tag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;
  background:var(--card2);color:var(--ink3);padding:2px 8px;border-radius:2px;border:1px solid var(--rule)}
.cd.soon{opacity:.55;pointer-events:none}

/* ── 出典 ── */
.src ol{padding-left:1.5em;margin:0;font-size:12.5px;color:var(--ink2);line-height:1.8}
.src li{margin-bottom:9px}
.src a{color:var(--ind);text-decoration:none;border-bottom:1px solid var(--rule2);word-break:break-all}

/* ── 訂正記録 ── */
.corr{border-left:3px solid var(--div);background:var(--card);padding:16px 19px;margin:14px 0;border-radius:0 2px 2px 0}
.corr .d{font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin:0 0 7px}
.corr h4{font-family:var(--serif);font-size:16.5px;margin:0 0 9px;font-weight:600}
.corr p{margin:0 0 9px;font-size:14.5px;line-height:1.8}
.corr p:last-child{margin:0}
.corr .lbl{font-family:var(--mono);font-size:10.5px;color:var(--div);font-weight:700;letter-spacing:.1em}

/* ── フッタ ── */
footer{margin-top:56px;padding-top:19px;border-top:1.5px solid var(--ink);
  font-size:12px;color:var(--ink3);line-height:1.85}
footer p{margin:0 0 9px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px}
footer nav a{color:var(--ink2);text-decoration:none;font-size:13px;border-bottom:1px solid var(--rule)}
footer nav a:hover{color:var(--ind);border-bottom-color:var(--ind)}

/* ── 整形済みテキスト（規約類） ── */
.plain{background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:20px 22px;margin:20px 0}
.plain h3{margin-top:26px} .plain h3:first-child{margin-top:0}
.plain p:last-child{margin-bottom:0}

/* ── フォーム（送信はブラウザのメールで行う。サーバーには送りません） ── */
.form{background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:22px 23px;margin:22px 0}
.fld{margin:0 0 22px}
.fld:last-child{margin-bottom:0}
.fld>.lb{display:block;font-family:var(--serif);font-size:16.5px;font-weight:600;margin:0 0 4px}
.fld>.hp{font-size:13px;color:var(--ink3);margin:0 0 10px;line-height:1.7}
.opts{display:grid;gap:8px;margin:0}
.opt{display:flex;gap:10px;align-items:flex-start;background:var(--card2);border:1px solid var(--rule);
  border-radius:2px;padding:11px 13px;cursor:pointer;font-size:14.5px;line-height:1.65}
.opt:hover{border-color:var(--rule2)}
.opt input{margin:5px 0 0;flex:none;accent-color:var(--ind)}
.opt input:checked~span{font-weight:600}
.opt:has(input:checked){border-color:var(--ind);background:var(--ind-soft)}
.opt .sub{display:block;font-size:12.5px;color:var(--ink3);font-weight:400;margin-top:3px}
textarea,input[type="text"],input[type="email"]{width:100%;background:var(--paper);color:var(--ink);
  border:1px solid var(--rule2);border-radius:2px;padding:11px 12px;font-family:var(--sans);
  font-size:15px;line-height:1.75}
textarea{min-height:150px;resize:vertical}
textarea:focus,input:focus{border-color:var(--ind)}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.btn{display:inline-block;background:var(--ind);color:#FCFDFE;border:1.5px solid var(--ind);
  border-radius:2px;padding:12px 22px;font-family:var(--sans);font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.5}
.btn:hover{opacity:.88}
.btn2{display:inline-block;background:transparent;color:var(--ind);border:1.5px solid var(--rule2);
  border-radius:2px;padding:12px 22px;font-family:var(--sans);font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.5}
.btn2:hover{border-color:var(--ind)}
.btn[disabled],.btn2[disabled]{opacity:.4;cursor:not-allowed}
.out{margin:20px 0 0;background:var(--card2);border:1px solid var(--rule);border-radius:2px;padding:15px 17px}
.out .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink3);font-weight:700;margin:0 0 9px}
.out pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.75;white-space:pre-wrap;
  word-break:break-word;color:var(--ink2)}
.addr{font-family:var(--mono);font-size:15px;color:var(--ind);word-break:break-all}
.msg{font-size:13.5px;color:var(--ok);font-weight:600;margin:10px 0 0}