/* ============================================================
   @Brain LP — design system
   白基調 × ブランドブルー × 太ゴシック × 元気なセールスLP
   ============================================================ */
:root{
  --blue:#2563eb;            /* primary */
  --blue-600:#1d5fd6;
  --blue-700:#1747a8;
  --navy:#13224a;            /* dark text / brand deep */
  --ink:#16233b;            /* body text */
  --muted:#5b6b86;
  --line:#e4e9f2;
  --cta1:#ffae1a;           /* CTA gradient (warm, energetic) */
  --cta2:#ff7a00;
  --marker:rgba(255,201,64,.62);
  --tint:#eef4ff;           /* light blue section */
  --tint2:#f4f7fc;
  --gray:#f4f5f8;
  --cyan:#0fb5d6;
  --down:#d64531;           /* 悪化・減少インジケータ */
  --radius:18px;
  --shadow-sm:0 4px 14px rgba(24,48,96,.07);
  --shadow:0 14px 40px rgba(24,48,96,.12);
  --shadow-lg:0 26px 70px rgba(24,48,96,.18);
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,sans-serif;
  font-weight:500; line-height:1.8; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Zen Kaku Gothic New",sans-serif; margin:0; line-height:1.3; letter-spacing:.005em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* emphasis utilities */
.b{font-weight:900;}
.blue{color:var(--blue);}
.red{color:#e8341c;}
.xl{font-size:1.35em;}
.marker{background:linear-gradient(transparent 58%, var(--marker) 58%); padding:0 .06em; font-weight:900;}
.u-deco{position:relative; font-weight:900;}
.u-deco::after{content:""; position:absolute; left:-2px; right:-2px; bottom:2px; height:9px;
  background:var(--marker); z-index:-1; border-radius:2px;}

/* ============ buttons ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; cursor:pointer; border:0;
  border-radius:999px; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-pill{background:var(--blue); color:#fff; padding:13px 26px; font-size:16px; box-shadow:0 8px 20px rgba(37,99,235,.32);}
.btn-pill .btn-mail{width:18px; height:18px; flex:none;}
.btn-pill:hover{box-shadow:0 12px 26px rgba(37,99,235,.42);}
.btn-cta{background:linear-gradient(95deg,var(--cta1),var(--cta2)); color:#fff;
  padding:22px 56px; font-size:24px; box-shadow:0 14px 30px rgba(255,122,0,.36);
  position:relative;}
.btn-cta:hover{box-shadow:0 18px 40px rgba(255,122,0,.5); filter:brightness(1.03);}
.btn-cta .arr{font-size:.8em; transform:translateY(1px);}
.btn-ghost{background:#fff; color:var(--blue); border:2px solid var(--blue); padding:13px 28px; font-size:16px;}

/* ============ header ============ */
.hd{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; max-width:1240px;}
.logo{display:flex; align-items:center; gap:11px; line-height:1;}
.logo-icon{width:46px; height:auto; flex:none;}
.logo-tx{display:flex; flex-direction:column; gap:5px;}
.logo .name{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:26px; color:var(--navy);}
.logo .name .at{color:var(--blue);}
.logo .tagline{font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.04em;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a.lnk{font-size:14.5px; font-weight:700; color:var(--navy); transition:color .15s;}
.nav a.lnk:hover{color:var(--blue);}

/* ============ section scaffolding ============ */
section{position:relative;}
.sec{padding:96px 0;}
.sec-tint{background:var(--tint);}
.sec-gray{background:var(--gray);}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900; font-size:15px; color:var(--blue); letter-spacing:.08em; margin-bottom:14px;}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--blue); border-radius:2px;}
.sec-title{font-size:40px; font-weight:900; color:var(--navy); text-align:center; line-height:1.32;}
.sec-title .blue{color:var(--blue);}
.sec-head{text-align:center; margin-bottom:56px;}
.sec-head .eyebrow{justify-content:center;}
.sec-lead{font-size:16px; color:var(--muted); font-weight:600; line-height:1.7; margin-top:16px;}
.sec-lead b{color:var(--navy); font-weight:900;}

/* striped placeholder */
.ph{position:relative; border-radius:16px; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, #eaf0fb 0 12px, #e1eaf8 12px 24px);
  border:1px dashed #b9c8e6; display:flex; align-items:center; justify-content:center;}
.ph span{font-family:"JetBrains Mono",monospace; font-size:12px; color:#7d93bb; text-align:center; padding:10px;}

/* ====================================================================
   HERO
   ==================================================================== */
.hero{position:relative; padding:42px 0 30px; overflow:hidden;
  background:linear-gradient(160deg,#ffffff 0%,#eaf2ff 52%,#deeaff 100%);}
.hero::before{content:""; position:absolute; right:-12%; top:-22%; width:820px; height:820px; border-radius:50%;
  background:radial-gradient(circle, rgba(63,134,245,.28), rgba(63,134,245,0) 62%); z-index:0;}
.hero::after{content:""; position:absolute; left:-15%; bottom:-26%; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(15,181,214,.18), rgba(15,181,214,0) 64%); z-index:0;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;}
.hero-bg svg{width:100%; height:100%;}
/* big @ watermark sitting in the hero background */
.hero-at{position:absolute; z-index:0; pointer-events:none; user-select:none;
  left:55%; top:48%; transform:translate(-50%,-50%); line-height:.72;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:660px;
  color:var(--blue); opacity:.09;}
/* vertical scrolling rail down the left edge */
.side-rail{position:absolute; left:0; top:0; bottom:0; width:34px; z-index:1; overflow:hidden;
  pointer-events:none; display:flex; justify-content:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);}
.side-rail-tx{writing-mode:vertical-rl; text-orientation:mixed; white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-weight:600; font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(37,99,235,.4); animation:sideScroll 16s linear infinite;}
@keyframes sideScroll{from{transform:translateY(-50%);}to{transform:translateY(0%);}}
@media(prefers-reduced-motion:reduce){.side-rail-tx{animation:none;}}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.04fr .96fr; gap:38px; align-items:center; max-width:1220px;}

/* hero copy */
.hero-h1{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:54px; color:var(--navy);
  line-height:1.18; letter-spacing:.01em; margin-bottom:22px;}
.hero-h1 .blue{color:var(--blue);}
.hero-lead{font-family:"Zen Kaku Gothic New",sans-serif; font-size:21px; font-weight:900; color:var(--ink); line-height:1.6; margin-bottom:14px;}
.hero-lead .blue{color:var(--blue);}
.hero-sub{font-size:14.5px; color:var(--muted); font-weight:500; line-height:1.85; margin-bottom:26px;}

/* hero CTAs */
.hero-cta{display:flex; gap:16px; margin-top:32px; align-items:stretch;}
.cta-col{position:relative; display:flex; flex-direction:column;}
.cta-bubble{position:absolute; top:-34px; left:50%; transform:translateX(-50%); white-space:nowrap; z-index:2;
  background:linear-gradient(95deg,var(--cta1),var(--cta2)); color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:12.5px; line-height:1;
  padding:7px 14px; border-radius:999px; box-shadow:0 7px 18px rgba(255,122,0,.34);
  display:flex; align-items:center; gap:5px; animation:ctabob 2.2s ease-in-out infinite;}
.cta-bubble svg{width:14px; height:14px;}
.cta-bubble::after{content:""; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:var(--cta2); border-radius:1px;}
@keyframes ctabob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-4px);}}
@media(prefers-reduced-motion:reduce){.cta-bubble{animation:none;}}
.hero-btn{gap:9px; padding:16px 30px; font-size:17px; border-radius:12px; min-width:204px;}
.cta-col .hero-btn{width:100%;}
.hero-btn svg{width:19px; height:19px; flex:none;}
.hero-btn-fill{background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.30);}
.hero-btn-fill:hover{box-shadow:0 14px 30px rgba(37,99,235,.42);}
.hero-btn-line{background:#fff; color:var(--blue); border:2px solid var(--blue);}
.hero-btn-line:hover{background:var(--tint);}
.cta-cap{font-size:11.5px; color:var(--muted); font-weight:500; white-space:nowrap;}

/* hero feature chips */
.hero-chips{display:flex; gap:12px;}
.chip{flex:1; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:13px 12px; box-shadow:var(--shadow-sm);}
.chip-ico{flex:none; width:36px; height:36px; border-radius:10px; background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center;}
.chip-ico svg{width:19px; height:19px;}
.chip-tx{display:flex; flex-direction:column; line-height:1.32; min-width:0;}
.chip-tx b{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:13px; color:var(--navy); white-space:nowrap;}
.chip-tx span{font-size:9.5px; color:var(--muted); font-weight:500; margin-top:3px; white-space:nowrap;}

/* offline badge — over device */
.badge-offline{position:absolute; top:-16px; right:-4px; z-index:6; text-align:center;
  background:radial-gradient(circle at 32% 26%, #4f93ff, var(--blue)); color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:12px; line-height:1.3;
  width:88px; height:88px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(37,99,235,.42); border:3px solid #fff; gap:2px;}
.badge-offline svg{width:16px; height:16px; margin-bottom:1px;}

/* hero visual — device mockups */
.device-stage{position:relative; height:512px; z-index:1;}
.laptop{position:absolute; right:0; top:26px; width:97%; z-index:2;}
.laptop-screen{background:#16243f; border:11px solid #16243f; border-bottom:0; border-radius:16px 16px 0 0;
  aspect-ratio:16/10; overflow:hidden; box-shadow:0 26px 54px rgba(20,40,90,.3);}
.laptop-base{height:15px; background:linear-gradient(#d6dfef,#9badd0); border-radius:0 0 14px 14px; margin:0 -3.5%; position:relative;}
.laptop-base::after{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:92px; height:5px; background:#8094bd; border-radius:0 0 6px 6px;}
.dash{display:flex; height:100%; background:#f3f6fc;}
.dash-side{width:27%; background:#0f1e3d; padding:13px 9px; display:flex; flex-direction:column; gap:4px;}
.dash-side .dlogo{color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:12.5px; margin-bottom:10px; padding-left:4px;}
.dash-side .dlogo .at{color:#6ea0ff;}
.dnav{display:flex; align-items:center; gap:7px; font-size:8px; font-weight:700; color:rgba(255,255,255,.6); padding:6px 8px; border-radius:6px; white-space:nowrap;}
.dnav svg{width:11px; height:11px; flex:none;}
.dnav.on{background:var(--blue); color:#fff;}

.dash-main{flex:1; padding:11px 12px; display:flex; flex-direction:column; gap:9px; min-width:0;}
.dcard{background:#fff; border-radius:8px; box-shadow:var(--shadow-sm); padding:9px 11px; min-width:0;}
.dcard-h{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:9px; color:var(--navy); margin-bottom:8px;}
.dcard-trend{flex:1.2; display:flex; flex-direction:column;}
.dcard-row{display:grid; grid-template-columns:1fr 1fr; gap:9px; flex:1;}

/* trend bar chart */
.trend{flex:1; display:flex; gap:5px; min-height:0;}
.trend-y{display:flex; flex-direction:column; justify-content:space-between; font-size:5.5px; color:#9aabc6; font-family:"JetBrains Mono",monospace; text-align:right; flex:none; padding-bottom:9px;}
.trend-plot{flex:1; display:flex; flex-direction:column; min-width:0;}
.trend-bars{flex:1; display:flex; align-items:flex-end; gap:2.5px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); padding:0 2px; min-height:0;}
.trend-bars i{flex:1; height:var(--h); background:linear-gradient(180deg,#5b97f7,var(--blue)); border-radius:1.5px 1.5px 0 0; transform-origin:bottom;}
@media(prefers-reduced-motion:no-preference){
  .dcard-trend.play .trend-bars i{animation:barGrow .55s cubic-bezier(.2,.85,.25,1) backwards;}
  .dcard-trend.play .trend-bars i:nth-child(1){animation-delay:.03s;}
  .dcard-trend.play .trend-bars i:nth-child(2){animation-delay:.07s;}
  .dcard-trend.play .trend-bars i:nth-child(3){animation-delay:.11s;}
  .dcard-trend.play .trend-bars i:nth-child(4){animation-delay:.15s;}
  .dcard-trend.play .trend-bars i:nth-child(5){animation-delay:.19s;}
  .dcard-trend.play .trend-bars i:nth-child(6){animation-delay:.23s;}
  .dcard-trend.play .trend-bars i:nth-child(7){animation-delay:.27s;}
  .dcard-trend.play .trend-bars i:nth-child(8){animation-delay:.31s;}
  .dcard-trend.play .trend-bars i:nth-child(9){animation-delay:.35s;}
  .dcard-trend.play .trend-bars i:nth-child(10){animation-delay:.39s;}
  .dcard-trend.play .trend-bars i:nth-child(11){animation-delay:.43s;}
  .dcard-trend.play .trend-bars i:nth-child(12){animation-delay:.47s;}
}
@keyframes barGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.trend-x{display:flex; gap:2.5px; margin-top:3px; padding:0 2px;}
.trend-x span{flex:1; text-align:center; font-size:4.6px; color:#9aabc6; font-family:"JetBrains Mono",monospace;}

/* donut */
.dcard-donut{display:flex; flex-direction:column;}
.donut-wrap{flex:1; display:flex; align-items:center; gap:8px;}
.donut{position:relative; width:48px; height:48px; border-radius:50%; flex:none;
  background:conic-gradient(var(--blue) 0 45%, #3f86f5 45% 75%, #8fb6f7 75% 90%, #c4dcfb 90% 100%);}
@media(prefers-reduced-motion:no-preference){
  .dcard-donut.play .donut{animation:donutPop .55s cubic-bezier(.2,.85,.25,1) .1s backwards;}
}
@keyframes donutPop{from{transform:scale(.45); opacity:0;}to{transform:scale(1); opacity:1;}}
.donut-hole{position:absolute; inset:31%; background:#fff; border-radius:50%;}
.donut-legend{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3.5px; min-width:0;}
.donut-legend li{display:flex; align-items:center; gap:5px; font-size:6.3px; font-weight:700; color:var(--ink); white-space:nowrap;}
.donut-legend i{width:6px; height:6px; border-radius:2px; flex:none;}
.donut-legend b{margin-left:auto; font-family:"JetBrains Mono",monospace; font-weight:500; color:var(--muted);}

/* region bars */
.dcard-region{display:flex; flex-direction:column;}
.region{list-style:none; padding:0; margin:0; flex:1; display:flex; flex-direction:column; gap:5px; justify-content:center;}
.region li{display:flex; align-items:center; gap:6px; font-size:6.3px; font-weight:700; color:var(--navy);}
.rg-l{flex:none; width:16px;}
.rg-bar{flex:1; height:6px; background:#eef3fb; border-radius:3px; overflow:hidden;}
.rg-bar i{display:block; height:100%; width:var(--w); background:linear-gradient(90deg,#8fb6f7,var(--blue)); border-radius:3px; transform-origin:left;}
@media(prefers-reduced-motion:no-preference){
  .dcard-region.play .rg-bar i{animation:regGrow .6s cubic-bezier(.2,.85,.25,1) backwards;}
  .dcard-region.play .region li:nth-child(1) .rg-bar i{animation-delay:.06s;}
  .dcard-region.play .region li:nth-child(2) .rg-bar i{animation-delay:.14s;}
  .dcard-region.play .region li:nth-child(3) .rg-bar i{animation-delay:.22s;}
  .dcard-region.play .region li:nth-child(4) .rg-bar i{animation-delay:.30s;}
  .dcard-region.play .region li:nth-child(5) .rg-bar i{animation-delay:.38s;}
}
@keyframes regGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* query bar + result highlight (interactive demo) */
.dquery{display:flex; align-items:center; gap:6px; flex:none; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:7px 9px; box-shadow:var(--shadow-sm);}
.dquery-ava{flex:none; width:14px; height:14px; border-radius:4px; background:var(--blue); color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:8px; display:flex; align-items:center; justify-content:center;}
.dquery-tx{font-size:8px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden;}
.dquery-caret{flex:none; width:1.4px; height:9px; background:var(--blue);}
.dquery.typing .dquery-caret{animation:dqblink .85s steps(1) infinite;}
.dquery:not(.typing) .dquery-caret{opacity:0;}
@keyframes dqblink{0%,50%{opacity:1;}51%,100%{opacity:0;}}
.dquery-spin{flex:none; margin-left:auto; width:10px; height:10px; border:1.6px solid #cfe0fb; border-top-color:var(--blue);
  border-radius:50%; opacity:0;}
.dquery.loading .dquery-spin{opacity:1; animation:dqspin .7s linear infinite;}
@keyframes dqspin{to{transform:rotate(360deg);}}

.dcard{transition:box-shadow .3s ease, transform .3s ease, opacity .3s ease;}
.dash-main.asking .dcard{opacity:.42;}
.dash-main.asking .dcard.is-target{opacity:1; box-shadow:0 0 0 1.6px var(--blue), 0 10px 22px rgba(37,99,235,.18); transform:translateY(-1px);}
@media(prefers-reduced-motion:reduce){
  .dcard{transition:none;}
  .dquery.typing .dquery-caret,.dquery.loading .dquery-spin{animation:none;}
}

.phone{position:absolute; left:-6px; bottom:-14px; width:152px; z-index:3;
  background:#16243f; border-radius:26px; padding:7px; box-shadow:0 22px 46px rgba(20,40,90,.34);}
.phone .notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:44px; height:5px; background:#0a1428; border-radius:3px; z-index:4;}
.phone-screen{background:#eef4ff; border-radius:19px; overflow:hidden; aspect-ratio:9/18.6; display:flex; flex-direction:column;}
.ph-head{flex:none; background:#fff; border-bottom:1px solid var(--line); padding:15px 10px 7px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:9px; color:var(--navy); text-align:center;}
.ph-head .at{color:var(--blue);}
.ph-body{flex:1; padding:8px 8px 9px; display:flex; flex-direction:column; gap:5px; justify-content:flex-end; overflow:hidden;}
.pbub{font-size:7px; line-height:1.45; border-radius:8px; padding:5px 7px; max-width:88%;}
.pbub.q{background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:2px;}
.pbub.a{background:#fff; color:var(--ink); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:2px;}
.pmini{background:#fff; border:1px solid var(--line); border-radius:6px; padding:5px; display:flex; gap:3px; align-items:flex-end; height:34px; align-self:flex-start; width:80%;}
.pmini i{flex:1; background:linear-gradient(180deg,#8fb6f7,#3f86f5); border-radius:1px;}
.pline{background:#fff; border:1px solid var(--line); border-radius:6px; padding:5px 6px; height:32px; align-self:flex-start; width:80%;}
.pline svg{width:100%; height:100%; display:block;}
.ptyping{align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:8px; border-bottom-left-radius:2px; padding:6px 8px; gap:3px; align-items:center;}
.ptyping span{width:4px; height:4px; border-radius:50%; background:#9aabc6; animation:ptdot 1s ease-in-out infinite;}
.ptyping span:nth-child(2){animation-delay:.15s;}
.ptyping span:nth-child(3){animation-delay:.3s;}
@keyframes ptdot{0%,60%,100%{opacity:.35; transform:translateY(0);}30%{opacity:1; transform:translateY(-2px);}}

/* phone — scripted reveal */
.ph-body .pbub,.ph-body .pmini,.ph-body .pline{opacity:0; transform:translateY(7px); transition:opacity .35s ease, transform .35s ease;}
.ph-body .pbub.on,.ph-body .pmini.on,.ph-body .pline.on{opacity:1; transform:none;}
.ph-body .ptyping{display:none;}
.ph-body .ptyping.on{display:flex;}
@media(prefers-reduced-motion:reduce){
  .ph-body .pbub,.ph-body .pmini,.ph-body .pline{transition:none;}
  .ptyping span{animation:none;}
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* scroll hint */
.scroll-hint{display:flex; align-items:center; justify-content:center; gap:16px; margin:30px auto 0;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:14px; color:var(--blue); position:relative; z-index:1;}
.scroll-hint .sh-line{width:64px; height:2px; background:#c9d8f0; border-radius:2px;}
.scroll-hint .sh-chev{width:30px; height:30px; border-radius:50%; border:2px solid #c9d8f0; color:var(--blue);
  display:flex; align-items:center; justify-content:center; animation:shbob 1.8s ease-in-out infinite;}
.scroll-hint .sh-chev svg{width:15px; height:15px;}
@keyframes shbob{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
@media(prefers-reduced-motion:reduce){.scroll-hint .sh-chev{animation:none;}}

/* horizontal keyword marquee (between hero and content) */
.hmarquee{overflow:hidden; background:var(--blue); border-top:1px solid rgba(255,255,255,.12);}
.hmarquee-track{display:flex; align-items:center; width:max-content; white-space:nowrap;
  animation:hmarquee 30s linear infinite;}
.hmq{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:17px; color:#fff;
  padding:15px 22px; letter-spacing:.01em;}
.hmq-at{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:17px;
  color:rgba(255,255,255,.42);}
@keyframes hmarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.hmarquee:hover .hmarquee-track{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hmarquee-track{animation:none;}}

/* CTA block under hero */
.cta-block{text-align:center; margin-top:54px;}
.cta-kicker{display:inline-flex; align-items:center; gap:14px; font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900; font-size:19px; color:var(--ink); margin-bottom:14px;}
.cta-kicker::before,.cta-kicker::after{content:""; width:2px; height:26px; background:var(--ink);}
.cta-kicker::before{transform:rotate(-18deg);}
.cta-kicker::after{transform:rotate(18deg);}
.cta-note{font-size:13px; color:var(--muted); margin-top:12px;}

/* sticky corner CTA */
.sticky-cta{position:fixed; right:22px; bottom:22px; z-index:70; width:248px;
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); border:2px solid var(--blue);
  background:#fff; transform:translateY(160%); transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta .top{background:var(--blue); color:#fff; text-align:center; padding:9px 8px; font-size:13px; font-weight:700;}
.sticky-cta .top b{font-size:17px;}
.sticky-cta .mid{text-align:center; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; color:var(--navy); font-size:18px; padding:12px 8px 4px;}
.sticky-cta .btnrow{padding:10px 12px 14px;}
.sticky-cta .btn-cta{width:100%; padding:14px 8px; font-size:16px;}
.sticky-cta .close{position:absolute; top:5px; right:8px; color:#fff; font-size:16px; cursor:pointer; opacity:.85; line-height:1;}

/* ====================================================================
   お悩み — その悩み、@Brainが解決します
   ==================================================================== */
.pain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pain{background:#fff; border-radius:16px; padding:26px 26px; box-shadow:var(--shadow-sm);
  display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); transition:transform .2s, box-shadow .2s;}
.pain:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.pain .pico{width:48px; height:48px; flex:none; background:var(--tint); border-radius:12px; padding:9px;}
.pain .pico svg{width:100%; height:100%;}
.pain h3{font-size:16.5px; font-weight:900; color:var(--navy); margin-bottom:7px; line-height:1.4;}
.pain p{font-size:13.5px; color:var(--muted); line-height:1.7;}
.pain-solve{background:linear-gradient(135deg,var(--blue),#3f86f5); border:0; color:#fff; align-items:center;}
.pain-solve .solve-mark{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:30px; color:#fff; flex:none;}
.pain-solve .solve-mark span{color:#bcd6ff;}
.pain-solve h3{color:#fff;}
.pain-solve p{color:rgba(255,255,255,.9); font-weight:700;}

/* ====================================================================
   とは / intro
   ==================================================================== */
.toha{text-align:center;}
.toha .lead-small{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:26px; color:var(--ink);}
.toha .brandbig{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:64px; color:var(--blue); margin:6px 0 10px;}
.toha .brandbig .at{color:var(--navy);}
.toha .desc{max-width:760px; margin:18px auto 0; font-size:16.5px; color:var(--ink); line-height:2;}
.toha .note{font-size:13.5px; color:var(--muted); margin-top:16px;}

/* ====================================================================
   3つの価値
   ==================================================================== */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.vcard{background:#fff; border-radius:var(--radius); padding:38px 30px 34px; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); text-align:center; transition:transform .2s, box-shadow .2s; position:relative; overflow:hidden;}
.vcard:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.vcard .num{position:absolute; top:14px; right:18px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:42px; color:var(--tint);}
.vcard .vico{width:78px; height:78px; margin:0 auto 22px; border-radius:50%; background:var(--tint);
  display:flex; align-items:center; justify-content:center;}
.vcard .vico svg{width:40px; height:40px;}
.vcard h3{font-size:23px; font-weight:900; color:var(--navy); margin-bottom:14px;}
.vcard p{font-size:14.5px; color:var(--muted); line-height:1.85; text-align:left;}

/* ====================================================================
   使い方 3ステップ
   ==================================================================== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative;}
.step{background:#fff; border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow-sm); border:1px solid var(--line); text-align:center; position:relative;}
.step .sn{width:50px; height:50px; margin:0 auto 18px; border-radius:50%; background:var(--blue); color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:22px; display:flex; align-items:center; justify-content:center;}
.step h3{font-size:20px; font-weight:900; color:var(--navy); margin-bottom:12px;}
.step p{font-size:14px; color:var(--muted); line-height:1.8;}
.step .demo{margin-top:18px; background:var(--tint); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--blue); font-weight:700; text-align:left;}
.step .arrow-r{position:absolute; right:-26px; top:50%; transform:translateY(-50%); color:#c3d3ee; font-size:34px; z-index:2;}
.step:last-child .arrow-r{display:none;}

/* ====================================================================
   分析例：質問→AIが可視化
   ==================================================================== */
.qa-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.qa-card{background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column;}
.qa-q{display:flex; align-items:center; gap:11px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:16.5px; color:var(--navy); line-height:1.4; margin-bottom:18px;}
.qa-ic{flex:none; width:30px; height:30px; border-radius:9px; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900;}
.chart{background:var(--tint2); border-radius:12px; padding:18px 16px 12px; margin-bottom:16px;}
.bars{display:flex; align-items:flex-end; gap:6px; height:140px;}
.bars i{flex:1; background:linear-gradient(180deg,#3f86f5,var(--blue)); border-radius:4px 4px 0 0; min-width:0;}
.bars.alt i:nth-child(2n){background:linear-gradient(180deg,#8fb6f7,#3f86f5);}
.chart-axis{font-size:11px; color:var(--muted); text-align:center; margin-top:9px; font-family:"JetBrains Mono",monospace; display:inline-flex; align-items:center; gap:6px; justify-content:center; width:100%;}
.ax-arrow{width:22px; height:11px; display:inline-block; color:var(--muted); flex:none;}
.pie{width:128px; height:128px; border-radius:50%; margin:6px auto 14px; box-shadow:0 6px 16px rgba(37,99,235,.18);}
.pie-legend{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;}
.pie-legend span{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); font-weight:700;}
.pie-legend i{width:11px; height:11px; border-radius:3px; flex:none;}
.qa-a{font-size:13px; color:var(--muted); line-height:1.75;}
.qa-a b{color:var(--blue);}
.qa-note{text-align:center; font-size:13px; color:var(--muted); margin-top:34px;}

/* ====================================================================
   活用シーン
   ==================================================================== */
.uc2-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.uc2{background:#fff; border-radius:var(--radius); padding:24px 24px 22px; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.uc2:hover{transform:translateY(-4px); box-shadow:var(--shadow);}

/* role header */
.uc2-role{display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px dashed var(--line); margin-bottom:18px;}
.uc2-ico{flex:none; width:52px; height:52px; border-radius:13px; background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center;}
.uc2-ico svg{width:28px; height:28px;}
.uc2-role-tx{display:flex; flex-direction:column; gap:3px;}
.uc2-role-tx b{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:18px; color:var(--navy);}
.uc2-role-tx span{font-size:12.5px; color:var(--muted); font-weight:500; line-height:1.45;}

/* chat */
.uc2-chat{display:flex; flex-direction:column; gap:12px; flex:1;}
.uc2-q{align-self:flex-end; max-width:88%; background:var(--blue); color:#fff; font-weight:700; font-size:14px;
  line-height:1.5; padding:11px 15px; border-radius:14px; border-bottom-right-radius:4px;
  box-shadow:0 6px 14px rgba(37,99,235,.18); position:relative;}
.uc2-q::before{content:"あなた"; position:absolute; right:4px; top:-17px; font-size:10px; font-weight:700; color:var(--muted);}
.uc2-a{align-self:stretch; background:var(--tint); border:1px solid var(--line); border-radius:14px;
  border-top-left-radius:4px; padding:14px 15px 13px;}
.uc2-a-h{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:11px;}
.uc2-ava{flex:none; width:18px; height:18px; border-radius:5px; background:var(--blue); color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:10px; display:flex; align-items:center; justify-content:center;}

/* result: ranking list */
.uc2-rank{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.uc2-rank li{display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:10px;}
.rk-n{font-size:12.5px; font-weight:800; color:var(--navy);}
.rk-bar{height:9px; background:#e7eef9; border-radius:5px; overflow:hidden;}
.rk-bar i{display:block; height:100%; width:var(--w); border-radius:5px;
  background:linear-gradient(90deg,#f0a79c,var(--down));}
.rk-v{font-size:11.5px; font-weight:800; white-space:nowrap;}
.rk-v.down{color:var(--down);}

/* result: vertical bars */
.uc2-bars{display:flex; align-items:flex-end; gap:10px; height:92px; padding:0 2px 0;}
.ub{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.ub i{width:100%; max-width:34px; height:var(--h); background:#cfdcf2; border-radius:4px 4px 0 0;}
.ub span{font-size:11px; font-weight:700; color:var(--muted);}
.ub.hot i{background:linear-gradient(180deg,#f07a68,var(--down)); box-shadow:0 5px 12px rgba(214,69,49,.28);}
.ub.hot span{color:var(--down);}

/* result: KPI big number */
.uc2-kpi{display:flex; align-items:center; gap:16px; padding:4px 2px 2px;}
.uk-big{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:46px; color:var(--down); line-height:.9; letter-spacing:-.01em;}
.uk-cur{font-size:24px; margin-right:2px;}
.uk-unit{font-size:22px;}
.uk-tx{display:flex; flex-direction:column; gap:3px;}
.uk-tx b{font-size:14px; font-weight:900; color:var(--navy);}
.uk-tx span{font-size:12px; color:var(--muted); font-weight:600;}

/* result: stat chips */
.uc2-chips{display:flex; flex-wrap:wrap; gap:8px; padding:2px 0;}
.uchip{display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--line);
  border-radius:9px; padding:7px 11px; font-size:12px; font-weight:700; color:var(--navy);}
.uchip b{font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--navy);}
.uchip.down{border-color:rgba(214,69,49,.4); background:rgba(214,69,49,.06);}
.uchip.down b{color:var(--down);}

/* takeaway */
.uc2-take{margin-top:13px; font-size:13px; line-height:1.65; color:var(--ink); font-weight:600;
  display:flex; gap:7px; align-items:flex-start;}
.uc2-take b{color:var(--navy); font-weight:900; white-space:nowrap;}
.tk-tx{flex:1; min-width:0; line-break:strict; word-break:normal; overflow-wrap:anywhere; text-wrap:pretty;}
.tk-ar{flex:none; color:var(--blue); font-weight:900; font-size:15px; line-height:1.4;}

/* ====================================================================
   なぜ、いまデータ分析なのか（statband）
   ==================================================================== */
.sec-navy{background:radial-gradient(120% 120% at 20% 0%, #1c356f, var(--navy));}
.eyebrow.light{color:#7fb0f7;}
.eyebrow.light::before{background:#7fb0f7;}
.sec-title.white{color:#fff;}
.blue-l{color:#7fb0f7;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.stat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:30px 18px 26px; text-align:center;}
.gauge-wrap{position:relative; width:130px; height:130px; margin:0 auto 16px;}
.gauge{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, #8fc0ff 0 var(--p), rgba(255,255,255,.12) var(--p) 100%);
  -webkit-mask:radial-gradient(circle, #0000 56%, #000 57%);
          mask:radial-gradient(circle, #0000 56%, #000 57%);}
.stat-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:42px; line-height:1;
  background:linear-gradient(180deg,#fff,#9fc2f7); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-num small{font-size:.46em; margin-left:1px;}
.stat-lbl{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; color:#dbe6fb; line-height:1.55;}
.stat-lbl b{color:#fff; font-weight:900;}
.sec-navy .sec-lead{color:#cdd9f2;}
.sec-navy .sec-lead b{color:#fff;}
.stat-note{text-align:center; font-size:12.5px; color:#8aa0cb; margin-top:28px;}

/* ====================================================================
   構成図
   ==================================================================== */
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 24px;}
.diagram{background:var(--tint2); border:2px solid var(--line); border-radius:22px; padding:30px; position:relative;}
.net-label{text-align:center; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:14px; color:var(--blue);
  background:var(--tint); border:1px dashed var(--blue); border-radius:999px; padding:8px 20px; display:inline-block; margin:0 auto 26px; width:100%;}
.diag-row{display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr; gap:10px; align-items:center;}
.diag-box{background:#fff; border-radius:16px; padding:22px 18px; box-shadow:var(--shadow-sm); border:1px solid var(--line); text-align:center; position:relative;}
.diag-box.center{border:2px solid var(--blue); box-shadow:0 14px 34px rgba(37,99,235,.18);}
.diag-box h4{font-size:16px; font-weight:900; color:var(--navy); margin-bottom:8px;}
.diag-box p{font-size:12.5px; color:var(--muted); line-height:1.6;}
.diag-box .db-ic{width:42px; height:42px; margin:0 auto 10px;}
.srv{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px;}
.srv li{font-size:12.5px; font-weight:700; color:var(--ink); background:var(--tint); border-radius:8px; padding:6px 8px;}
.badge-new,.badge-keep{position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:900;
  color:#fff; padding:3px 12px; border-radius:999px; white-space:nowrap;}
.badge-new{background:var(--blue);}
.badge-keep{background:#16b378;}
.diag-conn{display:flex; flex-direction:column; align-items:center; color:var(--blue); font-size:18px;}
.diag-conn span{font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--muted); margin-bottom:2px;}
.diag-conn::after{content:""; width:18px; height:18px; border-bottom:3px solid currentColor; border-left:3px solid currentColor; transform:rotate(-45deg); margin-top:4px;}
.diag-cut{text-align:center; margin-top:22px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; color:#e8341c; font-size:15px;}
.diag-cut span{display:inline-block; width:22px; height:22px; line-height:20px; border:2px solid #e8341c; border-radius:50%; font-size:13px;}

/* ====================================================================
   導入効果（コスト）
   ==================================================================== */
.cost-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.cost{background:#fff; border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow-sm); border:1px solid var(--line); text-align:center;}
.cost-off{display:inline-block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:30px; color:#fff;
  background:linear-gradient(95deg,var(--cta1),var(--cta2)); border-radius:999px; padding:6px 26px; margin-bottom:18px; box-shadow:0 8px 18px rgba(255,122,0,.3);}
.cost-off small{font-size:.6em;}
.cost h3{font-size:19px; font-weight:900; color:var(--navy); margin-bottom:16px;}
.ba{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; white-space:nowrap;}
.ba .before{font-size:16px; color:var(--muted); text-decoration:line-through; white-space:nowrap;}
.ba .ba-arr{color:var(--blue); font-size:13px;}
.ba .after{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:25px; color:var(--blue); white-space:nowrap;}
.cost p{font-size:13.5px; color:var(--muted); line-height:1.75; text-align:left;}

/* ====================================================================
   導入の流れ
   ==================================================================== */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; position:relative;}
.fstep{background:#fff; border-radius:14px; padding:24px 16px; box-shadow:var(--shadow-sm); border:1px solid var(--line); position:relative;}
.fstep .fn{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:22px; color:#fff; background:var(--blue);
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.fstep h4{font-size:15px; font-weight:900; color:var(--navy); margin-bottom:9px; line-height:1.4;}
.fstep p{font-size:12.5px; color:var(--muted); line-height:1.65;}
.fstep:not(:last-child)::after{content:""; position:absolute; right:-9px; top:36px; width:11px; height:11px;
  border-top:3px solid #bcd0ee; border-right:3px solid #bcd0ee; transform:rotate(45deg); z-index:2;}

/* ====================================================================
   競合比較
   ==================================================================== */
.table-wrap{overflow-x:auto;}
.cmp{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); min-width:680px;}
.cmp th,.cmp td{padding:18px 14px; text-align:center; font-size:14px; border-bottom:1px solid var(--line);}
.cmp thead th{background:var(--navy); color:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15px; line-height:1.3;}
.cmp thead th small{font-weight:500; font-size:11px; opacity:.8;}
.cmp thead th.me{background:var(--blue); font-size:19px;}
.cmp thead th.corner{background:#0e1b3a;}
.cmp tbody th{text-align:left; background:var(--tint2); font-weight:900; color:var(--navy); font-size:14.5px; white-space:nowrap;}
.cmp td .cc{font-size:22px; color:var(--blue); display:block; line-height:1;}
.cmp td span{display:block; font-size:11px; color:var(--muted); margin-top:3px;}
.cmp td.me{background:rgba(37,99,235,.07); font-weight:900; color:var(--navy);}
.cmp td.me .cc{color:var(--blue);}
.cmp tr.total th, .cmp tr.total td{background:var(--tint); font-size:22px;}
.cmp tr.total td.me{background:rgba(37,99,235,.14);}

/* ====================================================================
   料金
   ==================================================================== */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:880px; margin:0 auto;}
.pcard{background:#fff; border-radius:20px; padding:34px 32px; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
.pcard.feat{border:2px solid var(--blue); box-shadow:var(--shadow);}
.ptag{display:inline-block; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:15px; color:#fff;
  background:var(--navy); border-radius:999px; padding:6px 22px; margin-bottom:22px;}
.pcard.feat .ptag{background:var(--blue);}
.prow{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px dashed var(--line); font-size:14px; color:var(--ink);}
.prow b{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:19px; color:var(--navy); white-space:nowrap;}
.ptotal{display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; font-weight:900; color:var(--navy);}
.ptotal b{font-family:"Zen Kaku Gothic New",sans-serif; font-size:30px;}
.pbig{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:56px; color:var(--blue); line-height:1; margin-bottom:22px;}
.pbig small{font-size:.34em; color:var(--ink);}
.pchecks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px;}
.pchecks li{font-size:14.5px; font-weight:700; color:var(--ink); padding-left:30px; position:relative;}
.pchecks li::before{content:""; position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%; background:var(--blue);}
.pchecks li::after{content:""; position:absolute; left:8px; top:5px; width:5px; height:9px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);}
.subsidy{display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; max-width:880px; margin:34px auto 0;
  background:var(--tint); border-radius:20px; padding:34px 38px; border:1px solid var(--line);}
.subsidy h3{font-size:25px; font-weight:900; color:var(--navy); margin-bottom:12px; line-height:1.4;}
.subsidy p{font-size:14px; color:var(--muted); line-height:1.8;}
.sba{display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow-sm);}
.sba .before{font-size:15px; color:var(--muted); text-decoration:line-through;}
.sba .ba-arr{color:var(--blue);}
.sba .after{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:22px; color:var(--blue);}
.sub-badge{display:block; text-align:center; margin-top:12px; font-size:12px; font-weight:700; color:#e8341c;}

/* ====================================================================
   FAQ
   ==================================================================== */
.faq{display:flex; flex-direction:column; gap:14px;}
.faq details{background:#fff; border-radius:14px; box-shadow:var(--shadow-sm); border:1px solid var(--line); overflow:hidden;}
.faq summary{list-style:none; cursor:pointer; padding:22px 26px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:16.5px; color:var(--navy); position:relative; padding-left:62px; padding-right:50px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"Q"; position:absolute; left:22px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  background:var(--blue); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.faq summary::after{content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); color:var(--blue); font-size:24px; font-weight:400; transition:transform .2s;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details > div{padding:0 26px 24px 62px; font-size:14.5px; color:var(--muted); line-height:1.85;}

/* ====================================================================
   最終CTA
   ==================================================================== */
.final-cta{background:radial-gradient(120% 130% at 50% 0%, #2b6bf2, var(--blue)); color:#fff; text-align:center; padding:88px 0;}
.fc-eyebrow{font-family:"JetBrains Mono",monospace; font-size:14px; letter-spacing:.3em; color:rgba(255,255,255,.7); margin-bottom:18px;}
.fc-title{font-size:44px; font-weight:900; line-height:1.4; margin-bottom:20px;}
.fc-title .mk{position:relative; z-index:1;}
.fc-title .mk::after{content:""; position:absolute; left:-4px; right:-4px; bottom:4px; height:12px; background:var(--cta1); z-index:-1; border-radius:3px;}
.fc-sub{font-size:16.5px; color:rgba(255,255,255,.9); line-height:1.85; margin-bottom:34px;}
.fc-btn{font-size:23px;}
.fc-mail{margin-top:22px; font-family:"JetBrains Mono",monospace; font-size:16px; color:#fff; letter-spacing:.04em;}

/* ====================================================================
   footer
   ==================================================================== */
.ft{background:var(--navy); color:#cfd8ec; padding:64px 0 40px;}
.ft .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
.ft .name{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:28px; color:#fff;}
.ft .name .at{color:#6ea0ff;}
.ft .corp{font-size:14px; margin-top:10px; line-height:1.9;}
.ft .corp-link{color:#fff; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); transition:border-color .2s;}
.ft .corp-link:hover{border-color:#6ea0ff;}
.ft .corp-site{display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px;
  padding:9px 16px; font-size:13.5px; font-weight:700; color:#dbe6fb; text-decoration:none; transition:background .2s, border-color .2s;}
.ft .corp-site:hover{background:rgba(110,160,255,.18); border-color:#6ea0ff; color:#fff;}
.ft .corp-site svg{width:16px; height:16px; color:#6ea0ff;}
.ft .corp-site-ar{font-size:13px; opacity:.8;}
.ft .ftnav{display:flex; gap:40px;}
.ft .ftnav a{font-size:14px; color:#cfd8ec;}
.ft .ftnav a:hover{color:#fff;}
.ft .copy{margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#8295bd;}

/* ====================================================================
   お問い合わせフォーム（モーダル）
   ==================================================================== */
.modal-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center;
  padding:40px 18px; background:rgba(15,28,62,.55); backdrop-filter:blur(4px); overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;}
.modal-overlay.open{opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s linear 0s;}
.modal{position:relative; width:100%; max-width:560px; background:#fff; border-radius:24px;
  box-shadow:var(--shadow-lg); padding:40px 44px 36px; margin:auto;
  transform:translateY(20px) scale(.98); transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.modal-overlay.open .modal{transform:none;}
.modal-close{position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--gray); color:var(--muted); font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
.modal-close:hover{background:var(--blue); color:#fff;}
.modal-head{margin-bottom:24px;}
.modal-head .eyebrow{margin-bottom:8px;}
.modal-title{font-size:30px; font-weight:900; color:var(--navy);}
.modal-lead{font-size:14px; color:var(--muted); line-height:1.75; margin-top:10px;}

.cform{display:flex; flex-direction:column; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:14.5px; color:var(--navy);
  display:flex; align-items:center; gap:9px;}
.field .req,.field .opt{font-size:11px; font-weight:900; padding:2px 9px; border-radius:999px; letter-spacing:.02em;}
.field .req{background:#e8341c; color:#fff;}
.field .opt{background:var(--gray); color:var(--muted);}
.field input,.field textarea{font-family:"Noto Sans JP",sans-serif; font-weight:500; font-size:15px; color:var(--ink);
  background:var(--tint2); border:2px solid var(--line); border-radius:12px; padding:13px 15px; line-height:1.6;
  transition:border-color .15s, background .15s; width:100%;}
.field textarea{resize:vertical; min-height:118px;}
.field input::placeholder,.field textarea::placeholder{color:#9aabc6;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.field .err{display:none; font-size:12.5px; font-weight:700; color:#e8341c;}
.field.invalid input,.field.invalid textarea{border-color:#e8341c; background:#fff5f4;}
.field.invalid .err{display:block;}

.cform-submit{width:100%; padding:18px 24px; font-size:19px; margin-top:6px;}

/* checkbox group */
.checks{display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; margin-top:2px;}
.check{display:flex; align-items:center; gap:9px; font-family:"Noto Sans JP",sans-serif; font-weight:500;
  font-size:14px; color:var(--ink); cursor:pointer; user-select:none; padding:9px 12px;
  background:var(--tint2); border:2px solid var(--line); border-radius:11px; transition:border-color .15s, background .15s;}
.check:hover{border-color:#bcd0ee;}
.check input{appearance:none; -webkit-appearance:none; flex:none; width:19px; height:19px; margin:0;
  border:2px solid #b6c4dc; border-radius:6px; background:#fff; cursor:pointer; position:relative; transition:background .15s, border-color .15s;}
.check input:checked{background:var(--blue); border-color:var(--blue);}
.check input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);}
.check:has(input:checked){border-color:var(--blue); background:var(--tint); color:var(--navy); font-weight:700;}
@media(max-width:560px){.checks{grid-template-columns:1fr;}}
.cform-note{font-size:12px; color:var(--muted); line-height:1.7; text-align:center; margin-top:4px;}
.cform-note b{color:var(--ink); font-family:"JetBrains Mono",monospace; font-weight:500;}
body.modal-open{overflow:hidden;}

@media(max-width:560px){
  .modal{padding:34px 22px 28px; border-radius:20px;}
  .modal-title{font-size:25px;}
}

/* reveal — base state visible; only hidden once JS opts in (.reveal-on on <html>) */
.reveal-on .rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal-on .rv.in{opacity:1; transform:none;}

/* responsive */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-vis{height:380px; order:-1;}
  .bubble h1{font-size:38px; white-space:normal;}
  .value-grid,.steps{grid-template-columns:1fr;}
  .pain-grid,.qa-grid{grid-template-columns:1fr;}
  .uc2-grid,.stat-grid{grid-template-columns:1fr 1fr;}
  .cost-grid{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr 1fr;}
  .fstep:not(:last-child)::after{display:none;}
  .price-grid,.subsidy{grid-template-columns:1fr;}
  .diag-row{grid-template-columns:1fr;}
  .diag-conn{transform:rotate(90deg); margin:4px 0;}
  .fc-title{font-size:30px;}
  .nayami-grid{grid-template-columns:1fr;}
  .nayami-figure{margin:0 auto;}
  .step .arrow-r{display:none;}
  .nav .lnk{display:none;}
  .sec-title{font-size:30px;}
}