/* =====================
   Base & Tokens
===================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

/* ダーク背景と白文字を強制する - ホストCSSの上書き防止 */
.shopify-lp-page {
  background: #0b1020 !important;
  color: #e6ebf3 !important;
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:root{
  --container:1200px;
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --radius-6:6px;--radius-8:8px;--radius-12:12px;--radius-16:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 6px 24px rgba(0,0,0,.08);--shadow-lg:0 14px 42px rgba(0,0,0,.12);
  /* オリジナルの蛍光グリーン色 */
  --accent-700:#0a7f2e;--accent-600:#39ff14;--accent-500:#69f0ae;--accent-50:#06200c;
  --ink-900:#e6ebf3;--ink-700:#c7d0df;--ink-600:#afbbcf;--ink-500:#95a3bd;--ink-200:#2a3550;--ink-100:#17203b;
  --line-200:#233055;--bg-0:#0b1020;
  --success-600:#16a34a;--warning-600:#f59e0b;
}

/* Layout */
.container{max-width:var(--container);padding:0 var(--space-6);margin:0 auto}
.section{padding:var(--space-20) 0}
.section.tight{padding:var(--space-12) 0}
.grid{display:grid;gap:var(--space-8)}
@media(min-width:1024px){.grid-2{grid-template-columns:1.1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Typography */
h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:0 0 var(--space-4)}
h2{font-size:clamp(22px,3vw,28px);line-height:1.25;margin:0 0 var(--space-4)}
h3{font-size:clamp(18px,2.4vw,22px);line-height:1.3;margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-4)}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.muted{color:var(--ink-600)}

/* Hero */
.hero{padding:var(--space-24) 0 var(--space-16);background:
  radial-gradient(1200px 400px at 50% -10%, var(--accent-50), transparent 60%),
  linear-gradient(180deg, var(--bg-0), var(--bg-0))}
.kv{position:relative;aspect-ratio:16/9;border:1px solid var(--line-200);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
.kv .poster{position:absolute;inset:0;background:url('/img/kv_poster.jpg') center/cover no-repeat;filter:saturate(1.05)}
.kv .play{position:absolute;inset:auto 0 0 auto;margin:16px;background:rgba(15,23,42,.85);color:#fff;border:1px solid rgba(255,255,255,.1);padding:10px 14px;border-radius:12px;backdrop-filter:blur(6px)}

/* Buttons */
.btn{--bg:var(--accent-700);--fg:#fff;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;background:var(--bg);color:var(--fg);border:1px solid transparent;font-weight:600;box-shadow:var(--shadow-sm);transition:transform .06s ease,box-shadow .2s ease,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:focus-visible{outline:3px solid rgba(57,255,20,.35);outline-offset:2px}
.btn.secondary{--bg:transparent;--fg:var(--accent-600);border-color:var(--accent-600);box-shadow:none}
.btn.ghost{--bg:transparent;--fg:var(--ink-700);border-color:var(--line-200)}

/* Icon list */
.bullets{display:grid;gap:10px;margin:var(--space-6) 0}
@media(min-width:680px){.bullets{grid-template-columns:repeat(3,1fr)}}
.bullet{display:flex;gap:10px;align-items:flex-start}
.bullet svg{flex:0 0 auto;margin-top:2px}

/* Cards */
.card{border:1px solid var(--line-200);border-radius:14px;padding:var(--space-6);background:var(--bg-0);box-shadow:var(--shadow-sm)}
.card.soft{background:linear-gradient(180deg,rgba(57,255,20,.06),transparent)}

/* Feature rows */
.feature{display:flex;gap:var(--space-6)}
.feature .icon{flex:0 0 36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent-600),#b6ff00);box-shadow:var(--shadow-sm)}

/* Pricing */
.pricing{display:grid;gap:var(--space-8)}
@media(min-width:1024px){.pricing{grid-template-columns:repeat(4,1fr)}}
.price-card{border:1px solid var(--line-200);border-radius:16px;padding:var(--space-6);background:var(--bg-0);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.price{font-size:28px;font-weight:800}
.price small{font-size:14px;color:var(--ink-600)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--accent-50);color:var(--accent-600);font-weight:700;font-size:12px}

/* Process */
.steps{display:grid;gap:var(--space-6)}
@media(min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;border:1px dashed var(--line-200);border-radius:14px;padding:var(--space-6);background:var(--bg-0)}
.step .num{position:absolute;top:-12px;left:-12px;background:var(--accent-600);color:#fff;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;font-weight:800;box-shadow:var(--shadow-md)}

/* FAQ */
#faq .faq-list { margin-top: var(--space-6); }
#faq details{border:1px solid var(--line-200);border-radius:12px;padding:var(--space-4) var(--space-6);background:var(--bg-0)}
#faq details+details{margin-top:var(--space-4)}
#faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
#faq summary::-webkit-details-marker{display:none}
#faq summary .q{flex:1;font-weight:700}
#faq summary .pm{flex:0 0 18px;height:18px;position:relative}
#faq summary .pm::before,
#faq summary .pm::after{content:"";position:absolute;background:var(--ink-700);border-radius:1px}
#faq summary .pm::before{left:0;right:0;top:50%;height:2px;transform:translateY(-50%)}
#faq summary .pm::after{top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);transition:opacity .2s ease}
#faq details[open] summary .pm::after{opacity:0}
#faq .faq-body{overflow:hidden;height:auto}
@media (prefers-reduced-motion: no-preference){
  #faq .faq-body{transition:height .28s ease}
}

/* CTA band */
.cta-band{padding:var(--space-12);border:1px solid var(--line-200);border-radius:16px;display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;background:linear-gradient(180deg,var(--accent-50),transparent)}
@media(min-width:860px){.cta-band{flex-direction:row;justify-content:space-between;align-items:center}}

/* Footer */
footer{padding:var(--space-12) 0;border-top:1px solid var(--line-200);color:var(--ink-600)}

/* Floating CTA (SP) */
.float-cta{position:fixed;inset:auto 12px 12px 12px;display:flex;gap:12px;z-index:60}
@media(min-width:860px){.float-cta{display:none}}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#0b1020;color:#e6ebf3;padding:8px 12px;border-radius:8px;z-index:100;box-shadow:var(--shadow-md)}

/* ダイアログ背景を強制的にダーク */
dialog::backdrop {
  background-color: rgba(11, 16, 32, 0.9) !important;
}

dialog {
  background: #0b1020 !important;
  color: #e6ebf3 !important;
  border: 1px solid var(--line-200);
}

/* Utilities */
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-12{margin-top:var(--space-12)}.mt-16{margin-top:var(--space-16)}
.mb-0{margin-bottom:0}
.accent{color:var(--accent-600)}
.center{text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-200);border-radius:999px;background:var(--bg-0)}