/* index.html は1ファイルで完結させたいので、説明ページ用の指定はここに分ける。
   about.html / privacy.html から読み込む。色はアプリ本体と同じ考え方で、
   薄い側を基準に置き、暗い側だけ差し替える。 */
*{box-sizing:border-box}
:root{
  --bg:#F4F7F5; --surface:#FFFFFF; --surface-2:#E7EEE9;
  --line:#D3DFD8; --line-soft:#DCE6DF;
  --text:#14261D; --text-2:#3B5145; --muted:#647A6E;
  --jade:#0A8862; --jade-ink:#04211A; --jade-soft:#DDEFE6;
  --alert-bg:#FBE9E7; --alert-line:#C0392B;
  --ff:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1512; --surface:#161F1B; --surface-2:#1D2A24;
    --line:#2A3A32; --line-soft:#243128;
    --text:#E6F0EA; --text-2:#B7C8BE; --muted:#8AA095;
    --jade:#12A074; --jade-ink:#D8F3E7; --jade-soft:#12291F;
    --alert-bg:#2A1614; --alert-line:#E06A5A;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1512; --surface:#161F1B; --surface-2:#1D2A24;
  --line:#2A3A32; --line-soft:#243128;
  --text:#E6F0EA; --text-2:#B7C8BE; --muted:#8AA095;
  --jade:#12A074; --jade-ink:#D8F3E7; --jade-soft:#12291F;
  --alert-bg:#2A1614; --alert-line:#E06A5A;
}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--ff);
  font-size:15px; line-height:1.85; -webkit-text-size-adjust:100%}
.wrap{max-width:760px; margin:0 auto; padding:28px 20px 56px}
header.hd{padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:26px}
header.hd .back{display:inline-block; font-size:12.5px; color:var(--jade); text-decoration:none; margin-bottom:10px}
header.hd .back:hover{text-decoration:underline}
h1{font-size:23px; line-height:1.4; letter-spacing:-.02em; margin:0}
h2{font-size:17px; letter-spacing:-.01em; margin:34px 0 10px; padding-top:16px; border-top:1px solid var(--line-soft)}
h2:first-of-type{border-top:0; padding-top:0}
h3{font-size:14.5px; margin:20px 0 6px; color:var(--text)}
p, li{color:var(--text-2)}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px; padding-left:1.4em}
li{margin-bottom:5px}
a{color:var(--jade)}
b,strong{color:var(--text)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--surface-2); padding:1px 5px; border-radius:4px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:15px 17px; margin:0 0 14px}
.card p:last-child, .card ul:last-child, .card ol:last-child{margin-bottom:0}
.lead{font-size:15.5px; color:var(--text)}
dl.kv{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13.5px}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0; color:var(--text-2)}
footer.ft{margin-top:40px; padding-top:16px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.7}
footer.ft p{margin:0 0 9px; color:var(--muted)}
footer.ft p:last-child{margin-bottom:0}
footer.ft a{color:var(--jade)}
footer.ft .ftx{padding:9px 11px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line-soft)}
footer.ft .ftx b{color:var(--text)}
footer.ft .ftc{font-size:10.5px}
.ftnav{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px}
.ftnav a{font-size:12px}
.upd{font-size:12px; color:var(--muted); margin-top:26px}

/* 問い合わせフォーム */
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:4px}
.field .hint{font-size:12px; color:var(--muted); margin:0 0 7px}
.field input, .field textarea{display:block; width:100%; padding:11px 13px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--text);
  font-family:var(--ff); font-size:16px; line-height:1.6}
.field textarea{min-height:160px; resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--jade);
  box-shadow:0 0 0 3px var(--jade-soft)}
.field #fCount{margin:6px 0 0; text-align:right}
.req{color:var(--jade); font-size:11px; margin-left:6px; letter-spacing:.06em}
.btn{appearance:none; -webkit-appearance:none; border:1px solid var(--jade);
  background:var(--jade); color:#FFF; font-family:var(--ff);
  font-size:15.5px; font-weight:700; padding:13px 26px; border-radius:9px; cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.5; cursor:default; filter:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{padding:12px 15px; border-radius:9px; margin-bottom:18px; font-size:14px; line-height:1.7}
.msg.ok{background:var(--jade-soft); border:1px solid var(--jade); color:var(--text)}
.msg.ng{background:var(--alert-bg); border:1px solid var(--alert-line); color:var(--text)}
@media (max-width:640px){
  body{font-size:14.5px}
  .wrap{padding:22px 16px 44px}
  h1{font-size:20px}
  h2{font-size:16px}
  dl.kv{grid-template-columns:1fr; gap:2px 0}
  dl.kv dt{margin-top:8px}
}