@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@500;700&display=swap');

  :root{
    --paper:#f6f7fb;
    --paper-raised:#ffffff;
    --ink:#10131c;
    --ink-soft:#454b5e;
    --line:#dde1ee;
    --blue-900:#0c1650;
    --blue-700:#1c3fd9;
    --blue-600:#3153ea;
    --blue-400:#7690ff;
    --blue-100:#e6ebff;
    --amber-500:#e9982f;
    --amber-100:#fdecd2;
    --good:#1f9d63;
    --shadow: 0 24px 60px -30px rgba(12,22,80,0.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0b0d16;
      --paper-raised:#131628;
      --ink:#f2f4fb;
      --ink-soft:#aab0c8;
      --line:#262b45;
      --blue-900:#060a2c;
      --blue-700:#3153ea;
      --blue-600:#4f6bff;
      --blue-400:#8fa2ff;
      --blue-100:#1b2352;
      --amber-500:#f0a83f;
      --amber-100:#3a2c14;
      --good:#3ec48a;
      --shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0b0d16;
    --paper-raised:#131628;
    --ink:#f2f4fb;
    --ink-soft:#aab0c8;
    --line:#262b45;
    --blue-900:#060a2c;
    --blue-700:#3153ea;
    --blue-600:#4f6bff;
    --blue-400:#8fa2ff;
    --blue-100:#1b2352;
    --amber-500:#f0a83f;
    --amber-100:#3a2c14;
    --good:#3ec48a;
    --shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.disp{
    font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
    font-weight:900;
    letter-spacing:.01em;
    margin:0;
  }
  .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
  a{ color:inherit; }
  img{max-width:100%;}
  section{ position:relative; }
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,48px);
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px clamp(20px,5vw,48px);
    max-width:1080px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
  .brand .mark{
    width:34px; height:34px; border-radius:50%;
    background:conic-gradient(from 220deg, var(--blue-400), var(--blue-700) 60%, var(--blue-900));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:1rem;
    flex:none;
  }
  .brand-text{ display:flex; flex-direction:column; line-height:1.2; }
  .brand-text b{ font-size:.98rem; }
  .brand-text span{ font-size:.72rem; color:var(--ink-soft); letter-spacing:.04em; }
  nav.links{ display:flex; gap:28px; font-size:.88rem; font-weight:500; }
  nav.links a{ text-decoration:none; color:var(--ink-soft); transition:color .15s; }
  nav.links a:hover{ color:var(--ink); }
  .navcta{ display:flex; align-items:center; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    border-radius:999px;
    padding:.85em 1.6em;
    font-weight:700;
    font-size:.92rem;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn:focus-visible{ outline:3px solid var(--blue-400); outline-offset:2px; }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  :root[data-theme="dark"] .btn-primary,
  @media (prefers-color-scheme: dark){ }
  .btn-primary{ background:var(--blue-700); color:#fff; box-shadow:var(--shadow); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-sm{ padding:.6em 1.2em; font-size:.82rem; }

  /* ---------- hero ---------- */
  .hero{
    background:
      radial-gradient(120% 90% at 15% 0%, var(--blue-400) 0%, transparent 55%),
      linear-gradient(155deg, var(--blue-900) 0%, var(--blue-700) 46%, var(--blue-600) 68%, var(--paper) 100%);
    color:#fff;
    padding:clamp(64px,10vw,120px) 0 160px;
    padding-bottom: 0px;
    overflow:hidden;
  }
  .hero .wrap{ position:relative; z-index:2; }
  .hero-eyebrow{ color:#dbe4ff; }
  .hero h1{
    font-size:clamp(2.1rem, 4.6vw, 3.3rem);
    line-height:1.28;
    margin:.6em 0 .5em;
  }
  .hero h1 .hl{ color:var(--amber-500); }
  .hero p.lead{
    font-size:clamp(1rem,1.5vw,1.15rem);
    color:#e4e8ff;
    max-width:38em;
    margin:0 0 2em;
  }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2.6em; }
  .hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }

  .versionrow{
    display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px;
    font-size:.85rem; color:#dbe4ff;
  }
  .vchip{
    display:inline-flex; align-items:center;
    padding:.4em .9em; border-radius:999px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.28);
  }
  .vchip.old{ color:#ffd9a8; border-color:rgba(255,196,120,.5); }
  .vchip.now{ background:rgba(255,255,255,.92); color:var(--blue-900); font-weight:700; border-color:transparent; }
  .varrow{ opacity:.7; }

  .wave{ display:block; width:100%; line-height:0; margin-top:-2px; }
  .wave-flip{ transform:scaleY(-1); }

  /* ---------- section shells ---------- */
  .section{ padding:clamp(56px,9vw,104px) 0; }
  .section-dark{ background:var(--blue-900); color:#eef1ff; }
  .section-dark .ink-soft{ color:#aab4ea; }
  .kicker{ color:var(--blue-600); }
  .section-dark .kicker{ color:var(--blue-400); }
  h2.title{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin:.4em 0 .5em; }
  p.desc{ color:var(--ink-soft);font-size:1.02rem; }
  .section-dark p.desc{ color:#c3caee; }

  /* ---------- risk cards ---------- */
  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2.6em; }
  @media (max-width:820px){ .grid3{ grid-template-columns:1fr; } }
  .card{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:20px;
    padding:28px 26px;
  }
  .card .num{
    font-family:"JetBrains Mono",monospace;
    font-size:.78rem; font-weight:700;
    color:var(--amber-500);
    letter-spacing:.06em;
  }
  .card h3{ font-size:1.08rem; margin:.6em 0 .5em; font-weight:700; font-family:"Zen Kaku Gothic New"; }
  .card p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

  /* ---------- timeline ---------- */
  .timeline-wrap{
    margin-top:3em;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:24px;
    padding:clamp(24px,4vw,44px);
  }
  .timeline-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:1.8em; }
  .timeline-head h3{ font-size:1.15rem; }
  .timeline-head .badge{
    font-family:"JetBrains Mono",monospace; font-size:.78rem; font-weight:700;
    color:#8a4a09; background:var(--amber-100); padding:.4em .8em; border-radius:999px;
  }
  :root[data-theme="dark"] .timeline-head .badge{ color:var(--amber-500); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .timeline-head .badge{ color:var(--amber-500);} }

  .track{ position:relative; height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin:0 6px; }
  .track .fill{ position:absolute; inset:0 70% 0 0; background:linear-gradient(90deg, var(--amber-500), var(--blue-600)); border-radius:999px; }
  .stops{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:14px; }
  .stop{ text-align:center; font-family:"JetBrains Mono",monospace; font-size:.86rem; font-weight:700; position:relative; }
  .stop.here{ color:var(--amber-500); }
  .stop.target{ color:var(--good); }
  .stop small{ display:block; font-family:"Noto Sans JP"; font-weight:500; color:var(--ink-soft); font-size:.72rem; margin-top:.3em; }

  .stack-compare{ display:flex; gap:28px; flex-wrap:wrap; margin-top:2.2em; }
  .stack-compare .col{ flex:1 1 220px; }
  .stack-compare .col h4{ font-size:.85rem; color:var(--ink-soft); font-weight:700; margin:0 0 .6em; text-transform:uppercase; letter-spacing:.06em; }
  .stack-compare .col .val{ font-family:"JetBrains Mono",monospace; font-size:1.5rem; font-weight:700; }
  .stack-compare .col.risk .val{ color:var(--amber-500); }
  .stack-compare .col.safe .val{ color:var(--good); }

  /* ---------- solution ---------- */
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:2.6em; }
  @media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }
  .solcard{
    border-radius:22px; padding:30px 28px;
    background:linear-gradient(160deg, var(--blue-100), var(--paper-raised) 60%);
    border:1px solid var(--line);
  }
  .solcard .step{ font-family:"JetBrains Mono",monospace; color:var(--blue-600); font-weight:700; font-size:.85rem; }
  .solcard h3{ font-size:1.25rem; margin:.5em 0 .5em; font-family:"Zen Kaku Gothic New";color: #000; }
  .solcard p{ color:var(--ink-soft); margin:0; font-size:.94rem; }

  /* ---------- pricing ---------- */
  .price-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:22px; margin-top:2.8em; align-items:stretch; }
  @media (max-width:820px){ .price-grid{ grid-template-columns:1fr; } }
  .pricecard{
    border-radius:24px; padding:32px 30px;
    display:flex; flex-direction:column; gap:1.1em;
  }
  .pricecard.old{ background:var(--paper-raised); border:1px solid var(--line); opacity:.85; }
  .pricecard.new{
    background:linear-gradient(160deg, var(--blue-700), var(--blue-900));
    color:#fff; box-shadow:var(--shadow); position:relative;
  }
  .pricecard.new::before{
    content:"おすすめプラン";
    position:absolute; top:-14px; left:28px;
    background:var(--amber-500); color:#3a1f00;
    font-size:.74rem; font-weight:700; padding:.4em .9em; border-radius:999px;
  }
  .pricecard h3{ font-size:1rem; font-weight:700; color:var(--ink-soft); }
  .pricecard.new h3{ color:#cfd8ff; }
  .pricecard .price{ font-family:"JetBrains Mono",monospace; font-weight:700; }
  .pricecard .price .big{ font-size:2.6rem; }
  .pricecard .price .unit{ font-size:.95rem; font-weight:500; }
  .pricecard .initial{ font-size:.85rem; color:var(--ink-soft); }
  .pricecard.new .initial{ color:#cfd8ff; }
  .pricecard ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6em; font-size:.9rem; }
  .pricecard li{ display:flex; gap:.6em; align-items:flex-start; }
  .pricecard li::before{ content:"✓"; font-weight:700; color:var(--good); flex:none; }
  .pricecard.new li::before{ color:#a9ffce; }
  .pricecard .btn{ margin-top:auto; }

  /* ---------- about ---------- */
  .about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; margin-top:2.4em; }
  @media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
  .stat{ display:flex; flex-direction:column; gap:.2em; padding:18px 0; border-top:1px solid var(--line); }
  .stat .n{ font-family:"JetBrains Mono",monospace; font-size:1.6rem; font-weight:700; color:var(--blue-600); }
  .section-dark .stat{ border-color:#262b45; }
  .section-dark .stat .n{ color:var(--blue-400); }
  .stat span{ font-size:.84rem; color:var(--ink-soft); }
  .section-dark .stat span{ color:#aab4ea; }

  /* ---------- CTA / contact ---------- */
  .contact{
    border-radius:28px;
    padding:clamp(32px,5vw,56px);
    background:linear-gradient(160deg, var(--blue-700), var(--blue-900));
    color:#fff;
    display:grid; grid-template-columns:1.2fr 1fr; gap:36px;
  }
  @media (max-width:820px){ .contact{ grid-template-columns:1fr; } }
  .contact h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.5em; }
  .contact p{ color:#dbe4ff; max-width:34em; }
  .contact-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.4em; }
  .contact .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
  .contact-info{ display:flex; flex-direction:column; gap:14px; font-size:.92rem; }
  .contact-info .row{ display:flex; gap:.7em; }
  .contact-info .row b{ min-width:5.5em; color:#cfd8ff; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }

  footer{ padding:44px 0 60px; }
  .footgrid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; font-size:.84rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:28px; }
  .footgrid .fbrand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; }
  .footlinks{ display:flex; gap:22px; flex-wrap:wrap; }
  .footlinks a{ text-decoration:none; color:var(--ink-soft); }
  .footlinks a:hover{ color:var(--ink); }

  @media (prefers-reduced-motion: no-preference){
    .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
    .reveal.in{ opacity:1; transform:none; }
  }