:root{
      --brand:#0ea5e9;            /* メインカラー（変更OK） */
      --brand-ink:#0b78a6;        /* 濃いめの補助色 */
      --bg: #0b0f14;              /* 背景（ダーク寄り） */
      --panel:#0f141b;            /* カード背景 */
      --ink:#e8eef5;              /* 文字色 */
      --muted:#9fb2c7;            /* サブテキスト */
      --ok:#22c55e;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-lg: 22px;
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f8fafc; --panel:#ffffff; --ink:#0b1220; --muted:#5b6b7c; }
      body{ background-image: radial-gradient(80vw 50vh at 10% -10%, #c7ebff40, transparent), radial-gradient(60vw 40vh at 90% 0%, #a7f3d040, transparent);}  
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; 
    background:var(--bg); color:var(--ink); line-height:1.6;
  }
    a{color:#3b82f6; text-decoration:underline; text-underline-offset:0.15em; text-decoration-thickness:1.5px; transition:color .15s ease}
a:hover{color:#2563eb}
a:active{color:#1d4ed8}
a:visited{color:#3b82f6}
    img{max-width:100%; display:block}
    .container{width:min(1100px, 92%); margin-inline:auto}

    /* Header */
    header{position:sticky; top:0; z-index:60; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 70%, transparent); border-bottom:1px solid color-mix(in oklab, var(--ink) 15%, transparent);} 
    .nav{display:flex; align-items:center; justify-content:flex-start; gap:.9rem; padding:.9rem 0}
    .logo{display:flex; align-items:center; gap:.7rem; font-weight:700}
    .logo .mark{width:36px; height:36px; border-radius:10px; box-shadow: var(--shadow)}

    /* Buttons */
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent; transition:transform .08s ease, box-shadow .2s ease, background .2s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 86%, white), var(--brand)); color:#fff; box-shadow:0 8px 24px color-mix(in oklab, var(--brand) 30%, transparent)}
    .btn-ghost{background:transparent; border-color:color-mix(in oklab, var(--ink) 20%, transparent)}

    /* Hamburger */
    .hamburger{appearance:none; background:transparent; border:0; display:inline-grid; gap:4px; padding:8px; border-radius:10px; cursor:pointer}
    .hamburger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px}
    .hamburger:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent)}

    /* Drawer */
    .drawer{position:fixed; inset:0 auto 0 0; width:min(320px, 86vw); height:100vh; background:var(--panel); border-right:1px solid color-mix(in oklab, var(--ink) 12%, transparent); box-shadow:var(--shadow); transform:translateX(-102%); transition:transform .25s ease; z-index:80; display:flex; flex-direction:column}
    .drawer.open{transform:translateX(0)}
    .drawer-header{display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid color-mix(in oklab, var(--ink) 12%, transparent)}
    .drawer-header .mini{font-weight:700; display:flex; align-items:center; gap:.6rem}
    .drawer-close{appearance:none; background:transparent; border:0; font-size:24px; line-height:1; color:var(--ink); padding:6px 10px; border-radius:10px; cursor:pointer}
    .drawer-nav{padding:8px 10px 20px; overflow:auto}
    .drawer-group{padding:10px 6px 14px}
    .drawer-cat{font-weight:800; color:var(--muted); letter-spacing:.04em; padding:10px 8px 6px}
    .drawer-list{margin:0; padding:0 0 0 8px; list-style:none}
    .drawer-list li a{display:block; padding:10px 10px; border-radius:10px; border:1px solid transparent}
    .drawer-list li a:hover{background:color-mix(in oklab, var(--ink) 8%, transparent); border-color:color-mix(in oklab, var(--ink) 10%, transparent)}

    /* Backdrop */
    .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); -webkit-tap-highlight-color:transparent; z-index:70; display:none}
    .backdrop.show{display:block}

    /* Hero */
    .hero{position:relative; overflow:hidden; padding: clamp(56px, 6vw, 100px) 0}
    .hero .grid{display:grid; grid-template-columns: .8fr 1.2fr; gap:min(6vw, 40px); align-items:center}
    .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; padding:.35rem .6rem; border-radius:999px; background:color-mix(in oklab, var(--brand) 18%, transparent); color:color-mix(in oklab, var(--brand) 90%, white)}
    .hero h1{font-size: clamp(32px, 6vw, 56px); line-height:1.08; margin:.8rem 0;font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;}
    .comicglass{font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;}
    .hero p{font-size: clamp(15px, 2.2vw, 18px); color:var(--muted); margin: 0 0 1.2rem 0}
    .store-badges{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top:.8rem}
    .badge{display:inline-block; padding:0; border:0; border-radius:0; background:transparent; line-height:0}
    .badge svg{width:18px; height:18px}

    .mock{position:relative; border:0; background:none; box-shadow:none; border-radius:0; width:100%;}
    .mock::after{content:none}

    /* Hero tweaks */
    .hero .grid > :first-child{max-width:520px}
    .mock img{width:100%;height:auto;display:block}
    .badge img{height:48px;width:auto;vertical-align:middle}
    @media (max-width:640px){.badge img{height:44px}}

    /* Features */
    section{padding: clamp(40px, 5vw, 84px) 0}
    .section-title{font-size: clamp(22px, 3vw, 34px); margin:0 0 1rem; line-height:1.2;}
    .muted{color:var(--muted)}
    .features{display:grid; gap:16px; grid-template-columns: repeat(12, 1fr)}
    .card{grid-column: span 4; background:var(--panel); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius: var(--radius); padding:20px; box-shadow: var(--shadow);}
    .card h3{margin:.2rem 0 .3rem; font-size:1.12rem}
    .chip{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; padding:.28rem .6rem; border-radius:999px; background:color-mix(in oklab, var(--ink) 10%, transparent); color:var(--muted);}

    /* Screenshots */
    .shots{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
    .shot{aspect-ratio:131/284; border-radius:18px; border:1px solid color-mix(in oklab, var(--ink) 15%, transparent); background:none; position:relative; overflow:hidden}
    .shot::after{content:none}

    /* Reviews */
    .reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .review{background:var(--panel); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius:var(--radius); padding:18px}
    .stars{letter-spacing:.15em; color:#fbbf24}

    /* FAQ */
    .faq{display:grid; gap:10px}
    details{background:var(--panel); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius:14px; padding:14px}
    details[open]{border-color: color-mix(in oklab, var(--brand) 30%, var(--panel))}
    summary{cursor:pointer; list-style:none; font-weight:700}
    summary::-webkit-details-marker{display:none}

    /* Footer */
    footer{padding:40px 0; border-top:1px solid color-mix(in oklab, var(--ink) 14%, transparent); color:var(--muted)}

    /* Responsive */
    @media (max-width: 980px){
      .hero .grid{grid-template-columns: 1fr;}
      .card{grid-column: span 6}
      .shots{grid-template-columns: repeat(2,1fr)}
      .reviews{grid-template-columns: repeat(2,1fr)}
    }
    @media (max-width: 640px){
      .card{grid-column: span 12}
      .shots{grid-template-columns: repeat(2, 1fr)}
      .reviews{grid-template-columns: 1fr}
      .nav-links{display:none}
    }

    /* Accessibility & scroll lock */
    .drawer :focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent); outline-offset:2px}
    body.no-scroll{overflow:hidden}
  
    /* Top-right inline menu */
    .top-links{margin-left:auto;display:flex;gap:1rem;align-items:center;flex-wrap:nowrap}
    .top-links a{font-weight:600;opacity:.92;white-space:nowrap}
    /* 画面幅が足りないときは非表示（左のハンバーガーを利用） */
    @media (max-width: 860px){
      .top-links{display:none}
    }
  
    /* Language switch */
    .lang-switch, .drawer-lang{display:inline-flex;align-items:center;gap:.4rem}
    .drawer-lang{display:flex;padding:10px 14px;border-bottom:1px solid color-mix(in oklab, var(--ink) 12%, transparent)}
    .lang-switch a, .drawer-lang a{font-weight:700;padding:.25rem .55rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
    .lang-switch a:hover, .drawer-lang a:hover{background:color-mix(in oklab, var(--ink) 8%, transparent);border-color:color-mix(in oklab, var(--ink) 10%, transparent)}
    .lang-switch .sep, .drawer-lang .sep{opacity:.6}
  
    /* Active language state */
    .lang-switch a.is-active, .drawer-lang a.is-active,
    .lang-switch a[aria-current="true"], .drawer-lang a[aria-current="true"]{
      background:color-mix(in oklab, var(--brand) 22%, transparent);
      border-color:color-mix(in oklab, var(--brand) 40%, transparent);
    }
  
    /* More features (clean list) */
    .more-features{margin-top:8px}
    .mf-grid{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
    @media (max-width: 720px){.mf-grid{grid-template-columns:1fr}}
    .mf-item{display:flex;gap:.6rem;align-items:flex-start;background:var(--panel);border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);border-radius:12px;padding:10px 12px}
    .mf-item .tick{line-height:1;color:var(--ok);margin-top:.15rem}
    .mf-item .label{color:var(--ink)}
    .mf-item .sub{display:inline; color:var(--muted)}
    .pill{display:inline-flex;align-items:center;gap:.3rem;padding:.08rem .5rem;border-radius:999px;background:color-mix(in oklab, var(--brand) 28%, transparent);border:1px solid color-mix(in oklab, var(--brand) 40%, transparent);font-size:.75rem;font-weight:700;margin-right:.35rem}
  
    /* Smart FAQ link */
    .faq-cta{margin-top:12px}
    .cta-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:color-mix(in oklab,var(--panel) 92%,transparent);border:1px solid color-mix(in oklab,var(--ink) 12%,transparent);transition:transform .12s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
    .cta-card:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--brand) 42%,transparent);box-shadow:0 8px 24px color-mix(in oklab,var(--brand) 20%,transparent)}
    .cta-left{display:flex;align-items:center;gap:10px}
    .cta-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in oklab,var(--brand) 22%,transparent);color:color-mix(in oklab,var(--brand) 92%,white)}
    .cta-text{display:inline-flex;gap:.4rem;align-items:baseline}
    .cta-text .sub{color:var(--muted);margin-left:.25rem}
    .cta-arrow{opacity:.8}
  
    /* Screenshot images */
    .shot img{width:100%;height:100%;object-fit:cover;display:block}
  
    /* Explicit blue link style (apply to <a class="text-link">) */
    a.text-link{
      color:#3b82f6; /* clickable blue */
      text-decoration:underline;
      text-underline-offset:0.15em;
      text-decoration-thickness:1.5px;
      transition:color .15s ease;
    }
    a.text-link:hover{color:#2563eb}
    a.text-link:active{color:#1d4ed8}
    a.text-link:visited{color:#3b82f6} /* keep same color for consistency */
    a.text-link:focus-visible{outline:2px solid #60a5fa; outline-offset:2px; border-radius:4px}
  
    /* Keep original styling where needed */
    a.link-neutral{color:inherit; text-decoration:none}
    a.link-neutral:hover, a.link-neutral:active, a.link-neutral:visited{color:inherit; text-decoration:none}
    a.link-neutral:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 50%, transparent); outline-offset:2px; border-radius:4px}