/* ============================================================
   ひとことWeb LP — HuX Design System
   Tokens, type, and components adapted faithfully from the
   HuX Corporate Site. ひとことWeb content rendered in HuX's language.
   ============================================================ */
:root{
  --ink:#111111; --ink-2:#444444; --ink-3:#626A72; --ink-4:#BFBFBF;
  --line:#E5E7EB; --line-2:#EFF1F3;
  --paper:#FFFFFF; --paper-2:#F5F7F8; --paper-3:#EBEEF1;
  /* section panel grays: light default + one deeper tone */
  --gray-light:#F5F7F8; --gray-deep:#D9E0E6;
  --green:#FF5C00; --green-deep:#B83F00; --green-soft:#FFE3D2;
  --frame:1320px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Noto Sans JP", system-ui, sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.7; font-weight:400; letter-spacing:.02em;
  overflow-x:hidden;
}
.en{ font-family:"Inter", sans-serif; letter-spacing:.05em; }
.mono-num{ font-family:"Inter", sans-serif; font-variant-numeric:tabular-nums; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* green underline highlight (HuX .em) */
.u{ background:linear-gradient(transparent 62%, var(--green-soft) 62%); padding:0 .12em; }

.nav, main, .footer{ position:relative; z-index:1; }

/* ── frame ── */
.frame{ max-width:var(--frame); margin:0 auto; padding:0 36px; position:relative; }
.section-num{
  font-family:"Inter", sans-serif; font-size:14px; font-weight:600;
  color:var(--green-deep); display:inline-flex; align-items:center; gap:12px;
}
.section-num::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.section-tag{
  font-family:"Inter", sans-serif; font-size:14px; font-weight:500;
  color:var(--ink-3); letter-spacing:.15em; text-transform:uppercase;
}
.section-head{ display:flex; align-items:center; gap:18px; padding:28px 0 36px; }

/* ── nav ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 36px; display:flex; align-items:center; gap:28px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2); transition:padding .2s;
}
.nav.scrolled{ padding:12px 36px; }
.logo-word{ font-size:22px; font-weight:700; letter-spacing:.01em; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.logo-mark{ height:26px; width:auto; flex:none; display:block; }
.logo-word .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; margin-left:3px; transform:translateY(1px); }
.nav .links{ display:flex; gap:28px; margin-left:24px; }
.nav .links a{ font-size:14px; font-weight:500; color:var(--ink-2); transition:color .15s; }
.nav .links a:hover{ color:var(--ink); }
.nav .links a .en{ font-size:14px; color:var(--ink-3); margin-left:2px; }
.nav .spacer{ flex:1; }
.nav .cta{
  background:var(--ink); color:var(--paper);
  padding:10px 22px; font-size:14px; font-weight:500; border-radius:24px;
  display:inline-flex; align-items:center; gap:8px; transition:all .2s;
}
.nav .cta:hover{ background:var(--green); color:var(--ink); transform:translateY(-1px); }
.nav .cta::after{ content:"→"; font-size:14px; }
.nav-toggle{ display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

main{ padding-top:70px; }
section{ display:block; }

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:100px; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:all .2s; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
}
.btn:hover{ background:var(--green); border-color:var(--green); color:var(--ink); transform:translateY(-2px); }
.btn .ar::after{ content:"→"; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-green{ background:var(--green); border-color:var(--green); color:var(--ink); }
.btn-green:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-sm{ padding:11px 22px; font-size:14px; }
.note-line{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-3); }
.note-line::before{ content:"◷"; color:var(--green-deep); }

/* generic heading scale */
.h-lead{ font-size:clamp(28px,3.6vw,40px); font-weight:600; line-height:1.4; letter-spacing:.02em; }
.h-sec{ font-size:clamp(26px,3.2vw,36px); font-weight:600; line-height:1.4; }
.sub{ font-size:14px; line-height:2; color:var(--ink-2); }
.closer{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.9; }

/* reveal */
.reveal{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.js-anim .reveal:not(.in){ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:none; }
.reveal.shown{ opacity:1 !important; transform:none !important; transition:none !important; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* ── HERO (full-bleed background photo) ── */
.hero-section{ position:relative; overflow:hidden; }
.hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center right; z-index:0; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,.7) 32%, rgba(14,16,20,.34) 58%, rgba(14,16,20,.08) 80%, rgba(14,16,20,0) 100%); }
.hero-section .frame{ position:relative; z-index:2; }
.hero{ display:flex; align-items:center; padding:64px 0 76px; min-height:calc(92vh - 70px); }
.hero-left{ max-width:600px; }
/* hero text on dark scrim */
.hero h1{ color:#fff; }
.hero .lead{ color:#ffffff; }
.hero .eyebrow{ color:rgba(255,255,255,.72); }
.hero .u{ background:linear-gradient(transparent 62%, rgba(255,92,0,.6) 62%); color:#fff; }
.hero .note-line{ color:rgba(255,255,255,.78); }
.hero .pill-row{ border-top-color:rgba(255,255,255,.24); border-bottom-color:rgba(255,255,255,.24); }
.hero .pill-row .pill{ border-right-color:rgba(255,255,255,.22); }
.hero .pill-row .pill .jp{ color:#fff; }
.hero .pill-row .pill .en{ color:rgba(255,255,255,.6); }
.hero .hero-cta .btn{ background:var(--green); border-color:var(--green); color:#fff; }
.hero .hero-cta .btn:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.hero .hero-cta .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.hero .hero-cta .btn-ghost:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:"Inter",sans-serif; font-size:14px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px; }
.hero .eyebrow::before{ content:""; width:24px; height:1px; background:var(--green); }
.hero h1{ font-size:clamp(34px,4.4vw,50px); font-weight:600; line-height:1.28; letter-spacing:.02em; margin-bottom:24px; }
.hero .lead{ font-size:14px; line-height:2; color:#ffffff; max-width:460px; margin-bottom:32px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin-top:18px; }
.pill-row{ display:flex; gap:0; margin-top:34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; flex-wrap:wrap; }
.pill-row .pill{ display:flex; flex-direction:column; gap:3px; padding:0 22px; border-right:1px solid var(--line); }
.pill-row .pill:first-child{ padding-left:0; }
.pill-row .pill:last-child{ border-right:none; }
.pill-row .pill .jp{ font-size:14px; font-weight:600; color:var(--ink); }
.pill-row .pill .en{ font-size:14px; color:var(--ink-3); font-weight:500; }

.hero-visual{ position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:var(--paper-3); box-shadow:0 30px 80px rgba(0,0,0,.08); }
.hero-visual image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.photo-label{ position:absolute; bottom:20px; left:20px; z-index:3; font-family:"Inter",sans-serif; font-size:14px; color:var(--ink); letter-spacing:.1em; background:rgba(255,255,255,.92); padding:8px 14px; border-radius:100px; backdrop-filter:blur(8px); font-weight:500; }
.photo-label .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:8px; vertical-align:middle; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.4); } }
/* floating chat card on hero */
.hero-chat{ position:absolute; right:18px; top:20px; z-index:4; width:min(78%,260px); display:flex; flex-direction:column; gap:8px; }

/* ── chat bubbles (product demo) ── */
.chat-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:10px; }
.chat-card .ch-bar{ display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line-2); font-family:"Inter",sans-serif; font-size:14px; font-weight:600; color:var(--ink); }
.chat-card .ch-bar .d{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.bubble{ max-width:84%; padding:11px 15px; border-radius:14px; font-size:14px; line-height:1.6; font-weight:500; }
.bubble.you{ align-self:flex-end; background:var(--ink); color:var(--paper); border-bottom-right-radius:4px; }
.bubble.ai{ align-self:flex-start; background:var(--green-soft); color:var(--ink); border-bottom-left-radius:4px; }
.bubble .who{ display:block; font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:3px; }

/* ── section backgrounds ── */
.sec{ padding:96px 0; }
.sec--mist{ background:var(--paper-2); }
.sec-head-c{ text-align:center; max-width:760px; margin:0 auto 54px; }
.sec-head-c .section-num{ justify-content:center; margin-bottom:16px; }
.sec-head-c h2{ margin-bottom:16px; }
.sec-head-c p{ color:var(--ink-2); font-size:14px; line-height:1.95; }

/* ── cards (HuX strength) ── */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.s-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:36px 32px; position:relative; overflow:hidden; transition:all .3s; }
.s-card:hover{ transform:translateY(-4px); border-color:var(--green); box-shadow:0 12px 40px rgba(0,0,0,.04); }
.s-card .label{ font-family:"Inter",sans-serif; font-size:14px; color:var(--ink-3); letter-spacing:.15em; margin-bottom:10px; }
.s-card .axis{ font-family:"Inter",sans-serif; font-size:54px; font-weight:700; line-height:1; letter-spacing:-.02em; margin-bottom:12px;
  background:linear-gradient(110deg,var(--ink) 0%,var(--ink) 62%,var(--green-deep) 62%,var(--green-deep) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-card h3{ font-size:19px; font-weight:600; margin-bottom:12px; }
.s-card p{ font-size:14px; color:var(--ink-2); line-height:1.9; }
/* problem-card illustration */
.s-illust{ position:relative; z-index:1; height:120px; border-radius:14px; background:linear-gradient(165deg,#ffffff,#F3F6F8); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:22px; overflow:hidden; }
.s-illust svg{ width:auto; height:88px; }

/* ── Claude-inspired AI chat (warm, minimal) ── */
.ai-chat{ background:#FAF8F3; border:1px solid #ECE6DA; border-radius:18px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:16px; box-shadow:0 18px 50px rgba(64,46,24,.09); }
.ai-chat .aic-head{ display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid #ECE6DA; font-family:"Inter",sans-serif; font-size:14px; font-weight:600; color:#2b2722; }
.ai-chat .aic-spark{ display:inline-flex; }
.ai-chat .aic-spark svg{ width:17px; height:17px; color:var(--green); }
.aic-msg{ display:flex; gap:11px; }
.aic-msg.user{ justify-content:flex-end; }
.aic-bubble{ background:#EFE9DC; color:#2b2722; border-radius:15px 15px 5px 15px; padding:11px 15px; font-size:14px; line-height:1.65; max-width:82%; }
.aic-msg.bot{ align-items:flex-start; }
.aic-mark{ flex:none; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #ECE6DA; display:flex; align-items:center; justify-content:center; }
.aic-mark svg{ width:17px; height:17px; color:var(--green); }
.aic-text{ font-size:14px; line-height:1.8; color:#2b2722; padding-top:3px; }
.aic-input{ margin-top:4px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ECE6DA; border-radius:13px; padding:12px 14px; font-size:14px; color:#9a9182; }
.aic-input .aic-send{ margin-left:auto; flex:none; width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }

/* convergence / closer pill */
.conv{ margin-top:36px; text-align:center; }
.conv-line{ font-size:clamp(16px,2vw,19px); font-weight:600; color:var(--ink); line-height:1.8; }
.conv-line .x{ color:var(--green-deep); font-weight:700; }

/* ── solution split ── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.s-narrow{ grid-template-columns:1fr 1fr; max-width:1040px; margin-inline:auto; }
.checks{ display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink); font-weight:500; line-height:1.7; }
.check .ic{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--green-soft); color:var(--green-deep); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; margin-top:1px; }
.lead-accent{ font-size:18px; font-weight:600; color:var(--green-deep); margin:6px 0 4px; }

/* ── features (service cards) ── */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc-card{ border:1px solid var(--line); border-radius:18px; padding:32px 28px 26px; background:var(--paper); transition:all .3s; display:flex; flex-direction:column; min-height:280px; position:relative; overflow:hidden; }
.svc-card:hover{ background:var(--ink); color:var(--paper); transform:translateY(-4px); border-color:var(--ink); }
.svc-card .num{ font-family:"Inter",sans-serif; font-size:14px; font-weight:500; color:var(--green-deep); letter-spacing:.15em; margin-bottom:18px; }
.svc-card:hover .num{ color:var(--green); }
.svc-card .icon-frame{ width:56px; height:56px; border:1.5px solid var(--ink); border-radius:50%; margin-bottom:22px; display:flex; align-items:center; justify-content:center; transition:.3s; }
.svc-card:hover .icon-frame{ border-color:var(--green); }
.svc-card .icon-frame svg{ width:26px; height:26px; stroke:var(--ink); transition:.3s; }
.svc-card:hover .icon-frame svg{ stroke:var(--green); }
.svc-card h3{ font-size:21px; font-weight:600; margin-bottom:12px; line-height:1.4; }
.svc-card .desc{ font-size:14px; color:var(--ink-2); line-height:1.85; }
.svc-card:hover .desc{ color:rgba(255,255,255,.72); }
.svc-card .tagline{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); font-family:"Inter",sans-serif; font-size:14px; color:var(--ink-3); }
.svc-card:hover .tagline{ border-top-color:rgba(255,255,255,.16); color:rgba(255,255,255,.55); }

/* ── demo flow ── */
#demo .frame{ max-width:1500px; }
.flow-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr) auto minmax(0,1fr); gap:24px; align-items:stretch; margin-top:8px; }
.flow-step{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.flow-step.after{ border-color:var(--green); box-shadow:0 12px 40px rgba(224,78,0,.10); }
.flow-step .tag{ font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.flow-step.after .tag{ color:var(--green-deep); }
.flow-arrow{ display:flex; align-items:center; justify-content:center; color:var(--green-deep); font-size:22px; }
.mock-list{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--paper-2); display:flex; flex-direction:column; gap:9px; min-height:120px; }
.mock-list .row{ height:10px; border-radius:5px; background:var(--paper-3); }
.mock-list .row.s{ width:62%; }
.mock-list.after .row.new{ background:var(--green-soft); position:relative; }
.mock-list .new-badge{ font-family:"Inter",sans-serif; font-size:14px; font-weight:600; color:var(--green-deep); letter-spacing:.08em; }

/* deformed browser capture frame */
.browser-cap{ border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--paper); box-shadow:0 14px 38px rgba(0,0,0,.08); }
.bc-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--paper-2); border-bottom:1px solid var(--line); }
.bc-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.bc-dot.r{ background:#E5675A; } .bc-dot.y{ background:#E6B23C; } .bc-dot.g{ background:#5BB872; }
.bc-url{ margin-left:8px; flex:1; background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:4px 10px; font-family:"Inter",sans-serif; font-size:14px; color:var(--ink-3); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--line); }
.bc-logo{ font-family:"Inter",sans-serif; font-weight:700; font-size:14px; color:var(--ink); letter-spacing:-.01em; }
.bc-nav{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-3); white-space:nowrap; }
.bc-nav span{ width:3px; height:3px; border-radius:50%; background:var(--paper-3); }
.browser-cap .news-mock{ border:none; border-radius:0; }

/* stylized (deformed) news-list capture */
.news-mock{ border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; }
.nm-chips{ display:flex; gap:6px; padding:11px 12px; border-bottom:1px solid var(--line); }
.nm-chip{ font-size:14px; font-weight:600; color:var(--ink-3); border:1px solid var(--line); border-radius:100px; padding:4px 10px; white-space:nowrap; }
.nm-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.nm-row{ display:flex; align-items:center; gap:9px; padding:11px 12px; border-bottom:1px solid var(--line); }
.nm-row:last-child{ border-bottom:none; }
.nm-date{ font-family:"Inter",sans-serif; font-size:14px; color:var(--ink-3); flex:none; letter-spacing:.02em; }
.nm-pill{ font-size:14px; font-weight:600; border-radius:100px; padding:3px 8px; flex:none; border:1px solid; line-height:1; }
.nm-pill.press, .nm-pill.notice{ color:var(--green-deep); border-color:var(--green); }
.nm-pill.event{ color:var(--ink-3); border-color:var(--line); }
.nm-title{ font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.nm-ar{ font-size:14px; color:var(--ink-3); flex:none; }
.nm-row.new{ background:var(--green-soft); }
.nm-row.new .nm-title{ font-weight:600; }
.nm-badge{ font-family:"Inter",sans-serif; font-size:14px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--green); border-radius:100px; padding:3px 7px; flex:none; }
.flow-talk{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.talk-chat{ background:#FAF8F3; border:1px solid #ECE6DA; border-radius:16px; padding:16px 16px 13px; display:flex; flex-direction:column; gap:13px; box-shadow:0 14px 36px rgba(64,46,24,.08); }
.talk-chat .aic-head{ display:flex; align-items:center; gap:8px; padding-bottom:11px; border-bottom:1px solid #ECE6DA; font-family:"Inter",sans-serif; font-size:14px; font-weight:600; color:#2b2722; }
.talk-chat .aic-spark svg{ width:15px; height:15px; color:var(--green); display:block; }
.talk-chat .aic-msg.user{ display:flex; justify-content:flex-end; }
.talk-chat .aic-bubble{ background:#EFE9DC; color:#2b2722; border-radius:14px 14px 4px 14px; padding:10px 14px; font-size:14px; line-height:1.6; max-width:88%; }
.talk-chat .aic-input{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ECE6DA; border-radius:12px; padding:10px 12px; font-size:14px; color:#9a9182; }
.talk-chat .aic-send{ margin-left:auto; flex:none; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }

/* ── mid CTA band (ink) ── */
.cta-band{ background:var(--ink); color:var(--paper); border-radius:24px; padding:48px 52px; display:grid; grid-template-columns:1.3fr auto; gap:32px; align-items:center; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; top:-160px; right:-120px; width:420px; height:420px; border-radius:50%; border:1px solid rgba(255,92,0,.30); pointer-events:none; }
.cta-band .eyebrow{ font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-bottom:14px; }
.cta-band h3{ font-size:clamp(24px,3vw,32px); font-weight:600; line-height:1.4; margin-bottom:12px; }
.cta-band .u{ background:linear-gradient(transparent 62%, rgba(255,92,0,.35) 62%); }
.cta-band p{ font-size:14px; color:rgba(255,255,255,.66); line-height:1.8; }
.cta-band .right{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.cta-band .right .btn{ justify-content:center; }
.cta-band .note-line{ color:rgba(255,255,255,.55); }

/* ── how / 仕組み ── */
.fukusen{ margin-top:32px; background:var(--green-soft); border:1px solid var(--green); border-radius:16px; padding:22px 28px; display:flex; align-items:center; gap:14px; justify-content:center; text-align:center; }
.fukusen .plus{ font-family:"Inter",sans-serif; font-weight:700; color:var(--green-deep); font-size:18px; flex:none; }
.fukusen .t{ font-size:15px; font-weight:600; color:var(--ink); }
.how-figure{ border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.08); max-width:1040px; margin:0 auto; }
.how-figure img{ width:100%; height:auto; display:block; }
.how-visual{ position:relative; aspect-ratio:5/4; border-radius:18px; overflow:hidden; background:var(--paper-3); box-shadow:0 24px 60px rgba(0,0,0,.07); }
.how-visual image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.memory-card{ position:absolute; left:18px; bottom:18px; right:18px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-radius:14px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,.1); }
.memory-card .mh{ font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-bottom:8px; }
.memory-card .chip{ display:inline-block; font-size:14px; font-weight:500; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:4px 11px; margin:3px 4px 0 0; }

/* ── compare table ── */
.cmp-wrap{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--paper); }
.cmp{ width:100%; border-collapse:collapse; font-size:14px; }
.cmp th, .cmp td{ padding:20px 24px; text-align:left; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.cmp th:last-child, .cmp td:last-child{ border-right:none; }
.cmp thead th{ font-weight:700; font-size:15px; color:var(--ink); background:var(--paper-2); border-bottom:2px solid var(--line); letter-spacing:.01em; }
.cmp thead th:first-child{ font-weight:600; font-size:14px; color:var(--ink-3); }
.cmp thead th.me{ color:var(--green-deep); }
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp td.label{ font-weight:600; color:var(--ink); width:22%; }
.cmp td.cheap{ color:var(--ink-3); }
.cmp td.me{ color:var(--ink); font-weight:600; background:rgba(255,227,210,.5); }
.cmp .ck{ color:var(--green-deep); font-weight:700; margin-right:6px; }
.cmp col.col-me{ background:rgba(255,227,210,.5); }

/* comparison table → stacked cards on narrow screens (avoid horizontal scroll for older users) */
@media (max-width:768px){
  .cmp-wrap{ border:none; background:transparent; border-radius:0; overflow:visible; }
  .cmp{ font-size:14px; }
  .cmp, .cmp tbody, .cmp tbody tr, .cmp td{ display:block; width:auto; }
  .cmp thead{ display:none; }
  .cmp tbody tr{ background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:14px; box-shadow:0 8px 28px rgba(0,0,0,.04); }
  .cmp tbody tr:last-child{ margin-bottom:0; }
  .cmp td{ border:none; border-right:none; border-bottom:1px solid var(--line-2); padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:right; }
  .cmp tbody tr td:last-child{ border-bottom:none; }
  .cmp td.label{ display:block; width:auto; background:var(--ink); color:var(--paper); font-weight:700; font-size:15px; text-align:left; }
  .cmp td::before{ content:attr(data-label); flex:none; font-size:14px; font-weight:600; color:var(--ink-3); text-align:left; }
  .cmp td.label::before{ content:none; }
  .cmp td.me{ background:rgba(255,227,210,.45); font-weight:700; }
  .cmp td.me::before{ color:var(--green-deep); }
}

/* ── pricing ── */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:34px 30px; display:flex; flex-direction:column; position:relative; transition:all .3s; }
.price-card:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.05); }
.price-card.best{ border-color:var(--green); box-shadow:0 18px 50px rgba(224,78,0,.14); }
.price-card .ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--green); color:var(--ink); font-family:"Inter",sans-serif; font-size:14px; font-weight:600; letter-spacing:.1em; padding:6px 18px; border-radius:100px; }
.price-card .pname{ font-size:16px; font-weight:600; }
.price-card .pfor{ font-size:14px; color:var(--ink-3); margin-top:4px; }
.price-card .price-num{ font-family:"Inter",sans-serif; font-size:40px; font-weight:700; letter-spacing:-.02em; margin:20px 0 2px; }
.price-card .price-num .per{ font-size:14px; font-weight:500; color:var(--ink-3); }
.price-card .price-init{ font-size:15px; font-weight:600; color:var(--ink-2); }
.price-card .price-init .sub{ font-size:14px; font-weight:500; color:var(--ink-3); }
.price-card .p-feats{ display:flex; flex-direction:column; gap:11px; margin:18px 0 26px; padding-top:18px; border-top:1px dashed var(--line); }
.price-card .p-feat{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.6; }
.price-card .p-feat .ic{ color:var(--green-deep); font-weight:700; flex:none; }
.price-card .btn{ margin-top:auto; justify-content:center; }
.price-notes{ max-width:760px; margin:30px auto 0; display:flex; flex-direction:column; gap:10px; text-align:center; }
.price-note{ font-size:14px; color:var(--ink-2); line-height:1.7; }
.price-note .nb{ display:inline-block; background:var(--green-soft); color:var(--green-deep); font-weight:700; font-size:14px; padding:2px 10px; border-radius:100px; margin-right:6px; }
.price-foot{ font-size:14px; color:var(--ink-3); line-height:1.7; margin-top:4px; }

/* ── QA ── */
.qa-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.qa-card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px 30px; transition:.25s; }
.qa-card:hover{ border-color:var(--green); }
.qa-card .q{ display:flex; gap:12px; align-items:flex-start; font-size:16px; font-weight:600; color:var(--ink); line-height:1.5; }
.qa-card .q .mk{ font-family:"Inter",sans-serif; font-weight:700; color:var(--green-deep); flex:none; }
.qa-card .a{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.85; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); }
.qa-card .a .mk{ font-family:"Inter",sans-serif; font-weight:700; color:var(--ink); flex:none; }

/* ── final CTA (closing block + contact form) ── */
.final{ background:#ECECEA; color:var(--ink); position:relative; overflow:hidden; padding:120px 0; }
.final .frame{ position:relative; z-index:2; }
.final::before{ content:""; position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%; border:1px solid rgba(34,38,42,.10); pointer-events:none; }
.final::after{ content:""; position:absolute; top:-150px; right:-150px; width:500px; height:500px; border-radius:50%; border:1px solid rgba(224,78,0,.50); pointer-events:none; }
.final-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:64px; align-items:start; }
.final-left{ position:relative; }
.final .label{ font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.2em; color:var(--green-deep); margin-bottom:18px; }
.final h2{ font-size:clamp(28px,3.6vw,42px); font-weight:600; line-height:1.3; margin-bottom:20px; }
.final p{ font-size:15px; line-height:1.9; color:var(--ink-2); margin-bottom:28px; }
.final .note-line{ justify-content:flex-start; }
.form{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-field label{ font-size:14px; letter-spacing:.1em; color:rgba(17,17,17,.55); text-transform:uppercase; }
.form-field input, .form-field textarea, .form-field select{ width:100%; background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:10px; padding:13px 14px; color:var(--ink); font-size:16px; font-family:inherit; transition:border-color .2s, box-shadow .2s, background .2s; }
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--ink-3); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(255,92,0,.14); background:#fff; }
.form-field textarea{ min-height:108px; resize:vertical; }
.form .submit{ align-self:flex-start; margin-top:6px; background:var(--green); color:#fff; border:none; padding:16px 38px; border-radius:100px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:all .2s; }
.form .submit:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.form .submit:disabled{ background:var(--green-deep); transform:none; cursor:default; opacity:.85; }
.form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.form-status{ font-size:14px; line-height:1.7; margin-top:4px; min-height:1px; }
.form-status.is-error{ color:var(--green-deep); font-weight:600; }
.form-status.is-success{ color:#1a7f4b; font-weight:600; }

/* ── footer ── */
.footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .logo-word{ color:#fff; }
.footer-brand .tagline{ font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.1em; color:rgba(255,255,255,.4); margin:14px 0 16px; }
.footer-brand .tagline .x{ color:var(--green); }
.footer-brand .desc{ font-size:14px; line-height:1.85; color:rgba(255,255,255,.5); max-width:24ch; }
.footer h4{ font-family:"Inter",sans-serif; font-size:14px; font-weight:600; color:#fff; letter-spacing:.15em; margin-bottom:16px; }
.footer ul{ list-style:none; }
.footer li{ padding:5px 0; font-size:14px; }
.footer li a{ transition:color .15s; }
.footer li a:hover{ color:var(--green); }
.footer-bot{ display:flex; justify-content:space-between; padding-top:24px; font-family:"Inter",sans-serif; font-size:14px; letter-spacing:.05em; }

/* image-slot empty state */
image-slot{ display:block; background:var(--paper-3); color:var(--ink-3); }

/* ── works（実績ギャラリー） ── */
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.work-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; color:inherit; text-decoration:none; transition:all .3s; }
.work-card:hover{ transform:translateY(-4px); border-color:var(--green); box-shadow:0 12px 40px rgba(0,0,0,.07); }
.wc-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--paper-2); border-bottom:1px solid var(--line-2); }
.wc-url{ margin-left:8px; font-family:"Inter",sans-serif; font-size:14px; color:var(--ink-3); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc-shot{ aspect-ratio:40/21; background:var(--paper-3); overflow:hidden; }
.wc-shot img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.wc-body{ padding:16px 20px 20px; display:flex; flex-direction:column; gap:6px; }
.wc-body h3{ font-size:16px; font-weight:600; line-height:1.5; }
.wc-body h3::after{ content:" ↗"; color:var(--green-deep); font-size:14px; font-weight:700; }
.wc-body p{ font-size:14px; color:var(--ink-2); line-height:1.7; }

/* ── responsive ── */
@media (max-width:980px){
  .nav{ padding:14px 20px; }
  .nav.scrolled{ padding:10px 20px; }
  .nav .links{ display:none; }
  .nav > .cta{ display:none; }
  .nav-toggle{ display:flex; }
  .frame{ padding:0 20px; }
  .hero{ padding:40px 0 56px; min-height:64vh; }
  .hero-scrim{ background:linear-gradient(118deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,.66) 46%, rgba(14,16,20,.32) 74%, rgba(14,16,20,.06) 100%); }
  .split, .split.s-narrow{ grid-template-columns:1fr; gap:36px; }
  .grid-3, .svc-grid, .price-grid, .works-grid{ grid-template-columns:1fr; }
  .grid-2, .qa-grid{ grid-template-columns:1fr; }
  .flow-row{ grid-template-columns:1fr; }
  .flow-row .flow-arrow{ transform:rotate(90deg) !important; }
  .cta-band{ grid-template-columns:1fr; padding:36px 28px; }
  .cta-band .right{ align-items:stretch; }
  .final-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
  .sec{ padding:68px 0; }
}
@media (max-width:560px){
  .hero h1{ font-size:30px; }
  .form .row{ grid-template-columns:1fr; }
  .pill-row .pill{ padding:0 14px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bot{ flex-direction:column; gap:8px; }
  .hero-chat{ width:74%; }
}

/* mobile nav drawer */
.m-menu{ position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--paper); z-index:200; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-12px 0 40px rgba(0,0,0,.14); padding:24px; display:flex; flex-direction:column; gap:6px; }
.m-menu.open{ transform:none; }
.m-back{ position:fixed; inset:0; background:rgba(17,17,17,.4); z-index:190; opacity:0; pointer-events:none; transition:opacity .3s; }
.m-back.open{ opacity:1; pointer-events:auto; }
.m-menu .m-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.m-menu .m-close{ width:40px; height:40px; border:1px solid var(--line); background:none; border-radius:10px; font-size:20px; color:var(--ink-2); cursor:pointer; }
.m-menu a.m-link{ font-size:16px; font-weight:600; padding:14px 4px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
.m-menu a.m-link .en{ font-size:14px; color:var(--ink-3); }
.m-menu .btn{ margin-top:20px; justify-content:center; }


/* ── section parallax background reveal ── */
.has-bg{ position:relative; overflow:hidden; }
.has-bg > .frame{ position:relative; z-index:2; }
.sec-bg{
  position:absolute; left:0; right:0; top:-16%; height:132%; z-index:0;
  will-change:transform, clip-path, opacity;
  clip-path:inset(0 0 100% 0); opacity:0;
  transition:clip-path 1s cubic-bezier(.16,.8,.3,1), opacity .7s ease;
  pointer-events:none;
}
.sec-bg.bg-in{ clip-path:inset(0 0 0 0); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .sec-bg{ transition:none; clip-path:none; opacity:1; transform:none !important; }
}

/* ============================================================
   v2 — interactive redesign additions
   ============================================================ */

/* ── scroll progress bar ── */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:300; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--green), #FFA25C); }

/* ── animated marker underline (.u) ── */
.u{ background-repeat:no-repeat; background-position:0 0; background-size:100% 100%; }
.js-anim .u{ background-size:0% 100%; transition:background-size .9s cubic-bezier(.16,.8,.3,1) .25s; }
.js-anim .u.u-in{ background-size:100% 100%; }

/* ── hero char-by-char reveal ── */
.hero h1 .ch{ display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity .55s cubic-bezier(.16,.8,.3,1), transform .55s cubic-bezier(.16,.8,.3,1); }
.hero h1.chars-in .ch{ opacity:1; transform:none; }

/* ── hero floating live chat ── */
.hero{ position:relative; }
.hero-chat-live{
  position:absolute; right:0; top:50%; width:330px; z-index:3; display:none;
  transform:translateY(-50%);
  background:rgba(250,248,243,.97); border:1px solid #ECE6DA; border-radius:18px;
  padding:18px 18px 14px; box-shadow:0 30px 80px rgba(0,0,0,.38);
}
@media (min-width:1100px){ .hero-chat-live{ display:block; } }
.hcl-head{ display:flex; align-items:center; gap:8px; padding-bottom:11px; border-bottom:1px solid #ECE6DA; font-family:"Inter",sans-serif; font-size:14px; font-weight:600; color:#2b2722; }
.hcl-head .hcl-spark{ display:inline-flex; }
.hcl-head svg{ width:15px; height:15px; color:var(--green); display:block; }
.hcl-body{ min-height:150px; display:flex; flex-direction:column; gap:10px; padding:13px 0; transition:opacity .4s; }
.hcl-body.fade{ opacity:0; }
.hcl-msg.you{ display:flex; justify-content:flex-end; }
.hcl-bubble{ background:#EFE9DC; color:#2b2722; border-radius:14px 14px 4px 14px; padding:9px 13px; font-size:14px; line-height:1.65; max-width:86%; min-height:1.65em; }
.hcl-msg.bot{ display:flex; gap:9px; align-items:flex-start; }
.hcl-mark{ flex:none; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid #ECE6DA; display:flex; align-items:center; justify-content:center; }
.hcl-mark svg{ width:14px; height:14px; color:var(--green); display:block; }
.hcl-text{ font-size:14px; line-height:1.7; color:#2b2722; padding-top:2px; }
.hcl-input{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ECE6DA; border-radius:12px; padding:9px 12px; font-size:14px; color:#9a9182; }
.hcl-send{ margin-left:auto; flex:none; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }

/* ── scroll cue ── */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:14px; font-weight:500; letter-spacing:.28em; color:rgba(255,255,255,.75);
}
.scroll-cue .line{ width:1px; height:34px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:#fff; animation:cueDrop 1.9s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cueDrop{ 0%{ top:-100%; } 55%,100%{ top:100%; } }
@media (max-width:980px){ .scroll-cue{ display:none; } }

/* ── typing dots ── */
.tp-dots{ display:inline-flex; gap:4px; align-items:center; padding:5px 0; }
.tp-dots i{ width:6px; height:6px; border-radius:50%; background:#C9BFAE; animation:tpB 1s ease-in-out infinite; }
.tp-dots i:nth-child(2){ animation-delay:.15s; }
.tp-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes tpB{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

/* ── solution chat sequential play ── */
.chat-play .aic-msg{ opacity:0; transform:translateY(10px); transition:opacity .45s cubic-bezier(.16,.8,.3,1), transform .45s cubic-bezier(.16,.8,.3,1); }
.chat-play .aic-msg.msg-in{ opacity:1; transform:none; }

/* ── interactive demo ── */
.demo-hint{ font-size:14px; color:var(--ink-3); text-align:center; margin-top:2px; }
.demo-chips{ display:flex; flex-direction:column; gap:8px; }
.d-chip{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:10px 18px;
  cursor:pointer; transition:all .2s;
}
.d-chip:hover{ border-color:var(--green); background:var(--green-soft); transform:translateY(-1px); }
.d-chip.on{ border-color:var(--green); background:var(--green-soft); }
.d-chip:disabled{ opacity:.55; cursor:default; transform:none; }
.d-chip:focus-visible, .pt-btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.nm-row.row-enter{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; overflow:hidden; transition:max-height .5s cubic-bezier(.16,.8,.3,1), opacity .5s, padding .5s; }
.nm-row.row-enter.row-in{ max-height:60px; opacity:1; padding-top:11px; padding-bottom:11px; }
.flow-step.after.flash{ animation:afterFlash .9s ease; }
@keyframes afterFlash{
  0%{ box-shadow:0 12px 40px rgba(224,78,0,.10), 0 0 0 0 rgba(255,92,0,.5); }
  100%{ box-shadow:0 12px 40px rgba(224,78,0,.10), 0 0 0 18px rgba(255,92,0,0); }
}

/* ── micro-interactions ── */
.btn .ar::after{ display:inline-block; transition:transform .25s; }
.btn:hover .ar::after{ transform:translateX(4px); }
@keyframes ringBreath{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.07); opacity:.65; } }
.cta-band::after, .final::after{ animation:ringBreath 8s ease-in-out infinite; }

/* ── reduced motion: disable v2 animations ── */
@media (prefers-reduced-motion: reduce){
  .scroll-cue .line::after, .tp-dots i, .cta-band::after, .final::after{ animation:none; }
  .nm-row.row-enter{ transition:none; }
}

/* ── September review: readable content, clear costs, actual sites ── */
body{ font-size:16px; font-feature-settings:"palt"; }
section, #start{ scroll-margin-top:100px; }
:focus-visible{ outline:3px solid var(--green-deep); outline-offset:5px; }
.skip-link{ position:fixed; top:8px; left:16px; z-index:400; background:var(--ink); color:var(--paper); padding:12px 18px; transform:translateY(-150%); }
.skip-link:focus{ transform:none; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nav .links{ gap:22px; margin-left:12px; }
.nav .links a .en{ display:none; }
.nav .cta{ white-space:nowrap; }
.hero-kicker{ color:#fff; font-size:15px; margin-bottom:18px; }
.hero-price{ color:#fff; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin-top:24px; font-size:15px; }
.hero-price strong{ font-size:28px; line-height:1.3; }
.hero-price span{ font-size:14px; }
.hero-left{ max-width:650px; }
.hero .lead{ font-size:17px; line-height:1.9; }
.hero-chat-live{ width:300px; }
.sec-head-c p, .s-card p, .svc-card .desc, .qa-card .a, .wc-body p, .sub{ font-size:16px; }
.svc-card h3{ font-size:20px; }
.pill-row .pill .en{ letter-spacing:.02em; }
.works-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.work-card{ grid-column:span 2; min-width:0; }
.work-card:nth-child(-n+2){ grid-column:span 3; }
.wc-shot{ aspect-ratio:16/9; }
.wc-shot img{ object-fit:contain; transition:transform .4s; }
.work-card:hover .wc-shot img{ transform:scale(1.015); }
.wc-body{ padding:20px 22px 24px; }
.wc-body h3{ font-size:19px; }
.wc-body p{ font-size:15px; }
.demo-disclaimer, .comparison-note{ font-size:14px; line-height:1.8; color:var(--ink-3); text-align:center; margin:24px auto 0; }
.start-flow{ margin-top:52px; padding-top:32px; border-top:1px solid var(--line); }
.start-flow > h3{ font-size:24px; margin-bottom:24px; }
.start-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; }
.step-no{ color:var(--green-deep); font-family:Inter,sans-serif; font-size:14px; font-weight:700; }
.start-steps h4{ font-size:18px; margin:8px 0; }
.start-steps p{ font-size:16px; line-height:1.9; color:var(--ink-2); }
.pricing-guide{ text-align:center; color:var(--ink-2); font-size:15px; margin:-20px 0 36px; }
.price-card{ padding:32px 24px 28px; }
.price-card .pname{ font-size:22px; }
.price-card .pfor{ font-size:14px; line-height:1.8; min-height:3.6em; }
.price-card .ribbon{ color:#fff; background:var(--green-deep); font-size:14px; letter-spacing:0; white-space:nowrap; padding:5px 16px; }
.price-label{ font-size:14px; color:var(--ink-3); margin-top:24px; }
.price-card .price-num{ font-size:64px; line-height:1.2; margin:8px 0 22px; letter-spacing:-.04em; }
.price-card .price-unit{ font-size:26px; font-family:"Noto Sans JP",sans-serif; margin-left:4px; letter-spacing:0; }
.price-card .price-custom{ font-size:clamp(26px,2.3vw,32px); letter-spacing:0; min-height:76.8px; display:flex; align-items:center; }
.price-monthly{ font-size:14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); line-height:1.9; }
.price-monthly strong{ display:inline-block; font-size:17px; }
.price-scope{ font-size:15px; color:var(--ink-2); margin-top:20px; line-height:1.8; }
.price-card .p-feats{ list-style:none; border:0; padding:0; margin:20px 0 28px; }
.price-card .p-feat{ font-size:15px; }
.price-card .btn{ padding:14px 12px; font-size:14px; text-align:center; }
.price-card.best .btn{ background:var(--green-deep); border-color:var(--green-deep); }
.price-card.best .btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.price-foot{ margin:0; text-align:left; }
.price-note a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:4px; }
.form-field label{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); letter-spacing:.02em; font-family:inherit; }
.form-field label span{ font-size:14px; color:var(--ink-3); }
.form-field select{ appearance:auto; }
.final .form-note{ font-size:14px; margin:0; }
.form-note a{ text-decoration:underline; text-underline-offset:4px; }
.final .contact-expect{ font-size:15px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.footer-brand .desc{ font-size:14px; color:rgba(255,255,255,.75); max-width:28ch; }
.footer li{ font-size:14px; }
@media(min-width:981px) and (max-width:1199px){
  .nav{ gap:16px; padding-inline:24px; }
  .nav .links{ gap:16px; margin-left:0; }
  .hero-chat-live{ display:none; }
}
@media(max-width:980px){
  .works-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-card, .work-card:nth-child(-n+2){ grid-column:auto; }
  .work-card:last-child{ grid-column:1/-1; max-width:calc(50% - 12px); justify-self:center; }
  .price-card .pfor{ min-height:0; }
  .price-card .price-custom{ font-size:32px; }
  .price-card.best{ margin-top:14px; }
  .start-steps{ grid-template-columns:1fr; gap:24px; }
}
@media(max-width:560px){
  .hero h1{ font-size:clamp(26px,7.6vw,38px); }
  .hero .lead{ font-size:16px; }
  .hero-kicker{ font-size:14px; }
  .hero .hero-cta{ align-items:stretch; }
  .hero .hero-cta .btn{ justify-content:center; }
  .pill-row .pill{ padding:0 10px; }
  .pill-row .pill .jp{ font-size:14px; }
  .works-grid{ grid-template-columns:1fr; }
  .work-card:last-child{ grid-column:auto; max-width:none; justify-self:stretch; }
  .price-card{ padding:32px 22px 26px; }
  .pricing-guide{ text-align:left; }
  .final{ padding:72px 0; }
  .form .submit{ align-self:stretch; justify-content:center; }
}
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

@media(max-width:560px){ .bc-nav{ display:none; } .nm-chips{ flex-wrap:wrap; } .flow-step,.flow-talk{ padding:18px; } }