:root {
    --color-primary:#3dba90; --color-primary-hover:#32a77f; --color-primary-active:#278b6b;
    --color-primary-soft:#e8f8f2; --color-primary-soft-2:#d6f2e8; --color-primary-border:#a9e4cf;
    --color-bg:#ffffff; --color-bg-soft:#F7FCFB; --color-surface:#ffffff;
    --color-text:#10201a; --color-text-muted:#3a4a43; --color-text-subtle:#84908b;
    --color-border:#e4e8e6; --color-border-soft:#eef0ee;
    --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-xl:24px; --radius-pill:999px;
    --shadow-soft:0 8px 24px rgba(16,32,26,0.06); --shadow-card:0 16px 40px rgba(16,32,26,0.08);
    --shadow-cta:0 10px 24px rgba(61,186,144,0.28);
    --ease-standard:cubic-bezier(.2,.8,.2,1); --duration-fast:160ms; --duration-base:240ms;
  }
  html { scroll-behavior:smooth; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif; color:var(--color-text); background:var(--color-bg); line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased; }
  :focus-visible { outline:3px solid rgba(61,186,144,.45); outline-offset:3px; border-radius:4px; }

  /* NAV */
  html { overflow-x:hidden; }
  body { overflow-x:hidden; padding-top:88px; }
  nav { position:fixed; top:0; left:0; right:0; z-index:100; background:#fff; box-shadow:0 4px 24px rgba(61,186,144,0.08); padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:88px; }
  nav > * { max-width:none; margin:0; }
  .nav-logo { text-decoration:none; display:flex; align-items:center; flex-shrink:0; }
  .nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
  .nav-links a { text-decoration:none; color:var(--color-text); font-size:14px; font-weight:700; transition:color var(--duration-fast); }
  .nav-links a:hover { color:var(--color-primary); }
  .nav-links a.is-active { color:var(--color-primary); }
  .nav-actions { display:flex; align-items:center; gap:10px; }
  .btn-login { font-size:14px; font-weight:500; color:var(--color-text); text-decoration:none; padding:10px 18px; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface); transition:background var(--duration-fast),border-color var(--duration-fast); }
  .btn-login:hover { background:var(--color-bg-soft); border-color:var(--color-primary-border); }
  .btn-trial { font-size:14px; font-weight:700; color:#fff; text-decoration:none; padding:11px 22px; background:var(--color-primary); border-radius:var(--radius-pill); box-shadow:var(--shadow-cta); transition:background var(--duration-base),transform var(--duration-fast); }
  .btn-trial:hover { background:var(--color-primary-hover); }
  nav.logged-in .btn-login, nav.logged-in .btn-trial { display:none !important; }
  .nav-user-wrap { display:none; align-items:center; position:relative; }
  nav.logged-in .nav-user-wrap { display:flex; }
  .nav-user-btn { width:40px; height:40px; border-radius:50%; background:var(--color-primary); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; font-weight:700; color:#fff; font-family:inherit; transition:opacity 0.15s; flex-shrink:0; overflow:hidden; box-shadow:none; appearance:none; }
  .nav-user-btn:hover { opacity:0.85; }
  .nav-user-dropdown { position:absolute; top:calc(100% + 12px); right:0; background:#fff; border:1px solid var(--color-border-soft); border-radius:var(--radius-md); box-shadow:0 8px 32px rgba(16,32,26,0.13); min-width:220px; z-index:300; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 0.15s,visibility 0.15s,transform 0.15s; }
  .nav-user-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }
  .nav-dropdown-user { padding:16px 20px; border-bottom:1px solid var(--color-border-soft); }
  .nav-dropdown-name { font-size:15px; font-weight:700; color:var(--color-text); margin-bottom:3px; }
  .nav-dropdown-email { font-size:13px; color:var(--color-text-muted); }
  .nav-dropdown-link { display:block; margin:4px 8px; padding:12px 12px; border-radius:var(--radius-sm); font-size:14px; color:var(--color-text); text-decoration:none; transition:background 0.12s; }
  .nav-dropdown-link:hover { background:#f7f7f7; }
  .nav-dropdown-divider { height:1px; margin:4px 8px; background:var(--color-border-soft); }
  .mobile-menu-user { display:none; }
  .mobile-menu-user-info { padding:16px 0 14px; border-bottom:1px solid var(--color-border-soft); margin-bottom:4px; }
  .mobile-menu-user-name { font-size:15px; font-weight:700; color:var(--color-text); margin-bottom:2px; }
  .mobile-menu-user-email { font-size:13px; color:var(--color-text-muted); }
  .mobile-menu-user-links a { display:block; padding:13px 0; font-size:15px; color:var(--color-text); text-decoration:none; border-bottom:1px solid var(--color-border-soft); transition:color 0.12s; }
  .mobile-menu-user-links a:last-child { border-bottom:none; }
  .mobile-menu-user-links a:hover { color:var(--color-primary); }
  nav.logged-in + .mobile-menu .mobile-menu-actions { display:none; }
  nav.logged-in + .mobile-menu .mobile-menu-user { display:block; }
  .nav-hamburger { display:none; cursor:pointer; padding:6px 8px; border:none; background:none; flex-direction:column; justify-content:center; gap:5px; }
  .nav-hamburger span { width:22px; height:2px; background:var(--color-text); border-radius:1px; transition:transform 0.28s ease,opacity 0.2s ease; display:block; transform-origin:center; }
  .nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu { display:none; position:fixed; top:88px; left:0; right:0; background:#ffffff; border-bottom:1px solid var(--color-border); padding:16px 24px 24px; z-index:99; box-shadow:0 8px 24px rgba(16,32,26,0.10); }
  .mobile-menu.open { display:block; }
  .mobile-menu ul { list-style:none; display:flex; flex-direction:column; }
  .mobile-menu ul li a { display:block; padding:14px 0; font-size:15px; font-weight:500; color:var(--color-text); text-decoration:none; border-bottom:1px solid var(--color-border-soft); transition:color 0.15s; }
  .mobile-menu ul li:last-child a { border-bottom:none; }
  .mobile-menu ul li a:hover { color:var(--color-primary-active); }
  .mobile-menu ul li a.is-active { color:var(--color-primary); font-weight:700; }
  .mobile-menu-actions { display:flex; gap:12px; margin-top:16px; }
  .mobile-menu-actions a { flex:1; text-align:center; }

  /* FOOTER */
  footer { background:#fff; color:var(--color-text-muted); padding:80px 80px 48px; border-radius:24px 24px 0 0; margin-top:0; position:relative; z-index:2; box-shadow:0 -6px 32px rgba(16,32,26,0.07); }
  .footer-top { display:flex; gap:80px; align-items:flex-start; margin-bottom:56px; }
  .footer-left { flex:0 0 260px; }
  .footer-cols { display:flex; flex-wrap:wrap; gap:40px 80px; margin-left:auto; }
  .footer-col { flex:0 0 auto; }
  .footer-brand-name { font-size:20px; font-weight:700; color:var(--color-text); margin-bottom:14px; }
  .footer-iso { display:block; margin-top:28px; width:auto; height:60px; }
  .footer-col h4, .footer-col .footer-h { font-size:14px; font-weight:700; color:var(--color-text); margin-bottom:18px; }
  .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
  .footer-col ul li a { font-size:14px; color:var(--color-text-muted); text-decoration:none; transition:color var(--duration-fast); }
  .footer-col ul li a:hover { color:var(--color-text); }
  .footer-bottom { border-top:1px solid var(--color-border-soft); padding-top:32px; display:flex; justify-content:space-between; align-items:center; }
  .footer-bottom p { font-size:14px; color:var(--color-text-muted); }
  .footer-bottom-links { display:flex; gap:24px; }
  .footer-bottom-links a { font-size:14px; color:var(--color-text-muted); text-decoration:none; transition:color var(--duration-fast); }
  .footer-bottom-links a:hover { color:var(--color-text); }

  /* VPAGE layout */
  .vpage-content { max-width:1120px; margin:0 auto; padding:64px 48px 120px; }
  .hc-title { font-size:clamp(26px,3.4vw,36px); font-weight:800; color:var(--color-text); margin:0 0 24px; line-height:1.2; letter-spacing:-0.4px; }

  /* LEGAL CONTENT */
  .legal-content .legal-intro { font-size:16px; color:var(--color-text); line-height:1.95; font-style:italic; margin-bottom:40px; padding-bottom:36px; border-bottom:1px solid var(--color-border-soft); }
  .legal-content h2 { font-size:22px; font-weight:700; color:var(--color-text); margin:52px 0 16px; letter-spacing:-0.2px; line-height:1.4; }
  .legal-content h2:first-of-type { margin-top:0; }
  .legal-content h3 { font-size:17px; font-weight:700; color:var(--color-text); margin:32px 0 12px; letter-spacing:-0.1px; line-height:1.5; }
  .legal-content p { font-size:15px; color:var(--color-text-muted); line-height:1.95; margin-bottom:16px; }
  .legal-content p:last-child { margin-bottom:0; }
  .legal-divider { border:none; border-top:1px solid var(--color-border-soft); margin:56px 0 32px; }
  .legal-signature { font-size:14px; color:var(--color-text-muted); line-height:1.9; }
  .legal-closing { font-size:15px; color:var(--color-text); line-height:1.95; margin-bottom:16px; }

  /* HELP CENTER LAYOUT */
  .hc-layout { display:flex; align-items:flex-start; gap:56px; }
  .hc-sidebar { flex:0 0 256px; }
  .hc-back { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--color-primary); text-decoration:none; margin-bottom:28px; transition:color var(--duration-fast); }
  .hc-back:hover { color:var(--color-primary-hover); }
  .hc-nav { background:#fff; border-radius:16px; box-shadow:0 6px 24px rgba(16,32,26,0.06); padding:10px 22px; }
  .hc-nav-group { margin-bottom:4px; }
  .hc-nav-title { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 0; font-size:15px; font-weight:700; color:var(--color-text); background:none; border:none; font-family:inherit; text-align:left; cursor:pointer; }
  .hc-nav-title .hc-chevron { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:0 0 auto; color:var(--color-text-subtle); transition:transform var(--duration-fast); }
  .hc-nav-title .hc-chevron svg { width:16px; height:16px; display:block; }
  .hc-nav-title[aria-expanded="true"] .hc-chevron { transform:rotate(90deg); }
  .hc-sub-list { list-style:none; display:flex; flex-direction:column; margin:0 0 12px; padding-left:16px; }
  .hc-sub-list[hidden] { display:none; }
  .hc-sub-list li { position:relative; }
  .hc-sub-list li a { display:block; padding:11px 0; font-size:14px; line-height:1.4; color:var(--color-text-muted); text-decoration:none; transition:color var(--duration-fast); }
  .hc-sub-list li a:hover { color:var(--color-text); }
  .hc-sub-list li a.active { color:#3dba90; font-weight:500; }
  .hc-sub-list li a.active::before { content:''; position:absolute; left:-16px; top:50%; transform:translateY(-50%); height:20px; width:2px; background:#3dba90; }
  .hc-article { flex:1 1 auto; min-width:0; max-width:740px; }

  .hc-disclaimer { background:#edf7f3; border-radius:4px; padding:8px 12px; font-size:14px; color:var(--color-text); line-height:1.85; margin-bottom:40px; }

  /* article intro (API sub_title) — matches the live site's .introduction-content */
  .hc-intro { margin:4px 0 28px; padding-left:16px; border-left:3px solid #ddd; font-size:15px; line-height:2; color:var(--color-text-muted); }
  .hc-intro strong { color:var(--color-text); font-weight:700; }

  /* sum~ block — matches the live site's .summary box */
  .hc-summary { border:1px solid #ddd; border-radius:8px; padding:20px 24px; margin:30px 0 0; font-size:15px; color:var(--color-text-muted); line-height:1.95; }
  .hc-summary-label { color:var(--color-primary); font-size:15px; font-weight:700; letter-spacing:0.5px; margin-bottom:6px; }

  /* "- ### Title" — a heading written as a list item (live site: .inner-h3) */
  .hc-inner-h { font-size:17px; font-weight:700; color:var(--color-text); line-height:1.5; margin:4px 0 6px; letter-spacing:-0.1px; }

  /* inline `code` — matches the live site */
  .hc-article .legal-content code { background:#f2f2f2; color:#3e3e3e; padding:2px 6px; border-radius:4px; font-family:monospace,monospace; font-size:0.92em; }

  /* markdown table (ja-site styling, live site ships it unstyled) */
  .hc-table-wrap { overflow-x:auto; margin:8px 0 28px; }
  .hc-table { width:100%; border-collapse:collapse; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; font-size:14px; }
  .hc-table th, .hc-table td { padding:12px 16px; border-top:1px solid var(--color-border-soft); line-height:1.7; }
  .hc-table tr:first-child th, .hc-table tr:first-child td { border-top:none; }
  .hc-table th { background:var(--color-bg-soft); color:var(--color-text); font-weight:700; }
  .hc-table td { background:var(--color-surface); color:var(--color-text-muted); }

  /* blockquote + horizontal rule */
  .hc-article .legal-content blockquote { margin:0 0 24px; padding:2px 0 2px 16px; border-left:3px solid var(--color-primary-border); color:var(--color-text-muted); font-size:15px; line-height:1.95; }
  .hc-article .legal-content hr { border:none; border-top:1px solid var(--color-border-soft); margin:36px 0 28px; }

  .hc-article .legal-content ol,
  .hc-article .legal-content ul { margin:0 0 24px; padding-left:22px; color:var(--color-text-muted); }
  .hc-article .legal-content ul { margin-top:4px; }
  .hc-article .legal-content ol li,
  .hc-article .legal-content ul li { font-size:15px; line-height:1.9; margin-bottom:10px; }
  .hc-article .legal-content ol li:last-child,
  .hc-article .legal-content ul li:last-child { margin-bottom:0; }

  .hc-article .legal-content a { color:var(--color-primary); text-decoration:none; font-weight:600; }
  .hc-article .legal-content a:hover { color:var(--color-primary-hover); text-decoration:underline; }

  .hc-img-frame { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:12px; margin:8px 0 28px; text-align:center; }
  .hc-img-frame img { max-width:100%; height:auto; display:block; margin:0 auto; border-radius:var(--radius-sm); }

  /* Responsive */
  @media (max-width:990px) { .nav-links { display:none; } .nav-actions .btn-login { display:none; } .nav-hamburger { display:flex; } .mobile-menu { top:88px; } }
  @media (max-width:900px) {
    .hc-layout { flex-direction:column; gap:12px; }
    .hc-sidebar { flex:none; width:100%; }
    .hc-nav { display:none; }
    .hc-back { margin-bottom:4px; }
    .hc-article { max-width:100%; }
  }
  @media (max-width:768px) { .nav-actions .btn-trial { display:none; } }
  @media (max-width:639px) {
    nav { padding:0 16px; height:64px; } .mobile-menu { top:64px; } body { padding-top:64px; }
    footer { padding:48px 20px 24px; }
    .footer-top { flex-direction:column; gap:32px; } .footer-left { flex:none; }
    .footer-cols { flex-direction:column; gap:24px; margin-left:0; }
    .footer-bottom { flex-direction:column; gap:16px; align-items:flex-start; }
    .footer-bottom-links { flex-wrap:wrap; gap:12px 20px; }
    .vpage-content { padding:48px 20px 80px; }
    .hc-title { font-size:clamp(22px,6vw,30px); }
    .legal-content h2 { font-size:19px; margin:40px 0 14px; }
    .legal-content h3 { font-size:16px; margin:26px 0 10px; }
  }

/* a11y: skip navigation */
.skip-link { position:absolute; left:-9999px; top:0; z-index:1000; background:var(--color-primary); color:#fff; padding:10px 18px; border-radius:0 0 8px 0; font-size:14px; font-weight:700; text-decoration:none; }
.skip-link:focus { left:0; }

  /* NAV dropdown (パートナー) — opens on hover, click and keyboard focus.
     :focus-within covers click + Tab, so no JS is needed. */
  .nav-item-has-sub { position:relative; }
  .nav-sub-toggle { display:inline-flex; align-items:center; gap:5px; padding:0; border:none; background:none; font-family:inherit; font-size:14px; font-weight:700; color:var(--color-text); cursor:pointer; transition:color var(--duration-fast); }
  .nav-sub-toggle:hover, .nav-item-has-sub:hover .nav-sub-toggle { color:var(--color-primary); }
  .nav-sub-toggle.is-active { color:var(--color-primary); }
  .nav-sub-caret { flex:0 0 auto; transition:transform var(--duration-fast); }
  .nav-item-has-sub:hover .nav-sub-caret, .nav-item-has-sub:focus-within .nav-sub-caret { transform:rotate(180deg); }
  .nav-submenu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px); margin-top:14px; min-width:190px; list-style:none; background:#fff; border-radius:var(--radius-md); box-shadow:0 8px 32px rgba(16,32,26,0.13); padding:8px; opacity:0; visibility:hidden; transition:opacity var(--duration-fast), visibility var(--duration-fast), transform var(--duration-fast); z-index:300; }
  /* hover bridge so the pointer can travel from the trigger to the menu */
  .nav-item-has-sub::after { content:''; position:absolute; top:100%; left:0; right:0; height:14px; }
  .nav-item-has-sub:hover .nav-submenu, .nav-item-has-sub:focus-within .nav-submenu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .nav-submenu li a { display:block; padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; color:var(--color-text); text-decoration:none; white-space:nowrap; transition:background var(--duration-fast), color var(--duration-fast); }
  .nav-submenu li a:hover { background:var(--color-bg-soft); color:var(--color-primary-active); }
  /* mobile menu: flat group instead of a dropdown */
  .mobile-menu-group { display:flex; flex-direction:column; }
  .mobile-menu-group-title { display:block; padding:14px 0 6px; font-size:15px; font-weight:700; color:var(--color-text-subtle); }
  .mobile-menu ul li.mobile-menu-group a { padding:11px 0 11px 14px; border-bottom:none; }
  .mobile-menu ul li.mobile-menu-group { border-bottom:1px solid var(--color-border-soft); padding-bottom:6px; }
