/* LP（/ と /jp/）の共通スタイル。以前は両ページに同じ <style> を複製していた。
   色は「選択ハイライト」1色だけを主役にする。Pluck が反応するのはテキストの選択なので、
   ページで唯一の色もそれに割り当て、ほかは墨と紙の濃淡で組む。
   書体はシステムフォント（SF / ヒラギノ）。Mac のユーティリティなので、アプリの UI と
   同じ書体で見せるほうが「入れたらこう見える」に近い。 */

:root{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#eceef2;
  --border:#d9dce2;
  --text:#16181d;
  --text-dim:#5b606b;
  --accent:#1f4fd1;
  --hl:#bcd4ff;
  --btn-bg:#16181d;
  --btn-text:#f5f6f8;
  --panel-bg:rgba(250,250,252,.88);
  --panel-hover:rgba(236,238,243,.95);
  --panel-line:rgba(0,0,0,.1);
  --panel-shadow:0 8px 24px rgba(20,24,40,.14);
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Hiragino Sans",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1b1c20;
    --surface:#232429;
    --surface-2:#2c2e34;
    --border:#34363d;
    --text:#ededef;
    --text-dim:#9a9ea8;
    --accent:#8eb0ff;
    --hl:#2f4c86;
    --btn-bg:#ededef;
    --btn-text:#1b1c20;
    --panel-bg:rgba(48,49,54,.86);
    --panel-hover:rgba(62,64,70,.92);
    --panel-line:rgba(255,255,255,.1);
    --panel-shadow:0 8px 24px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--hl); color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{max-width:880px; margin:0 auto; padding:0 24px}
@media (max-width:480px){ .wrap{padding:0 16px} }

/* ---- nav ---- */
.nav{padding:24px 0}
.nav .wrap{display:flex; align-items:center; gap:10px; justify-content:space-between}
.nav .brand{display:flex; align-items:center; gap:10px}
.mark{width:22px; height:22px; border-radius:6px; display:block; flex:none}
.word{font-family:var(--font-display); font-weight:700; font-size:1.05rem}
.nav .right{display:flex; align-items:center; gap:18px}
.nav-link, .lang-link{font-size:.9rem; color:var(--text-dim); text-decoration:none}
.nav-link:hover, .lang-link:hover{color:var(--text)}

/* ---- hero ---- */
.hero{padding:48px 0 80px}
h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(2.3rem,6vw,3.9rem); line-height:1.22; margin:0 0 28px;
}
/* 見出しを「いま選択されている」状態で見せる。ページで唯一の印象点なので、
   ほかの見出しや強調にはハイライトを使わない。読み込み時に一度だけ左から塗る
   （ドラッグで選んだときの見え方）。 */
.sel{
  background:linear-gradient(var(--hl),var(--hl)) no-repeat left center / 100% 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .08em; border-radius:2px;
  animation:sel-drag .9s cubic-bezier(.3,.7,.3,1) .25s both;
}
@keyframes sel-drag{from{background-size:0% 100%} to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){ .sel{animation:none} }

.sub{font-size:1.125rem; color:var(--text-dim); max-width:38em; margin:0 0 36px}
:lang(ja) .sub{max-width:33em}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px}
.btn{
  display:inline-flex; align-items:center; padding:.8em 1.3em;
  border-radius:8px; text-decoration:none; font-weight:600; font-size:1rem;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--btn-bg); color:var(--btn-text)}
.btn-primary:hover{opacity:.88}
.btn-secondary{border-color:var(--border); color:var(--text); background:transparent}
.btn-secondary:hover{border-color:var(--text-dim)}
.fine{font-size:.85rem; color:var(--text-dim); margin:0; max-width:46em}
.fine a{color:var(--text-dim); text-decoration:underline; text-underline-offset:2px}
.fine a:hover{color:var(--text)}
.fine + .fine{margin-top:6px}
.caution{
  margin:20px 0 0; font-size:.88rem; color:var(--text-dim); max-width:46em;
  border-left:2px solid var(--border); padding-left:14px;
}
.caution a{text-decoration:underline; text-underline-offset:2px}

.mock{
  margin-top:56px; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; line-height:0; background:#1b1c20;
}
.mock video{display:block; width:100%; height:auto}

/* ---- sections ---- */
section{padding:72px 0; border-top:1px solid var(--border)}
h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.55rem,3.2vw,1.95rem); line-height:1.35; margin:0 0 32px;
}
kbd{
  font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:5px; padding:.05em .45em; font-size:.82em; white-space:nowrap;
}

/* できること・設計思想: カードを並べず、見出しと説明の2段組の一覧にする。
   項目どうしに優劣はないので、同じ罫線で淡々と区切る。 */
.features{margin:0; border-top:1px solid var(--border)}
.feature{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:8px 32px;
  padding:20px 0; border-bottom:1px solid var(--border);
}
.feature .ttl{font-weight:600; line-height:1.6}
.feature p{margin:0; color:var(--text-dim); font-size:.95rem; max-width:36em}
@media (max-width:640px){ .feature{grid-template-columns:1fr; gap:4px} }

/* 使い方: こちらは本当に順番があるので番号を大きく出す。 */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
@media (max-width:720px){ .steps{grid-template-columns:1fr; gap:24px} }
.step .num{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:3rem; line-height:1; color:var(--text-dim); margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.step .ttl{font-weight:600; margin:0 0 6px}
.step p{margin:0; color:var(--text-dim); font-size:.95rem}

/* 値段 */
.price-card{max-width:40em}
.price-top{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.price{font-family:var(--font-display); font-size:3.4rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.price-note{color:var(--text-dim); margin:0 0 28px}
.plist{list-style:none; margin:0 0 28px; padding:0; border-top:1px solid var(--border)}
.plist li{padding:12px 0; border-bottom:1px solid var(--border); font-size:.95rem}
.plist li.caveat{color:var(--text-dim)}

/* その他 */
.meta-list{margin:0; padding:0 0 0 1.1em; display:grid; gap:12px; max-width:44em}
.meta-list li{font-size:.95rem; color:var(--text-dim); padding-left:.3em}
.meta-list li::marker{color:var(--border)}
.meta-list a{text-decoration:underline; text-underline-offset:2px}
.meta-list a:hover{color:var(--text)}

footer{padding:40px 0 64px; border-top:1px solid var(--border); color:var(--text-dim); font-size:.85rem}
footer .links{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px}
footer .links a{text-decoration:none; color:var(--text-dim)}
footer .links a:hover{color:var(--text)}

/* 見出しと段落1つだけの節。.sub の下余白（ヒーロー用）は不要。 */
.sub.lead-only{margin:0}