/* ══════════════════════════════════════════
   宣伝のためのページ。道具は /app/ にある。
   ここは「押すかどうか」を決めてもらうためだけに作る。
   ══════════════════════════════════════════ */
:root{
  --bg:#FAFCFB; --card:#FFFFFF; --sunk:#EFF5F2;
  --ink:#141C19; --ink-2:#33433C; --dim:#65786F; --dim2:#93A49C;
  --line:#E2EAE6; --line2:#CBD9D3;
  --key:#2F8E68; --key-soft:#E2F1EA;
  --alert:#DD6244;
  --night:#0C1114;
  --shadow:0 1px 2px rgba(20,28,25,.05),0 10px 30px rgba(20,28,25,.06);
  --face:"Zen Maru Gothic","Hiragino Sans","Yu Gothic UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1214; --card:#161C1F; --sunk:#121719;
    --ink:#E9EEEB; --ink-2:#C8D2CD; --dim:#8B9A94; --dim2:#5F6E68;
    --line:#212A2D; --line2:#313D40;
    --key:#5FC79A; --key-soft:#14261F;
    --alert:#E8785C;
    --shadow:none;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1214; --card:#161C1F; --sunk:#121719;
  --ink:#E9EEEB; --ink-2:#C8D2CD; --dim:#8B9A94; --dim2:#5F6E68;
  --line:#212A2D; --line2:#313D40;
  --key:#5FC79A; --key-soft:#14261F;
  --alert:#E8785C;
  --shadow:none;
}

*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.9 var(--face);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 70px;}
p{margin:0 0 1.05em;}
h1,h2{font-weight:900;text-wrap:balance;letter-spacing:-.015em;}
a{color:var(--key);}

.hero{padding:66px 0 34px;text-align:center;}
.kicker{font-family:var(--face);font-size:14px;font-weight:700;letter-spacing:.04em;
  color:var(--dim);margin:0 0 18px;
  display:flex;align-items:center;justify-content:center;gap:9px;}
.logo{border-radius:8px;flex:none;}
h1{font-size:clamp(34px,8.4vw,60px);line-height:1.22;margin:0 0 20px;}
.lead{color:var(--dim);font-size:15.5px;max-width:27em;margin:0 auto;}
.lead strong{color:var(--ink-2);}

/* ── 実演 ── */
.demo{margin:36px 0 0;padding:0;}
/* 端末の画面に見立てた枠。暗色テーマだと地と同化するので線で縁を出す */
.dm{position:relative;background:var(--night);border-radius:18px;
  padding:34px 22px 30px;overflow:hidden;transition:background .25s;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 40px rgba(12,17,20,.18);}
.dm.alert{background:var(--alert);}
.dm-badge{position:absolute;top:13px;left:14px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;color:#5FC79A;}
.dm.warn .dm-badge{color:#F2A33C;} .dm.alert .dm-badge{color:#fff;}
/* 目。ふたつの弧が上下に閉じる。閉じきると横一本の線になる */
.eyes{display:flex;gap:26px;justify-content:center;margin:2px 0 18px;height:34px;align-items:center;}
.eyes i{display:block;width:44px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 50% 52%,#12191C 0 26%,#EAF0EE 27%);
  transition:height .32s cubic-bezier(.4,0,.2,1),border-radius .32s,background .3s;}
.dm.warn .eyes i{height:4px;border-radius:2px;background:#F2A33C;}
.dm.alert .eyes i{height:4px;border-radius:2px;background:#fff;}
.dm-state{margin:0;font-size:clamp(24px,6vw,34px);font-weight:900;color:#EAF0EE;}
.dm.alert .dm-state{color:#fff;}
.dm-sub{margin:7px 0 0;font-size:13px;color:#8494A0;}
.dm.alert .dm-sub{color:rgba(255,255,255,.9);}
.dm-bar{margin:20px auto 0;max-width:290px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.13);overflow:hidden;}
.dm-bar i{display:block;height:100%;width:0;background:#5FC79A;border-radius:99px;
  transition:width .1s linear,background .2s;}
.dm.warn .dm-bar i{background:#F2A33C;} .dm.alert .dm-bar i{background:#fff;}
.ways{display:flex;gap:8px;justify-content:center;margin-top:13px;flex-wrap:wrap;}
.way{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  padding:8px 17px;border-radius:99px;color:var(--dim2);
  background:var(--card);border:1px solid var(--line);transition:.18s;}
.way b{font-size:14px;}
.way.on{background:var(--alert);border-color:var(--alert);color:#fff;}
.demo figcaption{font-size:12.5px;color:var(--dim2);margin:13px 0 0;text-align:center;}

.cta{margin:34px 0 0;text-align:center;}
.go{display:inline-block;padding:18px 46px;border-radius:99px;background:var(--key);
  color:#fff;font-weight:900;font-size:17.5px;text-decoration:none;box-shadow:var(--shadow);}
.go:hover{opacity:.9;}
.cta-sub{display:block;font-size:12px;color:var(--dim2);margin-top:12px;}
.badge{display:inline-block;margin-top:20px;padding:7px 17px;border-radius:99px;
  background:var(--key-soft);color:var(--key);font-size:12.5px;font-weight:700;}

section{padding:40px 0;border-top:1px solid var(--line);}
h2{font-size:clamp(19px,4.4vw,25px);margin:0 0 8px;}
.note{color:var(--dim);font-size:13.5px;margin:0 0 22px;}

.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.case{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;box-shadow:var(--shadow);}
.case b{display:block;font-size:14.5px;margin-bottom:3px;}
.case span{font-size:12.5px;color:var(--dim);line-height:1.8;}
.caution{font-size:12.5px;color:var(--alert);margin:16px 0 0;}

.three{display:grid;gap:10px;}
.th{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:19px 21px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;}
.th-i{font-size:23px;color:var(--key);line-height:1.2;width:1.4em;text-align:center;}
.th b{grid-column:2;font-size:15.5px;}
.th p{grid-column:2;margin:5px 0 0;font-size:13px;color:var(--dim);line-height:1.85;}

.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.md{border-radius:14px;padding:18px 12px;text-align:center;border:1px solid transparent;}
.md b{display:block;font-size:19px;font-weight:900;margin-bottom:4px;}
.md span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;opacity:.7;}
.md p{margin:9px 0 0;font-size:11.5px;line-height:1.7;}
.md.haku{background:#F3F8F5;border-color:#D5E5DC;color:#1B2420;}
.md.haku b{color:#2F8E68;}
.md.kei{background:#0A0F12;border-color:#1B2A26;color:#9FB2AC;}
.md.kei b{color:#5ADCAA;font-family:var(--mono);}
.md.akari{background:#150F07;border-color:#33260F;color:#C7B393;}
.md.akari b{color:#FFC978;}

.priv{background:var(--key-soft);border:1px solid var(--key);border-radius:16px;
  padding:26px 26px;}
.priv h2{color:var(--key);margin-bottom:12px;}
.priv p{font-size:14px;color:var(--ink-2);}
.privlist{margin:0 0 14px;padding-left:1.2em;font-size:13.5px;color:var(--ink-2);line-height:2;}
.privnote{font-size:12.5px;color:var(--dim);margin:0;}

.limits{background:var(--sunk);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;font-size:13px;color:var(--dim);line-height:1.9;}
.limits strong{color:var(--ink-2);}
.limits ul{margin:0;padding-left:1.2em;}
.limits li{margin-bottom:.45em;}

/* ── ホーム画面に置く ── */
.howto{display:grid;gap:10px;}
.ht{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:19px 21px;box-shadow:var(--shadow);}
.ht b{font-size:15.5px;}
.ht-req{display:inline-block;margin-left:9px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:99px;background:var(--key-soft);color:var(--key);
  vertical-align:1px;}
.ht ol{margin:13px 0 0;padding-left:1.35em;font-size:13.5px;color:var(--ink-2);line-height:1.9;}
.ht li{margin-bottom:.5em;}
.ht li::marker{color:var(--key);font-weight:700;}
.ht-i{color:var(--dim2);font-size:12px;}
.ht code{font-family:var(--mono);font-size:.88em;
  background:var(--sunk);border:1px solid var(--line2);border-radius:4px;
  padding:1px 5px;color:var(--ink-2);}
.ht-note{margin:11px 0 0;font-size:12px;color:var(--dim);line-height:1.75;}

.lang-line{text-align:center;font-size:12.5px;color:var(--dim2);padding:16px 0 0;}
.tail{text-align:center;padding:44px 0 0;}
footer{padding:30px 0 0;border-top:1px solid var(--line);
  font-size:12px;color:var(--dim2);line-height:1.9;text-align:center;}
footer a{color:var(--dim);}