/* 会員登録ページ(試作)の見た目。index.html と touroku.php の両方がこの1枚を使う。
   色は今のホームページ(index.html)と同じ値。
   外のフォント(Google Fonts)は読まない: 読むと見た人の通信が Google に行くため
   (品質保証部 2026-10-18「外部の解析・広告を入れない」に寄せた。字の形だけ少し変わる) */
:root{
  --bg:#f2ede0; --panel:#fbf8f0; --ink:#221c14; --ink-soft:#6b6152;
  --line:#ddd3bd; --accent:#c8620f; --teal:#2f6b63; --teal-soft:#e4efec;
  --field:#fffdf7; --warn:#a33a1a; --warn-soft:#f6e3db;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14120e; --panel:#1c1811; --ink:#ece4d4; --ink-soft:#9a8f79;
    --line:#33291d; --accent:#f0952e; --teal:#4fa89c; --teal-soft:#1a2c29;
    --field:#211c14; --warn:#f08a6a; --warn-soft:#2c1a14;
  }
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif;
  line-height:1.8; font-size:16px;
}
a{color:var(--accent);}
.wrap{max-width:640px; margin:0 auto; padding:0 1.2rem;}
.mono{font-family:ui-monospace,"SFMono-Regular",Consolas,"Courier New",monospace;}

header{border-bottom:1px solid var(--line); background:var(--bg);}
.nav{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; padding-top:.9rem; padding-bottom:.9rem;}
.nav .mark{font-weight:800; letter-spacing:.06em; color:var(--ink); text-decoration:none;}
.nav .sub{font-size:.75rem; color:var(--ink-soft);}
.nav .home{margin-left:auto; align-self:center; font-size:.85rem; font-weight:700; color:var(--accent); text-decoration:none; border:1px solid var(--accent); border-radius:999px; padding:.3rem .9rem; white-space:nowrap;}

.trial{background:var(--warn-soft); color:var(--warn); font-size:.82rem; text-align:center; padding:.35rem .8rem;}

main{padding:1.8rem 0 2.5rem;}
.eyebrow{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700;}
h1{font-size:1.6rem; font-weight:900; margin:.2rem 0 .6rem;}
.lead{color:var(--ink-soft); margin:0 0 1.4rem;}

.unit{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:1.1rem 1.2rem; margin-bottom:1.2rem;
}
.unit .label{font-size:.8rem; color:var(--ink-soft);}
.unit .sn{font-size:1.9rem; font-weight:700; letter-spacing:.04em; color:var(--accent); line-height:1.3;}
.unit .product{font-size:.88rem; color:var(--ink-soft);}
.unit button{margin-top:.4rem; background:none; border:none; padding:0; color:var(--accent); font:inherit; font-size:.82rem; cursor:pointer; text-decoration:underline;}

.vform{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.2rem;
  display:flex; flex-direction:column; gap:1rem;
}
.vfield{display:flex; flex-direction:column; gap:.3rem;}
.vfield label{font-size:.88rem; font-weight:700;}
.vfield .opt{color:var(--ink-soft); font-weight:500; font-size:.78rem;}
.vfield .hint{color:var(--ink-soft); font-size:.78rem;}
.vfield input{
  width:100%; min-width:0;
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--field); border:1px solid var(--line); border-radius:6px; padding:.65rem .7rem;
}
.vfield input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.free{background:var(--teal-soft); color:var(--ink); border-radius:8px; padding:.7rem .9rem; font-size:.86rem;}
.free b{color:var(--teal);}

.uses{border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; font-size:.86rem; background:var(--field);}
.uses p{margin:0;}
.uses .uses-h{font-weight:700;}
.uses ul{margin:.2rem 0 .4rem; padding-left:1.2rem;}
.uses .uses-c{color:var(--ink-soft); font-size:.8rem; word-break:break-all;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.4rem; border-radius:4px;
  font:inherit; font-weight:700; font-size:1rem; border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  background:var(--accent); color:#1c1408;
}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn:disabled{opacity:.6; cursor:default;}
.vnote{font-size:.8rem; color:var(--ink-soft); margin:0;}

details.privacy{margin-top:1.4rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.9rem 1.2rem;}
details.privacy summary{cursor:pointer; font-weight:700;}
details.privacy h2{font-size:1rem; margin:1rem 0 .3rem;}
details.privacy p, details.privacy li{font-size:.88rem; color:var(--ink-soft);}
details.privacy ul{padding-left:1.2rem; margin:.3rem 0;}

.result{border-radius:12px; padding:1.3rem 1.2rem; border:1px solid var(--line); background:var(--panel);}
.result.ok{background:var(--teal-soft); border-color:var(--teal);}
.result.ok h1{color:var(--teal);}
.result.ng{background:var(--warn-soft); border-color:var(--warn);}
.result.ng h1{color:var(--warn);}
.result dl{display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; margin:.8rem 0;}
.result dt{color:var(--ink-soft); font-size:.88rem;}
.result dd{margin:0; font-weight:700; word-break:break-all;}

footer{padding:1.6rem 0 2.4rem; text-align:center; color:var(--ink-soft); font-size:.8rem; border-top:1px solid var(--line);}

/* この機械の説明のページ(kiki.html)2026-10-25 */
.kbox{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.9rem 1.2rem; margin-bottom:1rem;}
.kbox h2{font-size:.95rem; margin:0 0 .3rem; color:var(--teal);}
.kbox p{margin:0 0 .3rem;}
.kbox.reg .btn{margin-top:.5rem;}
.notice{background:var(--warn-soft); color:var(--warn); border-radius:8px; padding:.7rem .9rem; font-size:.9rem;}
.contact{color:var(--ink-soft); font-size:.82rem; margin-top:1.4rem; word-break:break-all;}
.unit .more{display:inline-block; margin-top:.3rem; font-size:.82rem;}